OmniAICreator/Qiita-1.07M huggingface dataset:
【WordPress】投稿タイプ　ざっくりまとめ　※備忘録

<h2>はじめに</h2>
WordPressの案件に現在、携わっているため、学習した内容をまとめてみます。

今回は、投稿タイプについて。

<h2>投稿タイプとは?</h2>
WordPressは、多数の異なるタイプのコンテンツを保存し、表示することができる。
投稿はひとつの投稿タイプですが、任意の投稿タイプのコンテンツをWordPressの内部では投稿と呼んでいる。

私)なんのこっちゃ??

Webページのコンテンツの種別だと私は、解釈している。
また、大事だと思うのは下記。

<h6>どの投稿タイプのコンテンツもDBのwp_postsテーブルに格納されている。</h6>
<h6>post_typeというカラムにより区別されている。</h6>

<h3>投稿(post)</h3>
デフォルトで5つの主要な投稿タイプがある。
ユーザーが使えるものと内部で使われるもの。

・投稿(投稿タイプ: post)
・固定ページ(投稿タイプ: page)
・添付ファイル(投稿タイプ: attachment)
・リビジョン(投稿タイプ: revision)
・ナビゲーションメニュー(投稿タイプ: nav_menu_item)

<h4>投稿(post)</h4>
blogで最もよく使われる。
一番、新しいものが最初にくる判事系列順で表示される。
フィードの作成にも使われる。

<h4>固定ページ(page)</h4>
投稿の時系列構造の外にある。
他の固定ページと階層化した構造にすることが可能。(親固定ページ的な)
パーマリンクを有効にすると、固定ページのパーマリンクは、メインサイトのURLと
固定ページの名前(スラッグ)[親があれば親の名前も]を組み合わせたものになる。

<h4>添付ファイル(attachment)※内部機能</h4>
特別な投稿で、WordPressのメディアアップロードシステムを使い、アップロードされたファイルについて、ファイル名や説明などの情報を保持する。
これらの情報はメタデータと呼び、wp_postmetaテーブルに格納されている情報とリンクしている。

<h4>リビジョン(revision)※内部機能</h4>
下書きや公開済みの投稿・固定ページの変更履歴を保存するための投稿タイプ。
基本は、元となる公開済みの投稿や固定ページと同じ形式のデータ。
親とする点が違う。
親は、wp_postテーブルのpost_parentカラム。

<h4>ナビゲーションメニュー(nav_menu_item)※内部機能</h4>
ナビゲーションメニューシステムの各メニュー項目を保存するための投稿タイプ。
wp_postsテーブルの項目がサイト内に表示できるコンテンツ以外にも使える。

<h2>カスタム投稿タイプ</h2>
自分で作れる新しい投稿タイプ。
register_post_type関数を使い、WordPressへカスタム投稿タイプを追加できる。
ラベル、サポートする機能、使える場面やほかの特徴を指定して投稿タイプを定義できる。

例)WordPress Codex 日本語　公式のサンプル function.phpに追記する

```function.php
add_action( 'init', 'create_post_type' );
function create_post_type() {
  register_post_type( 'acme_product',
    array(
      'labels' => array(
        'name' => __( 'Products' ),
        'singular_name' => __( 'Product' )
      ),
      'public' => true,
      'has_archive' => true,
    )
  );
}
```
acme_productという識別子(スラッグ)でProductという名前の投稿タイプを作る。

※スラッグは、Webページを識別する名前。URLに表示される。

register_post_type()関数には主な引数が2つある。
1つめは、"labels"で、投稿タイプの名前(単数形と複数形)を定義する。

2つめは、public。
あらかじめ定義さてたフラグで、この投稿タイプを管理画面に表示するとともに、
要求があったときにサイトのコンテンツとして表示するようにする。

<h3>アーカイブページ</h3>
indexまたは、アーカイブページ(先程の例では/acme-product)をアクセス可能とするには、カスタム投稿タイプ用のテンプレートのセクションで説明するようにパーマリンク構造を更新(または、フラッシュ)する必要がある。

<h3>いい名前の付け方</h3>
コアの投稿タイプ"post","page",revision",atachement"や"nav_menu_item"と一貫性があるproductのようなシンプルな名前を付けるのが簡単だが、それよりも名前空間を接頭辞につけてカスタム投稿タイプを実装するプラグイン/テーマ/ウェブサイト等を特定するのがよい。

<h3>カスタム投稿タイプの管理画面</h3>
カスタム投稿タイプを作成すると、投稿タイプの投稿を作成したり、編集したりする管理メニュー項目が管理画面の最上位レベルに用意される。

そのメニュ項目から専用の管理画面にアクセスできる。
そこには、投稿エディターとカスタム投稿タイプがサポートすべきとして、register_post_type()関数のsupports引数で指定したすべてのものを含む投稿編集画面を表示できる。
この画面は、いくつかのアクションおよびフィルターフックでカスタマイズできる。

<h3>URL</h3>
カスタム投稿タイプは、サイトのURL構造の中に専用のスラッグを持つ。
https://example.com/カスタム投稿タイプのスラッグ/%produxt_name%
%produxt_name%は、特定のページのスラッグ(productのスラッグ)になる。

<h3>カスタム投稿タイプ用テンプレート</h3>
テンプレートファイル
single.phpおよびarchive.phpテンプレートファイルを使い、単一の投稿やアーカイブを表示するのと同様。
・カスタム投稿タイプの単一投稿はsingle-{post_type}.phpを使い
・そのアーカイブはarchive-(post_type).phpを使い、
・もしカスタム投稿タイプアーカイブページを作らないならBLOG_URL?post_type={post_type}を指定して表示することができる。


{post_type}はregister_post_type()関数の$post_type引数に指定したものになる。


<h2>参考サイト</h2>
https://wpdocs.osdn.jp/%E6%8A%95%E7%A8%BF%E3%82%BF%E3%82%A4%E3%83%97
【Android】画面タッチイベントを実装する

