OmniAICreator/Qiita-1.07M huggingface dataset:
【初心者】SSIエラーが出たけど実はそうじゃなかった件

##はじめに
1つ1つ案件をやっていくうちに、予期せぬエラーにも出くわすようになりました（汗）
その中でも、なるほどなーって思ったことがあったので備忘録まで。

##SSI（Server Side Include）
Server Side Includes はWebサーバの機能の1つです。
HTMLの中にWebサーバ側で実行するコマンドを埋め込んでおき、その実行結果をクライアントサーバに返す仕組みです。

どういう時に利用するかというと、複数ページに同じレイアウトが登場するときなどに便利です。例えば、ヘッダー・フッター・メニューについては、どのページに遷移しても、常に同じものが表示されているべきですよね。そいう時に、各ページに同じHTMLを記載するのではなく、ヘッダー部分を1つのファイルから読み込んで表示したほうがメンテナンスもしやすくなります。このファイルのことをインクルードファイルといいます。

ただ1つ注意しなければならいのは、Webサーバ自体がSSIに対応またはサービス利用可になっている必要があります。

##インクルードファイルをもう少し詳しく
インクルードファイルには、ページのある一部分のソースコードが書かれているファイルということに勘がいい人はもう気付いていると思います。
先ほどの例で出したヘッダー・フッター・メニューをSSI機能を使って表示させるようにするためには、その部分だけを抜き出したファイル＝インクルードファイルを準備する必要があります。

インクルードファイルの形式はHTML形式でOKです。実際にはインクルードファイルを読み込んだ部分に内容を展開することになるので、本当に一部分を抜き取ったファイルが出来上がっていればインクルードファイルは完成になります！

##早速、インクルードファイルを読み込んでみよう！
インクルードファイルの読み込みは簡単です。
下記のように、自分が作成しているHTMLファイルに記載すればいいだけです。めちゃ簡単です。

~~~html
<!-- #include virtual="[ファイル名 or ファイルパス]" -->
~~~

この状態で、ブラウザを表示するとその部分にインクルードファイルの内容が読み込まれ、きちんとヘッダーやフッター・メニューなどが表示されます。

##簡単なはずがエラー「an error occurred while processing this directive」が表示される！？
インクルードファイルの存在と設定の仕方がわかったところで、さっそくHTMLファイルにヘッダー部分のインクルードファイルの読み込みを追記して画面を確認！
ところが、「**an error occurred while processing this directive**」と表示されるではありませんか！？！！（なってこった…。）

このエラーが表示される原因を調べてみると、
「SSI は有効になっていて、何らかのエラーで SSI の処理ができなかった場合に表示される」とのこと。つまり、インクルードできなかったよ！ということなので、そういう場合は下記を疑ってみるのが通常のようです。

* **ファイル指定の間違い**
* **ディレクトリを遡っている**
* **サーバルートからのパスを指定している**
* **http から始まる URL を指定している**

でも、今回は全部合っていました。なんでーーーーー？？？

##先頭に#を付けたコメントが原因だった！
結局何が原因だったかというと、超絶単純なミス。笑
インクルードファイルの読み込みは、HTML内に記載するコメントの書き方と同じです。

**▼ただのコメント**

~~~html
<!-- header menu -->

~~~

**▼インクルードファイルの設定**

~~~html
<!-- #include virtual="../sample/include_menu.html" -->
~~~

インクルードファイルかどうかの判断は、どうやら**#**の部分から判断しているみたいです。
みなさんも、HTMLファイルを作成したときに「ここからここまでが、〇〇〇の部分」などコメントを記載すると思います。
わたしは、クラス名やID名でそのコメントと記載するのですが、ID名を使用したコメントを

~~~html
<!-- #send_format -->
~~~

なんて書いていました。
そのため、この先頭につけた**#**が原因で、インクルードファイルの読み込みエラーが表示されてしまっていました。そりゃ、インクルードファイルの読み込みを追記した部分を穴が開くほどみてもわからないわけです。

##まとめ
今回のエラーは初心者のわたしが1人で勉強しているだけでは出くわさないエラーだと感じました。インクルードファイルの読み込みをするときは、コメントの先頭に#を使わないように気を付けましょう（笑）
未経験での中途入社はがんばらないといけないことがたくさんありますが、思い切ってこの業界に転職したことが正解だったと思えた瞬間でした！

##参考URL
http://www.tohoho-web.com/wwwssi.htm
https://wa3.i-3-i.info/word12024.html
https://support.sugutsukaeru.jp/ja/troubleshooting/news-widget/93.html
CircleCI で Node.js のバージョンが合わない(2019年11月)

# なにがおきた

CircleCIの`ruby:2.6.5-node-browsers` を使ったジョブでこんなエラーが出た。

```
yarn install v1.19.1
[1/5] Validating package.json...
error hogehoge@0.1.0: The engine "node" is incompatible with this module. Expected version "~10.16.0". Got "12.13.0"
error Found incompatible module.
```

package.jsonでは `10.16.0` が指定されてるけど `12.13.0` が使われてるとのこと。

# 原因

