OmniAICreator/Qiita-1.07M huggingface dataset:
【Swift】mutatingとstaticについて

#はじめに
今回はメソッドやプロパティによってインスタンスの値が変更される場合に用いられる、mutatingと全てのインスタンスから共通して利用したい場合に用いられるstaticについてみていきましょう。

#mutating
先ほど、メソッドやプロパティによってインスタンスの値が変更される場合に用いられる、mutatingと言いましたが、実はこれ、構造体（struct）についてのみつけるキーワードになります。つまり、クラスには必要ありません。
例を見ていきましょう。

```swift
struct Clock {
    var hour = 0
    var min = 0
    mutating func advance(min: Int) {
        let m = self.min + min
        if m >= 60 {
            self.min = m % 60 // インスタンスの値が変更されている
            let t = self.hour + m / 60
            self.hour = t % 24 // インスタンスの値が変更されている
        } else {
            self.min = m // インスタンスの値が変更されている
        }
    }
    mutating func inc() {
        self.advance(min: 1)
    }
}
```

プロパティを直接書き換えるメソッドの`advance(min:)`にmutatingをつけています。さらに、そのメソッドを呼び出している`inc()`メソッドにもmutatingが必要です。
mutatingをつけていないと以下のようなエラーがでてきてしまいます。
![スクリーンショット 2021-04-12 13.12.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/954451/a76783b2-a155-cc93-c141-00067711bf0d.png)


#static
staticがついたメソッドをタイプメソッドといいます。
staticは全てのインスタンスから共通して利用したい場合に用いられます。

```swift
struct SimpleDate {
    var year: Int
    var month: Int
    var day: Int
    static func isLeap(_ y: Int) -> Bool {
        return (y % 4 == 0) && (y % 100 != 0 || y % 400 == 0)
    }
    static func daysOfMonth(_ m: Int, year: Int) -> Int {
        switch m {
        case 2: return Self.isLeap(year) ? 29 : 28 // isLeap(year)だけでもいい
        case 4, 6, 9, 11: return 30
        default: return 31
        }
    }
    func leapYear() -> Bool {
        return SimpleDate.isLeap(year) // 構造体名.タイプメソッド
    }
}
```


staticのついたプロパティやメソッドにアクセスするときは、`構造体名.タイプメソッド`などのようにしますが、同じ構造体内でstaticプロパティやメソッドどうしにアクセスする場合は`Self.タイプメソッド`やSelfの省略もできます。

```swift
//isLeapもdaysOfMonthもstaticで同じ構造体なので、構造体名やSelfは書かなくても良い
static func daysOfMonth(_ m: Int, year: Int) -> Int {
    switch m {
    case 2: return isLeap(year) ? 29 : 28
    case 4, 6, 9, 11: return 30
    default: return 31
    }
}
```
しかし、`daysOfMonth`メソッドのstaticをとると以下のようなエラーになり、`Self.isLeap()`にするか、`SimpleDate.isLeap()`にしないといけません。
![スクリーンショット 2021-04-12 13.36.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/954451/93122fa1-21de-c913-3c37-89f9a95f294f.png)

同様の理由で、`leapYear()`メソッドには構造体名またはSelfが必要になります。


#おわりに
おわりです。
Git のやさしい解説

