OmniAICreator/Qiita-1.07M huggingface dataset:
Python 2 から Python 3 に移行したら Mercurial が動かなくなった (備忘録)

# Python 2 から Python 3 に移行したら Mercurial が動かなくなった (備忘録)

Mercurial の Python 2 サポートもそう遠くなくドロップされそうなので、Python 3.8 をビルドしたついでに移行してみたら、見事に動かなくなって直した記録.

元々の index.cgi は以下のような感じで、これの python を python3 に書き換えたら 500: Internal Server Error.

```python
#!/home/xxxx/local/bin/python

from mercurial import hgweb
from cgitb import enable
enable()
hgweb.hgweb("/home/xxxx/hg", "xxxx-hg").run()
```

Apache のエラーログを見たところ、`Response header name '<!--' contains invalid characters, aborting request`. 見るからに cgitb が悪さをしていそうなので、ドロップしたら Apache のエラーログにスタックトレースが出力されるようになった. `Mercurial only supports encoded strings` のエラーメッセージでははーんとなり、`hgweb.hgweb("/home/xxxx/hg".encode('utf-8'), "xxxx-hg".encode('utf-8')).run()` に書き換えて動作を確認.

よくよく考えると encode する必要もなく、最終的なソースコードは以下に落ち着いた.

```python
#!/home/xxxx/local/bin/python3

from mercurial.hgweb import hgweb

hgweb(b"/home/xxxx/hg", b"xxxx-hg").run()
```

