OmniAICreator/Qiita-1.07M huggingface dataset:
Django REST Framework で Pagination および並べ替え

# はじめに

[Django REST Framework で API 作成](https://qiita.com/honda28/items/a179c26c2cf147a247dd)、[DRF / django-filter を使ってフィルタリング](https://qiita.com/honda28/items/ad5bff341c22f000c227)で API を作成し、フィルタリングも行えるようになった。この記事では、大量のデータに対応できるように Pagination の設定を行い、またデータの並べ替えに対応できるような設定も行った。[Pagination - Django REST framework](https://www.django-rest-framework.org/api-guide/pagination/) 、[Filtering - Django REST framework](https://www.django-rest-framework.org/api-guide/filtering/) を参考にした。

# Pagination

設定は非常に簡単で、以下をプロジェクトの settings.py に追記するだけ。

```python:settings.py
REST_FRAMEWORK = {
    'DEFAULT_PAGINATION_CLASS': 'rest_framework.pagination.LimitOffsetPagination',
    'PAGE_SIZE': 100
}
```

これで100件ごとでページが分けられる。この設定では、プロジェクト内すべての API が同じ設定となるが、個々で変えたりといろんなカスタムもできるらしい。

# データの並べ替え

views.py にて、ViewSet のアトリビュートとして __filter_backends__ と __ordering_fields__ を追記することでデータ並べ替えに対応できる。以下で例として用いている views.py は[Django REST Framework で API 作成](https://qiita.com/honda28/items/a179c26c2cf147a247dd)、[DRF / django-filter を使ってフィルタリング](https://qiita.com/honda28/items/ad5bff341c22f000c227)で作成したものを用いている。コードは以下。

```python:views.py
from .models import Info
from .serializers import InfoSerializer
from rest_framework import viewsets
from rest_framework import filters               # 追加

class InfoViewSet(viewsets.ReadOnlyModelViewSet):
    queryset = Info.objects.all()
    serializer_class = InfoSerializer
    filterset_fields = ['id']
    filter_backends = [filters.OrderingFilter]   # 追加
    ordering_fields = ['id']                 # 追加
```

これにより、id を用いてデータの並べ替えができる。昇順で並べ替えする場合のリクエストは `http://localhost:8000/api/info/?ordering=id` となる。降順で並べ替えする場合のリクエストは`http://localhost:8000/api/info/?ordering=-id` のようにフィールド名の前に __'-'__ をつける。

（2021/5/6 追記）
[DRF / django-filter を使ってフィルタリング](https://qiita.com/honda28/items/ad5bff341c22f000c227)では、settings.py にて 'DEFAULT_FILTER_BACKENDS' を追記することで指定フィールドによるフィルタリングを行っていたが、上記で並べ替え設定をしたところ、フィルタリングが使用できなくなった。おそらく個々の ViewSet での設定が全体設定を上書きしてしまい使用できなくなったと想定される。指定フィールドによるフィルタリングおよび並べ替えの両方を適用する場合は、以下のように個々の ViewSet にて filter_backends を指定してやればよい。

```python:views.py
from .models import Info
from .serializers import InfoSerializer
from rest_framework import viewsets
from django_filters.rest_framework import DjangoFilterBackend         # 追加
from rest_framework import filters

class InfoViewSet(viewsets.ReadOnlyModelViewSet):
    queryset = Info.objects.all()
    serializer_class = InfoSerializer
    filterset_fields = ['id']
    filter_backends = [DjangoFilterBackend, filters.OrderingFilter]   # 追加
    ordering_fields = ['id']
```

# おわりに

API に関する基礎的な設定ができたので、次は React で作成したフロントエンド側から実際に API を叩いてデータを取得できるか試す。
VBAマクロで体裁を整える

#はじめに
システム開発時にExcelで何かしらのドキュメントを残すケースが多々あると思う。
その際、保存時は以下とすることが基本だと思っている。
（個人の主観と経験則による）

- 倍率は100%
- アクティブセルはA1
- アクティブシートは左端
- スクロール位置は左上部

エビデンスのレビューで、体裁についての指摘が頻発することがある。
人間が作業をするので修正漏れも発生する。
開発規模が大きくなるほどレビュー工数がだるま式に増加するため、
保存する際にマクロで整えることも検討したい。

#コード（VBA）
```VBA
Sub manHourReduction()

    For Each Sheet In Worksheets
    
        '表示しているシートのみを対象とする
        If Sheet.Visible = True Then
            'シートを選択
            Sheet.Select
            'アクティブセルをA1へ
            Range("A1").Activate
            '倍率を100%
            ActiveWindow.Zoom = 100
            'スクロールを最左へ
            ActiveWindow.ScrollColumn = 1
            'スクロールを最上へ
            ActiveWindow.ScrollRow = 1
        End If
    Next
    '左端のシートをアクティブにする
    Worksheets(1).Activate

End Sub
```

#おわりに
ドキュメント全ブックに対してこの手のマクロを一括適応することで、
かなりの工数を削減出来るはず。
2Dキャラクターを動かす原理


【①】sprite(画像データ)を使ってゲームオブジェクト(player)を作成。

【②】playerの座標を設定する。


座標とは、
ゲームオブジェクトがシーンの中心（親がいない場合）、または親（親がいる場合）からの距離のことです。

3つの座標は以下の通りです：

Horizontal (x)：横方向
Vertical (y) ：縦方向
Depth (z)：奥行き

今回は2Dゲームなのでｚは覚えなくてオッケーです。

player の座標を設定するには：

1.  Hierarchy で、Main Camera GameObject を選択します。Inspector では、その位置が 0,0 になっているのがわかりますが、これは Unity の Main Camera GameObject のデフォルトの位置です。(今のところ、z 座標は無視してください)。

2.  x と y の値を 0 に変更します。 これで Main Camera GameObject がシーンの中心に位置するようになります。

3.  Hierarchy で、新しい Ruby GameObject を選択します。

4.  Inspector で、x の値を -2、y の値を 0 に設定します。 これで player は Main Camera と縦方向に並びますが、横方向には左側になります。（グラフの軸を考えるのに役立つかもしれません：マイナスの値はゲームオブジェクトを横軸（horizontal axis）で左に、縦軸（vertical axis）で下に移動させます）。


【③】Update 関数の調整

まずは、playerオブジェクトを動かせるようにします。

     void Update()
     {
        Vector2 position = transform.position;
        position.x = position.x + 0.1f;
        transform.position = position;
    }

変数とは？
変数とは、コンピューターのメモリの中で名前を付ける場所のことです。後で、その名前を使って、そこに保存されている値を取り出すことができます。棚の上に置かれた箱のようなもので、表に名前が書かれていて、中には値が入っていると考えてください。


Vector2 変数って何？
変数名の前の最初の単語、Vector2 は変数の型です。型は、どのようなデータを格納したいかをコンピュータに伝えるので、コンピューターはメモリの適切な容量を得ることができます。Vector2 は、2 つの数値を格納するデータ型です。横（horizontal）位置に x、縦（vertical）位置に y、奥行き（depth）に z を使用する Inspector の Transform 値を覚えておいてください。この 3 つの数字が座標を形成します。このゲームは 2D なので、z 軸の位置を格納する必要がないので、ここでは Vector2 を使って x と y の位置だけを格納します。


Equals（＝記号）について
Equals 記号は「右側にあるものを左側にあるものに格納する」ことを意味します。したがって、ここでは、Transform の現在の x と y の位置の値を格納するように位置変数に指示しています。


player の位置の取得
Transform も変数（あなたではなく Unity が作成したもの）で、スクリプトが置かれている GameObject の Transform コンポーネントが含まれています。
transform と position の間のドットを「含む」と考えると、ここでは、Transform 内に「含まれる」位置を取得しています。


まとめ
要約すると、Transform コンポーネントに含まれる position を Vector2 型の変数内に格納しています。これでメモリ内に「position」という名前の場所ができ、そこには GameObject の現在位置のコピーが入っています。


【④】GameObjectの移動
2 行目では、1 行目と同じように、何か別のものに「含まれている」ものにアクセスするためにドットを使っています：

     position.x = position.x + 0.1f;

Vector2 は 2 つの数値であるため、x と y を「含みます」。 ここでは、横位置である x の値にアクセスしています。
ゲームオブジェクトを少し右に移動させるには、x の値に 0.1 を加え、結果を x に戻します。 
これでメモリ内の位置変数に 0.1 ユニット右にある x 座標が格納されました（正の値はゲームオブジェクトを右に、負の値は左に移動します）。

【⑤】GameObjectの新しい位置を格納する
3 行目では、その新しい Position を Transform の位置の内側に格納しました：

     transform.position = position;

この行の前は、用紙の一面で数学をするように、コピーを修正していただけでした。新しい結果が得られたので、それを Transform コンポーネントに返して、ゲームオブジェクトを 0.1 ユニット右に移動させることを実際に認識させる必要があります！

コンピューターはこの関数を新しいフレームごとに実行するので、オブジェクトは新しいフレームごとに最後のフレームに比べて 0.1 ユニット右に移動します。これにより、ゲームオブジェクトが連続的に右に移動しているような錯覚に陥ります。

      超初心者復習用です。これが分からないなら多分ゲーム作れない。勉強頑張るぞ(´･_･`)b
UE4のUIをかっこ良くしたい。


https://github.com/Sythenz/UE4Minimal

![jpg](https://raw.githubusercontent.com/Sythenz/UE4Minimal/master/UE4Minimal01_02.jpg)

導入するとこんなにもシンプルなデザインになる。



##1
とりあえずgithubリンク先をクローン。

##2
下２つをバックアップ

導入したいエンジンバージョン/Engine/Content/Editor

導入したいエンジンバージョン/Engine/Content/Slate

##3

Githubから落としてきたEditorとSlateをバックアップしたフォルダに上書き。



##4
ね？簡単でしょ？
ポート10080がつながらないんだけど

「先輩、あのサーバーにアクセスできないんですけど...」
「え、できるけど?」
「もしかして、Google Chromeのベータ版に変えたからですかね?」
「仕事でベータ版を使うのはやめまし(略」
「そういえば火狐使ってる同僚も数か月前にそんなこといってて、どこかの設定をいじったとか...」
「呼んだ?」
「はい、さっきChrome更新したら鯖につながらなくなって」
「もしかして、あの**ポート10080**?」

# NAT Slipstreaming
「実はな、去年「NAT Slipstreaming」という攻撃手段が見つかってな... 要はウェブサイトがブラウザー経由でLAN内のサーバーにアクセスして、ファイアウォールの設定を変更するっていうものだ。しかもこの攻撃はCSRFとかと違って、攻撃先がHTTPリクエストを受け付ける必要はないんだ...」

NAT Slipstreamingの攻撃方法は、仕組み上はクロスサイトリクエストフォージェリ(CSRF)と似ています。

- 攻撃者がウェブサイトを設置する。
- 被害者がそれを閲覧する。
- 被害者のブラウザーが、攻撃先のサーバーにアクセスする。
- 攻撃先のサーバーの設定が変更される。

## NAT Slipstreaming: v1
古典的なCSRFは、HTTP(ポート80と443が主)サーバーを攻撃しましたが、NAT Slipstreamingは、これに限られていません。たとえば、「Session Initiation Protocol方式のリクエストをNATのポート5060に送信して、ポートを開放する」というものがあります。

しかし、ブラウザーはSIP形式のリクエストを送信できません。そのため、攻撃者のウェブサイトはHTTP POST形式のリクエストを送信します。(これは、通常のCSRFと同じです。)被害者のOSの実装側で、このリクエストが分割され、NATにはゴミと「本当のSIP形式リクエスト(のようなもの)」2つが送信されます。

なお、この攻撃ではCSRFとは違い、攻撃先のポート番号はわかっても、IPアドレスはわかりません。そのため、事前にimgタグ等を利用したタイミング攻撃で、あるポート番号が利用可能なIPアドレスを探す「逆ポートスキャン」が行われます。

## NAT Slipstreaming: v2
実はさっき述べた攻撃方法は、「バージョン1」というものです。バージョン2ももちろんあります。このバージョンでは、HTTP POSTではなくWebRTCを利用します。この方式は少しわかりにくいので、説明は省略しますが、結果は同様です。

# 対策
NAT Slipstreamingの対策は、「特定のポートへのアクセスをブラウザー側で遮断する」ことでした。Firefoxは対応に素早く、12月リリースのFirefox 84ではすでに対応されました。Firefox 85ではそれが強化され、Firefox 87ではNAT Slipstreaming v2対策も追加されました。

「特定のポート」は、[fetch()の仕様書](https://fetch.spec.whatwg.org/#bad-port)に記載されています。その中に最近、ポート10080が[追加](https://github.com/whatwg/fetch/pull/1214)されました。

「ってことは、サーバーにアクセスできるのも...」
「初期設定では、Chrome 91がリリースされるまで、ですね。その後は隣の部署からMac借りてSafariでつなぐか、それとも...」
「あ、Firefoxなら設定一個変えれば大丈夫です。」

# 回避策
## ポート番号を決める側
ポート番号に10080などの遮断される番号を使わないようにしましょう。

## アクセスする側
方法は4つあります:

1. requestsとかnode-fetchとかでアクセスする。この仕様はウェブブラウザー以外には影響しない。
2. 古いバージョンのブラウザーを使う。(やめましょう。)
3. Safariが実装するまでそっちに移行する。
4. ポート遮断を無効化する。

Firefoxでは、この対策をポート単位で無効化できます。といっても、安易な無効化はセキュリティ上の問題になるのでやめましょう。

1. (必要な場合は)上司に決裁を取ります。
2. `about:config`に行きます。お説教されても続行します。
3. 検索欄に`network.security.ports.banned.override`を入力し、文字列の規則を作成します。+ボタンを押し、「10080」と入力します。(他のポートもある場合は、`10080,6666`のようにカンマ区切り。)
4. これでアクセスできるようになります。以上。

# 参考資料
- [NAT Slipstreaming](https://samy.pl/slipstream/)とは
- [How to allow a restricted port?](https://support.mozilla.org/en-US/questions/1083282) - FirefoxのQ&A
- [Should we block port 10080?](https://github.com/whatwg/fetch/issues/1191) - WHATWG fetch仕様書のIssue
- [Chrome Status: Block HTTP port 10080](https://chromestatus.com/feature/6510270304223232)
- NAT Slipstreaming v1のCVE: [CVE-2020-26978](https://nvd.nist.gov/vuln/detail/CVE-2020-26978), [CVE-2021-23961](https://nvd.nist.gov/vuln/detail/CVE-2021-23961)
- NAT Slipstreaming v2のCVE: [CVE-2021-23982](https://nvd.nist.gov/vuln/detail/CVE-2021-23982)
ASP.NET Coreで外部認証情報をDB管理しない場合に利用すべきUIライブラリ


# 要約

ASP.NET Core Webアプリケーションを作成する際の要件として

- 外部認証を利用する
- 認証情報のDB管理はしない

この2点がある場合、認証まわりのUIには「ASP.NET Core Identity」ではなく「Microsoft Identity Web UI」を利用すべきです。

# ASP.NET Core Identity

[ASP.NET Core Identity](https://docs.microsoft.com/ja-jp/aspnet/core/security/authentication/identity?view=aspnetcore-5.0&tabs=visual-studio)は、以下の機能を提供するライブラリです。

- 認証まわりのUI
- 認証情報のDB管理

注意すべきは、このライブラリが__「認証情報のDB管理」機能の利用を前提__としている点です。

## 認証情報のDB管理機能は除外が困難

「外部認証を利用するけど認証情報のDB管理はしない」というケースにおいて、「ASP.NET Core IdentityのUI機能だけ利用してDB管理機能は無効化する」というアプローチは実装が困難です。

調べればやり方は出てくるかもしれませんが、ライブラリの内部構造に依存した作りになってしまうため、このアプローチは推奨しません。

# Microsoft Identity Web UI

認証まわりのUIだけを利用したい場合は、Microsoft Identity Web UIがオススメです。

これは[Microsoft Identity Web](https://docs.microsoft.com/ja-jp/azure/active-directory/develop/microsoft-identity-web)（OpenID Connect認証ライブラリ）に付随して作られたUIライブラリです。

## OpenID Connectの場合

外部認証のプロトコルがOpenID Connectの場合は、Microsoft Identity Webと合わせてMicrosoft Identity Web UIをそのまま利用できます。

## それ以外の場合

外部認証のプロトコルがOpenID Connect以外の場合、Microsoft Identity Webは使えないため、認証機能の実装には他のライブラリを利用することになります。

そしてMicrosoft Identity Web UIを利用する際も注意点があり、サインイン・サインアウトのリンクを作る際に「schemeパラメータ」が必要になります。

[こちらのソースコード](https://github.com/AzureAD/microsoft-identity-web/blob/master/src/Microsoft.Identity.Web.UI/Areas/MicrosoftIdentity/Controllers/AccountController.cs)にあるAccountControllerの`SignIn()`および`SignOut()`を利用するのですが、schemeパラメータを渡さない場合はデフォルトでOpenID Connectの処理をする仕様になっています。

そのため、それ以外のプロトコルを利用する場合は、schemeパラメータにプロトコルを指定してリンクを作る必要があります。具体例として、WS-Federationの場合は以下のようになります（[こちらのライブラリ](https://www.nuget.org/packages/Microsoft.AspNetCore.Authentication.WsFederation)が別途必要です）。

```diff:Pages/Shared/_LoginPartial.cshtml
+@using Microsoft.AspNetCore.Authentication.WsFederation
 // 省略
-            <a class="nav-link text-dark" asp-area="MicrosoftIdentity" asp-controller="Account" asp-action="SignOut">Sign out</a>
+            <a class="nav-link text-dark" asp-area="MicrosoftIdentity" asp-controller="Account" asp-action="SignOut" asp-route-scheme="@WsFederationDefaults.AuthenticationScheme">Sign out</a>
 // 省略
-            <a class="nav-link text-dark" asp-area="MicrosoftIdentity" asp-controller="Account" asp-action="SignIn">Sign in</a>
+            <a class="nav-link text-dark" asp-area="MicrosoftIdentity" asp-controller="Account" asp-action="SignIn" asp-route-scheme="@WsFederationDefaults.AuthenticationScheme">Sign in</a>
```
SwiftUI で ToolbarItem の色を変更する

# 実装法

以下のように直接指定してもデフォルト色から変わってくれない

```swift
ToolbarItem(placement: .navigationBarLeading){
  Button(action: {} ) {
    Image(systemName: "gearshape")
  }.accentColor(.red)
}
```

`NavigationView` に対して `accentColor` を指定するといける

```swift
NavigationView {
  // 省略 //
}
.accentColor(.red)
```





# 実装例

````swift
import SwiftUI

struct HomeView: View {

  var body: some View {
    NavigationView {
      Text("Hello")
      .navigationBarTitleDisplayMode(.inline)
      .navigationTitle("タイトル")
      .toolbar {
        ToolbarItem(placement: .navigationBarTrailing){
          Button(action: {} ) {
            Image(systemName: "gearshape")
          }
        }
      }
    }
    .accentColor(.red)

  }
}
````
![スクリーンショット 2021-05-06 16.33.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/516428/5b28ceca-4353-b027-a1ce-999daf67b26e.png)
機械学習エラー対応集

#はじめに
機械学習・データ分析のプログラミングで遭遇したエラーや警告をメモしてみました。随時更新予定です。
こういうエラーあるよ！とかこういう対処法の方がいいよ！とかあれば是非コメント下さい。

#AttributeError: 'DataFrame' object has no attribute 'as_matrix'
.as_matrixは古い仕様のものなので、.valuesを使用してください。


```python
# 警告
Python: Method .as_matrix will be removed in a future version. Use .values instead 
# エラー
AttributeError: 'DataFrame' object has no attribute 'as_matrix' 
```

**対処法**
.asmatrix()　を　.valuesに　書き換える

```python
# 書き換え前
X = df.loc[:, ['temp']].as_matrix()
# 書き換え後　　　　　　　　　　　　　　　　
X = df.loc[:, ['temp']].values
```

#ValueError: Input contains NaN, infinity or a value too large for dtype('float64').
入力データにNaNや無限大が含まれています。


```python
# エラー
ValueError: Input contains NaN, infinity or a value too large for dtype('float64').
```
**対処法**
入力データからNaNや無限大を除去する

```python
# X から NaN を含む列を削除する
X.drop(X.columns[np.isnan(X).any()], axis=1)
```

#ImportError: Install xlrd >= 1.0.0 for Excel support
xlrdがインストールされていないのでエクセルファイルが開けません。

```python
# エラー
ImportError: Install xlrd >= 1.0.0 for Excel support
```
**対処法**
xlrdをインストールする

```python
# xlrdのインストール
$ pip install xlrd
```

#ValueError: Your version of xlrd is 2.0.1. In xlrd >= 2.0, only the xls format is supported. Install openpyxl instead.
拡張子が.xlsxのエクセルファイルはこのままでは読み込めません。

```python
# エラー
ValueError: Your version of xlrd is 2.0.1. In xlrd >= 2.0, only the xls format is supported. Install openpyxl instead.
```
**対処法**
①openpyxlをインストールする

```python
# openpyxlのインストール
$ pip install openpyxl
```

②プログラムのread_excel()メソッドの第2引数にengine='openpyxl'を指定する

#UserWarning: Using a target size (torch.Size([3])) that is different to the input size (torch.Size([3, 1])). This will likely lead to incorrect results due to broadcasting. Please ensure they have the same size.
入力値の形と正解値の形が異なっているのでどっちかに合わせてください。（PyTorch）

```python
# 警告
UserWarning: Using a target size (torch.Size([3])) that is different to the input size (torch.Size([3, 1])). This will likely lead to incorrect results due to broadcasting. Please ensure they have the same size.
```
**対処法**
unsqueezeを使って入力値の形状を、N x 1 の形に変更する。

```python
# 形を変更する
y = y.unsqueeze(1)
```

#TypeError: ('Keyword argument not understood:', 'border_mode')

border_modeは古い仕様のものなので、paddingを使用してください。
(border_modeを使用しているサイトや本は情報が古い可能性が高いので、できれば別のサイトを参考にした方がいいかもです…自分はまるっと変更しました）

```python
# エラー
TypeError: ('Keyword argument not understood:', 'border_mode')
```
**対処法**
border_mode を　padding に書き換える

```python
# 書き換え前
model.add(Convolution2D(n_filter, 3,3, border_mode='same', 
                        input_shape = (1, size_img, size_img)))
# 書き換え後　　　　　　　　　　　　　　　　
model.add(Convolution2D(n_filter, 3,3, padding='same', 
                        input_shape = (1, size_img, size_img)))
```


#◆参考サイト
https://algorithm.joho.info/programming/python/pandas-as_matrix-value/

https://qiita.com/twaka/items/eb3ff958f87ca1f4c971

https://qiita.com/7110/items/557c87f806595bce70d4

https://yuki.world/pandas-valueerror-xlrd-version/

https://qiita.com/kimisyo/items/579d380b991995976f79

https://github.com/Theano/Theano/issues/6765
Windowsのbatファイルでクリップボードにテキストコピー

# やり方
なんか適当にテキストファイル作ります。

```text:hoge.txt
hoge
```

で、バッチファイルこんなの作ります。

```batch:copytoclip.bat
type hoge.txt | clip
```

hoge.txtの中身がクリップボードにコピーされます。

こっちでも同じです。

```batch:copytoclip2.bat
clip < hoge.txt
```
# 環境
Windows Vista以降なら使えるみたいですが、Windows10でしか試していません。

# 用途

パスワードマネージャであちこちのパスワード管理してるんですが、たまにパスワードマネージャが使えない場合がありますよね。たとえばパスワードマネージャ自体のパスワードとか、プロキシのパスワードとか。
そんなのに限って長くて複雑なやつつけたいし、だけど打つの面倒くさいって思ったので。

# その他

タスクバーのショートカットにでも仕込んでおくと便利です。
タスクバー右クリック > ツールバー(T)

https://www.atmarkit.co.jp/ait/articles/1903/14/news060.html
データ分析を始めよう！開発環境構築(Python,Mac)

#はじめに
データ分析に使用するPythonのライブラリをインストールします。
と言っても"pip3 install ~ "というコマンドを使用すると簡単にできます。

※Python自体の開発環境構築はこちら

https://qiita.com/nisina/items/fd98109d02967f12412e

**今回インストールするライブラリ**（これがあれば大体なんでもできるはず）
Numpy 　・・・配列同士の演算や多次元配列などの扱いに長けたオブジェクトを提供するライブラリ
Pandas　・・・PythonでデータをRDBっぽい形(データフレーム)で扱うためのライブラリ。
Scipy 　・・・科学計算・技術計算のためのライブラリ。特殊関数、最適化、統計処理など
scikit-learn　・・・分類や予測のためのモデルが詰まった機械学習用パッケージ
matplotlib　　・・・データビジュアライズツール。簡単に綺麗なグラフが描ける。




#①既にインストールしているライブラリの確認

```python
# 既にインストールしているライブラリの確認
$ pip list
```
>※ WARNING: You are using pip version~~~~ というメッセージが表示された場合は
pipをアップデートしましょう。メッセージに記載されているコマンド
（シングルクォート ' で囲われている所）を実行してください。


#②データ分析のためのライブラリをインストール

```Python
# データ分析で使用するライブラリをまとめて入れる(先ほど確認してなかったものだけでよし)
$ pip3 install numpy pandas scipy scikit-learn matplotlib

#Pythonを使ってライブラリの動作確認(例：Pandas)
$ python3
>>> import pandas as pd
```
>※ ModuleNotfoundError: No module named '_lzma' が出た場合、以下で対応

>```python
# Pythonのバージョン確認
$ pyenv versions

># インストール済みのパッケージをまとめて再インストールするための前処理
$ pip freeze > latestPackages.txt

># Pythonのアンインストール（バージョンは1行目で確認したもの）
$ pyenv uninstall 3.7.3

># xzのインストール(エラーの対処)
$ brew install xz

># Pythonのインストール
$ pyenv install 3.7.3

># パッケージの再インストール
$ pip install -r latestPackages.txt
```


#◆参考サイト
https://github.com/pandas-dev/pandas/issues/27532#issuecomment-517259553


https://qiita.com/hik0107/items/19dd2f6a4ab61ec21905
【Laravel】お問い合わせフォームに簡易なスパム対策をサクッと実装する

## やりたいこと
・必要事項を入力するとメールが送られるお問い合わせフォームを設置したが、スパムメールがたくさん来る。
・完璧じゃなくて良いので、スパム対策をあまり手をかけずにサクッと実装したい。

<img width=70% src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675596/1c6f71dd-8b01-363e-d8e2-bb016063fb22.png>
↑こんな感じのごく一般的なお問い合わせフォーム

## どんなロジックで対策するか？
・スパムを送りつけてくるのは主にスパムbotと呼ばれるもの。
・このbotは、フォーム内のすべての項目に自動的に入力して送信してくることが多い。

この特性を利用し、まずViewのformタグの中に「非表示の項目」を作り、そこに入力がある場合はスパムと判断し404に飛ばす処理をします。いわゆる簡易なHoneypot保護機能です。

## 実装手順
### ①Viewの実装
まずはViewのフォーム部分に隠し項目を追加します。名前は適当に`honeypot`としていますが、何でも良いです。
今回はFormファサードを使用していますが、htmlのformタグの場合はhidden属性で入力項目を追加します。

``` php:_contact_form.blade.php
<div id="anchor-contact" class="p-front__contact">
  <h3 class="p-front__contact-heading">下記のフォームよりお問い合わせください</h3>
    {{ Form::open(['method' => 'POST', 'url' => route('common.send')]) }}

  〜中略〜

    {{ Form::text('honeypot', '', ['style' => 'display:none']) }}
  <div class="c-button" data-type="contact">
    <button type="submit" class="check-button">この内容で送信する</button>
  </div>
</form>
</div>
```

### ②Controllerの実装
次に、送られてきたリクエストに上記の`honeypot`の値があった場合は404に飛ばす処理を追加します。

```php:commonController.php
public function send(CommonRequest $request)
{
  if (isset($request->honeypot)) {
      abort(404);
  }

〜後略〜
```
<br>
..と、これだけなのですが以上で実装は完了です。

ディベロッパーツールで隠し項目に適当な項目を入力して送信してみると、404ページに遷移するのが確認できると思います。
<br>
以上、最後までお読みいただきありがとうございました。
Freenom Not Available Problem Fix - Technical Error, Domain Cancelled

# Freenom にてドメイン名を取得できない対策

##エラー内容
Some of your domains could not be registered because of a technical error. These domains have been cancelled:

![5c3fc0c73856ba1f12b078b079a76f9f334ebe39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319183/7503142e-ffe0-1dbd-7ade-86816c482f82.png)

##　対策
正確にユーザー登録を行う。
注意点は名前や住所は頭大文字
住所の書き方はアメリカのように記述

以下間違いそうなところの正しい入力例を記載する


## 例
First Name Nao
Last  Name Kimura

Address 1
19-1 Higasiikebukuro Tosimaku

City
Tokyoto
クラウドソーシングで仕事をもらい始めた

**コードを学び始めて三か月ほど。クラウドワークスに応募したが苦戦している。**

前提知識
・HTMLかじった
・CSSかじった
・JAVESCRIPTかじった
・Rubyを少しかじった
・なかまとアプリを作って、フロントをやっていた

CWでCSSとHTMLのコーディングの仕事をもらった。しかし実際はエンブドHTMLを使っている。さらにJSと組み合わせての動作確認もしなければいけなかった。

従って、普段使っている以外の別環境の構築が必要であった。まずこれに苦戦する。普段使っていない環境について少しでも学んでいたほうがよかったと思ったし、契約前にそのことをしっかりと確認するべきだった。

さらにgitでチケットを使って開発を行っていたが、私は基本的なgitの使い方はわかるがチケットについては知らなかった。また、初めての仕事でもあり、テンパりgitでミスをしてしまった。

クラウドワークスに応募する前に知っておくべきこと＆学んだこととしては
・gitについて中級者以上にしっておくべき。特にチーム開発
・ひごろ使っていない他環境いついての知識
・いざ分からないことがあったら聞ける友人をもつ
・契約時に具体的な開発の仕方とコードの書き方、ルールを聞く

**私もかなり苦戦しています。同じようなかた、駆け出しプログラマー・エンジニアの方は一緒に頑張りましょう！**
[Flutter] フリックを上下左右する方法



みなさん　こんにちわ。　いせきです。

Flutterをやり始めてから２ヶ月くらい経過しています。長期インターンからSwiftからFlutterに切り替えました。
仕事の業務だけでなく、個人開発をすることでどんどん成長している気がします。。

手っ取り早く書きますね。



#上下左右にフリックする方法



Flutterのパッケージには色々な種類がありました。その中でも上下左右フリックができるものを紹介します。


[swipe_gesture_recognizer](https://pub.dev/packages/swipe_gesture_recognizer)


###①インストールする


```
  dependencies:
  swipe_gesture_recognizer: ^0.0.2

```

記載後に　「 pub get 」　を押すこと（押さないと、反映されない。）


###②インポートする


```
 import 'package:swipe_gesture_recognizer/swipe_gesture_recognizer.dart';
```

使用するファイルにインポートする。




###③実際に使ってみる。






```
SwipeGestureRecognizer(


   onSwipeLeft: () {
    //左にスワイプした時の動作
    },
   onSwipeRight: () {
    //右にスワイプした時の動作
    },
   onSwipeUp: () {
    //上にスワイプした時の動作
   },
   onSwipeDown: () {
    //したにスワイプした時の動作
   },
),

```


##⑤最後に

####おそらく、そのまま使ったら、どこかがエラーになるかもしれないので、Containerとかを追加してから直してみてね。始めたばかりですが、どんどん書いていこうと思うので、暖かく見守ってください。
文字をfloat: leftして、中身を縦中央に揃える

保存用

floatをつかって、別々の要素を左に寄せて、かつ寄せた要素の中の文字を中央寄せ


下記で最初は問題なかったが、アニメーションをｊｓで加えた瞬間効かなくなり、要素が改行された。

```
disply: flex;
align-items: center;
```
floatを使用し同じ段落へ持ってこようとしたが、disply: flexが打ち消され今度は中央揃えができなくなった。

```
float: left;
disply: flex;
align-items: center;
```
そこでググり、line-heightを使うことで、無事、要素を左寄せし、縦に中央寄せできた。(heightとline-heightのピクセル数は一緒)

```
float: left;
height: 〇〇px;
line-height: 〇〇px;
```
RSpec（ユーザー新規登録の結合テスト）

### 結合テストコードを書く方針
結合テストコードを書く方針は、ユーザーがたどる一連の流れを確認することです。
---

今回は、以下のexampleについてテストしました。

- ユーザー新規登録できるとき

 - 正しい情報を入力すればユーザー新規登録できてトップページに移動する
      - トップページに移動する
      - トップページにサインアップページへ遷移するボタンがあることを確認する
      - 新規登録ページへ移動する
      - ユーザー情報を入力する
      - サインアップボタンを押すとユーザーモデルのカウントが1上がることを確認する
      - トップページへ遷移したことを確認する
      - カーソルを合わせるとログアウトボタンが表示されることを確認する
      - サインアップページへ遷移するボタンや、ログインページへ遷移するボタンが表示されていないことを確認する


```ruby
RSpec.describe 'ユーザー新規登録', type: :system do
  before do
    @user = FactoryBot.build(:user)
  end
  context 'ユーザー新規登録ができるとき' do 
    it '正しい情報を入力すればユーザー新規登録ができてトップページに移動する' do
        visit root_path
        expect(page).to have_content('新規登録')
        visit new_user_registration_path
        fill_in 'ニックネーム', with: @user.nickname
        fill_in 'Eメール', with: @user.email
        fill_in 'パスワード', with: @user.password
        fill_in 'パスワード（確認用）', with: @user.password_confirmation
        expect{
        find('input[name="commit"]').click
        }.to change { User.count }.by(1)
        expect(current_path).to eq(root_path)
        expect(
        find('.user_nav').find('span').hover
        ).to have_content('ログアウト')
        expect(page).to have_no_content('新規登録')
        expect(page).to have_no_content('ログイン')
    end
  end
end
```

**以下にコードの説明をしました**

- ルートパスに実際に遷移することを表現している

```ruby
visit  root_path
```

- visitで訪れたページの中に、'新規登録'という文字列があるかを判断してる

```ruby
expect(page).to have_content('新規登録')
```

- 新規登録ページへ移動

```ruby
visit new_user_registration_path
```

- ユーザー情報を入力

```ruby
fill_in 'ニックネーム', with: @user.nickname
fill_in 'Eメール', with: @user.email
fill_in 'パスワード', with: @user.password
fill_in 'パスワード（確認用）', with: @user.password_confirmation
```
`fill_in 'フォームの名前', with: '入力する文字列'のように記述することで、フォームへの入力を行うことができます。'フォームの名前'は検証ツールにて確認しました→<label for="user_nickname>ニックネーム</label>`

- サインアップボタンを押すとユーザーモデルのカウントが1上がることを確認する

```ruby
expect{
        find('input[name="commit"]').click
        }.to change { User.count }.by(1)
```
`find('クリックしたい要素').clickと記述することで、実際にクリックができます。
expect{ 何かしらの動作 }.to change { モデル名.count }.by(1)と記述することによって、モデルのレコードの数がいくつ変動するのかを確認できます。`

- トップページへ遷移したことを確認する

```ruby
expect(current_path).to eq(root_path)
```

- カーソルを合わせるとログアウトボタンが表示されることを確認する

```ruby
expect(
        find('.user_nav').find('span').hover
       ).to have_content('ログアウト')
```
`find('ブラウザ上の要素').hoverとすることで、特定の要素にカーソルをあわせたときの動作を再現できます。今回、span要素は他でも使われているため、その親要素のuser_navクラスもあわせて指定しました。`

- サインアップページへ遷移するボタンや、ログインページへ遷移するボタンが表示されていないことを確認する

```ruby
expect(page).to have_no_content('新規登録')
expect(page).to have_no_content('ログイン')
```

`have_no_contentは文字列が存在しないことを確かめるマッチャです。`
データべースに関する用語を五文字で説明している辞書

#この記事は
学校で、データベースの学習が始まりました。
基本情報の学習で、データベースの用語は理解し、暗記しましたが、すっかり忘れてしまいました。
参考書に書き込んでいてそっちを見ればいいのですが、本を持ち歩くの面倒なので記事にしちゃおうと思います。
あと、ちゃっかり学内で重宝されるといいなぁと思ってます。
知らない用語を見つけ次第更新していきます。
自分しか分からない説明もあるかもしれないので、その時はコメントで聞いてください！

###データベース（DB）
データ箱

###テーブル
表

###レコード
行

###カラム
列

###選択
行抜く

###射影
列抜く

###結合
合体

###クエリ
命令文

###create table ”テーブル名”
表作る

###SELECT
探す

###FROM
～から

###INSERT
追加

###UPDATE
更新

###DELETE
削除

###WHERE
条件

###SQL
DB言語

###主キー
出席番号

###トランザクション
まとめ処理

###ロールバック
銀行（とかで良く使われる処理システム）

###commit
終了宣言

###排他制御
同時封じ

###デッドロック
互い待ち

###PostgreSQL
DBの一種

###マスタ
必須情報

###\d
型調べ

###character varying
可変文字列

###正規化
一箇所に

補足説明：正規化は、一つの情報が一箇所にしかないように整理することで、更新時異常を防ぐ事です。その意味での「一箇所に」です。

###非正規化
非一箇所

補足説明:正規化できていない。つまり、一つの情報が一箇所だけでなく散在しているということですね。

[非正規化の実例](https://breezegroup.co.jp/202005/database-normalization/#%E6%AD%A3%E8%A6%8F%E5%8C%96%E3%81%A8%E3%81%AF)

###主キー（候補キー）
重複しない

###第一正規化
列繰返削除

補足説明:同じカラムが存在していない状態です。つまり、列の繰り返しを削除することです。それをすぼめて換言しました。

###第二正規化
値繰返削除

補足説明：厳密には、値の繰り返しです。
###関数従属
一意的

[もっと詳しく！](https://www.fe-siken.com/bbs/0581.html)

###部分関数
部分的一意

[もっと詳しく！](https://www.fe-siken.com/bbs/0581.html)

###ALTER
列名変更

###drop table
表永久追放

###NOT NULL制約
絶対入れる

※DEFAULT値を設定すると、INSERT楽になるよ！

###一意制約
一意的

###UNIQUE
一意制約

###索引（INDEX）
目次

###PRIMARY KEY()
主キー定義

###外部キー
選択肢制限

###FOREIGN KEY
外部キー

###FOREIGN KEY()
外キー定義

補足説明：五文字にしたかったから外部キーを外キーって書きました！ｗ

###CHECK()
格納制限

###制約
表に制約

###LIKE
曖昧検索

###%
0以上任意

###_
任意一文字

###order by
並べ替え
###;
一旦区切る

###部分キー
主キ一部
補足説明：二つのカラムで、一意性が保たれる時の一つ
ToDoリスト

#概要
JSでToDoリストを作成しました。
inputに入力された値を読み取り、HTMLに反映。
完了タスクを削除するまでが一連の流れとなります。

#HTML

```index.html
<main>
  <div class="title">リスト</div>
  <div class="todo-list">
    <ul>
    </ul>

   </div>

</main>
<section>
  <input class="form" type="text">
  <button class="btn">追加</button>
</section>
```
HTMLは上記になります。
今回追加するToDoタスクはul要素に追加していきます。

#JS

```main.js
const btn = document.querySelector('.btn');

btn.addEventListener('click',() =>{ 
  const ul = document.querySelector('ul');   
  const li = document.createElement('li');
  const input = document.querySelector('.form');
  li.textContent = input.value;
  ul.appendChild(li);
  input.value = '';
  const span = document.createElement('span');
  span.textContent = '✔';
  span.classList.add('span');
  li.appendChild(span);
  span.onclick = function() {
    const listen  = confirm('削除しますか');
    if(listen === true) {
      ul.removeChild(li);
    }
  }
});
```

#1,イベント要素の取得
今回のイベントはボタンをクリックしたときになります。button要素をquerySelectorで取得して、定数btnに保存します。
要素を取得後、addEventListenerでイベントを登録します。
これでイベントを取得することが出来たので、処理を書いていきます。

#2,親要素の取得と要素の追加
今回ToDoリストを追加するのはliタグです。liタグの親要素はulになります。なので、ulタグを取得します。
親要素取得後、liタグをcreateElementで生成します。これで空のliタグが作られました。
要素が無いので、取得します。ToDoリストにはinputタグからの値を取得します。
定数inputにquerySelectorでクラスformを取得。
空のli.textContentにinput.valueを代入します。valueで値を読み込みます。
定数ulに定数liをapendChildします。
追加後、input要素を空にするためinput.valueに「''」を代入します。
上記の流れで、ToDoリストを追加することが出来ました。次に、完了したタスクを削除できるよう実装します。

#3,JSで生成された要素の削除

完了タスクを削除する実装です。
まず。liタグに「✔」を追加するためにspanタグを生成します。上記と同様にcreateElementを使用します。要素の追加も上記の通りです。
先ほどと同様の手順で要素を生成すると、タスク追加時にタスクの右隣に✔がついている段階です。
目的としては、✔をクリックしたときに削除することです。
イベントを登録します。

```main.js
const spanBtn = querySelector('span');
spanBtn.addEventListener('click',()=>{
  console.log(spanBtn);
});
```
上記のように記述すると

```
spanBtn is not defined
````
とerrorが出ます。DOM操作では、直接HTMLを操作しているわけではありません。したがって、HTML上にはspanタグはありません。
上記のようなerrorが発せられると言うわけです。

そこで下記のように記述します。

```main.js
span.onclick = function() {
  const listen  = confirm('削除しますか');
  if(listen === true) {
     ul.removeChild(li);
  }
}

//定数名.イベント =関数;
```

そして削除する前に条件分岐でユーザーに確認します。
trueであれば親要素ulから子要素liを削除します。
Oh-My-Zsh入れるとGitのエイリアスを設定しなくても使えるって、知ってる？

最近知ったんですが、`Oh-My-Zsh`をインストールすると`Oh-My-Zsh`がGitのエイリアスを設定してくれるみたいです。

```zsh
g:       $git	
gst:     $git status
gl:      $git pull	
gup:     $git fetch && git rebase
gp:      $git push	
gc:      $git commit -v
gca:     $git commit -v -a	
gco:     $git checkout
gcm:     $git checkout master	
gb:      $git branch
gba:     $git branch -a	
gcount:  $git shortlog -sn
gcp:     $git cherry-pick	
glg:     $git log --stat --max-count=5
glgg:    $git log --graph --max-count=5	
gss:     $git status -s
ga:      $git add	
gm:      $git merge
grh:     $git reset HEAD	
grhh:    $git reset HEAD --hard
gsr:     $git svn rebase	
gsd:     $git svn dcommit
ggpull:  $git pull origin $(current_branch)
ggpush:  $git push origin $(current_branch)
gdv:     $git diff -w "$@" | view -
ggpnp:   $git pull origin $(current_branch) && git push origin $(current_branch)
git-svn-dcommit-push: $git svn dcommit && git push github master:svntrunkgpa: $git add .; git commit -m "$1"; git push;
```

### おまけ
よく使う`Oh-My-Zsh`のエイリアス

```zsh
# dir名だけで移動可能 cd 不要です
$ Desktop

# コレと同じ
$ cd Desktop
```

```zsh
# dir名をtakeの後に指定するとディレクトリを作って、そのディレクトリに移動してくれます
$ take me

# コレと同じ
$ mkdir me && cd me
```
AutoLayoutの基礎の基礎の基礎

#AutoLayoutとは
AutoLayouとは、``制約を用いたレイアウト方法``です。
##制約とは
位置やサイズの決める概念です。

こんなの勉強しなくても、
UIViewクラスのインスタンスプロパティのframeで位置やサイズが決めるられるやん!!
って思ったあなたはこの記事を最後まで読むことが決まりました。
(私もそう思ってました。)

話を戻します。

制約は、__同一の階層にあるビュー__や__親子関係にあるビュー__の関係を定義できます。
(ちなみに、frameはスーパービューの座標における位置を定義できます。)

同一の階層にあるビューの関係を定義できるということは、少ないコードで画面サイズの影響を押さえながらレイアウトすることが可能になります。
(frameを用いても画面サイズの影響を抑えることができます。デバイスに応じて画面サイズを取得してif文で条件分岐してframeを毎回決めるということをすれば.......気の遠くなるお話ですね)

#AutoLayoutエンジン
私ちは、viewに対して制約式を与えることになります。
与えた制約式の連立方程式を解くことでレイアウトを決定します。これを行なっているのが``AutoLayoutエンジン``です。
(名前めっちゃかっこいい)

では具体的に、制約式とはなんなのか？見ていきましょう!

#制約式
下の図で、青枠で囲まれているのがViewBlueでオレンジ色のviewがViewOrangeだとしましょう。
viewOrangeのスーパービューがViewBlueです。
制約式は、4種類になります。
 1.viewOrange.top=viewBlue.top
 2.viewOrange.left=viewBlue.left
 3.viewOrange.right=viewBlue.right
 4.viewOrange.bottom=0.6 × viewBlue.bottom
<img width=500, src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/839966/677d29ef-c231-2d1a-9657-82016cd55c38.png">

制約式を一般化すると``y=ax+b``になります。
(具体的に、連立方程式を効率的に解くアルゴリズムは、難しくて僕には理解できなかった。)

（AutoLayouでわからないことがあったらこの基本部分に戻ってくると理解できるかも。）
Python実践データ分析100本ノック：ノック61でPulpSolverError

# 結論
PuLPをpipで入れ直す

## 躓いたエラー
ノック61の輸送最適化問題、数理モデル作成にて

```
PulpSolverError                           Traceback (most recent call last)
<ipython-input-2-28e0cbb39044> in <module>
     25 for j in range(nf):
     26     m1 += lpSum(v1[i,j] for i in range(nw)) >= df_demand.iloc[0][j]
---> 27 m1.solve()
     28 
     29 # 総輸送コスト計算 #
```

## 原因
下記の`conda`コマンドで`pulp`をインストールしていた

```
conda install -c conda-forge pulp
```

## 解決方法

`pulp`の確認

```
$ conda list
```

```
pulp                      2.4              py38h50d1736_0    conda-forge
                                                             ^^^^^^^^^^^
```

`pulp`を一旦削除

```
$ conda remove pulp
```

`pip`で`pulp`を再度インストール

```
$ pip3 install pulp
```

`pulp`を再確認

```
$ conda list
```

```
pulp                      2.4                      pypi_0    pypi
                                                             ^^^^
```

## 参考記事
[How to debug most errors during solving](https://coin-or.github.io/pulp/guides/how_to_debug.html)
初心者がファビコンを作ってみた

## ファビコンとは
favicon（ファビコン）は「Favourite icon（お気に入りのアイコン）」の略で、アドレスバーやブラウザのタブ、スマートフォンやタブレットなどでWebページを"ホーム画面"に置いた際に表示されるアイコンなどを指します。

## 主なサイズ

16px × 16px：IE タブ
32px × 32px：Chrome、Firefox、Safari などのタブ
64px × 64px：Windowsデスクトップアイコン
180px × 180px：iPhone＆iPad
など。

今回は初めてなので、とりあえず **32px × 32px**だけで作成しました。
この辺りは余裕が出てきたら色んなサイズにも対応していきたいです。

## デザイン
デザインアプリやウェブブラウザでまずはデザインを作成する。
私は自分のリングネームにちなんでこのようなデザインを作成してみました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/825163/ad9d6b67-e2f0-57d5-f81e-25bef75e6978.png)


**SHU**だけに**Shoe**(片方の靴)。。。
空調の音は響き渡りましたでしょうか？

## 気をつける点
デザインを作成する上で気をつける点としては大きく以下の２点が挙げられます。

- アイコンはとても小さいのでシンプルなデザインを心がける事
- 統一感を持たせるために、アイコンのカラーとアプリのテーマカラーを揃える事


##フォーマットの変換
今回はこちらのサイトを利用して、サイズとフォーマットを変更しました。
>[ファビコン favicon.icoを作ろう!](https://ao-system.net/favicon/)

サイト内で拡張子をicoに変更し、出来上がったファイルをpublicフォルダ直下に置きました。
32pxだと分かりやすくする為に、ファイル名をfavicon32.icoとし、
headダグの中で以下の記述をします。

```react:index.html
<link rel="icon" href="%PUBLIC_URL%/favicon32.ico" />
```

## 結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/825163/ba7eb0a0-0b24-137f-44c9-fb22187aeed8.png)
これを使って
↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/825163/ba505dda-dd0c-1096-fd29-3517a256e838.png)
こう！

ひとまず初めてファビコンを作成から設定まで出来ましたが、他にももっと良いやり方があればぜひ教えてください。
Railsの設計思想「CoC」について

##はじめに

まずRailsには設計思想として3つ強く打ち出しています。
1. CoC　(Convention over Configuration）
2. DRY (Don’t Repeat Yourself）
3. REST（Representational State Transfer）

今回は**1**のCoCについて解説したいと思います。

##CoCとは
直訳すると「設定より規約」という意味になります。例えばユーザー情報を表現するモデルをUserモデルとした場合、Railsでは以下の様なルールに則って開発します。

* データベースのテーブル名はモデル名の複数形にする(Users)
* /usersというURLはユーザーの一覧を表す
* ユーザーID:1のユーザー情報を表すURLは/users/1になる

上記の様なルールで書くとそれぞれに細かく設定を紐付ける作業を省略できます。
「便利ですね〜」
またこれらの規約に従うとプログラム内に規律が生まれ以下の様な、メリットもあります。

* 多くの設定ファイルを書かなくて良い
* 共通のルールがあることで他のエンジニアとスムーズなコミュニケーションが取れる
UITabBarControllerの子要素ViewController同士を戯れさせてみた。[Swift5]

# はじめに
UITabBarControllerをコードで書いていて、子要素のViewControllerから別のViewControllerにアクセスしたいと思い、少し詰まりました。

# 試したこと
<!-- タイトルとアンカー名を編集 -->
1. [Chapter1](#Chapter1)
1. [Chapter2](#Chapter2)
1. [参考文献](#reference)

<a id="#Chapter1"></a>
# Chapter1
```swift:HogeViewController.swift
guard let viewControllers = self.tabBarController?.viewControllers,
     let sample = viewControllers[1] as? SampleViewController else {
     return
}
```
これだと二行目の条件分岐が引っかかりました。

<a id="#Chapter2"></a>
# Chapter2  Answer
実はUITabBarControllerのViewControllersそれぞれにさらにchildrenというプロパティがありました。

```swift:HogeViewController.swift
for vc in viewControllers {
     print("vc \(vc.children)")
}
```

結果

```
vc [<プロジェクト名.SampleController: 0x7fad4581d800>]
vc [<プロジェクト名.HogeViewController: 0x7fad47865800>]
```

ということで

```swift:HogeViewController.swift

if let child = viewControllers[1].children.first as? SampleViewController {
       //これでSampleViewControllerの値をいじる。
}

```
他のViewControllerの値を外からいじるのは良くないのかもしれませんが。

<a id="#reference"></a>
# 参考文献
なし

# 終わりに
実務未経験ですが、もがき楽しんでおります。
DRF / django-filter を使ってフィルタリング

# はじめに

[Django REST Framework で API 作成](https://qiita.com/honda28/items/a179c26c2cf147a247dd)でウェブ API を作成した。この記事では、django-filter を使って、リクエストに合わせてフィルタリングを行ったレスポンスを返せるようにする。[Filtering - Django REST framework](https://www.django-rest-framework.org/api-guide/filtering/)を参考にした。動作環境は以下。

- OS: Windows 10 Pro (WSL2 Ubuntu-20.04)
- Python: 3.8.5
- Django: 3.2
- djangorestframework: 3.12.4
- django-filter: 2.4.0

# インストールおよびセットアップ

以下コマンドでインストールする。

```
$ pip install django-filter
```

さらにプロジェクトの settings.py にて 'django_filters' と 'DEFAULT_FILTER_BACKENDS' を追記する。

```config/settings.py
# Application definition

INSTALLED_APPS = [
    ...
    'rest_framework',
    'django_filters',
]

REST_FRAMEWORK = {
    'DEFAULT_FILTER_BACKENDS': ['django_filters.rest_framework.DjangoFilterBackend'],
}
```

これで DRF を読み込んで、使用することができる。

# フィルタリング

ViewSets.py にて、フィルタリングしたいフィールドを filterset_fields として指定する。ここでは、[Django REST Framework で API 作成](https://qiita.com/honda28/items/a179c26c2cf147a247dd)で扱った Info というモデルの、id という項目を指定する。

```python:views.py
from .models import Info
from .serializers import InfoSerializer
from rest_framework import viewsets

class InfoViewSet(viewsets.ReadOnlyModelViewSet):
    queryset = Info.objects.all()
    serializer_class = InfoSerializer
    filterset_fields = ['id']
```

# 動作確認

ここまででフィルタリング設定が完了しているはずなので、開発用サーバーにて動作確認をするため `python manage.py runserver` で開発用サーバーを立ち上げる。http://localhost:8000/api/info/?id=1111111 のように id を指定してアクセスすると、フィルタリング結果が返される。また [http://localhost:8000/api/info](http://localhost:8000/api/info) へアクセスすると、API コンソール右上に「フィルタ」という項目が追加されており、手動でフィルタリング結果を見ることもできる。

# おわりに

django-filter を用いてフィルタリングを実行できた。次は React で開発したフロントエンドから API を叩いて、適切なデータを得ることを試してみる。
【Rails】Userモデルに後からDeviseを入れたらログインできなくなった事件



#起こった問題

Webサービスを作ろうとUserモデルを作成。
とりあえずRailsチュートリアルに倣って進めるも、Deviseが使いたくなったので途中で方針転換。
メール認証機能を作ったところでDeviseを導入、作り直すことに。

ユーザーの作成はできた（？）がどうもログインができず。
（エラーは出ないが「メールアドレスまたはパスワードが正しくない」と言われる。）
※もちろん正しいものでトライしてます。


#結論

UserモデルにRailsチュートリアル内で作った名残が残っていたせいで不具合が起き、
encrypted_passwordにパスワードが保存されなかったことが原因でした。

```user.rb
class User < ApplicationRecord

(以下抜粋）
 attr_accessor :remember_token, :activation_token, :activation_digest, :password_digest   #←ここ消す

 has_secure_password   #←ここ消す
```

Deviseでいいようにやってくれるので`has_secure_password`と`password_digesｔ`属性は不用。消しましょう。ということでした。
残してると色々メソッド名やらなんやらがバッティングしちゃってうまくいきません。
潔く思い出はさよならしましょう。



# 解決に至った経緯

とりあえずブラウザで作ったユーザーをコンソールで見てみる。

```
#ブラウザから作ったユーザーを取得
user = User.last 

user.valid?
=> false
user.encrypted_password
=> ""
```
`user.valid?`が`false`。
`user.encrypted_password`が`""`。

あれ、パスワード保存されてなくない？

####疑惑① フォームからパスワードの送信or保存が上手くいってない？


であれば、コンソール上でユーザーを作成してみる。

```
user2 = User.new(name: "Test Taro", email: "test@example.com", password: "password", password_confirmation: "password")

user2.valid?
=> true
```
`user2.valid?`が`true`になったのでログインいけるかな？と思いきや
やはりアドレスかパスワードが違うと言われログインできない。

コンソールで見てみると

```
user2.encrypted_password
=> ""
user2.password
=> "password"
```

やっぱり`encrypted_password`が保存されてない。
一応、`user`の`password`属性には値が入っている。

であればフォームのせいではなさそう。（自動生成されたものからいじってないし）
####疑惑② もともと作っていたパスワード周りの何やかんやが悪さしているな。

一旦`models/user.rb`を見返す。いらないものは消していこう。

`has_secure_password`不要！　→消す
→ログインを試みる
→エラー発生

```
ArgumentError in Devise::SessionsController#create
wrong number of arguments (given 1, expected 0)

Extracted source (around line #67):              
      def password=(new_password)
        @password = new_password
        self.encrypted_password = password_digest(@password) if @password.present? #ここに赤線入ってる
      end

      # Verifies whether a password (ie from sign in) is the user password.
```
引数いらないのに１個渡しちゃってるらしい。

何か思い当たる節は・・・　ん、`password_digest`という聞き覚えのある単語・・！！！

`attr_accessor`に`:password_digest`が残ってたので消す



→解決！！！！


# 参考
[【Rails】devise実装後のユーザー新規登録時のエラー[ArgumentError in Users::RegistrationsController#create]]('https://qiita.com/kents1002/items/4079e3d05d322febe00e')
ubuntu18をAP化してみた

##APって作れるんー？
無線LAN関連の勉強をしていて興味が急に湧いたので実際に調べてやってみた備忘録です。
参考になる方はほぼ皆無だとは思うのですが、
ubuntuと無線LANカードさえあれば作れるますので、需要があれば参考にしていただけたら幸いです。
間違っているところがあれば指摘してください。

###構築環境
* ubuntu18.04
* USBドングル
* hostapd
* isc-dhcp-server
* ip-tables

###流れ
1. ubuntuにUSBドングルを認識させる
2. hostapdをインストールし設定する
3. ip-tableの設定
4. isc-dhcp-serverをインストールし設定する

###1. ubuntuにUSBドングルを認識させる
開発用に使っていた筐体には、無線LANカードが積んでなかったので、USBドングルをネットで購入しました。
使用したものはこちら

https://store.shopping.yahoo.co.jp/kuri-store/d828-usb-bl.html

1000円ぐらいでした。
ドライバーCDも付属されていましたが、使えませんでした。
とりあえず、挿してみてubuntuで

```sh:ubuntu
$lsusb
```

とすると

```sh:ubuntu
odba:c811 Realtek Semiconductor Corp
```

Realtekのチップを積んでいる事は認識してくれていました。
なので、ドライバーをネットで探すとgithubにある事がわかりました。
ので、適当なディレクトリにて

```sh:ubuntu
$sudo apt install dkms git make
$git clone https://github.com/abperiasamy/rtl8812AU_8821AU_linux.git 
$cd rtl8812AU_8821AU_linux 
$sudo make -f Makefile.dkms install 
$sudo dkms status
$reboot
```

再起動後、$ip aとしてwlxから始まるインターフェースが追加されていれば、ドライバーのインストールが成功しています。なければ、ドライバーが違う可能性があります。

###2.hostapdをインストールし設定する
インターフェースが認識できたので、次にアクセスポイント化するアプリケーションをインストールします。

```sh:ubuntu
$sudo apt install hostapd
```

設定ファイルのサンプルもインストールされているのでそれをもらう。

```sh:ubuntu
$zcat /usr/share/doc/hostapd/example/hostapd.conf.gz > /etc/hostapd/hostapd.conf
編集する
$sudo vi /etc/hostapd/hostapd.conf
以下の記述を探し、編集する
interface=追加したインターフェース名
driver=nl80211
ssid=ssid
hw_mode=g
channel=1
wpa=2
wpa_passphrase=password
ssidにssidを入れwpa_passphraseにそのパスワードを記述
パスワードは８文字以上でないとエラーになる
:wpで保存終了し、動作確認
$hostapd /etc/hostapd/hostapd.conf
ログが画面に出力され待ち受け画面になる。
```

お使いの端末から設定したSSID名が見ることができれば、hostapdが正しく動いてくれています。

###3.ip-tableの設定
現状は無線LANインターフェースと有線との通信ができていないので、iptableを設定します。

```sh:ubuntu
$ sh -c “echo 1 > /proc/sys/net/ipv4/ip_forward”
$ iptables -t nat -A POSTROUTING -o 有線LANインターフェース名 -j MASQUERADE
$ iptables -A FORWARD -i 有線LANインターフェース名 -o 無線LANインターフェース名 -m state --state RELATED,ESTABLISHED -j ACCEPT
$ iptables -A FORWARD -i 無線LANインターフェース名 -o 有線LANインターフェース名 -j ACCEPT
$sudo apt install iptables-persistent
iptableは再起動をすると設定が白紙になるそうですが、iptables-persistentをインストールすれば設定を保存してくれるみたいです。
手動で保存するなら
$/etc/init.d/iptables-persistent save 
で保存してくれます。
```

###4.isc-dhcp-serverをインストールし設定する
パケット転送の設定が済んだのであとは、DHCPサーバーを構築すればルーターとして機能してくれます。

```sh:ubuntu
$sudo apt install isc-dhcp-server
$sudo vi /etc/dhcp/dhcpd.conf

subnet 192.168.12.0 netmask 255.255.255.0 {
  range 192.168.12.100 192.168.12.150;
  option domain-name-servers 192.168.12.1;
  option routers 192.168.12.200;
}
サブネットやアドレス帯はお使いの環境に合わせてください。
無線LANインターフェースにIPアドレスを設定します。

$ ifconfig インターフェース名 192.168.12.200 netmask 255.255.255.0
$ ip a　　確認
$sudo systemctl restart isc-dhcp-server
$sudo systemctl status isc-dhcp-server  エラーがないか？確認
```

これでhostapdを起動しパスワードを入力して、無線LANに参加できれば成功です。
お疲れ様でした。

###参考記事

https://qiita.com/8mamo10/items/59adae2c9f286e041792
AngularでRxJSを使いこなそう

# 前置き
このイベントが目に入ったので、参加してみたいと思いました。
[フロントエンド強化月間](https://qiita.com/official-events/b9ad63394fa2635dfca9)

# Angular
Angularは、Googleが関わっているフロントエンドフレームワーク。
Microsoftが提供しているTypeScriptをベースにしている。

# RxJS
RxJSは、Reactive Extensions for JavaScriptの略称で、非同期またはコールバックベースのコードを容易にします。

# テクニック

- WebScoketを常時接続してみよう

WebSocketをSubscribeした時に、接続が成功するとsuccessへ、接続が失敗するとerrorへ行く。
WebSocketは、仕様上10分間でタイムアウトし、切断してしまう。
このタイムアウトによる切断は、実行したところerrorではなくcompleteに流れてしまった。

そこで、RxJSにはRetryというオペレーターがある。これを用いればいいじゃないと考えたが、ここでトラップが存在。

エラーをハンドリングすれば良いと最初は思っていたが、エラーになるのは前述通り接続が失敗した時のみ。今回のWebSocketタイムアウトを回避するためには使えない。


「WebSocket RxJS Retry 」で調べると下記のサイトが出てくる。

参照サイト:[Reconnecting a websocket in Angular and rxjs?](https://stackoverflow.com/questions/44060315/reconnecting-a-websocket-in-angular-and-rxjs)

上記参照サイトのretry()を試してみたが呼び出せなかった。

そこで色々と検索したところ、下記に記しているコードに行き着いた。
どこのサイトを見たのか失念してしまった。
使う場合は、メモリリークとかの動作確認は必ず行ってくださいな。
(個人的には、もっとシンプルに出来る気がしています)


```typescript:sample-websocket.ts
import { OnInit } from "@angular/core";
import { webSocket } from "rxjs/webSocket";
import { repeat, takeUntil } from "rxjs/operators";
import { Subject } from "rxjs";
import "rxjs-compat/add/operator/retry"
// import { retry } from "rxjs/operators"; <= こっちでは無い


export class WebsocketComponent implements OnInit {

unsubscribe = new Subject<any>();
socket = webSocket('wss://hogehoge.com').pipe(takeUntil(this.unsubscribe), repeat());

ngOnInit(): void {
  this.socket.retry().subscribe(
    mess => console.log(mess),
    error => console.log(error),
    complete => console.log('complete')
 );
}

}
```
Apache2.4 CentOS7 バーチャルホスト設定してみた！


#前書き

一つのサーバーでディレクトリを分けてコードを管理するため、バーチャルホストを設定してみた！

Apacheはバージョンによって、いじるファイルの中身が違うので自分のApacheのバージョンを確認してからチャレンジしてみよう。
Apacheのバージョンを調べるコマンドは下記の通り。

```:サーバー内で確認
$ httpd -v
Server version: Apache/2.4.6 (CentOS)
```

#そもそも、バーチャルホストって？？

>バーチャルホストという用語は、1 台のマシン上で (sample_01.test.com と sample_02.test.com のような) 二つ以上のウェブサイトを扱う運用方法のことを指します。

[Apache バーチャルホスト説明書](https://httpd.apache.org/docs/2.4/ja/vhosts/)

今回は一つのドメインを使い回してブラウザ表示するお話です。


#設定する時に必要なもの、いじるファイル。

**必要なもの**
・ドメイン
**いじるファイル(サーバー内)**
・httpd.conf
・表示するディレクトリ
**いじるファイル(ローカル環境内)**
・hosts


#設定してみましょう！

では、早速やってきましょう〜！

##１. ドメインの購入、設定。

まず、ドメインを購入しましょう。
今回はドメイン``test.com``

IPアドレスとドメインを関連付けるのはレンタルサーバー内でできるので、そちらで設定しましょう。
ちなみに、設定後は紐付くまで少しお時間がかかります。

##2. 必要なディレクトリを作成。

次に今回の表示分けするディレクトリ構成
**html**と同じ階層に**sample_01**と**sample_02**ディレクトリ作成する。
そしてそれぞれ**index.html**のファイルを作成し、下記のように記入する。

```
└── var 
     └── www
         ├── html
         |      └── index.html
         ├── sample_01
         |      └── index.html
         └── sample_02
                └── index.html
```

最終的にそれぞれのURLにアクセスしたときの各ディレクトリ内のファイルが表示されることを確認するために、
それぞれの**index.html**に下記を記入。

```html:html/index.html
<p>html/index.htmlページです</p>
```
```html:sample_01/index.html
<p>sample_01/index.htmlページです</p>
```
```html:sample_02/index.html
<p>sample_02/index.htmlページです</p>
```



##3.  サーバーネームとルートディレクトリを紐づける

次に、サーバー内でどのURLにアクセスすればどのファイルが表示されるかを指定する。

**どのURLにアクセス -> ServerName
どのファイルが表示 -> DocumentRoot**　として記入する。

```:etc/httpd/conf/httpd.conf
<VirtualHost *:80>
DocumentRoot /var/www/html
ServerName test.com
</VirtualHost>

<VirtualHost *:80>
DocumentRoot /var/www/sample_01
ServerName sample_01.test.com
</VirtualHost>

<VirtualHost *:80>
DocumentRoot /var/www/sample_02
ServerName sample_02.test.com
</VirtualHost>
```

これを**httpd.conf**に記入した後、``service httpd restart``でApacheを再起動する。


##4. 自分のローカル環境にあるhostsファイルの編集

``バーチャルホストを設定するサーバーのIPアドレス ServerName``を自身のローカル環境の**hosts**ファイルに入力する。

```:(private)/etc/hosts

111.222.333.44 sample_01.test.com
111.222.333.44 sample_02.test.com

```


#確認してみましょう！

各URLにアクセスしてみてこのQiita通り、表示内容が別々になっていればOKです

```
http://test.com　へアクセス
//[html/index.htmlページです]と表示されればOK

http://sample_01.test.com
//[sample_01/index.htmlページです]と表示されればOK

http://sample_02.test.com
//[sample_0２/index.htmlページです]と表示されればOK
```

ちなみに、**test.com**でアクセスすると自動で**https**になっていて、セキュリティに引っかかって表示されないことがあるので、URLを確認して**http**になっているか確認してみましょう〜！


以上になります！
なかなか、バーチャルホストの記事を参考にしても動かないことがあったので記事にしてみました。
内容があっているかはわかりませんが何かあれば編集リクエストいただければ幸いです:sunglasses:
Swift 配列 転置行列 m×nからn×mに変換

# コピペ用

二次元配列の各要素から、同じ位置にあるものを集めて新しい配列を作る
```[[あ, い, う, え, お], [か, き, く, け, こ], [さ, し, す, せ, そ]]```
->
```[[あ, か, さ], [い, き, し], [う, く, す], [え, け, せ], [お, こ, そ]]]```


``` Extensions.swift
// 転置行列
extension Array where Element: RandomAccessCollection, Element.Index == Int {
    func transpose() -> [[Element.Element]] {
        return self.isEmpty ? [] : (0...(self.first!.endIndex - 1)).map { i -> [Element.Element] in self.map { $0[i] } }
    }
}
```

# 使い方

配列に対して ```.transpose()``` を使う

``` Sample.swift
let a = [
    [1, 2, 3],
    [4, 5, 6]
].transpose()
// a: [
//   [1, 4],
//   [2, 5],
//   [3, 6]
// ]

let b = [
  ["あ", "い"],
  ["か", "き"],
  ["さ", "し"]
].transpose()
// b: [
//   ["あ", "か", "さ"],
//   ["い", "き", "し"]
// ]

```

# さいごに

細かくいじらない汎用的なコードは可読性よりもコンパクトさを優先してます

# Thanks

- @ensan_hcl : 汎用化されたコードの提供