# ONION 研究会 2021/4/11
[ONION](https://www.facebook.com/ONION-107310827459074/)では Web Cloud AI IoT の技術研究を行っています
プログラミングの実践や 自由な情報交換を通して 個々のスキルアップを目指します

## 質問コーナー

### Git とは なんですか？
Gitは ソースコードや さまざまなファイルの 変更履歴を残しておくためのツールです
世界中のソフトウェア開発の現場で使われています

&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;![hoge](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/345860/117cefb0-273e-a95a-74d2-e77352d3a176.png)


Gitは無料で使えますが Gitをもっと便利に使うための機能が追加されたサービスがあり そちらは一部有料のものもあります

プロジェクト内で利用することもできますし
GitHub・GitLab・Bitbucket などのサービスで プロジェクトのソースコードを公開して 世界中の人に開発を手伝ってもらうこともできます
このときに 業務情報や 個人情報を誤って公開してしまう危険性があるので 十分注意しましょう

### GitHub・GitLab・Bitbucket とは なんですか？
![git_services_logos.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/345860/75f48465-0dbf-3e82-8397-cbe7b824ed8c.png)

Gitにさまざまな機能を追加したサービスの名前です
同じ技術を元にサービスを展開しているので どれでも同じようなことができます

携帯電話で例えると

- Git -> 電話やメールなどの通信技術
- GitHub・GitLab・Bitbucket -> DoCoMo・au・SoftBank などのサービス

サービスごとに特徴があるので 自分のプロジェクトにあったものを選びましょう

### コメント とは なんですか？
Gitのコメントは どんな変更をしたかを記録しておくために利用します
「このコードは いつ 誰が なんのために 変更したんだっけ？」を知りたいときに ログを確認することができます


#### 変更例
![git_diff.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/345860/e0073408-6b06-ef5e-f08a-409c3b46b961.png)

#### コメントのイメージ
```
2000/01/01 user_name
[add] 画像を追加しました
```

コメントの記載内容に決まりはありませんが プロジェクト内では書き方を統一するべきです
プロジェクトに参加する場合は そのプロジェクトのルールに合わせましょう

新規プロジェクトの場合は[こちら](https://qiita.com/itosho/items/9565c6ad2ffc24c09364)が参考になります

### ブランチ とは なんですか？
Gitのブランチは これから作業する内容に 名前をつけて管理するために利用します
一つの課題ごとにブランチを作成し その中で変更を行うことで どの課題の作業をしているかを 見える化 できます

また ブランチを活用して 複数人で一つのソースコードを 分担して変更する事もできます
このときに ソースコードの変更履歴が枝分かれすることからブランチと名付けられています

&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;![git_branch.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/345860/4bc903d6-d022-eba1-94a6-21e6895e65b9.png)

ブランチの作成方法にも決まりはありませんが プロジェクト内で規則を作ってきちんと守りましょう
このブランチ作成の規則のことを ブランチ戦略 といいます
新規プロジェクトの場合は[こちら](https://qiita.com/trsn_si/items/cfecbf7dff20c64628ea)が参考になります

## 活動内容
### プログラミングの実践
プログラミングは 実際に手を動かして学習するのが効率的です

テキストや スクールで学べることも たくさんありますが
プログラミングの難易度が上がるほど わからないことが増えていきます

現場経験を重ねるのが 収益的にも 学習的にも 理想的なのですが
自分の能力以上のプロジェクトだと業務が大変になり
自分の能力以下のプロジェクトだと学びが少なくなります

ONIONでは オリジナルのプロジェクトを立ち上げ
メンバーのスキルレベルより少し難易度の高いクエストを担当してもらうことで 個々の能力向上を目指しています

現在は 下図のスキルセットで Webシステム開発の 技術研究を行っています
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;![study_theme.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/345860/6f716c3c-ad73-75a9-d88e-6d8302952134.png)
First exercise creating neovim plugin with Lua

I'm very exited with neovim, it's possible the version 0.5 to be released this month.
and also I want to cooperate with a new feature on the [vista](https://github.com/liuchengxu/vista.vim/issues/396#event-4577918697) plugin

today I was working recreating this exercise
https://dev.to/2nit/how-to-write-neovim-plugins-in-lua-5cca

My repo: https://github.com/roberbnd/nvim-git-files-commit

## Resume
- using require'VALUE'.gitFilesCommit(): VALUE has to be the same name as it has the file .lua
    - File plugin/nvim-git-files-commit.vim:10 

Learned functions under **vim.api**
https://neovim.io/doc/user/api.html

- nvim_call_function
- nvim_command
- nvim_create_buf
- nvim_buf_add_highlight
- nvim_buf_set_keymap
- nvim_buf_set_lines
- nvim_buf_set_option
- nvim_get_current_line
- nvim_get_option
- nvim_open_win
- nvim_win_close
- nvim_win_get_cursor
- nvim_win_get_width
- nvim_win_set_cursor
- nvim_win_set_option
【MYSQL】SELECT時のDuplicate entryエラー

※現象としては再現可能で回避方法もわかっていますが、なぜエラーになるのかは理解できていません。
MySQL5.6.4では発生しなかったため、MySQL5.7か8起因（5.7では未検証）かと考えられます。

# 実行環境

- Amazon RDS for MySQL(バージョン8.0.21)
- インスタンスタイプ:db.r6g.large
- ストレージ：汎用100GB
- クライアント：Sequel Nightly Build(5446)



# データ準備

例えば次のようなテーブルを準備します。

```sql:
CREATE TABLE `orders` (
  `user_id` varchar(10) DEFAULT NULL,
  `order_id` int DEFAULT NULL,
  `date` date DEFAULT NULL,
  `money` int DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

INSERT INTO `orders` (`user_id`, `order_id`, `date`, `money`)
VALUES
	('AAA',1111,'2021-03-01',1000),
	('AAA',2222,'2021-03-02',2000),
	('AAA',3333,'2021-03-03',3000),
	('BBB',4444,'2021-03-01',2000),
	('BBB',5555,'2021-03-02',4000),
	('BBB',6666,'2021-03-03',8000);

CREATE TABLE `order_detail` (
  `order_id` int DEFAULT NULL,
  `unit_price` int DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

INSERT INTO `order_detail` (`order_id`, `unit_price`)
VALUES
	(1111,500),
	(2222,1000),
	(3333,3000),
	(4444,2000),
	(5555,2000),
	(6666,8000),
	(1111,500),
	(2222,1000),
	(5555,2000);

CREATE VIEW order_detail_view as select 
 order_id,
 unit_price,
 "不明" as item_category
FROM order_detail
;

```

# エラーになるときの書き方

目的としては、似たようなデータ（例えばECの売上など）で、
こちらのデータにはAという項目があるけどこちらには無い、
というようなデータ間での差を構造として共通化することで、同じSQLで様々なデータの分析をできるようにするためです。
構造をあわせるにあたり、VIEWを使用すればテーブルをいじらなくて済むので良いかなと考え、
存在しない列をVIEW内でダミーとして作成しています。
ただ、次に示す通り、VIEWかどうかは関係が無いようです。

```sql:エラー

SELECT 
 item_category,COUNT(*)
FROM 
 orders a
LEFT JOIN 
 order_detail_view b 
ON 
 a.order_id = b.order_id
GROUP BY 
 b.item_category;


#このようにVIEWにしなくてもエラーになる
SELECT 
 item_category,COUNT(*)
FROM 
 orders a
LEFT JOIN 
 (SELECT 
   *,"不明" AS item_category #ここが問題
  FROM 
   order_detail) b 
ON 
 a.order_id = b.order_id
GROUP BY 
 b.item_category;

>Duplicate entry '' for key '/rdsdbdata/tmp/*****.<group_key>'
#*****の部分にはなにかIDのようなものが入っていますが、何が載ってるか不明なのでマスクしています。

```

このような書き方をするとエラーが発生します。
ダミーとして作った列をGROUP BYで指定し、かつカウントを取ろうとしていました。
これがダミーでなければitem_categoryごとの件数を取得するものになります。

# 回避方法
### 1.文字列ではなくNULLや空文字にする
"不明"のような文字列ではなく""やNULLを指定すると集計できます。

### 2.ダミー列を先に内部でJOINする
このように一度括ってしまえばエラーになりません。

```sql:
SELECT 
 item_category,COUNT(*)
FROM 
 orders a
LEFT JOIN 
 (SELECT 
   * 
  FROM 
   order_detail
  JOIN 
   (SELECT "不明" AS item_category)q1 #この部分
  ) b 
ON 
 a.order_id = b.order_id
GROUP BY 
 b.item_category;
```

### 3.LEFT JOINじゃなくINNER JOINにする
1のLEFT JOINをINNER JOINにすると動きます。


# 実行計画
実際に動かすとエラーにはなりますが、実行計画は見ることができます。
ここで見る限りおかしな点が見当たりません。

```sql:
EXPLAIN
SELECT 
 item_category,COUNT(*)
FROM 
 orders a
LEFT JOIN 
 (SELECT 
   *,"不明" AS item_category
  FROM 
   order_detail
  ) b 
ON 
 a.order_id = b.order_id
GROUP BY 
 b.item_category;

```

|id|select_type	|table|partitions|type|possible_keys|key|key_len|ref|rows|filtered|Extra|
|-|-|-|-|-|-|-|-|-|-|-|-|
|1|SIMPLE|a|NULL|ALL|NULL|NULL|NULL|NULL|6|100.00|Using temporary|
|1|SIMPLE|order_detail|NULL|ref|order_id|order_id|5|テスト用.a.order_id|1|100.00	|Using index|
EC-CUBE4系 商品詳細ページのフリーエリアを上部に移動と擬似フリーエリア拡張する方法

今回、管理画面のみで簡単にできる、商品詳細ページのフリーエリア移動と、拡張方法をご紹介します。
まずは、管理画面の商品詳細編集で、記載可能なエリア3種類のご紹介。

- 商品説明・・・商品詳細ページのカートボタンの下に、簡易説明を掲載
- 商品説明（一覧）・・・商品一覧ページの、各商品に簡易説明を掲載
- フリーエリア・・・商品詳細ページの下に掲載

![img01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/668571/596d6985-87d3-4a9b-fa32-b0cded5a60e6.png)

今回の記事では、
「フリーエリアを下ではなく、上に移動する方法」
「商品説明（一覧）を活用して擬似フリーエリアを商品詳細ページに追加する方法」
をご紹介します。

![img02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/668571/fbc45424-ba2c-65d6-e225-acf99749780b.png)

## フリーエリアを下ではなく、上に移動する方法
デフォルトでは、商品詳細ページの下にあるフリーエリアですが、楽天やLP構成のように、商品の魅力を先に伝えたい場合、フリーエリアを上に持って行きたくなります。
今回は、[コンテンツ管理]>[ページ管理]>[商品詳細ページ]のソースコードを一部編集し、フリーエリアを上に持ってくる簡単な方法になります。

フリーエリアは、[コンテンツ管理]>[ページ管理]>[商品詳細ページ]の一番下までスクロールした、376行目あたりある以下のコードになります。

``` php
  {% if Product.freearea %}
     <div class="ec-productRole__description">
       {{ include(template_from_string(Product.freearea)) }}
     </div>
  {% endif %}
```
上記をカットし、
216行目あたりの`<div class="ec-productRole">`と `<div class="ec-grid2">`の間にペーストしてくだい。

``` php
{% block main %}
    <div class="ec-productRole">

## ↓↓↓↓この部分にペースト↓↓↓↓

    {% if Product.freearea %}
       <div class="ec-productRole__description">
                 {{ include(template_from_string(Product.freearea)) }}
      　</div>
    {% endif %}

## ↑↑↑↑この部分にペースト↑↑↑↑

    <div class="ec-grid2">

```

![img03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/668571/4071450f-96cb-a535-a327-f898edde5bee.png)


以上でフリーエリアが、商品詳細ページの上部に設置できました。
余白などはCSSで調整してください。

## 商品説明（一覧）を活用して擬似フリーエリアを商品詳細ページに追加する方法
続いては、商品説明（一覧）の項目を、擬似フリーエリアとして流用する方法になります。
注意点として、こちらは商品一覧ページに説明を記載しない場合のみの方法となります。
強引な方法ではありますが、機能カスタマイズせず、管理画面から活用できるアイデアとしてご参考にしてください。

まずは[コンテンツ管理]>[ページ管理]>[商品一覧ページ]の156行目あたりにある商品説明（一覧）用のコードをカットします。
登録ボタンを押して、保存を忘れないようにお願いします。

```php
{% if Product.description_list %}
   <p>{{ Product.description_list|raw|nl2br }}</p>
{% endif %}
```
続いて[コンテンツ管理]>[ページ管理]>[商品詳細ページ]の編集画面に移動し、
216行目あたりの`<div class="ec-productRole">`と `<div class="ec-grid2">`の間にペーストしてくだい。
※上部の擬似フリーエリアとしたい場合の例なので、別の場所に挿入したい場合は、任意で変更してください。

その際に一部編集しておきましょう。
まずpタグで囲まれている部分、HTMLの入れ子構造上、他タグが入れにくいのでdivタグに変更します。
さらに、`Product.description_list|raw|nl2br`の末尾の`|nl2br`も消しておきます。
これがついていると、入力時に改行した部分が、勝手にbrタグが挿入され出力されるので邪魔になります。

```php
{% block main %}
    <div class="ec-productRole">

## ↓↓↓↓この部分にペースト↓↓↓↓

    {% if Product.description_list %}
       <div>{{ Product.description_list|raw }}</div>
    {% endif %}

## ↑↑↑↑この部分にペースト↑↑↑↑

    <div class="ec-grid2">
```
divタグには、またご自身でCSS用のクラス指定など行ってください。

![img04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/668571/396498d5-4935-d17b-61a4-51172b6fc5ff.png)

補足：`Product.description_list|raw`の`|raw`って何？
twigはHTMLコードをエスケープ（HTMLが使えなくなる）する仕様になっており、
HTMLタグを使用できるようにするために、rawというtwigフィルターが記載されています。
Herokuデータベース内の行数が増えた時の対処(cloud9)

###※DBに会員データなどが保存されていない（テスト運用中など）場合の対処です。
#### Database disruption imminent, row limit exceeded for hobby-dev database
いきなりHrokuから【[warning] Database disruption imminent, row limit exceeded for hobby-dev database…】とメールがきました。
翻訳したところ、「データベースの中断が差し迫っています。hobby-devの行制限を超えています。」とのことです…
```heroku pg:info```で中身を確認します。

```
=== DATABASE_URL
Plan:                  Hobby-dev
Status:                Available
Connections:           0/20
PG Version:            13.2
Created:               2021-03-17 01:49 UTC
Data Size:             10.5 MB
Tables:                10
Rows:                  10668/10000 (Above limits, access disruption imminent)
Fork/Follow:           Unsupported
Rollback:              Unsupported
Continuous Protection: Off
Add-on:                postgresql-curly-61190
```
すでに超えています…
まだテストデータを保存したりしたくらいなのに、なぜか…
調べてみると、データベース内の全件削除などをすると、行数がかさんでいくとの事でした。

####解決策
メールにはHooby Basicプランに変更するよう書かれていましたが、まだ誰も使っていないのと、お金を掛けたくないので、データベースのリセットをしました。  
ターミナルで以下を実行
```heroku pg:reset DATABASE```
To proceed, type…と出るので、herokuのアプリ名を入力し実行  
・再度データベースを構築
```heroku run rails db:migrate```  
・確認
```heroku pg:info```

```
=== DATABASE_URL
Plan:                  Hobby-dev
Status:                Available
Connections:           0/20
PG Version:            13.2
Created:               2021-03-17 01:49 UTC
Data Size:             8.6 MB
Tables:                10
Rows:                  17/10000 (In compliance)
Fork/Follow:           Unsupported
Rollback:              Unsupported
Continuous Protection: Off
Add-on:                postgresql-curly-61190
```
スカスカに戻りました（笑）
WindowsにNode.jsをインストールせず、また環境変数の設定を変更せずにNode.js + React環境を構築する方法

# 目的
Node.jsを利用する機会が増えてきたが、会社のパソコンはセキュリティ上インストーラーを利用して自由にソフトをインストールすることが出来ない。
その為、インストーラを利用せずにNode.jsを構築する必要がある。
方法を調べたのでその内容を簡単に以下に纏める。

# 手順
## node.jsのZipをダウンロードする
＜ダウンロードサイト＞
https://nodejs.org/ja/download/
ここでは現時点(2021/04/12)での最新のLTS「v14.16.1」を利用することとする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/204260/c070cdf5-10c5-b7f1-9e47-437abe15e1be.png)

## 適当なフォルダにダウンロードしたzipを展開する
ここでは、「C:\00_myspace\node-v14.16.1-win-x64」に展開するものとする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/204260/9060585f-c889-b99c-d919-a5b0836ef7bc.png)

## コマンドプロンプトを起動して、フォルダを関係変数パスに設定する
``` コマンド
set PATH="C:\00_myspace\node-v14.16.1-win-x64";%PATH%
```

## 展開したフォルダに移動する
``` コマンド
cd C:\00_myspace\node-v14.16.1-win-x64
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/204260/e12d065a-e8e6-5b4e-bbd3-0980848b1b6f.png)

## reactをインストールする
```コマンド
npm install -g create-react-app
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/204260/99571900-aeba-bda7-6b43-f39208a93a6f.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/204260/128fef5f-52b5-6d58-4f85-4a9363723e5a.png)

## 引き続きコマンドプロンプト上でreactプロジェクトを作成する
```コマンド
create-react-app testreact
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/204260/bc5615a7-3d60-67da-38a7-c1963114ef68.png)

## 作成したフォルダへ遷移する
```コマンド
cd testreact
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/204260/2370216f-9676-524b-43bd-267ede447544.png)

