OmniAICreator/Qiita-1.07M huggingface dataset:
RHEL7へPBS Professionalをインストールする際の注意事項

# 概要

会社でPBS Professionalを導入したので、その時に注意したことを共有します。基本的にはアルテアエンジニアリング株式会社が提供するPBS Professional Installation & Upgrade Guideを参照し、不明な点はサポートに問い合わせてください。2021年7月27日現在のPBS Professionalの最新バージョンは2021.1.1です。

# 環境

OS: Red Hat Enterprise Linux 7.9

# 用語

- PBS Complex：PBS Professionalでジョブを管理するクラスター全体のこと
- Server Host：ジョブスケジューリングを行うホストのこと。通常はヘッドノード。
- Execution Host：ジョブを実行するするホストのこと。計算ノード。
- Client Host：ジョブを登録するために使用するホストのこと。ヘッドノードから登録する場合は不要。

# 

# インストール準備

- ハードウェア要件を満たしていることを確認すること。特にディスクの空き容量に注意する。
- ネットワーク設定
    - PBS Proが使用するポートを開放する。Installation & Upgrade Guideの4.6 Ports Used by PBSを参照。
    - ServerおよびMoMのホスト名とIPアドレスが1対1対応していることを確認する。これが間違っているとインストール後、Vnodeの登録がうまくいかないことがある。
- ALMサーバー（ライセンスサーバー）にアクセスできること。
    - ライセンスサーバーのポートが開いていることを確認（デフォルトは6200）
    - ALMサーバーとの通信がうまくいかないとライセンス認証ができないのでジョブスケジューリングもできない。PBS ServerとALMサーバーが異なる場合は特に注意すること。
- PBS data service management用アカウントを作成する。
    - デフォルトはpbsdata。デフォルト以外を作成して使用する場合、インストール時に設定が必要。

# インストール

- インストールはExecution Host⇒Server Hostの順に行う。
    - Execution Hostへpbs-executionをインストールする。
    - Server Hostへpbs-serverをインストールする。
    - Server HostをExecution Hostとしても使用する場合、インストール後に/etc/pbs.confの修正を行ってからPBSを起動する。
- pbs-serverをインストール後、Server Host上でqmgrコマンドを使いExecution HostをVnodeとして登録する。
    - ホスト名＝Vnode名
    - Server HostもExectution Hostとして利用する場合、Server Host自体はVnodeとして登録する必要はない。
- インストール後にインストールが正常に行われたか確認を行う。特に以下の点に注意すること。
    - 各ホストのライセンス認証ができているか。
    - 各ホストの名前解決が正しくされているか。
    - ジョブ登録とスケジューリングができるか。
Gem fog-awsを使用して画像アップロード機能を実装しようとしてハマった話

# 起こった出来事
現在作成しているアプリで画像アップロード機能を実装しようと思い、fog-aws carrierwave を組み合わせてS3にアップロードしようと思ったところでかなりの時間を消費していましたが無事に解決できましたので、それまでの過程を備忘録として記入したいと思います。

# そもそも何故ダメだったのか

```argumenterror ( is not a recognized provider):````というエラーが出ており、そもそもプロバイダー自体が読み込めていないと判断し

carriewave.rbとimage-uploder.rbでaws設定関連の記述ミスや環境変数がちゃんと適用されてるか、バケット名が間違えてないかなど思い当たるところは片っぱしから調べましたが全部あっており、完全にわからない状態でした。

```carriewave.rb
require 'carrierwave/storage/abstract'
require 'carrierwave/storage/file'
require 'carrierwave/storage/fog'

CarrierWave.configure do |config|
  case Rails.env
  when 'development', 'test'
    config.storage = :file
    config.cache_storage = :file
  else
    config.fog_credentials = {
      provider: 'AWS',
      aws_access_key_id: Rails.application.credentials.aws[:access_key_id],
      aws_secret_access_key: Rails.application.credentials.aws[:secret_access_key],
      region: 'ap-northeast-1',
    }
    config.fog_provider = 'fog/aws'
    config.storage :fog
    config.cache_storage = :fog
    config.fog_directory = 'バケット名'
    config.fog_public = false
  end
end
```

```image-uploder.rb
class ImageUploader < CarrierWave::Uploader::Base
  include CarrierWave::MiniMagick

  if Rails.env.production?
    storage :fog
  else
    storage :file
  end

  def store_dir
    "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
  end

  def default_url(*_args)
    '/images/' + [version_name, 'default.png'].compact.join('_')
  end

  version :thumb do
    process resize_to_fit: [128, 128]
  end

  version :medium do
    process resize_to_fit: [360, 360]
  end

  def extension_whitelist
    %w[jpg jpeg gif png]
  end

end
```
# 解決策

しかし見落としがありました、私が参考にしたサイトには記述されていませんでしたが
```config.asset_host = "https://s3.ap-northeast-1.amazonaws.com/バケット名"```
この記述をcarriewave.rbに書いているサイトがあり、まさかと思い試しに追記してみたらこれが動くんですよね。

```carriewave.rb
require 'carrierwave/storage/abstract'
require 'carrierwave/storage/file'
require 'carrierwave/storage/fog'

CarrierWave.configure do |config|
  case Rails.env
  when 'development', 'test'
    config.storage = :file
    config.cache_storage = :file
  else
    config.fog_credentials = {
      provider: 'AWS',
      aws_access_key_id: Rails.application.credentials.aws[:access_key_id],
      aws_secret_access_key: Rails.application.credentials.aws[:secret_access_key],
      region: 'ap-northeast-1',
    }
    config.fog_provider = 'fog/aws'
    config.storage :fog
    config.cache_storage = :fog: 
　　 config.asset_host = "https://s3.ap-northeast-1.amazonaws.com/バケット名"
    config.fog_directory = 'バケット名'
    config.fog_public = false
  end
end
```
以上です。
Nuxt.jsのアプリにGoogle Analyticsを導入する方法

Nuxt.js製のアプリにGoogle Analyticsを導入する際に、少しハマりましたので導入方法をまとめます。

## 1. Google Analyticsのプロパティを追加する
Nuxt.js で Google Analytics を利用する場合、Google Analytics の最新バージョンのプロパティ`Google アナリティクス 4 プロパティ` は利用できず、`ユニバーサル アナリティクス プロパティ`を利用する必要があります。

下記の方法で、プロパティを作成します。

[アナリティクスで新しいウェブサイトの設定を行う（ユニバーサル アナリティクス） - アナリティクス ヘルプ](https://support.google.com/analytics/answer/10269537)

次のステップで`@nuxtjs/google-analytics` を利用予定ですが、リポジトリに、[nuxt-community/google-analytics-module](https://github.com/nuxt-community/google-analytics-module)

>**⚠ WARNING: This package does not support GA4. **
This package currently only supports GA3/UA

とあり、`GA4(Google アナリティクス 4 プロパティ)`が未対応とのことです

プロパティの名称がややこしいので、早見表を作りました。

| プロパティ名 | 略称 | `@nuxtjs/google-analytics`の対応可否 | Google Analytics IDのプレフィクス  |
|--|--|--|--|
| Google アナリティクス 4 プロパティ | GA4 | × | `G-` |
| ユニバーサル アナリティクス プロパティ | GA3/UA | ○ | `UA-` |

私の場合、このプロパティのバージョンに気づかず、`GA4`のプロパティを作成し、`G-` 始まりのIDを設定して、トラッキングできずハマってしまいました。

## 2. `@nuxtjs/google-analytics` をインストール、セットアップする

下記のドキュメントに詳しく記載がありますので、ご参考ください。

[Setup - Google Analytics Module for Nuxt](https://google-analytics.nuxtjs.org/setup)
ちょっとHTML, CSS, JavaScriptを試したいときに使えるChromeの拡張機能をご紹介！

# はじめに
こんにちは。東京のコロナ感染者すごい増えてますね... :innocent: 
重傷者が少ないことを祈るばかり :pray:

さて、今回は知人に紹介した拡張機能なのですが、これいいぞ！ってあまり宣伝している人がいなかったので、宣伝しようと思います！

# 結論
これです↓

https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh

# なにができるのか
ちょっとHTML, CSS, JavaScriptを試せるエディタが出現します！
コンソールも出るので、JavaScriptのデバッグもできます :ok_hand:

![a.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86984/965e0fd0-efe0-35a9-edbb-d82446cda8a5.png)

## ライブラリも簡単に追加できます:+1:
![1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86984/510d2796-a175-e54f-acd5-9b53603c9011.png)


# おわりに
今回は低糖質な記事ですが、とても便利な拡張機能のご紹介でした。
ぜひインストールしてみてはいかがでしょうか！

それでは！
【AWS】CodeDeployを実装した時のエラーとその解決まで

# はじめに
CodeDeployでデプロイ自動化を実装しようとした時、エラーがいくつか出たため記録として残します。
ほぼ凡ミスのような感じですが、参考になれば幸いです。

# 条件
```bash
macOS: "11.2.3 Big Sur"