関連: [さくらのレンタルサーバで Python 3 を野良ビルドした (備忘録)](https://qiita.com/c-yan/items/bff6f857f419756d6512)
【Excel】選択している画像を整形する

```vb
Sub 選択している画像を整形する()

    If VarType(ActiveWindow.Selection) = vbObject Then
        Set tgtShapes = ActiveWindow.Selection.ShapeRange
        For Each shp In tgtShapes
            shp.LockAspectRatio = True   '縦横の比率を固定
            shp.Height = 400             '高さを設定
        Next shp
    Else
        MsgBox "画像が選択されていません。", vbCritical
    End If

End Sub
```
# 使用例
対象の画像を選択後、当マクロを実行する。
マニュアルやエビデンス作成時の画面サイズを統一させる必要があるときに利用できる。
さくらのレンタルサーバで Python 3 を野良ビルドした (備忘録)

# さくらのレンタルサーバで Python 3 を野良ビルドした (備忘録)

Python 2.7 も EoL で Python 3 に移行したいのに、さくらのレンタルサーバに Python 3 が来る気配は無いので自分でビルドした記録(2020-04-30).

```sh
$ cd /home/xxx/local/src/
$ wget https://www.python.org/ftp/python/3.8.3/Python-3.8.3rc1.tar.xz
$ xz -dc Python-3.8.3rc1.tar.xz | tar xf -
$ cd Python-3.8.3rc1
$ ./configure --prefix=/home/xxx/local/python-3.8.3rc1
$ make
$ make install
$ cd ../../python-3.8.3rc1/bin
$ ./pip3 install --upgrade pip
$ ./pip3 install Genshi
$ ./pip3 install SQLAlchemy
$ ./pip3 install mercurial
$ cd ../../
$ ln -s /home/xxx/local/python-3.8.3rc1 python3
$ cd bin
$ ln -s /home/xxx/local/python3/bin/python3 python3
```

インストールされたバージョンは以下.

```
pip        20.1
Genshi     0.7.3
SQLAlchemy 1.3.16
mercurial  5.3.2
```

新しいものに入れ替えた(2021-01-05).

```sh
$ cd /home/xxx/local/src/
$ wget https://www.python.org/ftp/python/3.8.7/Python-3.8.7.tar.xz
$ xz -dc Python-3.8.7.tar.xz | tar xf -
$ cd Python-3.8.7
$ ./configure --prefix=/home/xxx/local/python-3.8.7
$ make
$ make install
$ cd ../../python-3.8.7/bin
$ ./pip3 install --upgrade pip
$ ./pip3 install Genshi
$ ./pip3 install SQLAlchemy
$ ./pip3 install mercurial
$ cd ../../
$ rm python3
$ ln -s /home/xxx/local/python-3.8.7 python3
```

インストールされたバージョンは以下.

```
pip        20.3.3
Genshi     0.7.5
SQLAlchemy 1.3.22
mercurial  5.6.1
```

関連: [さくらのレンタルサーバで Python をまた野良ビルドした (備忘録)](https://qiita.com/c-yan/items/26aee5cbcba99eced7d3) / [Python 2 から Python 3 に移行したら Mercurial が動かなくなった (備忘録)](https://qiita.com/c-yan/items/b4447233d812868d4ade)
FlutterのCupertinoIconsは不十分なので、直接IconDataを使うべし

## CupertinoIcons探しにくい問題

Material Design準拠の[Material Icon](https://material.io/resources/icons/?style=baseline)の場合であれば、公式のIcon一覧から気に入ったアイコンの名前を使えば良いので楽ですが、`CupertinoIcons`を使用したい場合、そうはいきません。

例えば、ハンバーガーメニューのCupertinoIconを使用したいと思っても、`menu`などで出てこなく、嫌になります。（今現在も何なのかわからず...。そもそもあるのか？）

[`cupertino_icons`のパッケージ情報](https://pub.dev/packages/cupertino_icons)を見ると、アイコン一覧が画像になっていて期待させますが、そこに書かれているのは名前ではない。。。

![cupertino_icons.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225665/e7612afe-ebac-8dd5-d467-90f9fa32576e.png)

しかし、これを使えば格段に楽に、CupertinoIconを使うことができました。

### 解決策：直接 IconData を指定すれば良い

上記の画像には、各アイコンの上に`f394`などのコードが書かれています。

つまり、それを使って直接`IconData`を呼び出せば良いです。

以下は、メニューアイコンの例。

```
Icon(
  IconData(
    0xf394,
    fontFamily: CupertinoIcons.iconFont,
    fontPackage: CupertinoIcons.iconFontPackage,
  ),
),
```

Ref: [Why are there so few icons in cupertino_icons?](https://stackoverflow.com/questions/51107173/why-are-there-so-few-icons-in-cupertino-icons/51107237)

## ちなみに、公式のMaterial Iconも足りていない

[Missing Material Icons](https://github.com/flutter/flutter/issues/27956)...

これも結構不便。
ご丁寧に[アップデート手順のREADME](https://github.com/flutter/flutter/wiki/Updating-Material-Design-Fonts)まで用意されているが、` (Google-only, sorry)`
CocoaPodsの利用方法

# CocoaPods

[CocoaPods](https://cocoapods.org/) とは、ライブラリ管理ツールです。
構築手順を以下に記載します。

本ページでは、CocoaPodsの実装方法およびライブラリのインストール方法をまとめました！

#### 端末へのインストールおよびセットアップ

1. CocoaPods をインストールする

        sudo gem install cocoapods

2. セットアップコマンドを実行します

        pod setup

3. （アプリ名）.xcodeproj/ と同じ階層に移動します
4. Podfile を作成します

        pod init

これにより、Podfile が作成されます。


#### ライブラリのインストール方法

ここでは、SwiftLint のインストール方法を記載します。

1. Podfile にインストールするライブラリを記載します

        # Pods for （アプリ名）
        pod 'SwiftLint' // 追記する

２. Podfile に記載されているライブラリをインストールします

        pod install

※アプリでSwiftLintを利用できるようにするためには、アプリ内での設定が必要です。

#### .gitignore への設定

Podsフォルダはgitの対象から外しましょう。

```
#CocoaPod
Pods/
```
【Excel】選択している画像を縦に連結してグループ化する

```vb
Public Sub 選択している画像を縦に連結してグループ化する()

    If VarType(ActiveWindow.Selection) = vbObject Then
        Set tgtShapes = ActiveWindow.Selection.ShapeRange
        If ActiveWindow.Selection.ShapeRange.Count < 2 Then
            MsgBox "画像が2個以上選択されていません。" 
            End
        End If
        ' 左詰めで整列
        Selection.ShapeRange.Align msoAlignLefts, msoFalse
        ' 一番上の画像の位置を取得
        Dim preTop As Long: preTop = tgtShapes(1).Top
        For Each shp In tgtShapes
            If preTop > shp.Top Then
                preTop = shp.Top
            End If
        Next shp
        ' 連結処理
        Dim Count As Integer
        Dim tmpTop As Long: tmpTop = 0
        Count = 0
        For Each shp In tgtShapes
            tmpTop = preTop
            For Each compShp In tgtShapes
                '処理対象より上にある場合
                If shp.Top > compShp.Top Then
                    '上の画像の下に対照画像の高さを足す
                    tmpTop = tmpTop + compShp.Height
                End If
            Next compShp
            '処理対象の位置を更新
            If shp.Top > tmpTop Then
                shp.Top = tmpTop
            End If
        Next shp
        ' グループ化
        tgtShapes.Group
    Else
        MsgBox "画像が選択されていません。", vbCritical
    End If

End Sub
```
# 使用例
対象の画像を選択後、当マクロを実行する。

### 実行前
![実行前.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488082/df0c3cfd-49b7-40e4-7d07-8068335b9eff.png)


### 実行後
![実行後.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488082/e5c3ea40-0300-acc6-b409-399414d90a8f.png)
個人的なviチートシート

#前置きと言い訳
vimで使うけど、すぐ忘れてしまう操作を書いておくためのノート
ちゃんとした記事ではなくて自分用のチートシートなので、
他の皆さんの記事のほうがいいですよ。
(そのうち、ちょっとづつ追加します)

# よく使う操作
## コマンドモードへ
`ctrl+[ `　または `Esc`

## windowの移動・分割

| 操作 |  動作 |
|:-:|:-:|
|ctrl + w  j | 下へ移動      |
|ctrl + w  h |左へ移動      |
|ctrl + w  k |上へ移動      |
|ctrl + w  l |右へ移動      |
|ctrl + w  w |別の場所へ移動 |


| 操作 |  動作 |
|:-:|:-:|
|:split | 上下分割      |
|:vsplit |左右分割<br/>(縦に分割)  |

## 検索と置換  



| 操作 |  動作 |
|:-:|:-:|
|:%s/before/after/g|beforeをafterに置換 <br/>(全行 すべて)|
|:%s/before/after/ |beforeをafterに置換 <br/>(全行 最初のヒットのみ)|
|:12,30s/before/after/g|beforeをafterに置換 <br/>(12行目から30行目 すべて)|
##編集
| 操作 |  動作 |
|:-:|:-:|
|u | アンドゥ |
|ctrl + r | リドゥ |

| 操作 |  動作 |
|:-:|:-:|
|/serchword | serchwordを下方探索 |
|?serchword | serchwordを上方探索 |

## 終了
:wq　または　ZZ  
:q!
Goで指定したバージョンのパッケージをインストールしたい

いざ自分がやろうとした際にちょっとだけ迷ったのでメモしときます。

## バージョン指定してパッケージをインストール

```
go get <パッケージ名>@<指定するバージョン>
```

例えば、 gqlgen の v0.10.2 をインストールしたい場合はこうなります。

```
go get github.com/99designs/gqlgen@v0.10.2
```

本編はここまで。

## go.mod でパッケージ管理しているときに自分がした勘違い

ここからはおまけです。
go.mod でパッケージ管理をしている場合、以下のようなファイルがあると思います。

```go.mod
module github.com/tcshy/hoge

go 1.13

require (
	github.com/99designs/gqlgen v0.10.2
	github.com/aws/aws-sdk-go v1.28.9
	github.com/gin-gonic/gin v1.5.0
　　　　・・・
)
```

このとき、 go.mod と同じディレクトリにいる状態で `go get github.com/99designs/gqlgen` を打てば go.mod と同じバージョンでインストールされるのかなーと初めは思ったんですが、

```
$ go get github.com/99designs/gqlgen

$ gqlgen version
v0.11.3
```

見事に最新版になってる。
go.mod 内のバージョン情報も v0.11.3 にアップデートされちゃってる。

```go.mod
module github.com/tcshy/hoge

go 1.13

require (
	github.com/99designs/gqlgen v0.11.3
	github.com/aws/aws-sdk-go v1.28.9
	github.com/gin-gonic/gin v1.5.0
　　　　・・・
)
```

ってことなんでむやみに `go get <パッケージ名>` でインストールすると知らない間にバージョンあがってる、って事がありますね。


## もし間違ったバージョンをインストールしてしまったら

一旦パッケージを削除してから、指定のバージョンを再インストールするといいと思います。
パッケージの削除方法としては、以下みたいにGOPATH配下にあるバイナリ（とソースコードもあれば）を手で消す感じらしいです。
（ `go uninstall パッケージ名` とか使えるようになったらいいですね）

```
$ cd $GOPATH
$ rm -f bin/gqlgen
$ rm -rf src/github.com/99designs

# rm コマンドに -rf つけると確認されずにファイルが消えるんで、GOPAHTHとかパッケージ名などは各自確認してからコマンド打ってね！
```
Laravelでビュー描画前処理を行う

# 目次
Laravelの記事一覧は下記
[PHPフレームワークLaravelの使い方](https://qiita.com/toontoon/items/c4d0371e504c37f6576e)

# Laravelバージョン
動作確認はLaravel Framework 7.19.1で行っています

# Laravelのビュー描画前処理
Laravelのビュー描画前処理について書いていきます
Laravelではビューが描画される時に呼び出される処理を作成しておくことができます


# 前提条件
[eclipseでLaravel開発環境を構築する。デバッグでブレークポイントをつけて止める。(WindowsもVagrantもdockerも)](https://qiita.com/toontoon/items/76fa7f8845b20776077c)
本記事は上記が完了している前提で書かれています
プロジェクトの作成もapacheの設定も上記で行っています


# Controllerにメソッド追加
(1) /sample/app/Http/Controllers/SampleController.phpにviewComposeメソッドを追記
`public function viewCompose()
    {
        $data = ['key' => 123456789.123456];
        return view('sample.viewCompose', $data);
    }
`

(2) /sample/routes/web.phpに下記を追記
`Route::get('sample/view-compose', 'SampleController@viewCompose');`

# viewの作成
 /sample/resources/views/sample/viewCompose.blade.phpファイル作成

```viewCompose.blade.php
<html>
    <head>
        <title>sample</title>
    </head>
    <body>
        {{$key}}
    </body>
</html>
```

# 描画前処理の作成
(1) /sample/app/Http/ViewComposersフォルダ作成
(2) /sample/app/Http/ViewComposers/SampleComposer.phpファイル作成

```SampleComposer.php
<?php

namespace App\Http\ViewComposers;

use Illuminate\View\View;

class SampleComposer {

    public function compose(View $view)
    {
        $view->with('key', number_format($view->getData()['key'], 2, '.', ','));
    }
}
```

# 描画前処理が呼び出されるように登録する
(1) /sample/app/Providers/ViewComposerServiceProvider.phpファイル作成

```ViewComposerServiceProvider.php
<?php
namespace App\Providers;

use Illuminate\Support\Facades\View;
use Illuminate\Support\ServiceProvider;

class ViewComposerServiceProvider extends ServiceProvider{

    public function boot()
    {
        View::composer(
            'sample.viewCompose', 'App\Http\ViewComposers\SampleComposer'
        );

    }

    public function register()
    {
    }
}
```

(2) /sample/config/app.php内のproviders配列に下記を追記

```ViewComposerServiceProvider.php

‥‥

'providers' => [

‥‥

App\Providers\ViewComposerServiceProvider::class,
],

‥‥

```

これでレンダリングの際に
ViewComposerServiceProvider#boot→View::composer→SampleComposer#compose
が実行されます

# 動作確認
`http://localhost/laravelSample/sample/view-compose`

実行結果

```
123,456,789.12
```
gasからChatworkのAPIを利用して送信する

# 発端
自分のリマインダーとしてスプレッドシート x チャットワークへの送信をお手製で作成した。

概要としてはスプレッドシートに記載したリマインドリストを、設定した時間になったらチャットへ飛ばすというもの。

ただし、**送信したメッセージが自分から見て未読表示にならない**ため今回紹介する方法で対応した。

# 環境
実行環境： GAS ( Google Apps Script )
ライブラリ： [chatwork-client-gas](https://github.com/cw-shibuya/chatwork-client-gas)

# 結論
いろんな記事で紹介されている「sendMessage関数」は使わずに「post関数」を使う。


## 説明
よく使う「sendMessage」関数はpostしたメッセージを未読にする「self_unread」オプションに対応はしていなかった。

[チャットワークAPIドキュメント](https://developer.chatwork.com/ja/endpoint_rooms.html)

なので、post時にオプションを設定できる「post関数」を使って実施した。
( ここをライブラリ本体のjsを見るまで知らなかった... )

## 実装
[▼ライブラリのsendMessage関数部分](https://github.com/cw-shibuya/chatwork-client-gas/blob/master/client.js#L95-L102)

```js:ライブラリのsendMessage関数部分
    ChatWork.prototype.sendMessage = function(params) { 
      var post_data = {
        'body': params.body
      }
      
      return this.post('/rooms/'+ params.room_id +'/messages', post_data);
    };
```


そこでライブラリに標準装備されている「post関数」を使ってself_unreadオプションを付与するようにした。

```js
      var roomID = 12345678;  // チャットワークのルームID
      var message = "あああああ";  // 投稿するメッセージ

      // チャットワークAPI
      var client = ChatWorkClient.factory({
        token: 'xxxxxxxxxxxxxxxxxxxxxxxxxxx'
      });
      
      var endPoint = "/rooms/" + roomID  + "/messages";
      var postData = {
        body: message,
        self_unread: "1" // 自分の投稿を未読にする
      };

     // チャットワークへポスト
     client.post(endPoint, postData);      
```
これで、送信後に自分から見ても未読になった状態ができた。

この中で一つだけ注意点があり、このself_unreadのオプションを指定する「1」は文字列にしないと、「1.0」という数値に変換されてしまい送信時にエラーになってしまう。

参考：[GAS から Chatwork の通知をする場合、self_unreadの値は文字列で設定する
](https://mutter.monotalk.xyz/posts/1cfc3433eca26f5845e417574c002975)
WINDOWS OSでAWS LAMBDAにGOをデプロイ

#目的
現在、WINDWOS10 OSでGOを用いてWEBサービスを開発しており、
AWS LAMBDAを活用する場面がありましたが、
実際にデプロイを行う際に、無駄にはまったところがあったので、
この度は、実際にデプロイしてみてはまったことや感想を共有したいと思います。


#AWS LAMBDAにGOをデプロイする方法
基本的でデプロイする方法はAWSの公式ドキュメントに記載されてあります。
https://docs.aws.amazon.com/ja_jp/lambda/latest/dg/golang-package.html
特に`デプロイパッケージ`、`Handler`がデプロイとは密接に関係があるので、
この辺はしっかりと読みましょう。

僕は、しっかり読まずいくつが見逃してしまい、苦労しましたね、、、:joy_cat:



#僕がはまったところ
##①ソースコードをLINUX用しなかったこと
###問題






僕は以前、LAMBDAにPYTHON3をデプロイした経験があります。その際は、OSを気にせずデプロイしてもうまく動いてくれたので、
この度、GOをデプロイする際も、特に意識せず適当にアップロードしましたが、当然なことにエラーになりました。

###解決策
LINUXにビルドすれば問題解決です。
AWS LAMBDAは実際にはコンテナ環境のAmazon Linuxの上動作するので、
デプロイするものもこの環境に合わせてビルドしてアップロードしなければならないとのことです。

WINDWOS環境でLINUX用にビルドする方法は、
cmdを用いて、デプロイ対象パスに移動し、
**set GOOS=linux** `←ビルドオプションをLINUXに設定`
**go build -o main main.go**`←ビルド　※このファイル名をLAMBDA操作画面にてハンドラとして入力`
**build-lambda-zip.exe -output main.zip main**`←ビルドしたファイルをZIPに圧縮する`

build-lambda-zip.exeは
GOPATHから github.com/aws/aws-lambda-go/cmd/build-lambda-zip　入力するとダウンロードできます。




##②ハンドラ名入力ミス
###問題
LINUX用にビルドして、ZIPファイルをアップロード完了してコードテストを行うと
下のようなエラーメッセージが表示されました。

`関数の実行から返された結果が以下のエリアに表示されます。
 関数から結果を返す方法の詳細については、こちらを参照してください。`

```
{
  "errorMessage": "fork/exec /var/task/☆☆: no such file or directory",
  "errorType": "PathError"
}
```

☆☆はLAMBDA画面上記載したハンドラに該当します。
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/629451/846d2fd7-fbff-faac-f3be-2ef3e11d1b04.png)

###解決策
ビルドしたファイルと、LAMBDA操作画面で入力したハンドラ名が異なるため発生するエラーでした。
例えば、**go build -o main main.go**　でビルドした場合は、ハンドラにmainと入力しないとLambdaがパスを認識できず、エラーになります。
必ずビルドしたファイル名とハンドラ名を統一しましょう。

![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/629451/7345631d-4ff2-fd17-d916-3dbdb2ace468.png)
僕は「ハンドラ」と記載されてあったため、
lambda.Startに登録するハンドラを書くのかなと思い、
ビルドパス名と異なる値を入力して、はまりました。。。
Vue 初心者 - フォームの input の入力値をHTMLにリアルタイム反映する ( 同じComponentでのデータバインド )  ( export + props 指定 OR data 指定 )

vue cli で環境構築したプロジェクト前提

# NOTE

- メイン処理をする App.vue なのに、なぜexportするのか？どこにexportされるのか？ Vue のより外側のどこかに伝わっているのだろうか。
- 同じ component に対して働くのに export なのが、なんとも不思議な感じがするのが、きっとこういう流儀なのだろう。 
- data に書いても props で書いても、とりあえず同じように働くようだ。この作用の違いはまた調べたい。

参考: [Vue.js を vue-cli を使ってシンプルにはじめてみる - Qiita](https://qiita.com/567000/items/dde495d6a8ad1c25fa43)

# src/App.vue

```vue
<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <div>
      <input type="text" v-model="msg">
    </div>
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>

export default {
  name: 'App',
  props: {
    msg: {
      type: String,
      default: 'Ya!',
    }
  }

  // data に書いても動く
  //
  // data () {
  //   return {
  //     msg: 'Ya!'
  //   }
  // }
}
</script>


<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
```

# 動作例

![image](https://user-images.githubusercontent.com/13635059/80584798-35537c00-8a4d-11ea-90da-ff52a08894d5.png)

![image](https://user-images.githubusercontent.com/13635059/80584959-764b9080-8a4d-11ea-9d2a-cd429069d482.png)


# Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/3100











<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
ブラックボックスの罠　Guzzlehttpで解決しなかった文字化けが、cURLにしたらサクッと解決した

# はじめに

APIを使う側の場合、サンプルコードなどがあれば、まずはそれに忠実な操作、処理をして疎通を確認する。

**ライブラリは便利だが、ブラックボックスになる面もあるのでトラブルの原因把握や問題解決から遠くなる危険がある。**
**ソースが公開されているのなら、それを辿るがよろし。**

# 何が起こったか？

某決済業者のAPIを使い銀行振込用のバーチャル口座のリクエストを送った時に、全角文字が含まれているとその部分だけ文字化けが発生した。
なお、クレジットカード払いなどの別手段では発生しなかった。

# 参考：当方サーバ側環境

- PHP7.X系
- Laravel5.X系
- guzzlehttp6.5.2
- システム内のデフォルトの文字コードはUTF-8

PHPやLaravelそのものは関係なくて、guzzleの中の問題（断言）

# 問題調査で発生したこと

## 途方に暮れる

文字コードをSJISに変換する必要がある
→変換しても、文字化けた後の内容が変わっただけで根本的な解決にはならなかった。

リクエストを送るときのContent-Typeが問題　
→　Postmanなどの、API送信ツールを使ったが、文字化けしていた。 

そのほか、URLエンコードした値を送信など様々な事を試みたがダメだった。

**なお、業者がサンプルで提供している（本案件では採用しない）決済モジュールを動かしてみたら無事文字化けしなかった。**

# cURLで実装してみたら、問題なく送信できた！

決済モジュールのコードを辿ってみたら、全角文字列はSJISに変換する。
`curl_setopt`で、様々な設定をしたのちリクエストを送信。

結局、いかにもありそうなcURLのサンプルコードを書いて動かしたら成功した。


```php:cURLでリクエストを送る

//前提:こんな感じのリクエスト値が存在する（実運用時には、他のメソッドで加工するケースが多いと思います）

$params = [
    'access_code' => 'unique_access_code',
    'price' => '3980',
    'customer_name' => mb_convert_encoding('バカ殿様','SJIS','UTF-8')
];

//POSTする値を
$post_fields = http_build_query($params);

// APIのリクエスト先URL。各自の環境に置き換えて考えてください
$request_url = "https://example.com/path/to/api/receiver";


//まず、オブジェクトを作る
$curl = curl_init();

//リクエスト形式、戻り値の存在、リクエスト先などを設定する。
//URLは適宜考えてください

curl_setopt($curl,CURLOPT_URL,$request_url);
curl_setopt($curl,CURLOPT_POST,true);
curl_setopt($curl,CURLOPT_RETURNNUMBER,true);

//リクエスト先の仕様にそろえて、URLエンコード済の値をセットする
curl_setopt($curl,CURLOPT_POSTFIELDS,$post_fields);

//ここから下、cURLのリクエスト送信とレスポンス

$response = curl_exec( $curl );
$curlinfo = curl_getinfo( $curl );
curl_close( $curl );




```


顧客名は、時事ネタです（合掌）

# 犯人は（たぶん）お前だ！

`guzzlehttp/guzzle/src/Client.php`

`applyOptions`メソッド内にて`http_build_query`を使っていたが
ここでクエリを編集する部分に問題があるようだ。

```php:guzzlehttp/guzzle/src/Client.php

//
        if (isset($options['query'])) {
            $value = $options['query'];
            if (is_array($value)) {
                $value = http_build_query($value, null, '&', PHP_QUERY_RFC3986);//この行に問題あり
            }
            if (!is_string($value)) {
                throw new \InvalidArgumentException('query must be a string or array');
            }
            $modify['query'] = $value;
            unset($options['query']);
        }



```

[PHPリファレンスのhttp_build_queryのページ](https://www.php.net/manual/ja/function.http-build-query.php)によれば　4つ目の引数enc_typeは

デフォルトでは　`PHP_QUERY_RFC1738`つまり、RFC1738 に従ってエンコードされる。でよかったにも関わらず　上記ソースの抜粋のように`PHP_QUERY_RFC3986`でエンコードされていた…これが原因のようだ。

# 参考

PHP:http_build_query 

https://www.php.net/manual/ja/function.http-build-query.php
ハードディスクのデータを完全に消去する

# はじめに

ハードディスクの廃棄などで完全なデータのフォーマットが必要になったとき、ファイルを削除するだけでは、リカバリソフトを使うことで盗み取られてしまう可能性があります。完全なデータの削除をddコマンドを使用して実施します。

# ディスク情報を確認する

デバイスは/dev/sdXとします。

```
$ sudo fdisk -l /dev/sdX
ディスク /dev/sdX: 1.8 TiB, 2000398934016 バイト, 3907029168 セクタ
単位: セクタ (1 * 512 = 512 バイト)
セクタサイズ (論理 / 物理): 512 バイト / 4096 バイト
I/O サイズ (最小 / 推奨): 4096 バイト / 4096 バイト
```

物理セクタサイズは、4096バイトのようです。
全物理セクタ数は、2000398934016 /4096=488378646セクタです。

# ディスク全体を削除する

乱数を書き込みます。
容量が大きいと時間がかかりますので、PCのリソースに余裕があるときに実行します。

```
$ sudo dd if=/dev/urandom of=/dev/sdX bs=4096 count=488378646 seek=0 status=progress
```

# 参考サイト

https://wiki.archlinux.jp/index.php/ディスクの完全消去
シフトレフトテスト (Shift Left Testing) で高品質なシステムを迅速にリリース

## シフトレフトテスト (Shift Left Testing) とは
開発ライフサイクルの早い段階で「テスト活動」を行うことを、シフトレフトテスト (Shift Left Testing) と言います。これは、[「ソフトウェアテストの7原則について経験と照らし合わせて考えてみる」](https://qiita.com/NagaokaKenichi/items/b5d5d0b141e816991133)の「3. 初期テストが重要」を実現するものでもあります。


## なぜシフトレフトテスト (Shift Left Testing) ？
例えば、ウォーターフォールモデルだと以下のようなV字モデルで開発ライフサイクルの最後に「テスト活動」を行います。
※以下はhttps://www.itmedia.co.jp/im/articles/1111/07/news155.html より抜粋
![ri10_vmodel01.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23101/056fbff2-ead8-9d36-5eee-ef3e014c1cfb.gif)
この場合のデメリットとしては、テストの段階で初めて「要件が不明瞭」「仕様バグ」「設計バグ」といった手戻りコストが高い事象が発生しがちです。また、リリースまでの工期も長くなります。


これに対して、シフトレフトテストを用いることで以下のようなモデルとなります。
※以下はhttps://www.itmedia.co.jp/im/articles/1111/07/news202.html より抜粋
![ri10wmodel01.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23101/e424a08b-330b-71ce-6fa6-116a1af1dc0d.gif)
「開発ライフサイクルの早い段階で「テスト活動」を行うことをシフトレフトテストと呼ぶ」と説明しましたが、ここで言う「テスト活動」とは、静的テスト（要件定義書レビューや、仕様レビュー、設計書レビュー）も含んでいます。静的テストを早期に行い素早いFBを得ることで、テストのタイミングでの要件確認、仕様確認、設計書の確認といった工期の削減や、要件・仕様の誤認識による大きな手戻り防止（≒コスト削減）、品質の向上にも役立ちます。つまり従来のウォーターフォールモデルが抱えている問題の解決に繋がります。
また、上記モデルは一般的にW字モデルと言われています。シフトレフトテストを実現することで結果としてW字モデルになります（もしくはW字モデルにすることで結果としてシフトレフトを実現している？）。

## 最後に
シフトレフトテストを用いた開発スケジュールイメージです、以下のような形になると思います。
![コメント 2020-04-30 132221.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23101/f29c3a29-fbf3-7e0f-591a-b7225fbd9b68.png)

また、Wikipediaによるイメージは以下のようになっています。
![Model-Shift-Left.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23101/c0d1d3aa-42f5-01e3-2b63-a789d8a39be7.jpeg)
以上です。
[Rails]カラムのreference型について

#reference型とは
外部キーになるカラムを生成する時にこの型にすることが多い。

##使い方

```20××××××××××××.rb

class CreateUsers < ActiveRecord::Migration[5.0]
  def change
    create_table :users do |t|
      t.string    :name
      t.references :category, foreign_key: true
    end
  end
end

```
この場合category_idカラムが生成されます。
reference型は、外部キー制約をつけるときに「foreign_key: true」を使うことで制約が適用される。
※ちなみに、インデックスを自動で張ってくれるため自分で設定する必要はありません。
【初心者】addEventListenerでnullエラーが出る。

インターネットを参考にしながらjavaScriptでトグルメニューを作る方法を勉強した。

しかし、Chromeにて、いざ実行すると
「Cannot read property 'addEventListener' of null」
というエラーが発生する。
![スクリーンショット 2020-04-30 13.42.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/627934/00988ff6-431c-b85d-6aff-38aac48a42e8.png)
![スクリーンショット 2020-04-30 13.40.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/627934/577d2b09-1926-ad36-35e4-13bd3f7cb1f1.png)

はい？何故ですか？？
エラー文を読むと、「addEventListener」が「null」である事が分かる。
id関係のエラーであると予測し、文法ミスをくまなくチェック。
しかし、思い当たる節がない。
あれこれ文字を変えてみるも、結果は変わらず。
何故？？？？

休憩を挟み、googleで検索しまくった結果、ついに解決した。

原因はHTMLにあった。

HTMLにJavascriptを関連付けする為のscriptタグを上部に書いていたのがダメだったようだ。
そこに記述してしまうと、HTMLを読み込む前にjavascriptが動作してしまうようだ。
私は、てっきり、「.css」と同じようにhead部に記述すれば良いものだと思っていた・・・。

この後、headerタグの下部に配置させる事で、無事に問題は解決した。

思い返してみれば、些細な原因だが、解決するまでに丸一日費やしてしまった・・・。
#Vue 初心者向け – component の props にデフォルト値を設定する

vue cli で作成したプロジェクト前提

css記述 は省略

# src/components/Foo.vue

呼び出される component

- props でデフォルトの値を設定する 
- component の呼び出しで何も渡さない時にデフォルト値を利用したいので、 required は false にしておく

ちなみに型を定義するだけならこんな書き方だが

```vue
  props: {
    msg: String
  }
```

他にも属性を指定したい場合は、一段ネストして書く

```vue
  props: {
    msg: {
      type: String,
      default: 'Ya!',
      required: false
    }
  }
```

```vue
<template>
  <div>
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: {
      type: String,
      default: 'Ya!',
      required: false
    }
  }
}
</script>

```


# src/App.vue

component を呼び出すメインのっ処理
component を prpps の値の指定あり、値の指定なし、でそれぞれ呼び出す

```vue
<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <Foo/>
    <Foo msg="Wow"/>
    <Foo/>
  </div>
</template>

<script>
import Foo from './components/Foo.vue'

export default {
  name: 'App',
  components: {
    Foo
  }
}
</script>

```

# 表示例

- props に値を与えた component ではその文字列が表示される
- props に値を与えなかった component ではデフォルトの文字列が表示される

![image](https://user-images.githubusercontent.com/13635059/80582812-549cda00-8a4a-11ea-9afc-301ab85febc5.png)




# Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/3099











<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
WAI-AREAを利用してアクセシビリティ向上

 最近すごく重要視されてるアクセシビリティについて学習した内容書いていこうと思います。
主にキーボード操作とセマンティクスに集中して書いていきたいと思います。

普段フロントエンドを担当していることもありますので、form内のタグやarea-*についても改めて知ることができました。
中には、a11yってゆうキーワードが入ったプラグインやlintなども見かける方も多くいらっしゃるかと思います。
自分もa11yに対応しているプラグインを探すようにしていますし、なければ実装しています。

特に、Vue.jsやReact.jsに対応したプラグインも数多く存在していますし、React.jsは[こういったページ](https://ja.reactjs.org/docs/accessibility.html)を設けていますし、推薦プラグインも紹介されています。ご存知な方もいらっしゃるとでしょう。

今回僕が学習したのは、主にシンプルな内容です。



##アクセシビリティが必要な理由
アクセシビリティはアクセス可能とゆう意味になります。体が健常者に比べ不自由な方向けだけのように思われますが、実際は違います。健常者でも体が不自由にあってしまう時があるかと思います。
例えば、マウスを使って細かい作業がしづらくなってしまうなど。
全員を同一に思い同じ機会を与えるものになります。とある場所では法律になっているそうです。

##セマンティック HTML(意味的 HTML)
ボタンを実装するにあたって、意味がわかるのは

```html
<div>ボタン</div>
<p>ボタン</p>
```

```html
<button>ボタン</button>
```

場合によっては変わるかと思いますが、大体が後者になるかと思います。
後者ではフォーカスがあたりますので、キーボード操作だけで操作することができます。
他にも

```html
<a href="#">アンカー</a>
```
があります。
まだまだたくさんあります。form内のタグはほとんどキーボードによる操作が可能になっていますし、
様々なプラグインでさらに利用しやすくしてます。
主にwebサービスに利用しやすいかと思います。
[bootstrap](https://getbootstrap.com/docs/4.3/components/forms/)や
[react-hooks-form](https://react-hook-form.com/jp/)など

セマンティックにスポットをあてると以下かと思います。

```html
<header>
　ヘッダータグ
 <nav>ナビゲーション</nav>
</header>
 <main>
  <section>各セクション</section>
  <article>独立した括り</article>
　<aside></aside>
 </main>
<footer>ヘッダータグ</footer>
```

代表的でよく利用するタグかと思います。

##WAI-ARIAが必要な理由
支援技術がwebページの内容を正しく詳細にしれるようにするもので、適切な情報を閲覧者に伝えるため。

大きく分類すると、各要素の「Role (役割)」「State (状態)」「Property (特性)」

Roles (役割)
　何をするのかを定義します。
Property (特性)
　要素の性質を定義
State (状態)
　要素の現在の状態を定義

以下が一覧になります。
[https://momdo.github.io/wai-aria/states_and_properties.html](https://momdo.github.io/wai-aria/states_and_properties.html)
[https://accessible-usable.net/2014/04/entry_140415.html](https://accessible-usable.net/2014/04/entry_140415.html)

以上になります。
WSLからWAVEファイルを再生する

WSL 上で音声ファイルの生成をしていて、コマンドから再生したくなりました。サウンドサーバーを動かすのは大げさだったので、Windows 側の Python で簡単なプログラムを作って、ラッパー経由で呼び出しました。

# ライブラリ

次の記事で、Python のサウンドライブラリが色々と紹介されています。

* [Pythonでサウンドを扱う](https://qiita.com/hisshi00/items/62c555095b8ff15f9dd2)

今回は playsound を使用します。Windows 側の Python に pip でインストールします。

```text:ライブラリのインストール
py.exe -m pip install playsound
```

※ `py.exe` は Windows 側でパスの通った場所（`C:¥WINDOWS`）に置かれているので、`.exe` を付けることで WSL から呼び出せます。

# 本体

playsound は import してファイル名を渡すだけで簡単に使えます。

複数のファイルを指定して、再生中のファイル名を表示する機能を付けました。（`-p` オプション）

```python:winplay.py
import sys, playsound
if len(sys.argv) < 2:
    print("usage: %s [-p] sound [...]" % sys.argv[0])
    print("    -p: show file name")
    exit(1)
argp = 2 if sys.argv[1] == "-p" else 1
args = sys.argv[argp:]
argl = len(args)
format = "[%%%dd/%%d] %%s" % len(str(argl))
for i, arg in enumerate(args):
    if argp > 1: print(format % (i + 1, argl, arg))
    playsound.playsound(arg)
```

# WSL

wintts.py をどこか Windows から見える場所に置きます。次のような簡単なラッパーを書いて、WSL でパスが通っている場所に置いて実行属性を付けます。

```sh:winplay
#!/bin/sh
py.exe 'C:\スクリプト置き場\winplay.py' "$@"
```

これであたかも WSL のコマンドのように使うことができます。

```text:使用例
winplay test.wav
winplay -p *.wav
```

# MP3

MP3 も一応再生できますが、私の環境では再生が途切れるなどの現象が発生しました。

※ 今回は WAVE ファイルが目的のため、調査はしていません。

# 名前について

Windows 側で動かすことを示す狙いで win- という接頭辞を付けました。

実は当初、ライブラリそのまま playsound という名前にしようとしたのですが、import でハマったため取りやめました。

* [Pythonでファイル名が悪くてimportでハマった](https://qiita.com/7shi/items/9c15e2aca88bd40eed2a)

# 関連リンク

今回の手法と同じようなご意見が書かれています。

* [wslから音をならす方法 : プログラミング・メモ](http://m-miya.blog.jp/archives/1073383706.html)

> が、よく考えるとwsl上からWindowsのexeも実行できるので、wavファイルを再生できるexeがあればそれを使えば音ならせるじゃんって。

そこでも言及されていますが、サウンドサーバーを動かす方法があります。

* [Windows Subsystem for Linuxのインストールからmikutterをそれらしく動かすまで - cobodoのブログ](https://cobodo.hateblo.jp/entry/2018/03/31/034144)
* [WSL上で音楽を再生する - xdigit’s diary](https://xdigit.hatenablog.com/entry/2018/11/21/191349)
LookerでのRelation Ship指定と主キー

# 概要
* modelでのrelation shipの指定を間違えたので、備忘の為にメモします。
* **初歩の初歩なので、詳しい方はスルー** して下さい。

# 間違えた
* 下記のようなモデルを指定するとき、relation shipには何が入るでしょう。
* 答えは、ManyTable( **多** )に対して、OneTable( **１** )をJOINするので、 **many_to_one** です。
* 初歩の初歩ですが、これを、one_to_many に間違えると何が起きるか？という話です。

```
explore: ManyTable{
  join:  OneTable{
    relationship: ????★ここ★????
    sql_on: ${ManyTable.joinkey} = ${OneTable.joinkey} ;;
  }
}
```

# Relation Shipって
## many_to_one
### 関係性
* テーブルの関係性ですね。例えば以下のテーブルMany／Oneを考えると、
* Many（**多**）に対して、 One（**1**）の関係性なので、多：１（many_to_one）なわけです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183826/987acb26-65c4-5303-7ee3-84aa728da16b.png)
### LEFT JOIN　と　件数カウント
* many_to_oneで、LEFT JOINすると、こんな感じですね。
* この結合時に、Many側の件数を数えるには、結合した表に対し、単に、**count(*)** してあげれば良いわけです。
* 多側が左表、かつ、LEFT JOINなので、count(*)で、A,B,C,D,E⇒5行と数えられます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183826/b644bf93-3d85-5a6e-b3e2-9e0cf4f54bec.png)

## one_to_many
### 関係性
* さっきと逆ですね。一般的には、、
* many_to_oneの多（トランザクション）を左に、１（マスタ）を右に持ってくることが多い気がします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183826/e2ee8f41-c61a-ee45-2979-e14cbd44ed36.png)

### LEFT JOIN　と　件数カウント
* one_to_manyで、LEFT JOINすると、こんな感じです。
* ONE側が左表なので、結合できるレコードに関しては、**左側に何度も出現** します。（下記でいう **A** や **B** ）
* よって、One側のレコード件数を数えるには、 **主キー（もしくは候補キー）でdistinct** したくなります。
* 本件は、Looker関係なく様々議論されていますね。
    * [Count one-to-many using left join gives wrong count on source table](https://stackoverflow.com/questions/38955170/count-one-to-many-using-left-join-gives-wrong-count-on-source-table)
    * [Prevent duplicate record counts in one to many query](https://dba.stackexchange.com/questions/138504/prevent-duplicate-record-counts-in-one-to-many-query)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183826/e08e950d-5571-933f-68f9-b43123da7b44.png)


# Relation Ship指定を間違えると
* 冒頭に記載したとおり、many_to_one（正）と指定すべきところを、one_to_many（誤）と指定すると、
* LEFT JOINでの件数カウントで、
    * 本当は、**count(*)** とpkを使わずに件数がカウントできる処理に対して、
    * Lookerは、**count(distinct pk)** とpkで重複排除をした上でのカウントを実行しようとします。
* そして、左表側に、主キー(pk) の指定がない場合、下記のようなエラーを出力します。
    * 左表に対して、pkを要求するわけですね。

```
Field 'ManyTbl Count' cannot be calculated because of a one_to_many or many_to_many join. 
Add a primary key to ManyTbl
```

# よって
* 初歩の初歩ですが、（当たり前ですが、）
    * Relation Shipを正しく指定する。（備忘の為）、もう一度、model定義を記載します。下記です。

```
explore: ManyTable{
  join:  OneTable{
    relationship: many_to_one 　# Manyに対する、Oneなので、many_to_one
    sql_on: ${ManyTable.joinkey} = ${OneTable.joinkey} ;;
  }
}
```
* その上で、
    * 原則、主キーは指定する。
    * RDBMS上、主キーが無い場合、列の組合せで複合主キーが構成できる場合、Looker上でそれを指定。
        * 指定方法は、[Dealing with Non-Unique Primary Keys](https://help.looker.com/hc/en-us/articles/360001286027-Dealing-with-Non-Unique-Primary-Keys)、から抜粋しておきます。

```
dimension: compound_primary_key {
  primary_key: yes
  hidden: yes
  type: string
  sql: CONCAT(${TABLE}.primary_key_1, ' ', ${TABLE}.primary_key_2) ;;
}
```

# 最後に
* 初歩の初歩のミスでお恥ずかしいですが、どなたかの役に立てば、、と
初心者がWordPressでタイピングのリアルタイム対戦ゲームを作ってみました

#はじめに
この記事は、WordPressでしかホームページを作れないプログラミング初心者が、無理やりWordPressを使って、タイピングのリアルタイム対戦ゲームを作ってみた記事です。
![alt](https://typingerz.com/wp-content/uploads/2020/04/taobattle.jpg)
タイピング初心者用に、７０近くあるステージをクリアしていくモードもあります。

IT系の集まりで、「WordPressでこのサイト作ったよ」って言ったらどよめきが起こり、「Qiitaに書いてみれば？」と言われたので書いてみます。


ちなみに、[タイピンガーＺ](https://typingerz.com)というサイトです。

このサイトをWordPressでどうやって作ったのかを、ざっくり書いていこうと思います。

#テーマのテンプレート
はるか昔に購入した有料テンプレートを使ってみましたが、改造しすぎて原型をとどめていないので、なんでも良かったと思います。

#記事投稿と固定ページテンプレート
タイピンガーＺは、対人対戦を除いて、ステージをクリアしていく仕組みになっているのですが、それらのステージはWordPressの記事投稿で作りました。

記事には、敵キャラのセリフだったり、敵の強さだったり、音楽・背景だったりのパラメーターを記入します。
↓こんな感じ

```html:
<!--セリフ-->
<span id="pan2serifu">
（たけしさんブリーフ増えてる・・・）brbr
なんすかそれ,
ブリーフ型ターバンヲ発明シマシタ。22,
ヨガタケシデース22,
カレーガンジーヨガファイア22,
インド人に謝れ,
ヨガソーリー22,
さて、今回もがんばろう。
,*-,*del,((</span>
<!--速度基準-->
<span id="speedlinesetting1">20</span><!--遅い-->
<span id="speedlinesetting2">30</span>
<span id="speedlinesetting3">40</span><!--早い-->
<!--ミス基準-->
<span id="misslinesettei1">60</span><!--正確性低い-->
<span id="misslinesettei2">70</span>
<span id="misslinesettei3">85</span><!--正確性高い-->
```

それぞれのパラメーターは、Javascriptでゲットできるように、idかclassを付けておきます。
セリフに「22」とか、「*del」とか書いてますが、これはJavascript側に何かしてほしいときの自作コマンドみたいなものです。
このコマンドで、セリフを話してるキャラが消えたり、セリフが大きくなったり、BGMが変わったりと、いろいろ操作することができるようにしてます。

また、これだけではただのブログ記事のデザインにしかならないので、自分で作った固定ページテンプレートを当てます。

「初心者練習ステージテンプレート」「CPU対戦用テンプレート」などをPHPで書いて用意しました。



あとはパラメーターを書いた記事を大量に投稿して、それぞれに固定ページテンプレートを当てれば、ステージがどんどん増えていきます。

![alt](https://typingerz.com/wp-content/themes/keni70_wp_cool_black_201612271433/images/stage.jpg)

#リアルタイム対戦
リアルタイム対戦を導入するにあたってNode.jsを使いたかったのですが、僕が使っているロリポップレンタルサーバーが対応してなかったので、仕方なくAWSも使うことにしました。

AWSを「オッス」と読んでたくらい何も知識がなかったのですが、１年目が無料なのと、２年目以降もだいぶ格安っぽい感じだったので使うことにしました。

AWSでNode.jsを導入するにあたって、下記の記事をそのままやりました。

[AWS EC2でNodeを動作させる](https://qiita.com/oishihiroaki/items/bc663eb1282d87c46e97)

この記事でやってることが何なのか、何も理解しないまま人形のように作業したのですが、なんと普通にNode.jsが動きました。
記事の筆者さんありがとう。

しかし、この記事のままだとhttpsでのやり取りができず、そこではまりました。
何も理解しないまま進めると、応用が利かないから困ります。

なんとか解決したものの、どうやって解決したのか忘れてしまったという。。。
たしかロードバランサ―の部分でhttpsを受け入れてなかったとか、そんな感じだった気がします。

#Socket.io
Node.jsのライブラリであるSocket.ioを使って、リアルタイム対戦を実現しました。
Socket.ioまじですごい。アホでも使えるようにしてくれてる。

基本的には、下の四つだけ覚えたら使えました。

.on()　受信
.emit()　送信
.broadcast()　自分以外に送信
.join()　部屋作る

Firebaseとやらがもっと簡単という噂を聞きましたが、Socket.ioも初心者でも扱えるとてもシンプルなものでした。

#処理のフローをまとめると
無理やりWordpress使って、サーバーも２つ使ってるという構造なので、無駄に複雑です。

リアルタイム対戦の処理をまとめると・・・

１、サーバー１(WordPress)からクライアントにページ情報を送信
２、クライアント側でHTMLとかJavascriptが動く
３、クライアントからサーバー２(AWS、Node.js)に情報送信
４、サーバー２から対戦相手のクライアントに情報送信
５、以下サーバー２を通してクライアント同士で情報送受信

という流れです。


#Qiitaの天才達、ありがとう
開発前は、プログラミング素人の自分が、リアルタイム対戦なんてできるのか？
とか思ってましたが、やってみればできるもんです。
１０年前だったら不可能だったと思いますが、先人の天才達が素人でもできるように、資料やライブラリを公開してくれているので、なんとかなった感があります。
Qiita、めちゃくちゃ参考にしました。

天才達、ありがとう。

Twitter：[@pant2taicho](https://twitter.com/pan2taicho)
ホームページ：[タイピンガーＺ](https://typingerz.com)
コロンコマンド（終了ステータス 0）

こんにちは。
```:``` （コロン）コマンド（__ナル・コマンド__）は終了ステータス ```0``` となります[^1] [^2]。```true``` コマンドと同様です。

```console
$ :; echo $?
0
$ true; echo $?
0
```

* 他の終了ステータスが欲しい場合の方法は：
  * ```!``` を前置する（Bashは対応）
  * ```false``` コマンドを使う
  * ```(exit 1)``` と明示的に書く

```console
$ ! :; echo $?
1
$ false; echo $?
1
$ (exit 1); echo $?
1
```


[^1]: 参考：「[「if then else fi」を一行で書く（シェルスクリプト）](https://qiita.com/kkdd/items/c84d819f1bd54ed77b6a)」
[^2]: 参考：「[何もしない組み込みコマンド ":" （コロン）の使い道](https://qiita.com/xtetsuji/items/381dc17241bda548045d)」
C++チートシート

C++11以降。
たまにしか書かないけどたまに書こうとしてハマりがちな文法など。

- [Wandbox](https://wandbox.org/) : なぜか名前の覚えられないオンラインコンパイラ

# template
## template実装の隠蔽

templateも宣言のみヘッダで公開、実装はCPPに隠蔽とすることができる。

```hoge.hpp
template <typename T> int Hoge(); //宣言
```

```hoge.cpp
template <typename T> int Hoge() { return 1; } //定義
template int Hoge<int>(); //上の定義をそのまま使う実体化
template <> int Hoge<float>() { return 2; } //特殊化
```

```main.cpp
Hoge<int>(); //-> 1
Hoge<float>(); //-> 2
Hoge<double>(); //-> undefined reference
```

## テンプレートテンプレートパラメータ

コンテナ自体をテンプレート引数にする。
**C++17**以前では**typename**キーワード使用不可(下のコードの`class Container`の**class**の部分)。
参考: [テンプレートテンプレートパラメータにtypenameキーワードの使用を許可 - cpprefjp](https://cpprefjp.github.io/lang/cpp17/allow_typename_in_a_template_template_parameter.html)

```cpp
template <template <typename> class Container>
size_t GetSize(const Container<int>& c)
{
    return c.size();
}
const size_t sizeOfVector = GetSize(std::vector<int>{1,2,3});
const size_t sizeOfList = GetSize(std::list<int>{4,5});
```

## emplaceで引数が一つでないコンストラクタを呼ぶ

**piecewise_construct**がいつも思い出せない。

```cpp
std::unordered_map<Foo, Bar> map;
map.emplace(
    std::piecewise_construct,
    std::forward_as_tuple(1, 2, 3), //引数2つ以上のコンストラクタ
    std::forward_as_tuple()); //引数なしコンストラクタ
```

#その他

## UTF-8ヒアドキュメント

参考: [生文字列リテラル - cpprefjp](https://cpprefjp.github.io/lang/cpp11/raw_string_literals.html)

`u8R"(`と`)"`で括る。

```cpp
const char* const json = u8R"({
	"issue": {
		"project_id": 1,
		"subject": "test1",
		"tracker_id": 1,
		"description": "message"
	}
})";
```

## クロージャ(closure)

コピーキャプチャして**mutable**指定して変更する。

```cpp
int count = 0;
auto closure = [count]() mutable { ++count; return count; };
closure(); //->1
closure(); //->2
```

## 結局main関数はどう書けばいいのか

原則として以下の2パターン。
引数にconstを付けたくなるけど我慢する。
[main 関数 - cppreference.com](https://ja.cppreference.com/w/cpp/language/main_function)

```main.cpp
int main() { return 0; }
```
```main.cpp
int main(int argc, char *argv[]) { return 0; }
```

## move pImpl

moveするときは参照の更新を忘れないこと。

```Hoge.hpp
class Hoge
{
public:
    Hoge(Hoge&& source);
    //move代入演算子も同様
private:
    class Impl;
    std::unique_ptr<Impl> impl; //非公開実装
};
```

```Hoge.cpp
class Hoge::Impl
{
public:
    Hoge* hoge;
    Impl(Hoge* const hoge) : hoge(hoge) {}
};
Hoge::Hoge(Hoge&& source)
   : impl(std::move(source.impl))
{
    impl->hoge = this; //忘れずに更新する
}
```
yarn + vue cli で環境構築 (プロジェクト作成)してlocalhost でサーバーを起動する手順 ( #vue )

# コマンド

```
yarn global add @vue/cli
vue create my-project && cd my-project
yarn serve
```

vue create の時にyes no の質問をされたらてきとうに答えたりエンターを押して進む

# http://localhost:8080/ にアクセスする

![image](https://user-images.githubusercontent.com/13635059/80580471-87dd6a00-8a46-11ea-9099-62482c5eba1e.png)

# 参考

[Vue.js を vue-cli を使ってシンプルにはじめてみる - Qiita](https://qiita.com/567000/items/dde495d6a8ad1c25fa43)


# Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/3097











<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
Laravelのレイアウトエンジンを使う

# 目次
Laravelの記事一覧は下記
[PHPフレームワークLaravelの使い方](https://qiita.com/toontoon/items/c4d0371e504c37f6576e)

# Laravelバージョン
動作確認はLaravel Framework 7.19.1で行っています

# Laravelのレイアウト処理
Laravelのレイアウト処理について書いていきます
viewsフォルダ配下に作成したblade.phpファイルを組み合わせて1つのビューとして処理をするものです

# 前提条件
[eclipseでLaravel開発環境を構築する。デバッグでブレークポイントをつけて止める。(WindowsもVagrantもdockerも)](https://qiita.com/toontoon/items/76fa7f8845b20776077c)
本記事は上記が完了している前提で書かれています
プロジェクトの作成もapacheの設定も上記で行っています


# Controllerにメソッド追加
(1) /sample/app/Http/Controllers/SampleController.phpにchildメソッドを追記
`public function child()
    {
        $data = ['msgList' => ["msg1", "msg2"]];
        return view('sample.child', $data);
    }
`

(2) /sample/routes/web.phpに下記を追記
`Route::get('sample/child', 'SampleController@child');`

# viewの作成
(1) /sample/resources/views/layoutフォルダ作成
(2) /sample/resources/views/layout/parent.blade.phpファイル作成

```parent.blade.php
<html>
    <head>
        <title>@yield('title')</title>
    </head>
    <body>
        <ul>
            @section('menu')
            <li>共通メニュー1</li>
            <li>共通メニュー2</li>
            @show
        </ul>
        <div>
            @yield('content')
        </div>
    </body>
</html>
```

(3) /sample/resources/views/componentフォルダ作成
(4) /sample/resources/views/component/msgList.blade.phpファイル作成

```msgList.blade.php
<div>{{ $msgTitle }}</div>
@foreach ($msgList as $msg)
    <div>{{ $msg }}</div>
@endforeach
{{ $addMsg }}
```
(5) /sample/resources/views/sample/child.blade.phpファイル作成

```child.blade.php
{{-- resources/views/layout/parent.blade.phpを使うのでlayout.parentにする --}}
@extends('layout.parent')

{{-- parent.blade.phpの@yield('title')を置換する --}}
@section('title', 'Sample@tpl')

{{-- parent.blade.phpの@section('menu')から@showまでを置換する --}}
@section('menu')
    {{-- parent.blade.phpの@section('menu')から@showまでを描画する --}}
    @parent
    {{-- child.blade.php独自のメニューを描画する --}}
    <li>独自メニュー1</li>
    <li>独自メニュー2</li>
@endsection

{{-- parent.blade.phpの@yield('content')を置換する --}}
@section('content')
    <p>child.blade.phpのコンテンツ</p>

    {{-- resources/views/component/msgList.blade.phpを描画する --}}
    @component('component.msgList', ['msgTitle' => 'コンポーネントタイトル', 'msgList' => $msgList])
        @slot('addMsg')
            <div>addMsg1</div>
            <div>addMsg2</div>
        @endslot
    @endcomponent

    {{-- resources/views/component/msgList.blade.phpを描画する --}}
    @include('component.msgList', ['msgTitle' => 'インクルードタイトル', 'msgList' => $msgList, 'addMsg' => '<div>addMsg1</div><div>addMsg2</div>'])

@endsection

```

# 動作確認
`http://localhost/laravelSample/sample/tpl`

実行結果

```
● 共通メニュー1
● 共通メニュー2
● 独自メニュー1
● 独自メニュー2

child.blade.phpのコンテンツ

コンポーネントタイトル
msg1
msg2
addMsg1
addMsg2
インクルードタイトル
msg1
msg2
<div>addMsg1</div><div>addMsg2</div>
```
画面作成時に気をつけること

# 画面作成時に気をつけること


html、cssは記述が自由すぎる分どう書いていくのがいいのかが結構悩んだりします。
なのでコーディング時に意識することをまとめてみました。


## HTMLのcssの記述順の順番を正しく合わせる。

```html:html

<div class ="box1"></div>

<div class ="box2"></div>
```


```css:css
/* NGパターン */
.box２{
  background-color:red;
}

.box１{
  background-color:blue;
}
```

```css:css
/* okパターン */
.box1{
  background-color:red;
}

.box2{
  background-color:blue;
}

```



記述量が多くなっても、htmlとcssの順番を綺麗に保つことを意識する


## divを乱用しすぎない

```html:html

/* NGパターン */
<div>項目１</div>
<div>項目１</div>
<div>項目１</div>

/* OKパターン */
<ul>
  <li>項目１</li>
  <li>項目２</li>
  <li>３項目</li>
</ul>

```

タグは、本来の役割に応じた使い方をする。


## CSSの値の工夫
軽量でシンプルなソースコードを意識する。CSSは、省略した記述も可能
　・ゼロには単位を付けない。（例：0px→0）
　・ゼロ以下の少数にはゼロを省略する。（例：0.1em→.1em）
　・色の指定が省略できるときは省略する。（例：#FFFFFF→#FFF）

```css:css
/* NG例 */
.box1{
  padding-top: 0; 
  padding-right: 10px; 
  padding-bottom: 20px; 
  padding-left: 10px;
}

/* OK例 */
.box1{
  padding: 0 10px 20px;
}
```

##cssのプロパティを同じ順序で記述

####１　ABC順

```css:css
.button {
    background-color: #fff;
    color: #fff;
    display: inline-block;
    font-size: 1.25rem;
    font-weight: 100;
    margin: 0 auto;
    min-width: 150px;
    padding: 50px;
    text-align: right;
    text-decoration: none;
    vertical-align: middle;
    width: 100%;
}
```

####２　視覚モデル順

```css:css
.button {
    display: inline-block;
    width: 100%;
    min-width: 150px;
    margin: 0 auto;
    padding: 50px;
    background-color: #fff;
    color: #fff;
    font-size: 1.25rem;
    font-weight: 100;
    text-decoration: none;
    text-align: right;
    vertical-align: middle;
}
```

####3　CSScombで任意の順番に自動ソート

cssを貼り付けるだけでプロパティの順番を好きな順番に変えてくれる。


など記述の順番が正式に決まっている形はないが、上記の方法で統一することで可読性の向上に繋がる



##インデント、改行の統一

・インデントはタブ２つで統一する
・コロン後に半角スペースを入れる
・{の後に改行する

などのルールの統一をする

##HTML/CSSのclassの命名規則の統一

####・OOCSS (Object Oriented CSS)

```html:html

<div class="box box-red"> </div> 
<div class="box box-blue"> </div> 
<div class="box box-green"> </div> 

```

```css:css

/* boxの構造部分 */
.box {
    width: 100px;
    height: 100px;
}
/* boxの見た目（色）の部分 */
.box-red {
    background-color: red;
}
.box-blue{
    background-color: blue;
}
.box-green{
    background-color: green;
}d-color:blue;
}

```




####・BEM

BEMでは、Block、Element、Modifierの三つに分けてクラス名を書く

```html:html
<button class="box__button box__button--red">ボタン</button>

<button class="box__button box__button--blue">ボタン</button>

```
####・SMACSS (Scalable and Modular Architecture for CSS)

OOCSSは「構造と視覚を切り離す」という考え方で作られている

```html:html

<div class="box large">
	<button class="button bg-red">ボタン</button>
</div>
<div class="box">
	<button class="button bg-blue">ボタン</button>
</div>
<div class="box">
	<button class="button bg-purple">ボタン</button>
</div>
```

## 終わりに
一つ一つで見ると意外と単純なことですが、意外と意識できていなかった部分があったので、
これからは意識してコーディングしていきたいと思います。
読みやすいコードを意識するために

# 読みやすいコードを意識する

気を抜くと冗長なコードになりがちになるので、意識づけのために
可読性の高くなるポイントについてまとめました。


##条件式を簡潔化

```java:java
if (a == 1 && b == 2 && c == 3 && d == 4){
  System.out.println("test");
}

//if 文の条件式を折り返す

if (a == 1 && 
   b == 2 &&
   c == 3 &&
   d == 4){
  System.out.println("test");
}

//メソッドを作り可読性をあげる
if (output()){
  System.out.println("test");
}

private boolean isValidType(){
//処理
return true;
}
```


##ネストが深すぎる

```java:java
//NG
if(a == 1){
    if(b == 2){
        if(c == 3){
            if(d == 4){
                if(e == 5){
                   System.out.println("test");
                }
            }
        }
    }
}

//OK
////同じくメソッドを作り可読性をあげる
if (isValidType()){
  System.out.println("test");
}

private boolean isValidType(){
//処理
return true;
}

```

##変数名やメソッド名が不適切

命名規則にそって宣言

####スネークケース
```java:java
String user_name = "太郎"
```
####ローワーキャメルケース
```java:java
String userName = "太郎"
```
####アッパーキャメルケース
```java:java
String UserName = "太郎"
```
####チェインケース
```java:java
String user-name = "太郎"
```

####codicを使って自動で変数名を作成
<img src="https://yuis-webmemo.org/static/d93a05598c574488c189b82031cc645a/4ecb8/home-min.png" width=70%>


##スコープ有効範囲の意識
```java:java
//NG
class Calculator {
  public static int num = 0;
  public static void alterNumber(int _num) {
    num = _num;
  }
  public static void main(String args[]) {
    alterNum(23);
  }
}

//OK
//アクセス制御子によりクラスの中だけでしか実行できない
class Calculator {
  private static int num = 0;
  private static void alterNumber(int _num) {
    num = _num;
  }
  public static void main(String args[]) {
    alterNum(23);
  }
}

```
##コードの統合化

```java:java
//NG
public class StandAction extends BaseAction {
  public void Stand(Account account) {
    if(account.getFirstName() == null || account.getFirstName().length()== 0) {
      return;
    }
    if(account.getLastName() == null || account.getLastName().length() == 0) {
      return;
    }
  }
}


//OK
//メソッドを追加したので可読性の向上
public class Stand extends BaseAction {
  public void Stand(Account account){
    if(isEmpty(account.getFirstName())){
      return;
    }
    if(isEmpty(account.getLastName())) {
      return;
    }
  }
  public boolean isEmpty(String str) { 
    return str == null || str.length() == 0;
  }
}
```
Angularでアプリのテーマ管理

#はじめに
世の中にダークモードが流行ってる中、ダークモードを実装するには色んな方法がありますが、今回はAngularでアプリのテーマ (背景、色)を管理してみった。

今回のアプリに使用したものはこんな感じです。

- Angular 9
- Angular Material 9.2.1

##Angular Materialによるカラー管理
Angular Materialのインストールと設定が終わりましたら、まずはテーマ作成用のscssファイルを作成する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/557787/91a5f462-9f26-7fa7-a776-fd3f8c46228d.png)
最初はAngular Materialのテーマ機能をインポートして、コアmaxinをincludeする。
これでAngular部品のテーマ作成機能が使えるようになりました。

##カラーパレットを設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/557787/26c4b95d-8fc5-8c6c-79fb-ea710fcc3062.png)
Angular Materialのカラーパレットはprimary(基本)、accent(アクセント)、warn(警告)の三色で構成されています。SCSS変数でそれぞれを設定して、mat-light-theme maxinに注ぎます。


Materialパレットはこちらで参考してください(https://material.io/resources/color/)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/557787/5d2ce34d-7a54-66d7-2068-b89aa4d07c91.png)
上記の構成で最終的にはこういう感じになります。

他の部品を見てみると....
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/557787/c8bc39a1-eb0b-1292-1c2b-c4f6e0f6618b.png)
必須項目の色がちゃんとwarnの色になっていますね！

##変更用テーマを作成
ここまでデフォルトのテーマを設定できましたので、ここからは変更用のテーマをもう一個作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/557787/3da07414-2247-888e-0518-49a8f8898f00.png)
今までのやり方と変わらず、ダークテーマ用のSCSS変数を設定して、mat-dark-themeに注ぎます。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/557787/60ae10ec-793d-f4b1-1594-9619c727f00e.png)
こういう感じになります。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/557787/d0d0da0d-33ff-ed31-32e3-5b55ee928276.png)
あとはこのように好きなクラスで囲き込みます。これによって、"unicorn-dark-theme"のDOM要素はこのテーマに適用するようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/557787/124e4a98-f804-8315-813d-3f17598e36c5.png)
テーマ変更ボタン(一番右のボタン)をメニューに追加する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/557787/076be59e-d1b2-1073-389a-016e6d0c7b22.png)
ボタンを押すとテーマサービスで対象テーマを適用する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/557787/780fec85-b07d-6732-f2ad-f485541d18e9.png)

テーマサービスが処理行ったらイベントをAppコンポーネントに送って、対応するクラスをDOM要素に追加する。これで完成です。

##最終的にこうなります
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/557787/1fb234e5-4fae-4c37-11ae-f13e98d7ae03.png)
デフォルトテーマ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/557787/3a101e35-b25d-b06b-4bc2-b8243605812e.png)
テーマボタン押下後

##まとめ
Angular MaterialのTheming機能を紹介させていただきました。
Stackblitzにセットアップなしで試すことできますので、ぜひ皆様もやってみましょう！
今回の成品をstackblitzに載っていますので、良かったら参考してみてください！
(https://angular-crosscomponent.stackblitz.io/)