## サーバーを起動する
```コマンド
npm start
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/204260/778ff0f2-ddd7-0570-deb3-c7347b1d010b.png)
   
これで構築は完了
Salesforce CLI(SFDX)の組織認証でTIMEOUTする際の対処法

# 事象
SFDXで組織認証のコマンドを叩くと、localhostのポート1717へのリダイレクトが失敗して認証自体も失敗する。
開発環境はWindows 10とPowerShell 5.1である。

```powershell
PS > sfdx force:auth:web:login -r https://test.salesforce.com -a sample@sample.com
ERROR running force:auth:web:login: connect ETIMEOUT XXX.XXX.XXX.XXX:443
```

# 結論
自分の場合は下記の環境変数を設定することで解消した。
変数値はサンプルであり、本来は実際のプロキシサーバーのアドレスを入れる。

```powershell
# .NETのライブラリを使用してプロキシサーバーのアドレスを出力
PS > $WebProxy = [System.Net.WebRequest]::GetSystemWebProxy()
PS > $WebProxy.GetProxy("https://google.com") | Select -ExpandProperty OriginalString
http://proxy.com:8080

# 上記で出力したアドレスを環境変数「HTTP_PROXY」に設定
PS > $env:HTTP_PROXY="http://proxy.com:8080"
# HTTPS用の環境変数はプロトコルをHTTPSにする
PS > $env:HTTPS_PROXY="https://proxy.com:8080"
```

改めて認証用のコマンドを叩くと、組織認証に成功する。

```powershell
PS > sfdx force:auth:web:login -r https://test.salesforce.com -a sample@sample.com
Successfully authorized sample@sample.com with org ID XXXXXXXXXXXXXXX
You may now close the browser
```

ログイン用に開かれたブラウザ画面は閉じてしまって良い。

なお、**上記の環境変数はセッション中に限り有効**である。
他のセッションやVisual Studio Codeの拡張機能を利用した認証の場合、
下記のコマンドを使用して上記で設定した値を環境変数として永続化する。
コントロールパネル経由で設定してももちろんよい。

```powershell
# 管理者権限でPowerShellを開くこと
PS > [System.Environment]::SetEnvironmentVariable("HTTP_PROXY", "http://proxy.com:8080", "Machine")
PS > [System.Environment]::SetEnvironmentVariable("HTTPS_PROXY", "https://proxy.com:8080", "Machine")
```

**システム環境変数を設定したら、PCを再起動すること。**

上記以外には下記の対処法があるらしい。

- SFDXをバージョンアップする
- 認証時に入力するSalesforceのドメインを「私のドメイン」にする （XXX.my.salesforce.comのようなURL）
- 認証時にコールバックされるURLのポート番号を1717以外に設定する

# 原因
OAuthによる認証の過程でlocalhostの1717番へリダイレクトされるが、プロキシがあるせいでうまく遷移せずタイムアウトするのが原因だと思われる。

# 参照
- [会社のファイアウォールまたは Web プロキシの背後からの Salesforce CLI の使用](https://developer.salesforce.com/docs/atlas.ja-jp.sfdx_setup.meta/sfdx_setup/sfdx_setup_install_cli_firewall.htm)
- [一番分かりやすい OAuth の説明
](https://qiita.com/TakahikoKawasaki/items/e37caf50776e00e733be)
Xplentyで2FAを有効化する

二要素認証(2FA)は、ユーザーがログインを完了するために2つの異なる要素を必要とする認証方法です。

最初の要素は通常、ウェブサイトのユーザーのパスワードであり、2つ目の要素は通常、ユーザーが所有するデバイス上で生成されたワンタイムパスワードで、Xplentyではタイムベースのワンタイムパスワード方式を採用しています。2つ目の要素は通常、ユーザーにとってよりユニークなものや個人的なものであるため、攻撃者がパスワードを知ってしまってもログインできないことになります。

2FAコードを生成するには、Google Authenticator、Authy、またはSalesforce Authenticatorなどのアプリを使用できます。2FAをオンにすると、ログインページでパスワードを送信した後、ログインするたびに2FAコードの入力を求められるので、モバイルのアプリでコードを確認し、入力することでログインすることが可能です。

#Xplentyで2FAを設定するには？
Xplentyアカウントで2FAを有効にするには、Settingページに進み、「Your Setting」セクションの配下にある2-Factor Authをクリックします。現在のパスワードを入力し、「Enable Two-Factor Aunthentication」ボタンをクリックすると、有効化のための設定画面が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/65461/8d5ccee2-ad59-5f12-fc03-a1d3f88d7e6a.png)

##有効化設定画面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/65461/4dab051c-efee-959e-310a-d4d121a95307.png)

###手順1. モバイルデバイスへのアプリのインストール
もし、2FAに対応したアプリがモバイルにまだインストールされていない場合、Google Authenticator、Authy、またはSalesforce Authenticatorなどお好みのアプリをインストールください。

###手順2. QRコードのスキャン
お使いのコード生成アプリケーションでQRコードをスキャンするよう求められます。お使いのアプリケーションがQRコードの読み取りに対応していない場合でも、2FAシークレットの手動入力に対応している場合は、青色の「the secret key」の文字をクリックすると、必要なシークレットテキストが表示されます。



QRコードをスキャンするか、認証アプリに2FAシークレットを入力すると、Xplentyがアプリに表示され、数字のコードが表示されます。このコードをXplentyの2FA設定ページで入力します。このコードは生成されてから約30秒間しか有効ではありません。

画面下部の「Enable Two-Factor Aunthentication」ボタンをクリックすると、2FAの登録が完了します。コードが受け付けられなかった場合は、モバイルのアプリでコードが再生成されるのを待って、新しく生成されたコードを使用して試してください。

#2FAの設定について
2FAは**それぞれのユーザーごとに**設定いただく必要があります。


#2FAデバイスの変更
ある時点で、2FAコードを生成するデバイスを変更したいと思うかもしれません。このような場合は、まず前述の「Setting」ページで2FAを無効にする必要があります。その後、新しいデバイスで2FAを再度有効にしてください。

###2FA変更時の注意点
- 2FAを登録した後は、以前と同じQRコードや秘密のテキストを見ることができなくなるということです。また、2FAコードを新しいデバイスに「転送」することもできません。

- 2FAが有効になっている場合、Authenticatorアプリを削除したり、コード生成デバイスを交換したりすると、Xplentyアカウントにログインできなくなりますので、Xplentyサポートまでご連絡ください。

#2FAデバイスの紛失
2FAデバイスを紛失または破損した場合、または2FAコードを生成できない場合、Xplentyのダッシュボードにまだログインしている状態であれば、ダッシュボードにアクセスして、先ほどの設定画面から2FAを安全に無効にすることができます。必要なのは現在のログインパスワードだけです。

2FAアクセスを失った場合、パスワードをリセットしないでください。パスワードをリセットすると、すぐにXplentyからログアウトしてしまい、2FAを無効にすることができません。万が一、2FAによりXplentyアカウントからロックアウトされてしまった場合はサポートに連絡してください。
【DRF】Django REST FrameworkのSerializerの引数、特にcontextについて

こんにちは、増山です。最近はDjango REST Frameworkを使ってiOS, React.js用のバックエンドを書いたり、Dockerを詳しく調べたりしています。
Django, Django REST Frameworkの構造を深くまで知りたくてソースコードを読むのが趣味です。

## Serializerのcontextって何？
今回のテーマは、DRFのデータのシリアル化に使われる```Serializer```の```context```について理解することです。出てくる単語の簡単な説明も交えて説明していきたいと思います。

## Serializerとは？
Serializerは、アプリケーションが送受信するデータをバリデートし、さらにシリアル化してくれるものです。ただし、ここで言うシリアル化については、Serializerのみではバイト列にはならず、単一の辞書型、またはリスト型(many=Trueのとき)の文字列に変換することになります。Serializerについての詳しい記事も今後書こうと思っているのでそこでソースコードやドキュメントを見ながら具体的に説明したいと思います。

## Serializerをインスタンス化する際の引数
```serializer = Serializer(instance, data=data, partial=True)```
や、
```serializer = Serializer(queryset, many=True)```
などのように、Serializerをインスタンスかする時には必要な引数があります。

dataには、例えばPOSTされたデータをrequest.dataなどから取得して格納することで、Serializerがis_valid()を呼べるようになり、データバリデートすることができます。
このまま説明し続けると脱線しすぎてもう一回線路に乗るくらいの大脱線をしそうなので、ここら辺の解説も他の記事に書こうと思います。

## context引数について
本題です。
```context```を引数に含めるパターンは大きく分けて2つあります。

1. Hyperlink系のSerializerの機能を使っているとき
2. requestなど、何かしらの情報をSerializer内部で使いたいとき

## 1. Hyperlink系のSerializerの機能を使っているとき
Serializerで明示的にcontext使ってないのになんでcontext渡さなきゃいけないの？って思ったときは大抵の場合これです。

drfでは、レスポンスに含めるデータとして、オブジェクト自身のurlを使うことができます。

drfの公式ドキュメントにも書いてありますが、そのときSerializerは、正しくURLを表現するためにViewが受け取るrequestオブジェクトを必要とします。

## 2. requestなど、何かしらの情報をSerializer内部で使いたいとき
単純なコンテキストの受け渡しにももちろん使うことができます。やり方は、Serializerをインスタンスかする時に、
```serializer = Serializer(context={'名前': 渡したいデータ})```
として、Serializer内部では、
```self.context.get('名前', デフォルト値)```
とするだけです。

## 終わりに
DRFは、ドキュメントがすごくしっかりしているので読めば大体わかると思います。初めて記事を投稿するので、ここが良くないとかここが良いとか教えていただけるとありがたいです。すぐに改善します。

公式ドキュメント：[Django Rest Framework](https://www.django-rest-framework.org/)
PhpStorm でペアプロが捗る共同編集機能使ってみた（Code With Me！）

# これは何

PhpStorm 2021.1 で導入された、Code With Me 機能を使ってみました。
自分のPhpStormのファイルたちを、他の人がリアルタイムでいじることができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144064/30188508-b1ba-716b-d30e-034bc4e3b1a0.png)



# 早速使ってみました！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144064/0bf66cbe-2d33-847a-483c-36b268b88599.png)

### 使い方

* 招待する人も、招待される人も新しいPhpStormにする
* ホストになる人が権限設定して招待URLを発行する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144064/4d816c01-a282-7105-a55f-1f58a2050fe2.png)

* ゲストになる人はURLクリックする
* ホストになった人はAcceptする
* マイクや映像は画面上部のアイコンから on/off
* 画面上部のアイコンから、編集中の人にfocusすることができる。強制的に「自分のところをみろ！」もできる

### 感想

今まではペアプロやるにしても Google Meet や Around の画面共有で、口頭で「こここうやって直してください」とか話していたのが、「こうやって書くといいですよ」 と見せるのが簡単になります。コミュニケーションコストが下がりそうです。
最高！

あとは、別のファイルを編集することも可能なので、一人がテスト書いて、一人が実装かいて、みたいなこともできそうです。最高！

### 使ってみてわかった問題点

* 日本語入力はちらつくのでいまいち。また、同時編集に向かない。アルファベット入力は概ね問題なし。
* 音声や画像のトラブルあり。繋ぎ直すと大体治った。
* 特定のマイクではPCごと落ちるケースも。
* ホストは人が入るたびに accept するのが面倒
Ansible lvgモジュールのパラメータ

#lvgモジュール
##公式
https://docs.ansible.com/ansible/2.9_ja/modules/lvg_module.html#

公式サイトでは、

|パラメータ|意味|
|--|--|
|vg_optitons | Additional options to pass to vgcreate when creating the volume group.|
と書かれているが、書き方が乗っていない。。
Exampleにも例がのっていない。優しくない。

検証したところ、下記のように指定可能。

```
- name: タイトル
  lvg: vg名
  pvs: デバイス名
  vg_options: "オプション␣値"
