OmniAICreator/Qiita-1.07M huggingface dataset:
【HTML+CSS3】filterプロパティが楽しい！早速活用してバイクの外装色変えWebアプリを作ってみた

##最近は便利なCSSプロパティが増えてますね。filterとか。

いやあ、本当に10年前は考えられなかったような便利なモノや、高機能な(昔はJSがないとできなかったような)モノが、今ではCSSで簡単に実装できるようになりました。素晴らしいことです。

その1つ。個人的に便利だなあというか嬉しいなあと思うモノの1つに「filter」があります。filterのMDN web docsは[こちら](https://developer.mozilla.org/ja/docs/Web/CSS/filter)。

## css filterとは

css filterとは、簡単に画像にエフェクトをかけることができるcssプロパティで、モダンブラウザでのみ使用することができます。(IE11以下はNG)

例えば、画像を白黒にするためには

```css
img{
  filter: grayscale(100%);
}
```

画像をぼかすには

```css

img{
  filter: blur(4px);
}
```

のようにすることで、簡単に簡単な画像加工ができます。

また、

> url(): Takes an IRI pointing to an SVG filter, which may be embedded in an external XML file.
ということで、独自のfilterをxmlで定義して下記のように使用することもできます。![error]()


```css
img{
  filter: url(resources.svg#c1);
}
```

##filterプロパティを使ってバイクの外装色変えWebアプリを作ってみた

###作ったもの

作ったWebアプリがこちら。

[着せ替えMOTO!!](http://tasokori.net/webapps/kisekae-moto/)

こんな感じの動きになっています。

![VID_204610726_181605_360.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/145371/900bda93-dcb7-6f7d-c668-9be354318bd9.gif)

ソースはGithubにあげてますので興味のある方はのぞいてみてください。[こちら](https://github.com/hidepy/KisekaeMoto)です。

###仕組み

まあもう書くまでもないかとは思いますが...

1. バイクのパーツをPhotoshopで切り抜いく
2. HTML上に画像としていい感じに配置(position: absoluteとかでね)
3. 左側の調整バーで色、鮮やかさ、明るさの変更イベントを検知してCSS filterの色(hue-rotate)，鮮やかさ(saturate)、明るさ(brightness)を変更して画像に適用する

というだけです。わおシンプル！

コアな部分のソースはこんな感じです。

```javascript
            // 適用するfilterのスタイルを組み立て
            let filterStyle = ""

            // idを基に、部品に紐づく設定情報を取得
            $(`#${wrapperId} .controll-panel-input`)
                .each((i, v)=> {

                    // ホントはinput[type=range]で与えられた値をもとに構築する
                    filterStyle += "hue-rotate(90deg) saturate(120%) brightness(120%)"
                })

            // 作成した結果を適用
            $(`#moto-parts-${partsName}`).css("filter", filterStyle)
```

かなり割愛してますが、こんな感じで、各部品に対して

こんなシンプルなものですが、その車種のバイク乗りの方には地味に便利なアプリが出来上がりましたと、そんな感じの話でした。

また何か面白そうなものを作ったら更新していきます。
Firebaseでサイトを公開する方法を初心者目線で解説します！

[未来電子テクノロジー](https://www.miraidenshi-tech.jp/intern-content/program/)でインターンをしている田島一毅です。プログラミング初心者であるため、内容に誤りがあるかもしれません。
もし、誤りがあれば修正するのでどんどん指摘してください。

プログラミング初心者の方で、

**「自分で作ったページを全世界に公開したいなあ」**

と考えている方は多いでしょう。

自分もそんなうちの一人でした。
どうしても自分の作ったページを公開したかった僕は、ググって、失敗してもがきながら、なんとかFirebaseというサービスで自分のプロダクトを公開しました。

そこで今回は、**Firebaseでサイトを公開する方法を、初心者目線で解説します**。

#Firebaseとは？

プログラミング初心者の方には、
「FIrebaseってそもそも何ぞや」
という方が多いと思うので、Firebaseとは何か簡単に説明しますね。

Firebase は Google が提供しているモバイルおよび Web アプリケーションのバックエンドサービスで、いろいろなことができるめちゃくちゃすごいサービスです。
今回の場合だったら、サイトの公開が、Firebaseの「ホスティング」というサービスを利用することでできてしまうのです！！


#実際にどうやって公開するの？

##Googleアカウントを作る
FirebaseはGoogleのサービスですから、まずはGoogleのアカウントを作成する必要があります。

##Firebaseでプロジェクトを作る
FirebaseにGoogleアカウントでログインしたら、Firebaseのサイトページにある[「コンソールへ移動」](https://console.firebase.google.com/?hl=ja)をクリックします。

すると、「新しいプロジェクト」という表示が見えると思うので、そこをクリックしてプロジェクトを作成します。

プロジェクト名は、公開するサイトの内容に合ったものであればなんでもいいと思います。
(ちなみに僕は、ポートフォリオサイトを公開する際、profire-tajimaという名前を付けました。)

##ローカルでプロジェクトと同じ名前のディレクトリを作成
ローカルのデスクトップにFirebaseで作成したプロジェクトと同じ名前のディレクトリを作成し、作成したディレクトリの下に公開したいサイトのディレクトリの名前を、「public」に変更して入れます。

##node.jsとnpmをインストールする
node.jsとnpmをインストールします。
下記サイトからインストールしてください。

node.js → https://nodejs.org/ja/
npm → https://www.npmjs.com/

なんだかよくわからないけど、とりあえずインストールしました(-_-;)

##Firebase-toolsのセットアップ
ここまで来たら、次はFirebaseのセットアップをしていきます。
Macならターミナル、WindowsならWindows Powershellなどのターミナル画面で、まずは、

```sh
npm install -g firebase-tools
```

と入力してFirebaseをインストールします。

その後、cd(change directory)して、ローカルのプロジェクトのディレクトリに入ります。
ローカルのプロジェクトのディレクトリに入れたら、

```console
$ firebase init
```
と入力して、Firebaseプロジェクトを初期化します。

この時、いくつか質問されるので、まずはHostingを選択、その後の質問はEnterキーを押して、どのプロジェクトを使うか聞かれたら、使うディレクトリを指定しましょう。

##サイトにデプロイする
使うディレクトリの指定ができたら、次は、サイトにデプロイします。

```console
$ firebase deploy
```
と入力して実行すると、サイトが公開され、そのサイトのURLが表示されるので、そのURLで検索をしたら、自分のサイトが公開されているはずです。

その際、「Firebase Hosting Setup Complete」と表示され、自分のサイトが公開されない方が多いとは、思いますが、少し時間が経てばすぐにサイトが公開されるので、安心してください。

これで、サイトの公開は完了です！！

内容の更新や削除については、また今後に載せようかと思っているので、楽しみにしていてください！
OculusQuestでSketchfabのモデルを見る方法とその際の注意点(追記あり)


#OculusBrowserからSketchfabでVRモードを利用
View in VRボタンを押すだけです。簡単ですね！
![スクリーンショット (106).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/429117/68bc0f6b-864d-73fb-bb95-02bf940ddd65.png)
以下簡易的な操作方法です。
基本片手のみ使います。

|ボタン      |操作 |    
|:-----------------|------------------:|
| Bボタン             |              メニュー(HOMEで終了) |    
| 人差し指          |            選択/移動(テレポート) |      
| スティック(左右)         |     左:拡大/右:縮小          |     
移動はテレポート先を以下の様な円で選択します。

![com.oculus.browser-20190610-221622.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/429117/dfb7d862-03ca-9072-08b9-5194d0f15f94.jpeg)





#問題:解像度が低くて快適に見れない
はじめてアクセスした際、以下のような状態になりました。
![com.oculus.browser-20190602-210819.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/429117/b873da87-bd3f-3acc-25bc-ee5c5158d05c.jpeg)
全体的にモザイクが強くかかっている状態のようになってしまい、快適ではありませんでした。
Twitterでそのことを呟いたところ、[alban renoyel氏](https://twitter.com/albn)からリプを頂き以下の解決法を教えていただきました。
(後にCommunity Blogを確認したところ、ちゃんと記載されてました。確認大事)
##

#解決法1:共有用URLの埋め込みオプションを付ける
以下の様にURLを変更してください。
`https://sketchfab.com/models/モデルのID/
embed?pratio=2.5&vr_scale_rtt=1&autostart=1&maxDevicePixelRatio=1.5`
モデルのIDは通常のURLでは作品名の後ろに書かれている英数字の文字列です。
例:/3d-models/liopleurodon-ferox-swim-cycle-**522e811044bc4e09bf84431e6c1cc109**
![com.oculus.vrshell-20190602-210959.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/429117/fe886659-206e-0b9c-eaac-0852ab26ff61.jpeg)
とてもいい状態になりました。
ただこのやり方では入力が大変です。
(追記:この項目のやり方はBlogから削除され以下のやり方が記載されています。)


#解決法2:デスクトップモードをONにする
ブラウザ右上にある「デスクトップモードをオンにする」をクリックしてください。
![com.oculus.vrshell-20190610-214146.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/429117/b2fa89c4-6447-d292-dae6-973ea0f579a4.jpeg)
この方法ならばいちいち入力が必要ないですね。
(追記:[Community Blog](https://sketchfab.com/blogs/community/sketchfab-runs-on-the-new-oculus-quest-vr-headset-and-its-awesome/)が更新されこのやり方が紹介されてます。)


#その他
今回Sketchfabそのものの機能は紹介しませんでしたが、Model Inspectorというボーンやワイヤーフレームを表示する便利機能がVRモードでも有効なのでおすすめです。VRモードボタン左のおせちのようなボタンです。

HDで高負荷のモデルを読み込もうとするとリフレッシュレートが落ちることがあるのでまだブラッシュアップの必要なところはあると思います。しかし、いままでディスプレイの前で見てきたものが歩き回って見れるのはやはり楽しいですね。

(余談)
中の方からリプが来てびっくりしたのですが、情報をちゃんと届けていただいた点で好感度が上がりました。ちょろい。(とは言っても今回、私がツイートを解決法を調べる前に反射的にしてしまったところがあるので反省してます。サーチ大事。)

#引用元
[alban denoyel on Twitter](https://twitter.com/albn/status/1133433016041332736)
[Liopleurodon Ferox Swim Cycle(例に使ったモデル)](https://skfb.ly/6HqUN)
[Community Blog(Oculus Questに関する投稿)](https://sketchfab.com/blogs/community/sketchfab-runs-on-the-new-oculus-quest-vr-headset-and-its-awesome/)
Alexaスキルでレスポンスを流暢な英語にする方法


# 背景
先日行われたAlexaスキルアワード2019のハッカソンにて、レスポンスを英語で返すスキルを開発していたところ、流暢な英語を話させる為にちょっとしたハック？が必要で苦労した。

# 目的
`SSML`を使ってスキル内の一部のレスポンスを流暢な英語にする。

※ SSMLは音声の速さや強弱などをHTMLライクに制御できる`音声合成マークアップ言語`です。

# langタグで素直に指定してみる
現状リージョンが日本のアレクサスキルでユーザー側が英語で入力する事は不可能だが、`SSML`の`lang`タグを使ってスキルからのレスポンスはネイティブ英語にできると聞いていたので、以下のように`en-US`を指定して試してみた。

```html
<speak>
    <lang xml:lang="en-US">Hello world</lang>
</speak>
```

あれ？カタコト英語になっちゃう。。。

普通にこれでいけそうだけど？？

# ドキュメントを読み返す

よくよくドキュメントを読み返していると衝撃的な事実が。

> Alexaはスキルの元の言語で利用できるサウンドを使用して発音します。このため、ネイティブスピーカーとまったく同じようには聞こえない可能性があります。langタグだけを使用した場合よりも自然な音声にするには、langタグとvoiceタグを一緒に使います。

日本語の音素を元にネイティブ英語を精製しようとしていたわけですね。それは厳しいですね。。

# voiceタグを使って記述を修正する

```html
<speak>
    <voice name="Joey">
        <lang xml:lang="en-US">Hello world</lang>
    </voice>
</speak>
```

これでバッチリいけました！

`Joey`という声サンプルを使ってますが、ベースの音素が増えて英語を流暢に話してくれるようです。
ちなみに`en-US`の声のラインナップは以下になっています。

- Ivy
- Joanna
- Joey
- Justin
- Kendra
- Kimberly
- Matthew
- Salli

# まとめ
ドキュメントを読めばちゃんと書いてあるのですが、地味に苦労したので記事にしておきました。

肝心のハッカソンは全然ダメだったのでもっと技術力を上げてリベンジします。

公式ドキュメント：
[LANG](https://developer.amazon.com/ja/docs/custom-skills/speech-synthesis-markup-language-ssml-reference.html#lang)
[VOICE](https://developer.amazon.com/ja/docs/custom-skills/speech-synthesis-markup-language-ssml-reference.html#voice)
PycharmとDjangoを使って素人がWebアプリを作ろう！～前準備～

## 動機
就活がいよいよ始まるということでインターンにいくつか応募してみました。
ESをつらつらと書いていると、
「学生時代頑張ったことをご記入ください」（例）競技プログラミング優勝
「今までに作った成果物をご記入ください」（例）アプリ制作経験、サーバー運用経験

…………。:confused:

**そんなのねえ！！！！**

ということでWebアプリを作ってみることにしました。
とりあえず研究で使っているので言語はPython。
どうやらDjangoが良いらしいということなのでよくわからないけど取りあえず使ってみます。

## Pycharmのインストール
普段研究ではjupyter notebookを使っていたんですが、アプリ制作には不向きということで新しいエディタをインストールします。無料版と有料のProfessional版（月1000円程度）があるらしいんですが、学生は無料で有料版を使えるとのことなので恩恵を授かることに。
[JetBrainsの学割の申請方法について](https://qiita.com/tetrapod117/items/92f965cf1928739b70e4)
を参考にさせていただきました。やったね！
PycharmのPro版を起動後さっき学割申請したアカウントでログインしたらアカウント認証は完了です。

## DjangoをPycharm下で使えるようにする
New Projectを選択することで下記のようなウィンドウが表示されます。
![MakeApp1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434940/799fcf5c-7384-d91e-b650-a99879df05d9.png)

左タブからDjangoを選択して、プロジェクトの名前を設定（今回はQiitaにしました）してからCreateボタンを押してください。仮想環境が構築されます。（無料版だとこの左タブが出ず、「出ねえ…出ねえ……」ってめちゃ嘆いてた）

あとはPycharmが勝手にDjangoをインストールしてくれるので任せます。

次にFileタブからSettingsを選択し、Languages＆Frameworks下にあるDjangoを選択。

![MakeApp2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434940/c100c3e5-fa76-0cf7-9fbf-52079300b873.png)
一番上のEnable Django supportにチェックを入れて適用させます。
![MakeApp3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434940/4d2a8c28-38c9-f1f1-8a14-717f7b197d52.png)
これで準備は整いました。

## ファイルを確認してみる
メインメニューに戻ってディレクトリ構造を確認してみると、

```
└── qiita
    ├── manage.py
    └── qiita
        ├── __init__.py
        ├── settings.py
        ├── urls.py
        └── wsgi.py

```
のようになっていました。

それぞれのファイルの詳しい意味はよく分からないのでおいおい勉強していきたいのですが、このqiita下のqiitaディレクトリがこのプロジェクトの”核”となる部分みたいです。また、manage.pyに対してコマンドを送ることでアプリとなるそうです。

## アプリを作ろう！！！
全く何も分かってはいないですがとりあえず手を動かしてみます。
Toolsタブから「Run manage.py Task」を選択すると、manage.pyに対して命令を送るモードになります。
![MakeApp4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434940/ac7dd3e3-5faf-f308-7332-40d239b3be0b.png)

```
>startapp <アプリ名>
```
というコマンドでWebアプリを作るためのディレクトリが生成されます。
今回は「app」という名前にしました。
この時点でディレクトリ構造は下記のようになっているかと思います。

```
qiita
├── manage.py
├── qiita
│   ├── __init__.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
└── app
    ├── __init__.py
    ├── admin.py
    ├── apps.py
    ├── migrations
    │   └── __init__.py
    ├── models.py
    ├── tests.py
    └── views.py

```
## settings.pyを編集する。
最後に行ってほしい作業がひとつ。
settings.pyのINSTALLED_APPSに先ほど作成したアプリ名のタグを追加してください。
なんでかは分からないです。
![MakeApp5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434940/f5c8c465-f993-967a-df27-53bd81b0e68b.png)

疲れたので今回はここまでにします。
Flutter でも Codecov を導入して test モチベを上げよう!

![codecov](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159680/ad2bdfde-a705-c6c4-3683-0308d016ed43.png)

[Codecov](https://codecov.io/) というカバレッジ計測のサービスを Flutter での開発に導入したのですが、めちゃめちゃ良いので紹介。
有名どころだと [provider パッケージ](https://pub.dev/packages/provider) で使われていますね。
連携がとても簡単な割に便利すぎるので、やっといて損はないと思います！
しかも [private リポジトリでも1個までは無料](https://codecov.io/pricing)!

筆者は、Flutter の Unit/Widget test を CircleCI で回していた(今は GitHub Actions)のですが、そこに Codecov を連携させた話を簡潔に書きます。
(参考: こんな感じの構成で開発しています)
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159680/af3eafc0-9d3e-32ba-7c7e-9eadfc7ec5f8.png" width="600">

## 手順
冒頭に貼った画像のように「GitHub の PR にテストのカバレッジをコメントしてもらう」のを実現する手順

### 1. `flutter test` に `--coverage` オプションを追加
例えば、こんな感じ。

```.cirlceci/config.yml
version: 2.1

orbs:
  codecov: codecov/codecov@1.0.5 # See: https://circleci.com/orbs/registry/orb/codecov/codecov

jobs:
  flutter_analyze_and_test:
    environment:
      - LANG: en_US.UTF-8
    docker:
      - image: circleci/android:api-28
    steps:
      - checkout
      - run:
          name: install flutter sdk
          command: git clone -b stable https://github.com/flutter/flutter.git ~/flutter
      - run:
          name: flutter analyze
          command: ~/flutter/bin/flutter analyze --write=analyzer-output.txt
      - run:
          name: flutter test
          command: ~/flutter/bin/flutter test --coverage --coverage-path=~/coverage/lcov.info
      - codecov/upload:
          file: ~/coverage/lcov.info
```

### 2. `codecov.yml` を追加
例えば、こんな感じ。

```..codecov.yml
# See: https://docs.codecov.io/docs/codecov-yaml
codecov:
  notify:
    require_ci_to_pass: yes

coverage:
  precision: 2
  round: down
  range: "70...100"

  status:
    project:
      default:
        target: 70%
    patch: no # See: https://docs.codecov.io/docs/commit-status#section-patch-status
    changes: no

parsers:
  gcov:
    branch_detection:
      conditional: yes
      loop: yes
      method: no
      macro: no

comment: # See: https://docs.codecov.io/docs/pull-request-comments
  layout: "reach, diff, flags, files"
  behavior: default
  require_changes: no
  require_base: yes
  require_head: yes
```

### 3. Codecov と連携
[Codecov](https://codecov.io/) からレポジトリ選んで~~~というのを指示通りにやっていく！
HerokuにNuxtプロジェクトをデプロイする方法(SSR対応)

## HerokuにNuxtプロジェクトをデプロイする方法(SSR対応)
[公式ドキュメント](https://nuxtjs.org/faq/heroku-deployment/)が正確です。

以下は公式からの情報です。

次のコマンドを実行して下さい。

```bash
heroku config:set NPM_CONFIG_PRODUCTION=false
heroku config:set HOST=0.0.0.0
heroku config:set NODE_ENV=production
```
次にpackage.jsonのscriptsに"heroku-postbuild"を追加してください。

```json:package.json
"scripts": {
  "dev": "nuxt",
  "build": "nuxt build",
  "start": "nuxt start",
  "heroku-postbuild": "npm run build"
}
```

あとはデプロイすれば完了です！

```bash
git push heroku master
```
## 終わりに
私は現在、Web3のサービスの開発をしています。詳しくはこちらの記事をご覧下さい。
        [無料でイーサリアムが当たる、Web3時代の寄付サイトを作った話](https://note.com/kenroda/n/n814347fbdcd7)
react-native-cameraのCameraがiPhoneSEから使えてiPhoneX から使えない話

# 初めに

[react-native-camera](https://github.com/react-native-community/react-native-camera) がexportしている `Camera` と `RNCamera` のうち、
前者の `Camera` を使ったらiPhoneSEでは動くくせにiPhoneXでは動かない、という罠に嵌った。

# やったこと

`react-native-camera` をnpmなりyarnなりでinstallし、いつもの手順でlinkさせ、↓ のようにしてアプリから呼び出すと、
default exportな方の `Camera`がiPhoneSEでは正しく使えるのにiPhoneXではnullになる、という怪現象に見舞われた。

```typescript
import Camera, { RNCamera } from 'react-native-camera';
```

普段から表示崩れを意識してiPhoneSEばかりで動作確認していたので見事に嵌った。
シミュレータでも再現した。

# 対策

素直に新しい方の `RNCamera` を使うようにしたら問題なかった。
マイク不要なアプリなのに勝手にマイクのpermissionまで取られてしまうのが嫌で避けていたのだが、
`captureAudio` というpropertyをfalseにすればマイクのpermissionを回避できた。最初からちゃんと調べるべきだった。
そしてちゃんとiPhoneX以降の端末でも動作確認するべきだった。

# 終わりに

やはりReactNativeなんて使うもんではない (暴論)
https-portalを正しく使っているのにうまく表示されない

単純なことだけど結構ハマったので備忘録として。
話を単純にするために簡略化しているが、次のようなdocker-compose.ymlを書いた。

```docker-compose.yml
version: '3'
services:
  https-portal:
    image: steveltn/https-portal:1
    ports:
      - 80:80
      - 443:443
    depends_on:
      - apache
    environment:
      DOMAINS: 'example.com -> http://wordpress'
      STAGE: 'local'

  apache:
    image: apache:2.4
    volumes:
      - ./html:/var/www/html
```

当然、正常に動く。自宅のPC(Linux)ではこれで開発していたのだから間違いない。
ところが出社して、`docker-compose up`してみるとなぜか繋がらない。
設定も正しいし、ファイルに欠けているものもない。

# 結論

`docker-compose logs`してみたら、https-portalコンテナがまだ起動していないだけだった。
WindowsはDockerをVM上で扱うためか、Linuxよりもかなり遅いようだ。
HTMLリスト表示と文字化けと3時間格闘した話。

**誰もが格闘したであろう文字化けに初めて出会いました。**

正直しんどかったです、、、。
**総時間3時間程度です。**


格闘直後にこの記事を書いているので晴れ晴れしい気持ちで書いております。

何をそんなに苦戦したかと言いますと、webで検索した内容通りでも治らなかったのです。

よくある、UTF-8とか、ファイル保存名に.htmlを入れるだとかではない別の原因が存在していたのです。

原因は正直私にもわかりません（笑）
しかし、気合と根性で治しました。
根性論がここで生きるとは（笑）

時には必要なのかもしれません。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
![リスト表示 (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427747/03ff2259-7da6-2797-c9b2-25eb86c8f85a.png)
![リスト表示.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427747/d9aae661-de6f-74b5-25f8-1850f2b0bdf5.png)

上記が3時間格闘した作品になります、、、。



はじめる方も、文字化けに遭遇した時は、サイトの情報以外にも自分でいじってみた方が良いのかもしれません。
std::vectorの生成方法など

##まず、std::vectorとは,配列の長さを変えることのできる可変長配列です

###vectorの生成の仕方
```vector.cpp
#include<iostream>
#include<vector>

using namespace std;

int main()
{
	vector<int> na(5,1); //配列int型 na[5]の中身を１で初期化//11111と表示される
	for (int i = 0; i < na.size(); i++)
	{
		cout << na.at(i); //配列naの中身を表示//1で初期化されているため、すべて１になる
	}
	return 0;
}
```
##vectorの生成方法(宣言)
###<font color="Red">std::vector<型>　変数名(配列サイズ,初期値）</font>！！初期値、配列サイズは定義しなくてもOK！！(ない場合配列サイズは０で初期化されます)

##Vectorの要素の中身の書き換え方
```at.cpp
#include<iostream>
#include<vector>

using namespace std;

int main()
{
	std::vector<int> na(5,1);
	na.at(1) = 3;//添え字番号１の要素を３に書き換える
	for (int i = 0; i < na.size(); i++)
	{
		cout << na.at(i);//表示の結果(１３１１１ ）
	}
	return 0;
}
```
##<font color="Red">変数名.at(添え字番号)</font>でアクセス可能 (中身の書き換え、中身の表示などに使える)
##要素の消し方
```pop_back.cpp
#include<iostream>
#include<vector>

using namespace std;

int main()
{
	std::vector<int> na(5,1);

	na.pop_back();//末尾の要素を削除//forループで配列のサイズ文ループすると、全要素削除できる!

	for (int i = 0; i < na.size(); i++)
	{
		cout << na.at(i);//pop_backされたので、要素が１減っている(結果→1111と表示される)
	}

	return 0;
}
```
###<font color="Red">配列名.pop_back();</font> 末尾の要素削除可能

##配列サイズの取得
```size.cpp
#include<iostream>
#include<vector>

using namespace std;

int main()
{
	std::vector<int> na(5,1);


	for (int i = 0; i < na.size(); i++)//配列サイズを取得して、サイズ分ループ
	{
		cout << na.at(i);
	}

	
	return 0;
}
```
###<font color="Red">配列名.size();</font>配列のサイズ取得
###サイズ取得してるループしたほうが、配列の長さが変わったときにすぐ対応できる！

```nijigen.cpp
#include <iostream>
#include <vector>
using namespace std;
int main(int argc, char const* argv[])
{

        vector< vector<int> > v (4, vector<int>(4));//4*4のint型配列の生成
 
        for (int i = 0; i <v.size(); i++) {
                for (int j = 0; j < v[i].size(); j++) {
                        v[i][j] = i * j;//配列番号の縦＊横かけたものを代入
                }
        }
        for(int i=0;i<v.size();i++){
            for(int j=0;j<v[i].size();j++){
                cout<<v[i][j]<<" ";//表示
            }
            cout<<endl;//改行
        }
        return 0;
}
```
### <font color="Red">vetcor\<vector\<型名>> 変数名(配列サイズ,vector<型名>（配列サイズ））；</font>で二次元配列生成
Leetcode #206: Reverse Linked List

Solution 1: Iterative

```swift
func reverseList(_ head: ListNode?) -> ListNode? {
    var pre: ListNode?
    var current = head
    while current != nil {
        let tmp = current?.next
        current?.next = pre
        pre = current
        current = tmp
    }
    return pre
}
```

Solution 2: Recursive

```swift
func reverseList(_ head: ListNode?) -> ListNode? {
    if head == nil || head?.next == nil {
        return head
    }
    let node = reverseList(head?.next)
    head?.next?.next = head
    head?.next = nil
    return node
}
```
SwiftUIをmacOS Mojaveで遊んでみる（ADP/ADEPを登録していない人向け）

## はじめに

先日のWWDC19にてUIフレームワークである[SwiftUI](https://developer.apple.com/xcode/swiftui/)が発表されましたね。
この発表は本当に驚きました...さすがApple、完全内製だけあってサポートが本当に充実していらっしゃる...。

SwiftUIとは、UIを構築するためのフレームワークです。
何と言っても驚きなのは、UIをSwift構文を利用して実装でき、コードとデザインを完全に同期させることができるというところです。

...こんなの使ってみないわないわけにはいかないですよね！
皆さん、もう使ってみました！？（リリースされていませんが）

...とは言え、中にはADP/ADEP（[Apple Developer Program](https://developer.apple.com/jp/programs/)/[Apple Developer Enterprise Program](https://developer.apple.com/jp/programs/enterprise/)）にメンバー登録していないからSwiftUIを試すことができないと思っている方もいると思います。（年間で約1万円払えばADPのメンバーに登録できます）
実は、XcodeだけであればBeta版をインストールでき、SwiftUIを先行で体験することが可能です！

まぁ、あと数ヶ月待てば使えるのでそれまで待てよという話かもしれませんが、そうは言っても使いたくなるのがエンジニアの性というものでしょう。
（この記事もあと数ヶ月の命になるわけですが...）

## 本稿でできること/できないこと

XcodeのBeta版をインストールできればSwiftUIの全てを試せるかと言えばそうではありません。
と言うのもSwiftUIの[チュートリアルサイト](https://developer.apple.com/tutorials/swiftui/)でGUIを使ってコンテンツを追加したり、コードをリアルタイムでGUIに反映させていましたよね？
あれ、実は次期masOSである**Catalina**で利用可能な**SwiftUI canvas**と言う機能を使っているので、Mojaveでは使えません。そして、この**Catalina**のBeta版をインストールするにはADP/ADEPへのメンバー登録が不可欠です。

以下、macOS Mojaveでもできること/できないことを簡単にまとめてみました。（他あればコメントしてください）

### できること

- SwiftUIの**View**を使える
- （リアルタイムではないが）コードを画面に出力できる

### できないこと

- GUIでパーツを追加していく
- コードからGUIにリアルタイム反映

## やってみよう！

残念ながらGUIと連携しながらコーディングはできませんが、コードだけでも触れられるなら良いですよね？w
ちょっと前置きが長くなりましたが、実際にSwiftUIを試してみましょう。

### 必要なもの

- Apple ID（ADP/ADEPへのメンバー登録は不要です）
- Xcode 11.0 beta
  - [ダウンロードサイト](https://developer.apple.com/download/)
- macOS Mojave 10.14.5

### 1. Xcodeのインストール

Xcode 11.0のBeta版をダウンロードサイトからダウンロードし、インストールしてください。ポチっとするだけです。

### 2. Playgroundの作成

今回はPlaygroundを使って試してみます。いつも通り作ってしまってOKです。

### 3. 実装

SwiftUIの恩恵を受けるため、`SwiftUI`をインポートします。

```swift
import UIKit // 削除でも良い
import SwiftUI // 追加

var str = "Hello, Playground"
```

はい！SwiftUIを使う準備は整いました！（はやっ）

では、実際に画面を作っていきましょう。
まず、`View`と言う構造体を実装していきます。

```swift
import SwiftUI

struct Content: View { // Viewを実装
}

var str = "Hello, Playground"
```

次に実装した構造体にコンテンツを実装していきましょう。今回は画面にテキスト（`Hello World`）を出力させてみます。
SwiftUIでは`body`を実装していくことによりコンテンツを画面へ出力させることができます。

```swift
import SwiftUI

struct Content: View {
    var body: some View { // bodyを実装
        Text("Hello World") // 他、Listなど様々な要素がある
    }
}

var str = "Hello, Playground"
```

...はい、SwiftUIで画面を実装する流れはこれで完了です。（めちゃくちゃ簡単！）

これだけではエディタに画面を出力できませんので、仕上げに画面へ出力させる処理を書いていきます。

```swift
import SwiftUI
import PlaygroundSupport // Playgroundのアシスタントエディタにビューを表示するため、`PlaygroundSupport`をインポート

struct Content: View {
    var body: some View {
        Text("Hello World")
    }
}

let content = Content() // インスタンスを作成
PlaygroundPage.current.liveView = UIHostingController(rootView: content) // Playgroundのビューに出力
```

### 4. ビルドの実行

あとはいつも通り、ビルドを実行してあげてください！

<img width="1512" alt="スクリーンショット 2019-06-10 22.38.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236665/a8cab133-dc87-b94c-c0d8-60ddc1dbada1.png">


## 終わりに

最初の方でお伝えした通り、macOS Catalina Beta版をインストールしなければ現時点（2019/6/10）でSwiftUIをフルに体験することはできません。

が、公式リリースがされる前にコードだけでもSwiftUIの魅力を感じてみてはいかがでしょうか。
SwiftUIは皆さんのiOSアプリ開発をより楽にしてくれる機能であることに間違いはないと思います。

では、良きSwiftライフを。
Computational Optimal Transport 精読会 記録 (#10: 4.1)

# 背景


- 前回: [Computational Optimal Transport 精読会 記録 (#9: 3.7)](https://qiita.com/takilog/items/3db6176b0d1929180c6b)は5/23に開催，今回は近く5/28に開催したのだけど，体調を崩してしまったので遠隔から参加（遠隔は難しくて微妙）
- 職場でCOTを読んでおり，{自己満足,復習,将来のため}などの理由で記録をしている


# 今回の範囲の内容

- ついに§4に突入してエントロピー正則化をやっていく


# §4.1 Entropic Regularization

- Coupling matrix $\mathbf{P}$の離散エントロピーを定義する: $H(\mathbf{P})=-\sum\_{i,j} (\log \mathbf{P}\_{i,j} - 1)$
    - 行列二階微分(ヘッシアン)を計算すると，$\log$のところの$\mathbf{P}\_{i,j}$が対角成分だけ残るので，$\mathrm{diag}(1 / \mathbf{P}\_{i,j})$になる
    - これの半正定値性を確認するため，任意の(非ゼロ)ベクトルを左右からかけて考えるか，正方行列の二乗で書けるので半正定値になっている．また$\mathbf{P}\_{i,j} \leq 1$なので，1-strongly concaveになっている（自信なし）

- これを正則化項に利用する問題を $L^\epsilon\_C(a, b)$のように表す

- 意味(効果): 3次の確率単体を可視化したものと見る

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/7181/cb322fb7-4ac6-3bfd-3080-47d78a2f74f2.png)


## Prop 4.1

- $\epsilon$に関する最適化問題の収束性を議論し，特に$\epsilon \to 0$と$\epsilon \to \infty$を主張
- 証明
    - 分からない

- (メモ)
    - $U(a, b)$が閉じているため，有界閉空間
    - これは点列コンパクトである （＝収束する部分列を取ることができる）
    - このあたりから挟み込むと収束性が示せる（$\epsilon\to 0$の場合）
    - $\epsilon\to \infty$は知らん

- この辺を真面目に議論するためには集合と位相の知識が必要


## KL-divergence

- 次の形でKL-divergenceを定義する
    - よく使うKLの形ではないけど，Bregmanなんたらとかと関係がある（たぶん）
    - ただし$K$はギブスカーネルっぽい感じの重み: $\mathbf{K}\_{i,j}=\exp(-C\_{i,j} / \epsilon)$

$$KL(\mathbf{P}\mid \mathbf{K}) = \sum\_{i,j} \mathbf{P}\_{i,j} \log\left(\frac{\mathbf{P}\_{i,j}}{\mathbf{K}\_{i,j}}\right) - \mathbf{P}\_{i,j} + \mathbf{K}\_{i,j}$$

- KLを小さくするような写像を定義する

$$\mathbf{P}\_\epsilon = \mathrm{Proj}\_{\mathbf{U}(\mathbf{a,b})}^\mathbf{KL}(\mathbf{K}) = \arg\min\_{\mathbf{P}\in \mathbf{U}(\mathbf{a,b})} \mathbf{KL}(\mathbf{P}\mid \mathbf{K})$$

- おそらくどこかで使います

# Next

-  6/11に開催予定，§4.2はかなり長いので分割になるであろう
【Git】他人のからgit cloneして自分のにgit pushする

#やりたいこと
他人のgitリポジトリをクローンして
自分で編集したものを自分のリモートリポジトリにプッシュしたい


#他人のリポジトリをクローン

```
$ git clone [クローン元のリポジトリURL]
```

#編集してコミット
自分のローカル環境で編集

```
$ git add .
```

```
$ git commit -m "comment"
```

#自分のリモートリポジトリへプッシュ

```
$ git remote -v
```

```
$ git push [プッシュ先のURL] [ブランチ名]
```
OpenAI Gym API for Fighting ICEを動かしてみる

# OpenAI Gym API for Fighting ICEを動かしてみる

## TL;DR

[Qiita](https://qiita.com/hideki/items/589a4fad8e135d5adcbd)の方でコメントを頂いたので、早速[gym-fightingice](https://github.com/myt1996/gym-fightingice)を試してみました。

OpenAI GymのAPIを通して全てPythonでコーディングできるようになるので、機械学習系をPythonで慣れている人はかなり使いやすくなります。

## 実行環境

* MacOS
* FTG-4.30
* gym-fightingice-0.0.1
* openjdk-11.0.1

## インストール方法

### Javaのインストール

以前はOracle JDK 8でないと動作しなかった気がするのですが、今回試した限りではOpenJDK 11で動作しました。
以下はbrewによるインストールです。

```bash
brew cask install java
```

### Fighting ICEのインスト−ル

[FightingICE Get started --install](http://www.ice.ci.ritsumei.ac.jp/~ftgaic/index-2.html)より、`Version4.30`として配布されているZIPアーカイブをダウンロードして適当なディレクトリに解凍します。

### gym-fightinceのインストール

[gym-fightingice](https://github.com/myt1996/gym-fightingice)を参考に以下を実行します。

```bash
pip install gym
pip install py4j
pip install port_for
pip install opencv-python
```

次に`Fighting ICEのインスト−ル`でZIPアーカイブを解凍したディレクトリに移動してから`git clone`、セットアップを実行します。

```bash
cd FTG4.30
git clone https://github.com/myt1996/gym-fightingice.git
pip install -e .
```

### インストール時の注意事項

実行時のカレントワーキングディレクトリが、`FTG4.30`直下でないと、NullPointerExceptionが発生して`Now Loading`のまま処理が進みませんでした。
Jupyter Notebookから実行する場合も、以下の様なディレクトリ配置にすることをお勧めします。

```
FTG4.30/
├── bin
├── data
├── gym-fightingice <- git clone https://github.com/myt1996/gym-fightingice.git
├── test-fighting-ice.ipynb <- 実行用Jupyter Notebook
├── lib
├── log
└── src
```

## 動かしてみる

`FTG4.30`配下にJupyter Notebookなどで以下のソースコードを作成して実行します。

```python
import gym
import sys

sys.path.append('gym-fightingice')

import gym_fightingice

env = gym.make("FightingiceDisplayNoFrameskip-v0", java_env_path=".")

#observation = env.reset(p2='MyFighter') # p2に対戦相手のAI名(Javaクラス名)を指定することが出来ます。
observation = env.reset()
```

以下はAgentの行動です。300フレーム分対戦相手に向かってジャンプするだけです。

```python
for i in range(300): # 300フレーム分実行します。
    env.step(31) # `FOR_JUMP`を実行します。
```

![](https://www.inoue-kobo.com/ai_ml/gym-fightingice/images/gym-fightingice-demo.gif)

## Action一覧

`env.step`には数値でActionを設定しますが、以下は数値とActionの対応表です。

* 0:AIR
* 1:AIR_A
* 2:AIR_B
* 3:AIR_D_DB_BA
* 4:AIR_D_DB_BB
* 5:AIR_D_DF_FA
* 6:AIR_D_DF_FB
* 7:AIR_DA
* 8AIR_DB
* 9:AIR_F_D_DFA
* 10:AIR_F_D_DFB
* 11:AIR_FA
* 12:AIR_FB
* 13:AIR_GUARD
* 14:AIR_GUARD_RECOV
* 15:AIR_RECOV
* 16:AIR_UA
* 17:AIR_UB
* 18:BACK_JUMP
* 19:BACK_STEP
* 20:CHANGE_DOWN
* 21:CROUCH
* 22:CROUCH_A
* 23:CROUCH_B
* 24:CROUCH_FA
* 25:CROUCH_FB
* 26:CROUCH_GUARD
* 27:CROUCH_GUARD_RECOV
* 28:CROUCH_RECOV
* 29:DASH
* 30:DOWN
* 31:FOR_JUMP
* 32:FORWARD_WALK
* 33:JUMP
* 34:LANDING
* 35:NEUTRAL
* 36:RISE
* 37:STAND
* 38:STAND_A
* 39:STAND_B
* 40:STAND_D_DB_BA
* 41:STAND_D_DB_BB
* 42:STAND_D_DF_FA
* 43:STAND_D_DF_FB
* 44:STAND_D_DF_FC
* 45:STAND_F_D_DFA
* 46:STAND_F_D_DFB
* 47:STAND_FA
* 48:STAND_FB
* 49:STAND_GUARD
* 50:STAND_GUARD_RECOV
* 51:STAND_RECOV
* 52:THROW_A
* 53:THROW_B
* 54:THROW_HIT
* 55:THROW_SUFFER

## 参考情報

* [FightingICE](http://www.ice.ci.ritsumei.ac.jp/~ftgaic/index-2.html)
* [gym-fightingice](https://github.com/myt1996/gym-fightingice)
* [Fighting ICEを動かしてみる](https://qiita.com/hideki/items/589a4fad8e135d5adcbd)
Leetcode #205: Isomorphic Strings

```swift
func isIsomorphic(_ s: String, _ t: String) -> Bool {
    var dict = [Character: Character]()
    var s = Array(s)
    var t = Array(t)
    for (index, char) in s.enumerated() {
        if let value = dict[char] {
            if t[index] != value {
                return false
            }
        } else {
            if !dict.values.contains(t[index]) {
                dict[char] = t[index]
            } else {
                return false
            }
        }
    }
    return true
}
```
【Smarty】「tpl」ファイルで定数を呼び出す記述方法

Smartyは、PHPのためのテンプレートエンジンです。
そのSmartyでは、PHPで定義した**定数**を呼び出す記述方法が少し独特です。

## PHPで定義した定数を「tpl」ファイルで呼び出す記述方法
PHPファイルで、定数を下記のように定義したとします。

```sample.php
<?php
  define(URL, 'http://example.com/');
?>
```

「tpl」ファイルでは、下記の記述方法で呼び出すことができます。

```page.tpl
{$smarty.const.URL}
```

`$smarty`、`.const`に続けて`.定数名`と記述することで、「tpl」ファイルにてPHPで定義した定数を呼び出すことができます。

## {debug}を使う方法
`{debug}`をファイル内に記述することで、変数や定数の呼び出し方を一覧で見ることができます。

```page.tpl
{debug}
```

実行すると画面が増えて邪魔になるかもしれませんが、確実に呼び出す方法を知ることができます。
なので、PHPで定義した変数や定数の呼び出し方がわからなくなったときには一度`{debug}`を使ってみてください。
Reactまとめ

これまでのReact関連記事のまとめです。

[DjangoのページをReactで作る - Webpack4](https://qiita.com/sand/items/15da91117c680a618c2b)

[Material-UI レスポンシブデザイン- AppBar & Drawer](https://qiita.com/sand/items/d4b6f39b5fe6027064b4)

[React-Router + Reduxの注意点 - withRouter](https://qiita.com/sand/items/4aec0201befbe1483dc5)

[FlaskでReactアプリを走らせる](https://qiita.com/sand/items/49af68f1af296724e9b8)

[Reactで超簡単な画像ビューアを作る - FileReader](https://qiita.com/sand/items/9992c7dea7c985b86075)

[markdown-it-katexを使ってみる - 数式エディタ](https://qiita.com/sand/items/8d8b5012104fec927b44)
[draft.jsでMathJaxを使ってみる - 数式エディタ](https://qiita.com/sand/items/1d0c43cc873d69319176)

[React Reduxの概要を理解する](https://qiita.com/sand/items/6d02fa7640dd1589ee3d)

[Phoenix Channelで作る最先端Webアプリ - topic-subtopic編 - Qiita](https://qiita.com/sand/items/d5d77db657027abe6141)
[Phoenix Channelで作る最先端Webアプリ - ETS編 - Qiita](https://qiita.com/sand/items/1fa3f728f4fd579102bc)
[Phoenix Channelで作る最先端Webアプリ - Fault Tolerance編 - Qiita](https://qiita.com/sand/items/a0e070b49e726e1005f2)
[Phoenix Channelで作る最先端Webアプリ - 地図（Geo）拡張編 - Qiita](https://qiita.com/sand/items/ed8320872fc508bb0e8e)
[Phoenix Channelで作る最先端Webアプリ - DynamicSupervisor編 - Qiita](https://qiita.com/sand/items/c2f089e218a0e9878abd)
[Phoenix Channelで作る最先端Webアプリ - Elixier Application編 - Qiita](https://qiita.com/sand/items/5ae4495154dacb4bea71)
[Phoenix Channelで作る最先端Webアプリ - Reactチャット編 - Qiita](https://qiita.com/sand/items/e4940eaf83daa69d8a59)


[ElmモジュールをReactのComponentにする](https://qiita.com/sand/items/00307cfb94325019288c)


[React+D3.jsアプリ作成の基本](https://qiita.com/sand/items/4090fc9e93ff81180fdf)


[AWS+Reactアプリ作成入門(Cognito編)](https://qiita.com/sand/items/e1f4ec830d13569a7128 "AWS+Reactアプリ作成入門(Cognito編)")
[AWS+Reactアプリ作成入門(S3編）](https://qiita.com/sand/items/94cd85c3c0426dc768bd "AWS+Reactアプリ作成入門(S3編）")
[AWS+Reactアプリ作成入門(DynamoDB編）](https://qiita.com/sand/items/70018f322d6fe986fe60 "AWS+Reactアプリ作成入門(DynamoDB編）")
[AWS+Reactアプリ作成入門(IAM Role編）](https://qiita.com/sand/items/a07a08f7c1ccc2e8b967 "AWS+Reactアプリ作成入門(IAM Role編）")
[AWS+Reactアプリ作成入門(ログイン後のAdmin編)](https://qiita.com/sand/items/260a6a0b360e574642cf "AWS+Reactアプリ作成入門(ログイン後のAdmin編)")


[Meteor and Reactによるリアクティブシステム「ラーメン野郎を追いかけろ！ ＠ Twitter」を作ってみた](http://qiita.com/sand/items/02219ec5e42cc406ee5c "Meteor and Reactによるリアクティブシステム「ラーメン野郎を追いかけろ！ ＠ Twitter」を作ってみた")

[Falcor+Reactフルスタック（開発環境）](http://qiita.com/sand/items/06571033f99b55fffcb2 "Falcor+Reactのフルスタック（開発環境）")
[Falcor+Reactフルスタック（react-router）](http://qiita.com/sand/items/0a42ada13712abe87711 "Falcor+Reactのフルスタック（react-router）")
[Falcor+Reactフルスタック（views層とcomponents層）](http://qiita.com/sand/items/a969dd786b78554cf9fd "Falcor+Reactのフルスタック（views層とcomponents層）")
[Falcor+Reactフルスタック（formsy-react）](http://qiita.com/sand/items/4466b970f251445e13a4 "Falcor+Reactのフルスタック（formsy-react）")
[Falcor+Reactフルスタック（エラー処理）](http://qiita.com/sand/items/1ef8a19b15ac71c2fb99 "Falcor+Reactのフルスタック（エラー処理）")
[Falcor+Reactフルスタック（Material-UI）](http://qiita.com/sand/items/73d4aea4ae2697bfba2b "Falcor+Reactのフルスタック（Material-UI）")
Retina対応の画像にPicturefill.jsを使う場合の注意点

# 概要
Picturefill.jsを使った際にハマった点があったのでまとめました。

# Picturefill.jsとは？ 
[公式サイトはこちら](https://scottjehl.github.io/picturefill/)
IE11などの非対応ブラウザでも```<picture>```タグを使えるようになるpolyfillです。
```<picture>```タグが分からないって人はいますぐ[調べるんだ！！！](https://developer.mozilla.org/ja/docs/Web/HTML/Element/picture)

# ハマったこと
通常下記の様に読み込みだけで問題ないのですが

```javascript:test.js
// importするだけ
import 'picturefill'
```

最近ではRetina対応のため下記の様に、2xの画像を入れているケースが多いかと思います。

```html
<picture>
  <img
    src="hoge.jpg"
    srcset="hoge@2x.png 2x"
    alt="代替テキスト">
</picture>
```

この場合、polyfillが2xの画像を表示させてしまいIE11で表示崩れが発生しました。

# 解決方法
[普通に公式サイトに書いてありました。](https://scottjehl.github.io/picturefill/#img-srcset)
（英語だから見逃してた…悪い癖…。）
下記のように別途Pluginを読み込むことでIE11でも問題なく表示されました。

```javascript:test.js
import 'picturefill'
// 追加でimport
import 'picturefill/dist/plugins/intrinsic-dimension/pf.intrinsic.min.js'
```

その他にも[複数Pluginが用意されているようです。](https://github.com/scottjehl/picturefill/tree/master/dist/plugins)
（利用シーンはまだ詳しくわかってませんが…。）

とにかく```<picture>```タグはPicturefill.jsがあれば完全対応可能なので積極的に使っていこうと思います。
Leetcode #204: Count Primes

```swift
func countPrimes(_ n: Int) -> Int {
    if n <= 1 {
        return 0
    }
    var ar = Array(repeating: false, count: n+1)
    for i in stride(from: 2, through: Int(sqrt(Double(n))), by: 1) {
        var tmp = i * 2
        while tmp <= n {
            ar[tmp] = true
            tmp += i
        }
    }
    var count = 0
    for i in stride(from: 2, to: n, by: 1) {
        if ar[i] == false {
            count += 1
        }
    }
    return count
}
```
あの。。皆さんは必要じゃないアプリがあったら、私が買うことができますよ。例えば、人気がないし。。。

あの。。皆さんは必要じゃないアプリがあったら、私が買うことができますよ。例えば、人気がないし。。。

売りたいなら、メールをくれてください。7666535@gmail.com
LaravelのWebAPIでファイルホスティング

LaravelのAPIに画像サーバー的なアクセスポイント持たせようとしたらヘッダ周りでつまづいたので備忘録

```APIController.php
public function hostFile($path){
        $file = @file_get_contents($Path);
        if($hasFile !== FALSE){
            $type = File::mimeType($path);

            $headers = array('Access-Control-Allow-Origin' => '*',
                'Access-Control-Allow-Methods' => 'GET',
                'Access-Control-Allow-Headers' => 'Content-Type, Accept, Authorization, X-Requested-With, Application',
                'Content-Type' => $type,
            );

            $response = Response::make($file, 200);
            $response->withHeaders($headers);
        }else{
            $response = null;
        }
        return $response;
    }
```
【PhpStorm】Typo扱いされる語句の登録

## Typo扱い語句の登録（スペルチェックエラー回避）

### 概要
造語や英単語の略して使用することで、PhpStormではスペルチェック機能に該当してしまいTypo扱いされてしまうことがある。
前もって「Accept Words」に語句を登録し、造語がTypo扱いされようにする

#### 環境
+ PhpStorm 2019.1.2
+ Windows 10

---

### 手順
1. File > Settings（Ctrl + Alt + S でも可）
2. Editor > Spelling > Accepterd Words と進み「＋」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363906/64dc08af-5cdf-7691-72e6-9f1d91b77766.png)
3. Typo扱いにしたくないワード入力して「OK」ボタンをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363906/4dea69a1-c4ef-cc29-5d0d-0b0fb6367804.png)
4. Typo扱いにしたくないワードが一覧に表示された事を確認して「OK」ボタンをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363906/ba70595b-b3d6-2fe1-aaf7-b9d57901899c.png)
IE11で再現できないdisplay:gridのレイアウト

# 概要
Autoprefixerのおかげでdisplay: grid;の対応も概ね大丈夫だろうという空気になってきているので、実案件で使ってみましたが、再現できないレイアウトがあったのでその備忘録です。

# 再現できないレイアウト
display: grid;の使い方に関しては割愛します。
素敵な記事が沢山ありますので検索して参照ください。
IE11で再現できなかったレイアウトを以下にまとめます。

## 記事一覧などの格子状レイアウト
ブログの記事一覧などのようにカードやタイルモジュールが複数列で行が増えていくパターン。

### 行けると思ったコード
3列で高さがなりゆきの記事一覧（カードの高さはstretchする場合）を再現する場合。

```css:article.css
grid-template-columns: repeat(3, 32%);
grid-template-rows: repeat(auto-fill, auto);
gap: 2%;
```

### が…ダメッ…！
Autoprefixerを持ってしてもrepeat()関数が保管できないため、崩れます。
変換されたコードを見てみると、auto-fillのまま出力されており（確か）、IE11では崩れます。
行数を指定すれば行数分繰り返されて出力されるため上手く使えますがauto-fill、auto-fitに相当するプロパティが存在しないため、再現不能のようです。

# まとめ
IE11で再現できないdisplay:gridのレイアウトでした。
引き続き案件でトライして再現できないものがあれば追記しようと思います。
もし『それこう書けば行けるぜ！』という解決策を知っている方があればコメントいただけると助かります。
IE11早く滅びて。
Leetcode #203: Remove Linked List Elements

```swift
func removeElements(_ head: ListNode?, _ val: Int) -> ListNode? {
    let dummyHead = ListNode(0)
    dummyHead.next = head
    var pre = dummyHead
    var current = pre.next
    while current != nil {
        if current!.val != val {
            pre.next = current
            pre = current!
        }
        current = current?.next
    }
    pre.next = nil
    return dummyHead.next
}
```
javascriptを読み込むのに最適な位置

javascriptを読み込む記述をhead内に記述するのではなく、bodyタグの終わりに記述する方が基本的にはbetter。
その主な理由は
・javascriptのfileを読み込んでいる時はhtmlの読み込みを停止し、それに専念するため、bodyの内容が画面表示するまで時間がかかってしまう。
・head内に記述し、bodyの内容を表示するまでの時間が長くなるのはgoogleは推奨していない(エンジンにとって最適ではない)




ーー最後にーー
まだまだ駆け出しのため、トンチンカンなことを書いているかもしれません。
もっとここまで踏み込んだほうがいい、それは違うこと言ってるよ、その単語の使い方間違ってるよなど指摘頂ければ順次改善していきます。
CentOS7にPgadmin4をインストールする。 

仮想環境にPgadmin４をインストールしてみる。

## 環境
OS : CentOS7
DB : Postgresq11.3
Server :Apache.2.4.6

## 準備
[Apacheのインストール]()
[Postgres11のインストール]()

## インストール

### yumにepelリポジトリを追加する

```
yum install epel-release
```

### Pgadmin4のインストール
```
yum install pgadmin4
```

### Pgadmin4用フォルダを作成
```
mkdir /var/www/pgadmin4
```

### 設定ファイルの場所へ移動

```
cd /usr/lib/python2.7/site-packages/pgadmin4-web
```

### Pgadminの設定を追加
※設定内容については公式ドキュメントを参考にしてください。
[公式ドキュメント](https://www.pgadmin.org/docs/pgadmin4/dev/index.html)

```
vi config_local.py

※以下を追加
SERVER_MODE = True
LOG_FILE = '/var/www/pgadmin4/pgadmin4.log'
SQLITE_PATH = '/var/www/pgadmin4/pgadmin4.db'
SESSION_DB_PATH = '/var/www/pgadmin4/sessions'
STORAGE_DIR = '/var/www/pgadmin4/storage'
```

### Pgadmin4のセットアップ
```
python setup.py

ここで設定したアドレス、パスワードはログイン時に必要となります。
address : XXXXXXXX
password : XXXXXXXX
```

### サービス自動起動設定

```
systemctl enable pgadmin4.service
```

### サービス起動


```
systemctl start pgadmin4.service
```

### サービスステータスを確認する。
※Activeと表示されていれば起動しています。

```
systemctl status pgadmin4.service
```

### pgadmin4の所有権をApahceに変更

```
chown -R apache:apache /var/www/pgadmin4
```

### Apacheの設定ファイル場所へ移動
```
cd /etc/httpd/conf.d
```

### Pgadminの設定ファイルをサンプルから作成
```
cp pgadmin4.conf.sample pgadmin4.conf
vi pgadmin4.conf

※先頭行のみコメントアウトしてください
```

### Postgresqlの設定を変更

```
vi /var/lib/pgsql/11/data/postgresql.conf

※デフォルト
#listen_addresses = 'localhost'
#port = 5432

※変更後
listen_address = '*'
port = 5432
```

postgresユーザにパスワードを設定していない場合はついでに
パスワードを設定しておきます。

```
su - postgres
psql
alter role postgres with password 'postgres';
```

### Postgresqlの認証設定を変更

```
cd /var/lib/pgsql/11/data/
vi pg_hba.conf

# IPv4 local connections:
変更前：host all all 127.0.0.1/32  ident
変更後：host all all   0.0.0.0/0   md5
```

設定反映のために各サービスを再起動

```
systemctl restart postgresql-11
systemctl restart httpd
systemctl restart pgadmin4.service
```
下記URLにアクセスし、ログインできればOK
`http://サーバのIPアドレス/pgadmin4`

以上でPgadmin4のインストールは完了です。
CentOS7にApache2.4.6をインストールする。

VMwareで作成した仮想環境(CentOS7)にapacheをインストールしてブラウザから確認する。

## インストール

### Apacheのインストール

```
yum install httpd -y
```

### Apacheの自動起動設定

```
systemctl enable httpd
```

### Apacheの設定確認
※enabledと表示されればOK

```
systemctl is-enabled httpd
```

### Apahce起動

```
systemctl start httpd
```
停止　　：systemctl stop httpd
再起動　：systemctl restart httpd
状態確認：systemctl status httpd



### ファイアウォールでhttpを許可
※Port80:http
※firewall-cmd --permanent オプション
サーバ再起動やfirewalld reload時に恒久的に設定を反映させる。

```
firewall-cmd --permanent --add-port=80/tcp
```


### ファイアウォールでhttpsを許可
※Port443:https

```
firewall-cmd --permanent --add-port=443/tcp
```


### ファイアウォールの設定を反映

```
firewall-cmd --reload
```


以上でインストール完了
サーバのIPにアクセスしテストページが表示されればOK
` http://IPアドレス/`

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402840/8d43f3d8-3aba-dda3-3638-8f2b4658f22c.png)
CentOS7にPostgresql11をインストールする

仮想環境にPostgresql 11.3をインストールしてみる。

OS:CentOS7
DB:Postgresql11.3

## インストール

### PostgreSQL開発元からYumリポジトリパッケージをインストールする。

```
yum install https://download.postgresql.org/pub/repos/yum/reporpms/EL-7-x86_64/pgdg-redhat-repo-latest.noarch.rp
```

### Postgresql11をインストール

```
yum install postgresql11-server
```

### インストールバージョンを確認

```
psql --version
# psql (PostgreSQL) 11.3 と表示されていればOK
```

### DBの初期化
initdbとはなんぞやという方は下記を参考にしてみてください。
* [initdb](https://www.postgresql.jp/document/9.2/html/app-initdb.html)

```
/usr/pgsql-11/bin/postgresql-11-setup initdb
```

### ファイアウォールでPostgresqlを許可

```
firewall-cmd --permanent --add-port=5432/tcp
```

### ファイアウォールの設定を反映

```
firewall-cmd --reload
```

### Postgresql自動起動設定

```
systemctl enable postgresql-11
```

### Postgresqlの設定確認
※enabled と表示されていれば自動起動設定が反映されています。

```
systemctl is-enabled postgresql-11
```

### Postgresql起動


```
systemctl start postgresql-11
```
停止　　：systemctl stop postgresql-11
再起動　：systemctl restart postgresql-11
状態確認：systemctl status postgresql-11

### データベース接続
OSユーザをデータベース初期化時に自動作成された`ユーザ:postgres`へ変更した後にDBへ接続する。
データベース一覧が表示されればOK

```
su - postgres　※OSユーザ変更
psql　※データベース接続
\l ※データベース一覧を表示

                                         データベース一覧
   名前    |  所有者  | エンコーディング |  照合順序   | Ctype(変換演算子) |     アクセス権限
-----------+----------+------------------+-------------+-------------------+-----------------------
 postgres  | postgres | UTF8             | ja_JP.UTF-8 | ja_JP.UTF-8       |
 template0 | postgres | UTF8             | ja_JP.UTF-8 | ja_JP.UTF-8       | =c/postgres          +
           |          |                  |             |                   | postgres=CTc/postgres
 template1 | postgres | UTF8             | ja_JP.UTF-8 | ja_JP.UTF-8       | =c/postgres          +
           |          |                  |             |                   | postgres=CTc/postgres
```

以上でインストールは完了です。
Leetcode #202: Happy Number

```swift
func isHappy(_ n: Int) -> Bool {
    var ar = Set<Int>()
    var n = n
    while !ar.contains(n) {
        ar.insert(n)
        var sum = 0
        while n > 0 {
            sum += (n % 10) * (n % 10)
            n /= 10
        }
        if sum == 1 {
            return true
        }
        n = sum
    }
    return false
}
```
Jupyter (Python) で有効数字をどうにかする


Jupyter (Python) で数値計算をして出力する時、小数点以下の桁数が長いのがズラズラ並ぶのは、なんか嫌ですよね。 .format をいじっても良いんですが、それもメンドくさいし。たとえば...


```python
1 / 7
```




    0.14285714285714285



そこで %precision というマジックコマンド（%から始まるコマンド）を唱えます。


```python
# 小数点以下の桁数を固定する
%precision 3
```




    '%.3f'




```python
1 / 7
```




    0.143



指定した通り、３桁までの表示になりました。四捨五入もされています。


```python
1 / 700
```




    0.001



あれ？これは有効数字を決めるコマンドじゃなかったんだね...？

では、これはどうだ。


```python
# 指数表記にする
%precision %e
```




    '%e'




```python
1 / 700
```




    1.428571e-03



指数表記にはなったけど、有効数字は考えてないな...

では、これでどうだ。


```python
# 指数表記で桁数を決める
%precision %.3e
```




    '%.3e'




```python
1 / 700
```




    1.429e-03



よし、できた。

ちなみに


```python
# 整数表示にする
%precision %i
```




    '%i'




```python
10000 / 7
```




    1428



整数表示してくれます。


```python
# 元に戻す
%precision
```




    '%r'




```python
10000 / 7
```




    1428.5714285714287



元に戻ります。
JavaScriptにおける関数について

#JavaScriptにおいての関数
- JavaScriptでは関数は第一級オブジェクト。すなわち関数は、オブジェクトであり、操作したり、渡したりできる。関数は、Functionオブジェクトである。

- 初期値以外の値を返すには、返す値を指定するreturn文が関数内にないといけない。return文がない場合、基本はundefinedを返す。

- 関数の引数がプリミティブの場合は関数内での変更は外に影響しない。
- 引数がオブジェクトの場合
    - オブジェクト本体の変更は外に影響しない。
    - オブジェクトの要素を変更した場合は外に影響する。

```functionTest.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script type="text/javascript">
            function myFunc(object,x){
                object.brand = "Toyota";
                x = 2;
            }

            var x = 1;
            var mycar = {
                brand: "Honda",
                model: "Accord",
                year: 1998
            };

            // 'Honda 1'を表示
            window.alert(mycar.brand + " " + x);

            myFunc(mycar,x);

            // 'Toyota 1'と表示される
            window.alert(mycar.brand + " " + x);
        </script>
    </head>
    <body>
    </body>
</html>
```
Ruby入門

見て頂きありがとうございます。
初心者ですので、間違っている場所があるかもしれませんが、
ご教示ください。お願いします。

Rubyアウトプット
String 文字列
Integer 整数値
Float 小数
Enumerator　Integerにtimesメソッドをつけて、指定回数の処理を行う
Array　配列
Range　ある値の範囲を扱う
upcase　大文字化
downcase　小文字化
slice(a,b)　a番目からb文字を取り出す
size 文字数の取得
to_〇　クラスの変換
to_i 整数値に変換
to_f 小数に変換
method　メソッド名の確認
+と<<の連結の違いは
+で追加しても変数の値は変化しない
<<で追加すれば変数の値は変わる
+を<<と同じ役割するには
(例)str = 'おっ'
str << 'す'
str => 'おっす'
str　+ 'す'
str => 'おっ'
str += 'す'
str =>'おっす'
変数を文字列に埋め込んむときは＃｛｝を使う
symbol 文字列と見せかけてrubyの内部では整数値として扱う
(例)　:name

IntegerとFloatの計算はFloatになる
round 四捨五入
ceil 切り上げ
floor　切り下げ
ブロック　処理の塊(do～end)
<<,push　配列内に要素を追加するときに使う
map ブロック内で返して値を集めて、新しい配列を返す
Rangeオブジェクト　ある値の範囲を扱う
(1..3).to_a 書いた通りの数字の範囲を表し、
(1...3).to_a 最後の数字が除かれる
三項演算子は真のとき「：」の前の値になる、偽の時は「：」の後の値になる
(例)place = country == 'ja' ? '日本'　:　'海外'
=>"日本"
&&で繋がれた条件式は左から評価されるので条件が偽になったときは残りの条件は評価されない
||= 変数が空の時のみ値を追加する
case 対象オブジェクト
when 値
trueのときの処理
else
flaseのときの処理
end

def sum(*values)
  values.inject { |total,n| total + n }
end
injectメソッドは各値を足した結果を計算するために使う
一つのメソッドに複数の仮引数を受け取るには、必須の仮引数、オプションの仮引数、可変長仮引数の順に定義する
initializeメソッドはオブジェクトが生成されるときは自動的に呼び出される
@変数をインスタンス変数
attr_accessor は指定したシンボル名のインスタンスの値を取得するメソッドと更新するメソッドのアクセサ
privateメソッドはクラス内のみ呼び出し可能
破壊的メソッドはメソッド名のあとに「！」をつける
レシーバーの値を変更する
クラスの継承するときは子クラスにおいて親クラスと同じインスタンスメソッドがあるときにオーバーライドされる、superを入れることで親クラスの同メソッドを呼び出し可能
ROS+OpenCV 無地の画像のトピックを出すノード[c++][Python]

#実行環境
Ubuntu 16.04
ROS kinetic


#コード[c++]
(2019/6/10更新)

```c++:dummy_image_pub_node.cpp
#include <ros/ros.h>
#include <image_transport/image_transport.h>
#include <opencv2/highgui/highgui.hpp>
#include <cv_bridge/cv_bridge.h>

int main(int argc, char** argv)
{
  ros::init(argc, argv, "image_publisher");
  ros::NodeHandle nh;
  image_transport::ImageTransport it(nh);
  image_transport::Publisher pub = it.advertise("/camera/color/image_raw", 1);
  cv::Mat image(cv::Size(640, 480), CV_8UC3, cv::Scalar(0, 100, 0));

  sensor_msgs::ImagePtr msg = cv_bridge::CvImage(std_msgs::Header(), "bgr8", image).toImageMsg();

  ros::Rate loop_rate(1000);//Hz
  while (nh.ok()) {
    pub.publish(msg);
    ros::spinOnce();
    loop_rate.sleep();
  }
}
```

#実行結果
![Screenshot from 2019-06-10 20-57-52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216904/c4096288-1e17-f554-e999-552afcc52976.png)


#コード[Python]
(2020/8/23更新)

```py:dummy_image_pub_node.py
#!/usr/bin/env python
# -*- coding: utf-8 -*-


import rospy
from sensor_msgs.msg import Image 
from cv_bridge import CvBridge
import cv2
import numpy as np



if __name__ == '__main__':
    pub = rospy.Publisher('/camera/color/image_raw', Image, queue_size=10)
    rospy.init_node('image_publisher')
    r = rospy.Rate(10) # 10hz
    
    cols = 640
    rows = 480
    img = np.full((rows, cols, 3), 0, dtype=np.uint8)
    img[0:480, 0:640, 1] = 100

    bridge = CvBridge()
    imgMsg = bridge.cv2_to_imgmsg(img, "bgr8")


    while not rospy.is_shutdown():
        rospy.loginfo(img)

        pub.publish(imgMsg)

        r.sleep()

```

#参考サイト
http://wiki.ros.org/image_transport/Tutorials/PublishingImages
Leetcode #162: Find Peak Element

```swift
func findPeakElement(_ nums: [Int]) -> Int {
    var start = 0
    var end = nums.count - 1
    while start < end {
        let middle = start + (end - start)/2
        if nums[middle] > nums[middle+1] {
            end = middle
        } else {
            start = middle + 1
        }
    }
    return start
}
```
Excel VBAコース第10回内容

全12回 Excel VBAコースの第10回の内容です。

#インポート／エクスポート
直訳すると輸入／輸出という意味です。
ITの世界では、他システムとの連携のために、データを取り込んだり、出力したりすることを言います。

###よく使用するデータファイルの種類
・Excelファイル(.xlsx .xls)
・テキストファイル(.txt)
・CSVファイル(.csv)
・TSVファイル(.tsv)

###Excelの機能でのインポート／エクスポート
・インポート
外部データの取り込み
・エクスポート
名前を付けて保存

###VBAでのデータインポートのサンプル
・CSVファイルのインポート／エクスポート
・Excelファイルのインポート／エクスポート
AWS EC2の作成

##AWS EC2の作成方法

AWS EC2で、仮想サーバを立ち上げる方法について記述そていきます！

[仮想サーバ](https://www.kagoya.jp/howto/rentalserver/virtualization/)については、こちらの記事が分かりやすいかなと思います。

EC2の仮想サーバってなに？？と思う方がたくさんいらっしゃるかと思いますが、平たく言えば、AWSにWindowsやLinuxのサーバを貸してよって言えることです。

サーバにも、種類が色々あって、([サーバの種類](https://www.internetacademy.jp/it/server/server-basic/what-is-server-introductory.html))そのうちのEC2インスタンスにあるのもを借りることができます。




では、EC2ダッシュボードを開いてください。

「インスタンスの作成」ボタンをクリックします。


![スクリーンショット (23)_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203857/6b130543-2734-1ca2-bb59-70a64da67abb.jpeg)


すると、使いたいサーバを選択できる画面が出てきます。
今回は無料枠のあるLinuxサーバを立ち上げていきます！


![スクリーンショット (22)_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203857/e14ec4fd-7c02-7d22-0020-8ddf767845c1.jpeg)


「選択」ボタンを押すと、次の画面が出てきます。

![スクリーンショット (24).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203857/4e088702-da7b-8d1f-6dd0-c41047ac9ccd.png)

ここでも、無料枠のあるインスタンスタイプを選択します。

次に、インスタンスの詳細を設定していきます。


![スクリーンショット (25)_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203857/05e18e5c-4b51-289c-6636-2931bc7cc595.jpeg)

今回作成するEC2インスタンスを、どのネットワークのどのサブネットの配置するかを決めます。
外部のネットワークに繋げるため、自動割り当てパブリックIDは有効にします。
(有効にしないと、パブリックIPが振り分けられずに、このEC2インスタンスでインターネット等外部のサービスに繋げなくなります。。)

ここで割り当てられるパブリックIPアドレスは、インスタンスの起動のたびに変わるので、IPアドレスを固定する方法もあります。

また、プライベートIPアドレスも設定することもできます。

![スクリーンショット (27)_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203857/c66077dd-2b36-1ef5-c387-b5c315443435.jpeg)


EC2ではストレージの種類と容量を選択することが出来ます。
(容量を大きくしすぎると、料金が余計にかかってしまうので注意です。)
![スクリーンショット (28)_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203857/698b1638-933a-37ab-c293-6697ba128b92.jpeg)


EC2の名前を付けます。
ウェブサーバっていう名前にします。
![スクリーンショット (29).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203857/7e3b72ec-cfc4-5025-c0dc-efec8bf0190e.png)



セキュリティグループの設定をすることができます。
ここでは
SSH
すべてのICMP -IPv6
HTTP
と設定しています。
ここで設定した通信しか通さないヨってことになります。
(例えば、IPv4が使われている通信では、このEC2インスタンスにアクセスすることができません)
![スクリーンショット (30)_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203857/5b68d0f8-249e-8cf5-e261-c76adad2d711.jpeg)


最後に、「作成」ボタンを押すと、EC2インスタンスが、指定された条件のもので、作成されます。作成に少し時間がかかります。


もし、作成後にEC2インスタンスの条件の指定に間違えてしまっても大丈夫です。
EC2ダッシュボードで、対象のインスタンスを指定し、アクションボタンを押すと「同様のものを作成」というボタンが出てきます。
こちらを押せばもう一度同じ条件でEC2インスタンスを作成することが出来るので、条件を間違えたフェーズに戻って、正しい条件を入力しなおせば作りなおすことができます。

![スクリーンショット (31)_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203857/624782c1-67c3-5351-13ad-51f0b8c25d21.jpeg)


###最後に
料金での注意です。
無料枠を使っていても、インスタンスを動かしっぱなしだと、月に3000円ほど持っていかれます。(実証済みです笑)
サーバを使ってないときは極力インスタンスの状態を停止していきましょう。
あと、インスタンスを停止していても、ストレージの容量で月にいくらかかかってしまいます。
なので、練習でEC2を使用する場合は、練習が終わればEC2インスタンスを削除することをおすすめします。