php artisan -V
# > Laravel Framework 6.20.30

php -v
# > PHP 8.0.8 

nginx -v
# > nginx version: nginx/1.12.2

git --version
# > git version 2.32.0
```

# 1. DownloadBundleでエラー
![スクリーンショット 2021-07-27 10.14.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1379469/6b98849c-5d53-07c0-bd5c-2d3eb0c5383a.png)
![スクリーンショット 2021-07-27 16.30.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1379469/868d54f8-84d5-b9a8-6f84-3a0fd1026173.png)

```
The specified key does not exist.
（訳）指定されたキーは存在しません。
```

## 解決

これは単純に、`.circleci/config.yml`ディレクトリに`s3へのアップロード`の記載をしていなかったことが原因でした。

```php:config.yml
   // 省略
      - run:
          name: upload artifacts to s3
          command: aws s3 cp lantern.zip s3://${AWS_S3_BUCKET_NAME}
   // 省略
```

## 参考
https://docs.aws.amazon.com/ja_jp/codedeploy/latest/userguide/troubleshooting-deployments.html#troubleshooting-deployments-downloadbundle

# 2. AfterInstallでエラー : ①
![スクリーンショット 2021-07-27 16.48.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1379469/5bf25da7-6b50-a310-53cb-d89004ebb36d.png)
![スクリーンショット 2021-07-27 17.30.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1379469/4939c55d-41bc-7fd1-456d-270d3a945695.png)

```
Script does not exist at specified location
（訳）スクリプトが指定された場所に存在しません
```
## 解決
原因は、`AfterInstall`イベントで使用されていたシェルスクリプトが反映されていなかったことでした。
![スクリーンショット 2021-07-27 17.12.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1379469/f13256ac-f132-6ba0-a90b-a1e63616378f.png)
`scripts/after_install.sh`を追加したけれど、これが本番環境の方には反映されていませんでした。

なので、本番環境の方に同じようにディレクトリとファイルを作成。

```bash
# ① scriptsディレクトリ作成
$ mkdir scripts

# ② scriptsディレクトリ内に移動して、after_install.shファイルを作成
[scripts] $ touch after_install.sh

# ③ ファイルの中を編集
[scripts] $ vi after_install.sh
```
以下は、`after_install.sh`ファイルの記述内容です。

```terminal:after_install.sh
#!/bin/bash

set -eux

cd ~/Lantern/lantern
php artisan migrate --force
php artisan config:cache
```

よし、これでいけるだろう！と思い、もう一度デプロイ。。。

# 3. AfterInstallでエラー : ②
![スクリーンショット 2021-07-27 16.49.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1379469/28b7118b-ac6e-4ced-ab31-c5aeecc50f4f.png)

```
Could not open input file: artisan
（訳）入力ファイルを開くことができませんでした：artisan
```

`artisan`コマンドが使えないということは指定しているディレクトリが違うのかな...と思ったので確認。
案の定、ディレクトリを指定しているところが違っていたため以下のように修正。

```diff:after_install.sh
- cd ~/Lantern/lantern
+ cd ~/Lantern/lantern-ssh-deploy
  php artisan migrate --force
  php artisan config:cache
```
よし、これでいけるだろう！！

![スクリーンショット 2021-07-27 17.55.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1379469/f42e8bc2-4c4b-cc30-ec69-2499f9e0c19f.png)

無事デプロイ完了！

# おわりに
改めて振り返ると、ディレクトリの指定ミスがちらほらありました...。
少しはAWSと仲良くなれた気がします。
# 参考
https://qiita.com/wMETAw/items/d91f4706be775e1c320c
PythonでSAS/Stataファイルを読み込む

## SASファイルとStataファイル

SAS (Statistical Analysis System)ファイルはビジネスアナリティクスや生物統計学で多く使われています。
Stata (Statistics + Data)ファイルは経済学や疫学などの学術的な社会科学研究で使われています。

## SASファイルの読込み

一般的なSASファイルの拡張子は.sas7bdatになります。読込みはsas7bdatパッケージのSAS7BDAT関数で行います。

```python
from sas7bdat import SAS7BDAT

with SAS7BDAT('test.sas7bdat') as file:
    df = file.to_data_frame()
```

## Stataファイルの読込み

Stataファイルの拡張子は.dtaになります。pandasを使って読み込めます。

```python
import pandas as pd

df = pd.read_stata('test.dta')
```
AWS Amplify の Todo アプリチュートリアルをやってみた

## 目的

こちらの[AWS Amplify チュートリアル](https://docs.amplify.aws/start/q/integration/react)を通して AWS の Amplify に触れ、主にどういったサービスがあるのかをざっくりと知る事。



## 主な使用技術

React
Redux Toolkit
Material-Ui
React-Hook-Form
Amplify

公式サイトでは言語がJS、状態管理がHooks、入力フォームがuseStateでの管理となっておりました。
学習目的の為少しでもオリジナリティーを持たせることを考え、言語をTS、状態管理をRedux Toolkit、入力フォームをReact-Hook-Formに変更し簡単なバリデーションを付けました。

## UI
![Screen Shot 2021-07-27 at 14.19.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/825163/0e416bd8-0246-6a4c-1c3e-af1a144b6f51.png)
![Screen Shot 2021-07-27 at 14.19.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/825163/c0cb175c-bc35-4467-8ac0-02d058710031.png)

## ログイン / サインアップ
![Screen Shot 2021-07-27 at 14.33.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/825163/99ebe3cb-b109-816c-2e90-3ff80a04adec.png)
![Screen Shot 2021-07-27 at 14.33.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/825163/933fdc53-ff1b-9fd5-b87b-f47e57ab90b7.png)

## 使用したAmplifyのサービス

- **API**
- **Auth**
- **Hosting**

## 認証のためのログイン・サインアップページについて

自分でデザインなども含めてログインページをどうしても作らなければいけない場合でなければ、amplifyのサービスでコンポーネントが用意されているのでインポートすればそのまま使えてしまいます。
使用したいコンポーネントをインポートして AmplifyAuthenticatorでラップします。
今回はサインアップに必要なユーザーデータを、Username, Email, Passwordの３つにしました。


https://zenn.dev/dove/articles/63494de652511c

```react:App.tsx
import Amplify from 'aws-amplify';
import {
  AmplifyAuthenticator,
  AmplifySignUp,
  AmplifySignOut,
} from '@aws-amplify/ui-react';

const App: React.VFC = () => {
 return return (
    <AmplifyAuthenticator>
      <AmplifySignUp
        slot="sign-up"
        formFields={[
          {
            type: 'username',
          },
          {
            type: 'email',
            inputProps: { required: true, autocomplete: 'username' },
          },
          {
            type: 'password',
            inputProps: { required: true, autocomplete: 'new-password' },
          },
        ]}
      />
      <AmplifySignOut />
    </AmplifyAuthenticator>
  );
}
```

## GraphQL

これまでAPI通信を行う際には、基本的なHTTPメソッドである **get**, **post**, **put**, **delete** などを用いてコードを書いてきましたが、GraphQLでは記述の仕方が異なります。

- ### Query
getに当たる部分

- ### Mutation
post, put, deleteに当たる部分。
引数などを用いて変更を加える。

- ### Subscription
情報を観察し、自動的に変更を反映させる。Twitterのタイムラインなどに使われる機能。
（今回は使用しない）

これら全て初めて見るものでありそれらがどういったものなのかを知る為にドキュメントを最初にひたすら読み込む必要があった。しかし今回のようなTodoアプリ程度であれば、Subscription機能を用いないのでQueryとMutationの使い方を公式ドキュメントで参考しデータの取得、更新を行う事ができた。

https://docs.amplify.aws/lib/graphqlapi/mutate-data/q/platform/js#mutations

## 感想
GraphQLでは型関係の対処の所がとても辛い部分であり、どうしても解決できない部分はanyを使用してしまっている部分があるので、今後アップデートしていきたい。
ただ最終的になんとか動くものは作れた事と、amplifyのサービスを実際に使用して大まかにでも知ることができた事は今後にとても役に立つと感じた。
ffmpegを使ってpngをqtm


#png連番をqtmに変換するコマンド

フォルダ
　└input
　└output

インプットの中に連番データを入れてoutputに動画を書き出すようにする。

```:ffmpeg
$ ffmpeg -r 30 -i /'inputのパス'/image_%04d.png -vcodec prores/'outputのパス' /output.mov