```

一例)

```
- name: vgcreate_task
  lvg: volumegroup02
  pvs: /dev/sdc
  vg_options: "--addtag tag1"
```
postgresのdockerコンテナを作るときに出たエラー

# エラー内容

```
...

db_1  |
db_1  |
db_1  | /usr/local/bin/docker-entrypoint.sh: running /docker-entrypoint-initdb.d/init.sh
db_1  | /usr/local/bin/docker-entrypoint.sh: /docker-entrypoint-initdb.d/init.sh: /bin/bash: bad interpreter: Permission denied

...
```

# 原因と解決策
原因はホストのinit.shの実行権限がないためでした。そのため下記のコマンドを実行後にdocker-compose up -d する必要がありました。

```
chmod a+x ./docker-entrypoint-initdb.d/init.sh
```

コンテナの方でinit.shが権限ないのかなと思い試行錯誤していたため、解決に少し時間がかかってしまいました。。。
[Swift] 高階関数に利用できる高階関数なnot関数


## これはなに？

趣味の世界です。


## 問題

Arrayをfilterする時に使用するFilter用の関数を用意しています。

```swift
func isValid(_ i: Int) -> Bool {
  i > 0 && i <= 100 || i > 1000
}
```

これでvalidな要素のみの配列が取得可能です。

```swift
let validItems = array.filter(isValid)
```

このとき同時にvalidではない要素も取得したいとします。普通に書けばこうなります。

```swift
let invalidItems = array.filter { !isValid($0) }
```
対称性が崩れて見えて気持ち悪いですね。

## 解決策

問題を解決するために not関数を用意します。

```swift
func not<T>(_ condition: @escaping (T) -> Bool) -> (T) -> Bool {
    { !condition($0) }
}
```

これを利用すると、validではない要素の取得はこうなります。

```swift
let invalidItems = array.filter(not(isValid))
```

対称性が保たれましたね。


## おまけ

この not関数はこのままで2変数関数（多変数関数）に対して利用可能です。
またオペレータも関数の一種ですので利用可能です。

```swift
let a = (0..<100).shuffled()

print(
    zip(0..., a)
        .filter(not(==))  // OK
)
```
Ruby: ファイルのアップロード (cgi)

![upload_ruby.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/01ea1ef6-ce34-7f50-d258-06b2708c8b10.png)


```html:upload_ruby.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>upload ruby (Apr/12/2021)</title>
</head>
<body>
<h2>HTML5</h2>
<form method="post" action="upload_ruby.rb" enctype="multipart/form-data">
<input type="file" name="files"  multiple>
<p><input type="submit" value="送信する"></p>
</form>

<blockquote>
<p>File is uploaded to ./data_work.</p>
<p>複数のファイルのアップロードができない。</p>
</blockquote>
<hr />
Apr/12/2021 AM 08:25<p />
</body>
</html>
```

```rb:upload_ruby.rb
#! /usr/bin/ruby
# -*- coding: utf-8 -*-
#
#	upload_ruby.rb
#
#					Apr/12/2021
#
# --------------------------------------------------------------------
require "cgi"
# --------------------------------------------------------------------
form = CGI.new
print "Content-type: text/html\n\n"
print "Now Uploading...<br />"
print form.keys
print "<br />"
print form.params
print "<br />"
print "*** aaaa ***<br />"
print form['files']
print "<br />"
print form['files'].length
print "<br />"
print form['files'].class.to_s + "<br>"
print form['files'].original_filename + "<br>"
#
#
output_dir = "./data_work"
open(output_dir + "/" + form['files'].original_filename, "w") {|fh|
	fh.write form['files'].read
}
#
print "Upload End"
# --------------------------------------------------------------------
```
Anaconda Navigator で Jupyter labが開けない　WIN10

Anaconda.NavigatorでJupyter labをlauchすると下記のエラーがでて起動できなかった件

##Error executing Jupyter command 'lab': [WinError 5] アクセスが拒否されました。

---
【対策】
Anaconda Promptを管理者権限で実行してターミナルを起動し、
Prompt上でjupyter lab を叩いたら起動しました。

おわり
ビット演算を使った2のn乗の計算（備忘録）

# 2のn乗の計算
普通に計算する場合math.Pow(2,n)を用いたり実際に掛け算を行うなどをするが、ビット演算を用いる方法が存在する。今回用いるビット演算はビット列をずらすものである。

# << ビット左シフト
2乗の計算においては<<を用いる。これを用いてビット列を左に動かすことによって、2 のn 乗の計算を行うことが出来る。例を挙げると4は二進数の場合100 であるこれを左に一つずらして後ろにゼロが入ることで1000 になるこれは10 進数では8になる。よって一つビットをずらすことで2 が掛け算が行われたことになる。これを用いて2 のn乗を計算する。

```
1 << n
//math.Pow(2,n)と同じ結果になる。
// nビット左にシフトが行われる。
```
【React】useStateで直前のデータを保存しつつ、新しいデータを挿入する方法

React学習で頭がパンクしていくのを防いでいくために今日もアウトプットします。

Reactの非常に便利な``useState``

Vueを使った後だとReactは本当に保守性に優れているなと日々感じます。

そんな``useState``で直前のデータを保存しつつ新たにデータを挿入する方法をお教えします。

やり方としては**スプレッド構文**というものを使います。

とりあえず例を見ていきましょう！

```jsx
const [students, setStudents] = useState([])

