OmniAICreator/Qiita-1.07M huggingface dataset:
【保存用】エンジニアがよく使うWebサービス

# 0.はじめに

Web系のエンジニア時代ぶっちゃけ、いろんなサービスは後輩たちが教えてくれてました。
今は、自社開発、ソースもオンプレ管理とかあんまり外にでれない系のエンジニア畑の子たちと働いてます。

で、あんまり便利なWebサービスしらないっぽいので、まとめようと思ってこの記事です。

たぶん、大いに抜け漏れあると思うので、これも追加してがあれば、教えて下さい。

# 1. さっそく紹介

## リポジトリ系

### GitHub
OSSとかGitでのソース管理をするなら、だいたいここ。
オンプレしかないんです、ならGitLabとかになっちゃいますが…
OSS探すときの起点にもなります。

https://github.com/

### BitBucket
プライベート無料だったころがあるので、GitHubと併用してました。
GitHubでいいんじゃないかと思いますが、アトラシアン採用してる企業さんもあるので触れてて損はないと思う

https://bitbucket.org/product/

### sourceforge
ちょっと古いですが、過去のOSSとかここにあったりします。
最近はみんなGitHubかな？

https://sourceforge.net/

### DockerHub
ぶっちゃけどの系列にするか迷ったけど、まぁインフラソースってことで…
Dockerで環境構築するならあるといいですね。

https://hub.docker.com/

### npm
Nodeのパッケージ管理

https://www.npmjs.com/

## 開発者系

### Oracle
Java系やるならあると、過去のJavaとか落とせるので登録しておくといいかも
新しいものしか使わないなら推奨レベル

https://login.oracle.com/mysso/signon.jsp

### Apple Developer
りんごの開発者

https://developer.apple.com/jp/

### Android Developer
泥の開発者

https://developer.android.com/?hl=ja

### Twitter Developer
Twitterの開発者

https://developer.twitter.com/en

### Facebook Developer
Facebook開発者

https://developers.facebook.com/

### Line Developer
Line開発者

https://developers.line.biz/ja/

### Google Developer
Google開発者

https://developers.google.com/

### Sony Developer
Sony開発者

https://developer.sony.com/ja/

### Amazon Developer
Amazon開発者

https://developer.amazon.com/ja/

###　Yahoo デベロッパーネットワーク
Yahoo開発者

https://developer.yahoo.co.jp/

### Microsoft Developer
MS開発者
GitHubの時点で登録はできてるかもですが…

https://developer.microsoft.com/ja-jp/

### PayPay Developer
案件としてあるかですが、PayPay開発者です。

https://developer.paypay.ne.jp/

### GrapeCity Developper
.NET系のライブラリの印象が強いですがけど、いろいろ便利ライブラリつくっていただいてます。

https://www.grapecity.co.jp/developer

### Nintendo Developer
任天堂開発者

https://developer.nintendo.com/ja/home

## 開発ツール系

### Unity
VRChatとかあるし、登録しておいて損はない

https://unity.com/

### Unreal Engine
ゲーム業界じゃなかったらいらんかな…

https://www.unrealengine.com/ja/

### JET Brain
IDEAさんとか総合開発環境使うなら

https://www.jetbrains.com/ja-jp

### CircleCI
超大手CIサービス

https://circleci.com/ja/

## 勉強会系 

### connpass
勉強会

https://connpass.com/

### techplay
勉強会

https://techplay.jp/

### doorkeeper
勉強会

https://www.doorkeeper.jp/

### SlideShare
元祖スライド共有

https://www.slideshare.net/

### SpeakerDeck
スライドをシェアするやつ

https://speakerdeck.com/

## 技術記事系

### Qiita
この記事みてる時点でってのはあるけど…
登録して、ストックとかしよう

https://qiita.com/

### ticketnote
チケットを作ってメモ帳としてつかうやつマークダウン使える。

https://ticketnote.dev/

## XaaS系（XにはSとかPとか入るよ）

### Heroku

https://jp.heroku.com/

## SNS

### 技術系SNS
https://techfeed.io/

# あとがき

なんだかんだでいっぱいありました＼(^o^)／
Nuxt.jsにvuejs-datepickerを導入するまでに時間がかかったので解決メモ

# はじめに

タイトルのとおり、Nuxt.jsにvuejs-datepickerを導入するまでに予想以上に時間をかけてしまったのでメモ。


# vuejs-datepickerの導入

