OmniAICreator/Qiita-1.07M huggingface dataset:
PHPの静的コード解析をかんたんに導入する

PHPの静的コード解析をかんたんに導入できるように Composer のパッケージにしました。

[grohiro/php-ruleset: Ruleset for PHP](https://github.com/grohiro/php-ruleset)

出力例
![スクリーンショット 2018-11-07 21.21.46.png](https://qiita-image-store.s3.amazonaws.com/0/126845/437f0e8f-7eaa-0460-671e-fffccd433082.png)

フレームワークは Laravel と CakePHP のルールセットが入っています。CakePHP はアンダースコア付きのメソッド名やプロパティ名を使用するので一部のルールを無効化しています。もちろんこの2つ以外のフレームワークでも使えます。

PHP_CodeSniffer(phpcs) をインストールするとコードを自動で修正するためのコマンド `phpcbf` も一緒にインストールされるので使えるようにしてあります。`composer run cs-fix` を実行してください。

詳細はリポジトリのREADME.mdをご覧ください。

# ルールセットのカスタマイズ

ルールセットをカスタマイズする方法は3つあります。

1. `composer install`した後に `vendor/grohiro/php-ruleset` のルールを変更する
1. リポジトリを fork してカスタマイズする
1. PullRequest を送る

1の方法はローカルのみで有効です。チームで共有する場合には不便です。2はチームで共有したり、社内用にカスタマイズするときに有用です。README.md のリポジトリ URL は適宜変更してください。

新しいフレームワークの対応や共通で使えるようなカスタマイズはぜひ PullRequest をお願いします。
リアルタイム性の高いWebアプリケーションを作るために必要そうな技術

リアルタイム性の高いWebアプリケーションを作りたい時のヒントになれば :relaxed:
ex. テキストチャット、複数ユーザーが同時編集するようなサービス

# キーワード
- Polling
- WebSocket
- WebRTC

# Pollingについて
**Polling** は、一般的なHTTPリクエストを使用した手法で一番取り組みやすい手法。

- Polling: Ajaxを使用して、クライアント起因で定期的にサーバーに接続を行う
- Long Polling(Comet): アクションはPollingと同じだが、サーバーからのレスポンスを一定時間引き延ばすことにより、Ajaxより、より多くのデータを取得できる可能性がある

# WebSocketについて
**WebSocket** は、コンピュータネットワーク用の通信規格の一つ。
URIスキームは `ws:` と `wss:`

## メリット
- 要求がクライアント側のみでなく、サーバー側からも行える
- HTTPレスポンスヘッダに比べて、フレームサイズが小さい
- データ送信の多様性
    - クライアント・サーバー、双方向から任意のデータを送信可能
    - 送信完了前に、別の送信を開始可能
    - 送信がクロスしても、問題ない

## デメリット
- 未対応ブラウザの可能性がある
    - ただし、モダンブラウザの多くで対応済み
- WebSocketプロトコルに未対応のネットワーク機器が多い
    - `wss://～`（`https://～`のようなもの）を用いれば解決。TLS/SSLで暗号化後のレイヤなので、通信経路上では見分けが付かない。

## HTTPとWebSocketの通信量比較
**仮定**
1. HTTPのヘッダ長は200 byte
2. WebSocketはマスク有り（4 byteのMasking-keyあり）

**本文が10 byteの場合**

- HTTP
    - 200 + 10 = 210 byte
- WebSocket
    - 基本ペイロード長の範囲に収まる
    - 6 + 10 = 16 byte

**本文が1024 byteの場合**

- HTTP
    - 200 + 1024 = 1224 byte
- WebSocket
    - 拡張ペイロード長で+2 byte
    - 8 + 1024 = 1032 byte

## まとめ
- 本文が小さいほど、HTTPとの差が顕著
- 小さいメッセージを頻繁にやり取りするケースで、WebSocketは特に有利

## 言語別 WebSocket 対応ライブラリ
- Node.js
    - [Socket.IO](https://socket.io/)
- Golang
    - [gorilla/websocket](https://github.com/gorilla/websocket)
- Scala
    - [Play Framework](https://www.playframework.com/documentation/2.6.x/ScalaWebSockets)

※一部のみ抜粋。上記以外にも「対象言語 + WebSocket」でググればいろいろ情報出てきます。

# WebRTCについて
**WebRTC(Real-Time Communication)** とは、Webブラウザ間のテキストチャット/ボイスチャット/ビデオチャット/P2Pファイル共有などが、プラグイン無しで行えるリアルタイムコミュニケーション用のAPI定義です。

単一の規格ではなく、WebでRTCを行うための仕様群

## WebRTCを構成する仕様
- PeerConnection
    - クライアント同士をP2Pで接続するための仕様
    - 下位層はUDP
- DataChannel
    - 任意のデータをPeerConnection経由で送るための仕様
    - テキストメッセージ・ドキュメント・写真等、使い方は自由
- MediaStream
    - ブラウザから、マイクやカメラへアクセスするための仕様
    - MediaCaputureで取得したStreamを、PeerConnection経由で通信相手とやり取り
    - 正確には、WebRTCの一部ではない

## PeerConnectionについて
- STUNサーバ（STUN：Simple Traversal of UDP through NAT、別名：UDPホールパンチング）
    - NATの内側にあるノードから、グローバルなIP/Portを確認して「穴」を開ける仕組み
- シンメトリックNAT
    - 「内側から外へアクセスした時の相手先からのアクセス」のみポートマッピングが有効
        - それ以外は遮断
    - STUNサーバでないクライアントは、STUNサーバ向けに開けられたIP/Portを使っても別クライアントへ接続できない
- TURNサーバ（TURN：Traversal Using Relay NAT）
    - NATの内側にあるノードに対して、透過的な経路（トンネル）を提供する
    - すべての通信をパススルーするので、ノードが増えるほどTURNサーバーの帯域が消費される
        - STUNサーバに比べ、運用コストが高い
- ICE（Interactive Connectivity Establishment）
    - 常にSTUNを使うと、シンメトリックNATの場合に、到達できない
    - 常にTURNを使うと、コストが高い
    - ICEは、STUNが使えない時だけ、TURNへフォールバックする仕組み

## まとめ
- Web APIに比べて、ネットワーク周りのハードルが高い
- [SkyWay](https://webrtc.ecl.ntt.com/) のようなプラットフォームを活用すれば比較的カンタンに環境は構築できそう

# 参考文献
- 「WebSocket / WebRTCの技術紹介」
    - https://www.slideshare.net/mawarimichi/websocketwebrtc
- 「リアルタイムなwebアプリを実現する方法(ポーリング、Comet、Server Sent Events、WebSocket)」
    - https://www.kimullaa.com/entry/2016/01/17/231359

# さいごに
個人ブログにオリジナル（日本語＆英語）をUPしています。
この記事が良いと感じた方は、そちらにもリアクション頂けると嬉しいです:relaxed:
https://blog.n11sh1.com
オブジェクト指向の理解が進まない理由を考えてみた

##はじめに
オブジェクト指向の考え方がプログラミングをしていく上で便利だし、なんとなく継承やカプセル化、ポリモルフィズムという特徴を持っていることは知っている。しかし、なかなか大きなメリットを感じることは難しい。メリットを感じれないことがオブジェクト指向を遠ざけているのでは?(概念としてなんとなく分かっていても、オブジェクト指向の原則に従ってプログラムしていく重要度を実感するまでに至らない)
そこで今回自分がそうなってしまう理由をオブジェクト指向を簡単にまとめながら考えてみました。

##オブジェクト指向とは?
プログラムの設計や実装についての考え方の一つ。
システムのふるまい方を現実世界のオブジェクト(モノ)ととして捉え考えるやり方である。

##オブジェクト指向のメリット
・大規模な開発に向いている
 　-設計さえしっかりしていれば複数人で開発することが容易になる
・仕様変更・再利用性が高い
ようするにシステム設計・実装・運用する一連の流れで楽をすることが出来る!

##オブジェクト指向のメリットを成り立たせる3つの概念
・継承
・カプセル化
・ポリモルフィズム


###継承
クラス定義の共通部分を別クラスにまとめる仕組み
特徴
-再利用・拡張がしやすい
-重複コードの削減

このメリットは試しのコードを書いたり小規模な開発くらいだと再利用や重複の削減必要性を実感しにくいどころか工数が増えるため気を付けなくてもちょっとくらい良いじゃんとなりがち...

###カプセル化
オブジェクトの隠ぺい(ブラックボックス化)
ゲッターとセッターの利用
特徴
-外部から使う際は複雑なことを考えずに済み、内部実装の変更が容易になり修正などの変更に強くなる
-オブジェクトの内部で振る舞いが完結している

実際に趣味等の一人で実装する際は変更やメンテナンスに関する操作をする機会がないことやあまりコードを再利用することがないことがある


###ポリモーフィズム
同じメソッドの呼び出しであっても、オブジェクトが変われば振る舞いが変わる
関数のオーバーロードもその一つ
特徴
-共通のインタフェースが用意できるので拡張の際、柔軟な対応が可能になる

メモ:正直今でもあんまりしっくりと来てないのでこれから理解できるように取り組んでいきたい



##メリットを感じきれない理由
そもそもオブジェクト指向は複数人での開発向けであり、システムの保守、運用のためのメンテナンス性まで考慮されている。
しかし、その恩恵を最も受けるのは大規模開発における設計を行う上流工程の人である。また、末端で一部のコードを書く際には設計通りに作る必要があり、ある程度の構成は決まっているためオブジェクト指向全体を意識することが少ない。
こうした理由や継承・カプセル化・ポリモーフィズムの個々の機能に関しての特徴は知っていても使う際に恩恵を受けきれないことがオブジェクト指向全体の理解までには時間がかかってしまうのではと考えた。

##まとめ
オブジェクト指向が難しい理由
・試し程度にやってみる分にはメリットの実感を得ることが難しい
・設計を自分で行いそれなりに大きめの規模でないとありがたみが分からない

オブジェクト指向を理解するために!
・最初から理解するのは当然無理であることを頭に置いておく
・なぜオブジェクト指向が使われるのかメリットを把握しておく
・継承・カプセル化・ポリモルフィズムのメリットを意識し、コードを書くことを心がけることであとからの修正や機能追加の際にありがたみを得る
・とりあえず適当に書いてしまったコードで痛い目にあってメリットのありがたみをかみしめる(多分これが一番早い)
・オブジェクト指向が生まれた経緯など思想から理解していく(理解を深めていくために)

結局調べて文章を読むだけだと理解できないので実際にコードを書いたり痛い目にあいながらメリットを実感に理解を深めていこうという事です。アウトプット超大事!

##参考文献
オブジェクト指向が5000%理解できる記事
https://qiita.com/gorillab/items/b2f8e39d7cc23ad505f9
プログラマー１年生がポリモーフィズムについて学んだのでＲＰＧで説明する。
https://qiita.com/Nossa/items/b6e2f4ed0fa079359fc5
PHPで学ぶオブジェクト指向
https://qiita.com/ritukiii/items/a1979c3bcdcea9454d53
【WordPress】メインクエリとメインループ

## メインクエリとは
**データベースから呼び出される記事データ**のこと
WPはデフォルトで、ユーザがリンクをクリックしてページを表示する際に記事を取得する条件(メインクエリ)を決めて、DBから記事データを取得してくるところまでを自動で行ってくれる。

## メインループとは
**メインクエリをテンプレートファイル内で表示するループ**のこと


```php:メインループ記述例
<?php if (have_posts()): ?>
  <?php while (have_posts()): the_post(); ?>
    ...
  <?php endwhile; ?>
<?php endif; ?>
```
上記のような記述に、**「このアーカイブページではX件、こっちではXX件記事を表示させたい」**といった処理を加えるにはどうすれば良いか調べたところ、**query_posts**を使えば解決できると多くの記事で見かけた。
だが、先輩に聞いてみたところ、「query_postsを使う方法はよくない」とのこと、、
何がよくないかと言うと、
「メインクエリを書き換える際に再度データベースを読み込む必要があるのでページの表示速度が遅くなる懸念などがあるのでよくない」らしい。
そこで登場するのが**「フック」**と呼ばれる記法。

## フックとは
フックを記述すれば、「**メインクエリを書き換える**」ことができる。
「**メインクエリを書き換える**」という点については**query_posts**と同じだが、**add_action( 'pre_get_posts', 'five_posts' );**といったアクションフックと呼ばれる記述をすればイベントが発生したときに**機能を追加したり削除したり**できる。
上記の理由からアクションフックでメインクエリを書き換えると無駄なクエリを読み込まなくて済むので推奨されているらしい。
だとすればあとは、フックの記述方法と記述場所がわかれば、解決！！
↓ 続きは参考URL ↓
https://thewppress.com/libraries/alters-query-conditions-in-a-right-way/

## フックを使用した場合の記事新着一覧表示ロジック
⑴ ユーザがリンクをクリックしてページを表示する
⑵ アクションフック（ここでメインクエリを書き換える）
⑶ WordPressがデータベースに対し、ページに応じた適切なクエリを行い、投稿を表示する準備を行う
⑷ テンプレートファイルのメインループ処理が開始される（アクションフックで表示件数を記述している分だけループされる）
ハンズオン準備５：ハンズオンのために作成するレポジトリ群の構想

[ハンズオン準備](https://qiita.com/hfu/items/6026eec6816465d7e7a9)の第５回です。

# レポジトリ群の構想
ハンズオンのための材料およびプログラムは全て　git ベースの公開レポジトリで運用します。そうすることにより、可搬性・運用性・[ツッコミビリティ](https://ja.wikipedia.org/wiki/%E3%83%A2%E3%83%92%E3%82%AB%E3%83%B3%E6%97%8F_(%E3%83%8D%E3%83%83%E3%83%88%E7%94%A8%E8%AA%9E))を高めることができると考えるからです。

本稿では、作成・利用するレポジトリ群の構成を整理します。

## 前提：国連ベクトルタイルツールキットの構造
国連ベクトルタイルツールキットの構造は、現在、次のとおり整理しています。
<img width="1068" alt="国連ベクトルタイルツールキットの構造" src="https://qiita-image-store.s3.amazonaws.com/0/102082/8523b291-56ac-0475-51c9-f2eca67114f8.png">
この構造を参照しつつ、ハンズオンのためのレポジトリ群を構想していきます。

# spinel-data: ハンズオン用ソースデータ
ハンズオン用のソースデータを https://gitlab.com/osgeo-jp/spinel-data に置きました。ソースデータの一つが 100MB を超えるので、このレポジトリについては GitHub ではなくて GitLab に置いています。

# spinel-produce: インポートプログラム
ソースデータをダウンロードし、インポートを行うスクリプトを https://github.com/un-vector-tile-toolkit/spinel-produce で作っていきます。node と npm が使えれば動くスクリプトを作ります。

このスクリプトの出力を tippecanoe にかけて、mbtiles ベクトルタイルパッケージを作ります。

# spinel: ベクトルタイルサーバ
ローカルホストで HTTP で動くモードのベクトルタイルサーバを https://github.com/un-vector-tile-toolkit/spinel で作っていきます。

これは、[pietra](https://github.com/hfu/pietra) を小規模改修したものになると思います。

# mbq: ベクトルタイルサイズ分布計測
ベクトルタイルサイズの分布を計測するためのスクリプトが、https://github.com/hfu/mbq にあります。

[以前のハンズオン資料](https://github.com/hfu/hands-on-prod)　にあるとおり、このプログラムを利用するには、c++11 が必要です。このため、ハンズオンではオプショナルになるかもしれません。
macでファイルに色タグをターミナル（コマンド）でつける

macでターミナル（つまりコマンド）からファイルへ色タグをつけたいときのコマンド

## xattrコマンドを使う
このようなコマンドがあるそうな。
これを使えば、mac特有の拡張属性とかいろいろ付けたり外したりできる。

ひとまずhelp打ってみる。

``` 
$ xattr -h
usage: xattr [-l] [-r] [-s] [-v] [-x] file [file ...]
       xattr -p [-l] [-r] [-s] [-v] [-x] attr_name file [file ...]
       xattr -w [-r] [-s] [-x] attr_name attr_value file [file ...]
       xattr -d [-r] [-s] attr_name file [file ...]
       xattr -c [-r] [-s] file [file ...]

The first form lists the names of all xattrs on the given file(s).
The second form (-p) prints the value of the xattr attr_name.
The third form (-w) sets the value of the xattr attr_name to the string attr_value.
The fourth form (-d) deletes the xattr attr_name.
The fifth form (-c) deletes (clears) all xattrs.

options:
  -h: print this help
  -l: print long format (attr_name: attr_value and hex output has offsets and
      ascii representation)
  -r: act recursively
  -s: act on the symbolic link itself rather than what the link points to
  -v: also print filename (automatic with -r and with multiple files)
  -x: attr_value is represented as a hex string for input and output
```

ということで、
p : 拡張属性の表示
w : 　　　　の付与
d : 　　　　の削除（指定された属性）
c : 　　　　のクリア（全属性）
ベースはこれで、追加オプションもちらほら。

一度、適当なファイルに赤色のタグ付けて`xattr [file]`を実行。

```
$ xattr tagtest 
com.apple.FinderInfo
com.apple.metadata:_kMDItemUserTags
```
２つの属性が付与されていた。
上の方の`FinderInfo`が色タグ（１つ）の情報で、
下の`_kMDItemUserTags`はユーザー定義タグ情報とかだそうな（あと複数タグの情報とかもこちらっぽい）
`xattr -p -x com.apple.FinderInfo [file]`とコマンドを打って、内容確認

```
$ xattr -p -x com.apple.FinderInfo tagtest 
00 00 00 00 00 00 00 00 00 0C 00 00 00 00 00 00
00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00
```

このHexの`0C`の部分がタグの色の情報だそうな。（0Cは赤）

コマンドで色タグを付ける場合は、

```
$ xattr -wx com.apple.FinderInfo "00 00 00 00 00 00 00 00 00 0C 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00" [file]
```

Hexが長い…
で実際に赤色のタグをターミナルからつけることができた。


## 色情報
none = 0, 1
grey = 2, 3
green = 4, 5
purple = 6, 7
blue = 8, 9
yellow = A, B
red = C, D
orange = E, F
だそうな。
（拾った情報で全部は検証していない）


## ユーザータグとか複数色タグをつける方法
XMLとか作ったりしていけるみたい。
未検証
【Python】「あぁ、fizzbuzz書きてぇ」となった水曜の夜に

# はじめに
著名なFizzBuzz問題を解きたくなったので、解きました。
正解だけ貼り付けても面白みがないので、
~~間違い~~(o途中経過)とその修正プロセスなども併せて書きましたので、
間違いを笑っていただけると幸いです。

# FizzBuzz
プログラマがプログラミングの基本である順次処理、変数、反復処理、条件分岐などが使えるかを
短時間でざっくり判断するときに使われる題材

【下記を実行するプログラムを作成せよ】
- 1から100までを出力
- 3の倍数はfizzと出力
- 5の倍数はbuzzと出力
- 3と5の倍数はfizzbuzzと出力

## 20秒くらいで書いたfizzbuzz(!当然動きません！)
```python
for i in range(100):
    if i % 3 == 0
        print('fizz')
    else if i % 5 == 0:
        print('buzz')
    else:
        print(i)
```

実行(1回目)
<details><div>

```powershell
  File "C:your/files/path/fizzbuzz.py", line 2
    if i % 3 == 0
                ^
SyntaxError: invalid syntax

Process finished with exit code 1
```
</div></details>
## 以下修正していきます
### 1) if文の末尾に:(コロン)が不足している
<details><div>

```python
#before
if i % 3 == 0
#after
if i % 3 == 0:
```
実行(2回目)

```powershell
  File C:your/files/path/fizzbuzz.py, line 4
    else if i % 5 == 0:
          ^
SyntaxError: invalid syntax

Process finished with exit code 1
```
</div></details>
### 2) else if ではなく elif
<details><div>

```python
#before
else if i % 5 == 0:
#after
elif i % 5 == 0:
```
実行(3回目)

```powershell
fizz
1
2
fizz
4
buzz
fizz
7
....
94
buzz
fizz
97
98
fizz

Process finished with exit code 0
```
おっ！動いたしOK!!
しかし、0~99までの出力となっていることに気づく。
</div></details>
### 3) rangeの条件文の指定が正確でない
<details><div>

```python
#before
for i in range(100):
#after
for i in range(1,101):
```
実行(4回目)

```powershell
1
2
fizz
4
buzz
....
98
fizz
buzz

Process finished with exit code 0
```
よっし。動いた。
ん？15の処理いれてないわ。
</div></details>
### 4) 15で割る数の時の処理が不足
<details><div>

```python
#add
    if i % 15 == 0:
        print('fizzbuzz')
```
実行(5回目)

```powershell
1
2
fizz
4
buzz
....
98
fizz
buzz

Process finished with exit code 0
```
</div></details>
# 最終コード
```python
for i in range(1,101):
    if i % 15 == 0:
        print('fizzbuzz')
    elif i % 3 == 0:
        print('fizz')
    elif i % 5 == 0:
        print('buzz')
    else:
        print(i)
```
ふう。よかった。
#感想
基本的な構文の問題は定期的に解く時間があるとよいかもしれません。
[vim]最低限vimを操作するためのコマンド

#0.前置き
最低限これさえ頭の隅にあればええやろ
というコマンドを並べただけの記事

#1.文字を入力したい

|コマンド|内容|
|:--|:--|
| i | カーソルの位置に文字を入力 |
| I | カーソルのある行頭に文字を入力 |
| a | カーソルの右側に文字を入力 |
| A | カーソルのある行末 に文字を入力 |
| o | カーソルのある行の次の行頭 に文字を入力 |
| O | カーソルのある行の前の行頭 に文字を入力 |

#2.行番号出したい

|コマンド|内容|
|:--|:--|
| :set nu | 行番号表示 |
| :set nonu | 行番号非表示 |

#3.検索したい

|コマンド|内容|
|:--|:--|
| /キーワード | キーワードを検索（下方向へ） |
|:--|:--|
| ?キーワード | キーワードを検索（上方向へ） |
| n | 次の検索 |
| N | 前の検索 |

#4.保存したい

| コマンド | 内容 |
|:--|:--|
| :w | 保存 |
| :w 別ファイル名 | 別名で保存 |
| :q | 終了 |
| :wq | 保存して終了 |
| :wq 別ファイル名 | 別名で保存して終了 |
| :q! | 強制終了（保存なし） |
【git】あの頃からやり直したい/今までのことはなかったことにしたい（最新masterの状態から過去に戻りつつ異なる変更を反映させる）


# 一部の変更（コミット）だけ反映する方法

**masterブランチは最新機能をコミットマージした状態で、あとは反映するだけ！**
という状態で文言の変更対応などが入ってきたりした場合、困ります（困ります）
その場合は、未反映の機能を除いた状態で文言修正対応を本番環境へ反映しないといけないので、
本番環境の状態までさかのぼり、その地点からブランチを切って対応する必要があるのでその方法を書き記しておきます。



## 1．本番環境と同じ状態のコミット番号を確認する

↓こんな感じの数字の羅列です

```
3w42r42wgd1c51d0142ba23dr8vsiovssle752vsds...
```

## 2．新しくリポジトリを作り、その時にコミット番号を指定する

```
git checkout -b branch_name [commit-id]
```

**SourceTree**の場合は「ブランチ」を押した際に「指定のコミット」で戻したいコミット番号を指定する。
![WS000058.JPG](https://qiita-image-store.s3.amazonaws.com/0/85815/a07f4b17-59ae-552e-0017-edf2cd5e44c8.jpeg)
「**指定のコミット**」にチェックを入れて、「**...**」をクリックするとコミットを選べる画面が表示されます。

## 3．新しくはやしたリポジトリに対して変更（コミット）をマージする

マージします


## 4．新しくはやしたリポジトリをプッシュ
プッシュしましょう

```
git push Fix-user-name
```

## 5．本番環境でプッシュしたリポジトリをチェックアウトする
リモートリポジトリにチェックアウトする方法

```
git checkout -b Fix-user-name origin/Fix-user-name
```

## 6.キャッシュクリア系のコマンドを叩く

ここはお好みで

# おわり
- たぶんこのパターンは運用方法が悪い気がしますね

# 参考
- [過去のコミットからブランチを作る - basyura's blog](http://blog.basyura.org/entry/20120229/p1)
- [Git で特定のコミットからブランチを切りたい（作成したい） - Qiita](https://qiita.com/wnoguchi/items/dabe6e05388faf75f00c)
プログラミング哲学概論 - はじめに

はじめに

プログラミングとは命令のこと。
概念とは作用とイメージの総称。
知識とは紐付く概念の群。

間違った認識はホラーであるなら、
全ての文章は明確に厳密に事実のみを
書かなければならない。
それがプログラミングの技術に関するサイトであるならば。

それならば全てのプログラミングとそれにまつわる文章はおよそコピーとペーストと並び替えによって成り立つ。

プログラミングの技術について交流する場であるなら、技術的な話題をすることが必要で、その時必要なのは正誤性が第一であるかどうか。プログラミング技術の交流サイトであるなら、交流とはコミュニケーションであり、その時本当に正誤性が第一優先であるかどうか。指摘とは穴について埋める作業であり、それもまたコミュニケーションであった。完全なコードが、完全な知識が、完全な文章がそこにあるなら、誰もコミュニケーションなど取れない。それは神の啓示とコピー&ペーストの複製だ。

「完璧な文章などいったものは存在しない」

村上春樹　風の歌を聴け

序

これから書かれる文章と知識を、名も知らないA先生に捧げる。
VS Codeのindent-rainbowでインデントを虹色にする

VS Codeのindent-rainbowというExtensionsを入れるとインデントに色がつくと聞いてやってみました。
https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">VSCode に indent-rainbow って拡張機能を導入したら、インデントに色がついて、深さが変わるごとに違う色に変化するようになった<br>これは便利 <a href="https://t.co/5VTRN66yat">pic.twitter.com/5VTRN66yat</a></p>&mdash; kodai (@0918nobita) <a href="https://twitter.com/0918nobita/status/1059231948009140225?ref_src=twsrc%5Etfw">2018年11月4日</a></blockquote>

ただし、デフォルトの色は控えめだったので、もっとくっきりと虹色にしてみました。

まず、indent-rainbowをインストールして、Code > Preferences > Settings を開いて、ColorsとError Colorを変更します。

![indent-rainbow-settings.png](https://qiita-image-store.s3.amazonaws.com/0/62293/99d50bb7-c67a-ae73-a051-36f3c1baec85.png)


![indent-rainbow-user-settings.png](https://qiita-image-store.s3.amazonaws.com/0/62293/e937f9ed-819a-88b7-575c-320cf08897da.png)

今回はError Colorは真っ白にして、インデントの色は虹の7色を紫から赤に向かって指定しました。

![indent-rainbow-rainbow-version.png](https://qiita-image-store.s3.amazonaws.com/0/62293/34cabf5b-7cde-bd0f-1282-e6ee925a097c.png)

こんな風に、インデントが素敵な虹色になりました。
【jQuery】読み込み時にセレクトボックスである項目以外（selected等）の項目を削除する


# 画面読み込み時にセレクトボックスである項目以外の項目を削除させる

例えば都道府県を選択させるのにセレクトボックスがあるとします。
ページを読み込み時にそのセレクトボックスで「大阪府」以外の項目を削除した状態で表示させたいときに以下のようにかけばいけます

# コード例

```html
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<select name="prefectures">
<option value="" selected>都道府県</option>
<option value="1">北海道</option>
<option value="2">青森県</option>
<option value="3">岩手県</option>
<option value="4">宮城県</option>
<option value="5">秋田県</option>
<option value="6">山形県</option>
<option value="7">福島県</option>
<option value="8">茨城県</option>
<option value="9">栃木県</option>
<option value="10">群馬県</option>
<option value="11">埼玉県</option>
<option value="12">千葉県</option>
<option value="13">東京都</option>
<option value="14">神奈川県</option>
<option value="15">新潟県</option>
<option value="16">富山県</option>
<option value="17">石川県</option>
<option value="18">福井県</option>
<option value="19">山梨県</option>
<option value="20">長野県</option>
<option value="21">岐阜県</option>
<option value="22">静岡県</option>
<option value="23">愛知県</option>
<option value="24">三重県</option>
<option value="25">滋賀県</option>
<option value="26">京都府</option>
<option value="27">大阪府</option>
<option value="28">兵庫県</option>
<option value="29">奈良県</option>
<option value="30">和歌山県</option>
<option value="31">鳥取県</option>
<option value="32">島根県</option>
<option value="33">岡山県</option>
<option value="34">広島県</option>
<option value="35">山口県</option>
<option value="36">徳島県</option>
<option value="37">香川県</option>
<option value="38">愛媛県</option>
<option value="39">高知県</option>
<option value="40">福岡県</option>
<option value="41">佐賀県</option>
<option value="42">長崎県</option>
<option value="43">熊本県</option>
<option value="44">大分県</option>
<option value="45">宮崎県</option>
<option value="46">鹿児島県</option>
<option value="47">沖縄県</option>
</select>
```

```js
// 「大阪府」以外の項目を削除する
$('[name="prefectures"] option').each( function(){
    // 「大阪府」のvalue="27"
    if($(this).val() != '27') {
        $(this).remove();
    }
});
```

実際の動きは以下のCodePenを参照

# CodePen

<p data-height="265" data-theme-id="0" data-slug-hash="VVvObK" data-default-tab="html,result" data-user="sola-msr" data-pen-title="VVvObK" class="codepen">See the Pen <a href="https://codepen.io/sola-msr/pen/VVvObK/">VVvObK</a> by sola-msr (<a href="https://codepen.io/sola-msr">@sola-msr</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

# おわり
 - jqueryさいこーですよね（しろめ）
Kriging手法

忘れないように自分用メモ。

# 概要
空間的内挿手法で、地点ごとのデータから、未計測の地点のデータを予測する


# 方法
セミバリオグラム

![image.png](https://qiita-image-store.s3.amazonaws.com/0/304482/7f96f453-1dd3-3656-9120-767030771d87.png)

セミバリオグラムと呼ばれる関数
を、縦軸にγ、横軸にhを撮ることで

![image.png](https://qiita-image-store.s3.amazonaws.com/0/304482/66f21463-e429-5f13-cf51-faf21d756358.png)

このようなグラフが得られる。
ここで、hを決めうちにして、クラス分類すると

![image.png](https://qiita-image-store.s3.amazonaws.com/0/304482/95f246a8-6a99-8e1f-9612-ef164002997a.png)
こうなる。

この雲たちを、モデルでフィッティングを行う。
球形モデル
指数モデル
ガウスモデル
などの関数を用いて、フィッティングを行う。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/304482/7a6f4ffa-b144-3952-88b4-d8760239c6ad.png)

フィッティングを行うと

![image.png](https://qiita-image-store.s3.amazonaws.com/0/304482/c016ef45-5c86-056e-c0c2-de0b22bdd233.png)

こうなる。
球形・ガウス・指数のいずれのモデルを使うときも
バリオグラムは

![image.png](https://qiita-image-store.s3.amazonaws.com/0/304482/7924d8e6-8718-0260-aee7-87ed3e07ccc3.png)

このように、書き換えられる。
b0 はナゲット分散
b0+b1 はシルに等しい


# Kriging

![image.png](https://qiita-image-store.s3.amazonaws.com/0/304482/7f056f2e-1a0c-ed5d-ecc5-b30835ecd228.png)

とおいて、推定値を求める。Z*(x0)の値を求めるのがKriging。
Krigingが他と異なるのは移動重み付き平均に対して
重みωにバリオグラムを用いる点。
重みωを求める。
推定値と真値との誤差を最小化するような、ωを見つけたい。
推定値と真値の分散は

![image.png](https://qiita-image-store.s3.amazonaws.com/0/304482/6155fb11-0f51-b782-53e0-d39782523c8d.png)

上記の式になる。
この式にはωが含まれていないので、バリオグラムを用いた等式を考えると

![image.png](https://qiita-image-store.s3.amazonaws.com/0/304482/62168a15-a854-6813-f424-4151640f2ded.png)

推定値と真値の誤差の分散を、バリオグラムを用いた数式に書き換えることができる。これを、ラグランジュの未定乗数法により、制約条件のもと解く。
目的関数は次式になる。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/304482/10b79794-5c56-7368-60f4-97356c54e857.png)
偏微分項が0になるので

![image.png](https://qiita-image-store.s3.amazonaws.com/0/304482/27a23a10-8781-2703-ae2f-c5a4a9b0cf9c.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/304482/70c89eb0-60d3-4c6c-ff4b-c5c9fc3db1ac.png)

x0には未知の地点におけるデータ。
x1 ~ xnは既知の地点に置けるデータ。

この行列を得る。
左の行列は、既知の地点に置けるデータごとのバリオグラムを示し、
右の行列は、ある未知のデータ点に対するそれぞれの既知のバリオグラムを示す。
この行列を解くと、ω、つまり推定値と真値の分散を最小にするような
最適な重みωを見つけることができる。


この行列は、x0 がx1~xnの値の場合、つまり既知の地点のデータが入ると
その列に対する重みは1となり、その他は0になる。
つまり、その地点のデータになる。

参考：https://www.chs.nihon-u.ac.jp/institute/nature/kiyou/1999/pdf/1_3.pdf
OpenShift Origin v3.9 でGitLab からビルド

# 始めに
[OpenShift Origin v3.9 の環境構築とアプリケーションのデプロイ(後編)](https://qiita.com/t-eno/items/fd9329369478b8dd818e)
の続きです。
GitHub からのビルドからデプロイまでの方法を紹介しましたが、今回は認証付きの**GitLab** にあるソースからのビルド方法を書きます。
違いはビルドの定義だけですので、その部分のみ書きます。

# ビルドの定義と実行
**[master-01]**
まず、認証のためのsecret を作成する。
\<user\>, \<password\> はそれぞれ**GitLab** のユーザー名、パスワード。
例として、telnetman という名前で作成する。

```
oc create secret generic telnetman \
    --from-literal=username=<user> \
    --from-literal=password=<password> \
    --type=kubernetes.io/basic-auth
```

Web コンソールで作成する場合は、Resources &rarr; Secrets から作成する。
![openshift-secret.png](https://qiita-image-store.s3.amazonaws.com/0/147025/47969cc8-4098-9c39-3acd-444f8ad3fea0.png)

次に、ビルドコンフィグファイルを作成する。
例として、telnetman2-web コンテナの場合。

```yaml:telnetman2-web-buildconfig.yaml
apiVersion: "v1"
kind: "BuildConfig"
metadata:
  name: "telnetman2-web"
spec:
  runPolicy: "Serial"
  source:
    type: "Git"
    git:
      uri: "https://gitlab.example.com/telnetman/telnetman2.git"
      ref: "master"
    sourceSecret:
      name: "telnetman"
    contextDir: "./"
  strategy:
    type: "Docker"
    dockerStrategy:
      dockerfilePath: "Dockerfile-web"
      env:
        - name: "DBSERVER"
          value: "telnetman2"
  output:
    to:
      kind: "ImageStreamTag"
      name: "telnetman2-web:latest"
  triggers:
    - type: "GitLab"
      gitlab:
        secret: "XXXYYYZZZ"
```

前記事のGitHub のときと違う点は以下の2点だけ。

- 認証のためにspec.source.sourceSecret.name でsecret を指定
- triggers でGitHub, github となっていた部分をそれぞれ**GitLab**, **gitlab** に変更

そして、定義済のビルドコンフィグを入れ替えてビルドを実行する。
未定義の場合は`oc create -f telnetman2-web-buildconfig.yaml`
コマンドラインではなくWeb コンソールのImport YAML / JSON からでも行える。

```
oc replace -f telnetman2-web-buildconfig.yaml
oc start-buil telnetman2-web
```

前記事のGitHub のときとの違いはこれだけ。
あとは**GitLab** でWebhook の設定をすれば、**GitLab** 上のイベントをトリガーにしてビルド、デプロイが自動で行われる。

# 参考
[Build Inputs](https://docs.openshift.com/container-platform/3.9/dev_guide/builds/build_inputs.html)
[Install input secret into OpenShift build configuration](https://stackoverflow.com/questions/51850804/install-input-secret-into-openshift-build-configuration)
パブリックなLXDイメージリポジトリの構築と、構築したパブリックLXDイメージリポジトリからのイメージ取得

## LXDイメージリポジトリの構築

LXDイメージリポジトリとするサーバ（LXDイメージリポジトリサーバ）で設定を行います。

```
# lxd init
Would you like to use LXD clustering? (yes/no) [default=no]: no
Do you want to configure a new storage pool? (yes/no) [default=yes]: yes
Name of the new storage pool [default=default]: default
Name of the storage backend to use (btrfs, dir, lvm) [default=btrfs]: dir
Would you like to connect to a MAAS server? (yes/no) [default=no]: no
Would you like to create a new local network bridge? (yes/no) [default=yes]: yes
What should the new bridge be called? [default=lxdbr0]: lxdbr0
What IPv4 address should be used? (CIDR subnet notation, auto or none) [default=auto]: auto
Would you like LXD to NAT IPv4 traffic on your bridge? [default=yes]: yes
What IPv6 address should be used? (CIDR subnet notation, auto or none) [default=auto]: none
Would you like LXD to be available over the network? (yes/no) [default=no]: yes
Address to bind LXD to (not including port) [default=all]: all
Port to bind LXD to [default=8443]: 8443
Trust password for new clients:  <パスワードを入力>
Again: <パスワードを入力>
Would you like stale cached images to be updated automatically? (yes/no) [default=yes] : yes
Would you like a YAML "lxd init" preseed to be printed? (yes/no) [default=no]: no
```

## LXDイメージリポジトリへのイメージ追加（パブリッシュ）

### LXDイメージリポジトリサーバで行う場合

```
# lxc publish <LXDコンテナ名> --public --alias <LXDコンテナイメージ名>
```

### LXDイメージリポジトリサーバとは別のサーバ等で行う場合
```
# lxc publish <LXDコンテナ名> <LXDイメージリポジトリサーバ>: --public --alias <LXDコンテナイメージ名>
```

なお、イメージ追加を行うサーバ等においては、事前にLXDリポジトリサーバと相互に接続可能な状態とする必要があります。追加されていない場合は、以下のコマンドでLXDイメージリポジトリを追加します。

```
# lxc config set core.https_address "[::]:8443"
# lxc remote add https://<LXDイメージリポジトリサーバのIPアドレスまたはURL>:<ポート（デフォルト:8443）>
```

## パブリックLXDイメージリポジトリの追加

LXDイメージリポジトリサーバ上のイメージを利用したいサーバ等より操作を行います。

```
# lxc config set core.https_address "[::]:8443"
# lxc remote add https://<LXDイメージリポジトリサーバのIPアドレスまたはURL>:<ポート（デフォルト:8443）> --public
```

## パブリックLXDイメージリポジトリの利用

LXDイメージリポジトリサーバ上のイメージを利用したいサーバ等より操作を行います。

### イメージ一覧の取得

```
# lxc image list <LXDイメージリポジトリサーバ>:
```

### イメージを使用してコンテナを起動

```
# lxc launch <LXDイメージリポジトリサーバ>:<LXDコンテナイメージ名> --alias <LXDコンテナ名（エイリアス）>
```
UnityでOpenFileDialog（外部ファイルの読み込み）

#概要
UnityでWindowsの（ような）外部ファイル読み込み窓（OpenFileDialog）を使う

#準備
・System.Windows.Forms.dll
上記ファイルを『（Unityインストールフォルダ）\Editor\Data\Mono\lib\mono\2.0』から
Assetフォルダにコピーする。（unityバージョンでのPlugins云々には触れません）
※Windowsの同名dllでは動きません。

#実装（※最低限）

```cs:openfiledialog.cs
using System.Windows.Forms;

public class openfiledialog : MonoBehaviour
    void Load(){
        OpenFileDialog ofd = new OpenFileDialog();
        ofd.Filter =  "txt files (*.txt)|*.txt|All files (*.*)|*.*";
        ofd.Title = "テキストファイルを選択してください";
        ofd.ShowDialog();

        string filePath = openFileDialog.FileName;
```


詳しくはこちら
[OpenFileDialog Class (System.Windows.Forms) | Microsoft Docs](https://docs.microsoft.com/ja-jp/dotnet/api/system.windows.forms.openfiledialog?redirectedfrom=MSDN&view=netframework-4.7.2)
ok,キャンセル周りはきっちりやっといたほうが良いと思う。

#その他
ぱぱっと実装できるFileDialogではあるけれど
monoで少々デザインが違ってたりはする。
そのままストリームリーダーに投げれたりもするので便利。

デザインが気に入らなければ、アセットストアから買ってくるのもあり。
uGUI上で動くもの、VR内で使えるもの、Windows標準デザインのものもある。
というか標準デザインのもの使いたい。
SSHキー生成の仕方

新MacBookPro購入記念。
SSHキー生成方法忘れてたので、備忘録兼ねて記録。

## ~/.ssh へ移動
```terminal
$ cd ~/.ssh
```

## RSAキー生成コマンド
```terminal
$ ssh-keygen -t rsa
Generating public/private rsa key pair.
```
これで、`~/.ssh` に２種類の鍵が生成されます。

- `id_rsa`(秘密鍵)
- `id_rsa.pub`(公開鍵)

## 以下、エンター3回
なにも考えてないです。

```terminal
Enter file in which to save the key (~/.ssh/id_rsa):
Enter passphrase (empty for no passphrase):
Enter same passphrase again:

(以下略)
```

## ちゃんと作られたか確認
```terminal
$ ls
id_rsa		id_rsa.pub	known_hosts
```
OK!

## おまけ
鍵をコピーしたいとき(Mac)。

```terminal
$ pbcopy < ~/.ssh/id_rsa.pub
```
REST APIによるLXDコンテナイメージリストの取得方法



```
https://<LXDが稼働するサーバ>:8443/1.0/images
```

を実行すると、イメージのハッシュ値が、```https://<LXDが稼働するサーバ>:8443```を除いた形式のURLで、JSON形式で返ってくる。

上記をもとに、以下のURLへアクセスすると、イメージの詳細（lxc image infoで出力されるよりやや情報量の少ない内容）がJSON形式で返ってくる。

```
https://<LXDが稼働するサーバ>:8443/1.0/images/<イメージのハッシュ値>
```
lodash で groupBy を複数の値でしたい

## やりたいこと

以下のデータを id,name の二つの項目の組み合わせで groupBy したい

```javascript
const data = [
  { id: '111', name: 'A', score: 100 },
  { id: '111', name: 'B', score: 50 },
  { id: '222', name: 'C', score: 100 },
  { id: '222', name: 'C', score: 50 },
  { id: '222', name: 'D', score: 70 }
];
```

こんな形にしたい

```javascript
[
  { id: '111', name: 'A', sum: 100 },
  { id: '111', name: 'B', sum: 50 },
  { id: '222', name: 'C', sum: 150 },
  { id: '222', name: 'D', sum: 70 }
];
```

## コード

実際できたコードはこちら

```javascript
const _ = require('lodash');

const data = [
  { id: '111', name: 'A', score: 100 },
  { id: '111', name: 'B', score: 50 },
  { id: '222', name: 'C', score: 100 },
  { id: '222', name: 'C', score: 50 },
  { id: '222', name: 'D', score: 70 }
];

const groups = _.groupBy(data, value => {
  return value.id + '#' + value.name;
});

const result = _.map(groups, group => {
  return {
    id: group[0].id,
    name: group[0].name,
    sum: _.sumBy(group, 'score')
  };
});

console.table(result);
```
Flask で簡単な login の仕組みを作る

User: scott
Password: tiger
でログインする仕組みです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/7602e3a1-289c-e753-2071-bc973c57e34f.png)


フォルダー構造

```text
├── login.py
└── templates
    ├── first.html
    └── login.html
```

```py:login.py
# ------------------------------------------------------------------
#
#	login.py
#
#					Sep/04/2022
#
# ------------------------------------------------------------------
from flask import Flask
from flask import Flask,flash,redirect,render_template,request,session,abort

import os
import sys
 
# ------------------------------------------------------------------
app = Flask(__name__)
app.secret_key = 'hogehoge'
 
# ------------------------------------------------------------------
@app.route('/')
def home():
	if not session.get('logged_in'):
		return render_template('login.html')
	else:
		return render_template('first.html')
# 
# ------------------------------------------------------------------
@app.route('/login', methods=['POST'])
def do_admin_login():
	if request.form['username'] == 'scott' \
		and request.form['password'] == 'tiger':
		session['logged_in'] = True
	else:
		flash('wrong password!')
#
	return home()
# 
# ------------------------------------------------------------------
@app.route("/logout")
def logout():
	session['logged_in'] = False
	return home()
# 
# ------------------------------------------------------------------
if __name__ == "__main__":
	app.secret_key = os.urandom(12)
	app.run(debug=True,host='0.0.0.0', port=4000)
# ------------------------------------------------------------------
```

```html:templates/login.html
{% block body %}
{% if session['logged_in'] %}
<p>You're logged in already!</p>
{% else %}
<form action="/login" method="POST">
	<blockquote>
  <input type="username" name="username" placeholder="Username"><br />
  <input type="password" name="password" placeholder="Password"><br />
	</blockquote>
  <input type="submit" value="Log in">
</form>
{% endif %}
Nov/07/2018<br />
{% endblock %}
```

```html:template/first.html
{% block body %}
<h2>こんにちは Sep/04/2022</h2>
<blockquote>
	<p>Hello Boss!</p>
	<p>これは first.html です。</p>
</blockquote>
<p><a href='/logout'>Logout</a></p>
<br />
Sep/04/2022 PM 14:11<br />
{% endblock %}
```


ビルトインサーバーで実行
>ブラウザーで http://localhost:4000 にアクセス

```bash
python login.py
```

uWSGI で実行
>ブラウザーで http://localhost:9090 にアクセス

```bash
uwsgi --plugin http,python --http :9090 --wsgi-file login.py --callable app
```

Arch Linux で uwsgi のインストール

```bash
sudo pacman -S uwsgi
sudo pacman -S uwsgi-plugin-python
```

次のバージョンで確認しました。

```text
$ flask --version
Python 3.10.6
Flask 2.1.3
Werkzeug 2.2.2
```
GASをローカル環境で開発する

Google Apps Script APIをオンにする
https://script.google.com/u/0/home/usersettings
![image.png](https://qiita-image-store.s3.amazonaws.com/0/312018/4e94c565-a96f-01e9-e99e-82b938adb6ba.png)

Node.jsインストール
https://nodejs.org/en/download/

確認

```
npm --version
```
claspインストール

```
npm i @google/clasp -g
C:\Users\ユーザー名\AppData\Roaming\npm\clasp -> C:\Users\ユーザー名\AppData\Roaming\npm\node_modules\@google\clasp\src\index.js
+ @google/clasp@1.6.3
added 278 packages from 159 contributors in 42.183s
```
Googleログイン

```
clasp login
```
プロジェクトの作成

```
mkdir helloclasp
cd helloclasp
clasp create "hello clasp"
Created new script: https://script.google.com/d/1_Wy2OEnDlnignBRV3C1l-wRB-lB6dSuZxMj9w3thI6Pm7KPabNUS_4ar/edit
Cloned 1 file.
└─ appsscript.json
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/312018/e26269b2-781c-2c7a-12ac-912b741c6928.png)

ローカルにpull

```
clasp pull
Cloned 1 file.
└─ appsscript.json
```

あれ・・・pullしてもCode.jsが落ちてこない
一度プロジェクト（GAS編集画面）をブラウザで開いてもう一度pullしたらCode.jsも取ってきた

```
clasp pull
Cloned 2 files.
└─ appsscript.json
└─ Code.js
```

Code.jsを編集

```
function myFunction() {
  Logger.log("hello clasp");
}
```
push

```
clasp push
└─ Code.js
└─ appsscript.json
Pushed 2 files.
```

openでいつものエディタが起動

```
clasp open
```
Kotlinでいい感じにSingletonパターンを書く

## 更新(2022/08/26)

`lazy`を使えば事足りる、車輪の再発明だったので本記事の内容は非推奨です。
参考：https://github.com/JetBrains/kotlin/blob/master/libraries/stdlib/jvm/src/kotlin/util/LazyJVM.kt

## 当初の内容

<details><summary>当初の内容</summary>

Google謹製のサンプルコードをいろいろあさっているときに、KotlinでSingletonパターン作るときのお手本みたいなやつをみつけたので紹介します。

これです。
https://github.com/googlesamples/android-architecture-components/blob/master/BasicRxJavaSampleKotlin/app/src/main/java/com/example/android/observability/persistence/UsersDatabase.kt

要点をまとめると、こんな感じのコードになるでしょうか。

```kotlin
class DaijiNaMono {
    companion object {
        @Volatile private var INSTANCE: DaijiNaMono? = null

        fun getInstance(): DaijiNaMono =
                INSTANCE ?: synchronized(this) {
                    // 待ってる間に他のスレッドで生成されるかもしれないから再確認
                    INSTANCE ?: DaijiNaMono().also { INSTANCE = it }
                }
    }
}
```

普通にObjectでインスタンスを保持できるときはそうすればいいんですが、そうできないときに上記のテクニックが使えそうです。
companion objectはそれを持つクラスが呼ばれたときに生成されてしまうので、それを遅延したいときはこういうコードが欲しくなるんじゃないでしょうか。

普通にオブジェクトを使うのがわからない人は公式ドキュメントが役に立つと思います。
読みましょう
https://dogwood008.github.io/kotlin-web-site-ja/docs/reference/object-declarations.html

</details>
AWS Cloud9上でwebpack-dev-serverでデバッグしようとするとInvalid Host header

同じことに２回もハマってしまったので、備忘録的に残しておく。。。

# 状況
1. AWS Cloud9上でvue-cliでwebpackプロジェクトを構築
2. npm installしたあと、npm run devでwebpack-dev-serverを立ち上げる
3. Cloud9のPreviewメニューから"Preview running application"
4. ブラウザ上に"Invalid Host header"と表示されてデバッグできない

# 原因
webpack-dev-serverではwebpackコンフィグのdev:hostに書かれているホスト名と実際にアクセスされたホスト名の一致を確認している。

Cloud9の環境下では、その配下のEC2としては'localhost:8080'で上がっており、それに対してVFSのドメイン名(\${Cloud9のID}.vfs.cloud9.\${リージョン}.amazonaws.com)でアクセスする仕組みであるため、両者が一致せずエラーと判断される。

# 対処

[公式ドキュメント](https://github.com/webpack/docs/wiki/webpack-dev-server)に書いてある通り、
> --public: overrides the host and port used in --inline mode for the client (useful for a VM or Docker).

とのことなので、package.jsonのdevコマンドに対して、

```js
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --public ${Cloud9のID}.vfs.cloud9.${リージョン}.amazonaws.com",
```

というように、--public以降を追記してあげれば解決。
ちなみに、Cloud9のIDはデフォルトでC9_PIDという環境変数に設定されているので、それを使えばOK.

# やらない方がいいこと

単に"Invalid Host header"を解消するためには、config側でdisableHostCheck: Trueを設定せよという記述をネット上で見かけるが、Cloud9 + webpack-dev-serverの環境下ではやらない方が良い。

確かに"Invalid Host header"自体は解消されるが、ホットリロード用のwebsocketの向き先が、'http://localhost:8080/sockjs-node/info' のようにlocalhostを向いてしまうため、VFS経由でホットリロードが効かなくなってしまう。

前述の--publicを使う方法がおすすめ。

# 追記：vue-cli3を使う場合の注意点
vue-cli3から直接webpack-dev-serverでは無くvue-cli-serviceを経由する方式になりましたね。

## 上手くいかない方法
```js
"serve": "vue-cli-service serve --public ${C9_PID}.vfs.cloud9.${リージョン}.amazonaws.com",
```

[公式ガイド](https://cli.vuejs.org/guide/cli-service.html#vue-cli-service-serve)にも載っているオプションなので上手く行くかと思ったのですが何故か上手くいかず。。理由までは追えていないです。誰か教えてください。

## 上手くいく方法

[こちら](https://cli.vuejs.org/config/#devserver)に記載の通り、プロジェクトルートにvue.config.jsを作成して、

```js:vue.config.js
module.exports = {
    devServer:{
        public: process.env["C9_PID"] + ".vfs.cloud9.${リージョン名}.amazonaws.com"
    }
};
```
と設定して解決。
MUN 2.4.1.1 で JoinRoom 直後に inRoom を使ってハマった時のメモ

## 前提
Monobit Unity Networking 2.0（MUN）とは？
http://www.monobitengine.com/mun/

## MonobitNetwork.JoinRoom
> * 戻り値 bool
>     * 入室に成功したら true、失敗したら false を返します。

## MonobitNetwork.inRoom
>* 戻り値 bool
>    * 入室中なら true、入室していなかったら false を返します。

## 問題の箇所
```
// OnGUI is called for rendering and handling GUI events
void OnGUI(){
    if (GUILayout.Button("Enter Room)"))
    {
        MonobitNetwork.JoinRoom(room.name);
        if (MonobitNetwork.inRoom)
        {
            Debug.Log("入室完了");
        }
        else
        {
            Debug.Log("入室失敗");
        }
    }
}
```
#### 出力結果
```
入室失敗
```

## 解決方法1
コルーチンで少し待ってやればinRoom判別通るようになる。

```
// OnGUI is called for rendering and handling GUI events
void OnGUI(){
    if (GUILayout.Button("Enter Room)"))
    {
        MonobitNetwork.JoinRoom(room.name);
        StartCoroutine(WaitInRoom());
    }
}
//入室待ちコルーチン
IEnumerator WaitInRoom()
{
    // 0.5秒待つ
    yield return new WaitForSeconds(0.5f);

    if (MonobitNetwork.inRoom)
    {
        Debug.Log("入室完了");
    }
    else
    {
        Debug.Log("入室失敗");
    }
}
```
#### 出力結果
```
入室完了
```

## 解決方法2
そもそもJoinRoomでbool返ってくるので、それで用が成せるならこれでもいい。

```
// OnGUI is called for rendering and handling GUI events
void OnGUI(){
    if (GUILayout.Button("Enter Room)"))
    {
        if (MonobitNetwork.JoinRoom(room.name))
        {
            Debug.Log("入室完了");
        }
        else
        {
            Debug.Log("入室失敗");
        }
    }
}
```
#### 出力結果
```
入室完了
```

## まとめ
MonobitNetwork.JoinRoom
と
MonobitNetwork.inRoom
の入室判定は同じ結果にならない瞬間がある。

### 雑感
入室してすぐカスタムパラメータとか取得したかったので、
inRoomで判別しようかとして気づいたわずかな差でした。

恐らくサーバー側にinRoomがTrueになる条件のデータを入れきる前にinRoomしてしまってるのかな。
たぶんそのうち自前で解決する羽目になりそうなので、原因確認は後まわし。。
CSS リセットの方法

#オールリセット

'''
/* http://meyerweb.com/eric/tools/css/reset/ 
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
'''




#その他にも
http://shiru-web.com/2017/04/21/01-26/
木構造を再帰的に走査するためのコレクションを作成する

# やりたいこと

```rb
class Node
  attr_reader :name
  attr_accessor :children

  def initialize(name, children = [])
    @name = name
    @children = children
  end
end
```
```rb
a = Node.new('A')
a1 = Node.new('A-1')
a11 = Node.new('A-1-1')
a12 = Node.new('A-1-2')
a2 = Node.new('A-2')
a1.children += [a11, a12]
a.children += [a1, a2]
```

というコードで木構造を再現した場合に、各ノードを走査するための仕組みがほしい。

# 実現方法

```rb
class Nodes
  include Enumerable

  attr_reader :nodes

  def initialize(*nodes)
    @nodes = nodes
  end

  def each
    return enum_for(:each) unless block_given?

    nodes.each do |node|
      yield(node)
      self.class.new(*node.children).each do |child|
        yield(child)
      end
    end
  end
end
```
```rb
nodes = Nodes.new(a)
nodes.each.with_index(1) { |node, i| puts("#{i}: #{node.name}") }
```
```
1: A
2: A-1
3: A-1-1
4: A-1-2
5: A-2
```
共有されたコードがモジバケッティだった場合の対処


### 2秒で解決

```bash
$ brew install nkf

$ nkf -g okuraretekita_sorce_code.html
=> Shift_JIS # Shift-JISで来ちゃった！

$ nkf -w --overwrite okuraretekita_sorce_code.html
$ nkf -g okuraretekita_sorce_code.html
=> UTF-8 # ハイ解決！
```

### 補足

`-w` : UFT-8で出力
`-e` : EUCで出力
`-s` : Shift-JISコードを出力
`-Lu` : 改行形式をLFに変換
`-Lw` : 改行形式をCRLFに変換
`-Lm` : 改行形式をCRに変換
`-g(--guess)` : 文字コード自動判別の結果を表示
`--overwrite` : 元のファイルを上書きする
iPad pro 2018モデルを強制再起動する方法

#iPad pro 2018を強制再起動する方法

iMacのiTunesを利用して、iPad Pro 9.7インチのバックアップデータをiPad Pro 11インチにリストアする途中、黒い画面にリンゴマークを表示し続ける状態となった。しばらく様子を見たが、画面が変化する事は無くなにもできなくなった

再起動の方法を誤解していたためにAppleのサポートの助けを借りたので、強制再起動方法をメモしておく

## iPad Pro 2018モデルの強制再起動

1.「音量を上げる」ボタンを押してすぐに放す
2.「音量を下げる」ボタンを押してすぐに放す
3.　Apple ロゴが表示されるまで上(USB Type-Cコネクタの無い方の短辺)のボタンを長押しする

Apple のチャットのサポートの方に丁寧に教えていただきました

### ケーブルについて
リストアの際には、Macのインターフェイスの問題も発生した

- 手元のiMacにはUSB Type-Cのポートが無い
- **iTunesからリストアする際には必ず有線での接続が必要**

これでは、iPad Pro 11インチにデータをリストアできない
USB Type AとType-Cのケーブルが必要
けれど、Amazonでもyodobashi.comでもその日に届く時間では無い

そこで、ダメ元で最寄りのダイソーにケーブルを探しに行く
（なんちゃってLightningケーブルを売っているくらいだから、必要とするケーブルも手に入るかもしれない）
そして、ダイソーにはこんなケーブル
![IMG_1680.jpg](https://qiita-image-store.s3.amazonaws.com/0/213053/8aefcc06-84b4-0212-1c91-dd4645d4d18f.jpeg)
結果、108円のケーブルはちゃんと動作

##iPad pro 2018モデルを利用しての感想
iPadの操作で指紋認証が不要なのがここまで快適だとは思わなかった

今日はここまで:smile:
RoomでRxJavaを使うときはバージョンに注意せよ

# この記事で言いたいこと
RoomとRxJavaを使うとき、AndroidXじゃない方のバージョンを使うと、SELECTだけしかRxで返してもらえないので注意。

# Roomの操作はRxJavaで扱える
RoomとRxJava2を連携するライブラリが標準で提供されていて、Googleの公式ドキュメントに導入方法から使い方まで解説されています。
https://developer.android.com/training/data-storage/room/accessing-data#query-rxjava

で、こんな風にDaoの各メソッドの返り値を指定するだけで、勝手にRxと連携してくれます。
（公式ドキュメントよりコピペ）

```kotlin
@Dao
interface MyDao {
    @Query("SELECT * from user where id = :id LIMIT 1")
    fun loadUserById(id: Int): Flowable<User>

    // Emits the number of users added to the database.
    @Insert
    fun insertLargeNumberOfUsers(users: List<User>): Maybe<Int>

    // Makes sure that the operation finishes successfully.
    @Insert
    fun insertLargeNumberOfUsers(varargs users: User): Completable

    /* Emits the number of users removed from the database. Always emits at
       least one user. */
    @Delete
    fun deleteAllUsers(users: List<User>): Single<Int>
}
```

こんな感じでクエリ結果やInsertの結果を様々な型で扱うことができます。

でもAndroidXはまだalphaとかバージョンについてるし、安定版を使いたいなあ、と思ったとき、Xじゃないプレーンなプロジェクトの方を使うこともできます。
https://developer.android.com/topic/libraries/architecture/adding-components#room
これをみると、バージョン1.1.1が`android.arch.persistence.room`に用意されているようです。

# 罠
という感じでPre-AndroidXのバージョンを使ってもりもりコードを書いていったところ、次のようなエラーで怒られました。

> Entities and Pojos must have a usable public constructor. You can have an empty constructor or a constructor whose parameters match the fields (by name and type)

謎すぎます。
KotlinならEntityはData Classで定義するので、ここで注意されているようなコンストラクタが無いわきゃないです。
試しに空のコンストラクタをわざわざ用意してみましたが、解決しませんでした。

いろいろ試行錯誤した結果、バージョン1.1.1ではInsert, Delete, Updateの返り値にRxを指定できないことがわかりました。
（実はさっきの公式ドキュメントにもそう書いてあるのですが…）
https://medium.com/androiddevelopers/room-rxjava-acb0cd4f3757
https://issuetracker.google.com/issues/63317956
バージョン1.1.1で *Insert* や *Delete* に *Completable* や *Single* は使えません。
それらを指定したとき、さっきのようなエラーが出たりするようです。（たぶん）

# 1.1.1で使うには
なので1.1.1ではInsertやDeleteの返り値はLongやUnitを指定することになります。
でも、できればRxで統一的に扱いたいわけです。
AndroidXを素直に使えというのはそのとおりですが、まあそうしないでもやっていくことはできます。
たとえば、DatabaseクラスにRxオブジェクトを返すメソッドを用意するなどが便利そうです。

```kotlin
@Database(entities = [Img::class], version = 1)
abstract class ImogeDatabase : RoomDatabase() {
    abstract fun imgDao(): ImgDao

    // たとえばDaoにdelete()が用意されているとして
    fun deleteAsCompletable(imoge: Img) = Completable.fromCallable {
        imgDao().delete(imoge)
    }
}
```
こういうメソッドを用意しておいて、Daoの`delete()`は使わずに、この`deleteAsCompletable()`を使うようにするとか。

でも本当はDatabaseクラスじゃなくて、Daoインターフェース自体にデフォルト実装をもつメソッドを用意したいんですよね…
SelectはDaoから呼ぶけど、InsertやDeleteはDatabaseから呼ぶ、とか使いづらいの極みでしかない。
けど、それはうまくいきません。

Roomが自動生成するコードがKotlinじゃなくてJavaっぽくて、Interfaceのデフォルト実装をうまく扱ってくれないんですよね…([参考](https://qiita.com/jmatsu/items/6c141ba0acb13409c7bf#interfaceのdefaultメソッド))
誰かいい解決法を授けてください。
おたのみもうします。
scipy.optimize.minimize(method="trust_constr")について [python]

python(scipy)で手っ取り早く制約付き最適化しようとしたら意外と手間取ったのでメモ。

これだけやれば動く↓

```python:NoName.py
# -*- Mode: Python; coding: utf-8; -*-
from scipy.optimize import minimize, BFGS, LinearConstraint
import numpy as np

# 目的関数: ここでは２変数関数にしてある
def func(x):
    return x[0]**2 - x[1]**2 + x[0]*x[1] - x[0] + x[1]

# 初期解: (0,0)
x0 = np.array([0,0], dtype=float)

# 制約: 各変数と両者の和が[0,1]という線形制約
A = np.array([[1,1],[1,0],[0,1]])
lb = np.array([0,0,0])
ub = np.array([1,1,1])
const = LinearConstraint(A, lb, ub)

# 最適化
res = minimize(func,                    # 目的関数, 
                x0,                     # 初期解,
                method="trust-constr",  # 制約付き信頼領域法
                jac="2-point",          # 勾配関数
                hess=BFGS(),            # ヘシアンの推定方法
                constraints=const,      # 制約
                options={"maxiter": 50, # 最大反復数
                         "verbose":2})  # 最適化の過程を出力
print(res["x"])
```

## 内容
ひとつひとつは大して難しくない
### インポート
scipy1.1以上が前提。  
"from scipy.optimize import minimize" ではなく
"import scipy.optimize.minimize"
と書くと通らないので注意(scipy.optimizeがパッケージで、minimizeは関数なので)。

### 制約条件
```python:
LinearConstraint(A, lb, ub)
```
として lb <= Ax <= ub なる線形制約をscipy.optimize.LinearConstraintで記述する。
scipy.optimize.NonlinearConstraintを使うと非線形制約も書ける。

### 勾配推定
勾配関数を渡さない場合、関数値から自動で推定してくれる。
ただし推定の方法を明示的に渡す必要があるので、"2-point"などで指定する

### ヘシアン推定
勾配関数同様に"2-point"自動推定してくれるが、勾配を自動推定している場合はこのキーワードは渡せない。(おそらく精度面の問題？)
代わりに"HessianUpdateStrategy"なるものを与えてやる必要がある。
scipy.optimize.BFGS にできあいのものがあるのでとりあえずこれを使えばよい。
Pythonで関数を引数として渡した場合の挙動のまとめ(一部引数を省略した場合の挙動あり)

# 概要
関数を引数として扱えると、関数を変更することなく引数となる関数を変えるだけでいいので便利です。例えば、いくつかのフィルタリング関数を組み合わせて関数を作りたい時、関数を一つ一つ手作りすることなく、関数の引数となる関数の組み合わせを変えるだけでよくなります。
そこで、関数を引数として渡した場合(関数渡し)の挙動をまとめてみました。与える関数の引数を一部固定した場合についても検証してみました。

# 与える関数に引数を指定しない関数渡し
与える関数の引数を一切指定しない場合の関数渡しです。

```python:test1.py
def add(a,b):
    return a+b

def test1(func)
    print(type(func)) # <class 'function'>
    return func(1,2)

test1(add)
```

引数として代入されるのはfunctionクラスであることが分かりました。普通の関数と変わりなく使用できます。

# 与える関数の引数を一部固定した関数渡し
与える関数に引数を一部固定して渡すことができると、定数などを適宜指定して入力できるので、より便利になります。
ですが、以下のように単純に引数を入れて実行すると、引数となった関数を呼び出してから実行しようとするため、失敗します。

```python:test2_alpha.py
def add(a,b):
    return a+b

def test2(func):
    print(func)
    return func(b=2)

test2(add(a=1))
```

そこで、functoolsのpartial関数が役立ちます。partial関数は引数を一部凍結して、新たな関数を生成する関数です。partial関数を使った場合の関数呼び出しは以下のスクリプトのようになります。
partial関数の第１引数は引数を固定したい関数で、第２引数は固定したい引数を表します。これでadd関数の引数を固定して実行できるようになります。注意すべきなのはpatial関数で生成した関数で `b=2` としている点です。これを省略すると、add関数の第一引数のaの方に代入しようとするので失敗します。

```python:test2_beta.py
import functools 

def add(a,b):
    return a+b

# 第一引数を凍結する関数
def add_pertial(ta):
    return functools.partial(add,a=ta)

def test2(func):
    print(func)
    return func(b=2)

test2(add_pertial(1))
```

# おまけ：任意の数の関数を引数とした場合
任意の数の関数を引数として与える場合は、可変長引数を使って以下のようなスクリプトで書けます。test3関数では、凍結された関数の引数を次々と足し合わせる関数になります。全く異なる種類の関数を与えることもできるので色々試してみて下さい。

```python:test3.py
import functools 

def add(a,b):
    return a+b

# 第一引数を凍結する関数
def add_pertial(ta):
    return functools.partial(add,a=ta)

def test3(*funcs):
    ret = 0
    for func in funcs:
        ret = func(ret)

    return ret

test3(add_pertial(1),add_pertial(2),add_pertial(3))
```

何か誤字や勘違いなど不備がありましたら、ご連絡頂けると嬉しいです。

# 参考文献
- [Python: 関数を引数とする関数の作り方（+関数の引数を省略したい）](http://gara14.hatenablog.com/entry/2016/08/11/205831)
- [10.2. functools — 高階関数と呼び出し可能オブジェクトの操作(Pythonマニュアルより)](https://docs.python.jp/3/library/functools.html)
[a-blog cms]エントリーサマリーのカテゴリー順を任意に設定する

追記：
表題の動作は、カテゴリーリストモジュールとエントリーサマリーモジュールを組み合わせなくても、[カテゴリーエントリーサマリーモジュール](https://developer.a-blogcms.jp/document/acms-code/vars/Category_EntrySummary.html)を使えば可能だった。
以下のやり方は、モジュールID側で表示するカテゴリーを予め絞り込んでおく場合（エントリーサマリーで複数カテゴリーを指定する）に使えるかもしれない。
*****

エントリーサマリーは、カテゴリーとエントリーの一覧を出す際、汎用性が高くて使い勝手のいいビルトインモジュールであるものの、カテゴリーを固定せず、縦断して複数のカテゴリーとエントリーを表示させる場合、カテゴリーの表示順を設定することはできないらしい。
（エントリーの表示順は、モジュールの設定で決めることができる）

そこで、カテゴリーの指定をカテゴリーリストモジュールに任せて、それを[ctx（コンテキスト）](https://developer.a-blogcms.jp/document/template/entry-2851.html)でエントリーサマリーモジュールに渡して表示するようにしてみた。

カテゴリーリストの中にエントリーサマリーを入れることになるが、その場合、[内側のモジュールをエスケープする必要がある](https://developer.a-blogcms.jp/document/template/entry-2274.html)。
typoしやすい面倒な作業だけど、[エスケープメーカー](https://developer.a-blogcms.jp/tools/escape.html)を使うと、一発でエスケープした状態に書き換えてくれて便利。

```
<!-- BEGIN_MODULE Category_List id="sortedList" -->
<div>
@include("/admin/module/setting.html")
<!-- BEGIN category:loop -->
<!-- BEGIN category:veil -->

<!-- BEGIN_MODULE\ Entry_Summary ctx="cid/{cid}" id="summary" -->
<div>
	<!-- BEGIN\ unit:loop -->
	<!-- BEGIN\ entry:loop -->
＊＊エントリーサマリーでなんかする処理を書く＊＊＊
	<!-- END\ entry:loop -->
	<!-- END\ unit:loop -->
</div>
<!-- END_MODULE\ Entry_Summary -->

<!-- END category:veil -->
<!-- END category:loop -->
</div>
<!-- END_MODULE Category_List -->
```

カテゴリーリストの[モジュールID](https://developer.a-blogcms.jp/document/moduleid/)を作成して（上記の場合sortedList）、ソート順を設定すれば、任意のカテゴリーのソートができる。
カテゴリーを指定しているのが、

```
<!-- BEGIN_MODULE\ Entry_Summary ctx="cid/{cid}" -->
```
この部分で、{cid}は、外側のカテゴリーリストの変数なので、エスケープしていない。

エントリーサマリーのモジュールIDを設定して、表示するカテゴリーを更に絞ることもできる。