[さっき(2019-11-07現在) CircleCIのdockerイメージの Node のバージョンが軒並み上げられた。](https://github.com/CircleCI-Public/circleci-dockerfiles/commit/0ff22bb914ef7e4a92ecfb864b36f86d4f2aed7b) この更新で`-node` とかついてるイメージのバージョンが `10.16.3` -> `12.13.0` になった。10月21日に12系がLTSになったかららしい。([Convenience Image Node Variants will be updated to v12.x on November 4th - CircleCI Discuss](https://discuss.circleci.com/t/convenience-image-node-variants-will-be-updated-to-v12-x-on-november-4th/33065))

# 対策

## `12.13.0` にしちまえ！！！！

```diff:package.json
   "engines": {
-    "node": "~10.16.0"
+    "node": "~12.13.0"
   },
```

## もしくは、うまくいってた時のdocker image id を指定する

のっぴきならない理由で `10.16` のままにする場合、[ベストプラクティス - Pre-Built CircleCI Docker Images](https://circleci.com/docs/ja/2.0/circleci-images/#%E3%83%99%E3%82%B9%E3%83%88%E3%83%97%E3%83%A9%E3%82%AF%E3%83%86%E3%82%A3%E3%82%B9) にある方法でうまくいった。

> また、使用するイメージを特定の SHA に至るまで指定することができます。 これにより、変更が加えられるまでの間、特定のイメージをテストすることができます。
>
> 使用するイメージを細かく指定するには、以下の 2つの方法があります。
>
> - タグを使用してイメージのバージョンや OS を指定する
> - Docker イメージ ID を使用してバージョンを指定する

うまくいってた時のCircleCIのジョブのログを確認するとその時に使われてたDockerイメージIDが出力されてるのでそれをコピって指定したら古いのが使われた。以下は [`ruby:2.6.5-node-browsers`](https://hub.docker.com/r/circleci/ruby/tags?page=1&name=2.6.5-node-browsers) の例。しばらくこれでしのいでおいて、その間に12系を使えるようにするのがよさそう。

Dockerhub でタグの履歴の追い方がわからなかった。わかったら追記する。

```diff:.circleci/config.yml
     docker:
-      - image: circleci/ruby:2.6.5-node-browsers
+      - image: circleci/ruby@sha256:7b5eede6785426c86fd08328a2b98b54b7bf67cdbd7d579c9b792e11f6bea8ed
```

もしくは、自分でdockerfile書く。
古いバージョンのPostgreSQLでupsertする

　PostgreSQLでデータベースにレコードを登録する際に、すでに同じキー（制約）を持っているレコードがある場合はUPDATEクエリを、ない場合はINSERTクエリを発行する、いわゆるUPSERT的なクエリが必要な時がある。PostgreSQL9.5以降のバージョンであるなら、`ON CONFLICT`句を使って下記のようなクエリを発行すれば良い。

```sql
INSERT INTO one_table VALUES (1, 'value1') 
ON CONFLICT ON CONSTRAINT constraint_name 
DO UPDATE SET col='value2';
```

　つまり、例えばプライマリキーのカラム名が `id` で制約名が `constraint_name` の空テーブルがあったとして、これに上記のクエリを発行すると、まずINSERTが行われて `id=1,col=value1` のレコードが登録される。もう一度同じクエリを発行すると、今度はUPDATEが行われて `id=1,col=value2` となる。
　ちなみにUPDATEをしないで、同一キーがない時だけINSERTするようなクエリは下記のようになる。

```sql
INSERT INTO one_table VALUES (1, 'value3') 
ON CONFLICT ON CONSTRAINT constraint_name 
DO NOTHING;
```

　ま、これは良いんです。今回はこの方法が使えない場合なのよね。
　というのも、私が現在保守しているとあるサービスのPostgreSQLのバージョンが9.0系だったのだ。もちろん `ON CONFLICT`は使えまへん。そんな時の代替策を備忘録として残しておこう（ほぼ自分用）。

```sql
# \d one_table
          Table "public.one_table"
 Column |         Type          | Modifiers 
--------+-----------------------+-----------
 id     | integer               | not null
 col    | character varying(10) | 
Indexes:
    "constraint_name" PRIMARY KEY, btree (id)

# SELECT * FROM one_table;
 id |  col   
----+--------
  1 | value1
(1 row)

```

　上記のようなテーブルに対して非`ON CONFLICT`なクエリでUPSERTをしてみる。

```sql
# UPDATE one_table SET col='add new' WHERE id = 2;
UPDATE 0
# INSERT INTO one_table (id, col) SELECT 2, 'add new' WHERE NOT EXISTS (SELECT 1 FROM one_table WHERE id = 2);
INSERT 0 1
# SELECT * FROM one_table;
 id |   col   
----+---------
  1 | value1
  2 | add new
(2 rows)

# UPDATE one_table SET col='upserted' WHERE id = 2;
UPDATE 1
# INSERT INTO one_table (id, col) SELECT 2, 'upserted' WHERE NOT EXISTS (SELECT 1 FROM one_table WHERE id = 2);
INSERT 0 0
# SELECT * FROM one_table;
 id |   col    
----+----------
  1 | value1
  2 | upserted
(2 rows)

```

　やってることを解説すると、id=2のレコードをUPDATEしようとして対象レコードがないから何もせずに完了し、直後にid=2のレコードが存在しなければの条件でINSERTして成功。普通にUPDATEしてからINSERTするという地味な２連コンボなクエリですな。
　２回目のコンボでは、id=2のレコードをUPDATEして成功し、直後のINSERTはすでにid=2のレコードがあるので、条件にマッチせずに完了という流れ。
　まぁ、UPDATEを伴わない`DO NOTHING`なクエリでよければ、直前のUPDATEが不要になるので、ワンクエリで事足りるのでややスマートになるが、UPSERTやろうとすると毎回２連コンボになるので、コストが高いなぁ…。でも、仕方ない。

## 関数化して少しでも使いやすくする

　毎度２連コンボクエリを発行するのはダルイので、ストアドファンクションとして関数化してしまえば、だいぶ使いやすくなる。まぁ、クエリコストは変わらないので、気休めでしかないのだが。

```sql
DROP FUNCTION IF EXISTS upsert(INTEGER, TEXT);
CREATE OR REPLACE FUNCTION upsert(key INTEGER, value TEXT) 
RETURNS VOID AS $$
  BEGIN
    UPDATE one_table SET col = value WHERE id = key;
    INSERT INTO one_table (id, col) SELECT key, value WHERE NOT EXISTS (SELECT 1 FROM one_table WHERE id = key);
  END;
$$ LANGUAGE plpgsql;
```

　──という風に、関数を作成する。最初の`DROP FUNCTION`はおまじないみたいなものだけど、関数の処理を更新する時には必要。
　もっと汎用化するならテーブル名も引数で渡したいが、それをやろうとすると結構手間がかかるので、今回は割愛。
　早速、使ってみる。

```sql
# SELECT upsert(3, 'new');
 upsert 
--------
 
(1 row)

# SELECT * FROM one_table;
 id |   col    
----+----------
  1 | value1
  2 | upserted
  3 | new
(3 rows)

# SELECT upsert(3, 'new2');
 upsert 
--------
 
(1 row)

# SELECT * FROM one_table;
 id |   col    
----+----------
  1 | value1
  2 | upserted
  3 | new2
(3 rows)

```

　だいぶ楽にUPSERTできるようになった。

　ま、PostgreSQLのバージョンアップをするのが本筋ではあるんだよねw
#rspec の subject の中とか binding.pry とかすると Rspecの内部処理が表示されて動かないのだが？ ( #Rails )

# 動かない

なにこれ

```
subject { binding.pry; some }
```

```
From: /usr/local/bundle/gems/rspec-core-3.8.2/lib/rspec/core/memoized_helpers.rb @ line 317 RSpec::ExampleGroups::SomeClass

 => 317: define_method(name) { __memoized.fetch_or_store(name) { super(&nil) } }

[1] pry(#<RSpec::ExampleGroups::SomeClass>)>
```

# 動く

ブレースじゃなくて do end で複数行で書くという裏技を教わった
```
subject do
  binding.pry
  some
end
```


# Original by Github issue

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








<!-- Update From Qiita API -->

# チャットメンバー募集


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

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





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
collectionを使いましょう

デリートインサートしたくない（一旦削除してまた紐付けると、sort_orderが変わってしまう）
Laravel の collection `$this->model->related_artists->whereNotIn('id', $request->artist_id))`が便利なので使えるものは使う


```php

            // 関連アーティスト
            // 紐付けが解除されたアーティストがいれば、対象アーティストの紐付けも削除
            if ($UnassociatedArtists = $this->model->related_artists->whereNotIn('id', $request->artist_id)) ##こここ* {
                foreach ($UnassociatedArtists as $UnassociatedArtist) {
                    $UnassociatedArtist->related_artists()->detach($this->model->id);
                }
            }
            if (isset($request->artist_id) && count($request->artist_id) > 0 ) {
                $sortOrder = 1;
                foreach ($request->artist_id as $artistId) {
                    // 関連アーティストを配列に格納
                    $artistSelfSyncData[$artistId] = [
                        'artist_id' => $this->model->id,
                        'sort_order' => $sortOrder,
                    ];
                    $sortOrder++;

                    $artist = $this->find($artistId);
                    // 対象アーティストに編集中のアーティストが紐付いていなければ、対象アーティストの紐付けも追加
                    if ($artist->related_artists->where('id', $this->model->id)->count() == 0) {
                        // sort_orderの最大値 + 1
                        $targetArtistSortOrder = $artist->related_artists->max('pivot.sort_order') + 1;
                        $targetArtistSyncData[$this->model->id] = [
                            'artist_id' => $artistId,
                            'sort_order' => $targetArtistSortOrder,
                        ];
                        $artist->related_artists()->syncWithoutDetaching($targetArtistSyncData);
                    }
                }
                // 関連アーティストの保存（同期）
                $this->model->related_artists()->sync($artistSelfSyncData);
            } else {
                $this->model->related_artists()->detach();
            }
Webデザインテンプレート

作ったWebデザインのテンプレートを提供いたします。
1日1デザインを目標にコミットしていく予定です。

# 現在のコミット数
2019年11月25日現在
合計 56本
|- PageTemplate 30本
|- Component 15本
|- Tutorial_YouTube 11本

基本はHTMLとCSSの静的デザインに多少jQueryで動きをつけています。

データの取り方
Mac: ターミナルから
Win: コマンドラインから
下記コマンドを実行してください。

```console:ターミナルorコマンドライン
# ダウンロードしたい場所に移動
cd Desktop

# データをクローン（コピー）
git clone https://d-mori-570415@bitbucket.org/d-mori-570415/webdesigntemplate.git
```
結局、Embeddingって何者？

# はじめに
深層学習を用いた自然言語処理に触れると、
Embeddingとかいう耳慣れないヤツに遭遇します。

日本語に直訳すると **埋め込み** です。
![time_cupsule_kids_30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/131499/3deca575-950e-6789-70d3-31b3f3110de0.png)

~~まるで意味が解らんぞ~~
よくわからないので調べました。

# どんな操作？
自然言語を計算が可能な形に変換することをEmbeddingと呼ぶようです。
多くの場合、**単語や文章等をベクトル表現に変換する操作**のことを指しています。

# なんのため？
大きく分けると二つ理由があります。

## 1. コンピュータが処理できるようにするため

基本的に現在の機械学習アルゴリズムは、文字列型を処理できるように作られていません。
そのため、計算可能な形に変換する必要があります。

## 2. 変換方法次第で精度の向上が見込めるため

また、単に計算可能な形にするだけでなく、ベクトルの表現方法を工夫することで
単語や文章の特徴をベクトルに表現できるようになります。

たとえば、**近い意味の単語同士を近いベクトル**となるように変換することで、
ベクトルの距離や類似度で、単語の意味(っぽいもの)を表せるようになるようになります。

# とりあえず動かしてみる
それっぽく書いてみましたが、動かさないと実感がわかないのでコードを書いてみます。

## 使用技術
実装が簡単な、gensimというライブラリの**Word2Vec**で埋め込んでみます。
以下の事前学習済みモデルをそのまま利用させていただきました。

※2017年2月1日版 日本語 Wikipedia エンティティベクトル©Masatoshi Suzuki 
http://www.cl.ecei.tohoku.ac.jp/~m-suzuki/jawiki_vector/

## いろいろ埋め込んでみる
とりあえず、"おはよう"、"こんばんは"を埋め込んでみます。
※諸々の処理は[コード](https://qiita.com/sakabe/items/5f14999ded1de087c9b5#%E3%82%B3%E3%83%BC%E3%83%89)を確認してください。

```python
print(model["おはよう"])

# [ 0.36222297 -0.5308175   0.97112703 -0.50114137 -0.41576928  1.7538059
#  -0.17550747 -0.95748925 -0.9604152  -0.0804095  -1.160322    0.22136442
# ...

print(model["こんばんは"])

# [-0.13505702 -0.11360763  0.00522657 -0.01382224  0.03126004  0.14911242
#   0.02867801 -0.02347831 -0.06687803 -0.13018233 -0.01413341  0.07728481
# ...
```
文字列がベクトルに変換されていることが確認できます。

。。。だから何だ、と言われた気がしたので意味を表現できているのか確認してみます。

## 類似度を確認してみる
文書の類似度を計算するときによく使われるコサイン類似度を見てみます。
ちなみにコサイン類似度は0から1の間で表現され、**1に近いほど類似**します。

まずは、先ほどの**"おはよう"と"こんばんは"**の類似度を見てみます。

```python
print(cos_similarity(model["おはよう"],model["こんばんは"]))
# 0.8513177
```
スコアが0.85...と出てきました。
まあまあ近いように思えます。

今度は単語の意味が遠いものとの類似度を見てみます。

```python

print(cos_similarity(model["おはよう"],model["ひじき"]))
# 0.17866151
```

スコアが0.17...でした。
**"おはよう"と"ひじき"**は遠いと言えそうです。

体感的にも、ベクトルに意味を持たせられていそうです。

# おわりに
Embeddingについてイメージくらいは掴めた様な気になりました。
少し前にバズったBERTのEmbeddingがすごくいいと聞いたので、試してみようと思います。

# コード

```python
import numpy as np
import gensim

# モデルの読み込み
model_path = "entity_vector/entity_vector.model.bin"
model = gensim.models.KeyedVectors.load_word2vec_format(model_path, binary=True)

# コサイン類似度
def cos_similarity(a,b):
    return np.dot(a,b) / ((np.sqrt(np.dot(a,a))) * (np.sqrt(np.dot(b,b))))

print(model["おはよう"])
print(model["こんばんは"])

print(cos_similarity(model["おはよう"],model["こんばんは"]))
print(cos_similarity(model["おはよう"],model["ひじき"]))

```
IntelliJにてgoenvで落としているGoを指定


# やること

[goenv](https://github.com/syndbg/goenv)を使ってGoのVersionを管理してIntellijを利用する場合の手順です。

```
$ cd YOUR_PROJECT
$ go env GOROOT
/Users/YOUR_NAME/.goenv/versions/1.11.0
```

上記のように出たならば、以下スクショのように設定してあげましょう。

<img width="1001" alt="スクリーンショット 2019-11-07 18.27.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/91562/3b450072-5bf1-6b56-9a5a-ec99e1d2fa40.png">

以上。
任意のサイトのSSLサーバ証明書を取得する

# 背景
Let's Encryptの証明書は90日で期限が切れちゃうので、定期的に期限を確認して、切れそうだったら教えてくれるプログラムを作りたいと思った。

しかし、いまいちC#でサーバ証明書を取得する正しい方法がわからない…
思いついた方法で無理やり作ったので、知っている人いたら教えてください。

# プログラム
`HttpClient`は、内部でSSLサーバ証明書を取得していて、有効かどうかを判定している。
`HttpClientHandler`の`ServerCertificateCustomValidationCallback`を指定すると、証明書が有効かどうかの判定を上書きできる。
その時に証明書にアクセスできるので、それを取り出せば、めでたくサーバ証明書を取得できる。

https://github.com/ShTair/CertificatesChecker/blob/master/CertificatesChecker/CertificateManager.cs

```c#
public static async Task<X509Certificate2> GetCertificateAsync(string uri)
{
    var tcs = new TaskCompletionSource<X509Certificate2>();
    _ = Task.Run(async () =>
    {
        var handler = new HttpClientHandler
        {
            ServerCertificateCustomValidationCallback = (_1, c, _2, _3) =>
            {
                tcs.TrySetResult(new X509Certificate2(c.RawData));
                return false;
            },
        };

        try
        {
            using (var hc = new HttpClient(handler))
            {
                await hc.GetAsync(uri);
            }
        }
        catch (Exception exp)
        {
            tcs.TrySetException(exp);
        }
    });

    return await tcs.Task;
}
```

`ServerCertificateCustomValidationCallback`で証明書にアクセスできるが、その証明書はすぐに破棄されてしまうようなので、`RawData`を使って証明書を複製している。WEBページの内容を取得したいわけじゃないので、`false`（証明書が無効であること）を返して、内容を取得しないことを期待している。

# 使い方
```C#
using (var certificate = await GetCertificateAsync("https://qiita.com/"))
{
    Console.WriteLine($"[{certificate.NotBefore:yyyy/MM/dd HH:mm:ss}]から[{certificate.NotAfter:yyyy/MM/dd HH:mm:ss}]まで有効");
}
```
1行で複数代入する変数の型ヒントの書き方

関数の返り値など，タプルを複数の変数に展開して代入する時の型ヒントの書き方がわからなかったのでメモ．
こうするらしい．1行では書けない．

```python
from typing import Tuple


def foo() -> Tuple[int, float]:
    return 1, 1.0


a: int
b: float
a, b = foo()

```


ちなみにこの構文の名前が不明なのだが， `unpacking a tuple` とかでググると良さそうです．

- [Type hints when unpacking a tuple?](https://stackoverflow.com/questions/52082939/type-hints-when-unpacking-a-tuple)
制御理論について(初投稿)

# 自己紹介
はじめまして。@wing-spiralです。
今回初めて、Qiitaに投稿しました！
前々からやってみたかったんですが、なかなかできていなかったので、
何を書こうかまだ完全にはまとまっていないですが投稿します！

内容としては、私が最近勉強している制御理論から扱っていこうかと思います。

カルマンフィルタとその応用について、とても興味があるので、そこらへんについて扱っていきます。

今の所の予定としては、

* 制御理論の概要
* オブザーバ
* カルマンフィルタ
* パラメータ同定

に関して扱っていこうと思います！

# 状態空間表現

まず初めにこれからの記事で扱う状態空間表現について定義します。
ある$n$次元ベクトル状態量$x$に対して

```math
\begin{eqnarray}
\dot{x}(t) &=& Ax(t) + Bu(t) \\
y(t) &=& Cx(t) + Du(t)
\end{eqnarray}
```

ここで$A$は$n\times n$行列、$B$は$n \times 1$行列で$u$はスカラーの量
このように表せる関係を連続時間状態空間表現と呼ぶ。


# 離散化
連続時間状態空間表現を$\Delta t$の時間間隔で離散化する。
この時、離散時間状態空間表現は

```math
\begin{eqnarray}
x[k+1] &=& A_{d}x[k] + B_{d}u[k] \\
y[k] &=& C_{d}x[k] + D_{d}u[k]
\end{eqnarray}
```

ここで、

```math
\begin{eqnarray}
A_{d} &=& e^{A\Delta t} \\
B_{d} &=& \int_{0}^{\Delta t}e^{A\tau}d\tau B \\
C_{d} &=& C \\
D_{d} &=& D
\end{eqnarray}
```

で表すことができる。

# 今後の予定

離散時間表現をベースにオブザーバについて検討していきます！
よろしくお願いします！
HTML <div>と<span>と<p>

サイト模写中は「divとspanはpは項目とかをまとめられる役割なんだなあー」とざっくりにしか理解していなかったので、少しずつきちんとわかった事をまとめていこうと思います。

##＜div＞タグ
division（分割・段）の略で、＜div＞～＜/div＞で囲った部分をブロック要素としてグループ化する。**前後に改行が入る**。
＜div＞タグ自身は特に意味を持たない。

##＜span＞タグ
短時間・全範囲の意味。＜span＞～＜/span＞で囲った部分をインライン要素としてグループ化する。**前後に改行が入らない**。
＜span＞タグ自身は特に意味を持たない。

##＜p＞タグ
paragraph（段落）の頭文字で、＜p＞～＜/p＞で**ページ内で段落を作る**

##実際に書いてみる

```index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>divとspanとp</title>
    <link rel="stylesheet" href="css/styles.css">
  </head>
<body>
  <div class="container01">
    <p>最初の文です。</p><p>2番目の文です。</p>
  </div>
  <div class="container02">
    <p>最初の文です。</p><p><span>2番目</span>の文です。</p>
  </div>
</body>  
</html>
```
```styles.css
body {
	margin: 0;
}

div {
	margin: 10px;
	width: 400px;
}
.container01 {
	background: lightcoral;
}
.container02 {
	background: #80f0ab;
}
p {
	margin: 0;
	padding: 0 0 0 10px;
	font-size: 20px;
	line-height: 35px;
	text-align: left;
}
span {
	color: #5797e0;
}
```
<img width="314" alt="20191107_Qiita02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509471/7e81cd8d-ed95-6bc1-ea16-6bc2baff841d.png">

＜div＞タグで囲むと1つのグループになって、こんな感じで背景とか変えられる。
＜p＞タグで囲んだところは、＜br＞タグを使っていないのに改行されている。
＜span＞タグで囲んだところは、改行されないからこんな感じで文字の色を変えられる。
go lang 任意の場所に要素を追加するのロジック説明

https://qiita.com/egnr-in-6matroom/items/282aa2fd117aab9469bd
こちらの記事の

```
pos := 追加する位置
// slice , slice[pos] = append(slice[:pos+1], slice[pos:]...), 追加する要素
slice = append(slice[:pos+1], slice[pos:]...)
slice[pos] = 追加する要素
```

このロジックがようわからんかったので軽く解説。

-----------------------------------


```go
slice = [0  ,1  ,2  ,3  ]
2まで取得 |--------|        => [0,1,2]
2から取得         |-----|  => [2,3]

//appendの第一引数でsliceの[0,1,2]を取得
//appendの第二引数でsliceの[2,3]を取得
//それらをsliceに代入 or 再定義する。
//すると、slice = [0,1,2,2,3]のsliceが出来上がる
//slice[pos]でpos番号のものを上書きする。

```


例)
posに2を指定する
第一引数 ： sliceの番号２までを取得[0,1,2]
第二引数 : sliceの番号2以降を取得[2,3]

sliceは[0,　1,　2,　2,　3]
　　　　　　　↑
posは2なのでslice番号２を指定し上書きしてしまう。
すると、あたかも要素を追加したかのように見える。
知識ゼロの状態で Apache Tomcat に挑戦する（１）

#Apache Tomcat とは
以下の２つのリンク（参考書、公式ＨＰ）で調べた限りでは、要約するとApache TomcatはサーブレットやJSPを扱うためのコンテナのようです。

* https://www.oreilly.co.jp/books/9784873117058/
* http://tomcat.apache.org/

~~サーブレット（Servlet）はJavaを勉強するときに登場しますが、Webサーバー上で実行される動的なhtmlページを作成することができます。~~
サーブレットは（Servlet）は、Webサーバー上で実行される動的なhtmlページを作成することができます。
Googleで調べた限りでは、JSP（Java Server Pages）は主に静的なhtmlページを作成するものだと理解しています。
（以下のリンクは参考にした記事です）

* http://www.cresc.co.jp/tech/java/Servlet_Tutorial/Lesson_900.htm
* https://www.javadrive.jp/servlet/jsp/index1.html

#目的
* Javaの勉強を楽しく継続することに役立てる
* Webアプリケーションを作る

#インストール
本記事では最もシンプルと思われる方法でTomcatの起動まで行います。
なので、.serviceとして自動実行することまでは行っていません。
また、公式ホームページ上でTomcat Setupに目を通しました。
http://tomcat.apache.org/tomcat-9.0-doc/setup.html

インストール時のPCの環境は以下のとおりです。

* Java 1.8.0_201
* Ubuntu 16.04 (64bit)

以下のリンクから、Apache Tomcat 9.0.27をZip形式でダウンロードします。
https://tomcat.apache.org

ダウンロードしたapache-tomcat-9.0.27.zipを、ディレクトリ名apache_tomcat9としてホームディレクトリに展開します。
展開後、binディレクトリ内のshutdown.sh、catalina.shおよびstartup.shの権限を755に設定します。

```
$ chmod 755 ./bin/startup.sh
$ chmod 755 ./bin/shutdown.sh
$ chmod 755 ./bin/catalina.sh
```

これらのスクリプトは、Tomcatの開始/終了時に利用されます。
また、環境変数設定ファイルのbash_profileに以下を追加します。（[User-Name]は使用者のユーザ名で書き換えます）
CLASSPATHはサーブレットを扱うために必要です。

```
export JAVA_HOME="/usr/lib/jvm/java-1.8.0-openjdk-amd64"                                                                                                                                                    
export CATALINA_HOME="/home/[User-Name]/apache_tomcat9"  
export CLASSPATH="${CATALINA_HOME}/lib/servlet-api.jar"      
```

設定後、Tomcatを起動します。（終了時はshutdown.shを実行します）

```
$ ./bin/startup.sh
Using CATALINA_BASE:   /home/[User-Name]/apache_tomcat9
Using CATALINA_HOME:   /home/[User-Name]/apache_tomcat9
Using CATALINA_TMPDIR: /home/[User-Name]/apache_tomcat9/temp
Using JRE_HOME:        /usr/lib/jvm/java-8-oracle
Using CLASSPATH:       /home/[User-Name]/apache_tomcat9/bin/bootstrap.jar:/home/kai/apache_tomcat9/bin/tomcat-juli.jar
Tomcat started.
```

http://[Host-Name]:8080 に接続し、次のようなページを開くことができれば起動完了です。（[Host-Name]は使用者のホスト名で書き換えます）
![名称未設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/528361/30e74285-8cbd-c2d0-cb62-bd72f1dfe331.png)
DevOpsを調べてみた

# はじめに
DevOpsについて調査したので、備忘録としてアップします。
ご意見・ご指摘などはどしどし、コメントにお願いします。

# DevOpsとは？
まず、DevOpsという言葉は、開発 (Development) と運用 (Operations) を組み合わせた言葉です。
どういう意味かについては明確な定義は現在ありませんが、私は以下のような定義で捉えています。

**「開発チーム(Development)と運用チーム(Operations)が協力しあってシステムを開発・運用することでビジネスの価値を高めかつ迅速にその価値をエンドユーザーに提供し続けるための様々な取り組みを示す概念」**

簡単に言うと、ビジネスやサービスの価値を向上するために、組織の枠組みを取り外していろいろ取り組んでみましょう。というイメージですね。

# DevOps誕生
2009年にオライリー主催のイベント「Velocity 2009」にて、当時Flickrに所属していたJohn Allspaw氏とPaul Hammond氏のプレゼンより誕生しました。
内容は下記のリンクより。
[10+ Deploys Per Day: Dev and Ops Cooperation at Flickr](https://www.slideshare.net/jallspaw/10-deploys-per-day-dev-and-ops-cooperation-at-flickr)

このプレゼンのなかで開発者と運用者の役割の違いによる対立を下記のように表現した。
>開発者の役割が"システムに新しい機能を追加する"である一方、運用者の役割は"システムの安定稼働"である。そのため、開発者は新機能追加のための変更をしたい、運用者はシステムの安定稼働のため変更したくない、という対立構造ができてしまった。

両者ともに目的は「システムによってビジネスの価値を高めること」のはずなのに、手段の違いにより対立し、目的の達成に悪影響を出してしまうということがあります。
そこで、両氏はこの問題解決のために取り組んだことを**組織文化**と**ツール**の観点から提示しました。

# DevOpsの観点とプロセス
### 組織文化
1. お互いを尊重する(Respect)
2. お互いを信頼する(Trust)
3. 失敗に対して健全な態度を取る(Healthy attitude about failure)
4. 相手を非難しない(Avoiding Blame)

### ツール
1. 自動化されたインフラストラクチャ(Automated infrastructure)
2. バージョン管理システムの共有(Shared version control)
3. ワンステップによるビルドとデプロイ(One step build and deploy)
4. フィーチャーフラグ（Feature flags)
5. メトリクスの共有（Shared metrics)
6. IRCとインスタントメッセンジャーのBot（IRC and IM robots）

### プロセス
1. プラン(PLAN)
2. ビルド(BUILD)
3. 継続的インテグレーション(CONTINUOUS INTEGRATION)
4. デプロイ(DEPLOY)
5. OPERATE(オペレーション)
6. 継続的フィードバック(CONTINUOUS FEEDBACK)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/350419/59e4ed2d-bda4-bb6c-44bd-ba1b83d31f94.png)

#まとめ・感想
システムの開発と運用が双方の立場を超えて、サービス・ビジネスの利益を最大化させようというのが本質なのだろうと思いました。

しかし、これはなかなか難しいものであるとも同時に感じました。特に大規模システムなどでは、関係者が複数社にまたがり人もお金も大きくなるものでこれをするとえらいことになりそうとも感じました。

これからのシステム開発では大きな一つをつくるのではなく、小さいシステムが重なりあって大きなシステムになる未来であるならば、小さいシステムそれぞれでこの考え方を適用し、開発運用を行うことができるのかもしれません。

# 参考サイト
* [DevOps(Wikipedia)](https://ja.wikipedia.org/wiki/DevOps)
* [よく耳にするDevOpsとは？わかりやすく解説します](https://proengineer.internous.co.jp/content/columnfeature/13575)
* [DevOpsとは何か？ そのツールと組織文化、アジャイルとの違い](https://www.buildinsider.net/enterprise/devops/01)
[Ruby on Rails] Google Search Consoleを導入したらrobots.txtがないと怒られgoogleでモバイルページ認識されない件

#結論
**・ RailsサービスでGoogle Search Consoleを導入した場合、robots.txtがないとgoogleでモバイルページとして認識されないことがある。**
**・ その場合はpublic下にrobots.txtをおき、クローラーに対しdisallowではないことを明示する必要がある。**

#背景・状況
Web広告代理店にリスティング広告・ディスプレイ広告を依頼
↓
モバイルの読み込みスピードが遅いためリスティング広告審査落ちしたとの通知
↓
[Google Speed Insights](https://developers.google.com/speed/pagespeed/insights/)を参照しながら、読み込みスピード改善
↓
読み込みスピードは改善されたが、審査は通らず
↓
Googleに再度問い合わせ。
[Mobile Frendly Test](https://search.google.com/test/mobile-friendly)で確認するように指示される。
↓
テストしたところ以下のようなエラー発生
>"ページにアクセスできません。ページが利用できない、ページがrobots.txtによってブロックされているといった理由が考えられます。"
<img width="689" alt="スクリーンショット 2019-11-06 12.24.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274935/5a0a6067-ffec-1f28-234e-19630c4f64b0.png">

- PC/Mobileともアクセスは出来る状態
- Search Console の公開URL検査でも**"URLがGoogleに登録されていません"**となってしまう
- Railsバージョン　[Rails 5.0.7]
- サーバー AWS
- DNSサーバー　お名前ドットコム

#検証過程

###１.Google Search Console　リファレンスを参照
[Google Serach Console ヘルプ](https://support.google.com/webmasters/answer/9012289#url_can_be_on_google)をメインにいろいと検証を試みる　→　効果なし

そのほか"rails robots.txt ブロック"等で検索してみるのですが、解決に繋がるものは見つからず。。。

###２.サーバー状態確認
サーバー/IPアドレス設定　→　問題なし
アクセスログ　→　問題なし

###3.静的ページで検証
レイアウトやコントローラー側の問題である可能性を検証するため、全くレイアウトを反映させない静的なテストページをMobile Frendly Testにかけてみる　→　同じように"ページにアクセスできません"となる　＝　レイアウトやコントローラーの問題ではない


###4.自社の他サービスとの比較・検証
今回問題が発生しているサービス以外にも、自社で運営しているRailsサービスがあるので、それらをMobile Frendly Testにかけてみる　→　**問題なく"モバイルフレンドリーです"と表示される!!**

、、、、ということは問題が発生しているRailsサービスとその他のRailsサービスとの違いに原因があるはず。

問題が発生しているRailsサービス ： **リスティング広告を始めるに当たってSerach Consoleを設定。**
その他のRailsサービス　： **Search Console設定はしていない。**

#Railsとrobots.txt
>サイトを巡回するクローラーの動作をコントロールするために記述するテキストファイル（.txt）のことです。

引用元：https://seolaboratory.jp/41315/

Railsの場合、robots.txtがなければ、デフォルトでクロール許可するようになっている。
クロールを制限したい場合、制御したいクローラーを指定する場合などにrobots.txtを追加して設定する。


#解決方法
通常であればクロールを許可する場合robots.txtの設定は必要ないが、試しに設定してみる。


public下にrobots.txtをおき、クローラーに対しdisallowではないことを明示する

```public/robots.txt
User-agent: *
Disallow:
```

Search Console及びMobile Frendly Testともページ認識されるようになり、無事リスティング広告審査も通った。

以上、検証過程も加味すると

**・ RailsサービスでGoogle Search Consoleを導入した場合、robots.txtがないとgoogleでモバイルページとして認識されないことがある。**
**・ その場合はpublic下にrobots.txtをおき、クローラーに対しdisallowではないことを明示する必要がある。**

と言えるのではないか。

#あとがき
"Rails Search Console"について書かれているものがあまりなく、苦労しました。
同じ問題を抱えている方の参考になれば。
また、ご指摘あればコメントお願いします。
CentOS7の32ビット版にEPELをインストール

# 経緯
Linuxのプログラミングを勉強するためにAPUEのプログラムをコンパイルします。

# 問題
APUEソースのmakeでエラーが発生しました。

## ライブラリが足りない
makeのエラーを調査したところ、libbsd-develというライブラリをインストールしないといけないようです。

yumでlibbsdをインストールしようとしたところ、
見つかりませんでした！

色々試したところ、ネットワーク問題が発見！

## ネームサーバの設定
sshもできているし、nmcli deviceの実行結果も「接続」と表示しているし、最初に、yumの検索ができなかったのはネットワーク問題と思いませんでした。
※*VMWareで色々やったことがありますが、VirtualBox（32ビット）とCentOS7（32ビット）の組み合わせは初めてなので、この組み合わせの問題であるかは不明。*

色々試してもできなかったため、ギブアップ寸前試しに/etc/resolv.confに「nameserver 9.9.9.9」を追加して解決。

```shell:/etc/resolv.conf
nameserver 9.9.9.9
```

yum updateはできてから再度yum search libbsdを検索したら、まだ見つかりませんでした！WTF！！！
調査したところ、EPELのインストールは必要のようです。

## EPELのインストール
しかし、32ビットのCentOS7にはEPELがない！！！WTF x 2！！！

結局、以下のコマンドでEPELを追加しました。

```shell
# rpm -import http://dl.fedoraproject.org/pub/epel/RPM-GPG-KEY-EPEL-6
# rpm -ivh http://dl.fedoraproject.org/pub/epel/6/i386/epel-release-6-8.noarch.rpm
```

# 最後に
libbsd.develのインストールはできて、APUEのmakeはできて、自作のプログラムも正常にコンパイルできました。
色々疲れましたね。。。
WSLからDocker for Windowsを操作しディレクトリがうまくマウントできないとき

私は、[WSLでDocker for windowsを使うッ！！！](https://qiita.com/endo_hizumi/items/0cc50bdfbd827579733e#wsl%E3%81%AE%E3%83%9E%E3%82%A6%E3%83%B3%E3%83%88%E5%85%88%E3%82%92%E5%A4%89%E6%9B%B4%E3%81%99%E3%82%8B)の記事を参考にWSL上でdocker for windowsを動かしてみました。
記事が素晴らしくシンプルにまとまっていて分かりやすかったです。

記事中では```/etc/wsl.conf```を修正し```/mnt/c/```の位置を変更することで、windowsのディレクトリをマウントできるようにしていますが、設定を変更しなくても良い感じに動かせるぽいので紹介します。


## Dependency
Ubuntu 18.04 on WSL ?
※ WSL2では無いです

## コマンド
下記のどちらかでうまく動かせます。

```bash
$ docker run -v `wslpath -m $PWD`:/app -w /app -it ubuntu bash

$ docker run -v $(wslpath -m $PWD):/app -w /app -it ubuntu bash
```

wslpathのオプションは```-m```でなく```-w```でも動くみたいです。

ちなみにwindows上にパスが存在せず
コンテナにマウントできない場所でwslpathを実行するとエラーになるので、
便利だったりします。

```bash
$ docker run -v `wslpath -m $PWD`:/app -w /app -it ubuntu bash
wslpath: /tmp/exmple: Invalid argument
```

## 説明とか
wslpathについては下記の記事が詳しいです。
https://laboradian.com/wslpath-command-for-wsl/
docker for windowsのパス指定についてはこの記事が詳しいようです。
https://qiita.com/gentaro/items/7dec88e663f59b472de6


廃止予定?のコマンドですが[wslu](https://github.com/wslutilities/wslu)のwslupathを使っても良いかもしれません。
この記事が誰かの参考になれば幸いです。
Yubikeyのスペアキー制作方法 - Mac版

基本的には：https://www.yubico.com/setup/ 参照

MAC機器
1) https://www.yubico.com/products/services-software/download/yubikey-manager/ からmacOS用のyubikey Managerをダウンロード

2)　設定を行うYubikeyをPCに接続

3)　Yubikey Managerを起動して、接続しているYubikeyが認識されてることを確認する

4) ApplicationsからOTPを選択

5) Long Touch (Slot2)　→　Configureをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416275/054c651e-88fa-37cc-aa80-6630abae6e0f.png)

6) Challenge-response　→　Next
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416275/d1bdee36-cbf7-be83-b849-d58e5e8de82a.png)

7) Secret keyの値を入力する
8) Require touch にチェックをいれ、Finish

これで値のSecret Keyが入ったスペアキーができます！
Cloud FunctionsでのTipps　（Javascript ブラケット記法とドット記法について ）

#自己紹介

渋谷でうろちょろするインフラエンジニアでっす。
LinuxとかCiscoとか、ESXiとかOpenstackで生きてきましたが、
この度GCPを使ったサービスの基盤開発を仰せつかり、がっぷり取り組んでおります。
たのしいぜ！

#やりたかったこと

GCPのStackdriver Loggingに流れてきたログを、Pub/SubでCloud Functions叩いてSlackに通知したいぜ。

#背景

Stackdriver loggingには、GCE上のgoogle-fluentdで整形されてこんな形のjsonPayloadで通知されるようになってます。

```js
{
 insertId: "XXXXXXXXXXXXX"  
 jsonPayload: {
  date: " 2019/11/07 08:03:15.393"   
  message: " ERROR hogehoge"   
  process: "11920"   
  severity: "ERROR"   
 }
 labels: {
  compute.googleapis.com/resource_name: "test"   
 }
 logName: "projects/hogera/logs/test"  
 receiveTimestamp: "2019-11-07T08:03:16.592248634Z"  
 resource: {…}  
 timestamp: "2019-11-07T08:03:15.393217602Z"  
}
```
で、severityがERRORとかFATALが発生したらPub/Subに収容し、
Slack通知用のCloud Functionsを叩こう、という算段です。


事象が発生したホスト名をペイロードから取ろうとして、ハタと手が止まる。

```js
  compute.googleapis.com/resource_name: "test" 
```

キーにスラッシュ入ってね？これどうにかしてエスケープできんのか？

# 困った

Cloud FunctionsでtextPayloadというオブジェクトに詰めて、こんなかんじで取得しようとしたんですが・・・・

```js
    const textPayload = JSON.parse(Buffer.from(pubsubMessage.data, 'base64').toString());
    const body = {
        attachments: [{
            title: "APPLICATION LOG DETECTED",
            text: textPayload.jsonPayload.severity,
            color: LOG_COLORS["WARNING"],
            fields: [
                { title: "Host", value: textPayload.labels.compute.googleapis.com/resource_name, short: true },　★★
                { title: "Instance_id", value: textPayload.resource.labels.instance_id, short: true },
                { title: "Message", value: textPayload.jsonPayload.message, short: true },
                { title: "Timestamp", value: textPayload.timestamp, short: true },
            ]
        }]
    };
```

上記の★★でうまく動かず。
エスケープ、どうすんだろ。



```js
  compute.googleapis.com/resource_name: "test" 
```

エラー。

#助けて先生

ぷろぐらむわかんなーいということで隣席の先生に泣きついたところ、事も無げに、
**「Javascriptではブラケット記法とドット記法は等価でござるよ」**
とのたまいました。

先生はさらりさらりと上記コードの★★を以下のようにブラケット記法に書き換え。

◎Before

```js
{ title: "Host", value: textPayload.labels.compute.googleapis.com/resource_name, short: true },
```

◎After

```js
{ title: "Host", value: textPayload.labels["compute.googleapis.com/resource_name"], short: true },
```


Yay!


ドット記法でもうまくエスケープする方法あるんですかね。
職業プログラマはやはり凄いなあ。先生ありがとう。

#今後

気が向いたら、GCP界隈の記事を上げるかもしれない。
redis-sentinel のノード切断時のステータスの推移



## レプリカ

```bash
redis-cli -p 26379 sentinel slaves mymaster
   10) "slave"　↓

   10) "slave,disconnected"　↓

   10) "s_down,slave,disconnected" ↓