```
>-r はフレームレート　-iは入力ファイルの指定　-vcodec コーデックの指定

[ffmpegの使い方やコマンド一覧をまとめました](https://photo-tea.com/p/17/ffmpeg-command-list/)
上記のサイトを使って調べました。
TypeError: this.getOprions is not a functionでエラーが出た時の対処法

既存のrailsアプリケーションにReact_on_railsを導入するとscssが効かなくなり、詰まったのでこの記事を書きました。

## 解決法
sass-loaderのバージョンを12.1.0から10に変更

## 詰まった原因
package.json上でsass-loaderのバージョンを10に変更していたのですが、
`yarn upgrade
`を実行するとsass-loaderが最新の12.1.0に置き換わっていました。
package.json上でsass-loaderを変更するのではなく、コマンドで
`yarn upgrade sass-loader@10
`を実行するとエラーが消えました！




## 参考記事

https://stackoverflow.com/questions/66082397/typeerror-this-getoptions-is-not-a-function
PayPal モバイルアプリ内課金


## 概要
Native Checkout SDKは、既存のサーバーサイドとの統合を維持したまま、インコンテクストのモバイル体験を提供します。このSDKは、PayPalウェブチェックアウトと同等の機能を維持しながら、モバイルユーザーにはより速く、より合理的な体験を提供します。

https://developer.paypal.com/docs/business/native-checkout/
IllustratorのCOMライブラリがWindows Updateで壊れる

以前から何度か遭遇していたのですが、特にこのことに関しての記事は無さそうだったので
（Adobeのフォーラムに質問はありましたが…）
記事に書いておこうと思います。

#何したら何が起こるの？

####FU(Feature Update)等の大型なWindowsUpdateをすると、IllustratorのCOMライブラリ（C#等のプログラムから操作できるようにするやつ）が壊れて使用できなくなる場合があります。

##IllustratorのCOMライブラリって？

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149339/2bd233f1-d54e-ef1c-8ba8-91871838f69a.png)

VisualStudioなら「参照」→「参照の追加」→「COM」のところから追加できるこういうやつです。

Illustratorのバージョンごとに名前が違ったり、名前は同じでもライブラリのバージョンが違ったりします。
※インストールしているバージョン分しか表示されません

##壊れたらどうなるの？

壊れたら、今まで実行できていたプログラムでいきなり下記のエラーが表示されます。

> 型 'System.__ComObject' の COM オブジェクトをインターフェイス型 'Illustrator.Application' にキャストできません。IID '{95CD20AA-AD72-11D3-B086-0010A4F5C335}' が指定されたインターフェイスの COM コンポーネント上での QueryInterface 呼び出しのときに次のエラーが発生したため、この操作に失敗しました: インターフェイスがサポートされていません (HRESULT からの例外:0x80004002 (E_NOINTERFACE))。


正直エラーだけ見ても、「どないしたらええねん:joy:」状態になります。

初めて遭遇した時は何が悪いのかわからず、解決にめちゃめちゃ時間かかりました…

##解決方法は？

ぶっちゃけ無いに等しいです！！:innocent:
下記以外の解決方法があればドシドシ教えて欲しいです！！

今の所、私がわかっている解決方法は、
####Illustratorをアンインストールし、再度Illustratorをインストールすることです。

そうすると、先ほどのエラーは解消します。
COMライブラリが正しくインストールし直されるんでしょう。


わかってればなんてこと無いのですが、再インストールもそこそこ時間かかるので、出来ればそれ以外の解決方法が知りたいところです。

##注意点
再インストールすれば解消しますが、今はAdobeの方針で
***最新版と１つ前のバージョンしかインストールできない***ようになっているので
例えば今IllustratorCC2019が入っていて、それが壊れたとしてアンインストールしてしまうと

今は最新のIllustrator2021と、1つ前のIllustrator2020しかインストールできません！
バージョンが変わってしまうと色々と問題が起こったりする場合があるので
変えたくない時もあるのですが、強制で変えないといけなくなります。。。:cry:

実際にこういう問題があったりします。


https://www.ddc.co.jp/dtp/archives/20200324/170000.html



それでは！
Unity2019.1.7f1のiOSビルドで、大きいファイルがアップロード出来ない

Unity2019.1.7f1のiOSビルドから、UnityWebRequestを使用して動画を送信しようとしたところ、アップロードされた動画が壊れ再生出来ない状態でした。

今更ながら、2019バージョンですが、備忘録的に残しておきます。

1. 結論
----------
[こちらのフォーラム](https://forum.unity.com/threads/unable-to-post-using-a-unitywebrequest-but-only-on-ios.672697/)を参照しました。

>You could think that the issue is on our side, but in fact if we update the "streamSize" value of the generated UnityWebRequest.mm then it works at 100%. 

上記のように、iOSビルドで生成された UnityWebRequest.mm の [streamSize] を大きい値に変更すると、正常に動画を送信することが出来ました。
2019.2以降では正常に動作するみたいです。

![xcode_unitywebrequest.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207069/f111ccc6-8e33-1669-306f-7230c0d29ae0.png)

2. UnityWebRequestでファイルを送信する
----------
自分用にファイル送信のコード残しておきます。

```c#:SendCapture.cs
string filePath = "端末のファイルパス";
string fileName = "test"
string uploadURL = "https://test.com/xxx"

public IEnumerator UploadFile()
{
    byte[] movieByteArray = File.ReadAllBytes(filePath);
    
    // formにバイナリデータを追加
    WWWForm form = new WWWForm();
    form.AddBinaryData("file", movieByteArray, fileName, "video/mp4");

    // HTTPリクエストを送る
    UnityWebRequest request = UnityWebRequest.Post(uploadURL, form);
    
　　　　　　　　yield return request.SendWebRequest();
    if (request.isNetworkError || request.isHttpError)
    {
        // POSTに失敗した場合，エラーログを出力
        Debug.Log("responseCode / error : " + request.error);
    }
    else
    {
        // POSTに成功した場合，レスポンスコードを出力
        Debug.Log("responseCode / success : " + request.responseCode);
    }
}
```
「gcloud compute ssh」コマンドでGCPのCompute Engineへの接続に苦戦した話

こんにちは、けいすけです。

今回はgcloudコマンドでCompute Engineにssh接続する際、めちゃめちゃ苦労したよ。という話です。
結論はしょうもないですが、もし同じ失敗をしている人がいたら参考にしていただけると幸いです。

### gcloudコマンドでのssh接続について
[ドキュメント](https://cloud.google.com/compute/docs/instances/connecting-to-instance?hl=ja)を参考にコマンドを実行すれば、普通は簡単に接続できると思います。
しかし私はめちゃめちゃ苦労してしまうのでした。。
ドキュメント通り、以下のコマンドを実行します。

プロジェクト名：tutorial-20210727
地域：us-central1-a
インスタンス名：instance-1
としています。

```
$ gcloud compute ssh --project=tutorial-20210727 --zone=us-central1-a instance-1
Enter passphrase for key '/Users/adachikeisuke/.ssh/google_compute_engine': 
adachikeisuke@34.72.137.84: Permission denied (publickey).
ERROR: (gcloud.compute.ssh) [/usr/bin/ssh] exited with return code [255].
```
しかし、passphraseというものの入力を求められ、何も入力せずにエンターを押すとそのままエラーとなってしまいます。
passphraseを求められるなんて、ドキュメントにはどこにも書いていません。

### なぜssh接続が失敗するのか
これは一体どういう状況なのかを説明します。
実は以前GCEのインスタンスにssh接続を試みた際、passphraseを自分で登録していたようなのです。
私はそのことを全く覚えていませんでした。
自分のパソコン(mac)の`~/.ssh`配下に`google_compute_engine`と`google_compute_engine.pub`が存在している方はまさにこのパターンだと思います。
`google_compute_engine`は秘密鍵で`google_compute_engine.pub`は公開鍵です。
gcloudコマンドで接続すると、秘密鍵と公開鍵を自動で作成してくれ（この際にpassphraseの設定が行われます。）、この鍵を使用して接続を行ってくれます。
ですので、gcloudコマンドを使用すれば接続の際に鍵の存在を意識しなくても良いのです。

###解決方法
原因がわかってしまえば簡単に解決できます。
まずは`~/.ssh`配下の`google_compute_engine`と`google_compute_engine.pub`を削除してください。
そして、再びインスタンスにssh接続しに行きます。

```
$ gcloud compute ssh --project=tutorial-20210727 --zone=us-central1-a instance-1
WARNING: The private SSH key file for gcloud does not exist.
WARNING: The public SSH key file for gcloud does not exist.
WARNING: You do not have an SSH key for gcloud.
WARNING: SSH keygen will be executed to generate a key.
Generating public/private rsa key pair.
Enter passphrase (empty for no passphrase): 
```
すると以前とは異なる表示が出ます。
ここで何か文字列を入力するとそれがpassphraseとして登録されます。
何も入力しなければpassphraseなしでインスタンスに接続します。
`~/.ssh`配下を見に行くと`google_compute_engine`と`google_compute_engine.pub`が作成されていると思います。

以上です。
最後まで読んでいただきありがとうございます。
JavaScriptを基本からまとめてみた【7】【appendChildメソッド】

##はじめに

####学習するに至った経緯

2020年より、未経験からエンジニアへの転職を目指し、某プログラミングスクールへ通う。
入学後、『Ruby』を未経験から学ぶ人が多いのと『Ruby』の求人が思っていた以上に少ないので、
卒業後、フロントエンドのエンジニアを目指す事に。
Javascriptの学習した事を言語化し、認識の深化による備忘録として記載。

##appendChild()の使い方
appendChild()は、特定の親ノードの子ノードリストの末尾にノードを追加する。
親要素.appendChild(追加したい要素)　という形で使われ、親要素の末尾に要素が追加される。

例：ulタグにliタグを追加する場合、下記のようにulタグの末尾に追加される。

```html
<ul>
<li>①</li>
<li>②</li>
</ul>
　　　⬇️
<ul>
<li>①</li>
<li>②</li>
<li>③追加</li>
</ul>
```
##appendChild()を使ったデモ
親要素がul、追加したい要素をliというデモで、フォームに入力したテキストが、liとして追加される。
onchangeで入力欄を変更するとイベントが発火。
createElementで生成されたli要素に、入力テキストがセットされ、appendChildによってulタグ末尾に追加される。

```html
<span>ここに追加されます↓</span>
<ul id="frame">
</ul>
<input type="text" id="input_form" onchange="addList()">
<input type="button" value="削除" onclick="deleteList()">
```

```css
li {
  margin-left: 10px;
}
input {
  display: block;
  margin-top: 5px;
}
#frame {
  background-color: #A9E2F3;
  padding: 10px;
  max-width: 300px;
}
```
```javascript
function addList() {
  var input_area = document.getElementById('input_form');
  var input_value = input_area.value;
  var li_text = document.createElement('li');
  li_text.innerHTML = input_value;
  
  var parent = document.getElementById('frame');
  parent.appendChild(li_text);
  input_area.value = '';
}