setStudents(prevState => [...prevState, {name: 'Taro', gender: '男'}]);
```

このように``prevState``を引数にとり、``...prevState``（スプレッド構文）を使って直前のデータを引き取りそのまま追加しています。

これを行わないと``students``の中身が全て初期化されて上書きされてしまうのでとても役に立つっていう話です。

まぁこんな感じで今日のアウトプットは終わります。

Thank you for reading
【Android】selector内の画像サイズを指定

少し詰まったので自分用メモ
# selectorのサイズ指定
drawable内のxmlファイルでselector内の画像サイズを指定するには、`<item>`内に`<layer-list>`, `<item>`を作成してwidth, height, drawableを指定。
`<selector>`直下の`<item>`にwidth, heightを指定しても私の環境では反映されなかったので注意
(drawableは反映された)。

```smple.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
	<!--ここでwidth, heightを指定しても反映されない-->
	<item android:state_checked="false">
		<layer-list>
			<!--ここでwidth, heightを指定-->
			<item
				android:width="20dp"
				android:height="10dp"
				android:drawable="@drawable/icon_off"/>
		</layer-list>
	</item>
	<item android:state_checked="true">
		<layer-list>
			<item
				android:width="20dp"
				android:height="10dp"
				android:drawable="@drawable/icon_on"/>
		</layer-list>
	</item>
</selector>
```

以上になるが、selector以外の場合も補足(drawable,shape)。

# drawableのサイズ指定
```sample.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
	<!--ここでwidth, heightを指定-->
	<item
		android:width="20dp"
		android:height="10dp"
		android:drawable="@drawable/icon"/>
</layer-list>
```

# shapeのサイズ指定
```sample.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
	   android:shape="oval">
	<solid android:color="@color/color"/>
	<!--ここでwidth, heightを指定-->
	<size
		android:width="20dp"
		android:height="10dp"/>
</shape>
```
Dockerの環境構築でエラー文`find_spec_for_exe': Could not find 'bundler' の解決方法

#Docker
ローカルでは環境構築はうまく言ってるが
Dockerで環境を作成する際に

`docker-compose run web rails new . --force --database=mysql --skip-bundle`
を実行すると
エラー文が以下のように出た。

```zsh:
/usr/local/lib/ruby/2.6.0/rubygems.rb:283:in `find_spec_for_exe': Could not find 'bundler' (2.2.15) required by your /hogehoge/Gemfile.lock. (Gem::GemNotFoundException)
To update to the latest version installed on your system, run `bundle update --bundler`.
To install the missing version, run `gem install bundler:2.2.15`
        from /usr/local/lib/ruby/2.6.0/rubygems.rb:302:in `activate_bin_path'
        from /usr/local/bin/bundle:23:in `<main>'
```



#　解決策
## Dockerにbundlerがインストールされてない。
`RUN gem install bundler`を追記すればいいとのこと。

`gem install bundler:2.2.15`と出ているがローカル環境にはbundlerはあるのになぜ・・・・
と思ったら
Dockerにbundlerがインストールされてないため出ているエラーだった。

Dockerfileに上記の記述を追記し、コマンドを再度打つことでエラーが解決できた。
10週間の学習で制作中のポートフォリオ(未経験者)

## 📗Dialy 
日記アプリ
![オリアプ 一覧画面.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1058366/3bf3fef6-b011-5174-afc1-d381fa69f37d.jpeg)
## 📱機能一覧
|  機能              |    概要                           |
|------------------ |---------------------------------- |
| ユーザー管理機能     | 新規登録・ログイン・ログアウトが可能    |
| 投稿機能            | タイトル・日記・画像が投稿可能         |
| 投稿詳細表示機能     | 日記の詳細情報が閲覧可能              |
| ユーザー詳細機能     | 各ユーザーの全ての投稿が閲覧可能       |
| 投稿編集・削除機能    | 投稿の削除と編集が可能               |
| 投稿・更新日表示機能  | 投稿詳細画面で投稿、更新日を表示       |
| EC2サーバー         | 画像をAWSのEC2で保存                |
| コメント機能         | 投稿詳細画面でコメントが可能          |
|ページネーション機能   | 投稿数が増えると一覧画面下に次ページ表示|
|画像複数投稿機能       |POSTとEDITから画像を複数枚投稿可能    |
|投稿検索機能          |一覧画面の検索窓からタイトル名で検索可能 |
## 🍎開発環境
* VScode
* Ruby
* Rails
* mysql
* JavaScript
* gem
* heroku


##📖参考資料
1冊ですべて身につくHTML & CSSとWebデザイン入門講座
Typescriptの絶対パスImport利用時にESLint + Prettier + import sortのAuto Formatをいい感じにする

## 概要
Typescriptの絶対パスImportを利用しているときに、
`ESLint` + `Prettier` + `import sort`の構成でAuto Formatが思った通りに並ばなかったため、
その悪戦苦闘の結果を残します

`絶対パスImport`と`ESLint + Prettier + import sort`の構成については
詳細を説明しませんが、実装の参考例を貼っておきます
[[React][TypeScript]絶対パスでimportできるようにする](https://qiita.com/ozaki25/items/0b13b7dc8230a43f9e7b)([@ozaki25様](https://qiita.com/ozaki25))
[ESLint + Prettier をセットアップするといつも苦しむからちゃんと理解する (2020年10月版)](https://qiita.com/motch0214/items/6da3288063abed34ccb0) ([@motch0214様](https://qiita.com/motch0214))

## 事象

``` こうありたいという例.ts
// [external, internal, sibling]のグループに分離する

import { Column, Entity, JoinColumn, ManyToOne, PrimaryGeneratedColumn } from 'typeorm'; // external

import { UserEntity } from '@/entities/User'; // internal

import { CorporationDbModel } from './Corporation'; // sibling
```

``` 現実.ts
// @から始まるinternalだと思うimportがexternalに含まれてしまう

import { UserEntity } from '@/entities/User';
import { Column, Entity, JoinColumn, ManyToOne, PrimaryGeneratedColumn } from 'typeorm'; // ここまでexternal

import { CorporationDbModel } from './Corporation'; // sibling
```

## やったこと
eslintの設定で`import/internal-regex`を追加する。以上
https://github.com/benmosher/eslint-plugin-import/blob/master/README.md#importinternal-regex

``` .eslintrc.js
module.exports = {
  settings: {
    'import/internal-regex': '^@',
    // 以下割愛
  },
  // 以下割愛
};
```

## おまけ
`import sort`のgroup(外部パッケージ、内部パッケージ、同一ディレクトリなど)の順番を変えたい場合は以下を参照
https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/order.md#groups-array
個人的には以下の並びが外部->内部という並びの直感に合うと思っています

``` .eslintrc.js
module.exports = {
  rules: {
    'import/order': [
      'warn',
      {        
        groups: ['builtin', 'external', 'internal', 'parent', 'sibling', 'index', 'object'],
        // 以下割愛
      },
      // 以下割愛
    ],
    // 以下割愛
  },
  // 以下割愛
}
```
portsnap が更新しない場合の対処法

2021/3/31 以降 subversion での ports skeleton の更新が停止てしたので、git への移行作業が必要となった。

注：2021/4/15 時点で skeleton 全ての更新が入り問題なく portsnap も利用可能の模様。

#今までの手順
```text
# portsnap fetch update
```

#これからの手順
ユーザランドには執筆時点でコマンドの用意がされておらず、devel/git をインスコするハメになるが、ビルドに時間が掛かるし、同期以外のコマンド (commit や merge 等 ) が不要なので、 src や ports の同期専用のサブセット的な net/gitup をインスコする。

```text
# cd /usr/ports/net/gitup && make install
```
必要であれば /usr/local/etc/gitup.conf を適宜書き換えるがデフォルトではブランチが無いって文句言われるけ、その辺りを書き換える。

```text:ワンライナーで勝負😏
# sed 's|master|main|' /usr/local/etc/gitup.conf.sample> /usr/local/etc/gitup.conf
```

```diff:参照鯖を標準(github.com→git.FreeBSD.orgへ+おまけ)
--- /usr/local/etc/gitup.conf.sample
+++ /usr/local/etc/gitup.conf@@ -10,13 +10,15 @@
 	},
 
 	"ports" : {
-		"host"       : "github.com",
-		"repository" : "/freebsd/freebsd-ports.git",
-		"branch"     : "master",
+		"repository" : "/ports.git",
+		"branch"     : "main",
 		"target"     : "/usr/ports",
 		"ignores"    : [
 			"distfiles",
 			"packages",
+			"INDEX-*",
+			".snap",
+			".sujournal",
 		],
 	},
 