```

----

## マスター

```bash
redis-cli -p 26379 sentinel master mymaster
  10) "master" ↓

  10) "master,disconnected" ↓

  10) "s_down,master,disconnected" ↓

  10) "s_down,o_down,master,disconnected" ↓
```
python  正規表現RegexでURLの一致チェック、抽出 完全版

自分用メモ

URL抜き出し判別ほぼ完ぺきパターン

Regex長いけど、色々比較したけどこれが一番精度いい。
色々なパターンあるけど、誤った認識多いやつだとそのうち問題出る。

```
_^(?:(?:https?|ftp)://)(?:\S+(?::\S*)?@)?(?:(?!10(?:\.\d{1,3}){3})(?!127(?:\.\d{1,3}){3})(?!169\.254(?:\.\d{1,3}){2})(?!192\.168(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\x{00a1}-\x{ffff}0-9]+-?)*[a-z\x{00a1}-\x{ffff}0-9]+)(?:\.(?:[a-z\x{00a1}-\x{ffff}0-9]+-?)*[a-z\x{00a1}-\x{ffff}0-9]+)*(?:\.(?:[a-z\x{00a1}-\x{ffff}]{2,})))(?::\d{2,5})?(?:/[^\s]*)?$_iuS
```
nmcli備忘録

# nmcliでコネクションが表示されない
Debina/UbuntuでNetworkManagerでcmcliを使用して管理している場合
/etc/NetworkManager/system-connections/以下にコネクションごとのファイルが保存されています。
RedHat系だと/etc/sysconfig/network-scripts

コネクションはそれぞれuuidで区別されてるようなので、
ファイルごとのコピーするとuuidが重複するので、一つしか認識しないようです。
コネクションをコピーする場合は

```bash
nmcli clone {old connetion} {new connection}
```

#no suitable device for this connection
他にも原因でもこのエラーが出ることがあるかもしれませんが、コネクションに対するNICのmacアドレスが見つからないことが原因でした。
NICを限定しない場合は以下のコマンドでMACアドレスを削除しました。

```bash
nmcli connection modify 802-3-ethernet.macaddress ""
```
UIButtonのタイトルがはみ出てしまう場合の対処法

環境はXcode11, Swift5.1です。

ググったところヒラギノフォントを使用した場合にボタンから文字がはみ出てしまうようですが、フォント関係なくはみ出てしまっていたため色々と試行錯誤してしまいました。。
## 解決法

```
hogeButton.contentVerticalAlignment = .fill
```
これをadjustsFontSizeToFitWidthと組み合わせて使うことで解決しました。
ラベルのプロパティは色々と競合が起きたりと難しいです。。

## 参考
https://qiita.com/Sasakky/items/0243ed45113f8797e81e
Raspberry PiからLineに出力する

[# Raspberry PiからLineにメッセージを出力する。
Line Nptifyから
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274715/cd38d8b7-4ed5-bae1-40ff-c6b8d1caa261.png)](https://notify-bot.line.me/ja/)
マイページを選択する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274715/3b99586a-f417-3a17-ae1d-69ecde82a0ab.png)
アクセストークンをもらう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274715/89a41384-c6a5-9a99-0ce7-25918a133920.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274715/06792b8b-9e0d-2f75-cd6a-7ee1f314292a.png)
発行をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274715/4d8aed8b-9bed-3024-fab2-7d1659051b29.png)
トークンを取得したならば

```LineNotify.py
'''
Line Notify Test Program
'''
def LinePrint(msg):
    import requests
    token='{取得したトークン}'
    headers = {'Authorization': 'Bearer %s'%token, }        
    files = {'message': (None, msg),}
    r = requests.post('https://notify-api.line.me/api/notify', headers=headers, files=files)
    print(r,r.text)
LinePrint("\nhello world")
```
実行すると
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274715/4b24dd6b-c469-f2b3-1873-be9a90660eb4.png)
Lineにメッセージを飛ばすことができる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274715/c1bd5fae-a191-ea2f-6137-f0ce98df2828.png)
CloudFormationのテンプレートで変数名をエスケープする方法

CloudFormationのテンプレートで作成するポリシーの中に、ポリシー変数を埋め込みたい場合、このように書くとエラーとなります。

```
"Fn::Sub": "arn:aws:iam::${AWS::AccountId}:user/${aws:username}"
```

エラーを回避するために、'!'でエスケープさせることができます。

```
"Fn::Sub": "arn:aws:iam::${AWS::AccountId}:user/${!aws:username}"
```

[公式ドキュメント](https://docs.aws.amazon.com/ja_jp/AWSCloudFormation/latest/UserGuide/intrinsic-function-reference-sub.html)にも記載はあるのですが、「エスケープ」という単語で引っかからないのでメモ。
Markdownで2カラムの文書を作りたい

# 概要

- htmlの記法を導入してしまえばmarkdownでも2カラムの文章を作れる。
- 簡単に手早くPDFに変換するにはどうすればいいのか悩まれる。（拡張機能だと崩れる）

# 2カラムの文章をMarkdownで作る

本当はTexで書く2カラム文書のようにしたいがどうも厳しそうなので単に領域を左右に2分割して文章を綴る形式にする。

## 前提


VS Codeと下記のパッケージを使って2カラムの文書を作る。

- Markdown All in One
- Markdown PDF

## 2カラム表記にする

以下のようにstyleで予め宣言することで左右の配分を替えられる。右上の記述もstyleで設定できる。

```html
<style>
.column-left{
  float: left;
  width: 47.5%;
  text-align: left;
}
.column-right{
  float: right;
  width: 47.5%;
  text-align: left;
}
.column-one{
  float: left;
  width: 100%;
  text-align: left;
}
</style>
```

その後本文中では次のように書く。

```markdown

<div class="column-left">

# Left Column

</div>
<div class="column-right">

# Right Column

</div>
```

## Preview上での表記

Preview上ではきちんと2カラムで表示される。

頭の弱い文章が書いてあるが許してほしい。ここにある通り図の貼り付けなどもhtmlの記法を使うと捗る。[参考](https://qiita.com/higuma/items/3344387e0f2cce7f2cfe)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188863/a818da37-5e30-f91a-2ca8-69d8d0555511.png)


# PDFへの変換
PDFに一発できれいに変換できていない。pandocもあまり使いたくないので拡張機能内で処理できると嬉しいのだが…

## Markdown-PDFでのPDF変換
VScodeにはMarkdown-PDFという便利な拡張機能が存在するが，PDFに直接変換すると2カラムが崩れてしまう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188863/363966cd-4998-0488-191d-afa25b286d3c.png)

## Markdown-PDFでのHTML変換

HTML変換では2カラムは崩れないのでHTMLにしてから印刷なりPDFに変換なりする。
文字がギュッと詰まってこっちのほうが好み。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188863/0c897537-abe1-c80f-6ea4-548f56192415.png)

## Markdown Preview Enhancedからブラウザを介してPDF変換

Previewの高機能版を使えばPDF変換もできるが，一番見た目が良かったのはブラウザでPreviewを開いてそこから印刷するという手法。回りくどいがきれいなPDFが出来上がる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188863/dab93242-18ea-1812-721d-81f8630a5aa2.png)


# まとめ
あまり手間取るならTexで書けば良くね？となるので加減が難しい。あと別にこのタイプの2カラムに需要があるのかというとよくわからなくなってきた。
Androidアプリで、初回のタッチイベントのみ取得できない

# はじめに
htmlを表示するAndroidアプリを扱っていて、
タブレットの再起動直後タップして他画面へ遷移、という動作を行おうとしたところ、
遷移が行われず、2回目のタップで遷移が行われた、ということがあったので、原因を調査しました。
試行錯誤の様子をネチネチ綴ります。

# 最初はアプリ上のブラウザにフォーカスがないからかと思った
単純に、初期表示のonLoad時に`$(window).focus`すればいいんじゃない？
と思ってhtml側でを修正してみましたが、
tomcat再起動してタブレットを再起動した1回目はなぜか初回のタップで画面遷移ができるのに、
次再起動したらもう初回のタップで画面遷移ができないという...

ブラウザにフォーカスを当ててもだめ...
ということは画面に表示された部品にフォーカスが当たってたらいいとか？

# 動的にアプリ側からフォーカスを置くjavascriptを呼んでみる
androidアプリでhtml上にフォーカスを置くの、どうしたらいいんだろうと検索しまくると、
[ここ](https://stackoverflow.com/questions/5662828/android-webview-setting-html-field-focus-using-javascript)が似たようなことをやっているので参考にしてみました。

特に入力項目がない画面なので、暫定的にテキストボックスを置いて、

```
Text 1<input type='text' id='text1'/>
```

[ここ](https://stackoverflow.com/questions/5662828/android-webview-setting-html-field-focus-using-javascript)と同じようにjavascriptから下記を呼びます。

```
document.getElementById("text1").focus();
```

すると、Androidのキーボードが表示されてしまいますが、
ブラウザ上にフォーカスが乗って、初回のタップで画面遷移ができたではありませんか。

やったね！解決！

とはならなかった。だって、キーボードも表示されたくないし、テキストボックスもいらないから。

でも、これでブラウザにフォーカスが乗ってないから説が裏付けられそうです。
では、htmlに何かの部品を見えないように置いておいて、
その部品にフォーカスを置く感じにすれば、初回のタップで画面遷移ができるようになって解決でしょうか。


# まずキーボードを出さないようにできないかな？
まずはキーボードを出さないようにするにはどうしたらいいか調べてみました。
readonlyを設定すればキーボードが出ないようです。
よし、これでいってみましょう。

```
Text 1<input type='text' id='text1' readonly='readonly'/>
```

？

あれ？フォーカスは乗っているのに、初回のタップで画面遷移ができません。

# そもそもinputタグはhiddenにするとフォーカス置けない
キーボードを出さないようにしたら初回のタッチイベントが取得できない時点でもうこの案はダメなのですが、
諦め悪く調べていたら、inputタグは見えないようにhiddenにするとフォーカスが置けないということがわかりました。

# 最初からタッチイベントがちゃんと動いているか調べていればよかったのに
初心に帰ってタッチイベントが呼ばれたらログが出るようにしてみました。
やってみると1回目のタッチイベント、呼ばれていませんでした。

2回目のタッチイベントからは呼ばれますけど。

ということは、動的にフォーカス置く処理を呼ぼうが、初期処理で呼ぼうがぜんぜん関係ない話なのね。。。

# 原因はAndroidアプリ側にある

1回目だけタッチイベントが呼ばれないとかある？と思って検索を続けると、
[Androidでタッチイベントが取得できないだと！](http://latache-program.blogspot.com/2017/01/android.html)という記事にたどり着きました。
同じ悩みを持った人がいる！

記事を読み進めると、[解決策](http://latache-program.blogspot.com/2017/01/android_10.html)のエントリも発見！
これによると、ナビゲーションバーを隠す処理を入れたことによる影響のよう。

ナビゲーションバーは通常下記のように隠します。

```
View view = window.getDecorView();
view.setSystemUiVisibility(View.SYSTEM_UI_FLAG_HIDE_NAVIGATION | View.SYSTEM_UI_FLAG_FULLSCREEN | c);
```

記事の説明によると、
>この命令は、あくまで、ナビゲーションバーを“隠す”ものなのだ。
で、隠れた状態で、タッチすると、ナビゲーションバーが表示される。

>このナビゲーションバーの表示に、１タッチ取られているから、初回のタッチは検出できず、ナビゲーションバーは一度表示されると、二度と隠れないので、そのままアプリのActivityにタッチイベントが通知される、という動作のようだ。

ということらしい。
今扱っているアプリは設定から常時ナビゲーションバーを非表示にしており、
加えて上記の処理を適用しているので、おそらくナビゲーションバーは不可視なだけで
実際は動いているのかもしれません。理屈はよくわからないが。

記事に従ってナビゲーションバーを隠す処理を下記のように変更したら
無事初回からタッチイベントが取得できました！やったー！

```
View view = window.getDecorView();
view.setSystemUiVisibility(View.SYSTEM_UI_FLAG_HIDE_NAVIGATION | View.SYSTEM_UI_FLAG_FULLSCREEN | View.SYSTEM_UI_FLAG_IMMERSIVE | c);
```

# ラターシュさんありがとう
こんなニッチな情報を残していてくれた方がいて、本当にありがたい。
なんならアマギフ送りたい。

# 参考サイト
[Android WebView - Setting HTML Field focus using Javascript](https://stackoverflow.com/questions/5662828/android-webview-setting-html-field-focus-using-javascript)
[Androidでタッチイベントが取得できないだと！](http://latache-program.blogspot.com/2017/01/android.html)
[Androidでタッチイベントが取得できないだと！/ 解決編](http://latache-program.blogspot.com/2017/01/android_10.html)
セッターとゲッターについてまとめる

####セッターとゲッター

```user.rb
class User
 def name=(name) #セッターを定義
  @name = name
 end

 def name #ゲッターを定義
  @name 
 end 
end
```

上記の一つ目のdef内で「name=」というメソッドを追加している
これはインスタンス変数を代入するためのメソッドで**セッター**と呼ぶ。

```
>user = User.new
>user.name = "吉田沙織"
=>"吉田沙織"
```
これによりインスタンス変数に名前を代入することが可能になった。

また二つ目のdef内ではインスタンス変数の内容を参照するためのメソッドを作成している。
これを**ゲッター**と呼ぶ

```
>user.name
=> "吉田沙織"
```
これにより名前を設定し,設定した名前を返すことができるようになった。

####ゲッターとセッターをもっと簡単に定義する
Rubyではゲッターセッターを定義するために、上記のコードのような機械的な記述をする必要がない。
そのために**attr_accessor**というメソッドを使う
書き方は以下の通りである

```
class User
 attr_accessor :name
end
```

非常に簡単に記述できる。
gcloud logging read をパイプすると多バイト文字が文字化けするとき

# 対処方法
python2に別れを告げる。
pyenvを使ってるなら、CLOUDSDK_PYTHONにインストールパスを指定する。

```bash

CLOUDSDK_PYTHON=/home/user/.pyenv/versions/3.6.7/bin/python gcloud logging read
```
[C#] モーダル ダイアログ と モードレス ダイアログ

C# WinFormsの「モーダル ダイアログ」と「モードレス ダイアログ」の忘備録になります。

#1. モーダルダイアログと、モードレスダイアログの違い

|モード名|内容|
|:---|:--|
|モーダル ダイアログ|ダイアログボックスを閉じるまでは、同じアプリケーションの他のウィンドウに対する操作ができないダイアログボックス|
|モードレス ダイアログ|ダイアログボックス表示中でも他のウィンドウの操作可能なダイアログボックス|

#2. モーダルダイアログの表示方法

```C#
var form1  = new Form1();
form1 .ShowDialog();
form1 .Dispose();
```

ダイアログが不要になった時に Disposeメソッド を呼び出し、リソースを解放しなければならない。

#3. モードレスダイアログ

```C#
var form1  = new Form1();
form1.Show();
```

##3.1 モードレスダイアログの多重起動禁止

```C#
Form1 form1 = null;

private void button1_Click(object sender, System.EventArgs e)
{
    if ((form1 == null) || form1.IsDisposed)
    {
        form1 = new Form1();
        form1.Show();
    }
}
```

#4. 複数のダイアログ間で情報のやりとり

子ダイアログのプロパティを利用する。
(他にも方法はあるが、基本的におさえておくべき所だけ)

```C#:Form1.cs
using System;
using System.Windows.Forms;

namespace WindowsFormsApp2
{
    public partial class Form1 : Form
    {
        Form2 form2 = null;

        public Form1()
        {
            InitializeComponent();

            form2 = new Form2();
            form2.Show();

            textBox1.Text = form2.FormName;
        }

        private void button1_Click(object sender, EventArgs e)
        {
            form2.FormName = "Form1";
            form2.SetText();

            textBox1.Text = form2.FormName;
        }
    }
}
```

```C#:Form2.cs
using System;
using System.Windows.Forms;

namespace WindowsFormsApp2
{
    public partial class Form2 : Form
    {
        public string FormName { get; set; } = "Form2";

        public Form2()
        {
            InitializeComponent();
            SetText();
        }

        public void SetText()
        {
            textBox1.Text = FormName;
        }
    }
}
```
コンストラクタ-java

**コンストラクタ**とは、newを使ってインスタンスを生成した後に**自動で呼び出される特別なメソッド**です。
コンストラクタは特別なメソッドのため、定義方法が決まっています。
**①コンストラクタ名はクラス名と同じにする**
**②戻り値を書いてはいけない（voidも書かない）**
という2つの決まりを守りましょう。
この2つさえ守れば、コンストラクタの完成です。

```java:Sample
class Sample{
  Sample(){
      //インスタンス生成時に行いたい処理内容
     }
}
```
【Unity】スクリプトをGameObjectにアタッチしなくても呼び出せるよっ

#はじめに
この記事はUnityで,

- **スクリプトから他のスクリプトの変数やメソッドを呼び出したい人**,
- **スクリプトをGameObjectにアタッチしなくても, そのスクリプトの変数やメソッドを呼び出したい人**

向けに書きました.
ただし呼び出される側のスクリプトは, StartやUpdateのようなイベント関数を含まず, 変数や自作のメソッドだけを含むことにします.
簡単なことですが, ググってもあまり情報がなかったので残しておきます:wink:.

#呼び出される側のスクリプト
1. Assetsの中に**Another.cs**というスクリプト(呼び出される側)を用意します:point_down:
![スクリーンショット 2019-10-31 15.34.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/303261/e11aad49-f7ca-2467-cfe9-67d2773a1488.png)
2. **Another.cs**に:point_down:を書き込みます.

```Another.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

// 呼び出される側のスクリプト. GameObjectにアタッチしない.
// StartやUpdateを使わないため, MonoBehaviourは不要.
// 他のスクリプトから読み込むため, publicを付ける.
public class Callee
{
    // 呼び出される変数
    public int exampleNumber = 17;

    // 呼び出されるメソッド
    public void Sup()
    {
        Debug.Log("Good!");
    }
}
```
もちろん, **Another.cs**はどのGameObjectにもアタッチしません:thumbsup:

#呼び出す側のスクリプト
1. Assetsの中に**UsingOtherComponents.cs**というスクリプトを用意します.
![スクリーンショット 2019-10-31 15.34.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/303261/c0abdf13-d45a-1511-de64-381567b35c26.png)
2. **UsingOtherComponents.cs**に:point_down:を書き込みます.

```UsingOtherComponents.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

// 呼び出す側のスクリプト. GameObjectにアタッチする.
public class UsingOtherComponents : MonoBehaviour
{
	void Start()
	{
        // Another.csのCalleeのインスタンス化
		Callee _Callee = new Callee();

        // 変数の呼び出し.
        int _exampleNumber = _Callee.exampleNumber;
		Debug.Log("Eample number is " + _exampleNumber);

        // メソッドの呼び出し.
		_Callee.Sup();
	}
}
```
3.:point_down:のようにGameObjectを用意します.
![スクリーンショット 2019-10-31 15.52.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/303261/a884b7bf-3b23-bf52-684a-f4b0f0927738.png)

4.**UsingOtherComponents.cs**を**GameObject**にアタッチします:point_down:.
![スクリーンショット 2019-10-31 15.54.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/303261/7ece537c-5c79-e77a-a1d7-e949a8469a9c.png)


#実行結果
それでは実行してみましょっ!
![スクリーンショット 2019-11-07 16.33.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/303261/59a4a76a-f9c8-8da0-fabb-7e8ac6cc4276.png)
ちゃんと呼び出せてます:wink:.
【中級者への道】Pythonの組み込み関数varsを活用する


# まとめへのリンク

https://qiita.com/ganariya/items/fb3f38c2f4a35d1ee2e8

# はじめに

Pythonの勉強をするために、[acopy](https://github.com/rhgrant10/acopy)という群知能ライブラリを写経していました。

acopyでは、多くのPythonの面白い文法・イディオムが使われており、その中でも便利だなぁというのをまとめています。


今回は、`vars`という組み込み関数について見ていきます。

# varsとは？

pythonには、組み込み関数がいくつかありますが、そのうちの一つが`vars`という関数です。
`vars(x)`は、オブジェクト$x$の`__dic__`属性を辞書として返します。

## `__dic__`とは？

`__dic__`とは、モジュールやクラス・インスタンスのオブジェクトの、dict属性のことです。
dict属性には、オブジェクトに設定されているすべてのプロパティの名前と対応付けられている値が入っています。

# 具体例

varsが、`__dic__`属性を返しているのを簡単なコードで見てみます。

```py
class A:

    def __init__(self, x, y):
        self.x = x
        self.y = y


def f():
    x = 50
    print(vars())


a = A(10, 20)
'''
{'x': 10, 'y': 20}
'''
print(vars(a))

'''
{'x': 50}
'''
f()

```

クラスAのオブジェクトaに`vars`を使用してみます。
すると、クラスAのオブジェクトaに設定されている`__dic__`属性、つまりaのすべてのインスタンス情報を辞書で取得できます。
また、関数内でも関数内のローカルシンボルテーブルが定義されるため、何もvarsに指定しなければ、そのローカルシンボルテーブルの`__dic__`を返します。よって、xの辞書を返します。

このように、varsによって、`__dic__`属性を習得することができます。

# 活用法: オブジェクトをすべて渡す

varsを利用することで、例えばクラスのインスタンスのすべての情報を、他のクラス・メソッドにわたすことができます。
**アンパック**という機能と組み合わすことができるためです。


例えば、以下のようなコードを見てみます。

```py
class KeywordPrinter:

    @staticmethod
    def printer(**kwargs):
        text_arr = [f'(key = {key}, value = {kwargs[key]})' for key in kwargs.keys()]
        return ', '.join(text_arr)


class A:

    def __init__(self, x, y):
        self.x = x
        self.y = y

    def __repr__(self):
        return self.__class__.__name__ + KeywordPrinter.printer(**vars(self))


'''
A(key = x, value = 10), (key = y, value = 20)
'''
a = A(10, 20)
print(a)

```

まず、KeywordPrinterという辞書をすべて文字列に直すクラスを定義します。

また、クラスAに`__repr__`属性のメソッドを定義し、printで任意の文字列を出力できるようにし、よりシンプルにデバッグできる状態を目指します。

ここで、`__repr__`内で、KeywordPrinterに`**vars(self)`というものを渡しました。
まず、`vars(self)`でインスタンスaのプロパティ辞書情報を取得します。
そして、それをアンパックしてPrinterに渡すことで、辞書を文字列として見やすく返してくれます。

これは極端な例で、あまり使用するべきではありませんが、実際のコーディングで、他のメソッドやクラス・関数に「ローカル変数をぱぱっと渡したいな〜」という状況があります。
このとき、`**vars(self)`などを使用すると、うまくコーディング量を下げることができるかもしれません。

自分ももっと勉強していこうと思います。


# 参考文献

- [Pythonのvars()とdir()の違い](https://minus9d.hatenablog.com/entry/2016/11/13/222629)
- [Python　クラスのプロパティ情報取得](http://www.ajisaba.net/python/class_property.html)