function deleteList() {
  var parent = document.getElementById('frame');
  parent.innerHTML = '';
}
```

##参考サイト
[appendChild()の使い方とデモ【JavaScript】]
(https://web-tsuku.life/appendchild-javascript/)
MLflowのProductionのモデルのバージョンの確認方法

# 記載内容
MLflowで管理しているモデルについて、実行時のログに、バージョン番号も記録したい。
Productionのステージにあるモデルのバージョン番号の確認方法を調査する。

# MLflowのProductionのモデルのバージョンの確認方法
REST APIで実行したら、レスポンスヘッダーにモデルバージョン番号が入ってないかな、
モデルをロードした場合は、そのモデルがバージョン番号持ってないかな、
と期待したのですが、ありませんでした。

MLflowに対して、モデル名でModelVersionを検索して、ステージがProductionのモデルのバージョン番号を確認する必要があるようです。

# REST APIで確認する方法

Search ModelVersionsが使えます。

[mlflow document > Search ModelVersions](https://www.mlflow.org/docs/latest/rest-api.html#search-modelversions)

リクエストデータのfilterに、```"name='my-model-name'"```といったように、モデル名を絞り込み条件に入れてリクエストすると、[ModelVersion]の配列が返ってきます。current_stageがProductionのModelVersionのバージョン番号を確認します。

残念ながら、ステージでの絞り込みは現状対応していないようです。

>String filter condition, like “name=’my-model-name’”. Must be a single boolean condition, with string values wrapped in single quotes.


# Python APIで確認する方法

mlflow.tracking.MlflowClient.search_model_versionsが使えます。

[mlflow document > mlflow.tracking.MlflowClient.search_model_versions](https://www.mlflow.org/docs/latest/python_api/mlflow.tracking.html#mlflow.tracking.MlflowClient.search_model_versions)

REST APIと同じ要領です。メソッドの引数に、"name='my-model-name'"と入れて実行します。

>filter_string – A filter string expression. Currently, it supports a single filter condition either a name of model like name = 'model_name' or run_id = '...'.
ReactNativeでカスタムフォントを使用する

備忘録

関数コンポーネントでカスタムフォントを使っている記事が少なかったのでメモ

#スマホで見るとこんな感じ

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1711764/18f35413-3ac8-2b30-c777-a1d9e8c8a624.png" width=400 />

#環境
使用プラットフォーム：ReactNative + Expo
使用フォント：[Yomogi](https://github.com/satsuyako/YomogiFont)(assetsフォルダ内に入れています)

#カスタムフォントの導入

```App.js
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';
import { HomeScreen } from './src/Home';

export default function App() {

  const Drawer = createDrawerNavigator();

  return (
    <NavigationContainer>
        <StatusBar hidden />
        <Drawer.Navigator initialRouteName="Home">
            <Drawer.Screen name="Home" component={HomeScreen} />
        </Drawer.Navigator>
    </NavigationContainer>
  );
}
```
DrawerNavigatorを使って初期状態にHomeScreenを表示しています。
HomeScreenの特定箇所のテキストにカスタムフォントを適用したいので、Home.jsで作業していきます。

```home.js
import React, { useEffect, useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import * as Font from 'expo-font';

export const HomeScreen = () => {

    const navigation = useNavigation();

    const [fontLoaded, setFontLoaded] = useState(false);

    useEffect(() => {
        const subscription = navigation.addListener('focus', async () => {
            await Font.loadAsync({
                'Yomogi': require('../assets/Yomogi-Regular.ttf')
            }).then(() => {
                setFontLoaded(true);
            })
        });
        return subscription;
    }, []);


    return (
        <View style={styles.container}>
            {fontLoaded &&
            <Text style={styles.hello}>こんにちは</Text>
            }
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: 'pink',
      alignItems: 'center',
      justifyContent: 'center',
    },
    hello: {
        fontSize: 70,
        fontFamily: 'Yomogi',
    }
  });
```
カスタムフォントをロードするためには`expo-font`の`loadAsync`を使います。今回の場合は、`HomeScreen`に`focus`した際にロードを行うようにしました。また、フォントがしっかりロードされてからテキストが描画される必要があるため、`fontLoaded`が`true`の時にテキストが表示されるようにしています。
EC2でWindowsインスタンスを立ててRealityCaptureやーる

# はじめに
EC2でWindowsインスタンス立てて、RealityCaptureやりたいよね

# 導入
1．AMIの選択
Deep Learning系のWindowsPCを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/501ae407-dd20-ae03-b168-5a3e1631adf2.png)

2．インスタンスタイプの選択
g4dn.xlarge
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/efbcb647-eecf-adcc-4c1a-efb0e6511961.png)

3．確認と作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/5d0efdfd-0054-ff4b-26ab-2f396e4ac555.png)

4．インスタンスに接続

RDPクライアントからリモートデスクトップファイルのダウンロード、開いて接続

パスワードを取得（すぐは発行されない、20分待った）。メモっておく。再度インスタンス終了して作成した場合にも必須。その際には取得できない。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/3db9cf73-25a2-bfdf-4e92-55b3c3ce5615.png)

5．Chromeのインストール

6．NVIDIAドライバーのインストール
https://docs.aws.amazon.com/ja_jp/AWSEC2/latest/WindowsGuide/install-nvidia-driver.html

http://www.nvidia.com/Download/Find.aspx

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/9c6c3931-d960-e3ee-1f87-37f8ba70a6e6.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/d07165b2-15e7-3d9b-ae65-72f0641c566a.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/11b7fd9c-3025-d63b-9443-197f2f0ede29.png)

Microsoft Basic Display Adapterを無効にする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/6171a0f9-d336-0eb8-645b-9a90d29d330f.png)

Server Managerから
Media Foundation および Quality Windows Audio Video Experience をインストール
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/19f7afa1-8f37-3efc-8c1e-321174e22a0a.png)

7．インスタンスの再起動

https://docs.aws.amazon.com/ja_jp/AWSEC2/latest/WindowsGuide/optimize_gpu.html

PowerShellを開き、

~~~PowerShell
cd "C:\Program Files\NVIDIA Corporation\NVSMI"
.\nvidia-smi --auto-boost-default=0
.\nvidia-smi -ac "5001,1590"
~~~

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/fab7d742-2077-5097-8e6d-a92b32872ead.png)

8．RealityCaptureのインストールと実行

サンプルのデータセット
https://www.capturingreality.com/advent-calendar-datasets

Cドライブが残り10GB程度なので、100GBくらい増やしておきたい
Dドライブを作成（100GB程度ある）

9．AMIを作成して終了

10．AMIから起動、RealityCaptureを実行

11．ボリュームの作成、インスタンスにアタッチ、ボリュームのスナップショット作成

<!--
12．インスタンスのAMI作成＆終了、ボリュームの削除、スナップショットから復元しアタッチ
アタッチしたがアクセスできなかった
-->

12．Windows ServerのInternetExplorerでファイルダウンロードできない場合の対処方法
Your current security settings do not allow this file to be downloaded

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/bcbf89d1-f92e-cef6-d221-de32d4a7ee53.png)
Laravel Blade のパーツ単体テストをする

## これは何

Laravel の Blade テンプレートのパーツのみを単体テストする方法。
ページ全体のテストより依存関係の少ないパーツのみをテストしたい。


## バージョン情報

php 7.4
laravel/framework 8.40.0

## テスト例

Laravel の Testing の TestCase に `view()`メソッドが生えていました。これは実装をみると TestView クラスを作って返してくれるようです。TestViewクラスは `assertSee()` メソッドなど文字列チェックのメソッドが生えています。

```php