```
以前は初期化としての御呪いが一度だけ実行しないと更新作業が出来なかったが、
git に変わってからは初回の御呪いは不要じゃが、index が自動生成しよらんけ、御呪いが毎回必要となる。

```text:御呪い
# gitup ports
# cd /usr/ports && make fetchindex
```

#web 閲覧も url 変更
これは、コミットログの参照先の url 変更なので、ブックマークの変更だけで🆗

[subversion 
https://svnweb.freebsd.org/](https://svnweb.freebsd.org/)

[git 
https://cgit.freebsd.org/](https://cgit.freebsd.org/)

当分の間は subversion のコミットログ閲覧は可能だと思われるのじゃが、陳腐化しよっって行けば無くなるじゃろな😢
注：謎の更新停止時期に対するアナウンスが見つからんかったのじゃが、とりま、gitup 移行への手順書として残しておく✌
注２：gitup.conf 記述に間違いがあったけ、修正と薄っすら追記💦
Vue.jsで同一コンポーネントへの遷移なんだけど、transitionアニメーションは発生させたい

##動機

下記のようにコンポーネントを切り替えている場合に、同一コンポーネントに遷移してtransitionアニメーションを発生させたい。

```vue:Main.vue
<transition>
  <component :is="currentComponent"></component>
</transition>
```

例えば、商品詳細画面で商品Aから商品Bに切り替える場合。
例えば、ページの下の方から上の方に戻るだけなんだけど、アニメーションを発生させないといけない場合。

コンポーネントにkey()を実装してみてもkey()はリアクティブでないので、値を変更しても反応しなくて困っている。

```js:Component.vue
export default {
  key() {
    // 商品IDなど、一意な値を返す
  }
}
```

##解決方法

&lt;component&gt;に:keyを設定する。

###パターン1: 商品詳細画面で商品Aから商品Bに切り替える場合

```vue:Main.vue
<transition>
  <component :is="currentComponent" :key="currentKey"></component>
</transition>
```

```js:Main.vue
export default {
  computed: {
    currentKey() {
      // 商品IDなど、一意な値を返す
    }
  }
}
```

###パターン2: ページの下の方から上の方に戻るだけなんだけど、アニメーションを発生させないといけない場合

前提として、&lt;component&gt;には複数の異なるコンポーネントが入る。
そのうちの一つに関して、タイトルに示した要求がある。

```vue:Main.vue
<transition>
  <component :is="currentComponent" :key="currentKey"></component>
</transition>
```

```js:Main.vue
export default {
  computed: {
    ...mapState(['currentKey'])
  }
}
```

```js:Component.vue
export default {
  methods: {
    ...mapMutations(['incrementCurrentKey']),
    moveToTop() {
      this.incrementCurrentKey();
      // ここにトップに戻るアニメーションを実装
    }
  }
}
```

currentKeyをstoreに突っ込んで、上に戻るボタンを押されたときに更新してやればよい。

ポイントとして、incrementCurrentKeyの呼び出しは上に戻るボタンを押したときだけでよい。
&lt;component&gt;に:keyを設定すると異なるコンポーネントに切り替えたときもincrementCurrentKeyの呼び出しが必要な気がしてしまうが、何とそのようなことはない。
5分で出来るかな? React/TypeScript/Next.js/Material-ui プロジェクトテンプレートの簡単な作り方


# はじめに
React/TypeScript/Next.js/Material-ui のプロジェクトテンプレートがあれば便利かなと思ったので作ってみました。
あと、手順をまとめれば5分で出来ると思ったのでやってみました。
いってみよう。


## 完成形はこれ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112011/af2f09b4-3cae-67b5-98c9-d99e0c2e9b64.png)

## 環境
```zsh
% sw_vers
ProductName:	Mac OS X
ProductVersion:	10.15.7 # Catalinaさん
BuildVersion:	19H2

% brew -v
Homebrew 3.0.11

% nodebrew -v
nodebrew 1.0.1

% node -v
v14.16.1

