OmniAICreator/Qiita-1.07M huggingface dataset:
スプレッドシートの二次元配列をPandasっぽく扱う

GASでスプレッドシートの値をgetValuesで受け取ったら、二次元配列で取得されます。

この二次元配列から必要なデータを抽出していく時に、Pandasみたいに扱えると便利そうなので、クラスを自作しました。

``````JavaScript
class DataFrame {
  constructor(df) {
    this._head = df.slice(0, 1);
    this._rows = df.slice(1, this.end);
  }

  get head() {
    return this._head[0];
  }
  //列を削除。列は列名あるいは列のインデックスを詰めた配列で指定
  drop(array, axis = 1) {
    const head = this._head[0];
    const index = typeof (array[0]) == "string" ? array.map(a => head.indexOf(a)) : array;

    index.sort().reverse()

    for (const i of index) {
      this._head.forEach(h => h.splice(i, 1));
      this._rows.forEach(row => row.splice(i, 1));
    }
  }
  //指定した列だけ拾い上げる
  select(array, axis = 1) {
    const head = this._head[0];
    const index = typeof (array[0]) == "string" ? array.map(a => head.indexOf(a)) : array;

    this._head = this._head.map(head => head = head.filter((h, i) => index.includes(i)))
    this._rows = this._rows.map(row => row = row.filter((r, i) => index.includes(i)))
  }

  //rename. columns={"変更したいカラム1":"変更後のカラム1", "変更したいカラム2":"変更後のカラム2"}
  rename(columns) {
    const head = this._head[0];
    const pres = Object.keys(columns);
    const posts = Object.values(columns);
    this._head = new Array(head.map(h => {
      const index = pres.indexOf(h);
      return index > -1 ? posts[index] : h;
    })
    );
  }
  //算術演算子を用いて行を絞り込み。以下引数は全て文字列で指定
  where(column, operator, value) {
    const head = this._head[0];
    const rows = this._rows;
    const index = typeof (column) == "string" ? head.indexOf(column) : column;
    let new_rows = [];
    if(operator=="<") new_rows = rows.filter(row => row[index] < value);
    if(operator=="<=")new_rows = rows.filter(row => row[index] <= value);
    if(operator=="==")new_rows = rows.filter(row => row[index] == value);
    if(operator==">=")new_rows = rows.filter(row => row[index] >= value);
    if(operator==">") new_rows = rows.filter(row => row[index] > value);
    if(operator=="!=")new_rows = rows.filter(row => row[index] != value);
    this._rows = new_rows
  }

}
``````
かなり特殊な運用をしている兵庫県版COVID-19まとめサイト(非公式)の翻訳運用に関するお話

最近兵庫県版COVID-19まとめサイト関連のお話ばっかりで、そろそろ飽きられそうですが、今回は技術的な面のお話をします...

# かなり特殊な運用をしているんだ
兵庫県版のCOVID-19まとめサイトは、運用にあたって随時東京都版の最新のものを取り込む(マージする)運用を行っています。
東京都版で起きている問題は地域版でも起こりえる、として常々修正や機能追加が行われる東京都版を取り入れることで、地域版で起こる問題を間接的に解決できるメリットが大きいからです。
でもこれ、かなり大変(デメリットが大きい)で、自分の関わる地域版の変更と、目まぐるしく変わっている東京都版の変更のつじつまをしっかり合わせてあげないといけなくて、多分ですがかなり上級者向けの運用方法です。全部のコードを読んでて理解してるくらいの勢いじゃないと多分無理です。(なお私はそこまで詳しく理解しているわけではなく、大まかに理解しているぐらいです...)
この運用を始めた当時は兵庫県版ぐらいしかなかったのですが、今となっては他の地域版でも行われる運用形態になってきました。