use Illuminate\Foundation\Testing\TestCase

class ClosedPlanIndexTest extends TestCase
{
    public function testIndex(
    ) {
        $this->view('service.parts.hogehoge', [
            'exampleDependencyFlag' => true,
        ])->assertSee(<div>テスト文字列</div>, false);
    }
```

上記の通りHTMLタグも含めた文字列をチェック可能ですが、その場合には`assertSee()`の第２引数の escape 設定を false にする必要があります。これをしないとテスト対象の文字列は `<div>` などの形式なのに `&lt;div&gt;`と比較してしまうことになり、意図しないテスト結果になってしまいます。
ECSのタスク定義で環境変数をS3から取得しようとしてハマったポイント

# やりたかった事
```json
{
    "family": "",
    "containerDefinitions": [
        {
            "name": "",
            "image": "",
            ...
            "environment": [
                {
                    "name": "variable",
                    "value": "value"
                }
            ],
            ...
        }
    ],
    ...
}
```
こんな感じで定義していた環境変数をS3バケットに入れた.envファイルから取得したい。
[公式ドキュメント](https://docs.aws.amazon.com/ja_jp/AmazonECS/latest/developerguide/taskdef-envfiles.html)をみるとenvironmentFilesっていうのでいけそう。

# やってみる
ECSで紐づけていたIAMロールに別途S3へのアクセスを付与する必要がある。
ここは本題ではないので割愛。[こちら](https://dev.classmethod.jp/articles/ecs_ec2_env_s3/)の記事を参考にする。

最初IAMロールにS3の権限なくて怒られたけど、↑を参考にやったら怒られなくなった。
しかしログを確認してみると。migrationでこけてる。。なぜだ。。

# 原因
タスク定義で指定する環境変数はenvironment→environmentFilesの優先順位で動いている。
つまりenvironmentで指定していると上書きしてしまう挙動だった。

## 間違い

```json
  "containerDefinitions": [
    {
     ...
      "environmentFiles": [
        {
          "value": "arn:aws:s3:::sample-bucket/prod.env",
          "type": "s3"
        }
      ],
      "environment": [],
      ...
    }
  ]
```

## 正しい

```json
  "containerDefinitions": [
    {
     ...
      "environmentFiles": [
        {
          "value": "arn:aws:s3:::sample-bucket/prod.env",
          "type": "s3"
        }
      ],
      "environment": null,
      ...
    }
  ]
```
```"environment": null```にする事で上書きされる事なくmigration実行されるようになった。

# どうやらDockerの仕様らしい
ECSのタスク定義で設定したenvironmentとenvironmentFilesは以下のように対応している(はず)。認識間違ってたらコメントください。

| environment | environmentFiles |
| -- | -- |
|docker run --env | docker run --env-file |

```bash
docker run --env 'HOGE=hoge' --env-file='prod.env'
```
こうした場合は--envでの指定が優先される。

https://neos21.net/blog/2020/07/26-02.html#%E3%82%AA%E3%83%97%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E4%BD%B5%E7%94%A8%E3%81%97%E3%81%9F%E3%82%89%E3%81%A9%E3%81%86%E3%81%AA%E3%82%8B%E3%81%8B%EF%BC%9F
IDisposable --メモ--

#Dispose パターン

```csharp
    class Program
    {
        //Dispose(bool disposing)　呼び出し回数チェック用
        public static int i = 1;

        public static void Main()
        {
            var ds = new DisposeSample();
            WriteLine("new DisposeSample()");
            WriteLine("Dispose()実行します。");
            ds.Dispose();
            WriteLine("Dispose()をもう一度実行します。");
            ds.Dispose();
        }
        public class DisposeSample : IDisposable
        {
            // Dispose(bool disposing)を少なくとも1回呼び出したか
            //重複での呼び出し防止
            private bool disposedValue = false; 

            protected virtual void Dispose(bool disposing)
            {
                Console.WriteLine("Dispose呼び出し:"+ i++ +"回目"); ;

                if (!disposedValue)
                {
                    if (disposing)
                    {
                        // マネージ　リソースを　ここで解放
                        WriteLine("■マネージ　リソースを　ここで解放。");
                    }

                    // アンマネージリソース ここで解放する。
                    WriteLine("■アンマネージリソース ここで解放。");

                    disposedValue = true;
                }
            }

            // ファイナライザ ( デストラクタ )
            ~DisposeSample()
            {
                //アンマネージ　リソース　を明示的に解放
                //Dispose()を一度呼んでいれば
                //マネージ　リソース は解放済み　のはず
                Dispose(false);
            }