% yarn -v
1.22.10
```

# 開始
## 1． Next.js/TypeScript プロジェクトの作成
1-1． 開発用のディレクトリ作るよ（ご自由にどうぞ）

```zsh
mkdir ~/Development
```
1-2． ディレクトリ移動するよ

```zsh
cd ~/Development
```
1-3． Next.js/TypeScript プロジェクトの雛形を作るよ

```zsh
yarn create next-app react-sample-app --example with-typescript
```

ここまでですでに3分半経過してます。yarn(^q^)

1-4． ディレクトリ移動するよ

```zsh
cd react-sample-app
```
1-5． sample-app ディレクトリの中身はこうなってるよ

```zsh
.
├── .git               # ギットさん
├── components         # UIコンポーネント置き場
├── interfaces         # 共有インターフェース置き場
├── node_modules       # このプロジェクトで利用するモジュール達
├── pages              # サイトページ置き場
├── utils              # 共通関数などなど置き場
├── .gitignore         # イグノアさん
├── README.md          # リードミーさん
├── next-env.d.ts      # Next.jsタイプがTypeScriptコンパイラによって確実に取得されるようにします。ですって
├── package.json       # このプロジェクトで利用するモジュールを管理するやつ1
├── tsconfig.json      # TypeScriptの設定ファイル 
└── yarn.lock          # このプロジェクトで利用するモジュールを管理するやつ2
```
1-6． 動かしてみるよ

```zsh
yarn run dev
```
1-7． http://localhost:3000/ にアクセスしてみるよ （これを触ってソース見るだけで勉強になるよ）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112011/3b804de6-42ba-0111-2ff7-f3688568304c.png)

1-8． 停止するよ

```zsh
control + c
```

## 2． Material-UI を使うよ
### Material-UI を Next.js の SSR に対応させてくよ

2-1． Material-UI をインストールするよ

```zsh
yarn add @material-ui/core @material-ui/icons
```

2-2． theme.ts を作成するよ, ソースは[こちら](https://github.com/ytamayose/react-sample-app/blob/main/components/theme.ts)を参照

```zsh
vi components/theme.ts
```
2-3． _app.tsx を作成するよ, ソースは[こちら](https://github.com/ytamayose/react-sample-app/blob/main/pages/_app.tsx)を参照

```zsh
vi pages/_app.tsx
```
2-4． _document.tsx を作成するよ, ソースは[こちら](https://github.com/ytamayose/react-sample-app/blob/main/pages/_document.tsx)を参照

```zsh
vi pages/_document.tsx
```

### ドロワー付きヘッダーを作成するよ
2-5． components/Layout.tsx を修正するよ, ソースは[こちら](https://github.com/ytamayose/react-sample-app/blob/main/components/Layout.tsx)を参照

```zsh
vi components/Layout.tsx
```

## 3． 起動, Finish!!
```zsh
yarn run dev
```

# 結果発表
![IMG_2C9243B62AAB-1.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112011/d100e7a6-efc0-8d20-78f1-5e950060a450.jpeg)

我が家のネットワークが遅かったぁ(^q^)
でも少ない手順でここまで出来るのは便利ですね

# 最後に
ソースはご自由にお使いください

https://github.com/ytamayose/react-sample-app.git
IPアドレスの制限を設定する際に詰まりました。

先日とあるAPIを叩くためにIPアドレスで制限をかける機会がありました。
当方はMACを使用しているので、その際にシステム環境設定のネットワーク設定内に書いてあるIPv4アドレスを指定しました。
しかし、該当のAPIを叩くことができませんでした。IPアドレスは合っているのになぜだ！ということで色々調べたところ、IPアドレスには2つ種類があることが発覚しました。

##IPアドレスの種類
①グローバルIPアドレス
サイトを閲覧したりメールを送ったりと外部との情報の受け渡しに必要。
ちなみに以下サイトで端末のIPアドレスを確認できます。

https://www.cman.jp/network/support/go_access.cgi

②ローカルIPアドレス
社内LANのようにインターネット接続が必要ないプライベートネットワークで使用できる。
（MACの環境設定から見れるアドレス）

基本的にはIPアドレスはグローバルIPアドレスを指すみたいです。
しかし私はローカルIPアドレスで制限をかけようとしていたのでAPIの設定ができませんでした。

もし同じような境遇の方の助けになれば幸いです。

参考サイト（詳しく説明されているのでぜひ見てみてください）

https://www.youtube.com/watch?v=hD_qCiNywKQ
Pandasの結果を 表示する行(column)・列(row)の数のカスタマイズ方法　.no.39

![見出しを追加 (99).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011305/6777e78c-f59f-4d64-2b9a-b824ce96ced9.png)

こんにちは、まゆみです。

Pandasについての記事をシリーズで書いています。

今回は第39回目で、最終回になります。(また新しい情報が入れば、その時は記事を書きますね。)

今回の記事では、<font color="Red">Pandasの結果の表示をカスタマイズする方法</font>を書いていきます。

今までに大きなデータを扱って、表示される部分が大きいなと感じた事はありませんか？

例えば、下記のようなデータとか...

![スクリーンショット 2021-04-12 074618.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011305/d927f4ab-3285-2bcd-f166-9b9264e7e069.jpeg)

>row を最初と最後の３つづつ表示したい

>column を5つづつ表示したい

>逆に省略(...で中間を抜かずに)せずに全て表示させたい

という時に使えるアトリビュートを紹介します

では、さっそく始めていきますね。

#numpy を使って、大きなデータを作る

実験用データをnumpy を使って作りました。

![スクリーンショット 2021-04-12 075749.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011305/0db59300-cf76-e001-01da-461edd6186a1.jpeg)

#コラムの最大表示数を取り出す

```
pd.options.display.max_columns
```

と打ち込むと表示されているコラム数が取り出されます。

また、『pd.options.display...』って長くて覚えられないっていう人も大丈夫です。

忘れたら、<font color="Red">アトリビュート名.(ドット)　まで入力した時点で『Tab』キーを押しましょう。</font>
候補を出してくれます。(最初のpd.option くらいまでは覚えておいた方が良いかもですが。。。)

![スクリーンショット 2021-04-12 080542.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011305/ba4c8d59-b68b-06e0-c6b6-6a762d5bbbd2.jpeg)


20のコラムが最大表示されているとの結果が出ました。

これは多すぎると感じる時は、

例えば『10』を代入します。

![スクリーンショット 2021-04-12 081459.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011305/ecdfd508-0d78-d0f2-3047-0436faeb4dde.jpeg)

前後が5づつの最大コラム数が10で表示されました。

もしcolumn(行)ではなく、row(列)の最大表示数を変更したい時は

.max_columnsの代わりに<font color="Red">.max_rows</font>を使います。

#代替方法

先ほど、

```
pd.options.display.max_columns = 表示したい列・行数
```

で、表示する列・行を操作する方法を書きました。

その方法に代替するものとして

>①.get_option()

>②.set_option()

>③.reset_option()

<font color="Red">get_option("max_columns")</font>で"max_columns"数をゲット(get)して

<font color="Red">set_option("max_columns")</font>の"max_columns" 数を設定(set)してみます


![スクリーンショット 2021-04-12 084023.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011305/7f2a30aa-2ddb-27eb-2e1d-a76a182bf2b4.jpeg)

前後10づつ合計20表示されていたコラム数を

前後6づつ合計12のコラム数の表示に変えました。

![見出しを追加 (98).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011305/a767d2da-b717-34b0-383c-8c3d16dede73.png)

.reset_option()は元のデフォルト値に戻す(reset)するメソッドです。



![スクリーンショット 2021-04-12 084824.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011305/e417dbc1-462d-baea-2988-8fd6f311c531.jpeg)

12のコラム数に変えたものを再び20のデフォルト値に変えました。


#逆にrow もcolumnも全て表示したい時は？

途中が『...』で抜けているデータではなく、全て表示させたい時は

```
pd.set_option("display.max_rows", None, "display.max_columns", None)
```
で表示させることができます。

![スクリーンショット 2021-04-12 090838.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011305/b2bbba57-0f9e-d35b-9dd0-70995010d940.jpeg)

この方法については[こちらのサイト](https://www.kite.com/python/answers/how-to-print-an-entire-pandas-dataframe-in-python#:~:text=Use%20pandas.&text=Call%20pandas.,to%20be%20displayed%20when%20printed.)を参考にして解答しています

#まとめ
今回はPandasの結果の表示を変更するメソッドを紹介させていただきました。

一応、今回は最終回ですが、また新しく皆様と共有したい情報を知った時には投稿させていただきますね。

最終的なゴールは『データサイエンティストとかデータを扱うエンジニアを目指すぞ』って感じで、データサイエンティストになるために必要になりそうな情報を次回からも投稿していきます。(ちなみに次はSQLの記事を書きます)
【初心者でもわかる】「<header>」と「<div id="header">」の違いを解説

#どうも7noteです。いろいろなサイトを見ていると気になる、「`<header>`」と「id="header"」の違いについて

ヘッダーを作る際、参考に他のサイトを見ていると2種類の書き方を見かけます。

**・`<header>`**
**・`<div id="header">`**

これらの違いはなんだろう？と気になった方もいるとおもいますが解説していきたいと思います。

## 「`<header>`」と「`<div id="header">`」の違いはHTML5かそうでないかの違い

**`<header>`はHTML5でのヘッダーの書き方です。**
HTML5とは、まぁ簡単にいうとHTML界の最新型iPhoneのようなものです。これまであった機能などをより簡単に幅広く使えるようになったHTMLだと思ってください。
そして、`<header>`もHTML5から新しく作られた要素です。

逆にいえば**`<div id="header">`はHTML5が出るよりも前の主流のヘッダーの書き方**というわけです。


### ▼１番の違い

じゃあ具体的に機能としては何が違うのか。それは「**googleなどの検索エンジンのAI（クローラー）が瞬時にヘッダーだと認識できるかどうか**」の違いです。
なんのこっちゃと思う人もいるかもしれませんので、もう少し説明をいれますね。

まずgoogleなどの検索エンジンには、一般で公開されているwebサイトの構造を理解して評価し、検索結果の順位に反映をしています。これにより、ユーザーが欲しいと思った記事を上位に表示させることで、「google使いやすい、LOVE♥」となるわけです。
ではweb開発者の視点からみれば、**googleのクローラーから、より高い評価をもらわなければなりません。**
そのため、検索上位を狙うのであればクローラーが喜ぶようなタグの使い方やサイト構成を意識してサイトを作る必要があります。

これが「`<header>`」と「`<div id="header">`」の最も違う点です。

## `<div id="header">`は使ってはいけないのか？

**決して使ってはいけないというわけではありません。**ただ、少しでもgoogleからの評価を受けやすいサイトにするのであれば、ヘッダーを作る際は`<header>`を使ったほうが良いとされているという話であり、自分で好きなサイト（もしくは一般公開しないサイト等）を作る場合は正直どちらでもいいと思います。

## `<header>`の正しい使い方

基本的にwebサイトのヘッダーは1つしかありません。
そのため、**`<header>`はbodyの直下に1つだけの設定がオススメです。**

`<header>`の特性として、body以外のタグの直下で使ってしまうと、サイトのヘッダーという認識ではなく、そのタグのヘッダーと認識されてしまう可能性があります。
この辺については正直ちょっとややこしいので、はじめのうちは**bodyの直下に1つだけ`<header>`を設定するオススメ**です。

## おまけ

###  「`<div id="header">`と`<div class="header">`の違いは？」

こちらはgoogleのクローラーからの評価に大きな差はないでしょう。
ただ製作者的に**「idは1ページ内に1つ、classは1ページ内に複数可能」**という違いがあるため、制作するときに間違いのないようidで作成していることが多いという話だと思います。
ヘッダーは基本サイトに1つというルールが一般的なので、固有のものにするためidが使われていることが多いのです。
classで作ったとしても、webサイト的には普通に作れますし、見た目がそれで変わることはありません。

## まとめ

・**「`<header>`」と「`<div id="header">`」の違いはHTML5かそうでないかの違い**
・**`<div id="header">`はHTML5が出るよりも前の主流のヘッダーの書き方**
・**bodyの直下に1つだけ`<header>`を設定する**

`<div id="header">`だからといって、検索の上位に絶対でないというわけではありません。
あくまで評価の基準となる一部の指標なので、検索にヒットしやすいサイトでも`<div id="header">`で作っているサイトはあります。
ですが、**これから新しく作るサイトであれば私は「`<header>`」でヘッダーを作ることをオススメします！**

#### おそまつ！
~ Qiitaで毎日投稿中!! ~
[【初心者向け】WEB制作のちょいテク詰め合わせ](https://qiita.com/7note)
【AWS認定試験】SAP-C01落ちた話

# はじめに
先日、SAP-C01(AWS認定ソリューションアーキテクトアソシエイト)に**落ちた**ので、失敗を次回に活かすために自責の念を込めて体験記を残します。

# これまでのAWS認定受験遍歴
2020/08 AWS認定クラウドプラクティショナー(CLF)取得

2020/11 AWS認定ソリューションアーキテクトアソシエイト(SAA)取得

2021/01 AWS認定デベロッパーアソシエイト(DVA)取得

2021/02 AWS認定SysOpsアドミニストレータアソシエイト(SOA)取得

2021/03 AWS認定ソリューションアーキテクトプロフェッショナル(SAP)取得できず

# SAPとは
AWS認定試験の中で最難関と呼び声高い試験です。
2年間のAWS実務経験レベルの知識を要求されます。

> AWS 認定ソリューションアーキテクト – プロフェッショナル試験は、AWS におけるシステムの管理および運用に関する 2 年以上の実務経験を持つソリューションアーキテクト担当者を対象としています。

AWS 認定ソリューションアーキテクト – プロフェッショナル- 
https://aws.amazon.com/jp/certification/certified-solutions-architect-professional/


# 試験対策
1. Udemyで問題を解く。
1. わからないサービスのBlackBeltを読み、理解を深める。
1. 繰り返す。

というアソシエイトと同様に、物量で押し通すスタイルでやってました。
これがアダになるとは。。。

活用した問題集：

AWS 認定ソリューションアーキテクト プロフェッショナル模擬試験問題集（全5回分375問）

https://www.udemy.com/course/aws-53225/

## 試験対策の反省点
1. **模擬問題を数日に渡って解いていた**
まず、SAPの特性なのですが、問題文・選択肢がひたすらに長いです。
業後に勉強を始めるわけですが、1問1問に対するパワーが多く集中力がなかなか続きません。
また、Udemyはすべての問題(75問)が解き終わらないと答えの閲覧が行えません。
そのため、「数日に分けて問題集を解く」→「すべて解き終わったら回答を確認」ということを行っていたので知識定着率が低かったです。
(Udemyの問題の質は非常に良いのです。Udemyが悪いのではなく、集中できなかった自分が悪い。。。)

1. **AWS Organizations,AWS Direct Connect など普段扱わないようなサービスの理解不足**
AWS OrganizationsはAWSアカウント周りを管理するためのツールです。これらのツールは概念的には理解できていたのですが、実運用を想定した際のベストプラクティスがわからなかったです。
AWS Direct Connectはオンプレ環境とAWS環境は専用線で繋ぐことができるサービスです。こちらも概念的には理解していたのですが、「じゃあ複数DCからVPCに繋ぐにはどういう設定したらいいの？」といった具体的なことまでは押さえていませんでした。
試験対策を振り返るとこのあたりの理解が甘かったので、ハンズオンや解説があるならば確認し、しっかりと理解しておくべきだと思いました。

# 試験
ピアソンVUEを活用し、在宅受験を行いました。

そういえば、運転免許証をスマホで撮影する際に前はインカムしか使えなかったのが、裏のカメラも使えるようになっていました。
定期的に問題点を修正してくれるのはうれしいですね！！
おかげで撮るのがめちゃくちゃ楽になってました。

## 試験中の反省点
- **フラグの活用ができていなかった**

    SAPの試験時間は3時間,75問と長丁場になります。そのため、1問1問に時間をかけすぎないことを意識して取り組みました。
しかし、すべて解き終わった後にすべてを見直そうとしてしまい、時間をかけるべき問題に時間がかけられませんでした。
そのため、見直すべき問題には適切にフラグを付けるべきだと感じました。

- **選択肢の違いの見極めに時間がかかった**
   SAPは長文の問題に似通った選択肢があります。そのため、それぞれの選択肢の違いを見極める必要があります。パッと見て同じなので、何度も読んで理解する必要があるのですが、これは模擬問題などで経験を積み、最短時間で答えを導き出せるように訓練をしたほうが良いと感じました。

# まとめ
勉強方法は「まとまった時間で模擬問題を解きまくる」もしくは「一問一答を隙間時間に解きまくる」が効率良いのかなと思います。
そして、いまいち理解できていないサービスは適宜メモを取り、ハンズオンを行う、BlackBeltを読むなどで知識吸収を図りましょう。
試験中は選択肢の違いを意識し、時間がかかりそうな問題や自信がない問題にはフラグつけ、見直し時に多く時間をかけられるようにしましょう。

~~次回こそは合格したい！~~
後日無事合格しました
[【AWS認定試験】SAP-C01取得しました][link-1]
[link-1]:https://qiita.com/t_tsuchida/items/6678d28a746121c44da0
左右の修飾(Alt、Ctrl、Win、Shift)キーでIMEのオンとオフを切り替える

# IMEのオンとオフの切り替え
Windowsユーザーの皆さん、全角半角キーでIMEのオンとオフをトグルで切り替えていないでしょうか。
この場合、現在の入力モードがどちらになっているかをいちいち確認する必要があり、結構ストレスだったりします。
(ずっとWindowsを使っていると慣れてしまっているかもしれませんが・・・)

一方JIS配列のMacの場合、スペースバーの左右に英数キーとかなキーがあり、現在の入力モードを確認せずにIMEのオンとオフを切り替えることができます。

この記事ではWindowsでも現在の入力モードを確認せずにIMEのオンとオフを切り替える方法を解説したいと思います。

# 必要なソフト
[AutoHotKey](https://www.autohotkey.com/)というキー入力を制御するフリーソフトを使って、左右のAlt、Ctrl、Win、ShiftキーでIMEのオンとオフを切り替えられるようにします。

# スクリプトファイルの書き方
AutoHotKeyのスクリプトファイルを書きます。
スクリプトファイルの拡張子はahkです。

左AltキーでIMEをオフ、右AltキーでIMEをオンにするスクリプトファイルは下記のとおりです。
(Altキーの場合のみ、カーソルがメニューに移動する挙動を無効にする処理を入れます)

```c:alt-ime.ahk
; カーソルがメニューに移動する挙動を無効にする
*~LAlt::Send {Blind}{vk07}
*~RAlt::Send {Blind}{vk07}