[こちら](https://qiita.com/whw3312/items/5465081dbe8a81f9e7d4)の記事を参考に進めていきました。

## インストール

```shell
$ npm i -D vuejs-datepicker
```

## コンポーネント作成

```plugins/vuejs-datepicker.js
import Vue from 'vue'
import DatePicker from 'vuejs-datepicker'

Vue.component('DatePicker', DatePicker)
```

ここでつまずきポイント。
自分はtypescriptを使っていたので、`vuejs-datepicker.js`ではなく、`vuejs-datepicker.d.ts`で登録していたのですが、ビルド時に出る以下のエラーにより進まず...

![スクリーンショット 2021-06-16 10.09.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/951040/57b7b0e1-04fc-c11e-e466-4612e768f108.png)


半日ほど調べたのですが、原因わからずで、`vuejs-datepicker.js`で登録しました。（これで良かったのか？）

## nuxt.config.jsに登録

```nuxt.config.js
plugins: [
     { src: '~/plugins/vuejs-datepicker.js', mode: 'client', ssr: false }, //追加
]
```

## コンポーネントで呼び出し

DatePickerを使いたいコンポーネントで、Datepickerコンポーネントimportします

```javascript
import DatePicker from 'vuejs-datepicker/src/components/Datepicker.vue'
```

コンポーネントに登録します

```javascript
components: {
  DatePicker
}
```

templateで使用します

```heml
<Datepicker />
```

# これでDatePickerが表示されるはず!!!

## と思ったが、以下のエラーが。
![スクリーンショット 2021-06-16 10.17.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/951040/bbe01e25-e42a-2cee-68a9-34829f51b92d.png)

`stylus`が読み込めていないようです。

## `stylus`と`stylus-loader`を導入

```
$ npm i -D stylus stylus-loader
```

# さすがに動くだろう！

## 別のエラーが...

![スクリーンショット 2021-06-16 10.20.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/951040/1735887d-f532-b9b8-d3f4-0dc062764121.png)

いいかげん動いてくれぇと思うところですが、もちついて`this.getOptions is not a function`でググると、

[Nuxt.js に Stylus を入れてみたが、コンパイルエラーになったのでその解決策](https://qiita.com/t-kigi/items/b6a60d4e3d4ca6dd78bf)

> こちらでは、新しいバージョンの stylus-loader が対応していないということで、１つ古いバージョンの stylus-loader を使えば対応できるとのことだった。

なるほど、私の環境では....

```package.json
"stylus": "^0.54.8",
"stylus-loader": "^6.1.0",
```

ということで、バージョンを落としてみる

## stylus-loaderのバージョンを落とす

6系から5系に落としてみる

```shell
$ npm uninstall stylus-loader
$ npm i -D stylus-loader@5
```

同様のエラーが出ているので、記事通り4系まで落とす...

```shell
$ npm uninstall stylus-loader
$ npm i -D stylus-loader@4
```

エラーが消え、ブラウザではDatePickerが表示されました！

# まとめ

経緯をまとめると、

pluginの追加に躓く（typescriptなのに、pluginファイルは`.js`でいいのか...） -> ｓｔｙlusが読み込めていない -> stylus-loadeが新しいバージョンだと動かない ->　ようやく動く

ということでした。
なんとか動いてよかったです....
【Rails】画面遷移時に前回表示時のキャッシュが一瞬表示される

## 環境
```bash
$ ruby -v
ruby 3.0.1p64 (2021-04-05 revision 0fb782ee38) [x86_64-darwin19]
$ rails -v
Rails 6.1.3.2
```

## 起こった問題
`user`のshowページをランダムで表示する`UsersController/random`アクションがあり、`users/random`にルーティングされています。

```ruby
  def random
    user = User.find(User.pluck(:id).sample)
    redirect_to user
  end
```

`users/random`にアクセスすると、`users/1`や`users/2`にランダムで飛ぶのですが、その際に、前回`users/random`で飛んだページが一瞬表示されます（アドレスバーは`users/random`）。

## 原因
Railsでデフォルトで有効になっている**turbolinks**のしわざです。
[turbolinks/turbolinks: Turbolinks makes navigating your web application faster](https://github.com/turbolinks/turbolinks)
> If possible, Turbolinks will render a preview of the page from cache immediately after the visit starts. 

つまり、以下のようなことが起きています。

1. `users/random`→`users/1`にリダイレクト
- ここでturbolinksが「`users/random`にアクセスがあったらとりあえず`users/1`の内容を表示する」と記憶（キャッシュ）する
- `users/random`にアクセス
- `users/2`にリダイレクトすることになったけど、処理が終わるまでturbolinksがキャッシュしておいた`users/1`の内容を表示する

## こう直す
対処法も、上記リンクの「Opting Out of Caching」の項に書いてあります。

```html
<head>
  ...
  <meta name="turbolinks-cache-control" content="no-preview">
</head>
```
これでキャッシュプレビュー機能が無効になり、タイトルの問題は解消されます。
`no-cache`にするとキャッシュ機能自体が無効になりますが、`no-preview`だとプレビュー機能だけが無効になり、戻る、進むでの遷移時にはキャッシュが使われます。
もちろんその分、`/users/random`以外のページも含めて少し表示が遅くなってしまいます。
職業訓練　webプログラマ養成科　1ヶ月目

<h1>職業訓練1ヶ月目の感想</h1>
　今週で職業訓練を受講し始めて1ヶ月が経ちました。今の受講生は14人で、なぜか分からないが１日目に一人退校されました。レベルが低すぎたのかな？😹
これまでは主にHTML,CSSを勉強し、簡単なWebページなどの作成ができるようになりました。受講前まではHTMLを甘くみていたのですが、色々できる事に感動して、シングルページを作りまくって遊んでいました。笑　
CSSの方もデザインだけのものだと思っていましたが、Sassなどを使用したら、四則演算や関数まで使える事に驚きました。まだ完全に使いこなせていないですが、マスターしてやろうかと思っています。
週一回だけJavaScripをしていますがこれがまた難しい。関数、条件分岐、引数、返り値など聞き馴染みのない言葉が出現しまくり、頭がパンク寸前。😅けれど、これまで静的サイトしか作れなかった身分からするととても刺激的です。今はクイズゲームを作りながら理解を深めています。完成したら公開したいと思います。
乞うご期待！！
そして、先週末に初めてのテストを迎えました。以前から軽く話は聞いていたのですが、当日にいきなりテストしますと宣告されました。講師の方曰く、「簡単すぎるので抜き打ちでも大丈夫」との事。
内容的にはとてもシンプルで一般常識問題？が中心で例えば、長時間の作業には休憩が必要かどうかやパソコンの周りに飲み物は置かない方がいいかなどこんな感じです😓
そんな中、難問（自分的には）パソコンの画面の位置は自分の目線より下か上かどちらが好ましいかで僕自身昔スポーツで首を軽くやってしまったので上を向いている方が楽なので上と解答。テスト後クラスメートに確認した所下が正解だと判明。その他にも2〜３問誤答していることが判明しました。先が思いやられる。頑張れ自分!!

<h3>まとめ</h3>
講師の方々もとても親切に教えてくださって独学時代あやふやで飛ばしてしまっていた所を補えている感じが気持ちいいい！クラスメートも同世代（30代前後）が多く、和気藹々と一緒に勉強しています。
このままプログラマ道にどっぷり浸かって、現場で早く働いていみたいと思いを馳せている今日この頃です。
こんな感じでぐちゃぐちゃ備忘録を綴っていきます。乱文失礼致しました。
【M1 Mac】miniforgeの仮想環境でWARNINGが出る(備忘録)

M1 macで，pythonの開発環境を整えていたら，発生したエラーを備忘録として残す．
brewで導入したminiforgeで仮想環境を作成したところ以下のWARNINGが出た．
（WARNINGだからいいかなと思ったけど一応解決しておく）

## エラー

```
WARNING conda.core.path_actions:verify(962): Unable to create environments file. Path not writable.
　　　　　　　　　environment location: /Users/username/.conda/environments.txt
```

何やら，environments.txtに権限がなくて書けないと言っているので，権限を確認してみる．
(以下，usernameは適宜変更する)

```ls -lahd /Users/username/.conda/environments.txt```

```   
-rw-r--r--  1 root  staff  24 Jun  1 13:36 /Users/username/.conda/environments.txt
```

なぜか，所有者がrootになってる？
## 解決方法

これを解決するために，
- 書き込み権限をroot以外にあげる
- もしくは，自分が所有者になる

を行う．

今回は，後者で解決する．

```
sudo chown username:staff /Users/username/.conda/environments.txt
```

上記のコマンドを実行すると，所有者が変わっていることが確認できる．

```
-rw-r--r--  1 username  staff    49B Jun 16 09:55 /Users/username/.conda/environments.txt
```

これで，miniforgeにて，WARNINGが出なくなった．
Modelに表示するデータの保存方法


ＪＳＰの「form:form」には、ControllerからもらってくるModelAttribute属性が記載されます。
この時に必要なModelを、どのようにControllerで保存したらよいのでしょうか？

基本的には、**対応するフォームクラスのModelへの保存名**を指定します。
これは、@ModelAttributeアノテーションが付いているメソッドでアノテーションに指定されたvalue属性になります。

それでは、具体的に見ていきましょう。
<br>
<br>

##方法１：Handlerメソッドで定義する

###➀Handlerメソッドの引数にModelを指定する

@RequestMapping
public String show***(Model model)***{
｝
###②ModelAttribute（“保存名“ , データ）の形を用いて任意のオブジェクトを保存する

@RequestMapping
public String show(Model model) {
**model.addAtribute(“myModel“. new  form(“username”, “password”)) ；**
return “view名“；
}

<br>
<br>
##方法２：@ModelAttribute(データ)で保存
アノテーションにデータを入れる方法です。保存名は、**データで入ったオブジェクトの実クラス名の頭文字を小文字にしたもの**になります。

<br>
<br>
##方法３：@ModelAttributeのみ
これが最もよく使われます。

この場合は、このアノテーションが付与されたメソッドは、Handlerメソッド実行前に呼び出され、戻り値がModelに保存されます。

そのため、***戻り値の先頭を小文字にした文字列***が該当します。
【GAS】スプレッドシートを画像保存できない壁を乗り越える（Googleスライド利用）

# サマリ 

### このページについて

- スプレッドシートの画像保存はAPIが提供されていないようなので試行錯誤の結果を備忘録的に


### 結論

- GoogleスプレッドシートのデータをGoogleスライドにリンクさせて、画像で保存を行えば画像保存が可能！
- Slackで送信したり、その後の活用可能性は高まると思います！


### 準備するもの

- Googleスプレッドシート
    - 保存したいデータなどがあるシート
    - 以降、こちらがある前提で進めます
- Googleスライド
    - 画像保存用のスライド
    - 保存したいサイズに設定しておく必要あり

# 解説

### １：画像保存したいデータのグラフ化

- スプレッドシートのデータのうち、画像保存していものをグラフにします
- 表や個別の数値などは「表グラフ」「スコアカードグラフ」などを使うとよいです
- ※GASでGoogleSlideに転記する方法もありますが、今回はこの手法で説明します
![ss_graph_type.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/210886/0ab3c0fd-a419-9a96-ce1b-6399776997cc.png)


### ２：スライドへグラフのリンク作成

- スプレッドシートに作成したグラフをコピーして、貼り付ける
- この際に、「スプレッドシートにリンク」を選択する
- 複数グラフがある場合は、保存したいイメージに合せてレイアウトを行っていく
![スクリーンショット 2021-06-16 9.40.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/210886/ef3008fb-e590-1077-1b44-e09d5b8fcadf.png)


### ３．GAS記述

- 今回はスプレッドシート側にGASを記述していきます
- エラー処理などは割愛していますので、よしなに。
- 「保存先のフォルダID」は
    - Googleドライブの「drive.google.com/drive/folders/★ここ★」←「ここ」に書いている文字列です
- 「保存するスライドのID」は
    - Googleスライドの「docs.google.com/presentation/d/★ここ★/edit#slide=id.p」←「ここ」に書いている文字列です



```javascript:gas
/***
 * 対象スライドのリンクしているグラフを全部更新して、指定のGoogleドライブへ保存
 * 
 * @param fileName 保存したいファイル名
 */
function exportSlideToPNG(fileName){

  const folderId = '保存先のフォルダID';
  const format = 'png';

  const slideId = "保存するスライドのID";
  const presentation = SlidesApp.openById(slideId);
  const slides = presentation.getSlides();

  const slide = slides[0];
  const sheetCharts = slide.getSheetsCharts();

  // update
  for (var i = 0; i<sheetCharts.length; i++){
    sheetCharts[i].refresh();
  }
  
  // flush
  presentation.saveAndClose();

  // output
  const url = "https://docs.google.com/presentation/d/" + slideId + "/export/" + format;
  const options = {
    method: "get",
    headers: {"Authorization": "Bearer " + ScriptApp.getOAuthToken()},
    muteHttpExceptions: true
  };

  const res = UrlFetchApp.fetch(url, options);
  if (res.getResponseCode() === 200) {
    const folder = DriveApp.getFolderById(folderId);
    folder.createFile(res.getBlob()).setName(fileName + "." + format);  
  }
}
```

# 参考

- 公式リファレンス
    - https://developers.google.com/apps-script/reference/slides/slides-app
動的生成されたHTMLは、clickできない問題

問題：
$('#testModal  table tbody tr').click(function() {

「tr」は、appendで動的に生成されたもので、
上記のjqueryだと、trをクリックしても、反応してくれません。

解決方法：
下記のものを使ったら問題なく、動きました。
$(document).on("click", "#testnModal  table tbody tr" , function() {

よく会う問題なので、メモします。
Stripe導入時メモ・注意点

Stripe導入時のメモです。
次回役に立つかも、ということで書いておきます。
後で追記します。

# 導入前にそのサービスをオンライン決済を受け付けられる業種か？
https://stripe.com/en-jp/restricted-businesses
禁止業種が定められています。Stripeを利用する前に、禁止業種に該当していないか調べましょう。


# 特定商取引法に基づく表示 を準備
https://support.stripe.com/questions/jp-specified-commercial-transactions-act
オンラインで商取引を行う場合は、掲載が義務付けられています。


# JCBは事前審査が必要
「Stripeは導入が簡単」の文言に踊らされていましたが、JCBでのお支払いを受け付ける場合は事前審査が必要です。
最大3週間ほどかかります。

[公式ドキュメント](https://support.stripe.com/questions/%E6%97%A5%E6%9C%AC%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88%E3%81%AB%E3%81%8A%E3%81%91%E3%82%8B-jcb-%E3%82%AB%E3%83%BC%E3%83%89%E6%B1%BA%E6%B8%88%E6%9C%89%E5%8A%B9%E5%8C%96%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6)

JCBの審査ですが、前項の「特定商取引法に基づく表示」があることが前提で審査されます。先に特定商取引法に基づく表示は取り掛かった方が良いです。

[追記]
私の場合5営業日ほどで通りました。
https://stripe.com/blog/jcb-expansion
JCBのサポートが拡大しているらしいです。


# メールの確認は本番申請を出さないと確認できない
Stripeが用意している領主書を使う場合は、Stripeからユーザーにメールが送信されます。
このメールは本番申請を出しているアカウントで操作しなければメールが送信されません。
ただし、テストモードでも送信されるメールの内容は確認できます。

Stripeからではなく、webhook使って自分でメールを送る方法も有ります。


# Plan→Price
まずはどんな感じで開発を進めていくか調べるためにStripeをググるとQiitaの記事がいくつかヒットします。
記事の中ではPlanオブジェクトを使用していますが、公式ドキュメントではPriceオブジェクトで構成されています。
Subscriptionを作る時、公式に従って作りました。
[こっちに従いました。](https://stripe.com/docs/billing/prices-guide)

[ここ](https://stripe.com/docs/api/plans)に記載されていますが、PriceとPlanは互換性があって、Priceの方が柔軟にSubscriptionをモデル化できるとのこと。


# カスタマーサポートは日本語対応している
日本の方が対応してくださります。
質問する時はダッシュボードの右上の入力欄から、Stripeからの返答はメールで来ます。
早くて当日中に返答があります。


# テストカード
`4242 4242 4242 4242`をはじめ、ここにたくさん載ってます。
https://stripe.com/docs/testing#cards
React：JSX内でif文やswitch文を書きたい。

JSX内で、三項演算子を使ってtrue、falseで表示したいものを変えるのはシンプルですが、選択肢が３つ以上の時はどうすればいいの？if文やswitch文を使いたい時はどうすればいいの？ということで調べてみました。

##解決方法##
アロー関数を使う。

colorがred、blue、green、defaultで表示を変えます。

colors関数を定義して、return内でcolors()関数を呼び出します。

```jsx
import React from 'react'

const Card = ({ children, color }) => {
  const colors = () => {
    switch(color){
      case 'red':
        return(
        <div>
          <p>red</p>
          {children}
        </div>
      )
       case 'blue':
         return(
         <div>
          <p>blue</p>
          {children}
         </div>
      )
       case 'green':
        return(
        <div>
          <p>green</p>
          {children}
        </div>
      )
       default:
        return(
        <div>
          <p>default</p>
          {children}
        </div>
      )
    }
  }
  return (
    <>
    {colors()}
    </>
  )
}
export default Card
```
nasmの作法 その10

#概要

nasmの作法、調べてみた。
練習問題、やってみた。

#練習問題

zundokoを表示せよ。

#makefileを書く。

```
test10.exe: test10.obj
    link.exe /OUT:test10.exe test10.obj msvcrt.lib
test10.obj: test10.asm
    nasm.exe -fwin32 test10.asm


```

#サンプルコード

```

global _main
extern _printf
section .text

_main:
	PUSH 	EBP
	MOV 	EBP, ESP
	MOV		EAX, 0
	MOV 	AL, 234
	MOV		ECX, 0
LOOP:
	MOV	 	AH, 5
	MUL		AH
	INC		AL
	CMP	 	AL, 120
	JC	  	_doko
_zun:
	INC		ECX
	PUSH	EAX
	PUSH	ECX
	PUSH	EAX
	PUSH 	zun
	CALL 	_printf
	add  	esp, 8
	POP		ECX
	POP		EAX
	CMP		ECX, 4
	JZ		_kiyoshi
	JMP		LOOP

_kiyoshi:
	PUSH	ECX
	PUSH 	kiyoshi
	CALL 	_printf
	add  	esp, 8
	MOV 	ESP, EBP
	POP 	EBP
	RET

_doko:
	MOV		ECX, 0
	PUSH	EAX
	PUSH	ECX
	PUSH	EAX
	PUSH 	doko
	CALL 	_printf
	add  	esp, 8
	POP		ECX
	POP		EAX
	JMP		LOOP

section .data

zun:
	db	"zun ", 0
doko:
	db	"doko ", 0
kiyoshi:
	db	"doko kiyoshi!!", 0
fmt:
	db 	"%d ", 0





```

以上。
Golang日記②package go_app/mylib2 is not in GOROOTで死ぬほど詰まった話

## 何が起きたのか？
main.goと同じ階層にあるmylib73ディレクトリ内にパッケージと作り、読み込もうとしたら以下のようなエラーが出ました。

```
main.go:5:2: package go_aikawa2/mylib2 is not in GOROOT (/usr/local/go/src/go_aikawa2/mylib2)
```
## 結論　
go.modファイルを削除した上で

```
go mod init go_aikawa2
```

実行で動きました。私の場合、間違った形でgo.modファイルを生成してしまい、それを削除しないまま上記のコードを実行してしまっていたため「もうあるよー」と言われ続けてしまいました。

以下、完成形のコードです。

```main.go
package main

import (
	"fmt"
	"go_aikawa2/mylib73"
)

func main() {
	fmt.Println("ハローワールド")
	mylib73.Func()
}

```


```math.go
package mylib73

import "fmt"

func Func() {
	fmt.Println("called func in pkg1")
}


```

```go.mod

module go_aikawa2

go 1.16

```
HeadlessCMSのstrapiでER図が自動出力できるプラグインを試してみた

# はじめに
Nuxtで作ってる個人サイトのバックエンドにstrapiを使用してるんですが、ER図が欲しくなったので自動出力してくれるプラグインを試してみました。

（以前書いたstrapiの環境構築記事はこちら）

https://qiita.com/H-Asakawa/items/db998beb44735bbd9d1e

# 目次
1. 調査
1. インスコ
1. 実行結果
1. 参考文献

<!-- 各チャプター -->
<a id="#調査"></a>
# 調査

strapiを触ってるとGUIでぽちぽちDBが作れます。
ER図もここから生成できればいいなと思い、何かないか調べてみました。

strapi公式のissuesでER図の話がされてました。
このissues内の最新コメントにER図出力する`strapi-plugin-entity-relationship-chart`というプラグインを作ったって報告してる人がいたので試してみることにしました。

https://github.com/strapi/strapi/issues/2100#issuecomment-643626108

strapiはオープンソースのHeadlessCMSなので、なんかやりたいことがあったときはみんな自分でプラグイン作ったりしてるみたいですね（すげえ）。

<a id="#インスコ"></a>
# インスコ

プラグイン名：strapi-plugin-entity-relationship-chart

https://github.com/node-vision/strapi-plugin-entity-relationship-chart

このプラグインを入れます。
https://www.npmjs.com/package/strapi-plugin-entity-relationship-chart

```sh

# npmでもyarnでもどちらでも可
$ yarn add strapi-plugin-entity-relationship-chart

# admin画面を再ビルドしてプラグインを適用（こうしないと反映されません）
$ yarn build

# 実行
$ yarn develop 
```

<a id="#実行結果"></a>
# 実行結果

ER図が出ました。
（吐き出したのは[これ](https://asakawa.family)のER図）
![スクリーンショット_2021-06-16_8_31_36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/528819/6f73500d-b75a-8ae1-ad15-b49b05752cf5.png)

図が描画された範囲で線を繋ぎ変えたり、テーブルの位置を動かしたりなど編集ができるようになってます。
図をpngやjpgなどで保存・エクスポートする機能はありません。

`Articles`と`Comments`はhas_manyで繋がってるんですが、鳥の足が表示されてないですね。
表示を変えれるオプションはなさそうですが、必要十分な結果が出力されているので満足です。

GUI上の`content-types-builder`でテーブルを追加した際に、再ビルドすれば`Entity-Relationship-Chart`にすぐ反映されるのは中々便利そうだなと思いました。

おしまい

<a id="#reference"></a>
# 参考文献
- [Strapi+GraphQL+Herokuでスマートなバックエンド環境をGETしよう](https://qiita.com/H-Asakawa/items/db998beb44735bbd9d1e
)
- [github node-vision/strapi-plugin-entity-relationship-chart](https://github.com/strapi/strapi/issues/2100#issuecomment-643626108
)
- [npm strapi-plugin-entity-relationship-chart](https://www.npmjs.com/package/strapi-plugin-entity-relationship-chart)
Durable Functionsを使ったときにはまったポイント



## 背景

DurableFunctionsを使ってバッチ処理を行う。  
GraphAPIからユーザーデータを取得し、データ変換して、DBに登録という処理を実装したい！

## ハマったポイント１

### アクティビティ関数に複数の引数を渡すにはどうするのか  

正直、調べたらすぐ出てきたのでそんなハマってないけど、備忘録として載せておく。  
https://docs.microsoft.com/en-us/azure/azure-functions/durable/durable-functions-orchestrations?tabs=csharp#passing-multiple-parameters  
👆の公式Docの通りなのでここでは何も言及しません。

## ハマったポイント２

### オーケストレーター関数が何度も呼び出される？  

オーケストレーター関数内でブレークポイントは置かないほうがいいことがわかった。  
詳細はコチラありました。→https://qiita.com/Watakatsu/items/584eae41f4507862f045  
これはDurableのリプレイ動作によるものらしいです。  
処理の実行中でも何かしらの障害があったとしても、Activity関数から再度実行できるという素晴らしい機能のようです。  

今回の場合、バッチ処理なため実行時間が非常に長いことで  
ローカルデバッグ時、ログ出力にすごい時間を食われていたのでそれもハマった要素の１つでした。  
オーケストレータ関数で非同期処理が上手くいってるか確認しようとしたため、私は沼にハマりました。

## ハマったポイント３

### エラーで落ちたキューが再実行しまくってデバッグしづらい

関数から実行されたオーケストレーター関数やアクティビティ関数はキューに送信され、処理が失敗した場合、再実行してくれるなんとも優秀な機能をFunctions君はお持ちのようです。  
つまりデバッグ実行→その都度エラーが吐かれる→停止すると、どんどんキューがたまっていきます。  
再度実行する前にローカルストレージを削除してあげましょう。  

#### ローカルストレージのクリア方法

おそらくFunctionsデバッグ実行するとストレージエミュレーターを起動というメッセージが出てくると思います。  
タスクバーと日付の間にある「<」を押してWindowsマークが出てくると思います（一度でもデバッグ実行するとおそらく出てきます。）
(マウスオーバーで「Compute Emulator is Started. Storage Emulator is Started.」と表示されてると思います。)
そちらのマークで右クリックを押して、「Show Storage Emulator UI」をクリック。

👇を実行することでローカルストレージ内がクリアされます。

```PowerShell
AzureStorageEmulator.exe clear
```

#### 溜まったキューを見る方法

Microsoft Azure Storage Explorerから確認できます。
[ローカルで接続済み]→[ストレージアカウント]→[エミュレーター]から該当するキューが出てくると思います。  
そちらからキューを削除することもできるのでお試しください。

## ハマったポイント４

Orchestratorコード内でDurableOrchestrationContextAPIを使用する場合以外で、非同期操作を開始していはいけない。
例：Task.Run、Task.Delay、HttpClient.SendAsyncなど

１つ分からないのが非同期操作だめなのに👇のコードは問題なく使用できたのでどういうことかちょっと何言ってるか分からない状態なりました。

```C#
await Task.WhenAll(tasks)
```

非同期操作の開始はWhenAllだと別にしてないってことでいいんでしょうか

## ハマったポイント５

### Azure FunctionsにデプロイしたがPortal上でなんかエラー出てる

ストレージ関連でエラーが出ることが多いっていう記事を見かけてたので、時間もかからず解決できました。

```
Microsoft.Azure.WebJobs.Extensions.DurableTask: Task Hub name must be specified in host.json when using slots. Specified name must not equal the default HubName (itsshareddataservicefunction).See documentation on Task Hubs for information on how to set this: https://docs.microsoft.com/azure/azure-functions/durable/durable-functions-task-hubs.
```

原因は２つありました。

1. 各slotで異なるTaskHubNameを使う必要がある。参考→https://docs.microsoft.com/ja-jp/azure/azure-functions/durable/durable-functions-task-hubs?tabs=csharp
2. StartUp.csでConfigurationをAddSingletonしていた。

使用するTaskHubNameを設定するためのプロパティを作成する。👇を追加した。

```json:host.json
"extensions": {
    "durableTask": {
      "hubName": "%SlotTaskHub%"
    }
  }
```

Portal上のアプリケーション設定でも各スロットでそれぞれプロパティを追加して設定してあげましょう。  

もう1つの原因として、StartUp.csでConfigurationBuilder()したものをAddSingletonしていたというものです。  
コチラが見つけるのにちょっと時間かかりましたが、AddSingletonをしないことでエラーは解決しました。  
詳細はこれ→https://github.com/Azure/azure-functions-durable-extension/issues/1313

## まとめ

以上がハマったポイントでした。
最小構成で実装したときはすんなりできたが、今回はGraphAPIを使用してデータを加工してDBに登録まで行ったのでかなり沼りました。  
ただ少しだけDurable Functionsのことが分かったような気はしてます。  
使いこなせれば強力なツールだなと触ってみて実感しました。
Nuxt.js + FirebaseでTODOアプリを作ってみる

## 概要
- Nuxt.js + FirebaseでTODOアプリを作ってみた時のメモをちゃんと残そうと編集したもの。
- 作ってみた動機は、「とにかくFirebase連携してみたかった」。
- 新卒二年目の5月くらいに作ったぽい。（現在二年目を終えようとしている）

## 環境

- Nuxt.js
- Firebase

## 作ったときの考え方の流れ
1. ひとまずリロードしたら消えてしまうTODOアプリを作ってみる
  - HTMLの`<form>`って何だっけ…？くらいのレベルからはじまった・・
2. store で状態管理するようにする
    - store の state / action / mutation
    - getters
3. Firebaseにデータを送信する
    - Firebaseアクセスの基本構文を勉強した
4. Firebaseからデータを取得する

## 実際のコードと手順

### HTML部分

```vue.js


<template lang="pug">

  .wrapper
    p.title TODO APP
    ul.todo
      li(
        v-for="(todo, index) in todos"
        :key = "index"
        @click="deleteTodo(index)"
      )
        | {{ todo.todo }}

    form.form(
      @submit.prevent="submitTodo"
    )
      input(
        v-model="todo"
        type='text'
        placeholder="Add a TODO"
      )
      button(
        type='submit'
      )
        | Add a TODO
  
</template>
```
こんなかんじ。


### script

```vuejs
<script>
export default {
  async fetch ({ store }) {
    // fetchは、Vuex storeにデータを格納する
    await store.dispatch('common/getTodos')
  },
  data() {
    return {
      todo: ""
    }
  },
  computed: {
    todos() {
      return this.$store.getters['common/todos']
    }
  },
  mounted() {
    this.$store.dispatch('common/getTodos')
  },
  methods: {
    submitTodo() {
      if(this.todo) {
        this.$store.dispatch('common/submitTodo', this.todo)　// commitじゃなくてdispatch
        this.todo = ""
      }
    },
    deleteTodo(index) {
      this.$store.dispatch('common/deleteTodo', this.todos[index].id)
      this.$store.dispatch('common/getTodos')
    }
  }
}
</script>
```



## 作ってみて

- storeとか、ライフサイクルの勉強になった
    - とはいえ、ある程度ライフサイクルを理解していないと全然分からなかったと思う。
    - 例えば、ページリロードしてもFirebaseにあるリストが表示できなかったんだけど、あこれ mounted() でgetTodos()（データ取得をまとめた関数）呼び出したらいけるんじゃね？とかが思いつけたけど、ライフサイクルを理解してなかったら思いつかなかったと思う。
- Netlifyでデプロイはできなかったあ
    - エラーが出てたのは、Firebaseだけだったから、Firebaseの権限周りかも…？
    - 環境変数で管理してるし、edファイルはgitignoreしてるし。
    - アカウント連携させたアプリを作ってみて、またデプロイできるかやってみよう

## たしかこの記事を参考にした

https://note.com/aliz/n/n8411db2c9a20

## 編集後記

- 参考にした記事をちゃんと残してなかったから過去の自分にグーパンチ
- わざわざNuxtでやる必要もないのではないのではないか
    - この一年で、開発環境は最小限に！シンプルイズベスト！なきもちになった
- いきなりNuxtだったから、Vue.jsでやってみたい
Nuxt.js とContentful でいいかんじのブログを作っていくためのTips記事まとめ

Nuxt.js とContentful を使ったブログを作る手順は以下の記事でまとめたので、

https://qiita.com/hibinobinobiganbaru/items/970a133fa7452b9d2494

ここでは、より快適に使っていくためのに参考にさせてもらった記事を備忘録としてまとめていく。



## 記事

### 画像を表示させる

https://blog.tack-t.com/posts/get-article-from-contentful/

### リッチテキストを表示する

https://qiita.com/_takeshi_24/items/7d16dc5d0bc41f5e0779

https://tech.hajimari.inc/entry/2019/06/05/171553

↓リッチテキストを表示するためには、「@contentful/rich-text-html-renderer」パッケージを追加する。

https://www.npmjs.com/package/@contentful/rich-text-html-renderer

↓これはテキストタイプを取得するパッケージ。

https://www.npmjs.com/package/@contentful/rich-text-types

パラグラフ、見出し、画像、引用などなどをどうレンダリングするかを指定することができる。

↓参考になる

https://zenn.dev/kabosu/scraps/173e7d544862c3

### 記事にタグを付ける

https://dev.classmethod.jp/articles/contentful-list-field/

### Twitter card 表示する

https://zutech.netlify.app/posts/20200130/

### contentful から取得したデータをjsonとして吐き出す

https://tech.hajimari.inc/entry/2019/06/05/171553

### 記事ページのルーティング

https://tech.hajimari.inc/entry/2019/06/05/171553


### 記事投稿者の名前を表示する

https://www.contentfulcommunity.com/t/getuser-getauthor/443/3

どうやら投稿者アカウントを取得することはできないので、新しくcontent modelを作成して管理する仕組みを作る必要がある


## 投稿機能

### 投稿時、下書きを表示できるようにする

https://gurutaka-log.com/contentful-draft

https://qiita.com/polar_bear_tech/items/fac1fbc345662c396e5b#contentful%E3%81%AEapi%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6

https://blog.cloud-acct.com/posts/contentful-draft-posts/

#### preview api 

https://www.contentful.com/developers/docs/references/content-preview-api/

## ほか

https://qiita.com/hitsuji-haneta/items/6be4745b9bd6b098843f

https://qiita.com/nakanishi03/items/9674db35e03a004fb4ba
AWS Backup の薄い教科書

AWS Backupの、とりあえずとっかかれそうな内容を短めに書いています


# 兎にも角にもバックアップしてみる

#### [AWS BackupでEBSをバックアップと復元 (ハンズオン形式)](https://qiita.com/pioho07/items/8a27a31008e2ba994501)

#### [AWS Backupで別のAWSアカウントのRDSをバックアップ実行と管理](https://qiita.com/pioho07/items/0dcab9e4d3239bc3c88b)

# 画面操作

#### [AWS Backupの画面操作で状況確認](https://qiita.com/pioho07/items/47acd2b6fe632c131fd2)

# 運用で役立ちそうなやつ

#### [バックアップジョブの失敗を通知](https://qiita.com/pioho07/items/06eb4f2ac0a5602e38c3)

#### [AWS BackupをCloudFromationで自動化](https://qiita.com/pioho07/items/4fca1cc3366ed70ab918)

#### [AWS Backupの実行履歴をAthenaで見る](https://qiita.com/pioho07/items/2825023a9d648c7ea1b7)

# 外部参考情報 

* AWS Backupの基本がまとまっておりとても有用なので是非一読を

https://qiita.com/hayao_k/items/a4f18d030e0e58063f64

* AWS BackupがRDS PITRに対応(Auroraはまだ)

https://aws.amazon.com/jp/blogs/news/aws-backup-rds-pitr/
ホロノミックと非ホロノミックをロボコニストに伝わるように説明する

## ホロノミック
- オムニ
- メカナム
- 4ステ

## 非ホロノミック
- 自動車
- 自転車
- 二輪台車

## まとめ
- 非ホロノミックシステムは入力より多くの次元の状態である？。
- 二輪台車であれば入力が「速度(前後)」「角速度」の二次元に対して「x」「y」「Θ」の３次元の状態を持つ
- オムニ等であれば入力が「速度(前後)」「速度(左右)」「角速度」の三次元で状態も三次元である。

## 参考
[参考1](https://qiita.com/motorcontrolman/items/60480e0766d00f3b3d8f)
[参考2](http://www.iis.u-tokyo.ac.jp/~suzukitk/research-nh-j.html)
M5Stackで設定ファイル管理の運用パターンを作った話（詳細編）

##M5Stackの設定ファイルの運用例のコード内容について

先日書いた記事の続きになります。
今回はコードを読み解く際の詳細になるので、コードと見比べながら読む想定です。
普通に読むとわけがわからないのでお勧めできませんｗ

https://qiita.com/panda728z/items/fae8dbb3fdb8df1fecef

##main.cpp概要

https://gist.github.com/panda728/4a55c50a8c82ee70223ec8b545fb6643#file-main-cpp

main.cppの中身についてまとめます

####namespace Config
設定関係の処理を含みます。内部については後述
####namespace SubScreen
設定が取得できない場合の処理です。ここに入ると再起動以外では抜け出せません。
####void dispMenu()
ボタン別の機能名をメニュー的に表示
####void setup()
SDカードをチェックして、設定情報を読み込みます。

  auto loadOK = Config::loadConfig();

が読込処理です。
M5GFXで処理状況をLCDに表示します。
ロード中はテキストがスクロールして上に流れていくように設定しています。
ロード完了後は、成功メッセージを表示し、シリアル出力に設定情報を書き出しています。
（実際のアプリケーションではここでアプリケーション本体を起動します）

補足：SDカードへアクセスするときは、endWrite()でバスを解放する必要があります。

####void showProgress(const char *message)
ボタンを押したときにメッセージをLCDに表示します。
ボタンを押したときに反応がないと不安になるので表示する方が安心です。

####void loop()
テスト用の機能として「再起動」「設定リセット」を用意しています。
Cボタンは特に機能がないのでDummyと表示するだけです。

「設定リセット」でnvsの情報も削除できますが、サンプルでは無効化しています。
nuke(true)で削除します。
https://gist.github.com/panda728/4a55c50a8c82ee70223ec8b545fb6643#file-main-cpp-L515

Wifi接続したときにnvsに設定情報が記録されます。
次回以降はSSIDやパスワードなしで接続できて便利なのですが、M5Stackを人に渡すときなどを考えるとリセットする機能が必要ですので、こういった機能が必要となります。


##namespace Config詳細

下の方から読むことを推奨（説明もそのようになってます）

####共通処理
処理状況を出力する処理が各所に入っています。
読み解く際はスルーした方が見やすいです。

log_iなどのログコマンドで開発時、デバック時にシリアル情報が取得出来て便利です。
LCDにも要所要所で情報を出力するようにします。
事前にテキストがスクロールするように設定しているので、状況を大量に出力しても自動でスクロールして表示されます。
ユーザー側としては処理が止まっているのか、少しでも進んでいるのかがわかるので安心して待てます。
（余談ですが、Wifi接続などもこの方式で表示すると安心感がでます）

####基本フロー

https://gist.github.com/panda728/4a55c50a8c82ee70223ec8b545fb6643#file-main-cpp-L284

SDカードからMACアドレス名のついた.iniファイルを探します。
次にSDカードからconfig.iniを探します。

見つかれば、そのファイルをSPIFFS上にconfig.iniとしてコピーします。

SPIFFS上のconfig.iniがあれば、設定クラスに値を展開します。
見つからなければ、読込失敗を返します。

####補足
MACアドレス名.iniファイルを探すのは、複数の機器情報を１つのSDカードに保管する運用を想定したものです。
SPIFFSにコピーしておくことで、SDカードを抜いても設定が読み込めるようにしています。
SPIFFS上のconfig.iniファイルはnuke処理で削除します。

####　bool loadConfigSPIFFS()
https://gist.github.com/panda728/4a55c50a8c82ee70223ec8b545fb6643#file-main-cpp-L166

設定ファイルを全行読み込んでいます。
メモリ不足対策として、heap_caps_get_free_size(MALLOC_CAP_DMA)でメモリの空きと相談しながら処理ります。（クラッシュ防止）

https://gist.github.com/panda728/4a55c50a8c82ee70223ec8b545fb6643#file-main-cpp-L196
filterでコメント行や空白行をカットします。

今日の末尾に「;」でコメントが設定できる想定です。「#」にも対応したい場合は、以下のあたりの処理を変更する必要があります。
https://gist.github.com/panda728/4a55c50a8c82ee70223ec8b545fb6643#file-main-cpp-L210

####void ParseConfig
https://gist.github.com/panda728/4a55c50a8c82ee70223ec8b545fb6643#file-main-cpp-L96

グループ名とキー項目名、値を引数で受け取って、対応する設定ファイルの値を更新します。
型の変換のエラー処理が甘いところがあればエラー対策した方が安全です。

####設定情報クラス
https://gist.github.com/panda728/4a55c50a8c82ee70223ec8b545fb6643#file-main-cpp-L22

別に１つのstructでもよかったのですが、サンプルなので細かく分けています。

設定項目は宣言時に初期化推奨です。

行を丸ごとコメントアウトして、設定が流れてこないことがあります。
未設定のままだとアクセスしたときにクラッシュします。

#### void writeLine
設定情報をLCDに出力します。
事前にテキストがいっぱいになると上にスクロールするように設定しているので、大量にログを出力しても大丈夫です。
大量にログが流れたほうがユーザー側には頑張ってる感がでますｗ

##以上
処理内容の補足説明を羅列しました。
コード読み解くときの参考になれば幸いです。（半分は半年ごとの自分に向けてのメッセージｗ）
BastilleBSDで32bit on 64bit

2000年くらいには標準機で使っていた[PentiumIII](https://qiita.com/yamori813/items/2cdc2f8164e3973eb240)ですが、さすがに遅いのでCore i5上のBastilleBSDに32bitの環境を作ってみました。

```
% sudo bastille bootstrap 12.2-RELEASE --32bit
% sudo bastille create jail32 12.2-RELEASE-i386 192.168.10.52
```

もちろん13.0-RELEASEでも良いですが、実機が12.2Rなので合わせました。13.0Rではいろいろ消されたので、i386の実機は12.2Rのままにしてあります。

試しにカーネルをビルドしてみます。

```
% fetch ftp://ftp.freebsd.org/pub/FreeBSD/releases/i386/12.2-RELEASE/src.txz
% tar -zxf src.tgz
% mkdir obj
% cd usr/src
% make -j8 buildkernel KERNCONF=GENERIC MAKEOBJDIRPREFIX=/usr/home/hiroki/obj
```
Core i5でビルドしたカーネルでもちゃんと起動しました。＞あたり前田のクラッカー

Core i5では21分で終わりました。PentiumIIIのマシンでは347分かかりました。

もはやPentiumIIIを開発機として使うのは現実的ではないです。とはいえCore i5のマシンには無いRS232Cが付いているので利用価値はあります。
Git rebaseの使い方編

# 目的

1. 業務効率よく
2. コミットをまとめたり、コミットメッセージを変更したい

# 実践をやろうとした背景
> carbon というツールを見つけたので、gitのコマンドを書いて画像を出力させてみました。

# 実践
![carbon (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/57249/380dbafe-b066-db71-879f-5c139f92f294.png)

#コマンド確認

edit例

```vim
git rebase i HEAD~4
pick 8145f1c 新規作成
edit d90db4a 修正対応
pick 646bf79 削除ファイル
pick 71a6940 Javadocコメント修正
```

> squash例


```vim
git rebase i HEAD~4
pick 8145f1c 新規作成
squash d90db4a 修正対応
pick 646bf79 削除ファイル
pick 71a6940 Javadocコメント修正
```


> git commit を --amend 後

```vim
git rebase --continue
```

# 作成ツール
[https://carbon.now.sh](https://carbon.now.sh)
nasmの作法 その9

#概要

nasmの作法、調べてみた。
練習問題、やってみた。

#練習問題

fizzbuzzを表示せよ。

#makefileを書く。

```
test9.exe: test9.obj
    link.exe /OUT:test9.exe test9.obj msvcrt.lib
test9.obj: test9.asm
    nasm.exe -fwin32 test9.asm


```

#サンプルコード

```

global _main
extern _printf
section .text

_main:
	PUSH 	EBP
	MOV 	EBP, ESP
	MOV 	ECX, 1
LOOP:
	MOV		EAX, ECX
	MOV	 	EBX, 15
	DIV	 	BL
	CMP	 	AH, 0
	JZ	  	_fizzbuzz

	MOV	 	EAX, ECX
	MOV	 	EBX, 5
	DIV	 	BL
	CMP	 	AH, 0
	JZ	  	_buzz

	MOV	 	EAX, ECX
	MOV	 	EBX, 3
	DIV	 	BL
	CMP	 	AH, 0
	JZ	  	_fizz

	PUSH	ECX
	PUSH	ECX
	PUSH 	fmt
	CALL 	_printf
	add  	esp, 8
	POP		ECX
	JMP		_inc

_fizzbuzz:
	PUSH	ECX
	PUSH	ECX
	PUSH 	fizzbuzz
	CALL 	_printf
	add  	esp, 8
	POP		ECX
	JMP		_inc

_buzz:
	PUSH	ECX
	PUSH	ECX
	PUSH 	buzz
	CALL 	_printf
	add  	esp, 8
	POP		ECX
	JMP		_inc

_fizz:
	PUSH	ECX
	PUSH	ECX
	PUSH 	fizz
	CALL 	_printf
	add  	esp, 8
	POP		ECX
	JMP		_inc

_inc:
	inc		ECX
	CMP		ECX, 101
	JNE		LOOP
	MOV 	ESP, EBP
	POP 	EBP
	RET

section .data

fmt:
	db 	"%d ", 0
fizzbuzz:
	db	"fizzbuzz ", 0
buzz:
	db	"buzz ", 0
fizz:
	db	"fizz ", 0




```

以上。
Stereotype

Stereotypeはギュメ《》を使って囲む構文
　
UMLの図記号の中に独自の意味合いを付加するもの
要素の意味を論理的に拡張したり、既定の意味を変更したりする


ステレオタイプが適応できるもの
 -要素 (クラスやアクターなど)
 -接続 (関連や集約など)
 -接続の端(関連端)
 -属性・操作
 -操作のパラメータ
Markdownファイル校正手順 - 実務編

https://qiita.com/takasp/items/22f7f72b691fda30aea2

https://qiita.com/e99h2121/items/9024b2dbe5741b44f137


## 前提

- Node.js - https://nodejs.org/ja/
- VSCode - https://code.visualstudio.com/
- VSCode の Textlint拡張 - https://marketplace.visualstudio.com/items?itemName=taichi.vscode-textlint

## 手順

npm のちょっとしたオプションについては以下を参照。

https://qiita.com/standard-software/items/2ac49a409688733c90e7


### Step.1 本体と最低限のルールをインストール

任意のフォルダを作成。

`C:\workspaces\textlint_work`

`cd C:\workspaces\textlint_work`
`npm init -y`
`npm install --save-dev textlint textlint-rule-preset-ja-spacing textlint-rule-preset-ja-technical-writing`

上記で、textlint 本体 + プリセット2つをインストールする。

- preset-ja-spacing
- preset-ja-technical-writing

`npx textlint --init` で、`.textlintrc` が生成される。

https://github.com/textlint-ja/textlint-rule-preset-ja-spacing

https://github.com/textlint-ja/textlint-rule-preset-ja-technical-writing


### Step.2 追加のルールをインストール

https://shanaiho.smarthr.co.jp/n/n881866630eda

https://github.com/kufu/textlint-rule-preset-smarthr

https://www.npmjs.com/package/textlint-rule-no-mix-dearu-desumasu

上を参考に入れてみる。

`npm install --save-dev textlint-rule-preset-smarthr`
`npm install --save-dev textlint-rule-no-mix-dearu-desumasu`

既存の `.textlintrc` は一旦バックアップを取り、
`npx textlint --init` で再生成。以下ができる。

```.textlintrc
{
  "filters": {},
  "rules": {
    "no-mix-dearu-desumasu": true,
    "preset-smarthr": true,
    "preset-ja-spacing": true,
    "preset-ja-technical-writing": true
  }
}
```

こんな感じです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93824/522fe48f-4125-9556-28ec-b0ecfd8337f4.png)


### Step.3 VSCodeで校正

`C:\workspaces\textlint_work\md` 内にMarkdownファイルを置いた。
VSCodeで `C:\workspaces\textlint_work` のフォルダを開く。

例) 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93824/ee7688bb-0554-90a0-89d1-6c142e43d8ad.png)


以上で基本的なものがチェックできますよというメモ。
お役に立てばさいわいです。
nasmの作法 その8

#概要

nasmの作法、調べてみた。
練習問題、やってみた。

#練習問題

九九の表を表示せよ。

#makefileを書く。

```
test8.exe: test8.obj
    link.exe /OUT:test8.exe test8.obj msvcrt.lib
test8.obj: test8.asm
    nasm.exe -fwin32 test8.asm


```

#サンプルコード

```

global _main
extern _printf
section .text

_main:
	PUSH 	EBP
	MOV 	EBP, ESP
	MOV 	EBX, 1
LOOP1:
	MOV 	EAX, 1
LOOP0:
	PUSH	EAX
	PUSH	EBX
	MUL		EBX
	PUSH	EAX
	PUSH 	fmt
	CALL 	_printf
	add  	esp, 8
	POP		EBX
	POP		EAX
	inc		EAX
	CMP		EAX, 10
	JNE		LOOP0
	PUSH	EAX
	PUSH	EBX
	MUL		EBX
	PUSH	EAX
	PUSH 	cr
	CALL 	_printf
	add  	esp, 8
	POP		EBX
	POP		EAX
	inc		EBX
	CMP		EBX, 10
	JNE		LOOP1
	MOV 	ESP, EBP
	POP 	EBP
	RET

section .data

fmt:
	db 	"%d ", 0
cr:
	db	10, 0




```

以上。
nasmの作法 その7

#概要

nasmの作法、調べてみた。
練習問題、やってみた。

#練習問題

１から７０までを表示せよ。

#makefileを書く。

```
test7.exe: test7.obj
    link.exe /OUT:test7.exe test7.obj msvcrt.lib
test7.obj: test7.asm
    nasm.exe -fwin32 test7.asm


```

#サンプルコード

```

global _main
extern _printf
section .text

_main:
	PUSH 	EBP
	MOV 	EBP, ESP
	MOV 	EAX, 1
LOOP:
	PUSH	EAX
	PUSH	EAX
	PUSH 	fmt
	CALL 	_printf
  	add  	esp, 8
	POP		EAX
	inc		EAX
	CMP		EAX, 71
	JNE		LOOP
	MOV 	ESP, EBP
	POP 	EBP
	RET

section .data

fmt:
	db "%d ", 0


```

以上。
【OS】/Linux/デスクトップエントリ 

## 簡易説明
コマンドからでなく、アイコンでアプリを呼び出したいときに使えます。
linuxでgnomeを使っており、ランチャーから起動させる手法
※centOS7 ubuntu Desktopで確認済み

ディレクトリパスは/usr/share/applications
保存する場合は、拡張子を.desktopにします。

|フィールド|説明|
|---|---|
|Name|アプリの名前です。|
|Version||
|Type||
|Icon|アイコンのパスを指定します。|
|Exec|実行ファイルを指定します。|
|Terminal|true/falseでアプリ起動時にターミナルを出すかどうか指定します。|

## pycharm
python用　エディタ

```:2021.1.1版の場合
[Desktop Entry]
Name=Pycharm
Version=2021.1.1
Type=Application
Icon=/home/<ユーザー名>/pycharm-community-2021.1.1/bin/pycharm.png
Exec="/home/<ユーザー名>/pycharm-community-2021.1.1/bin/pycharm.sh"
Comment=pycharm!
Categories=Developmet;IDE;TextEditor;
Terminal=false
StartupWMClass=jetbrains-pycharm-ce
```
メモ
実行場所は、bin/pycharm.shを指定する
Rとggplot

# はじめに

Rの勉強を初めた。
困ったこととその解決法をメモ。
実行環境はRStudio。

# ggplot

試しに以下のソースを実行。
参考サイト：[Rによる統計入門](https://htsuda.net/stats/plot.html#ggplot2)

```r
library(Hmisc)
library(cowplot)
library(RColorBrewer)

library(datarium)
job = jobsatisfaction
mkt = marketing

library(ggplot2)

ggplot(job, aes(x = education_level, y = score)) + stat_summary(fun = "mean", geom = "bar")
```
##### メモ

- `library(Hmisc)` でエラー？
- `fun.y` は使えないらしい。代わりに `fun`
- **Sorce** で実行してもプロットされない
 - 実行範囲を選択して **Run** で実行

##### 実行結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/963393/adc50919-d775-5381-d344-48da3dfae3e2.png)


# まとめ

困ったことがあったら今後も追加していく予定。
Certified Kubernetes Application Developer(CKAD) 受検記録

先日 Certified Kubernetes Application Developer(CKAD) を受検し、合格しました。
先達に倣って受検記録を投稿します。

なお、**[2021年3Qより CKAD の試験範囲が大きく変わる](https://training.linuxfoundation.org/ckad-program-change-2021/)** ため、本記事では具体的な試験の Tips ではなく、試験そのものの記録を主とし、特に他の記事で言及されていなかった点について記載します。

## 受検までにやってたこと

いわゆる "k8sのキャッチアップはこれ" みたいなものをほとんどやったような気がします。
完全ガイド、Hard Way は CKAD 対策というよりは k8s のキャッチアップとして1〜3月に、CKAD の取得を目指してからは後者2つを重点的に行いました。

- [Kubernetes完全ガイド](https://book.impress.co.jp/books/1119101148)の通読・写経
- [Kubernetes the Hard Way](https://github.com/kelseyhightower/kubernetes-the-hard-way)
- [Certified Kubernetes Application Developer (CKAD) with Tests](https://www.udemy.com/share/101EnoBUEddV9bRXo=/)
- [CKAD-Exercises](https://github.com/dgkanatsios/CKAD-exercises)

特に、先達の皆さんがオススメしていた Udemy の "Certified Kubernetes Application Developer (CKAD) with Tests" にはとてもお世話になりました。Udemy のセール中だと 1,500 円で購入でき、しかも CKAD の受検料が15%割引されるバウチャーコードがついてきます。つまり実質無料。
このコースは改めて1からやりなおすという目的で、全て学習ログを取りながら受講しました。"with Tests" とあるように、KodeKloud というプラットフォームで実際に手を動かせるテストがあり、楽しく学習できました。

学習ログは個人のブログに投稿しています。

- https://hitsumabushi845.hatenablog.com/entry/udemy-ckad-section-one
- https://hitsumabushi845.hatenablog.com/entry/udemy-ckad-section-three
- https://hitsumabushi845.hatenablog.com/entry/udemy-ckad-section-four
- https://hitsumabushi845.hatenablog.com/entry/udemy-ckad-section-six
- https://hitsumabushi845.hatenablog.com/entry/udemy-ckad-section-seven
- https://hitsumabushi845.hatenablog.com/entry/udemy-ckad-section-eight

記録をとることそのものが億劫になってしまったり、仕事の合間にやっていたりして、都合3ヶ月もかかってしまった。。。

試験については、以下の記事をよく参照させていただきました。ありがとうございます。

https://qiita.com/mochizuki875/items/a77d5c495d2fb99bd2f9

https://qiita.com/JIIO/items/79e40237f2e86c76aae0

## 受検の環境

詳細は以下を参照。

https://docs.linuxfoundation.org/tc-docs/certification/lf-candidate-handbook/exam-rules-and-policies

ざっくり言うと、「静かで、明るくて、片付けられていて、第三者がそこに入ってこない環境」が必要です。
私は~~自宅を片付けるのがめんどくさいので~~会社オフィスのミーティングスペースを利用して受検しました。
受検では壁に貼られているものや机の上にあるものをすべてどかす必要があるので、試験開始時間の30分前には準備をしておきました。

受検は私物の MacBook を使って行いました。
なお、モニタは2枚まで(ノートパソコンの場合は本体+外付け1枚)使用できますが、私は使いませんでした。MacBook のモニタだけ。

キーボードとマウスは MacBook のものではなく別のものを使用したかったため、試験開始前に試験監督にチャットで確認したところ、大丈夫とのことでした。使い慣れているキーボードとマウスが利用できるのはありがたい。

### コロナ禍における特殊運用

上記リンク記載のルールでは "Candidate must refrain from covering their mouth and/or face" とありますが、コロナ禍においてはこのルールに変更があります。

試験前にマスクを外した顔と、着用するマスクの両面を試験監督に見せ、問題ないことが確認されれば**試験中のマスクの着用が許可されます**。これは試験前にも説明されます。

### 試験時間

試験は2時間あり、試験中は残り時間を示すプログレスバーが表示されています。具体的な残り時間は画面に表示されませんが、これは試験監督にチャットで聞くと教えてくれます。

一度聞いたからなのか、それとも元々そういうものなのか、その後は残り30分、15分、10分と逐一向こうから教えてくれました（集中が途切れるので、正直すこしこまった）。

### 試験のインターフェース

試験のインターフェースにはメモ機能があり、必要に応じてメモを取れますが、使いませんでした。
主な用途としては解けなかった問題の番号を記録するために使われるようですが、問題そのものにフラグを立てる機能があり、自信のない問題の記録にはこれを利用していました。最近提供されるようになった機能なのかも。

## 試験中のはなし

いろいろエイリアスを設定した方が便利かと思いいくらか記憶しておいたのですが、結局 `k=kubectl` だけしか使いませんでした。

1時間くらいで全ての設問を終えたので、残り時間は見直しに使えました。時間が足りないという話をよく目にしましたが、むしろ余りすぎた感があったので入念に見直しを行えました。

## 結果

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/66988/21172b38-9dc9-71ec-0101-347235001021.png)

98点で合格しました。久しぶりの資格試験を怖がって、準備しすぎた感。
CKA の取得も目指していくので、こちらはここまで準備しすぎず、早めに取るようにします。
3分で読める最新脆弱性～TLS～アルパカ攻撃

#はじめに
![alpaca-attack.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686089/22033feb-6f3d-4f40-3cac-f75ae3e11da2.png)

TLS上で動作する攻撃**ALPACA Attack**について解説する記事です。
詳細は記事内のリンクをご参照ください。

#目次
1．概要
2．原理
3．攻撃例
4．対策

#概要
「ALPACA」は本脆弱性を発表した論文「Application Layer Protocol Confusion - Analyzing and mitigating Cracks in tls Authentication」の頭文字です。


**ALPACA attack**はTLSの認証における脆弱性を利用して、特定のTLSサーバ(複数のプロトコルに対応し、マルチドメイン/ワイルドカード証明書などを使用するTLSサーバ)に対して、認証の混乱を引き起こし、別プロトコルのサービスを利用して機密情報の窃取を行う攻撃です。

こうした複数プロトコルをまたいだ攻撃は**クロスプロトコル攻撃**と呼ばれます。今回ALPACA attackと名付けられた攻撃は、脆弱性の原因をTLSサーバの設定ミスであるという点に限定しています。
<details><summary><font color="red">TLSについて</font></summary><div>
TLSは、HTTPS、SMTP、IMAP、POP3、FTP などの複数のアプリケーション層プロトコルを支える暗号プロトコルです。ネットワーク経由の通信を保護し、転送中に認証層を追加し、交換されたデータの整合性を維持することを目的としています。(デフォルトでは)パケットに**送信元/送信元IPアドレスが含まれない**という特徴を持ちます。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－
</div></details>
<details><summary><font color="red">マルチドメイン/ワイルドカード証明書の簡単な説明</font></summary><div>
**マルチドメイン証明書**：一枚のSSLサーバ証明書で、複数の**別ドメイン**のサイトを保護することができる証明書です
(例：qiita.com/hoge.co.jp/hoge.net)

**ワイルドカード証明書**：一枚のSSLサーバ証明書で、複数の**サブドメイン**のサイトを保護することができる証明書です
(例：www.hoge.co.jp/secure.hoge.co.jp/ssl.hoge.co.jp)

－－－－－－－－－－－－－－－－－－－－－－－－－－－－
</div></details>





公開日：2021年6月9日
影響範囲：複数のプロトコルに対応し、マルチドメイン/ワイルドカード証明書などを使用するTLSサーバの一部
脆弱性情報
　　advisory：[ALPACA Attack](https://alpaca-attack.com/)
　　報告論文：「[ALPACA: Application Layer Protocol Confusion - Analyzing and Mitigating Cracks in TLS Authentication](https://alpaca-attack.com/ALPACA.pdf)」
　　exploit：[RUB-NDS/alpaca-code: Artifacts to the ALPACA attack.](https://github.com/RUB-NDS/alpaca-code/tree/master/testlab)

#原理
この攻撃では、MITM攻撃が前提になってきます。(その為、限定的な状況でのみ攻撃可能) 
初めに一つのシナリオを例に、攻撃を見ていきます。

![alpaca-overview.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686089/01b6240d-025d-bd02-acbf-70b3c9c87d41.png)
(https://alpaca-attack.com/ より)

①ユーザーがHTTPSリクエストを送信
②中間者(攻撃者)によって、リクエストを同一のSSLサーバ証明書を使用するFTPプロトコルのサービスに転送
③攻撃者はFTPS(FTP over SSL/TLS)のレスポンスをユーザーに返す

この過程で3つの攻撃が可能になっています。
一つ目は認証クッキーや機密情報を盗み出すアップロード攻撃。HTTPSリクエストはFTPサーバーにアップロードされ、復号されます。二つ目はstored XSSを実行させられるダウンロード攻撃。ユーザーは悪意のあるスクリプトをダウンロードし、実行させられます。三つ目はreflected XSSを実行させられる反射攻撃です。(詳しくは[論文](https://alpaca-attack.com/ALPACA.pdf)6.1節を参照) 

では、こうした攻撃はなぜ可能になるのでしょうか。
一番の問題点はマルチドメイン/ワイルドカード証明書の運用にあります。
HTTPサーバーやFTPサーバーに同一の証明書で接続できると、HTTPSリクエストを攻撃者はFTPサーバーに転送することが可能になります。すると、FTPサーバーはHTTPSリクエストを送られるなんて思ってもみないので、リクエストを単なる文字列として受け取ってしまいます。特に不正なスクリプトを注入されないように万全の対策を行っているHTTPサーバーと違い、FTPは純粋なエラーメッセージを返すことでしょう。こうしたプロトコルサービスによる対応の違いが今回の攻撃の基となっています。


#攻撃例
不明

#対策
推奨される軽減策として、Application-Layer Protocol Negotiation(ALPN)及びServer Name Indication(SNI)といったTLS拡張を使うことで、クロスプロトコル攻撃への対策をすることができます。
しかしながら、ALPACA攻撃は単にライブラリやコンポーネントの更新で修正できるソフトウェアバグでなく、今後数年にわたって、根気強くTLS対応のアプリケーション・プロトコルに対して意識を高める必要があると研究者らは述べています。



#あとがき
2021年7月31日（現地時間）から開催される「USENIX Security Symposium 2021」内「Black Hat USA 2021」でもALPACA attackに関する発表があるそうです。興味のある方はぜひ～


<br><br><br>

攻撃の仕組み完全には理解できなかった…解釈の間違いありそうなので、疑問点あればビシバシ指摘くださいm(__)m
[Ruby]点数を自動的に当てるプログラム

## はじめに
プログラミングの基礎力を上げる勉強したので、勉強記録として投稿します。

## 問題
スコアを当てるプログラムを書きなさい。
ただし中央値で判定を繰り返して答えを求めるような設計にしてください。
また最高点は動的に変えられるものとする

※以下具体例
100点満点の場合
![スクリーンショット 2021-06-14 1.01.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/991598/3af1032c-6ca0-6329-98aa-63edb9ff7a15.png)

それ以上の数字だった場合は

![スクリーンショット 2021-06-14 1.02.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/991598/62f5de2a-f7b2-d05a-8aa2-be32e39e4d4c.png)

このように中央値を取っていき少しづつ正解の数字を当てていくようにします。
また中央値をとった回数がわかるようにします

例：83が答えの場合
`答えは83で6回判定しました`


## 解答
回答は以下になります。

```
def guess_score(limit,score)
  uplimit = limit 
  downlimit = 0
  guess = limit / 2
  p guess
  if guess == score
    puts "答えは" + guess.to_s + "1回判定しました"
  end
  2.step do |i|
    if score > guess
      downlimit = guess
      guess += (uplimit - guess)/2
    elsif score < guess
      uplimit = guess
      guess -= (guess - downlimit)/2
    end

    guess.ceil
    if guess == score
      puts "答えは" + guess.to_s + "で"+ i.to_s + "回判定しました"
    end
    p guess
  end
end
```

実行すると以下のようになります。

```
guess_score(100,83)

=>
50
75
87
81
84
答えは83で6回判定しました
```
Proxmox VEで、ホストオンリーアダプターの作成

ProxmoxのWebUIから、以下のように作成することができます。

1. データセンターの「ノード」を選択し、「システム」の「ネットワーク」を開きます。
1. 「作成」ドロップダウンから、「Linux Bridge」または、「OVS Bridge」を選択します。
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8824/25c99000-da63-28b4-3cf0-120750130227.png)
1. ホスト側で利用するIPアドレスを入力し、「作成」ボタンをクリックします。
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8824/c9d23ed7-19ee-c11c-0b0a-c24178fcb7a0.png)
1. 設定を適用ボタンをクリックしたら、ホストオンリーアダプターの作成は完了です。

後は、ゲスト側のネットワーク設定で上記で作成したアダプターを利用し、同じセグメントのIPアドレスを設定すれば問題なく通信が可能です。
仮想マシンの場合は、OS側の方でIPアドレスを指定する必要があります。
また、モデルには「VirtIO」を設定するのがパフォーマンス的にいいらしいです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8824/4389ccde-af87-bd6c-f2df-c194247d09e0.png)

WindowsでVirtIOのドライバを利用するには、以下URLのISOファイルをCD/DVDドライブで読み込ませる必要があります。
https://fedorapeople.org/groups/virt/virtio-win/direct-downloads/stable-virtio/virtio-win.iso

VirtIOドライバのインストール方法は以下に記載がありました。
https://pve.proxmox.com/wiki/Windows_VirtIO_Drivers
JavaSilverをとったときの話をしようかの

はじめに
新卒１年目の9月にJavaSilverに合格いたしました。
（正式名称：Oracle Certified Java Programmer, Silver SE 8）

どうやって取ったの？と質問されることが多々あったので、記事にまとめました。
記事を書いたのが半年以上あいてからなので結構忘れていることも多いので暖かく見守ってください。
ぜひこれから取得予定の人は役立てていただけると幸いです!

前提
・ただ資格取るだけじゃ意味ないよね！
・Silver取るだけなら難しくはないぞ！

この記事の対象者
・新卒未経験でJavaに携わり始めた人

【最短ルートで資格を取りたい人】
・黒本だけといてください（でも多分初学者には難しいかもしれない）

【理解を深めながら学習を進めたい人】
・この記事を読んでください！

【結論からいこう：私が試した方法】
①黒本を購入
まず黒本を購入しました。これがないと始まりません。

②目次を洗い出す
次に黒本の目次をワードにまとめました。
目次を見ることで学習しなくてはならない全体像を把握していきます。

③ひたすらググってまとめて理解（ここ一番大事！）
目次を抑えたら次はひたすら検索して、理解を深めていきます。
わからないことがあったら、さらに調べてというようにどんどん深掘りをしていきました。

これをすることでただ資格取得するための学習ではなく根本を抑えるための学習にすることができます。
しっかりと学習しましょう。

④黒本をとく
ここまできたら最後は黒本の形式になれることができるよう、問題をひたすら解いていきました。
エクセルに問題番号を書き出していき、時間を測って回答します。私は黒本をほぼ２周しました。

【お話】
入社前と研修で様々な言語に触れました。バックエンドはJava、フロントエンドはCSS,HTML,JavaScriptという感じです。研修期間は鬼のようにバックエンドができない。というかJavaができない。。。引数って何？変数って何？インスタンス生成？コンストラクタ？横文字はわからないよ状態でした。

Javaに携わった後に、JavaScriptに触れてみるとスルスルわかる！ということはJavaができれば他の言語はいけるじゃん！そう思いました。（単純）（エンジニアの皆様、CとかCobolとかあるじゃんっていじめないでね）

ということで負けず嫌いな私はJavaするしかないなと思ってJavaを始めることにしました。。。
これが私とJavaの出会いです。

するとなったら頑張る！ということでJavaSilverの勉強を始めました。家に帰ったら机に座る。電車の中でも本開く。会社の昼休みも本開く。という感じで死にもぐるいで勉強していたことを思い出します。

正直に申し上げると、勉強の効率が良くないので何時間で取れました！というのははっきりは言えないのですが毎日勉強していたのだけは確実です。

資格を取るだけなら、１ヶ月。根本まで理解して、取得を目指すのであれば２ヶ月といった具合だと感じました。

【補足】
結構テキトーに書いてしまった。。。
ここが知りたいなどあればご連絡くださいー！
PyTorchのインストール後torchvisionで「エントリポイントが見つかりません」のエラーが出る問題

## 問題

Anaconda に PyTorch をインストールしていざ使おうとすると下記エラーが発生して動作が止まってしまいました．
なんかいじっていたら直ったので方法を備忘録としてメモします．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/121120/5088aab3-1b2d-53a5-6c08-df1d6a4452c0.png)

> python.exe - エントリポイントが見つかりません
> プロシージャ エントリ ポイント ?get_cuda_check_prefix@cuda@c10@@YAPEBDXZ がダイナミック リンク ライブラリ <インストールパス>\anaconda3\Lib\size-packages\torchvision\ _C.pyd から見つかりませんでした。

## 環境

Windows 10 Home 21H1
anaconda Command line client (version 1.7.2)
conda 4.10.1

```
pytorch                   1.9.0           py3.8_cuda10.2_cudnn7_0    pytorch
torchaudio                0.9.0                      py38    pytorch
torchvision               0.10.0               py38_cu102    pytorch
```

他の障害のためAnacondaをアンインストールし再インストールした後主要ライブラリを `conda update --all` でアップデート．
さらにPyTorch公式の手順に従い `conda install pytorch torchvision torchaudio cudatoolkit=10.2 -c pytorch` でPyTorch関連ライブラリをインストールを行った．
この後Anacondaプロンプトを再起動し（"念の為"ここでもう一回 `conda update --all` をした気がする），jupyter notebook 上で `torch` と `torchvision` をインポートし使おうとすると，**notebookの出力やプロンプト上では何も表示されないものの，上記のポップアップエラーが発生する**．
OKを押すとそのまま動作し続けるが学習を進めたりすると，都度ポップアップして止まるため連続処理ができない状況．

## 対処

同様の事象を検索したところ，状況はところどころ違うものの以下のissueで「クリーン環境に新規インストールすると解決するが `conda update --all` を実行すると再発する」「PyTorch for Windowsが正しく機能していない」といった報告が寄せられていたため，ライブラリバージョンを落としてみることにしました．
https://github.com/pytorch/pytorch/issues/17233

ひとまず障害が起こっているっぽいtorchvisionのバージョンをひとつ下に落としてみる

```
conda install torchvision=0.9.1 -c pytorch
```

と，依存関係のpytorhとtorchaudioも一緒にダウングレード

```
The following packages will be DOWNGRADED:

  pytorch                     1.9.0-py3.8_cuda10.2_cudnn7_0 --> 1.8.1-py3.8_cuda10.2_cudnn7_0
  torchaudio                                     0.9.0-py38 --> 0.8.1-py38
  torchvision                             0.10.0-py38_cu102 --> 0.9.1-py38_cu102
```

されました．
この後Anacondaプロンプトを再起動し jupyter notebook からtorch, torchvisionを使用したところ問題なく動作し，ニューラルネットの学習等も正常にすることができるようになりました．
原因の詳しい調査はしていませんがやはり最新版に何らかのバグが有るようですね．
コミュニティ「IT For Women」を立ち上げました。

コミュニティを立ち上げました。
コミュニティ名は「IT For Women」です。
女性IT人材のためのコミュニティで、
エンジニア、動画編集者、デザイナー、外国語人材など幅広い人が参加しています。

学生時代に「広告」「ブログ」「SNS」「動画編集」などに携わり、
個人で約16,000pvまでブログを拡大させました。

基本的に自分がやったことがないことは語ってはいけない。
そう思いながら生活をしています。

今後のIT人材の需要とプログラミングは実務経験がないと語れない。
趣味では無理だと考え、新卒でIT業界に参入。

入った IT企業はベンチャー気質を持つSES企業。
巷で言われているブラックSESとは違い、
しっかりとITに携わりつつも裁量を持って働くことのできる
ホワイトSES企業でした。

それでもなお新卒でIT業界に入ってみて様々な課題を感じました。
以下のような課題です。

```
① 業界の中に入らないとわからない情報が盛り沢山。
② 会社員になると社外の横のつながりが薄くなる。
③ Webスクールの費用が高すぎるし、講師は実務未経験。
④ 副業をとってくるにも世間に転がっている案件は低単価すぎる。
```

業界の外の人間からしたら中の情報は見えにくい。
正しい情報を正しく伝えることが大切だと思ったのです。
そのためにコミュニティを立ち上げました。

特に女性となると、抱える悩みは盛り沢山です。
子育ての悩み、キャリアプランの悩みなど。

そんな女性の皆様の支えになるコミュニティになればと思っております。

IT人材が慣れ親しんでいるであろう、
Slackにてコミュニティは作成しております。
まだまだ立ち上げ段階ですが、徐々に人が増え、
良い場所になることを願っております。

料金は無料です。
IT業界にまつわる人、IT業界に興味がある人はぜひご参加ください。

参加はこちらから
https://join.slack.com/t/itforwomen/shared_invite/zt-rxn6ads0-lbnpfWatSQaRYyJdbKiGog

＞注意＜
コミュニティ参加者を守るべく、
MLM、SES転職支援の参加は禁止しております。
よろしくお願いいたします。