            // このコードは、破棄可能なパターンを正しく実装できるように追加されました。
            public void Dispose()
            {
                //マネージ　リソース を明示的に解放
                //アンマネージも ついでに? 解放
                Dispose(true);

                //ファイナライザを抑止
                GC.SuppressFinalize(this);

            }

        }

    }

```

#参考

[確保したリソースを忘れずに解放するには？](https://www.atmarkit.co.jp/ait/articles/1710/18/news022.html)
AWS CLIの振り返り ~CloudFormation入門編~

#本記事の目的
JAWS-UG CLI オンラインハンズオンの復習として、ハンズオンで取り上げられたAWSサービスに関する用語と、使用したAWS CLI コマンドを箇条書きでまとめる。
今回はCloudFormation入門編を取り上げる。

#主なAWSサービス用語
####テンプレート
AWSのリソース情報を記述したファイル。

####スタック
テンプレートを用いてプロビジョニングされるリソースの集合体。

#主なAWS CLI コマンド一覧
####テンプレートの検証
```
aws cloudformation validate-template \
  --template-body file://${FILE_CLOUDFORMATION_TEMPLATE}
```
|オプション|引数|必須/任意|備考|
|---|---|---|---|
|--template-body|file://<テンプレートのパス>|任意|このコマンドを実行した後、`echo $?`を実行する事で直前のコマンドの終了ステータスを参照し、0が表示されればばテンプレートは有効である事が確認できる。|

####スタックの作成
```
aws cloudformation create-stack \
  --stack-name ${CLOUDFORMATION_STACK_NAME} \
  --template-body file://${FILE_CLOUDFORMATION_TEMPLATE} #テンプレートのパス(任意)
```
|オプション|引数|必須/任意|備考|
|---|---|---|---|
|--stack-name|スタックの名前|必須||
|--template-body|file://<テンプレートのパス>|任意||

####スタックの一覧表示
```
aws cloudformation list-stacks
```
※スタックのステータスが`CREATE_COMPLETE`と表示されている場合、スタックは正常に作成されている。
※スタックのステータスが`ROLLBACK`と表示されている場合、スタックにエラーが生じているため、スタック関連イベントを参照し原因を特定する。


####スタック関連イベントの詳細表示
```
aws cloudformation describe-stack-events \
  --stack-name ${CLOUDFORMATION_STACK_NAME}
```
|オプション|引数|必須/任意|備考|
|---|---|---|---|
|--stack-name|スタックの名前|必須||

####スタックの削除
```
aws cloudformation delete-stack \
  --stack-name ${CLOUDFORMATION_STACK_NAME}
```
|オプション|引数|必須/任意|備考|
|---|---|---|---|
|--stack-name|スタックの名前|必須||

#参考文献
- AWSCLIコマンドリファレンス:[CloudFormation](https://docs.aws.amazon.com/cli/latest/reference/cloudformation/index.html)
- JAWS-UG CLI専門支部：[ハンズオン(簡易版): CloudFormation入門](http://prototype-handson-cli.s3-website-ap-northeast-1.amazonaws.com/handson_light-aws_service/handson_light-aws_service-cloudformation-novice/index.html)
Reactメモ

##propsの分割代入
propsは最初の段階で分割代入しておくと、それ以降で毎回props.みたいな記述を行う必要がないのでいい感じ

```react
const App = (props) => {
  const { name, age } = props;
  return (
    <div>
      <div>{name}</div>
      <div>{age}</div>
    <div>
  )
}
```
みたいに書くことができる。

##オブジェクトのプロパティの省略記法
オブジェクトのキーとプロパティが同名の場合は省略して記述することができる。

```react
const TestObj = {
  color, //みたいに書くことができる。
  fontSize: "18px"
};
```
##useStateの使い方
reactライブラリからuseStateを取り出してそこからstateを分割代入する形で値を使用する

```react
import React from "react";
import { useState } from "react";

const App = () => {
  //カウントアップのstate
  const [num, setNum] = useState(1);
  //true、falseを切り替えるstate
  const [face, setFace] = useState(true);

  const onClickAdd = () => {
    //クリックされた時に+1をする関数
    setNum(num + 1);
  };

  const onClickSwitchFace = () => {
    //true, falseを切り替える関数
    setFace(!face);
  };

  return(
    <div>
      {/* state表示 */}
      <div>{num}</div>
      {/* クリックされた時にカウントアップする関数を呼び出し */}
      <button onClick={onClickAdd}>ボタン</button>
      {/* faceがfalseの時に顔文字を表示 */}
      {face && <div>（ ;  ; ）</div>}
      {/* クリックされた時にtrue,falseを切り替える関数を呼び出し */}
      <button onClick={onClickSwitchFace}>on/off</button>
    </div>
  )
}

export default App
```

##useEffectの使い方
関数の関心を切り分けるために使用する

#####マウンティング時にのみ実行(コンポーネントが最初にレンダリングされた時のみ)
```react
useEffect(() => {
  console.lot("useEffect");
}, [])
```

#####マウンティング時とnumのstateが変更された時に実行
```react
const [num, setNum] = useState();

useEffect(() => {
  console.lot("useEffect");
}, [num])
```

##if文の省略形
例えば、空文字がstateにsetStateされないようにしたい場合は以下のように記述することができる。

```react
const onPushTodo = () => {
  //if文の省略形
  if (todoText === "") return;
  const pushTodo = [...inCompleteToDos, todoText];
  setInCompleteToDos(pushTodo);
  setTodoText("");
};
```
AdobeAnimateを使って動画からスプライトシートを作成する方法

# はじめに
ゲームエンジンなどでアニメーションを表示させたい場合、たびたびスプライトシートというものを使うことがあります。
AdobeのAnimateを使って動画からスプライトシートを作成する方法をご紹介いたします。
ちなみにスプライトシートってこういうののことを言います↓
![TextureAnimation.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152366/9eef7eb1-8d1d-f1df-6778-21c27a9bda0a.png)



## スプライトシートについて
以下理想的な仕様です。
仕様はこの限りではなく入力ソフト側でカスタマイズすればある程度自由にできますが、シートの汎用性を求めるなら以下の仕様を遵守しましょう。


* スプライトシート全体の解像度は2のべき乗の正方形
    * ゲームエンジンの場合は読み込める解像度が決まっています。スプライトシートも画像なので守りましょう。
* 縦横のグリッド数は同じにする
    * 動画のフレーム数にルート計算して出てくる数字の小数点を繰り上げた値が良いでしょう。

>例）　動画フレーム数=80　の場合
80のルートは "8.944..."　なので9×9マスのグリッドを用意すればいい、という感じになります。

* 1フレームの解像度は自由
    * ただし特別な理由がない限り上記2つを満たした上での最大値を選ぶのが良いでしょう。別に最大値じゃなくて盛大にスプライトシートの領域を残してもいいのですが、そんなのもったいないので普通は最大値で作るべきです。ピクセルは大切にしましょう。

>例）　先ほどの9×9のスプライトシートの場合
スプライトシートの解像度は2のべき乗だから...
2, 4, 8, 16, 32, 64, 128, 256, 512, 1024, 2048, 4096, 8192...  これらの中からスプライトシートの解像度をまず決めます。
8192pxを決めたとすると...
8192/9 = 910.222222222...　なので小数点を切り捨てて答えは
910px
となりました。

## AfterWffectsなどで動画を調整する
いきなりAnimateに動画を持っていきたいのは山々なのですが、まずは最終的なスプライトシートの仕様に合わせて動画を調整します。
ただし僕自身Animateはスプライトシートを作るためにしか使わないので全く詳しくないですが、もしかしてAnimateでできることもAEでやってしまってるかもしれません。
詳しくは書きませんが以下のようなことを行ってください

* 1フレームの解像度に合わせて画像サイズを調整する
    * 前述した計算方法で動画から1フレーム分の解像度を割り出してください。
* アルファ付きの場合は背景色を埋める
    * アルファはスプライトシートにした後で抜きます。
* h264で書き出す
    * AnimateがH264しか対応してないためです。つまりアルファ付きHAPとかProresなんかが読めないわけです。しかし結局書き出したデータはただの画像なので後からアルファを抜くことは容易です。Animateでマスクやキーイングがありそうですが僕はもう書き出してからPhotoshopで抜いてます。


## Animateのタイムラインに読み込む
![TextureAnim_1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152366/6bd48d32-5c1b-741f-4d7f-61d1d99fd47f.gif)
こんな動画を作りました。
仕様は

* 248フレーム　
* 512px × 512px (8192px 16×16グリッド想定で調整済み)


こちらをスプライトシート化するためにまずはAnimateに読み込むところから。

### 新規作成

Animateを開いてプロジェクトを作成します。
解像度は動画の解像度に合わせます。
![1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152366/c377d3ef-4108-e598-76cd-d3a376ca871e.png)

###動画をタイムラインに読み込む

ヘッダメニューの　ファイル＞読み込み＞ビデオの読み込み　
を選択すると読み込みのポップアップが出るので、以下画像を参考にしてファイルパスを指定してください。
あとは次へを押すとタイムラインに動画が読み込まれます。

![2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152366/52d92599-b4a9-f7cc-1a76-32084b7abce7.png)


↓こんな感じです。右のライブラリタブに動画ファイルが配置されているのがわかります。
![3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152366/360fd4b9-30c3-9a54-b798-40a7163f3267.png)

###シンボル化する

タイムラインの動画レイヤを右クリックしてレイヤーをシンボルに変換を選択します。
シンボル化できるとライブラリタブ内にシンボルが作成されます。
![4.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152366/5cc8ebdd-7368-1cc7-b096-3f5a0cb7b3ed.png)

### スプライトシートの設定をする

ライブラリ内のシンボルを右クリックしてスプライトシートを生成...を選択します。
するとスプライトシート生成ポップアップがあらわれます。
あとは解像度や画像形式などを選んで書き出しするとスプライトシートの完成です。
![5.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152366/8b35d112-80a7-a845-5953-3b367f19d7fb.png)

### 完成！

アルファを抜く場合はマスクで同一のスプライトシートを作って別のツールで抜くなどしてます。
![TextureAnimation.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152366/ee5178d0-e09b-cb81-d472-dbeee600df53.png)


### 注意点
スプライトシートは2のべき乗がマストですが、1フレームの解像度はその限りではありません。
ただ1フレームの解像度が指定のコマ数で配置して割り切れず切り捨てた場合はスプライトシートの右と下に不足解像度ぶんの余白が出ますので、Photoshopなどを用いてリサイズしてください。

以上スプライトシートの作り方でした！
MS Learn の勉強2･･･「DAXの概要」の序文2

[<前の備忘録](https://qiita.com/max_kamitoda/items/f3a45776823f5737f144)

どのように勉強したかの備忘録です。

https://docs.microsoft.com/ja-jp/learn/modules/create-measures-dax-power-bi/1-introduction

　**このモジュールを完了すると、次のことができるようになります。**

　**・クイック メジャーを構築する。
　・計算列を作成する。
　・DAX を使用してメジャーを構築する。
　・コンテキストによる DAX メジャーへの影響について確認する。
　・CALCULATE 関数を使用してフィルターを操作する。
　・DAX を使用してタイム インテリジェンスを実装する。**

所感：
　完了すると･･･カンリョーするためには、かなりの熱量と時間が必要なのでしょうね。
　そもそも用語がわかりません。
　一回サラッと読んだぐらいでは、何を言っているのかわからないことは容易に想像がつきます。
　とある『[PowerBI勉強会](https://powerbi.connpass.com/)』でイケメンの某強者が優しく「わかるまで何度も読め！」とおっしゃっていましたが、その通りだと思いました。
　
　とりあえず、何がわからないかを整理するために、わからない用語を羅列してみます。

　・クイックメジャー
　・計算列
　・メジャー（クイックと違うのか？）
　・コンテキスト
　・CALCULATE 関数
　・フィルター（Excel のフィルターと違うのか？）
　・タイムインテリジェンス

　なんだ全部じゃないか。

　とりあえず、今回はここまで。

[→次の勉強へ](https://qiita.com/max_kamitoda/items/5763c081485f7a969d51)
Cloudfrontのホスティングでページリフレッシュすると403が出るときの対処法

単純に自分がエラーページ対処をするのを忘れていました。
Cloudfrontから`Create error page response`をクリックしてその中で設定を行います。 

![Screenshot from 2021-07-27 14-36-34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396623/ba8dfa81-8270-d0a1-02f4-a14538cedb51.png)

Customize error response で `Yes`を選んでResponse page pathに`/index.html`、response codeに`200`を選びます。

![Screenshot from 2021-07-27 14-36-38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396623/eae26386-e42f-f569-a91d-762dc5f81bcb.png)
Association namedエラーで彷徨った話

# 起こった出来事
現在作成中のアプリでマイプロフィールから今までにブックマークした投稿を一覧表示されるページを作成し```rails s```してブラウザからのアクセスを試みたところ下禁輸のようなエラーが出てしばらく時間を使ってしまいました。

```
Association named 'game' was not found on Bookmark; perhaps you misspelled it?
```

# 対処方法

こちらはエラー内容の通りアソシエーションがで定義されておらず、```game```とのアソシエーションをbookmarkモデルで見つけることができなかったという内容です。

なので該当のモデルを確認してみましたらところ、

``` bookmark.rb
class Bookmark < ApplicationRecord
 class Bookmark < ApplicationRecord