# はじめに
私の開発しているアプリ[KUMIWAKE](https://peraichi.com/landing_pages/view/kumiwake)では、フォームの入力画面で任意の場所を**ダブルタップ**すると、一番上のフォームに入力ができるような機能を実装しています。なぜこの機能を実装したかというと、最近のケータイは画面が大きすぎて上のフォームまで指が余裕で届かないからですね。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479958/8b83f5d1-6cb0-3a5b-bc05-ec51b07a9fb0.jpeg" width="300" title="フォーム画面" style="display:block;margin-left:auto;margin-right:auto;"/>
今回はこのような画面のタッチイベント取得についてまとめてみました。

# タッチイベントの実装
まず、タッチイベントを拾いたい画面のアクティビティの記述です。
`MyGestureListener`はジェスチャリスナーを継承したクラスです。後述します。

```kotlin

private lateinit var detector: GestureDetectorCompat

override fun onCreate(savedInstanceState: Bundle?) {
         :
        //GestureDetectorの初期化とダブルタップリスナの登録
        detector = GestureDetectorCompat(this, MyGestureListener())
        detector.setOnDoubleTapListener(MyGestureListener())
}

override fun onTouchEvent(event: MotionEvent): Boolean {
        mDetector.onTouchEvent(event)
        return super.onTouchEvent(event)
    }
```
なお、タッチの領域がスクロールビューの場合は、`onTouchEvent`ではタッチイベントがスクロールビューに吸収されてしまうため、こちらを使います。

```kotlin

//スクロールビューの場合こっち呼ぶ
    override fun dispatchTouchEvent(event: MotionEvent?): Boolean {
        super.dispatchTouchEvent(event)
        mDetector.onTouchEvent(event)
        return super.onTouchEvent(event)
    }
```

`MyGestureListener`はこんな感じ。

```kotlin

class MyGestureListener() : GestureDetector.SimpleOnGestureListener() {
    //ダブルタップイベント
    override fun onDoubleTap(event: MotionEvent): Boolean {
        //処理あれこれ
        return true
    }
}
```

## サンプルコード
はじめに示した「片手で入力機能」の実装を例として示しておきます。

```kotlin
class InputForms : AppCompatActivity() {
    private lateinit var detector: GestureDetectorCompat

    override fun onCreate(savedInstanceState: Bundle?) {
        :
        //ダブルタップでフォーカスするEditText
        val et = findViewById<EditText>(R.id.input_form)
        //キーボード表示のためのマネージャ取得
        val imm = getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager
        //GestureDetectorの初期化とダブルタップリスナの登録
        detector = GestureDetectorCompat(this, MyGestureListener(imm, et))
        detector.setOnDoubleTapListener(MyGestureListener(imm, et))
        //トースト表示
        Toast.makeText(this, "画面をダブルタップで入力を開始", Toast.LENGTH_SHORT).show()
    }

    override fun onTouchEvent(event: MotionEvent): Boolean {
        mDetector.onTouchEvent(event)
        return super.onTouchEvent(event)
        }
}

class MyGestureListener(private val imm: InputMethodManager, val et: EditText) : GestureDetector.SimpleOnGestureListener() {
    //ダブルタップイベント
    override fun onDoubleTap(event: MotionEvent): Boolean {
        //EditTetにフォーカスを当てる
        et.requestFocus()
        //ソフトキーボードを表示
        imm.toggleSoftInput(InputMethodManager.SHOW_IMPLICIT, InputMethodManager.HIDE_NOT_ALWAYS)
        return true
    }
}
```

# 最後に
今回はダブルタップイベントを例に挙げましたが、`MyGestureListener`では`SimpleOnGestureListener()`を継承しているので、以下を参考に**長押し**や**シングルタップ**などの好きなタッチイベントをハンドルできます。
https://developer.android.com/reference/android/view/GestureDetector.SimpleOnGestureListener#public-methods

なお、一つの動作でも複数のイベントが発生しますのでどのイベントをハンドルすればよいかは考慮してください。以下のサイトなどが参考になります。
https://dixq.net/Android/02_04.html
jQuery on() と click()の違いについて

clickイベントを使用するときに、.on()と.click()があるので、違いを分かりやすくまとめました。

```index.html
<input type="button" id="hoge" value="button">
```

```script.js
 $(function(){

      // 新しい要素の追加
      $('#generate').click(function(){
        $('#hoge').after('<input type="button" id="hogehoge" value="click">');
      });

      // clickされた時の処理①
      $('#hogehoge').click(function(){
        alert('click!!');
      });

      // clickされた時の処理②
      $(document).on('click', '#hogehoge', function(){
        alert('on!!');
      });

    });
```

②の方はクリックしても無効らしい。


click() : ページロード時に存在する要素にイベントを付与して、その後動的に追加されたものには有効でない。
on() : ページロード時後、動的に追加された要素にもイベント付与してくれる


多少コードが長くなったとしてもon()を使ったほうがエラーの危険性は少なそう。
フォントサイズを大きくするとテキストが消える問題を解決する[Unity]

# 問題
Unity でフォントサイズを大きくしていくと、いきなりテキストが消えることがある。

# 理由(たぶんこんなかんじ)
<img width="889" alt="apper.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252342/2d4a245b-6bda-2d28-293a-d054f8228e36.png">
画像の白枠がテキストボックス(Text本体)で、黒字が実際のテキストです。
テキストがテキストボックスの中に収まっている場合、テキストは正常に表示されます。

<img width="889" alt="disapper.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252342/6d2e474d-2ac9-d033-5106-5db48b948b5f.png">
テキストボックスのサイズを変更せずにテキストだけを大きくしていき、画像のように、テキストボックスの範囲を超えると、テキストが消えて(見えなくなって)しまうのだと思います。

# 解決法
解決方法はいくつかあると思います。

## その1
テキストが収まるように、Text の Width と Height を調整する。

## その2
<img width="269" alt="Screen Shot 2020-04-20 at 2.35.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252342/1cd7911e-32c4-2fb5-b720-317076d366e5.png">
**Content Size Fitter** のコンポーネントを追加する。
このコンポーネントを追加すれば、テキストサイズに合わせてテキストボックスの大きさを変更してくれるみたいで、手動で調整する手間が省けます。

# サンプル
<img width="275" alt="inspector.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252342/c080089c-e8c4-0106-1fb6-d404d24e5696.png">
swagger-codegenによるC++のRESTAPIクライアント生成

# 経緯
作成に至った経緯・node.jsによるサーバー作成は以下の記事を参照
[swagger-codegenでnode.jsのモックサーバー作成](https://qiita.com/chris949/items/914d2ec026e93d3b3b58)

今回はC++でクライアントを生成する。

# 環境構築
## swagger.jsonから自動生成
node.jsのモックサーバー作成でwgetしたswagger.jsonでC++のクライアントを作成する。(yamlファイルでの生成も可能)

```
$ java -jar swagger-codegen-cli.jar generate -i swagger.json -l cpprest -o client
```

## CMAKEによるビルド
生成されたディレクトリに移動するとソース群とCMakeLists.txtが生成されている。
cpprestのrootを設定する行がコメントアウトされているため、書き換える。

```CMakeLists.txt
# build and set path to cpp rest sdk
#set(CPPREST_ROOT ${PROJECT_SOURCE_DIR}/../../../developmentTools/3rdParty/cpprest)
set(CPPREST_INCLUDE_DIR ${CPPREST_ROOT}/include)
set(CPPREST_LIBRARY_DIR ${CPPREST_ROOT}/lib)

↓

# build and set path to cpp rest sdk
set(CPPREST_ROOT ${PROJECT_SOURCE_DIR}/../../../developmentTools/3rdParty/cpprest)
set(CPPREST_INCLUDE_DIR ${CPPREST_ROOT}/include)
set(CPPREST_LIBRARY_DIR ${CPPREST_ROOT}/lib)
```

書き換えたらcmakeをインストール

```
$ sudo apt-get install cmake
```


ビルド用のディレクトリを作成して移動後、以下コマンド実施

```
$ cmake ..
```

cmakeが完了したらビルドする

```
$ cmake --build .
```
※cpprestパッケージがインストールされていないとビルドエラーとなるため、その場合は
`sudo apt-get install libcpprest-dev`でインストールする

## 生成されたライブラリの移動
ビルドに成功すると、ソースファイルがあるディレクトリにlibディレクトリが作成されている。
その中にある**libCppRestSwaggerClient.a**を*/usr/lib*配下に移動する

## テストコード作成
先ほど作成したAPIを実際に呼び出して実行するためのテストコードを作成する。

```c++:cpprest_test.cpp
#include "api/PetApi.h"

using namespace io::swagger::client::api;
using namespace web::http::client;

int main(int argc, char* args[]) {
    http_client_config config;

    std::shared_ptr<ApiClient> apiClient(new ApiClient);
    std::shared_ptr<ApiConfiguration> apiConfig(new ApiConfiguration);

    apiConfig->setBaseUrl("http://localhost:8080/v2/");
    apiConfig->setHttpConfig(config);

    apiClient->setConfiguration(apiConfig);
    PetApi api(apiClient);

    api.getPetById(1).then([=](pplx::task<std::shared_ptr<Pet>> example) {
        try{
            std::cout << example.get()->getName() << '\n';
        } catch(const std::exception& e) {
            std::cout << "getExample() exception: " << e.what() << '\n';
        }
    }).wait();
}
```

## コンパイラのインストールとコンパイル
テストコードをコンパイルするためにコンパイラをインストールする
以下のサイトを参考にした。
[How to build for Linux](https://github.com/microsoft/cpprestsdk/wiki/How-to-build-for-Linux)

```
sudo apt-get install g++ git libboost-atomic-dev libboost-thread-dev libboost-system-dev libboost-date-time-dev libboost-regex-dev libboost-filesystem-dev libboost-random-dev libboost-chrono-dev libboost-serialization-dev libwebsocketpp-dev openssl libssl-dev ninja-build
```

インストールできたらコンパイルする

```
g++ [TestCode] -lboost_system -lcrypto -lssl -lcpprest -lCppRestSwaggerClient
```
※コンパイルでエラーが発生する場合、テストコードのヘッダ指定を変更するか、-Iオプションで必要なファイルのパスを指定するとよい


## テストコードの実行
スタブサーバーを立ち上げて、作成された*a.out*を実行してレスポンスが返却されれば成功

```
$ ./a.out
doggie
```

# 参考サイト
[How to build for Linux](https://github.com/microsoft/cpprestsdk/wiki/How-to-build-for-Linux)
[cpprestsdk](https://github.com/microsoft/cpprestsdk)
[[cpprest] Example of using the cpprest client library code?](https://github.com/swagger-api/swagger-codegen/issues/8035)
MySQLで、indexに'key'を使ったらコンフリクトした

MYSQLで、indexにkeyを設定した時に、下記のInsertを実行しようとしたらエラーが発生。

```sql
INSERT INTO area_tag (id,key,name) VALUES (0,'jp_2','青森県');
```

エラー文としては、
>ERROR 1064 (42000): You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'key, name) VALUES (0,'青森県','jp_2')' at line 1


といったものだった。
当初は全く見当つかなかったが、()内のkeyの位置を移動させると、それに伴いエラー文のnearから先の範囲が変わっていたので、keyに原因がありそうだと予想。

調べてみると、同じようなケースを発見。
https://stackoverflow.com/questions/54194548/mysql-insert-error-with-column-name-is-key

どうやら、MySQLで定義済みのものとコンフリクトしてたらしく、\`\`で囲めばOKらしい。

なので、

```sql
INSERT INTO area_tag (id,`key`,name) VALUES (0,'jp_2','青森県');
```

で解決。
【VSCode】VSCodeでBladeテンプレートを整形する

# 概要
VSCode（Windows）ではShift+Alt+Fでコードをフォーマットしてくれるのですが、拡張機能をインストールするだけではblade.phpのコードをフォーマットしてもらえませんでした。
そこで、調べてみると2つの方法があったため投稿します。

# settings.jsonで編集する

## settings.jsonを開く
コマンドパレットで`settings json`を入力して`settings.json`を開きます。
メニュータブから選択しなくても、F1またはCtrl+Shift+Pでコマンドパレットを開くことができます。

## 設定を記述する
以下の内容を記述してVSCodeを再起動します。

```:setting.sjon
"files.associations": {
    "*.blade.php": "html"
},
```

# 拡張機能を使用

# 拡張機能のインストールする
拡張機能から`Laravel Blade Snippets`をインストール検索してインストールします。

拡張機能の検索は左側のタブバーで開くかCtrl+Shift+Xで開けます。
タブバーを開くだけならCtrl+Bでも可能です。

自分はこの拡張機能をインストールだけして、フォーマットの設定していなかったため体裁を整えてもらえませんでした。

## 拡張機能の設定を変更する

設定画面を開いて左側のメニューから `拡張機能 → Blade Configuration` を選択し、右側メニューの`Enable format blade file`にチェックを入れて再起動します。

![screenshot_20200420_020428.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/513331/6cc4feea-d37a-9138-1372-5d39077d7103.png)
WordPress cssファイルを更新する際の備忘録

# はじめに
WordPressの使い方に慣れていないため、
本番環境にアップロードした内容の編集方法を備忘録として残しました。
この記事では`cssファイル`の編集について記述します。
またphpファイルでも同様の方法で編集できます。

`記事の更新`については以下のとおり
[WordPress記事を更新する際の備忘録](https://qiita.com/kazuhj/items/583a3ef83967638a99b2)

## 開発環境
### テスト環境
・Local by Flywheel
### 本番環境使用サーバー
・Xサーバー

## 手順一覧
手順は簡単で本番環境のファイルを編集→保存するだけです。念の為、編集したいファイルをドラック＆ドロップでコピー(バックアップファイル)を作成しておきます。

### １．FileZillaを起動
・FileZillaを起動して編集したいcssファイルのバックアップをとる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526620/b644f6d1-10f9-6687-ab6d-6103fc429164.png)

### ２．cssファイルを編集→上書き保存

## cssが本番環境で反映されない場合
メディアクエリ設定を追加しても本番環境で反映されずハマりました…

ホームページの見た目（CSS）を変更した時は、キャッシュが強くてただ再読み込みしただけじゃ更新してくれません。
このエラーはブラウウザのキャッシュを無視して強制的にサーバーからページに関する情報をすべてダウンロードする「`強制再起動(スーパーリロード)`」で解決できます。

### 強制再起動(Google Chrome)
・`検証ツール`を開いてから更新ボタンを右クリックし、「キャッシュの消去とハード再読み込み」をクリックして実行できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526620/7760cb58-c26f-b2e2-2d4a-6823de48d606.png)

### 強制再起動(Safari)
・「設定」→「Safari」→「履歴とWebサイトデータを消去」で強制再起動が可能になります。
これでスマホで確認した時にメディアクエリが設定されていることを確認しました。
<img width="375" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526620/7ab9eaf1-eba2-d676-1d96-c594e8c6c02e.png">

以下、cssが反映されない原因について調べて参考にさせていただいた記事です。
[wordpressでcss編集したのに効かない時の対処と原因を特定する術](https://uetani33.net/wordpress-css/)
[キャッシュが残ってホームページが更新されない時の対処法 【スマホ版】SafariやChromeで強制再読込する](https://blog.skeg.jp/archives/2017/11/safari-super-reload-iphone.html)

*******************************************************
Ruby on railsで開発しAWSでしかデプロイ経験がなかったので、強制再起動の概念が全くありませんでした:disappointed_relieved:
これを機にWordPressについてもっと勉強したいと思います!
ABC163E - Active Infants を解く

解説読んでもよくわかんなかったので取り急ぎ

#問題文 

* N人幼児がいる
* $i$番目の幼児の活発度は$a[i]$
* $i$番目の幼児が$j$番目に移動すると $a[i]*|i-j|$ うれしさが生じる
* いい感じに幼児を並び替えてうれしさを最大化する

#DP

嘘貪欲で通そうとしたけどダメだった(それはそう). 基本的には活発度が大きい幼児から順に左右の隅っこのどちらかに割り振っていく. 貪欲にやると入力例2のようなケースでWAする(1敗)のでどちらに割り振るかの選択の余地は残しておきたい. EはDPのEなので以下の式に従って更新.
$$dp[i][j]=max(dp[i-1][j]+|x-(i-1)|*a[x], dp[i][j-1]+|x-(n-j)|*a[x])$$
a[x]はi+j番目に大きい数列aの要素. 最終的に揃った$dp[i][n-i]$の最大値をとって終わり.

```C++
ll a[2020];
pair<ll,ll> p[2020];
ll dp[2020][2020];

void solve(){

    ll n;
    cin >> n;
    rep(i,n){
        cin >> a[i];
        p[i] = make_pair(-a[i],i);//ペアを降順ソートするのが面倒だったのでマイナスをかけて昇順ソート
    }
    sort(p,p+n); 

    rep(i,2020){
        rep(j,2020){
            dp[i][j]=0;
        }
    }
    rep(i,n){
        rep(j,n){
            if(i+j>n) continue;
            if(i==0&&j==0) continue;
            if(i==0){
                ll x = p[i+j-1].second;
                dp[i][j]=dp[i][j-1]+abs(x-(n-j))*a[x];
            }
            else if(j==0){
                ll x = p[i+j-1].second;
                dp[i][j]=dp[i-1][j]+abs(x-(i-1))*a[x];
            }
            else{
                ll x = p[i+j-1].second;
                dp[i][j]=max(dp[i-1][j]+abs(x-(i-1))*a[x], dp[i][j-1]+abs(x-(n-j))*a[x]);
            }
        }
    }

    ll ans = 0;
    rep(i,n){
        ans = max(ans, dp[i][n-i]);
    }

    cout << ans << endl;

}
```
pip コマンド集

pythonを使う上で必要なpipコマンドをまとめておきます．
### パッケージのインストール
-Uは最新のバージョンに更新する際に使用
--quitや--proxyや-e(--editable)などのオプションも可
--eはインプレースでインストールするため，gitなどから開発中のソースコードをインストールし編集された場合でも，再インストールの必要がない

```
pip install -U Flask
```

### パッケージのアンインストール
確認が不要な場合は-y

```
pip uninstall -y Flask
```

### バージョン確認
```
pip --version
```

### インストール済みのパッケージとそのバージョンの一覧をrequirementsフォーマットで表示
```
pip freeze
```

### インストール済みのパッケージの一覧を表示
--outdatedは古いパッケージを表示

```
pip list
```

### インストール済みのパッケージの情報を表示
```
pip show Flask
```

### ヘルプ
```
pip install -h
```

### pip freeze の出力をrequirements.txtに保存

```
pip freeze > requirements.txt
```

### requirements.txtからインストール
-rで元のrequirements.txtとの差分を確認

```
pip install -r requirements.txt
```
css,bootstrap,phpの勉強

<head>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

cssの記述
  <style>
body {
  /* font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif; */
  font-family: "Noto Sans JP", sans-serif
  /* font-weight: 500; */
}
一部省略
th {
    background-color: rgba(17,215,208,1);
    padding: 10px 20px;
}
td {
    padding: 10px 20px;
}
table {
    border: 2px #000000 solid;
}
</head>

<body>
<h1>会員一覧</h1>
    <div class="container">　//bootstrapの記述
    <div class="row">//bootstrapの記述
    <div class="col-xl-12">//bootstrapの記述
    <?php
        session_start();

データベースから読み込み
        require_once("MyAuthDefault.php");
        $db->query('SET NAMES utf8');
        //echo $_SESSION['nickname'];
        $sql="SELECT * FROM kaiin_mst2 where kaiin_address1 like '%神奈川%' order by kaiin_seqid2";
        $rs=$db->query($sql);

下記からテーブル表示
        echo '<table border="1" align="center">
        <tr align="center">
            <th>会員ID</th>
            <th>会社名</th>
            <th>郵便番号</th>
            <th>住所</th>
        </tr>';
        while($row=$rs->fetchRow(DB_FETCHMODE_ASSOC)){
            echo '<tr>
            <td align="center"><a href="./link01.php?kaiinid='.$row['kaiin_seqid2'].'">'.$row['kaiin_seqid2'].'</a></td>
            <td>'.$row['kaiin_companyname'].'</td>
            <td>'.$row['kaiin_yubin'].'</td>
            <td>'.$row['kaiin_address1'].'</td>
        </tr>';
        }
        echo '</table>';
    ?>
    </div>
    </div>
    </div>
</body>
Atcoder ABC163 A-DをPythonで

今回は残念ながらUnratedでした

#A Circle Pond
円周の式に当てはめるだけ。円周率は3.14とかではなくmathのpi使いましょう。

```ABC163a.py
import math

a=int(input())

print(math.pi*2*a)
```

#B Homework
夏休みの日数-宿題の総日数の差を出力する。

```ABC163b.py
n,m=map(int,input().split())
a=list(map(int,input().split()))
for i in a:
    n-=i
    if n<0: #宿題の総日数が夏休みの日数を上回った場合
        print(-1)
        exit()
print(n)
```

#C Management
上司1,2...nに対応する配列を用意し、$A_n$が指し示す上司を$+1$する。
配列が0から始まるのでそこだけ気を付ける。

```ABC163c.py
n=int(input())
l=list(map(int,input().split()))

ans=[0]*n

for i in l:
    ans[i-1]+=1
    
for j in ans:
    print(j)
```

#D Sum of Large Numbers
Nが$10^{100}$より十分小さいため、$10^{100}+N$個の中から$x$個を選んだ時と$y$個の数を選んだ時の和が同じになることはない。このため$k$個を選んだ時の中で異なる組み合わせを考えればOK。また、組み合わせの和を計算するときは$10^{100}$の部分は無視してOK。
$N$個の0から始まる連続する整数のうち$i$個選んだ組み合わせの総数は、$\sum_{k=i}^{N}k$と$\sum_{k=0}^{i-1}k$の差になる。
Σ計算はfor文回すとTLE確実なので、中学校で習ったガウスの和の公式を使いましょう。

```ABC163.py
n,k=map(int,input().split())
ans=0
for i in range(k,n+2):
    a=0.5*i*(i-1)
    b=0.5*n*(n+1)-0.5*(n-i)*(n-i+1)
    ans+=int(b-a+1)
    
    
print(ans%(10**9+7))
```
【Git】git status - 現在の状態

###git status
作業ディレクトリ内のブランチをstatusコマンドで現在の状態を表示します。

~~~git:ターミナル
$ git status
~~~

作業ディレクトリでの現在の状態を表示する

作業ディレクトリに現在の状態を見ることができる
（根っこのようなイメージがわかりやすいかなぁぁ。。。）

例：

コマンド

~~~:command
git status
~~~

ログ

~~~:log
On branch 作業ブランチ
Your branch is up-to-date with 'リモートブランチ'.
Changes to be committed:
  (use "git reset HEAD <file>..." to unstage)

	new file:   変更されているファイル名
	:
	: 複数のファイル
	:

// ない場合は消えます

Untracked files:
  (use "git add <file>..." to include in what will be committed)

	変更されているファイル名
	:
	: 複数のファイル
	:

// ない場合は消えます

nothing added to commit but untracked files present (use "git add" to track)
~~~

## 関連記事
[【Git】一覧](http://qiita.com/sunstripe/items/0b611f6e8a480024dd33) - Gitコマンドまとめ
[【Git】git status](https://qiita.com/sunstripe2011/items/19df6655b6703e4aaaed) - 現在の状態
【Git】git status -s - 現在の状態 短縮して表示
【Git】git status --short - 現在の状態 短縮して表示
[【Git】git add [ファイル名]](https://qiita.com/sunstripe2011/items/75b7ad40e9b5af99a91e) - ステージングエリアにあげる
【Git】git add . - ステージングエリアにあげる
【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

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

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

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

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

キャリア教育事業
広域学習支援プラットフォーム『のびのび日和』
https://slc-lab.amebaownd.com/

#スポンサー募集


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

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

[ビヨンドXプロジェクト全体会議](https://www.youtube.com/playlist?list=PLaR6-YWiGWkYhEHWnt8f1z-JC0g3nwwC9)
VirtualBoxで仮想OS(CentOS7)でATOMの導入のために容量を追加する。

　
　仮想のCentOS7にATOMをインストールしたかったのですが、最小構成のハード構成8Gで構築していたらインストールが全然進まなかったため、ディスク容量を増やしました。

##仮想OSの仮想的なサイズの変更（最初にやる）

最初に状況確認します。`fdisk -l`すると確かにsda2が約8Gになっています。
次に仮想OSの物理ディスク？を変更したいので、GUIで設定を変更します。

　`VirtualBox→対象の仮想OSを選択してグローバルツール→プロパティ`
　　　画面の下にあるサイズが8Gだったのでとりあえず30Gに変更しました。

##fdiskでパーティションを再設定します。

①PV(Physical Volume)を設定していきます。VGもnでやっている認識(間違っていたらすみません)

```
 #デバイス名(SCSI ディスクなのでsda)を指定してfdiskコマンド
  $fdisk /dev/sda
 #対話モードになるので
  $P(パーティションテーブルの表示）
 #sda1,sda2が表示され、sda2を作り直したいので
  $d(パーティションを削除する)
 #パーティション番号を選択します
  $2
 #新しいパーティションを作ります。サイズ指定もできるはず
  $n
 #パーティションの種類を選択しますが、基本的にプライマリーでいいと思います。
  $p
 #変更が終わったら保存します。もし間違えたらqで保存しない
　$w
 #再起動します
　$reboot

 #再起動後、PV(Physical Volume)を設定していきます。
　$pvresize /dev/sda2
 #論理ボリュームを拡張します。ボリューム名はlvdisplayで確認
  $lvextend -l +100%FREE /dev/centos/root
 #最後にファイルシステムを拡張します。ファイルシステムの確認はdf -T
  $xfs_growfs /dev/centos/root
```
ちなみにsda2は/dev/mapper/centos-rootになっています。

```
[root@localhost ~]# df -h
ファイルシス            サイズ  使用  残り 使用% マウント位置
devtmpfs                  1.4G     0  1.4G    0% /dev
tmpfs                     1.4G     0  1.4G    0% /dev/shm
tmpfs                     1.4G  9.4M  1.4G    1% /run
tmpfs                     1.4G     0  1.4G    0% /sys/fs/cgroup
/dev/mapper/centos-root    29G  9.9G   19G   35% /
/dev/sda1                1014M  237M  778M   24% /boot
jyujyu                    238G  161G   77G   68% /media/sf_jyujyu
tmpfs                     285M   20K  284M    1% /run/user/1000
/dev/sr1                   48M   48M     0  100% /run/media/odakn/VBox_GAs_5.2.38
```

###ついでに
---
ATOMをインストールしようとするとデフォルトのgccが古くてインストールできません。
記載を省略しますが、最新のgccをダウンロードしてビルド。Versionが変わっていればOKです。
あとは心おきなくATOMをダウンロードして、コマンド打っておしまい。
`yum localinstall atom.x86_64.rpm`


###参考
---
 こちらの記事を参考にさせていただきました。誠に有難うございました。
[VirtualBox環境下でのCentOS7ディスク拡張[2018-10]]
(https://qiita.com/hiroakisan@github/items/ffced43400edc4846a94)
[論理ボリュームマネージャー（Linux LVM）について調査してみました]
(https://qiita.com/sigenyan/items/e67eaa065da749c04e36)
[CentOS7 LVM によるディスク管理の基本](https://rin-ka.net/centos7-lvm/)
[CentOS7で良さげなCode Serverを試したらエラーが出た ("Error: /lib64/libstdc++.so.6: version `GLIBCXX_3.4.21' not found 等)](https://qiita.com/IntenF/items/dbfe1bef4568719a0133)
RaidグループとかLUNとかについて

# はじめに
RaidマネージャーとかLUNとかについてメモ

# 参考
https://milestone-of-se.nesuke.com/sv-basic/architecture/disk-term/

# ストレージを接続から理解する
https://www.atmarkit.co.jp/ait/articles/0808/25/news120.html



# Raidグループ、Raidアレイ
* サーバ内の複数のドライブを、サーバ内の『RAID コントローラ』によって束ねたものです。
* **OS から見たとき、この RAID グループを 1 つのディスク（仮想ディスク）として認識します**
* さらにそこからLUNにわけてもよい。OSはLUNを一つのHDDとして認識する

# ボリュームとは
ボリュームとは、物理・論理を問わず、『物理ディスク』、『RAID グループ(**仮想ディスク)**』、『LUN』などの、**ファイルシステムにフォーマットできるディスク領域を指します。**

**RAID グループもボリュームですし、LUN もボリューム、LVMもボリューム、/dev/xxxもボリューム**

# 論理ドライブ(LUN)とは 論理識別番号
http://e-words.jp/w/LUN.html

RAID機器やストレージサーバなどは複数の物理的なストレージ装置（ハードディスクやSSDなど）を束ねたものが外部から一つの機器として認識されるが(Raidグループ、Raidアレイ)、これを論理的に分割してそれぞれにLUNを割り当てて識別することにより、異なるストレージとして管理することができるようになる（全体を一つのLUNとしてもよい）。
**OSはLUNを一つのHDDとして理解する**

**Raidグループ、Raidアレイやストレージプールから論理的に分割した領域のこと**

# ストレージプールとは
* **一つ以上のRaidグループが含まれる**
* ストレージ製品によってストレージプールが使える。
* 複数のRaidグループをまとめて**一つのボリュームとする**
* ストレージプールから複数の論理ドライブ(LUN)に分けて、サーバーにマッピングすることができる


# KVMにおけるストレージプールとは
* **ストレージ製品の、ストレージプールと同じような使い方ができる**
* /dev/xxxなどのデバイス(ボリューム)を登録できて(Raidアレイだったり、ボリュームならなんでもよさそう)、それを一つのボリュームにして、そこから仮想マシンにストレージ領域を割り当てることができる
fstabにgoogysでObject Storageのマウントを記述する

# 目的

AWS S3やIBM Cloud Object Storageのバケットはs3fsやgoofysを使うことでファイルシステムのようにOS上にマウントすることができます。今回はgoofysを使い、OSをリブートしても自動でマウントされるよう、fstabに設定します。

# 手順

## goofysのインストール

こちらが参考になります。AWS S3でもIBM Cloud Object Storageの場合でも同じです。

> https://dev.classmethod.jp/articles/how-to-use-s3fs-goofys/

## /etc/fstabの設定

### 手動での記述例

goofysは実際にインストールされてるパスを指定してください。環境変数風の表記は実際の値にしてください。

```text:/etc/fstab
/usr/local/bin/goofys#${バケット名} ${マウントパス} fuse _netdev,allow_other,--profile=${プロファイル名} ,--uid=${UID},--gid=${GID},--dir-mode=0750,--file-mode=0640,--stat-cache-ttl=0,--type-cache-ttl=0,--endpoint=s3.private.jp-tok.cloud-object-storage.appdomain.cloud 0 0
```

### Ansibleでの設定例

前述の/etc/fstabと同じ設定が入ります。

```yaml
- name: Bucket is mounted
  mount:
    path: "{{ マウントパス }}"
    src: /usr/local/bin/goofys#{{ バケット名 }}
    fstype: fuse
    opts: _netdev,allow_other,--profile={{ プロファイル名 }},--uid={{ UID }},--gid={{ GID }},--dir-mode=0750,--file-mode=0640,--stat-cache-ttl=0,--type-cache-ttl=0,--endpoint=s3.private.jp-tok.cloud-object-storage.appdomain.cloud
    state: mounted
```
自分の Combine 101 ノート

このビデオに話したものを基き、練習しようと思います。

- <https://developer.apple.com/videos/play/wwdc2019/721/>

## 原則

練習する内容はなるべく設計を考えず、最小限、単純にしようと思います。

## 練習したいもの

主にはこちらです：

- `@Published`
- `.eraseToAnyPublisher()`
- `.flatMap`
- `Future`
- `sink`

などなど

## 環境

- Xcode - Version 11.4 (11E146)
- Playground

RxSwift 経験者。

## はじめ

こちらのクラスをベースにやっていこうと思います。

``` swift
import UIKit
import Combine

class Article {
    @Published var title: String = ""
}
```

- `@Published` という property wrapper をつければ publisher になれるということです。

## title の変化を購読する

まあ、購読は RxSwift 由来の呼び方なんですけどw

プロパティを publisher 化した後、その publisher をアクセスしたいときに、プロパティ名の前に `$` するだけでおっけ　（便利！ :tada:）

``` swift
let article = Article()

// これだけで済む
let publisher = article.$title
```

## Cancellable と sink 

ここはまず購読のみでつかちゃいます。

``` swift
let cancelable = publisher.sink { print($0) }
```

そして、その下にこの行を追加したら

``` swift
article.title = "New Title"
```

console にはこのようになります。

``` text
""
"New Title"
```

ブロックしないと最初の値も出てきてますね、そしてこうすればひとまずなんとかなります！

``` swift
let cancelable = publisher
    .dropFirst()
    .sink { print($0) }
```

output

``` text
"New Title"
```

## AnyPublisher にする

`.eraseToAnyPublisher()` はくそ長いので抵抗はややある（笑）
けど、今の段階しょうがないですね

``` swift
let doubleLengthPublisher = article.$title
    .map { $0 + $0 }
    .eraseToAnyPublisher()
```

明示的に型を素直に書いておいても良い：

``` swift
let doubleLengthPublisher: AnyPublisher<String, Never> = article.$title
    .map { $0 + $0 }
    .eraseToAnyPublisher()
```

## Never ってなんやねん

RxSwift の経験者として、これを初めてみたときこれはなんだっけ全然わからなかった笑

定義から見て Publisher の protocol に `Output` と `Failure` の二つの associatedtype が定義されています。

Never を Failure のところに入れたら、この Publisher からエラーが出てくるわけはないと表明するになります。

このような設定は UI 向けの interface に向いてるなと思っています。

## flatMap と Future を加えてみましょう

- flatMap の用途は、主にエラーによるストリームの途絶えを防ぐためのもの（正式にゆうと operator ですね）です。

- Future - promise を使って、ストリームを作る。非同期の処理を combine のストリームにするツールです。

さて、コードを書きましょう

``` swift
let isTitleValid = article.$title
    .dropFirst()
    .flatMap { title in
        return Future { promise in
            DispatchQueue.main.async {
                promise(.success(title.count > 4))
            }
        }
     }
     .eraseToAnyPublisher()
```

型推論はちゃんとできているのは驚いていたところです。

不安だとしたら、明示的に書いておいても良いと思います。

そして沈んでおいて：

``` swift
let cancellable = isTitleValid.sink { print($0 ? "valid" : "not valid") }
```

値を変化してみて

``` swift
article.title = "a"
article.title = "over 4"
```

間違いなければ console はこうなるはずです。

``` text
not valid
valid
```

## 所感

RxSwift とはかなり似てると思われていますが、練習するとき RxSwift で積んできたくせを一旦忘れておいてから Combine はよりスムーズできるなと思います。（個人差あり）

そして [wwdc2019#721](https://developer.apple.com/videos/play/wwdc2019/721/) はとても素晴らしい資料です。合成(composition) など、 [RxMarbles](https://rxmarbles.com/) で見ることができないところ、 Apple 社はちゃんそれらへんを可視化してきてるのでとても分かりやすかったと思うんで 100% おすすめです！

次のステップはもっと使いこなして画面に組み込んでみたいですね。
さて、今回はここで終わりたいと思います

また次回！（あったら笑）
Pythonで要素数カウントする方法（辞書型）

#はじめに
今回の主なテーマは要素数をカウントしたいときに辞書型でカウントして格納する方法を書いていきたいと思います。自分がよく使うので復習の意味を込めています笑

AtCoder Beginner Contest 163のC問題でも活用できたので、おまけとして問題も解説していきます。


[AtCoder Beginner Contest 163](https://atcoder.jp/contests/abc163)


#C - management

まずは本題の問題からみていきましょう。
要素数をカウントする問題だけみたい方はここだけ読んでください。

<img width="901" alt="スクリーンショット 2020-04-20 0.07.31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478601/883f6cf8-89bb-6aa1-f122-6b9d561bb1e2.png">



問題の題意は数字が与えられてその数字が何回出現するかをカウントしたいということです。このときにcollectionsライブラリ内の関数で得ることもできると思いますが、処理も単純なので書いてしまいましょう。

ここでjosi_mapが辞書型の配列でid_list内の数字をカウントしたいというのが目的です。
まず１番目のforループで辞書のkeyを出現する数字に対して0をvalue値として初期化します。次に２番目のforループで要素数をカウントします。出現したkeyのvalueを+1しています。

ここまでで要素のカウントは終わりですが、最後のforループは出力のために回しています。この処理は５回くらいは書いたことあるので覚えておいて損ではないと思います笑

```python
people=int(input())
id_list=list(map(int,input().split()))
josi_map={}
for i in range(people):
    josi_map[i+1]=0

for i in id_list:
    josi_map[i]+=1

for i in range(people):
    print(josi_map[i+1])
```

その他の問題に関しても書いていきます。

#A - Circle Pond
<img width="946" alt="スクリーンショット 2020-04-19 23.25.03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478601/e0c483c4-78ae-7b10-db86-1c902954189b.png">


```Python:
import math
r=int(input())
print(2*math.pi*r)
```
円周は半径をRとしたときに2${\pi}$Rで求められます。
円周率を使うにはmathライブラリを用います。
数値計算の関数が多数あるライブラリですが、値として円周率も格納されています。
その値はpiに格納してあるので、math.piを変数でうけて用います。

出力に関して想定回答との絶対誤差または相対誤差が${10^{-2}}$以下であれば良いと記述があるのですが以下にそれぞれの誤差を記述します。

絶対誤差：出力-想定回答
相対誤差：(出力-想定回答)÷想定回答

想定回答が小数点以下20桁まで計算しており、出力は小数点以下15桁まで計算しており、問題ないと判断できます。誤差が効いてくるとすれば、入力が${10^{12}}$程度にならないと問題にならないので提出します。


#B - Homework

<img width="737" alt="スクリーンショット 2020-04-19 23.58.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478601/6593697a-de46-b022-3dd1-f9cdf29d51ff.png">

問題の題意は夏休みの日数と宿題にかかる日数が入力で与えられて、夏休みの日数が多ければ残りの日数を、そうでなければ-1を出力せよということです。
境界値だけ気をつけましよう。残り日数が0日の場合を-1ではなく0と出力します。


```python:
day,work_num=map(int,input().split())
works=list(map(int,input().split()))
if day>=sum(works):
    print(day-sum(works))
else:
    print(-1)

```
別解として出力を
max(day-sum(works),-1)とたほうが記述量が減りますね。

#D - Sum of Large Numbers

<img width="767" alt="スクリーンショット 2020-04-20 0.22.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478601/59536662-1c48-a5cd-fedf-512637b79dfb.png">

この問題の題意はN+1個の自然数からK個以上のの整数を選ぶときに合計値の取り得る数を求めよということです。Kが2のときなどで実験してみるとわかるのですが選び方によっては合計値が重複してしまうことがわかります。

ですが規則性も見えてきます。K個選ぶ時に最小の合計値から最大の合計値まで1ずつ刻みで全ての数字が取り得ることがわかります。あとはforをKからN+2まで回して足し合わせていけば求まります。その合計値の取り得る数をforの中のsum_numで計算しています。

最後に出力はmod(${10^{9}}$+7)で指定されているので%演算子で出力しました。
規則を見つけるまではノートに書いていきました。重複はしても各Kに対して合計値の取り方はNに依存するが数式で表せると判断できたのでコードに落としました。


```python
people=int(input())
n,k=map(int,input().split())
sum_num=0
for i in range(k,n+2):
    sum_num+=(i*n-i*(i-1)+1)
   
print(sum_num%(10**9+7))
```


#終わりに
ご覧いただきましてありがとうございました。
要素数カウントする方法を主に紹介したかったのですが、内容が少なかったので他の問題も掲載しました。

追記として、競プロで変数を１文字にするか悩みますが、処理が少しでも複雑ならわかりやすい変数名をつけた方が効率が良いように感じています。今回はここまでとします。
Tunnelblickで「必要なシステムがありません」と怒られたとき

はじめてTunnelblickを使って、こういう↓エラーが出てつまった
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/430849/b56f025a-49cc-cac9-9209-63365cd24ae5.png)

コメント歓迎

# エラー

```
必要なシステムがありません

システムフォルダー xxx は安全ではありません。
この問題が解決されるまで、Tunnelblickやその他のプログラムは、正常に動作しない可能性があります。
コンソールログに詳細があります。
```

# 対処方法

エラー文に出てるフォルダーの権限を変更する
たとえば、「システムフォルダー tmp(/private/tmp)は...」って言われてたら、`/private/tmp`フォルダの権限を変える

terminalでコマンドを打っていきます

:warning: **macOSのバージョンがOS X 10.11以上の場合です。それ以外の場合は後述**

```bash
$ sudo chown root:wheel /private/tmp; sudo chmod 01777 /private/tmp
```

`chown`は「権限を変更する」というコマンドです
どのようにr/w/xを変更するか(i.e. なぜ01777か)は[公式ガイド](https://tunnelblick.net/cSystemFolderNotSecure.html)の通りです

## その他のOSバージョン

↑、OSバージョンが**OS X 10.11以上**の場合で、それ以外のOSの場合は、適宜[公式ガイド](https://tunnelblick.net/cSystemFolderNotSecure.html)を参照します

1. "Correct System Folder Ownership and Permissions"の項目に移動
2. 自分のOSバージョンの表を探す
3. 該当フォルダの行を探す
4. 一番右の列のコマンドをコピペする

例えば、OS X 10.5で、「システムフォルダー /usr (/usr) は安全ではありません...」と言われてたら、↓のひょうのピンクで囲んだコマンドを打ちます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/430849/e5790176-6e76-b7ab-8c7d-421b09b776b7.png)

# 解説

↑で権限を変更したフォルダが、Tunnelblickの想定している read/write/execute の権限とは違うので、それを修正する
というのが対処方法でやっていること

# 参考URL

このエラーが出たときのTunnelblick公式による対処方法ガイド
https://tunnelblick.net/cSystemFolderNotSecure.html
Mac Laravelのバージョンを確認するコマンドの紹介

# 目的

- Laravelのバージョンを確認するコマンドを忘れないようにまとめる

# 確認コマンド

1. Laravelアプリケーションのディレクトリ内で下記コマンドを実行する。

    ```terminal
    $ php artisan --version
    >Laravel Framework 7.0.8
    ```
php artisan config:cacheしたらローカルサイトにアクセスできなくなった

# php artisan config:cache コマンド実行したら 「View [top.index] not found.」エラー
.envファイルの中身を変更後、キャッシュにenvの内容残ってる場合があるから、
変更が反映されない時は`php artisan config:cache`コマンド実行してね〜
みたいな記事が多数あったので言われるがまま従ったら...
`View [top.index] not found.` 
さっきまで普通に見れてたのに...TT

# 解消方法
キャッシュクリアコマンドで解決！

```
$ php artisan config:clear
```
透明度を含むカラーの定義の仕方

よく忘れるので備忘録に

# 透明度のあるカラー定義の仕方

```
#AARRGGBB
```

https://developer.android.com/guide/topics/resources/more-resources.html#Color

AA: [アルファチャンネル](https://www.weblio.jp/content/%E3%82%A2%E3%83%AB%E3%83%95%E3%82%A1%E3%83%81%E3%83%A3%E3%83%B3%E3%83%8D%E3%83%AB)
RR: 赤の16進数
GG: 緑の16進数
BB: 青の16進数

# アルファチャンネル部分の計算の仕方

<b>ケース: 20%だけ透過したい</b>

## 不透明度(opacity)を計算する

`100 - 20 = 80(%) = 0.8(opacity)`

### アルファチャンネルの範囲に変換
アルファチャンネルの範囲は8bit(0-255)

`255 × 0.8(opacity) = 204`

## 値を16進数に変換

この10進数の値を16進数に変換します(RGBのそれぞれの値を16進数カラーコードに変換するのと同じ要領)

自分で計算するのはとても面倒なので適当に`Decimal to Hex`とでもググってgeneratorを見つけてみましょう
[Decimal to Hexadecimal converter](https://www.rapidtables.com/convert/number/decimal-to-hex.html)

もしくはGoogleに直接聞いても良さそうです
`204 to hex`

今回の例でいえば`204(10進数) -> 0xCC(16進数)`となります

そのため、

> AA: アルファチャンネル

は`CC`になります。あとはRGB各値についても16進数の値を入れればokですね

#　付録 - アルファチャンネル早見表
とはいえ、たいてい使いたい 透明度/不透明度 なんて予め決まっていますので下記のような早見表を参照するのが早いと思います

```
100% — FF
95%  — F2
90%  — E6
85%  — D9
80%  — CC
75%  — BF
70%  — B3
65%  — A6
60%  — 99
55%  — 8C
50%  — 80
45%  — 73
40%  — 66
35%  — 59
30%  — 4D
25%  — 40
20%  — 33
15%  — 26
10%  — 1A
5%   — 0D
0%   — 00
```

マテリアルデザインで使われている値も含めてより細かい値を参照したい場合は
[こちら](https://qiita.com/CUTBOSS/items/a96fb369e5d1d8eda0da)が参考になるかと思います
Android に MPAndroidChart を追加する際の注意点

こんばんは。
今作っているアプリにグラフ表示ができるようにしたいなぁと思い、MPAndroidChartを追加しようとした際に少し詰まったので備忘録です。

MPAndroidChartとはいろんなグラフを簡単に表示することができるライブラリです。
ヌルヌル動きます。すごいです。
[MPAndroidChart](https://github.com/PhilJay/MPAndroidChart)

##何に詰まったのか

[こちら](https://github.com/PhilJay/MPAndroidChart#gradle-setup)をみて、プロジェクトモジュールに maven の依存関係を追加しようとした際に詰まりました。

まずは間違い

```gradle
buildscript {
    ext.kotlin_version = '1.3.71'
    repositories {
        google()
        jcenter()
        maven { url 'https://jitpack.io' } // この部分の依存関係の宣言はいらないです。
    }
    ...
}

allprojects {
    repositories {
        google()
        jcenter()
        maven { url 'https://jitpack.io' }
    }
}

task clean(type: Delete) {
    delete rootProject.buildDir
}
```

ただしくは、

```gradle
buildscript {
    ext.kotlin_version = '1.3.71'
    repositories {
        google()
        jcenter()
    }
    ...
}

allprojects {
    repositories {
        google()
        jcenter()
        maven { url 'https://jitpack.io' } // ここだけあれば良いです。
    }
}

task clean(type: Delete) {
    delete rootProject.buildDir
}
```

以上です。
WordPress記事を更新する際の備忘録

# はじめに
WordPressの使い方に慣れていないため、
本番環境にアップロードした内容の編集方法を備忘録として残しました。
この記事では`記事の更新`について記述します。

## 開発環境
### テスト環境
・Local by Flywheel
### 本番環境使用サーバー
・Xサーバー

## 手順一覧
大まかな流れについては以下のとおり
##### １．新規記事を作成
##### ２．WP Migrate DBでバックアップファイルを作成
##### ３．(xサーバー)サーバーパネルから「phpmyadmin」を選択
##### ４．バックアップファイルをインポートしてローカルのmySQLを反映

## 記事の更新
以下のサイトのページに記事を追加する方法について記述します。
更新・修正についても同様の手順で実施できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526620/4f2ef4a0-b701-5bb5-4df1-97b8ddb82e20.png)



### １．新規記事作成
WordPress管理画面「投稿」→「新規作成」を選択。
その後、記事を作成して公開します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526620/56dd842d-22cd-45f3-53b6-7660cf3d70bc.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526620/06086a87-31f8-0196-e9f9-cff320794007.png)

### ２．バックアップファイルを作成
#### 「WP Migrate DB」をインストール
ローカル環境のmySQLデータを本番環境に反映したいため、
「WP Migrate DB」というプラグインを使ってバックアップファイルを作成します。
有効化していない場合は、インストールして有効化させます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526620/e5b848b6-0657-3d0e-7c6b-06cb0327c784.png)

その後、「ツール」→「Migrate DB」を選択します。
(有効化していないと表示されません)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526620/9b10abbc-1dc8-98b8-dd49-87711b0e3312.png)

#### Migrate DB設定ページ
１．[Export File]のラジオボタンとその下の２つの欄にチェックを入れる。
２．[Find]欄にはあらかじめローカル環境のURLが入っているので、頭に「http:」を追加。
３．[Replace]欄に、レンタルサーバーのURLをhttps://から記述。
　（（例）https://[アカウント名].xsrv.jp）
　また、デフォルトで２段目が表示されていると思いますが、入力項目は不要のため右側の✖︎ボタンで削除。
４．[Export]ボタンをクリックすると、データベースのバックアップが始まるので、生成されたバックアップファイルをPC内に保存。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526620/05ca4982-2e6b-9c05-6473-4ecb37417ff8.png)

### ３．Xサーバー内操作
サーバーパネルより「phpmyadmin」を選択してログイン

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526620/e67ce8a2-bbdf-e828-0b23-b51de43c5fdb.png)

#### phpmyadmin操作
１．作成したDBを選択
２．アップロードファイルのラジオボタンを押し、バックアップファイルを選択。
３．下部の「実行」ボタンを押すとインポートが始まります。
 `※DB未選択の場合、「infomation_schema」に対してインポートするのでエラーが出ます。`

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526620/0a9e6244-01e5-ce8c-498e-413b823692c7.png)

以下の表示が出たら成功。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526620/7069f602-6727-996d-959b-7228d84f41a2.png)


### ４．本番環境の表示を確認
インポートしたことによりXサーバーのmySQLが更新されたので、本番環境を確認すると追加・変更した内容が反映されています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526620/bd1a7c9e-f51f-eaff-b005-c721cc6f099c.png)


************************************************************
初めてWordPressに触れて参考書も見つつ何とか編集できるまでたどり着きましたが、
Web制作経験がない人でも更新できるのが利点の一つとのことなので、もっと楽な方法がありそうです…もっと簡単な方法があれば是非ご教授ください:bow:
【超初心者用】AWS関連 略語・用語集【適宜更新】

# Overview
AWS周りの学習を進める中で、各種用語が散見され意味がパッと分からなかったので、整理する。
自分用のメモなので、全体的にゆるふわ。


# 略語集
AWS関連の略語

| 略語 | 正式名称 | 解説  |
| ---- | ---- | ---- | 
| AWS | Amazon Web Services | Amazonが提供する各クラウドコンピューティングサービスの総称 |
| EC2 | Elastic Computed Cloud | AWSクラウド上で仮想サーバ（インスタンスと呼ばれる）を実行するためのサービス | 
| S3 | Simple Storage Service | AWSクラウド上にデータ・ファイルを保存できるサービス |
| EIP | Elastic IP| EC2インスタンスにパブリックIPアドレスを柔軟に付与できるサービス |
| AMI | Amazon Machine Image | EC2インスタンス構成を取得してテンプレートを作成するサービス |
| RDS | Relational Database Service | AWSが提供するクラウド型のDBサービス |
| VPC | Virtual Private Cloud |物理的な環境（リージョン）上に構築する仮想ネットワーク |
| EBS | Elastic Block Store | EC2インスタンスのストレージ|
| IAM | Identity Access Management| AWS上のロール、アクセス権限管理機能を提供するサービス|
| SQS | Simple Queue Services | AWSが提供するMQ（メッセージキューイング）サービス

# サービス名、用語集
AWS独自の用語集はこちら。インフラ関連の共通用語はここでは扱わない。

| 用語 | 解説 |
| ---- | ---- | 
| Route53 | AWSが提供するDNS,53はDNSサーバがポート53を使うことが由来 
| Trusted Advisor | 利用中のAWS環境を自動分析した上で推奨設定を定時する機能 |
| Cost Explorer | AWSサービスのコスト・利用状況を可視化する管理ツール 
| AWS CloudTrail | ユーザや各AWSサービスのアクティビティをログに記録し、継続的に監視するツール |
| Cloud Front| AWSのCDNサービス, S3上の各種ファイルを高速配信する |
| AWS Lamda| サーバーレスでLambda関数として作成したコードを自動実行できるサービス|
【Nuxt.js】クラスコンポーネントのスニペットを作った

## この記事の概要

Nuxtのプロジェクトでtypescriptの導入までできたものの、
scriptタグのスニペットがVue.extend形式しかなく、
クラスコンポーネントがなかったのでスニペットを自作。

※[Vue TypeScript Snippets](https://marketplace.visualstudio.com/items?itemName=ducksoupdev.Vue2)を試すもうまく動かず。
何か良い拡張機能あったら是非コメントください

## 方法

ユーザースニペットからvue.jsonを開く

<img width="612" alt="スクリーンショット 2020-04-20 0.13.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/566220/00436491-2806-566a-a02c-d2c341a19ba0.png">

<img width="606" alt="スクリーンショット 2020-04-20 0.16.55.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/566220/4802c7b6-f191-f369-2163-ad58bb2a2e2c.png">


下記を入力

```vue.json
{
	"Print to console": {
		"prefix": "sc", // 「sc」と入力したらスニペット出るように 
		"body": [
      "<script lang=\"ts\">",
      "import { Vue, Component } from 'nuxt-property-decorator'",
      "",
      "@Component({})",
      "export default class ${TM_FILENAME_BASE/(^.)/${1:/upcase}/} extends Vue {}",
      "</script>",
      ""
		],
		"description": "nuxt-class-component" // 候補に出るコメント
	}
}

```

`${TM_FILENAME_BASE/(^.)/${1:/upcase}/}`
でファイル名の先頭を大文字にしています

こちら参考になります。
→　[VsCodeのスニペットのススメ](https://qiita.com/xx2xyyy/items/fd333368db548167f15a)


## 確認

<img width="748" alt="スクリーンショット 2020-04-20 0.17.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/566220/f52d31dc-860e-63de-c8fe-36f514d07ff9.png">

<img width="603" alt="スクリーンショット 2020-04-20 0.18.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/566220/4b13955d-0dcc-129f-67f0-296182b64bfb.png">


## その他参考

[3分でつくる2019年版 Nuxt.js TypeScript 開発環境設定](https://qiita.com/hiropy0123/items/4ee85fdb9b19bc89056f)
ポータルサイト創作記：５日目

昨日は、`$ bundle exec rails s`コマンドでrailsアプリのデフォルト画面を表示させた。
<img width="713" alt="スクリーンショット 2020-04-17 19.04.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/576912/756858c2-ec3c-4d64-d326-3d594cf1ed63.png">

今日は少し、Railsの中の環境を整えよう。
具体的には、Railsの中に今、存在するフォルダやファイルに、さらにフォルダやファイルを追加していく。
今、Railsの中には以下のフォルダ（ディレクトリともいう）やファイルが存在している。
<img width="194" alt="スクリーンショット 2020-04-19 23.47.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/576912/306b1810-497d-9635-5513-6fb041def44e.png">
試しにappフォルダを開くと、こんな風にフォルダ（ディレクトリ）が詰まっている。
<img width="192" alt="スクリーンショット 2020-04-19 23.48.25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/576912/08f01f71-6616-52d9-101e-dceff9c107b0.png">
一応、復習すると、これらは`$ rails new`をターミナルで実行したら、勝手につくられるファイル・フォルダ（ディレクトリ）群だ。

では、ファイルやフォルダ（ディレクトリ）を追加していこう。
「新しくフォルダやファイルをつくる」と聞いて、「新しいフォルダー」ボタンを押すことだったり、あるアプリケーションから「名前をつけて保存」をすることを想像した人もいるかもしれない。
例えば、こんな風に。
<img width="305" alt="スクリーンショット 2020-04-19 23.55.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/576912/b1dab9b5-40b4-8417-74db-d7fb917378ec.png">
もちろん、これでもできなくはないんだけど、こういう面倒なことをコマンドでやってくれるのがプログラミングのすごいところ。

ターミナルにコマンドを打ち込んで実行…する前に、ビフォーアフターがわかるように一旦、以下の２つの画像を見て欲しい。
<img width="320" alt="スクリーンショット 2020-04-20 0.00.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/576912/2fa2a16a-ab98-956d-2bc3-6eb225951ff9.png">
注目すべきはappフォルダ（ディレクトリ）。
・app/controllersフォルダ（ディレクトリ）
・app/viewsフォルダ（ディレクトリ）
そして、もう一つの画像。
<img width="870" alt="スクリーンショット 2020-04-20 0.06.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/576912/deff51c7-d5a4-f6e9-9f02-c913d1b1843f.png">
・config/routes.rbファイル。

２つの画像を見てくれただろうか。
では、ターミナルで以下のコマンドを打ち込み、実行しよう！
` bundle exec rails g controller homes index`
<img width="514" alt="スクリーンショット 2020-04-20 0.08.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/576912/7d96c660-8cdb-9b05-eba5-d1af8d7f5e8b.png">

実行すると、次のようになっただろうか？
<img width="513" alt="スクリーンショット 2020-04-20 0.09.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/576912/89589e89-b897-f66d-4240-dcdecfd48a2f.png">
いろいろinvokeされたりcreateされたりしている。
では、先ほどのファイル群のアフター画像をご覧あれ。
<img width="252" alt="スクリーンショット 2020-04-20 0.14.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/576912/7cb15393-0f18-5c03-c82f-557b9e91ed3a.png">
・app/controllersフォルダ（ディレクトリ）には`homes_controller.rb`ファイルが
・app/viewsフォルダ（ディレクトリ）には`homes`ディレクトリがつくられ、その中に`index.html.erb`ファイルが
それぞれ作成されている。
そして、
・config/routes.rbファイル。
<img width="870" alt="スクリーンショット 2020-04-20 0.17.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/576912/3608b312-29d2-3090-70c7-0d7e93a70d75.png">
`get  'homes/index'`の一文が自動的に追加されている！

「これが何なのさ？」という疑問は明日に取っておくとして、改めて、プログラミングの力はすごい！
今日は`rails g`コマンドを使って環境構築を行った。
NutanixのVMのチップセットをq35+ICH9に設定する

# チップセットとは
Wikiから[引用](https://ja.wikipedia.org/wiki/%E3%83%81%E3%83%83%E3%83%97%E3%82%BB%E3%83%83%E3%83%88)しますが


PC/AT互換機（に類似したパーソナルコンピュータ）のマザーボードに実装される、CPUの外部バスと、メモリや周辺機器を接続する標準バスとのバスブリッジ[1]などの機能を集積した、少数の大規模集積回路（LSI）
です。

特に仮想化で標準となっている440FXはそこそこ古く、1996年前後に登場したものです。CPU世代ではPentium2や3、OSではWindows 2000より以前の年代と想定していただければと思います。


その後、KVMにおいてq35+ICH9が使用できるようになり、性能向上や安定性向上になるためこちらを使用することが増えています。世代としては、2009年前後、CPU世代でいうならば、Core2 duo世代になります。

ご存じの通りNutanixはKVMベースですので使用できます。

# 自己責任でお願いします
使用方法を記載いたしますが、公式ではサポートされていません。製品版や本番環境では公式サポートを謳った時点で使用するようにしてください。

# 440fx→q35+ICH9への変更方法

CVMにログイン後以下のコマンドを入力します。

```
acli vm.update <vmname> machine_type=q35
```

# 440fx→q35+ICH9への長短

＜短所＞

・IDEのODD,diskが使用できない。
→q35+ICH9チップセットがIDEの命令がないためです。

ですが、基本的にNutanixでサポートされるOSはIDEのみしか使えないOSはありませんので特に問題にならないと思います。


＜長所＞
・マルチコアCPUのパフォーマンスの向上
マルチコアなCPU環境においておおよそ1.2倍程度のパフォーマンス向上が見られます。

・ディスクアクセスのパフォーマンス安定
Crystal disk markにてベンチマークを測りましたが、440fxでは安定した数字がでませんでしたが、q35+ICH9では安定した速度がでるようになり、起動時やディスクアクセスが激しいプログラムでは、体感でもわかる性能向上も見られました。


#余談
※Core2世代の実機を触れた方はご存じかと思いますが、この世代まではIDEポートは基本ついているので不思議に感じられるかもしれませんが、
実はマザーボード上にIDEコントローラーが搭載されていたのでq35+ICH9にはIDEの命令セットはありません。

以上
Hyper-VでCentOS 7を起動する

# 目的
web開発などで既に用意されていた仮想環境などは触ってきたが、改めて理解するために自分で操作できるようなりたい

# 環境
windows 10 pro

# 準備するもの
1.Hyper-Vを有効化
Microsoft Docsを参照してください
https://docs.microsoft.com/ja-jp/virtualization/hyper-v-on-windows/quick-start/enable-hyper-v

2.CentOS7のisoイメージ
以下からCentOSのisoイメージをダウンロードしてください
http://ftp.riken.jp/Linux/centos/7.7.1908/isos/x86_64/
今回は「CentOS-7-x86_64-DVD-1908.iso」を使用します。

# Hyper-Vで仮想マシンを作成
**Hyper-Vマネージャーを起動**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621838/8ea71aa5-3a61-4151-260b-3bdb38843766.png)

マネージャーを起動したら左メニューにあるHyper-Vマネージャー>[自分のPC名]を右クリック>新規>仮想マシンを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621838/db364b55-98f3-291b-e07a-e9cb22593e7d.png)

仮想マシンの新規作成ウィザードが表示されたら「次へ」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621838/f0870990-54c1-a763-d878-c47c489ba602.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621838/e96af5e7-94c8-74d7-2cd1-3074ee263fdc.png)

任意の仮想マシン名をつける
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621838/26e30db5-6539-89db-cd0c-d8bad0ddf03c.png)

仮想マシンの世代を選択
CentOS7や.isoからの起動は第2世代でもサポートされているのが、今回は第1世代を選択（ていうか第2世代の仮想マシンが良くわからな。。。）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621838/9ad81b96-5188-a860-1af6-320f6e67efd3.png)


仮想マシンに割り当てるメモリを設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621838/1cd7e8b6-1ce6-d3a7-9943-5b20577b8218.png)

仮想マシンからネットワークに繋げるなら「Default Switch」を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621838/8e3ec90a-9090-5865-3302-7d7c28c004e2.png)

仮想マシンのハードディスク設定を行う
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621838/f15cf92b-8b02-cc5a-6cba-636f09b1ea86.png)

インストールオプションでインストールしたいOSの.isoイメージを選択
今回は冒頭で用意していた「CentOS-7-x86_64-DVD-1908.iso」を使用する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621838/7738eb3e-8bd3-9c47-d692-bd21816c59de.png)

最後に設定を確認し、良ければ「完了」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621838/a3cfb888-eeea-7831-380b-e93671816d85.png)

Hyper-Vマネージャーに作成した仮想マシン名が表示されているので、ダブルクリック
![仮想マシン.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621838/9c737063-3b71-e308-439b-add9c2148a5a.png)

仮想マシンの起動画面が表示されたらOK
![仮想マシン接続.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621838/c97c7a6b-d845-670a-a37c-edfde5dedc1d.png)

CentOS 7のインストールは以下の記事を参考にしてください
[CentOS 7 起動時設定](https://qiita.com/eiji-noguchi/items/e9a6cb5085cf9d18e95c)