# 東京都版をマージする運用を続けやすくするには
大変なマージ作業を少しでも楽にしようと思えば、地域版上で変更を加え過ぎない運用をする他にありません。
[サイト改善のススメ](https://qiita.com/y-chan/items/17bdfeb1e74963fa1fa2)でも書きましたが、兵庫県版は表の追加/改善を積極的に行っています。これと変更を加えすぎない運用は正反対なので、簡単ではありません。出来る限りコンポーネントを増やさない(出来る限りコンポーネントを使いまわす)ことで、マージ運用における保守性を高めていたりします。(その分可読性が下がる懸念がありますが...)

## 特に翻訳において
地域版で翻訳が進んでいるところはそれほど多くないですが、~~2020/04/24現在、兵庫県版は進んでいない地域版に当たります...w~~<font color="red">2020/05/08現在、5か国語(英語、簡体中国語、繁体中国語、韓国語、やさしい日本語)での翻訳を提供できています。翻訳者の皆様には本当に感謝いたします。</font>
現在ちょうど進行中ではあるのですが、兵庫県版の翻訳は保守性と運用を考えた翻訳を進めるために遅れを取っているといっても過言ではないかもしれません。
そんな、「ぼくのかんがえたさいきょうのほんやくうんようほうほう」(僕の考えた最強の翻訳運用方法)を、共有としてここに書き記しておきたいと思います。

## 東京都版の翻訳と地域版の翻訳の両立
東京都版は東京都版で翻訳プロジェクトが進んでおり、随時ファイル(`assets/locales/ja.json`など)が更新されていきます。これを地域版でも触ると大変なことになります。出来る限り変更を加えない運用どころではありません。しかも、地域版でもTransifexを使って翻訳を管理しようと思えば他の言語ファイルも大量に変更が加わることになるでしょう。翻訳だけで大変なことになってしまいます。
私たち兵庫県版では、東京都版の翻訳をうまく有効活用しつつ、兵庫県版での翻訳も進められる形をとるために、翻訳ファイルを分離して`assets/locales-hyogo/ja.json`とし、そこに兵庫県版で新たに追加されたものだけを格納してTransifexに連携を取らせる方針で進めることとしました。
Transifexとの連携に関しては、[北海道版](https://stopcovid19.hokkaido.dev)で活躍しておられる方が[記事を書いております](https://qiita.com/Nekoya3/items/ca3f6236a77ac0752ea2)ので、こちらを参考にしました。
サイトへの反映に関しては、以下のようなファイルを生成してミックスさせて処理しています。

```JavaScript:assets/locales-mixed/ja.js
import Tokyo from '@/assets/locales/ja.json'
import Hyogo from '@/assets/locales-hyogo/ja.json'

export default Object.assign(Hyogo, Tokyo)
```

## 翻訳ファイル生成の自動化
翻訳に当たって、使われる語句/文章の抽出が必要ですが、これを手動でやっているとミスが発生することもあり、とても大変です。そこで、[滋賀県版](https://stopcovid19.pref.shiga.jp)に協力しておられる方が作っておられる[翻訳ファイル自動生成スクリプト](https://gist.github.com/rioil/d44a475710fa21c8d16f1d55b754e8e2#file-i18n_generate-py)を改良し、活用することになりました。(兵庫県版で実際に活用されているスクリプトは[こちら](https://github.com/stop-covid19-hyogo/covid19/blob/development/auto-i18n/hyogo-i18n.py))
`$t('<翻訳すべき内容>')`という表現を正規表現で取り出している滋賀県版に加え、兵庫県版ではVueファイル内にちりばめられている`<i18n>`タグを抽出して、更にそのなかの`path`を抽出することもしています。
Vueの書き方は、HTMLにそっくりなので、HTMLスクレイピングをするかのようにBeautifulSoupで抜き出してあげることができます(とりあえず試してみたら出来たというちょっと驚きな部分ですw)。

ちなみにですが、これらの経験を総合し、集大成として[東京都版に自動生成スクリプトのPRもしています](https://github.com/tokyo-metropolitan-gov/covid19/pull/3594)。無事に`ready-for-merge`ラベルが付与され、マージされることになりました！

# 終わりに
兵庫県非公式版のまとめサイトに関わるようになってから、運用や開発など、いろいろなことを知り、いろいろなことを学び、またいろいろな体験をし、本家である東京都版にも貢献できるような技術力が身についてきたと感じています。
これは私が積極的に活動に取り組んでいるからかもしれませんが、このような経験はもうこれっきり二度とないように感じます。不謹慎かもしれませんが、本当に良い経験が出来るチャンスだと思っているのでみなさんも積極的に参加してみると良いのではないでしょうか...?
【PHP7.1以降】1行で配列の値の前後を入れ替える

## 背景
Vue.jsで、配列に入ったdata要素を前後でスワップする機能を作成しようと思ったのですが、
reactiveに画面に反映できず、バックエンドで簡単に処理するにはどうしよう？と思い調べてみました。

追記：2020/04/25 ご指摘いただいたので、コードに修正を加えています

## コード

```php:example.php
<?php

$array = ['a','b', 'c', 'd', 'e'];
swapValues($array, 2);
var_dump($array);

function swapValues(array &$array, int $key): void
{
    [$array[$key], $array[$key + 1]] = [$array[$key + 1], $array[$key]];
}
```

よくある書き方として、`$tmp`などの配列の値を一時保存するコードはよく見るのですが、
これだと直感的に見てもわかりやすくないですか？

## takeaways
これはphp7.1から追加された、`「対称的な配列の分解(Symmetric Array Destructuring)」` と呼ばれるシンタックスですね。

>配列の短縮構文 ([]) を使って、 代入用に配列の値を取り出せるようになりました (foreach でも使えます)。 これは、list() の代替として使えます (list() もまだ使えます)。 

参照：https://www.php.net/manual/ja/migration71.new-features.php
Ubuntu 20.04にDockerをインストールする

# まえがき

Ubuntu20.04(focal)をインストールしてDockerをインストールしようとしましたが、Docker公式のリポジトリにfocalのディレクトリがまだ用意されていなかったので、bionicのディレクトリを登録してインストールすることにしました。focalのディレクトリが用意されたらfocalに修正すればよいはず。

# 環境

- Ubuntu 20.04
- Docker 19.03.8

# インストールの準備

必要なパッケージをインストールします。

```sh
$ sudo apt install \
    apt-transport-https \
    ca-certificates \
    curl \
    gnupg-agent \
    software-properties-common
```

GPG鍵の入手


```sh
$ curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key  add -
```

リポジトリの登録

```sh
$ add-apt-repository \
    "deb [arch=amd64] https://download.docker.com/linux/ubuntu \
    bionic \
    stable"
```

# Dockerのインストール

```sh
$ sudo apt install docker-ce
$ docker --version
Docker version 19.03.8, build afacb8b7f0
```
■Kaggle Practice for Beginners - Introduction of Python - by Google Colaboratory


# Introduction of Python:

Python is quite a good language for fast prototyping. It has a huge amount of high quality and open source libraries. And I want to reuse several of them.

### Numpy
Numpy is a linear algebra library to work with dimensional arrays, which contains useful linear algebra routines and random number capabilities.

### Pandas
Pandas is a library providing fast, flexible, and expressive way to work with a relational or table of data, both easily and intuitive. It allows you to process your data in a way similar to SQL. Scikit-learn is a library of classic machine learning algorithms. It features various classification, regression, and clustering algorithms, including support virtual machines, random force, and a lot more. 

### Matplotlib
Matplotlib is a plotting library. It allows you to do a variety of visualization, like line plots, histograms, scatter plots and a lot more. 

### Keras
Keras is a user-friendly framework for neural nets. This new package is an efficient implementation of this new ]projection method which we will discuss in our course. 

## References:
**LINKS**
   >- [kaggleの住宅価格予測問題（House Prices）を解いてみる](https://medium-s.jp/kaggle-house-prices/)
   >- [住宅価格を予測する〜Kaggle House Priceチュートリアルに挑む](https://yolo-kiyoshi.com/2018/12/17/post-1003/)
   >- [scikit-learnのLabelEncoderの使い方](https://qiita.com/yoshimo123/items/3717bd17ba74764dbc69)
   >- [Kaggleの練習問題（Regression）を解いてKagglerになる](https://qiita.com/katsu1110/items/a1c3185fec39e5629bcb)
   >- [Kaggle page "House Price"](https://www.kaggle.com/c/house-prices-advanced-regression-techniques/overview/evaluation)
   >- [COURSERA -Online Learning System-](https://www.coursera.org/)

## Overview of methods(Documentations)
   >- [Scikit-Learn (or sklearn) library](https://scikit-learn.org/stable/)
   >- [Overview of k-NN](https://scikit-learn.org/stable/modules/neighbors.html)
   >- [Overview of Linear Models](https://scikit-learn.org/stable/modules/linear_model.html)
   >- [Overview of Decision Trees](https://scikit-learn.org/stable/modules/tree.html)
   >- [Overview of algorithms and parameters in H2O documentation](http://docs.h2o.ai/h2o/latest-stable/h2o-docs/data-science.html)
配列をIAsyncEnumerableにする

## 前書き

見つからなかったので

## もっと良い方法が多分絶対ある

```C#

public static class MyExtensionClass
{
    public static async IAsyncEnumerable<T> ToIAsyncEnumerable<T>(this T[] me)
    {
        foreach(var item in me)
        {
            yield return item;
        }
        await Task.FromResult("警告削除用");
    }
}
Gatsby カテゴリ一覧の作り方

Gatsbyでどのページにでも表示できるカテゴリ一覧を作る方法。

応用すればタグ一覧も作れます。

## コンポーネントでページクエリ使えない
componentでクエリ使用すると次のようなエラーがでる。

```
TypeError: Cannot read property 'allMarkdownRemark' of undefined
```

クエリはpageかtemplateでしか使えない。なのでコンポーネントでクエリを使用する場合は`StaticQuery`を使用する。

公式ドキュメントは[こちら](https://www.gatsbyjs.org/docs/static-query/)

## コンテンツにカテゴリー入れる
コンテンツにcategoryを入れておく。

```markdown
---
title: コンテンツのタイトル
description: 説明文
date: 2020-04-22T11:30:00+09:00
category: gatsby
---
```

## コンポーネントを作る
componentフォルダにコンポーネントファイルを作成。

```jsx
// src/components/category-list.js
import React from "react"

// Components
import { Link, StaticQuery, graphql } from "gatsby"

const CategoryList = () => (
  <StaticQuery
    query={graphql`
      query {
        allMarkdownRemark(limit: 2000) {
          group(field: frontmatter___category) {
            fieldValue
            totalCount
          }
        }
      }
    `}
    render={data => (
      <nav>
        <h1>カテゴリ一覧</h1>
        <ul>
          {data.allMarkdownRemark.group.map(category => (
            <li key={category.fieldValue}>
              <Link to={`/categories/${category.fieldValue}/`}>
                {category.fieldValue} ({category.totalCount})
              </Link>
            </li>
          ))}
        </ul>
      </nav>
    )}
  />
)

export default CategoryList
```

## ページやテンプレートからコンポーネントを呼び出す
あとはページやテンプレートからコンポーネント呼び出せばOK。もちろんレイアウトに入れてもOK。

```jsx
// src/pages/index.js
import React from "react"

import Layout from "../components/layout"
import CategoryList from "../components/category-list"

const BlogIndex = () => (
<Layout>
  <section>
    <div className="container">
      <CategoryList />
    </div>
  </section>
</Layout>
)

export default BlogIndex
```
Rails6のアプリをgitにあげると動かなくなった件

## 環境
macOS Catalina 10.15.4
ruby 2.6.4p104
Rails 6.0.2.2


## 状況
簡単に現状回復できる様にと、素のRailsアプリを作成して、自宅のGit鯖に上げたところ、下ろしたアプリが次の様なエラーを返してきた。

```
% rails s
   .
   .
   .
brary.rb:145:in `block in ffi_lib': Could not open library '/Users/???/Develop/sister2/vendor/bundle/ruby/2.6.0/gems/sassc-2.3.0/ext/libsass.bundle': dlopen(/Users/???/Develop/sister2/vendor/bundle/ruby/2.6.0/gems/sassc-2.3.0/ext/libsass.bundle, 5): image not found (LoadError)
```

## 解決
元々Gemの依存関係のエラーが解消しなくて始めたことだったので、また依存関係？何か手順を間違えた？と2,3時間悩んだが、なんのこっちゃない、実際に怒られている`/Users/???/Develop/sister2/vendor/bundle/ruby/2.6.0/gems/sassc-2.3.0/ext/libsass.bundle`を見に行ったところ、本当になかった。

```
% ls ./vendor/bundle/ruby/2.6.0/gems/sassc-2.3.0/ext/
depend		extconf.rb	libsass
```

元のアプリでは

```
% ls vendor/bundle/ruby/2.6.0/gems/sassc-2.3.0/ext/
Makefile		depend			libsass.bundle
SharedPtr.o		emitter.o		listize.o
ast.o			environment.o		operators.o
   .
   .
   .
constants.o		json.o			util.o
context.o		lexer.o			util_string.o
cssize.o		libsass			values.o
```
と大量のファイル群があるのに。。
原因を探して見ると、直前の.gitignoreに

```
% cat vendor/bundle/ruby/2.6.0/gems/sassc-2.3.0/.gitignore
/.bundle/
/.yardoc
/.rvmrc
/Gemfile.lock
/_yardoc/
/coverage/
/doc/
/pkg/
/spec/reports/
/tmp/
*.bundle
*.so
*.o
*.a
*.gem
mkmf.log
vendor/bundle
/ext/Makefile
```

`*.bundle`書いてあるやん（；；
これ、消していい物なのか、はたまたコマンドか何かで復活できるのか。。そもそもlibsass.bundleってなんのファイル？？
未だ解決に至っておりません。
docker-compose up-d でport is already allocatedエラー

## 概要
docker for macを使用していて
`docker-compose up -d`でdockerの起動をしようとした所port is already allocatedエラーが出た

## 原因
dockerで使用したいポートが既に使われているので起動できませんよってなってる模様

## 対応
`lsof -i:ポート番号`でそのポートが既に使われてる事を確認

```
COMMAND    PID    USER    FD   TYPE             DEVICE SIZE/OFF NODE NAME
com.docke XXXX     usr   12u   IPv6 XXXXXXXXXXXXXXXXXX      0t0  TCP *:irdmi (LISTEN)
```

上記で確認できたPIDをkill
`sudo kill XXXX`

・・・をしたら行けるとあったが今回はこれでは解決せず

## 解決
こちらを参考に　https://teratail.com/questions/212664
`docker ps`で既に起動しているコンテナがあるか確認、

```
CONTAINER ID        IMAGE                   COMMAND                  CREATED              STATUS              PORTS                  NAMES
XXXXXXXXXXXX        wordpress:latest        "docker-entrypoint.s…"   7 months ago         Up About a minute   0.0.0.0:8000->80/tcp   dockerwp_wordpress_1
```

確認できたらCONTAINER IDを使って
`docker stop CONTAINER_ID`で対象をstop後、再度
`docker-compose up -d`で無事動作した


## 参考
https://teratail.com/questions/212664
https://qiita.com/hiro0053b/items/c3306997c8ff029f720a



そもそもdocker for macを立ち上げたタイミングでなぜか全てのコンテナが立ち上がってしまう状態になってしまっているのでなんとかしたい。。。
ISACAの無料Webinarを観て、CISAのCPEを獲得してAPPLYするまで

# どうしてこれを書いたのか
古いUIの情報しかなかったので、自分の備忘録的に書いた。

# 複数のISACA資格を持っているのだけど、どうすればいいの？
わからん。

#手順

##1. ISACA会員ページにアクセスしてログインする
[ISACA会員ページ](https://www.isaca.org/)
~~なんでこんな「ランドルト環がカエルの卵」的なロゴにしちゃったんだろ。~~

##2. Archived-Webinarsのページにアクセスする
[Archived-Webinarsのページ](https://www.isaca.org/training-and-events/online-training/archived-webinars)
「どれを観た、どれを観てない」とか視聴管理すると後々捗りそう。

##3. 観たいWebinarを選ぶ
この画像は参考。タイトルのところがリンクになってて、そこをクリックする。
視聴期限は「Archived」に書いてある。
```更新：なぜかBrightTalkアカウント作成のことを書いてしまっていたのだけど、CISSPのみ必要なものなので消しました```

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267016/719c043a-222f-fd20-8a37-4533cd9d0b0e.png)
|:-:|

##4. Webinar登録を開始する
この画像は参考。「Register」をクリックする。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267016/29336d16-2ad6-e299-1ed4-b8e0826b398a.png)
|:-:|

##5. Webinarに登録する
Webinar Registrationのページに移る。
2つのチェックボックスにチェックを入れないと「Register」が押せないので注意。
※Webinarによっては1つだったりするっぽい。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267016/0d715d27-5aa1-08df-34ca-a270cbdde2c3.png)
|:-:|

##5. そしてWebinar登録完了へ…
登録完了画面に移る。
「Please allow up to 5 minutes」とか書いてあるとおり、5分ぐらいしないとMy ISACAのVirtual Eventsに反映されないので、お菓子でも食べながら5分ぐらい待つ。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267016/d098c839-a061-a78a-00f4-162c407c41ea.png)
|:-:|

##6. Webinarを観るための画面に移る
登録完了画面の以下のリンクからラーニングダッシュボードに行く、もしくはMy ISACAに入る。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267016/d779ace0-223f-2f33-8cf9-41b67fc15654.png)
|:-:|

##7. Webinarにアクセスするぞ（実はVirtual Eventsに行くだけ）
Virtual Eventsの「ACCESS YOUR LEARNING」をクリックする。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267016/7796c784-0cad-e9d0-5a27-592a78157955.png)
|:-:|

##8. （Virtual Eventsの）Webinarを観る
応募したWebinarが表示されてるはずなので「ACCESS」をクリックする。
※表示されてない場合はもうちょっと時間を置くか、2.からやり直す

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267016/87a25c39-6426-de3f-51f4-81093d342b88.png)
|:-:|

##9. Webinarを観終わろう
規定時間を見るとCPE登録可能な状態になる。
**割と短時間で次のステップに進めるときと、翌日までかかるケースがある…**

##10. CPE登録　できるかな
Webinar閲覧がうまくいくと、MyISACAのManagedCPEで「UNAPPLIED CPE HOURS」に見たWebinarの情報が出てくる　※規定時間を見るとCPE登録可能な状態になる。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267016/cc873d73-46b5-3823-4f79-86e478e44cfb.png)
|:-:|

ここで「Apply CPE to Certification」をクリックして、CPEの申請画面へ。

##11. CPE登録　やってみよう
左上の「Max Hours Allowed:」に書いてあるのが申請可能上限CPE。
自分はCISAしか持ってないので、CISAで申請するCPE「1(Hours)」を入力して「SAVE & CLOSE」
```おそらく複数資格持ってたら、どの資格にCPE割り振るのか聞かれるように思える…```

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267016/e29daafe-ee9a-7ea2-8ad3-410fe32143e2.png)
|:-:|


##12. CPE登録　やったね
10がうまくいくと「APPLIED CPE HOURS」に申請情報が反映される。
C# 基礎プログラミング100本ノック～31-35本目～

#こんばんは

本日も基礎プログラミング100本ノックやっていきます！

前回→[26-30本目](https://qiita.com/K_Hisui/items/a72e97af8636eebb9eef)
次回→[36-40本目]()

#31本目
>整数値を入力させ、その個数だけ*を、5個おきに空白（スペース）を入れて表示するプログラムを作成せよ。入力値が0以下の値の場合は何も書かなくてよい。

~~~Sample.cs
Console.Write("input num : ");
int num = int.Parse(Console.ReadLine());

string result = "";

if (num > 0)
{
    for (int i = 0; i < num; i++)
    {
        if(i % 5 == 0 && i != 0)
        {
            result += " *";
        }
        else
        {
            result += "*";
        }
    }
}

Console.WriteLine(result);
~~~


#32本目
>1から20まで順に表示するが、5の倍数の場合は数字の代わりにbarと表示するプログラムを作成せよ。

~~~Sample.cs
const int NUM = 20;

for (int i = 1; i <= NUM; i++)
{
    if(i % 5 == 0)
    {
        Console.WriteLine("bar");
    }
    else
    {
        Console.WriteLine(i);
    }
}
~~~

#33本目
>整数値を入力させ、1から9まで、入力値以外を表示するプログラムを作成せよ。

~~~Sample.cs
const int NUM = 9;

Console.Write("input num : ");
int inputNum = int.Parse(Console.ReadLine());

for (int i = 1; i <= NUM; i++)
{
    if(i != inputNum)
    {
        Console.WriteLine(i);
    }
}
~~~



#34本目
>整数値を入力させ、1から9まで、入力値と入力値+1以外を表示するプログラムを作成せよ。入力値が9の場合は9のみ表示しない。

~~~Sample.cs
const int NUM = 9;

Console.Write("input num : ");
int inputNum = int.Parse(Console.ReadLine());

for (int i = 1; i <= NUM; i++)
{
    if(i != inputNum && i != (inputNum +1))
    {
        Console.WriteLine(i);
    }
}
~~~

35本目
>{3, 7, 0, 8, 4, 1, 9, 6, 5, 2}で初期化される大きさ10の整数型配列を宣言し、整数値を入力させ、要素番号が入力値である配列要素の値を表示するプログラムを作成せよ。入力値が配列の要素の範囲外であるかどうかのチェックは省略してよい。

~~~Sample.cs
int[] array = { 3, 7, 0, 8, 4, 1, 9, 6, 5, 2 };

Console.Write("input num : ");
int inputNum = int.Parse(Console.ReadLine());
            
Console.WriteLine(array[inputNum]);
~~~

配列を定数で宣言したかったけどreadonlyもconstも使い方よくわからなかった...
誰か教えて...

#リンク
[基礎プロI 100本ノック 基礎編](http://www.cc.kyoto-su.ac.jp/~mmina/bp1/hundredKnocks.html)
【nuxt】ローカルでは動くがyarn generateしてサーバにアップするとエラーになる

あとはサーバにアップしたら終わり、、、と思っていたら遭遇して死んだので再び死なない為のメモです

# 概要
nuxtで作業後、yarn generateして生成したファイルをサーバにあげるとローカル環境では動作していたjs周りが動作していなかった


以下エラー文

```
DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.
```

# 解決
エラーを出している箇所を```<no-ssr></no-ssr>```で囲う
※nuxt 2.9.0以降では```<no-ssr></no-ssr>```は非推奨で代わりに```<client-only></client-only>```で囲う

# 原因
ローカルでもwarnは出ていた

```
[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.
```

クライアント側とサーバ側でレンダリングをするhtmlが異なる場合に起こるエラーのよう
v-ifなどを使っていると起こりやすいそうで、v-showなどに置き換えて解決する方法がある様だが
今回はプラグインを使っている箇所で起きたエラーだったので書き換えではなく
```<no-ssr></no-ssr>```で囲いクライアント側でのみコンポーネントを意図的にレンダリングすることでエラーを回避した






参考
https://qiita.com/mk-tool/items/d42119677e79b667450e
https://qiita.com/yahsan2/items/a70c4c8f617ee9b1f9ff
https://qiita.com/potato4d/items/04d3767aaa036f557950
https://ja.nuxtjs.org/api/components-client-only/
【Ruby・S3】画像 URL にアクセスし aws-sdk-s3 を使って S3 に画像を保存する

#はじめに

あるサイトから画像URLを収集してきてDBに保存し、画像ファイルをS3に送り、S3のパスをDBに保存すると言う作業をしたので、その時のメモです。

- 環境
 - OS: Mac
 - 言語: Ruby
 - 使用 gem: open-uri, activerecord, aws-sdk-s 
 - DB: MySQL

#概要

#### 1. まず画像 URL を収集して保存した DB を用意

以下のような感じです。今回はテーブル名は images としておきます。
Ruby でスクレイピングを行って集めました。

| id     |       image_url |    s3_path   |
|:-----------------|:------------------|:------------------:|
| 1                |            http://~~~~~ |        NULL  |
| 2                |         http://***** |       NULL     |
| 3                |       http://[[[[[  |        NULL       |

  

#### 2. DBの画像URLにアクセスし画像ファイルを読み込む

  DBから画像URLを取り出して、開き、画像ファイルをフォルダに保存します。
  open-uriというgemを使うと可能です。
  拡張子(.jpgや.pngなど)もつけておくとわかりやすいでしょう。
#### 3. 画像ファイルをS３にアップロードする
2で保存した画像ファイルをS3に送ります。
aws-sdk-s3というgemを使います。
以下当時のスクリプトのコピペです。

~~~ruby:s3_uploader.rb

require 'open-uri'
require 'aws-sdk-s3'

# ActiveRecordの設定用ファイルを読み込んでいます。各自ご用意ください。
require_relative '../activerecord.rb'

# rubyでS3を扱えるようにする準備です。
s3 = Aws::S3::Resource.new(
      region: 'ap-northeast-1',
      #環境変数にAWSのアクセスキーとシークレットキーを設定しておいてください↓
      access_key_id: ENV['S3_ACCESS_KEY'],　
      secret_access_key: ENV['S3_SECRET_KEY'],
    )

# ファイルを保存するフォルダ名
folder_name = "sample_images"

# 拡張子識別メソッド
def image_type(file_path)
  File.open(file_path, "r") do |f|
    begin
      header = f.read(8)
      f.seek(-12, IO::SEEK_END)
      footer = f.read(12)
    rescue
      return ''
    end

    if header[0, 2].unpack('H*') == %w(ffd8) && footer[-2, 2].unpack('H*') == %w(ffd9)
      return '.jpg'
    elsif header[0, 3].unpack('A*') == %w(GIF) && footer[-1, 1].unpack('H*') == %w(3b)
      return '.gif'
    elsif header[0, 8].unpack('H*') == %w(89504e470d0a1a0a) && footer[-12,12].unpack('H*') == %w(0000000049454e44ae426082)
      return '.png'
    end
  end
  ''
end

#以下imagesテーブルから1個ずつレコードを取り出していく
Image.all.find_each(batch_size: 1) do |image|
  #画像URLにアクセスし、画像ファイルを読み込み
  file = open(image.image_url).read 
  
  #あまりに高頻度にアクセスすると迷惑なのでスリープを1秒挟みます
  sleep(1)
  
  #読み込んだファイルをフォルダに保存
  File.open("../#{folder_name}/#{image.id}","w"){|f| f.write(file)} 

  #拡張子を代入
  extension = image_type("../#{folder_name}/#{image.id}")

  #S3オブジェクトを作成
  obj = s3.bucket('バケット名').object("/#{image.id}#{extension}")

  #S3オブジェクトに画像ファイルをアップロード
  obj.upload_file("../#{folder_name}/#{image.id}")
  
  #フォルダに保存した画像ファイルはもう必要ないので削除
  File.delete("../#{folder_name}/#{image.id}")
  
  #S3のパスをレコードに書き込み
  image.update(s3_path: "s3://バケット名//#{folder_name}/#{image.id}#{extension}")
end

~~~
Build a real-time Twitter clone in 15 minutes with LiveView and Phoenix 1.5 を写経する

# はじめに
- [Build a real-time Twitter clone in 15 minutes with LiveView and Phoenix 1.5](https://www.youtube.com/watch?v=MZvmYaFkNJI) という[Phoenix](https://www.phoenixframework.org/)の作者[Chris McCord](https://github.com/chrismccord)さんのビデオがあります
    - [Mind blowing Phoenix (Elixir) Demo. Look how easy, quick and efficient it is to build something thanks to LiveViews (the Component system of Phoenix). LiveViews are a real game changer. What a time to be alive ! 😍 (Thanks 
@chris_mccord
) #myelixirstatus](https://twitter.com/sofianebaddag/status/1253009209484021760) で知りました
- 写経してみました
- 動画中06:30 くらいの `ChirpWeb.PostLive.PostComponent.render/1` のところが超速いです
- [fukuoka.ex#37](https://fukuokaex.connpass.com/event/173363/) のイベントでの成果です


# 準備
- [Elixir](https://elixir-lang.org/) 1.10.2

```
$ mix local.hex
$ mix archive.uninstall phx_new
$ mix archive.install hex phx_new 1.5.1
```

- node.js
- PostgreSQL
    - Would you please refer to [Installation](https://hexdocs.pm/phoenix/installation.html#content) ?

# 写したもの
- https://github.com/TORIFUKUKaiou/chirp_demo
  - https://github.com/dersnek/chirp を参考に見た目をお手本に近づけました
- `git clone`して使う場合は以下のようにしてください

```
$ git clone https://github.com/TORIFUKUKaiou/chirp_demo.git
$ cd chirp_demo
$ mix setup # see mix.exs
$ mix phx.server

Visit localhost:4000/posts
```

# 触れるところ
- https://elixir-is-beautiful.torifuku-kaiou.tokyo/posts
- しばらく公開しておきます
- ご自由に遊んでやってください

# 最初にやること
- `mix phx.new chirp --live`
- [phoenix_live_view](https://github.com/phoenixframework/phoenix_live_view)がプリセットされたアプリケーションがセットアップされます

# お手本
<img width="647" alt="スクリーンショット 2020-04-24 20.50.31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/131808/48e9be63-5f67-943e-43ed-57cdf0e8f395.png">

# できたもの
- 動画の中ではCSSと画像あたりのところの説明が省略されています
- なんとなくそれっぽくつくったもの

<img width="825" alt="スクリーンショット 2020-04-24 20.51.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/131808/7f06df7f-4da4-4cb7-f7c2-cfec5469cd8d.png">

# Wrapping Up
- [LiveView](https://github.com/phoenixframework/phoenix_live_view)を使おうとすると以前は準備がけっこうたいへんだったそうです
- [Phoenix v1.5](https://www.phoenixframework.org/blog/build-a-real-time-twitter-clone-in-15-minutes-with-live-view-and-phoenix-1-5)からは、`mix phx.new chirp --live` で準備万端です

# おまけ
- データベース作成忘れ(`$ mix ecto.create`)やマイグレーション(`$ mix ecto.migrate`)忘れがあると、Phoenix 1.5からは赤い画面にマイグレーションを促すボタンが表示されるようになりました

<img width="847" alt="スクリーンショット 2020-04-29 20.16.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/131808/e29160b3-6ee8-7ead-2fa4-8ba943f1308c.png">


# 参考
- [Where is the chirp repo for the real-time Twitter clone in 15 minutes by Chris McCord?](https://elixirforum.com/t/where-is-the-chirp-repo-for-the-real-time-twitter-clone-in-15-minutes-by-chris-mccord/30904)
    - ビデオのまま写した場合、削除ボタンを押しただけでは画面からPostがすぐには消えてくれません
    - 同じ疑問をもたれた方がいらっしゃったようで、私も自分が試したことを[書き込んだ](https://elixirforum.com/t/where-is-the-chirp-repo-for-the-real-time-twitter-clone-in-15-minutes-by-chris-mccord/30904/10)りしてみました
bundler: command not found: clockwork でclockworkコマンド実行に失敗した際の対処法

#bundler: command not found: clockwork でコマンド実行に失敗した際の対処法

##背景
3分おきに実行する定期実行スクリプトを作成するために_[clockwork](https://github.com/adamwiggins/clockwork)_ というgemを利用しました。

その際の対処法を覚え書きとして記載。

```bash:エラー
$ bundle exec clockwork ファイル名.rb;
bash: clockwork: command not found
```

## 目次
* [動作環境](#動作環境)
* [結論](#結論)
* [原因](#原因)
* [おわりに](#おわりに)

---------------------------------------
## 動作環境
`OS : macOS Mojave 10.14.6`
`ruby : 2.6.3p62`
`rails : 5.2.4`

## 結論
以下のコマンドを打つと実行できました。

```bash:解決法
bundle exec clockwork ファイル名.rb;
```
## 原因

色々調べてみると。
> bundle exec をつけた場合、プロジェクトフォルダ内部にあるパッケージを利用
つけない場合、PCにインストールされているものを利用

つまりエラーの原因は
__PC自体にclockworkのgemがインストールされていなかったため__

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526570/91eb4478-13fe-7bdb-d8c5-97b7b8ed4ff3.png)


ためしにPCにインストールすると無事にbundle execなしでも実行できました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526570/244f7eef-6805-1c71-2d62-a8c8b22c86b1.png)

## おわりに

今回の件で以下のことを学びました。
1. `gemfile`はプロジェクトで利用するgemパッケージを記述したものであり、PCにインストールされているgemとは必ずしもイコールではないということ。
2. `gemfile`は`bundler`によって管理されていること
[Joke] KPTに飽きた忙しいチームに。CLK GTRで爆速ふりかえり！！💥

弊社独自の振り返り手法 [OPT](https://qiita.com/yocidama/items/207e712746d344c4ea38) を見倣って、私も独自のふりかえり手法を考えました。
以下のスーパーカーの名をそのまま冠した **CLK GTR** です！

|  [![](https://img.youtube.com/vi/rffQAllGAYg/0.jpg)](https://www.youtube.com/watch?v=rffQAllGAYg)  |
|:------------------:|
|  Mercedes-Benz CLK GTR  |

# CLK GTRの手順

## 1. これまでを振り返って、以下を付箋に書き出す（〜10分）
* C: Capture 得たもの （例：新規予算）
* L: Lose 失ったもの （例：技術調査にかけすぎた時間、運用障害で落ちた信用）
* K: Keep 維持した/維持するもの （例：今の高いモチベーション）

## 2. 1を見て、以下を付箋に書き出す（〜10分）
* G: Go 実行するタスク （例：◯◯のタスクチケットを作る）
* T: Try 試行するタスク （例：OSSを使ってみる）
* R: Remember 単に覚えておくだけでよいこと （例：スケジュール表は毎日確認する）

## 3. 2を見て、やることを投票で決め、担当者を決める（〜10分）

## 最後に

すみません、半分ジョーク記事です🙇‍♂️

仕事でも使えなくは無いと思いますが、失敗して**CLK GTR**の出元を聞かれても責任は負えません😓
本来、振り返りは忙しくても1時間程度の時間をかけて集中し、じっくり行うのがよいと言われています。

[OPT](https://qiita.com/yocidama/items/207e712746d344c4ea38) は私のプロジェクトでも採用していて4ヶ月経ちます。こちらはオススメです！
Java8と11のversion切り替え後、確認でエラーが発生する

##前提
初めてQiita投稿します。よろしくお願いします。
現在のJavaのversionが11。8に切り替えるためpathの設定を行った。
##問題
version確認
```java --version
```
エラー
```Unrecognized option: --version
Error: Could not create the Java Virtual Machine.
Error: A fatal exception has occurred. Program will exit.
```
##解決
ググるとコマンドが間違ってますと出てきた。
え...11これで確認できたけど...となり今度は

```java -version
```
で実行。すると
```openjdk version "1.8.0_252"
```と表示された。

逆(8→11)でpathを変え、java -versionを行ったところ、こちらも正常に表示された。
java -versionで覚えることにした。原因は...わかりません（初心者）
【Vue.js】アニメーション

## はじめに

VueにはCSSトランジション/アニメーションをより簡単に実装する```トランジション```というアニメーション機能がある。
要素がDOMに追加・削除または更新されたときVueは自動的にCSSトランジション/アニメーションのためのクラスを付与し、スタイルを適用する。
注意するべきポイントとしては、```トランジション機能はDOMの操作に対してアニメーションをさせるものであり、アニメーション全般に使用できるわけではない。```(DOMの追加・削除の動作がない場合、Vueのトランジションは機能しない)

#### DOM（ドム）とは
HTMLとJavaScriptなどのプログラミング言語を繋ぐもの。
JavaScriptなどのプログラミング言語を使ってDOMを操作することでHTMLの要素を操作することができる。

## 実装方法
① transitionタグでアニメーションさせたい要素を囲む
② v-if/v-showディレクティブの適用　（[v-if/v-showに関する記事はこちら](https://qiita.com/smkhkc/items/ace877ac072f345bd8a5)）
③ クラス（CSS）にスタイルを記述



```sample.vue
<transition>
  <!-- v-ifまたはv-showでDOMを操作  -->
  <div v-show="show">アニメーションさせたい要素</div>
</transition>
```

```sample.vue
<style lang="scss">
// 1秒かけて透明度を遷移
.v-enter-active, .v-leave-active {
  transition: opacity 1s;
}
// 見えなくなる時の透明度
.v-enter, .v-leave-to {
  opacity: 0;
}
</style>
```
## クラスの記述について詳しく
### トランジションクラス

Vueのtransitionには```トランジションクラス```というものがあり、その中でも```Enter```と```Leave```という２つのフェーズが存在する。
```Enter```は```「対象要素がDOMに追加されたとき」```
```Leave```は```「対象要素がDOMから削除されたとき」```
DOMの操作が行われるのに合わせてこの２つのフェーズのクラスを付与することでアニメーションさせる。


#### トランジションクラスのタイミング

|Enter系クラス　　　　|クラスが付与されるタイミング　　　　　　　　　　　　　　　　　　|                    
|:-----------------|:-------------------------------------------------|
| .v-enter         |Enter開始 DOMが追加される前。トランジションが終了した時にクラスが消える。   |
| .v-enter-active  |DOMが追加されている間。トランジションが終了した時にクラスが消える。|
| .v-enter-to      |Enter完了 DOMが追加された時。トランジションが終了した時にクラスが消える。   |


|Leave系クラス　　　　|クラスが付与されるタイミング　　　　　　　　　　　　　      　|
|:-----------------|:-------------------------------------------------|
| .v-leave         |Leave開始 DOMが削除される前。トランジションの開始時にクラスが消える。　　　 |
| .v-leave-active  |DOMが削除されている間。トランジションが終了した時にクラスが消える。|
| .v-leave-to      | Leave完了 DOMが削除された時。トランジションが終了した時にクラスが消える。　 |

**⭐️ ポイント**
**追加される時は```.v-enter```から```.v-enter-to```**
**削除される時は```.v-leave```から```.v-leave-to```**

#### クラスのプレフィックス

トランジションクラス名にはデフォルトで```v-```というプレフィックス（接頭語）がつく。
複数のトランジションを使う場合には```<transition>```タグに```name属性```をつけて名前を指定してあげることで複数のトランジションを区別することができる。

```sample.vue
<template>
  <!-- プレフィックスをsampleに変更 -->
  <transition name="sample">
    <div v-if="show">アニメーションさせたい要素</div>
  </transition>
</template>

<style>
.sample-enter-active,
.sample-leave-active {
  transition: opacity 1s;
}
.sample-enter,
.sample-leave-to {
  opacity: 0;
}
</style>
```

#### 初期状態（初期描画）でトランジションを行う

デフォルトではDOMの切り替えからトランジションを実行させるが、```<transition>```タグに```appear属性```をつけることで初期状態でもトランジションを実行することができる。


```sample.vue
<template>
  <transition appear>
　　<!-- showの状態がtrueなら初期状態でアニメーション -->
    <div v-if="show">アニメーションさせたい要素</div>
  </transition>
</template>
```
nodejsやpythonのファイルの最初の行にシェルスクリプトで使われる「あれ」を付けて実行ファイル化してみよう

どうもこんばんは、cedです。
今回はlinux系で使われるシェルスクリプトの「あれ」をnodejsやpythonのファイルにつけて実行してみようっていう記事です。

※これはwindowsでする場合、WSLが必要になります。

# 実行環境
os: ubuntu 19.10 / arm64(Android)
python: 3.7.5
nodejs: 12.16.2

# さっそくHello Worldを書いてみる
## の前にファイルに権限与える
```bash:nodejs
touch index.js
chmod +x index.js
```

```bash:python
touch index.py
chmod +x index.py
```

## nodejsの場合
```js:index.js
#!/usr/local/bin/node
//nでインストールしていない場合はlocalは要らない
console.log("Hello Woeld!");
```

#pythonの場合
```py:index.py
#!/usr/bin/python3
print("Hello Woeld!");
```

# 結果
![Screenshot_20200424-194424_Termux.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396596/6bdef179-2065-69b6-65ee-692b9697ef86.jpeg)


#終わりに
個人的にこの方法出来るのが嬉しくて記事にしました。
noteでも同じようなやつを書きましたが、qiitaにも描きたくなったので書きました
見てくださりありがとうございます。
AWS を使ってみた

Amazon Web Service (以下、AWS) を使ってみた。

自分はノートPC (MacBookAir にUbuntu 18.04.4 LTS をインストールしたもの)で作業やら学習やらを行っている。

スペック
---
- メモリ：7.7GiB
- プロセッサ：Intel core i5-5350U
- OS：Ubuntu 18.04.4 LTS
 
pythonで機械学習をやったときは流石に動作が重かったが、フツーの使い方をするくらいならなんの問題もない。

まず結論
---
便利。貸倉庫みたいな感じで、必要だけど今はいらないってデータを入れておくとノートPC の邪魔にならない。github に保管しといて、AWS 上でclone するのもありかも。
PHP 動作確認ができる。ドメイン名やらなんやら設定すればweb ページの運営も安全にできる(ノートPC で運営してるとアクセスが集中したときにPC がアツアツになって危険)。
その他のプログラミングの勉強ができる。
新規登録から１２ヶ月の無料期間があり、それが切れるとアカウント作成時に登録した口座から従量課金性で使用量が引き落とされる。従量課金のテーブルは自分で確認してちょーだい(https://aws.amazon.com/jp/blogs/news/new-updated-pay-per-use-pricing-model-for-aws-config-rules/) 。

基本的な流れ
---
1. AWS アカウントを作成する
2. インスタンスを作成する
3. 「SSH で接続する」ボタンを押すとサーバー上のOS を利用できる

1 はAmazon アカウントとは別にAWS のアカウントを作ってたように思う。住所やら口座番号やらを入力していけばOK
2 は好きなOS を選択すればよい。よく聞くのはEC2 だが自分は使ったことがない。今やってるのとはどう違うんだろう
3 は、すぐ下の「パブリックIP」ってのをブラウザのURL のところにコピペするとサーバーにアクセスできる。自分(Ubuntu 18.04.4 LTS) の場合は、
```
/var/www/html/
```
↑のディレクトリにhtml ファイルやらphp ファイルを置いてパブリックIP でアクセスすると、自分のweb ページに行ける。

気になること 
---
設置したページが「http」 なので、Google Chrome でアクセスするとURL を入力するところの左側に「保護されていない通信」と表示される。ログインフォームを置いてあるのだがログインすると「あpスワードが漏洩しました」というダイアログが出る。
Google Chrome がhttp を受け付けないようになっているので、「https」 にしない限りこのダイアログは出続ける。SLL というものを手に入れて登録しておくと通信が暗号化され、中間者攻撃(通信を傍受してなりすます攻撃)にも対策でき、Google にも怒られずに住むらしい。SLL はAWS でどうにかこうにか、登録なり設定なりすれば手に入るとのこと。公開鍵暗号の証明書のことなんやろか。

、、、欲しいなあ、、、。
Cognito User Poolのメッセージのカスタマイズで改行ができなくて困った話と解決方法

# 問題

Cognitoのユーザープールでユーザー登録を行った際、デフォルトのメールだとかなり味気ないので、ログイン先のURLや「ご登録ありがとうございます」という挨拶文などを入れたくなると思います。

そこで、ユーザー登録メールを以下のような感じでカスタマイズしてみます。

![スクリーンショット 2020-04-24 19.10.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/29737/0e1c969d-5381-b02a-4662-25a4c4559978.png)

よくある感じですね。
ですが、これだと上手く行きません。

こんな感じでメールが送られてきてしまいました。

![スクリーンショット 2020-04-24 19.21.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/29737/c14a7c18-7a01-85c2-d699-e7d7fdd76979.png)

仮パスワードに「Ero」って入ってて草


# 解決方法

このメッセージテンプレート、実はHTMLメールになっています。
なので、改行したければ改行タグを使う必要があるんですね。

やってみましょう。

![スクリーンショット 2020-04-24 19.06.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/29737/a94d2f88-0e04-fe06-f9db-4a4674589b3e.png)

こんな感じで書いてみました。
実際に登録メールを送ってみます。

![スクリーンショット 2020-04-24 19.24.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/29737/27f2ae0c-e9c4-1aca-5adb-2e89628640a2.png)

できましたね。
わかってしまえば何ということは無いのですが、わからないと詰まりポイントになるので記事にさせていただきました。

誰かのお役に立てば幸いです。
【PyTorch】サンプル① 〜NUMPY〜

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587891/8f200f2f-06e8-ae13-0eeb-8a0d330f28e6.png)
###目的

- PyTorchのチュートリアル[Warm-up: numpy](https://pytorch.org/tutorials/beginner/examples_tensor/two_layer_net_numpy.html#sphx-glr-beginner-examples-tensor-two-layer-net-numpy-py)を参考にNumpyを使って、損失(loss)や重み(weight)の計算をする。
- PyTorchの特徴の一つである、テンソルとNumpyの違いを理解するための前準備。

詳しい解説とコードは、[【PyTorch】サンプル① 〜NUMPY〜](https://www.aiprogrammers.net/entry/2020/04/24/092500)をご覧ください。



これまで、勉強してきた内容は以下。

# チュートリアル

- [【PyTorch】チュートリアル(日本語版 )① 〜テンソル〜](https://www.aiprogrammers.net/entry/2020/04/13/014852)
- [【PyTorch】チュートリアル(日本語版 )② 〜AUTOGRAD〜](https://www.aiprogrammers.net/entry/2020/04/13/232357)
- [【PyTorch】チュートリアル(日本語版 )③ 〜NEURAL NETWORKS（ニューラルネットワーク）〜 ](https://www.aiprogrammers.net/entry/2020/04/18/035524)
- [【PyTorch】チュートリアル(日本語版 )④ 〜TRAINING A CLASSIFIER（画像分類）〜](https://www.aiprogrammers.net/entry/2020/04/18/152115)

# サンプル

- [【PyTorch】サンプル① 〜NUMPY〜](https://www.aiprogrammers.net/entry/2020/04/24/092500)
- [【PyTorch】サンプル② 〜TENSOR (テンソル) 〜](https://www.aiprogrammers.net/entry/2020/04/25/190705)
- [【PyTorch】サンプル③ 〜TENSORS AND AUTOGRAD（テンソルと自動微分）〜](https://www.aiprogrammers.net/entry/2020/04/25/194823)
- [【PyTorch】サンプル④ 〜Defining New autograd Functions（自動微分関数の定義）〜](https://www.aiprogrammers.net/entry/2020/04/26/194122)
- [【PyTorch】サンプル⑤ 〜Static Graphs（静的グラフ）〜](https://www.aiprogrammers.net/entry/2020/04/27/191856)
- [【PyTorch】サンプル⑥ 〜 nn パッケージ 〜](https://www.aiprogrammers.net/entry/2020/05/02/190000)
- [【PyTorch】サンプル⑦ 〜 optim パッケージ 〜](https://www.aiprogrammers.net/entry/2020/05/03/190000)
- [【PyTorch】サンプル⑧ 〜 複雑なモデルの構築方法 〜](https://www.aiprogrammers.net/entry/2020/05/04/183000)
- [【PyTorch】サンプル⑨ 〜 動的グラフ 〜](https://www.aiprogrammers.net/entry/2020/05/05/190000)
VirtualBoxとMac間でクリップボード共有しようとしたらつまずいた話

コピペの設定していなかったなぁとやっていたらつまりました。
屍を超えていってください。
## 環境
* ホスト:MacOS
* 仮想環境:VirtualBox 6.0
* ゲストOS:kali 2020.1

## エラー内容
この記事にたどり着いたということは，
クリップボードの共有とドラック&ドロップの設定をして![スクリーンショット 2020-04-24 17.49.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/316620/c9ce3107-420c-d139-c77e-4ee3672d9438.png)
GuestAdditions.isoも設定し，
![スクリーンショット 2020-04-24 17.57.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/316620/fa55759d-f421-f4d5-19d6-0473d4ba206a.png)
Device>insert Guest Additions CDを押すと...
**GuestAddictionsCDが認識されない(?)エラーが発生した。**

![スクリーンショット 2020-04-24 18.05.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/316620/09691142-fc01-18be-2205-a49095a73bf6.png)

>Unable to insert the virtual optical disk /Applications/VirtualBox.app/Contents/MacOS/VBoxGuestAdditions.iso into the machine Kali-Linux-2018.4-vbox-amd64.
Could not mount the media/drive '/Applications/VirtualBox.app/Contents/MacOS/VBoxGuestAdditions.iso' (VERR_PDM_MEDIA_LOCKED).
Result Code: NS_ERROR_FAILURE (0x80004005)
Component: ConsoleWrap
Interface: IConsole {872da645-4a9b-1727-bee2-5585105b9eed}
Callee: IMachine {5047460a-265d-4538-b23e-ddba5fb84976}

エラー内容はGuest Additions CDをマウントできないよ〜とのこと。
~~Guest Additions CDイメージはすでにマウントされているのでは :thinking:~~

## 解決方法
CUIからマウントを試してみました。
以下入力コマンド

```
root@kali:~# cd /media/
root@kali:/media#  mkdir cdrom1
root@kali:/media# mount /dev/cdrom /media/cdrom1
root@kali:/media# cd /cdrom1
root@kali:/media/cdrom1# ./VBoxLinuxAdditions.run 
root@kali:/media/cdrom1# reboot 
```
[VirtualBox Unable to Install Guest Additions CD Image - 2019]
(https://www.youtube.com/watch?v=WiYNrx1Grak)を参考に行いました。
私はこのやり方でできました。
他の方法でもできるというのがいくつか出ていたので，詳しくは調べてみてください。


## まとめ
なぜかうまく行かなかったGuestAdditionsCDのマウント。
なぜだろうか....:thinking:
その謎を解くためにアマゾンの奥地へと向かった...。

##参考リンク
[Kali Linux 2017.1 on VirtualBox for Mac OS X(サイバーセキュリティプログラミング(O'Reilly Japan))](https://qiita.com/wyokobe/items/ff65dee449f2383a83d8)
[ファイルのドラック＆ドロップ・双方向 (virtualbox)](https://qiita.com/wakaoys/items/0d3b69ba6b49a816a46f)
[VirtualBox Unable to Install Guest Additions CD Image - 2019]
(https://www.youtube.com/watch?v=WiYNrx1Grak)
[Unable to Install Guest Additions CD Image on Virtual Box
](https://askubuntu.com/questions/573596/unable-to-install-guest-additions-cd-image-on-virtual-box)
[Virtual BoxにGuest Additions CDイメージをインストールできない](https://qastack.jp/ubuntu/573596/unable-to-install-guest-additions-cd-image-on-virtual-box)
【Docker & webpacker & Rails6】Uncaught Error: Cannot find module ‘uikit' の解決法

# 環境



#起こった現象
Uikitで実装していたデザインが突然反映されなくなった
<img width="671" alt="スクリーンショット 2020-04-23 20.19.43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/212678/8a0a2223-a839-791a-092c-490deffb1ad7.png">

# 原因
おそらくwebpackerのコンパイルが原因...？
わかる方いらっしゃいましたら教えて下さい:wink:

# 解決方法

```terminal:terminal
docker-compose down && docker images -aq | xargs docker rmi
```

```terminal:terminal
docker-compose build
```

```terminal:terminal
docker-compose up
```
ポートフォリオ作成の段階で既に分からない事態に

# 文字の置き方が分からない...
画像をHTMLにて添付すると文字と被ってしまい、CSS側でposition: absoluteを用いて調整して配置した。
しかし次の< p >でも位置ずれを起こす。
仕方がないので全てをHTMLのbrやCSSのposition:absoluteやpadding-で調整した。

後に調べてみると良質なコードは修正しやすさが大事らしい。このままでは駄目なポートフォリオのままになってしまう。困った。
ワイ的Goのプロジェクトのパッケージ割りはこれだ

## はじめに
goのパッケージ割りって悩みますよね。。
githubにもデフォルトのパッケージ割りが公開されていますが、webにそのまま使える訳でも無く、いろんな記事を見て実際に落とし込んだ**ワイ的ベスト(現段階)パッケージ割り**を紹介します！
(増田さんも「goはDDDに向かない」と仰っていましたね。。w)

## TIDL(長くは無いけど)

```
.
├── Dockerfile
├── Makefile
├── README.md
├── bin //プロジェクトで使うバイナリ(wireとか)
├── cmd //エントリポイント
│   ├── app
│   │   ├── main.go
│   │   ├── wire.go
│   │   └── wire_gen.go
│   └── batch
│       ├── main.go
│       ├── wire.go
│       └── wire_gen.go
├── config.yaml
├── docker-compose.yaml
├── docs // ドキュメント(swaggerとか)
├── go.mod
├── go.sum
├── migrations // migrationファイル
├── pkg
│   ├── adaptor
│   │   ├── api //コントローラなどi/o(adaptor層)
│   │   │   ├── converter //i/o変換
│   │   │   ├── input //iで飛んでくるパラメータやbodyのstruct
│   │   │   ├── middleware // middleware(認証など)
│   │   ├── infrastructure
│   │   │   ├── client //APIクライアント
│   │   │   ├── dto //dto
│   │   │   └── repository //repository実装
│   │   └── logger // logger
│   ├── application //application層
│   │   ├── scenario //シナリオクラス
│   │   └── service //アプリケーションサービス
│   ├── config // config struct
│   ├── domain // domain層
│   │   ├── entity //entity
│   │   ├── factory //factoryクラス
│   │   ├── model //domain model
│   │   ├── repository // repository interface
│   │   └── service // domain service
│   ├── mock // mock(テスト用)
│   └── util //utilクラス
├── scripts //1度きりの実行スクリプト(データのimportとかに使ってます)
└── tools //module使ってるので消えない様に
```

### bin
プロジェクトでwireだったりairだったり使うもののバイナリを置いておきます。
これでバージョン統一ができたりします。
ちなみにtoolsパッケージで定義しておきます。
https://tchssk.hatenablog.com/entry/2018/12/22/000000

### cmd
goのデフォルトでもエントリポイントとして紹介されています。
プロジェクトの起動を行うmain.goを置いています。
バッチとかもあると思うので自分のプロジェクトではまとめて置いています。（実際使用する時はimageで起動コマンドを分けています）

### pkg
外部に公開するパッケージです。
実際に開発する際に主に使用するパッケージです。
ちなみにinternalは外部に公開することができません

### adaptor
外界との接着点です。
自分はapi/にコントローラを直置きしています。

### converter
外界とアプリケーションのi/oの責務を持ちます。
パラメータやbodyで飛んできた物を変換したり、逆にentityを変換しapiレスポンスとして外界に返します。
inputとoutputパッケージを主に使用します。

### input
外界から飛んでくるパラメータやbodyの定義をここで行います。（コントローラでbindして使います。）
例えばこんな感じです。

```go:post.go
package input

type Post struct {
  Title string `json:title`
  Body  string `json:body`
]
```

### output
inputと同じ様にアプリケーションから外界に出ていく型を定義します。

### middleware
middlewareを置きます。

### infrastructure
外界との接着点で主にDBやAPIの処理を行います。

### client
APIクライアントです。repositoryで使います。

### dto
clientやrepositoryで使用されるdtoを定義しています。

### repository
repositoryの実装クラスです。

### logger
loggerですw

### application
application層です。
interfaceと実装両方置いています。

### scenario
シナリオクラスです。
application serviceもシナリオクラスなのですが、大きく処理が別れることがあればシナリオクラスを挟む様にしています。
シナリオクラスを爆誕させすぎるのはおすすめしないので用法容量を守って使って下さいw

### service
application serviceクラスです。
例えば

```go:post_query.go
type (
	PostQueryService interface {
		ShowPost(id int) (*entity.post, error)
	}

	PostQueryServiceImpl struct {
		Repository repository.PostQueryRepository
	}
)
```

余談ですが、CQRSに寄せており、controller、service、repositoryは全て_queryと_commandに分かれてます。

### config
configクラスです。
どこからのパッケージでも読める様に独自にパッケージ割る様にしています

### domain
domai層です
ドメイン層は説明省きます。

### mock
モック置いてます。

### util
utilクラス

### tools
https://tchssk.hatenablog.com/entry/2018/12/22/000000
【ObjectiveC】（navigationBar）ナビゲージョンバーの背景を変更する

# はじめに 

ナビゲーションバーを色々設定したいなと思った時にメモとして残しておきます。

~~~ObjectiveC:Appdelegate.m
UINavigationBar *navibar = [UINavigationBar appearance];
~~~

この処理を書くことで、全体的な UINavigationBar に適応されます。

## ナビゲーションバーの背景をイメージで設定する

~~~ObjectiveC:Appdelegate.m

// ナビゲーションバーの背景をイメージで設定する
- (void)setupNavigationBar {
  UINavigationBar *navibar = [UINavigationBar appearance];
  UIImage *image = [UIImage imageNamed:@"navigation_bar_image"];
  [navibar setBackgroundImage:image forBarMetrics:UIBarMetricsDefault];
}

~~~

※ イメージの名前は、「navigation_bar_image」に設定しましょう。

## ナビゲーションバーの背景色と文字色を設定する

~~~ObjectiveC:Appdelegate.m
// ナビゲーションバーの背景色と文字色を設定する
- (void)setupNavigationBar {
  UINavigationBar *navibar = [UINavigationBar appearance];
  navibar.tintColor = [UIColor whiteColor]; // 白色
  navibar.barTintColor = [UIColor colorWithRed:1.0 green:0.0 blue:0.0 alpha:1.0]; // 赤色
}
~~~

---

## 関連記事

---

【About】(http://qiita.com/sunstripe) - サンストライプ

---

## 制作チーム：サンストライプ

[![sunstripe_logo.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80600/322f2d60-f19d-af9e-2b6f-7290ca546848.png)](http://sunstripe.main.jp/)
http://sunstripe.main.jp/

(月１ WEBコンテンツをリリースして便利な世の中を作っていくぞ！！ボランティアプログラマー/デザイナー/イラストレーター/その他クリエイター声優募集中!!)

緩募


### 地域情報 THEメディア
THE メディア 地域活性化をテーマに様々なリリース情報も含め、記事をお届けしてます！！
https://the.themedia.jp/

### ゼロからはじめる演劇ワークショップ
多様化の時代に向けて他者理解を鍛える

https://workshop.themedia.jp/

### プログラミングワークショップ・ウェブ塾の開講！！！
様々なテーマでプログラミングに囚われずに取り組んでいきます。
詳しくはこちら　↓　↓　↓　↓　↓　↓　↓　↓
[プログラミングサロン 月１だけのプログラミング学習塾](https://workshop.themedia.jp/posts/7057553?fbclid=IwAR32CfRQ7RvDOhvuogoSwqxDLMOU7Jvuzljlnx-TMc27qBPX1BnWsfLcBR8
)

### 協力応援 / 支援者の集い
## チーム：サンストライプ
https://twitter.com/sunstripe2011

#### プログラミングラボ
https://twitter.com/PLab2020

一緒にポートフォリオを作りませんか？現場の体験やそれぞれの立場から年齢関係なく作品を作りたい方々と一緒にチームを作って、作品を作っています。現場に行きたい人には、職場紹介や職場の体験や悩み相談なども受けております。
様々な職種からプログラミングの知識を得たい、デザインの知識を得たい、データーベースの知識を得たいという人が集まっております。
週１のミーティングにそれぞれの近況と作業報告して、たまにリモート飲み会などをしております！！

興味がある方は、DMに話しかけてみてください。

#### トラストヒューマン
http://trusthuman.co.jp/
私たちは何よりも信頼､人と考えてます｡

｢コンサルティング｣と｢クリエイティブ｣の両角度から｢人材戦略パートナー｣としてトータル的にサポートします！！

### キャリア教育事業

#### 青空プログラミング
[![青空プログラミング100px.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80600/603d53ab-828b-645e-a415-1b6f158d7356.png)](https://actcoin.jp/project/detail.php?id=600)

[![ダウンロード (9).jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80600/9bde9318-28c2-ce74-d4c5-326168061bcc.jpeg)](https://www.youtube.com/hashtag/%E9%9D%92%E7%A9%BA%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0)

#### 広域学習支援プラットフォーム『のびのび日和』
https://slc-lab.amebaownd.com/

#スポンサー募集

## ネリム
https://nerim.co.jp/
配信事業などを映像コンテンツなどの制作しております

## ビヨンドXプロジェクト

[ビヨンドXプロジェクト全体会議](https://www.youtube.com/playlist?list=PLaR6-YWiGWkYhEHWnt8f1z-JC0g3nwwC9)
Sign in with Appleの注意点

# Sign In with Apple
実装は、公式サンプルコードを参照すれば比較的容易です。

[「Appleでサインイン」によるユーザー認証の実装](https://developer.apple.com/jp/documentation/authenticationservices/implementing_user_authentication_with_sign_in_with_apple/)

# 注意点
何処かに記載があるのかもしれませんが、下記コード(公式サイトより引用)内のgetCredentialState()は、現時点のシミュレータ(version 11.4.1)では常に.notFoundを返すようです。動作確認は実機で実行する必要があります。

最初シミュレータでも.authorizedが返ってきていて、試行錯誤しているうちに動かなくなったように見えたのですが、[このやり取りを読むと](https://github.com/invertase/react-native-apple-authentication/issues/9)勘違いのようです。

```swift
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    let appleIDProvider = ASAuthorizationAppleIDProvider()
    appleIDProvider.getCredentialState(forUserID: KeychainItem.currentUserIdentifier) {(credentialState, error) in
        switch credentialState {
        case .authorized:
            break // The Apple ID credential is valid.
        case .revoked, .notFound:
            // The Apple ID credential is either revoked or was not found, so show the sign-in UI.
            DispatchQueue.main.async {
                self.window?.rootViewController?.showLoginViewController()
            }
        default:
            break
        }
    }
    return true
}
```
自作キーボードにアマビエを召喚してみた

みなさん、いかがお過ごしでしょうか
COVID-19 の脅威が収まらず、不安な日々をお過ごしかと思います

そんな中、妖怪アマビエをお守り代わりに掲示するというのが流行っていますね（本当はアマビコの方がご利益あるのではという声もありますが、今回は割愛）
そこで、自作キーボード勢のみなさんに、キーボードの OLED にアマビエを召喚できるようにしてみました

# ソースコード

https://gist.github.com/koktoh/cb2f339ac3b1560a7d66114f8efc38c2

# アマビエ召喚の義

詳しくは[公式][logo_exp]をご覧ください

1. `amabie_glcdfont.c` をキーボードディレクトリの配下に追加/置き換え
2. `config.h` に `#define OLED_FONT_H "keyboards/キーボードのパス/amabie_glcdfont.c"` 追加/置換
3. `keymap.c` に[公式][logo_exp]にあるように OLED 表示用のメソッド追加/書き換え
4. `qmk_logo[]` のあたりをコメントアウトしてある `amabie[]` に変更

これで、アマビエが召喚されることでしょう

<font color="Red">なお、~~面倒だったので~~ 文字などのデータは入っておらず、アマビエのドット絵データしか含まれていません</font>

# アマビエ召喚

![20200424_004051.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553901/80877891-0ae8-56e2-2763-fd2076cfe966.jpeg)

相棒であるキーボードにアマビエを召喚して、この状況を一緒に乗りきりましょう！

[logo_exp]:https://docs.qmk.fm/#/feature_oled_driver?id=logo-example
A5:SQL Mk-2でMysqlに接続

A5、めっちゃお世話になってます。
かなり個人向けの記事ですが、A5使ったことない人向けに。

# ダウンロードはここ

https://a5m2.mmatsubara.com/

ダウンロードして解凍して「A5M2.exe」を実行すると使えます。

# MySQLへの接続設定

起動したら「データベース」ってところを右クリックするとこんなん出ます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224453/6ddbbac9-8c6a-4c9c-a73e-acf397502cb0.png)

ここは接続設定がいっぱいできると接続設定達が並びます。最初はなにもなので「追加」ボタン。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224453/2e4e508e-ffcb-6f48-cdc6-94a3295f3cfe.png)

MySQLに直接つなぐときこれ選びます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224453/4137496c-440b-895e-6c63-060d6536f4a3.png)

ここ大事なとこ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224453/b411ce4b-1493-2533-129d-a96203aa60e7.png)

```
ホスト名: Mysqlのサーバ名もしくはIPアドレス、ローカルに入ってるならlocalhost
ポート番号: Mysqlならdefaultは3306だけど変えてるならそれに合わせる
ユーザID: ユーザID
パスワード: パスワード
データベース: Mysqlに名前をつけてつくった領域、Oracleでいうところのスキーマ
```

入力したら「テスト接続」してみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224453/caa9ac40-0b0b-c51b-ae18-3f24d8e44d35.png)

OKなら接続設定の名前を適当につけて完了。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224453/782ece0b-ae08-c59a-361b-c0f26cef467c.png)

接続設定がリストに追加された状態。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224453/f69d77a8-aa26-79d7-a996-3fd3c77cc38a.png)

作った設定をもとにデータベースを開くと、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224453/0a7176d6-f53d-96b1-a0d5-ca594bb64777.png)

なんやかんや見れます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224453/a611b097-e821-cc72-8bfd-815576179c28.png)