    validates :user_id, presence: true
    validates :game_id, presence: true
  
    belongs_to :user
    belongs_to :game
 end
end
```

という風に何故かclassを二重にしてたのが原因でした。

このように直したら正常に動作しました。

``` bookmark.rb

class Bookmark < ApplicationRecord

    validates :user_id, presence: true
    validates :game_id, presence: true
  
    belongs_to :user
    belongs_to :game
end
```
以上です。
Rails c 動かない現象

ターミナルで　Rails c と入力すると以下のようになりました。
入力できず、反応なし…。

```
ubuntu:~/environment/tasklist (main) $ rails c
#これ以降空白
```

原因としてはプロジェクトを削除したり作成をしたりした際にコンソールを切り忘れたようです。
Rails cをするとspringも一緒に動くとのことだったので動いているspringを検索。

```
ubuntu:~/environment/tasklist (main) $ ps aux | grep spring
ubuntu   19047  0.0  1.5 396400 15716 pts/1    Sl   04:50   0:00 spring server | tasklist | started 25 mins ago
ubuntu   22759  0.0  0.1  14860  1068 pts/5    S+   05:15   0:00 grep spring
ubuntu:~/environment/tasklist (main) $ kill -9 19047
#不要なものを切りました
```

再度　Rails cを開きます。

```
ubuntu:~/environment/tasklist (main) $ rails c
Running via Spring preloader in process 22936
Loading development environment (Rails 6.1.4)
3.0.0 :001 > 
```
無事に開きました。
見えないところで作動していると見落としがちですね…。
UbuntuにGROMACS2021.2をインストール

#参考

下記を参考に実行しました。

https://qiita.com/Ag_smith/items/2432375399e7d7868138

https://qiita.com/tacoma/items/86d68d7cc0493d421b85

#Ubuntuのインストール

https://qiita.com/tacoma/items/7595952d84b985468d48

ここでCUDA-toolkitのインストールも完了しています。

#cmakeのインストール

```bash
sudo apt install cmake 
```

gccはいつの間にか9.3が入っていました

#OpenMPIインストール

```bash
sudo apt install openmpi-bin libopenmpi-dev
```

#GROMACSのインストール


##thread-MPI版

まずはMPI無しでインストールする。

```bash
wget ftp://ftp.gromacs.org/pub/gromacs/gromacs-2021.2.tar.gz
tar zxvf gromacs-2021.2.tar.gz
cd gromacs-2021.2
mkdir build
cd build
cmake .. -DREGRESSIONTEST_DOWNLOAD=ON -DGMX_GPU=CUDA \
-DCMAKE_INSTALL_PREFIX=/usr/local/gromacs/2021.2_GPU \
-DGMX_BUILD_OWN_FFTW=ON
make -j 4
make check
sudo make install
```

GROMACS2021から-DGMX_GPUはOFF, CUDA, OpenCL, SYCLの選択になったようなので注意
普段の計算には、これでできたgmxを使う。
例えば、gmx mdrunなど

##MPI版のインストール

-DGMX_BUILD_MDRUN_ONLY=ONにすることで、mdrunのみをインストールする

```bash
mkdir build_mpi
cd build_mpi
cmake .. -DGMX_BUILD_MDRUN_ONLY=ON -DREGRESSIONTEST_DOWNLOAD=OFF \
-DGMX_GPU=CUDA -DCMAKE_INSTALL_PREFIX=/usr/local/gromacs/2021.2_GPU \
-DGMX_BUILD_OWN_FFTW=ON  -DGMX_MPI=ON
make -j 4
make check
sudo make install
```
make installで/usr/local/gromacs/2020.6_GPU/bin下にmdrun_mpiが生成されるので、MPI並列計算を行うときに使う

最後に.bashrcに以下を追記する。

```bash
source /usr/local/gromacs/2020.6_GPU/bin/GMXRC
```

これにより、起動時にgmxコマンドやmdrun_mpiコマンドが使えるようになる。
javascript HTML input dateのデフォルトを当日に設定＋今日以前選択不可設定

Every Qiita #22
のんびり独学初学者投稿 22日目
今回は・・・
HTMLのinput dateで初期値を当日に設定＋今日以前を選択できないように設定した時の備忘録です。

###処理フローを考える
1. 当日の日付を取得
1. input dateの形式に変換（形式：YYYY-MM-DD)
  1. valueをjavascriptで出力
  1. minをjavascriptで出力

上記のフローを1つずつ分解して実装していきましょう！

####1.当日の日付を取得

javascriptで`Date`オブジェクトを使うと当日の日時を取得できます。

```javascript:date.js
 const today = new Date();
```

```:出力結果
Tue Jul 27 2021 13:45:38 GMT+0900 (日本標準時)
```

####2.input dateの形式に変換

input dateのvalueはYYYY-MM-DDで出力されるので、javascriptで成形していきます。dateオブジェクトには年・月・日をそれぞれ取得できるメソッドがありますので順番に取得しreplace関数を使って整えていこうと思います。
***replace関数は、第一引数に変換対象の文字列、第二引数に変換する文字列を配置します。***

```javascript:date.js
function dateFormat(today, format){
    format = format.replace("YYYY", today.getFullYear());
    format = format.replace("MM", ("0"+(today.getMonth() + 1)).slice(-2));
    format = format.replace("DD", ("0"+ today.getDate()).slice(-2));
    return format;
}
```
1. 独自関数の第二引数に`YYYY-MM-DD`を配置します。（formatで受け取っています）
1. `getFullYear`で年を4桁で取得し、YYYYを変換します。
1. `getMonth + 1`で月を取得します。
 1. 月は0〜11で出力されますので、+1をすれば正確な月を取得できます。
 1. 2桁で取得したいので0を前に付け、末尾から2文字を取得するようにします。
1. `getDate`で日付を取得します。上記と同様に2桁で取得できるようにします。

```:出力結果
2021-07-27
```

####value・minをjavascriptで出力
最後に成形したデータを初期値と最小値に設定すれば完了です。

```javascript:date.js
const data = dateFormat(new Date(),'YYYY-MM-DD');
const field = document.getElementById(dateに付与した任意ID);
field.value = data;
field.setAttribute("min", data);
```
関数を呼び出し、取得した要素のvalueとminを設定しています。

![スクリーンショット 2021-07-27 14.08.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/813099/26f4e987-c1ee-b8e8-5d8c-a5728e530933.png)
これで当日が初期値として認識され、以前の日付を選択できないようにできます。

```javascript:date.js
 const today = new Date();
 function dateFormat(today, format){
    format = format.replace("YYYY", today.getFullYear());
    format = format.replace("MM", ("0"+(today.getMonth() + 1)).slice(-2));
    format = format.replace("DD", ("0"+ today.getDate()).slice(-2));
    return format;
 }
 const data = dateFormat(today,'YYYY-MM-DD');
 const field = document.getElementById(dateに付与した任意ID);
 field.value = data;
 field.setAttribute("min", data);
```
深層学習。wandbでAPI keyがpasteできない場合の対処方法

# 深層学習。wandbでAPI keyがpasteできない場合の対処方法
タイトルの内容を示す。


```
wandb: You can find your API key in your browser here: https://wandb.ai/authorize
xxxxx Paste an API key from your profile and hit enter:
```

上記のところで何故かAPI Keyが入力できないことあり。

Windowsにて。


# 対策

以下の形式で、最初にAPI keyを入れる。

```
wandb login 13d61343820eaa8xxxxxxxx0dd203416da9df37c
```

# まとめ
特にありません。
Amazon Lookout for Metricesにおけるメトリクス数の注意点

# Amazon Lookout for Metricsとは
一言で言うと、メトリクスをもとに機械学習を使用して、メトリクスの異常値を自動的に検出するサービスです。
S3等に上げられたメトリクスをソースとし、自動的に分析を行ってくれます。

以下公式説明文
> Amazon Lookout for Metrics は、機械学習 (ML) を使用して、売上高や顧客獲得率の急激な低下など、ビジネスおよび運用データの異常 (標準からの外れ値など) を自動的に検出および診断します。数回クリックするだけで、Amazon Lookout for Metrics をAmazon S3、Amazon Redshift、Amazon Relational Database Service (RDS) などの一般的なデータストアや、Salesforce、Servicenow、Zendesk、および Marketo などのサードパーティーの SaaS アプリケーションに接続できます。これにより、ビジネスにとって重要なメトリクスの監視を開始します。Amazon Lookout for Metrics は、これらのソースからのデータを自動的に検査して準備し、異常検出に使用される従来の方法よりも高速かつ正確に異常を検出します。また、検出された異常に関するフィードバックを提供して、結果を調整し、時間の経過とともに精度を向上させることもできます。Amazon Lookout for Metrics を使用すれば、同じイベントに関連する異常をグループ化し、潜在的な根本原因の概要を含むアラートを送信することで、検出された異常を簡単に診断できます。また、異常を重大度の順にランク付けするため、ビジネスにとって最も重要なことを優先できます。

https://aws.amazon.com/jp/lookout-for-metrics/

料金は「一か月あたりに分析を行ったメトリクス数に応じて請求されます。

|メトリクス|メトリクスあたりのUSD|
|---|---|
|最初の1000メトリクス|0.75USD|
|1,000 メトリクス～5,000 メトリクス|0.50 USD|
|5,000 メトリクス～20,000 メトリクス|0.25 USD|
|20,000 メトリクス～50,000 メトリクス|0.10 USD|
|50,000 メトリクス超え|0.05 USD|

引用(2021/07現在)：

https://aws.amazon.com/jp/lookout-for-metrics/pricing/

この「分析を行ったメトリクス数に応じて課金される」という点がミソで、時間課金ではないので一度に大量のメトリクスを投入すると一気に料金が上がってしまうことが考えられます。

# メトリクスとは
Amazon Lookout for Metricesのメトリクスの総数は、Measureと、Dimentionに含まれる値(一意)を乗算した数となります。
後程解説しますが、**絶対に適当な値をDimensionsに設定しないで**ください。

(コンソールに表示されるメッセージ引用)
> Amazon Lookout for Metrics derives metrics from on your dataset's measures, dimensions names, and dimension values. The total number of metrics is the number of measure names times the number of unique combinations of dimension name and dimension value. The number of metrics analyzed can vary from interval to interval.

# 分析を行う上での注意点
仮に以下のようなデータを使用するとします。

|EventTime|EventID|EventName|UserName|Value|Data|
|---|---|---|---|---|---|
|2021/XX/XX 00:03:10|ajt6gait7|EventA|hoge|743|2021/XX/XX 00:03:00|
|2021/XX/XX 00:15:45|bjys9gkit|EventB|hoge|384|2021/XX/XX 00:15:00|
|2021/XX/XX 00:29:30|oit8bisr4|EventC|hoge|204|2021/XX/XX 00:29:00|
|2021/XX/XX 00:29:43|gti8rmvbf|EventB|huga|764|2021/XX/XX 00:29:00|
|2021/XX/XX 00:31:12|rjugyalot|EventB|hogehuga|322|2021/XX/XX 00:31:00|
|2021/XX/XX 00:40:36|jut75ljga|EventA|hogehuga|743|2021/XX/XX 00:40:00|
|2021/XX/XX 00:41:38|git6ugt74|EventC|hoge|384|2021/XX/XX 00:41:00|

MeasuresとDimensionsを

- Measures：Value
- Dimensions：UserName

とした場合、Dimensionsの値は「hoge,huga,hogehuga」の3種類となるため、
`1(Measures)×3(Dimensions)=3メトリクス`という計算になり料金は`0.75*3=2.25USD`となります。

次にMeasuresとDimensionsを

- Measures：Value
- Dimensions：UserName,EventName

とした場合、Dimensionsの値は「hoge,huga,hogehuga」と「EventA,EventB,EventC」の3*3種類となるため、
`1(Measures)×3(Dimensions)×3(Dimensions)=9メトリクス`という計算になり料金は`0.75*9=6.75USD`となります。

このように、メトリクス数はMeasuresの数とDimensionsの数・値に大きく依存します。

基本的に本サービスで扱うようなデータは大量(数万行)であることが考えられる為、Dimensionsの設定を間違えてしまいますとすぐに数万メトリクスに到達してしまいます。

仮に5万行のデータのDimensionsを今回のEventIDのような**一意な値**にしてしまうと<font color="Red">約$9000</font>[^1]と大変高額になってしまう計算なので、サービスを利用する場合はMeasuresとDimensionsをあらかじめ考えて使用するようにしましょう。

[^1]: 1000*0.75+4000*0.5+15000*0.25+30000*0.1=9500
GitHubのPull Request・Issueのテンプレート作る

チーム開発時にプルリクのテンプレがあると言う存在を知り「便利だな」と思ったので自分でも使えるようになりたいと思い調べたのでその備忘録です。
※簡易版でのやり方です。公式に記事があるので[そちら](https://docs.github.com/ja/communities/using-templates-to-encourage-useful-issues-and-pull-requests)もご参照ください。



## 必要なもの

```
.github フォルダー
ISSUE_TEMPLATE.md  (Issue作成のテンプレ)
PULL_REQUEST_TEMPLATE.md (PR作成のテンプレ)
```
`.github`フォルダー内に2つ作成すればOK。

## 実施
フォルダーの作成とファイルの作成

```
mkdir .github
touch .github/PULL_REQUEST_TEMPLATE.md
touch .github/ISSUE_TEMPLATE.md
```
作られたファイルにテンプレにしたい内容を記載していく。

```PULL_REQUEST_TEMPLATE.md
ここに記載した内容がPRの本文の内容に反映される
* issueの方も同じです。
```

記載したら`github`に`push`して反映させればOKです。

反映されていれば`issue`と`Pull request`の作成画面で各`.md`ファイルの内容が反映されています。

## まとめ
自分でアプリを作る時に毎回同じ文言を書くのをどうにかできないのかと思っていたので解決策が見つかってよかったです。
公式にはテンプレを複数用意できる的な事も書いてあったので、是非公式の方もご確認ください！

## 参考資料
[Issueとプルリクエストのテンプレートについて(GitHub公式)](https://docs.github.com/ja/communities/using-templates-to-encourage-useful-issues-and-pull-requests/about-issue-and-pull-request-templates)