; 左Altキーが単独で押された場合、IMEをオフにする
~LAlt Up::
if (A_PriorKey = "LAlt") {
    Send, {vkF2sc070}{vkF3sc029}
}
Return

; 右Altキーが単独で押された場合、IMEをオンにする
~RAlt Up::
if (A_PriorKey = "RAlt") {
    Send, {vkF2sc070}
}
Return
```

左CtrlキーでIMEをオフ、右CtrlキーでIMEをオンにするスクリプトファイルは下記のとおりです。

```c:ctrl-ime.ahk

; 左Ctrlキーが単独で押された場合、IMEをオフにする
~LControl Up::
if (A_PriorKey = "LControl") {
    Send, {vkF2sc070}{vkF3sc029}
}
Return

; 右Ctrlキーが単独で押された場合、IMEをオンにする
~RControl Up::
if (A_PriorKey = "RControl") {
    Send, {vkF2sc070}
}
Return
```

Windowsキー、Shiftキーに割り当てる場合は、「Control」の部分をそれぞれ「Win」、「Shift」に置き換えます。

作成したahkファイルそのものかショートカットをスタートアップに登録しておくとWindows起動時に有効になります。

# MacのUS配列のキーボードの場合と外付けキーボードの場合
Macでも内蔵キーボードがUS配列だったり、英数かなキーがない外付けキーボードを使う場合は、[Karabiner-Elements](https://karabiner-elements.pqrs.org/)というフリーソフトを使えば左右の修飾キーでIMEのオンとオフを制御できます。
「Mecabでの形態素解析を回避して、文字単位で、N階マルコフ連鎖で日本語文章を作成」

## 概要
日本語の文章生成を行おうとする時に、壁となるのが、形態素解析であり、そのためのMecabのインストール。
そこで、自分も含めたMecabで時間を取られてしまう初学者のために、単語による分割はせず、Mecabを利用する既存のプログラムを単語単位での処理に変えることで、Mecabをすっとばして、とりあえず文書生成を行ってみる。

基本的なプログラムとしては、
[Python]N階マルコフ連鎖で文章生成
https://qiita.com/k-jimon/items/f02fae75e853a9c02127
を参考にする。

単語単位ではなく、文字単位で、というアイデアは、
N階マルコフ連鎖によるキャラクターのセリフ自動生成器を作ってみた
https://qiita.com/takaito0423/items/1a39d790b5e5b8e4cf36
に倣った。

## 環境
Windows10
Python 3.8.5


## Mecabの処理を飛ばす
[Python]N階マルコフ連鎖で文章生成、のMecabについての処理をコメント化、もしくは別処理とする。

```python:markov_chain.py

import MeCab

    t = MeCab.Tagger("-Owakati")

        parsed_text += t.parse(one_line_text)
```

の箇所を

```python:wakati_kakazu.py

#import MeCab

    #t = MeCab.Tagger("-Owakati")

        #parsed_text += t.parse(one_line_text)
        for i in one_line_text:#Mecabでの単語ずつの入力を１文字入力へ切り替え
            parsed_text += i
            parsed_text += " "
```

とする。
def wakati(text):の中で、print(wordlist)を実行して見ると、１文字ずつのデータがリスト形式で保存されているのが分かる。

## まとめ

[Python]N階マルコフ連鎖で文章生成、と同じく「走れメロス」で文章生成をしてみる。

order = 2
[BOS]メロスだ。
[BOS]中途で倒れ伏し、残虐な気持で、わしだっている。
[BOS]ああ、こちらと君を、欺かなければ、精も根も尽きたいものも怺え、といえども、これから、間に、さんざんぶと流れを！　時は、巡邏の警吏に捕縛されたら、間もなくても、見事、対岸の樹木の幹に、わから血が噴き出て、つらかったのですがりつく事だ。
[BOS]ほうとうと長い溜息をついにきます。
[BOS]人は驚き、それはいけなく口惜しく躍り狂う。

「メロスだ。」と当人が言っているので、上手くいったみたいです。漢字だけでなく、ひらがなも、すべて文字単位で分割しているのですが、それなりの文章になっています。

order = 4
[BOS]間に、私に情を語ったが、流石に疲労困憊の姿も見える事が出来ぬ、という石工がい無い人たちは、巡邏の警吏に捕縛されなけれども私は、やった。
[BOS]王は、よろしく、渡守りの姿を見つめた。
[BOS]けれども威厳を以て問いつめているね。
[BOS]私は、六人殺されてくれ。
[BOS]先ず、かの邪智暴虐の王に、さっさと走るのだ。

「先ず、かの邪智暴虐の王に、さっさと走るのだ。」と当人が言っているので、上手くいったみたいです。メロス、走ってます。


## メモ・日本語文章を扱ってエラーが出る時に確認すべきチェックリスト

・実行するプログラムと、処理するテキストを持つファイルの文字コードは、utf8にしているか？→Windowsであれば、メモ帳で開いてみて、右下に「UTF-8」と出ていることを確認する。ANSIとなっているなら、UTF-8に変更する。メモ帳で、名前を付けて保存を実行し、下にある「文字コード」を「UTF-8」にして、ファイル名に「utf8」などを付け足して保存する。

・実行ファイルの行頭には「# -*- coding: utf-8 -*-」と書いているか？

・（今回はテキストを直にファイルにコピーして実行したのでファイル読み込みはしていないが）ファイル読み込みの際に文字コードをencoding引数として、
with open("utf8_text.txt", encoding="utf-8") as data:
と指定しているか？