OmniAICreator/Qiita-1.07M huggingface dataset:
Pythonの@propertyの仕組みについて調べて考えてみた(getterのみ)

# 概要
Pythonのクラスでpropertyデコレータを使うとどうしてメソッド呼び出しをせずに値が取れるのか調べた。

# 実験
## 環境
### Pythonのバージョン
Python 3.5.2
### 使ったコード
```python
class Property(object):
    "Emulate PyProperty_Type() in Objects/descrobject.c"

    def __init__(self, fget=None, fset=None, fdel=None, doc=None):
        self.fget = fget
        self.fset = fset
        self.fdel = fdel
        if doc is None and fget is not None:
            doc = fget.__doc__
        self.__doc__ = doc

    def __get__(self, obj, objtype=None):
        #print(obj)
        #print(objtype)
        if obj is None:
            return self
        if self.fget is None:
            raise AttributeError("unreadable attribute")
        return self.fget(obj)

class Hoge:
    def __init__(self):
        self._foo = 'foo!'
    @Property
    def foo(self):
        return self._foo
    

if __name__ == '__main__':
    h = Hoge()
    print(h.foo)
```
Propertyクラスの実装はhttps://docs.python.jp/3/howto/descriptor.html#properties のもので、デバッグ用にprintを追加し、`__init__`と`__get__`以外のメソッドを削った。
実行すると以下のようになる。

```shell-session
$ python property.py
foo!
```

## printのコメントアウトを外してみる
コメントアウトを外して実行すると下のような結果になり、どうにかこうにか`Hoge`が渡されてきているのが分かる。

```shell-session
$ python property.py
<__main__.Hoge object at 0x00000280356C87F0>
<class '__main__.Hoge'>
foo!
```

## `@Property`を消してみる
```shell-session
$ python property.py
<bound method Hoge.foo of <__main__.Hoge object at 0x000002209BB687B8>>
```
メソッドは当然実行されていない。
`print(h.foo) => print(h.foo())` に変更すると、

```shell-session
$ python property.py
foo!
```
元と同じ出力になる。

## 考察
https://docs.python.jp/3/reference/compound_stmts.html#function によると、

```python
    @Property
    def foo(self):
        return self._foo
```
は、

```python
    def foo(self):
        return self._foo
    foo = Property(foo)
```
とほぼ等価らしい。
これでPropertyクラスのfgetにfooが入る。

https://docs.python.jp/3/howto/descriptor.html#invoking-descriptors によると、呼び出し側の `h.foo`は`type(h).__dict__['foo'].__get__(h, type(h))` に`object.__getattribute__`によって変換されるらしい。
`type(h).__dict__['foo']`は上のデコレータでPropertyのインスタンスを代入したのと同じなので、`__get__()`が、obj=h, objtype=type(h)を引数として呼び出される。
こうしてfooメソッドにselfを渡して実行することができ、その結果が値として返ってくるので`print(h.foo)`で値を表示できた。
Debian系でnslookupでは名前解決できるのにブラウザ等では名前解決できない問題

かなりハマったのでメモ
#結論
nsswitch.confを修正しよう！
#いきさつ
開発用に新しくサーバーを設置することになった。

- VMware ESXi5.5上にDebian9をインストール
- マシンには「192.168.1.28」のipを固定する

ローカルネットワーク上にDNSサーバー(192.168.1.25)が設置してあり、そちらのDNSを優先で参照するように設定したい。
なので/etc/network/interfacesにこのように記述した。

```/etc/network/interfaces
iface ens32 inet static
    address 192.168.1.28
    netmask 255.255.255.0
    gateway 192.168.1.10
    dns-nameservers 192.168.1.25
```
これでよし。networkingを再起動してnslookupで確認する。大丈夫みたい。
念のためブラウザでも確認をしてみる。ページ読み込みエラー。。。ぬっ

resolv.confも正しく設定されているし、digもnslookupも問題ないぞ。どういうことだdebian！

#解決

/etc/hostsあたりが悪いんじゃないかなぁなどと調べていると
[【Ubuntu】「sudo: ホストxxxの名前解決ができません」が治らない…](https://teratail.com/questions/74122)
の記事内にて「nsswitch.conf」というキーワードを発見。

hostsとnsswitchについては[DNS系備忘録](https://qiita.com/medaka5/items/f922b6e3e413423ef733)に分かりやすく書かれていた。
>注意事項としては、nsswitch.confを変更しても、nslookupやhost、digの動作はかわらない（らしい）ということ。

まんまこの状況じゃないか。

#nsswitch.conf

/etc/nsswitch.confのソースを見てみる。

```/etc/nsswitch.conf
...
hosts:    files mdns4_minimal [NOTFOUND=return] dns myhostname
...
```
nsswitchでは右に記述されている要素を左から順に評価していくようだ。
この記述だと
files -> mDNS -> NOTFOUNDならreturn
というフローになる。これDNSまで届かないのでは・・・？

mDNSとは初めて聞いた単語だ。
>mDNSを使えるノードはマルチキャストアドレス(224.0.0.251)のUDP, ポート5353にDNSのクエリをなげ、対応するマシンがいればそのノードが返事を返す

というものらしい。疲労困憊なのでこの辺は時間があったら詳しく調べよう。

mDNSは今回使用しないので以下のように書き換えた。

```/etc/nsswitch.conf
...
hosts:    files myhostname dns 
...
```
networkingを再起動、ブラウザ上でちゃんと名前解決できた。
なんだかフラフラした解決方法だったが、動いたからまぁいいや。
色々と曖昧な内容になってしまったので、ここ間違ってるよ、みたいな箇所があればご指摘いただけると幸いです。

#参考文献
- [【Ubuntu】「sudo: ホストxxxの名前解決ができません」が治らない…](https://teratail.com/questions/74122)
- [DNS系備忘録](https://qiita.com/medaka5/items/f922b6e3e413423ef733)
- [mDNSの謎について](https://amiq11.hatenablog.com/entry/2015/10/25/190011)
- [Linux、「/etc/host.conf」「/etc/nsswitch.conf」とはなんぞや？](http://piyopiyocs.blog115.fc2.com/blog-entry-678.html)
Djangoでウェブアプリ - templateでforループ

Djangoを使ってウェブアプリを作ります
templateでforループして出力してみます

- このページで作成されたDjango環境は[ここ](https://github.com/eggplnt/northernlights28)からダウンロード可能です

#1. ファイルを用意します

- `penguin`フォルダの`urls.py`に以下を追加します

```python:penguin/urls.py
from django.urls import path
from . import views

urlpatterns = [
    path('exercise', views.exercise, name='exercise'),
    path('', views.index, name='index'),
]
```

- `penguin`フォルダの`views.py`に以下を記述します

```python:penguin/views.py
from django.shortcuts import render

def index(request):
    return render(request, 'index.html')

def exercise(request):

    e = { '子','丑','寅','卯','辰','巳','午','未','申','酉','戌','亥' }
    f = []
    f.append('りんご')
    f.append('みかん')
    f.append('バナナ')

    return render(request, 'exercise.html', { 'eto':e, 'fruits':f } )
```

- `static`フォルダに下記のようなcssを用意します

```css:test.css
.a1 {
  background-color:  #98d98e;
  height: 120px;
  padding: 20px;
}
.b1 {
  background-color:  #e4de8a;
  padding-left: 20px;
  height: 120px;
  text-align:left;
  padding: 20px;
  font-size: 18pt
}
.c1 {
  clear: both;
  background-color:  #cee4ae;
  height: 50px;
  text-align:left;
  font-size: 18pt;
  padding: 20px;
  font-family: Meiryo;
}
.d1 {
  background-color:  #bcbcff;
  height: 200px;
  text-align:left;
  font-size: 18pt;
  padding: 20px;
  font-family: Meiryo;
}
```

- `penguin`フォルダの`templates`サブフォルダに下記のようなhtmlを用意します

```html:penguin/templates/exercise.html
{% load static %}
<html>
<head>
</head>
<body>
  {% block extrahead %}
  <link href="{% static 'test.css' %}" rel="stylesheet">
  {% endblock %}

  <div class='a1'>
    <h1>テストページ</h1>
  </div>

  <div class='b1'>
      <p><b>干支：</b><br>
      {% for p in eto %}
      {{ p }}
      {% endfor %}
    </p>
  </div>

  <div class='d1'>
    <p>
      <b>果物：</b><br>
      {% for p in fruits %}
      {{ p }}とか<br>
      {% endfor %}
    </p>
  </div>

</body>
</html>
```

#2. 稼働を確認します
- `python manage.py runserver`を実行し、Djangoを起動します
- ブラウザで`localhost:8000/exercise`へアクセスし、views.pyからのデータが表示されていることを確認します

<img width="716" alt="スクリーンショット 2018-09-06 9.19.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/125842/5f3517e1-86dc-81b5-3cb7-f63386328887.png">
Microsoft Power Automate を使って Spreadsheet で管理しているデータを JSON にして提供する

僕はどちらかというとそれほど機能の多くないシンプルなウェブサイトを作ることが多いので、バックエンドを作る負担をなるべく減らしたいと思っています。

Firebaseとか良さそうなんですけど、それだとオーバースペックになりがちなのでもっと手軽な方法が無いか考えたところ、タイトルのような感じにたどり着いた次第。

# 構成
- Google Spreadsheet
- Microsoft Power Automate

上記のサービスを使って作ります。

Power Automate の完成イメージは下のとおり。

<img width="634" alt="スクリーンショット 2018-09-06 08.00.55.png" src="https://qiita-image-store.s3.amazonaws.com/0/66754/768999a3-f2a5-09d1-ad8e-f0901b0814bc.png">

# 手順

では、Power Automate の作成を順を追って見ていきましょう。

## HTTP リクエストを受け付ける

Power Automate で HTTP リクエストをトリガーにして処理を開始するためのステップです。

Flowを新規作成し、トリガーの選択で「HTTP 要求の受信時」を選択します。

<img width="623" alt="スクリーンショット 2018-09-06 08.04.42.png" src="https://qiita-image-store.s3.amazonaws.com/0/66754/792ec8a8-f5af-631a-1f35-aef31515486b.png">

特に設定をする必要は無いのですが、一応 method を GET にしておきます。

簡易的に済ませるのでスキーマの設定は省略。

## データの取得

今回、なるべく簡単にデータを管理するということで Spreadsheet に情報を記載し、それを Power Automate で取得するという構成にしています。

Power Automate のアクション追加で、スプレッドシートの「複数行を取得」を選びます。

アクションを検索するとき英語ではなく日本語だったので最初見つからなくて焦りました。。。

<img width="633" alt="スクリーンショット 2018-09-06 08.11.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/66754/b931bed1-e798-bc3e-ddf2-edcb36aec2e1.png">

アクションを追加したらスプレッドシートのファイルとシートを選択します。

## 使用するデータの選択

次に、使用するデータの選択を行います。

これをやらないと出力する JSON に不要な情報がいろいろとついてきてしまいます。

追加するアクションは「データ操作 - 選択」です。

<img width="623" alt="スクリーンショット 2018-09-06 08.16.20.png" src="https://qiita-image-store.s3.amazonaws.com/0/66754/0ded45ee-2259-8334-dc11-5065d6553137.png">

「開始」の項目でスプレッドシートのデータを選び、マップでキーにデータを割り当てます。

## HTTP レスポンスを作成する

最後のステップで HTTP リクエストに対するレスポンスを作成します。

このアクションの名前は「要求 - 応答」です。検索時に「response」「レスポンス」「HTTP」のどれにも引っかからないのでこの機能が無いのかと諦めそうになりました。

そのせいで他の方法を探してしまい、30分位無駄にしましたよ。。。

<img width="625" alt="スクリーンショット 2018-09-06 08.23.47.png" src="https://qiita-image-store.s3.amazonaws.com/0/66754/e9b3d6ed-345a-60e8-2415-bdbf08a6f8d9.png">

応答では本文のところに直前のステップの出力を入れておきます。

ここまでできたら「保存」をクリックします。

そうすると最初のステップ「HTTP 要求の受信時」で URL が生成されます。

ここに GET でアクセスすると Spreadsheet に記載した情報が JSON になって返ってきます。

# いざ、HTTP リクエスト

では試しに、生成された URL に GET でリクエストを送ってみましょう。

スプレッドシートのデータはこんな感じ。

<img width="596" alt="スクリーンショット 2018-09-06 08.29.07.png" src="https://qiita-image-store.s3.amazonaws.com/0/66754/7486d0a9-3612-5d03-3116-03e29ab8ff42.png">

リクエストを送ります。

![screencast 2018-09-06 08-31-46.gif](https://qiita-image-store.s3.amazonaws.com/0/66754/5c5b70d7-86ec-1d5d-ea40-593d7a9e4404.gif)

ちゃんと返ってきましたね。

スプレッドシートを更新すると、ちゃんとデータが反映されました。

# 感想

やり方を理解するまでは難儀しましたが、できてしまえば簡単なものです。

Power Automate の利点として、日本語に対応しているというのがありますが、今回はそれがネックになりました。

IT 用語まで日本語になってるとは思わんかったですよ。

これができると、ちょっとしたウェブでの表示などはこれで済ませてしまえますね。

Microsoft Power Automate はなかなか便利です。
WordPressの投稿を/blog/など1階層下に指定する


コーダーが現場で解決した方法をまとめた、解決コードシリーズ。

#内容

- WordPress投稿をデフォルトで /blog/以下にしたい
- /blog/をカテゴリとして使用したい


コーポレートサイトなどでブログなど投稿をディレクトリ以下にしたい場合は多くある。
方法をメモしました。

#パターン1 /blog/をカテゴリとして使用する

##手順1 固定ページスラッグに/blog/を指定

固定ページ＞ページを作成

スラッグに/blog/を指定する。
こちらはURLを指定するためのダミーページです。

![Alt text](https://i.gyazo.com/471f4259c32159f24afb35ed86b1df0e.png)

##手順2 投稿ページの表示設定

設定＞表示設定＜ホームページの表示

スラッグ/blog/を指定した投稿ページを選択する。

![Alt text](https://i.gyazo.com/d51be92351bae14f7513c5b5829019fd.png)


##手順3 パーマリンクの設定

設定＞パーマリンク設定＞カスタム構造

URLに/blog/を指定する。

![Alt text](https://i.gyazo.com/3bec8d9876491c76f3702972746fb747.png)


## 手順4 カテゴリを指定
/blog/以下のカテゴリは同階層で指定する。

![Alt text](https://i.gyazo.com/c709af69f2a1a00c3d925202e19b0527.png)


#パターン2 固定ページのスラッグ名をカテゴリでも使用している

固定ページにスラッグ名/service/を使用し、カテゴリ名でも/service/を使用した場合、
固定ページに/blog/を表示し、スラッグにblogを使用すると解決できる。

##参考URL

WordPress でブログ部分をサブディレクトリにまとめる | /blog
http://www.hrykozw.com/blog/archives/450
エンクロージングインスタンスについて２


実際にエンクロージングインスタンスについて実践してみました

とりあえずこんな感じかな？と思い書いてみました。

```java

public class Outer {
	String outerName = "outer";
	
	public static void main(String[]args) {
		Outer outer = new Outer();
		Inner inner = outer.new Inner();
		System.out.println(Outer.outerName);////
	}
	public class Inner{
		
	}
}
```

///の部分がエラーでした。staticなmainメソッドからはstaticでないOuterクラスのフィールドは呼べないとのことでしたので、改良


```java

public class Outer {
	String outerName = "outer";

	public static void main(String[]args) {
		Outer outer = new Outer();
		Inner inner = outer.new Inner();
		inner.outerAccess();
	}
	public class Inner{
		void outerAccess() {
			System.out.println(outerName);
		}
	}
}
```

staticじゃない内部クラスであるInnerクラスでStaticじゃない外部クラス(Outer)のメンバーであるouter.nameを呼びます。
そして、mainメソッドでOuterクラスのインスタンスに含まれたInnerクラスのインスタンスを作成して、InnerクラスのouterAccessメソッドをよびだすことによってエラーが出なくなりました（InnerインスタンスのouterAccessメソッドか？）。

そもそもouter.outerNameで呼べるんじゃ？と思い実行してみたところ

```java
public class Outer {
	String outerName = "outer";

	public static void main(String[]args) {
		Outer outer = new Outer();
		Inner inner = outer.new Inner();
		inner.outerAccess();
		System.out.println(outer.outerName);
	}
	public class Inner{
		void outerAccess() {
			System.out.println(outerName);
		}
	}
}
```

呼べました。
いろんな呼び出し方があるんだなということで勉強になりました
エンクロージングインスタンスについて調べてみた。


https://qiita.com/hp_kj/items/dd533d98f9d065bd0301
thisについて調べたところ、エンクロージングインスタンスという言葉が出てきたので調べてみた。


JavaA2Zによると
内部クラスにとっての「外部クラスのインスタンス」。 
　 
内部クラスのインスタンスは、「外部クラスのインスタンスの中に含まれる」という特殊なインスタンスとなる。そのため、内部クラスのインスタンスを作るためには、必ず外部クラスのインスタンスが必要となる。 
その「外部クラスのインスタンス」が「エンクロージングインスタンス」である。内部クラスのインスタンスを「enclosing」つまり「囲い込む」インスタンスである。

「外部クラスのインスタンス」が「エンクロージングインスタンス」
---
まずこれが結論のようです。そして
意味としては

内部クラスのインスタンスを「enclosing」つまり「囲い込む」インスタンスである。
---
ということです。前回のコードに当てはめると、

```java
public class Main {
    public static void main(String []args) {
        Outer o =  new Outer();///1-1
        Outer.Inner oi = o.new Inner();///2-1
        oi.innerPrint();
    }

    public static class Outer{///1

        int outerhp = 10;

        public class Inner{///2

            public void innerPrint() {
                System.out.println(Outer.this.outerhp);
            }

        }

    }

}
```

1-1で外部クラス1(Outer)のインスタンスを作っています。
そして2-1で外部クラスのインスタンスの中に含まれる内部クラス2(Inner)のインスタンスを作成しています。
Macの起動ディスクのパーティションラベルが見えない

# 状況把握
## Macのパーティションラベル
諸事情によりディスクユーティリティにてパーティションの追加と削除を行っていたところ、ブートディスクのパーティションが不明になってしまった...

**ディスクユーティリティと実際のディスク状態が反映されるまでラグがあったのだろう、その状態で焦って追加と削除をしてしまったのが問題だったようだ...(推測)**

SSD内蔵のOS HighSierraからパーティションのフォーマット規格がAPFSに変更され、これがどうも複雑で原因の一つかと。
ここが詳しい、

ひとまずAppleに問合せたところ、基本的なGUIな操作しか案内されず自己解決を覚悟。わーい٩(ˊᗜˋ*)و

ブートUSBを作成し内蔵ディスクの状態を見ることに。
`$ sudo diskutil list`
<img width="682" alt="スクリーンショット 2018-06-09 2.06.56.png" src="https://qiita-image-store.s3.amazonaws.com/0/203543/b5f30ec6-d68c-9927-edf2-60b7a1317870.png">

/dev/disk0s2が問題が発生したパーティションだが、なんだかヤバそう。(disk0s5もだけど)

## データは生きているか
当方恥ずかしながらこの辺りあまり詳しくないので、この時パーティションタイプが読めないだけでデータは生きているんだろ？と高を括っていた。
が、問題はそんなに単純ではなかった...(実際、大したことはなかったのですが、3日程格闘していた。うふふ(＾་＾))

### ディスクリカバリーソフトの無料版
パーティションのデータを確認。
確認できるソフトとそうでないものがあるが、**APFS対応なら確認が取れる。**
結局、データの復旧となると制限があり課金しないと使えないのでひとまず保留。

## データの移動
### TestDisk
**本コラムの"肝"です！**
<https://www.cgsecurity.org/wiki/TestDisk>
（個人的に公式リファレンスがかなり参考になった）
<https://www.cgsecurity.org/wiki/TestDisk_Download>
ダウンロードはこちら

GNUオープンライセンスのフリーソフトで、CUIっぽいインターフェースのソフト。(TUIというらしい)
今の私があるのは、彼女のおかげといっても過言ではない〜。。
ただし、**APFS非対応なのでAPFSパーティションの検出ができない。**

よって、Analysisは今回は使えない。
方針としてパーティションはそのままでパーティションラベルの情報だけ認識させたかったが、断念。

しかし、**Caption Image**という機能があることに気づいた！
ディスク内のデータを.ddファイルで書き出すというもので、外付けHDDをAPFS(Macにマウントできればなんでもいい)にフォーマットし書き出し開始。(単純にddしてるだけかもね)

書き出したファイルを.imgに変更し、Finderで開くと問題発生前のMacが綺麗にクローンされた！！
マウントできたということはやはりシステムファイルなどには問題がなかったのだろう。

かなり希望の光が見えたので、元のパーティションをAPFSでフォーマットしそこに復元すれば元通りになるはず。

結局、かなり素晴らしいソフト、しかもフリー。バックアップにも使えるのでは。

### パーティション再構築
知らんパーティションが増えていたので、それらを削除とMacを戻すパーティションをフォーマット。
ディスクユーティリティ恐怖症を発症したので、全部コマンド。

#### パーティションフリー化
AFPSの場合、一回
```$ sudo diskutil apfs deleteContainer /dev/disk0s5
``` をかます。
<http://blog-sk.com/mac/mac_partition/>

#### パーティションフォーマット
ディスクユーティリティで空き容量の削除が出来なかったため、移行先をリサイズ(できれば限界まで拡張したかった)
```$ sudo diskutil apfs resizeContainer /dev/disk0s2 180g```

### 復元
ディスクユーティリティに復元ツールがあるようなので、使ってみる。
ダメならddで書くか...というスタンス。(怖い)

ディスクユーティリティで行けた。
十分な容量があれば、正常に実行される。
<img width="1037" alt="スクリーンショット 2018-06-09 15.20.49.png" src="https://qiita-image-store.s3.amazonaws.com/0/203543/3d4de919-ab8c-2363-51a1-7770fe803a4f.png">
<img width="1037" alt="スクリーンショット 2018-06-09 15.53.23.png" src="https://qiita-image-store.s3.amazonaws.com/0/203543/788d78c6-9cbe-c44c-d7af-57e167c15f42.png">


## 感想
TestDiskはいいぞ〜。に尽きた。
今回は使用しなかったが、AnalysisしてWriteしてしまうと大惨事になりかねないので、Caption Imageでバックアップをとっておくべき。

ディスクユーティリティの破壊力に驚きを隠せないが、サポートセンターのどうしようもない感が拍車をかけ、Macはクソという結論に至りますね。（画面綺麗だし、UIがいいのでMacユーザは続けますw）
PythonのNetworkXで重み付きグラフの表示

#はじめに
NetworkXとはPythonのグラフ描画パッケージです。
入力ファイル(辺と重み)が与えられたときの重み付きグラフを表示する方法をまとめておきます。

#入力ファイル
辺(頂点1,頂点2), 重み

```test.txt
1 2 5
1 3 8
2 4 3
3 5 5
4 5 10
```
#グラフ作成

```test.py
# パッケージのインポート
import matplotlib.pyplot as plt
import networkx as nx

# グラフの作成
G = nx.DiGraph()

# 重み付きのファイルの読み込み
G = nx.read_weighted_edgelist('test.txt', nodetype=int)

# レイアウトと頂点の色を適当に設定
pos = nx.spring_layout(G, k=0.7)
node_color = ['r' if i < 2 else 'b' for i in range(G.number_of_edges())]

# グラフの描画
nx.draw_networkx_edge_labels(G,pos)
nx.draw_networkx(G, pos, with_labels=True, node_color=node_color, alpha=0.5)

# 表示
plt.axis("off")
plt.show()
```

![test.png](https://qiita-image-store.s3.amazonaws.com/0/156302/0db2d686-6e91-63bd-95d9-f763a3f14b97.png)

重みの数値だけを表示したいときは、`edge_labels`を設定します。

```python
# グラフの描画
edge_labels = {(i, j): w['weight'] for i, j, w in G.edges(data=True)}
nx.draw_networkx_edge_labels(G,pos, edge_labels=edge_labels)
nx.draw_networkx(G, pos, with_labels=True, node_color=node_color, alpha=0.5)
```

![test2.png](https://qiita-image-store.s3.amazonaws.com/0/156302/705185b5-de5f-b54c-eef3-94523ebac087.png)
Gnuplotで簡単にアニメーションを作る方法

#Gnuplotで簡単にアニメーションを作る方法
条件 
1. ver4.6以上であること。 
2. terminalにgifが入っていること。

##はじめに
gnuplotで動画を作りたくなることありますよね。
ここでは動画を作る際のスクリプトを書いておきたいと思います。

gnuplotはver4.6以降から`do for`という構文が使えるようになりました。これのおかげで繰り返し命令ができます。それ以前は`reread`とかいう意味わからん作業をしなくちゃいけなかったので、それに比べるとだいぶ素直に書けます。

今回は実際に使っていたスクリプトを結構そのまま抜き出してきたものなので、数字とかは適宜変えてください。

##前提
データを読み込んで動画を作るような場合を考えます。動画は、画面上をある点が動き回るものを想定します。今回のデータは、その点のx座標とy座標が、ひたすら改行もなしに書かれたものだとします。


##このようなスクリプトを作ります。
```anime.gnu

set terminal gif animate delay 5 optimize size 640,480
set output 'HOGE.gif'
do for [i=0: 3000] {
  plot [-3:3][-3:3] "hoge.d" every ::i::i using 1:2 w p pt 7 ps 2
}
unset output
```
上から順に説明していきましょう。    

```
set terminal gif animate delay 5 optimize size 640,480
```
terminalをgif動画のモードにします。ついでに色々設定します。

- ``animate``: アニメーションのモード。
- ``delay 5``: ある画像を表示してから次の画像を表示するまでに、0.001×5秒静止します。ただし、実際の表示時間は表示媒体に結構依存するので、実際に表示しながら確認するといいです。
optimize: ファイル容量を小さくする。どのように小さくするかは[ここを参照](http://ur0.link/ztsa)。
- ``size 640,480``: 640x480のgif動画にする。あんまり大きいとサイズが重い。


```
do for [i=0: 3000] { 〜〜〜〜 }
```
こいつがこの記事の味噌です。この場合、i=0からi=3000までiを変えつつ、{}内を実行します。
`gif animate`の`terminal`では、出力順にアニメーションにしてくれるので、このループ文で絵を出力するたびにアニメーションのコマ数が増えていくわけです。



```
plot [-3:3][-3:3] "hoge.d" every ::i::i using 1:2 w p pt 7 lc 1 ps 2
```

データ"hoge.d"の i 行目だけをプロットするというコマンド。x軸は1列目、y軸は2列目の値を使う。範囲は$-3\leq x\leq3$ 、 $-3\leq y\leq3$。`pt 7`で丸のプロットにしてます。
描画範囲を固定しないと動画にしたときにやたら見辛くなります。


```
unset output
```
したら出力終了となります。
Herokuでstatingとproductionを別アカウントで

# 前提

- Heroku Toolbelt をインストールしとく
- 複数の Heroku アカウントを登録
- 各アカウントでそれぞれ app 作成

# やること

## heroku-accounts をインストール

```
$ heroku plugins:install heroku-accounts
```


## 管理するアカウントを追加

staging, production 2つの名称で Heroku のアカウントを追加

メールアドレス、パスワードを入力

```
$ heroku accounts:add staging
$ heroku accounts:add production
```

## 確認

```
$ heroku accounts
* staging
  production
```

## リモートリポジトリの名前を付ける

```
$ heroku create アプリ名 --remote staging
```

## ステージングにデプロイ

```
$ git push stating master
```

## rails consoleとか

```
$ heroku run rails c --remote staging
```

## production アカウント

```
$ heroku accounts:set production
```

## リモートリポジトリの名前を付ける
```
$ heroku create アプリ名 --remote production
```

## 本番にデプロイ
```
$ git push production master
```

## 本番に緊急パッチ当てたり
```
$ heroku run rails db --remote production
```

# 参考
[Heroku Toolbelt で複数の Heroku アカウントを管理する](https://qiita.com/penta515/items/b95b1687b46cba4d8009)

[Herokuで同じアプリを複数の環境にデプロイ]
(https://qiita.com/sinozu/items/f118fb64b7825f49f3ea)
AzureADv2 PowerShellでアカウント操作

##1. はじめに
AzureADへの操作にはGUIとしてAzureポータルやOffice365ポータルがありますが、AzureAD PowerShellによりスクリプトからも操作することが可能です。

備忘録ですがAzureAD PowerShellのコマンドレットについてメモを残しておきたいと思います。まだ作成中なので随時更新予定です。

## 2. 概要
AzureAD PowerShellのモジュールは2種類存在しますが、今回は2の方を利用します。
1. MSOnlineモジュール(AzureADv1) 
2. AzureAD for Graphモジュール(AzureADv2)
(1は主にOffice365の操作に使う,AzureADv2モジュールで対応しないコマンドの実行。またAzureADv2 previewなるものもありますが割愛します）

AzureADに対してカスタムドメイン(WindowsServerADドメイン)を追加してディレクトリ同期している場合、AzureADのアカウントだけでなくWindowsServerADのアカウントでも認証することができます。

ただMSOnlineモジュールの場合、カスタムドメインのユーザアカウントで認証できないようです(環境依存か)。カスタムドメイン内のアカウントで認証する場合にはAzureADv2(AzureAD for Graph)が必要になります。

##3. AzureADv2モジュールのインストールと接続

###3-1. WindowsServer2016でAzureADv2インストール
PowerShellを起動し以下を実行します。

```
Save-Module -Name AzureAD -Path "C:Program Files¥WindowsPowerShell¥Modules"
Install-Module -Name AzureAD
```

###3-2. AzureADv2モジュールインポート/AzureAD接続

```
Import-Module -Name AzureAD
Connect-AzureAD
```

Connect-AzureADを行うとログインダイアログが出るのでADアカウントの資格情報を入力してサインインします。(Get-Credentialで完全にスクリプトにできるかは要確認)

##4.アカウント操作系コマンドレット

###4-1.ユーザアカウント属性情報の取得

```
$upn = "UserPrincipalName"
$user = (Get-AzureADUser -ObjectID $upn)
$user | Get-Member

$user | Select-Object -Property UserPrincipalName,Mail,DisplayName
```
Get-Memberコマンドレットでオブジェクトのプロパティ一覧を確認できます。

###4-2.セキュリティグループのユーザ(UPN)一覧を取得

```
#$groupname = "mygroupname"
$group = Get-AzureADGroup -Filter "DisplayName eq '$groupname'"
$userlist = Get-AzureADGroupMember -ObjectId $group.ObjectId | FT UserPrincipalName
```

さらにユーザ一覧をCSVに出力する

```
$userlist | Select-Object -Property UserPrincipalName,Mail,DisplayName | Export-Csv -Path C:¥userlist.csv
```

Get-AzureADGroupMemberは規定では100アカウントまでしか取得できない。所属アカウントのすべての一覧が欲しい場合は-Allオプションを追加(要確認)

###4-3.ユーザアカウントを指定グループに所属

```
$upn = "UserPrincipalName"
$groupname = "GroupName"
$user = (Get-AzureADUser -ObjectID $upn)
$group = Get-AzureADGroup -Filter "DisplayName eq '$groupname'"
Add-AzureADGroupMember -ObjectId $group.ObjectId -RefObjectId $user.ObjectId
```


##5. ライセンス操作系コマンドレット

###5-1.ユーザのライセンス情報取得　
```
$upn = "UserPrincipalName"
$userlicense = (Get-AzureADUserLicenseDetail -ObjectId $upn).ServicePlans
```

ライセンス付与などは要確認です。


##6. 参考記事
[Azure Active Directory の PowerShell モジュール](https://blogs.technet.microsoft.com/jpazureid/2017/12/04/aad-powershell/)
[Azure Active Directory PowerShell for Graph](https://docs.microsoft.com/en-us/powershell/azure/active-directory/overview?view=azureadps-2.0)
VSCodeでlaunch.jsonのディレクトリを変更してvue-cliをデバッグする

# はじめに
SPAのフロント開発では、webpackによって変換されたjsが書き出されるため、
通常のchromeを使ったデバッグでは分かりづらい場面が多々あります。

Visual Studio Code(以下、VSCode)では、Chromeと連携をして、jsのコードをデバッグする機能があるため、これを活用することで、開発時のソースコードのまま、ブレークポイントの設定や、変数の参照が可能となります。

設定方法は[こちら](https://jp.vuejs.org/v2/cookbook/debugging-in-vscode.html)に記載してありますが、この記事では、lanuch.jsonで指定するディレクトリを変更する方法を記載します。

## ディレクトリの変更

`webRoot`の値が、vue-cliのsrcフォルダの位置になります。
vue-cliが`/プロジェクトルート/html`フォルダにインストールされている場合、設定ファイルの値を下記に置き替えてください。

```json:launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "vuejs: chrome",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/html/src",
      "breakOnLoad": true,
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    }
  ]
}
```

# 参考
https://jp.vuejs.org/v2/cookbook/debugging-in-vscode.html
https://github.com/Microsoft/VSCode-chrome-debug
ブラウザの「戻る」ボタンでキャッシュが表示されてしまう際の対策

# はじめに
各ブラウザの「戻る」ボタンを押すと、ブラウザのキャッシュをクリアしていても、

>1) JavaScriptでリンク遷移時にローディングアイコンをページ全体に表示
>2) 「戻る」ボタンを押す
>3) ローディングアイコンが全体に表示されたページが読み込まれる

といったことが発生する場合があります。

これはキャッシュには下記の2種類あり、ブラウザバックの場合はbfcache用の対策が必要となるためです。
- 通常のキャッシュ（ページや画像など、ブラウザの”キャッシュを削除”で削除できるもの）
- bfcache(戻る/進むボタン用のキャッシュ)

## 確認環境
- IE11
- iOS7

## 戻るボタンで不具合が起こる理由
「戻る」ボタン用のキャッシュは、JavaScriptの処理が全て完了した状態をメモリ上に保持しています。
キャッシュとしてメモリ上の情報を読み込むことで表示を高速化しているのですが、
JavaScriptの処理が終了した状態を保持しているため、**読み込み時にJavaScriptが再度実行されません。**

そのため、ページの初期化がされていなかったり、直前の見た目でページが表示されてしまい、不具合につながります。

## 対策

### 対象ページにonunload,onbeforeunload イベントをバインドする

各ページにJavaScriptのonunload,onbeforeunloadイベントがある場合、キャッシュを無効にすることができます。
下記のスクリプトを対象のページに読み込ませることで、「戻る」ボタンのキャッシュを無効化します。

```js
window.onbeforeunload = function() {
	// IE用。ここは空でOKです
};
window.onunload = function() {
	// IE以外用。ここは空でOKです
};

```

### onpageshowイベントでbfcacheを使用しているか判定する（iOS Safari対策）
iOS Safariでは、1の対策は効果が無いため、個別に対策が必要です。

onpageshowイベントの`event.persisted`によってbfcacheを使用しているかどうか判定できるため、
bfcacheを使用している場合のみ、特定の処理を行うようにします。

注意点として、onunloadと異なり、バインドしただけでキャッシュ対策にはなりません。
例では強制的に再読み込みを行っていますが、処理内容は症状に合わせて調整してください。

```js
window.addEventListener("pageshow", function(event){
  if (event.persisted) {
    // ここにキャッシュ有効時の処理を書く
    window.location.reload();
  }
});
```

### bfcacheでキャッシュされた値を書き換えるには(追記：2019/08/07)
bfcacheが有効になった際、キャッシュされた変数を更新することが可能か検証してみました。

結論として、下記のことが分かりました。(iOS Safariで検証)

- JavaScript内の変数を書き換えることはできなかった(変数を更新しようとすると、強制的に更新前の値に上書きされてしまう)
- DOM操作は可能だったため、jQueryの`.data()`などを使って、data属性上で変数を管理することで、更新は可能だった
- ただし、上記手順で制御ができるのは1度だけで、再度ブラウザの戻るボタンを使って同じ画面に戻ってきた際は、書き換えることができなかった

bfcacheでキャッシュされた変数を完全にコントロールするのは難しいため、リロードをさせるのが要件として厳しい場合は、実装時にbfcacheを考慮したUIにするなどを検討する必要がありそうです。


### HTTPレスポンスヘッダに no-store を追加する
「戻る」ボタンのキャッシュが原因の場合、
キャッシュを無効化する方法として挙げられる下記のmetaタグは効果がありません。

```html
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
```

こちらは未検証ですが、サーバ側で`Cache-Control:no-store`をレスポンスすることでもbfcacheを無効にできるようです。

2020/10/25追記：
各ブラウザごとの`no-store`に関する挙動が書かれたリンクがありましたので、追記します

- Firefox: 
    - https://developer.mozilla.org/ja/docs/Using_Firefox_1.5_caching
- Safari: 
    - https://trac.webkit.org/changeset/250437/webkit/
- Chrome: 
    - https://groups.google.com/a/chromium.org/g/blink-dev/c/OVROmzNUng0/m/qzTGD9AWAwAJ

## 参考
https://msdn.microsoft.com/ja-jp/library/dn265017(v=vs.85).aspx
http://pageapps.mixi.jp/diary/view_diary.pl?page_id=287564&module_id=1624755&diary_id=626856
http://qiita.com/kyaido/items/5cf9482146b945a4bf67
jQueryでoptionタグにselectedを付与する際はattrではなくpropを使う

# 概要

- 会員登録フローで、あるプルダウンの項目が未入力の場合、デフォルトでvalue="4"の項目を選択した状態にしたい
- `attr()`で実装すると、iPadで閲覧した際に、初期値の空白とvalue="4"の項目がselectedになってしまう
- `attr()`の代わりに、`prop()`で実装することで、正常にvalue="4"の項目のみにselectedが付く

# 不具合が発生した例

```js
if($('#view_method').val() == ""){
	$("#view_method option[value='4']").attr('selected', 'selected');
}
```

# 修正後
```js

if($('#view_method').val() == ""){
	$("#view_method option[value='4']").prop('selected', true);
}
```

# 参考
http://qiita.com/kbyay_/items/7a7ce9547f29b34a63b1
og:imageで指定した画像がFacebookで正しく反映されない時の対処法

# はじめに
Facebookのシェア機能を実装する際、og:imageで指定した画像をタイムラインに表示させることができます。
この時、新規で画像を差し替えたのに反映されないことがありますが、
それはFacebook側でog:imageに指定した画像をキャッシュしているためです。

og:imageって何？という方はこちら。
[og:image 徹底解説、意味も設定画像スペックもこれでばっちり！2015年5月時点最新版](https://blog.sixapart.jp/2012-06/ogimage.html)


# キャッシュを更新する3つの方法
## 1) 30日間放置する

Facebookのキャッシュは、「最初にFacebookが対象ページの画像をキャッシュしてから30日後」に再度更新を確認するようです。
期間を空けても問題が無い場合は、そのまま放置していても画像は最新のものに更新されます。


## 2) 公式のdebuggerを使い、手動で更新する

[Sharing Debugger](https://developers.facebook.com/tools/debug/)

Facebook公式のデバッガーを使うと、対象ページのキャッシュを手動で更新することが出来ます。
基本的にURLを入力して「デバッグ」をクリックするだけですが、
デバッガー自体の動作が安定していないらしく、正しく取得できない場合があります。
その際は「Scrape Again」を押すことで再度画像を取得しに行きます。


## 3) FacebookのAPIを使い、自動で更新する
動的ページなど、手動では対応しきれない場合、FacebookのAPIにPOSTすると、キャッシュを更新してくれます。
これを使い、ページ読み込み時に自動でキャッシュを更新することができます。

```js
jQuery(document).ready( function() {
    $.ajax({
        url: 'https://graph.facebook.com/?scrape=true&id='+location.href,
        type: 'post',
    }).done(function( data ) {
	// (成功時の処理)
    }).fail(function() {
	// (失敗時の処理)
    });
});

```
**※この方法を使うと、実装したURLに対してfacebook側からアクセスが発生します。
アクセスカウントを取得しているページでは、余分にアクセス数がカウントされてしまうため、使用の際は十分に注意してください**

また、アクセスする毎にFacebookのAPIに通信負荷がかかるため、
大量のアクセスが発生する場所では使用を控えてください。
 

#参考
[Facebook公式ドキュメント](https://developers.facebook.com/docs/sharing/opengraph/using-objects)
[自動でFBのOGPのキャッシュをクリア](http://blog.aquaring.co.jp/104)
[FB自動キャッシュクリア](http://jsdo.it/konma/whqD)
Androidのブラウザでselectにcssが反映されない場合の対処法

# はじめに

Androidでselect要素にcssを当てているにもかかわらず、
特定のcssが反映されないことがあったため、対処法を記載します。
（実際に発生した症状では、paddingが反映されませんでした）

# 確認環境
- Android 4.x系

# 対処法

cssでselect要素に"-webkit-appearance:none;"を追記します。

```css
select{
  -webkit-appearance:none;
  padding: 3%
}
```

#参考
同様の症状として、こちらを参考にさせていただきました。
http://espa.hida-ch.com/e653123.html
IE8で印刷が正常に行われない時の対処法(html5shiv.js)

IE8で印刷が正常に行われない場合の原因と対処を下記に記載します。
※HTML5で「html5shiv.js」を使用している場合

# IE8の「背景の色とイメージを印刷する」にチェックが入っていない
出だしからHTML5とは無関係ですが、意外とこの設定を知らない方が多かったです。

IE8のツールバー「ファイル」→「ページ設定」→「背景の色とイメージを印刷する」にチェックが入っていないと、背景が印刷されませんので、チェックを入れてください。

#　html5shiv.jsが印刷対応版ではない
[html5shiv.js](https://github.com/afarkas/html5shiv)には、web版と印刷対応版があります。
印刷対応が必要な場合は「html5shiv-printshiv.js」を使用して下さい。

# CSSでbackgroundを指定する際、セレクタにHTML5で追加されたタグを指定している
「html5shiv-printshiv.js」を使用していても「web上では問題なく表示されるが、印刷時に表示されない」場合があります。

```css
article h1{ background: url(...); }
```

のように、backgroundプロパティを指定しているセレクタがHTML5タグだと、正常に表示されないことがありますので、HTML5タグ以外の要素をセレクタとして使用するようにしてください。

# floatの解除方法に"overflow:hidden;"を使っている
overflow:hidden;は印刷時に正常に表示されない場合があります。floatを使用している場合は、clearfix等を使うようにしてください。

# 適切ではない箇所に"position:relative;"を使っている
position:relative;を指定している場合、レイアウトによっては、正常に反映されないことがあるようです。
不要な指定は削除するか、print:cssを使って印刷用にレイアウトを調整してください。
「データベース接続確立エラー」が出た時の原因まとめ

# データベース接続確立エラーとは
wordpress側からDBにアクセスする時に接続できないのが原因で出てしまうエラー
DB移行する時にこの問題にぶち当たることが多いので原因をまとめました。
またエラーに遭遇したら追記するかもです

2019/09/13 追記 MySQL8.0の場合に起こり得るエラーを記載し、内容を更新

# 原因

## wp-config.phpの設定がおかしい

```
$ cat wp-config.php |grep DB_
```
このコマンドを入力すればどのユーザーやパスワードでMysqlに接続しに行こうとしているのかがわかる。
もし入れなかったら設定がおかしいので、ユーザー名、DB名、パスワードなどがあっているか確かめる。

wp-config.phpの場所については,wordpressをダウンロードして解凍したディレクトリにあるはず。

## DBのユーザーに権限がない
wp-config.phpの設定はあっていて、Mysqlに入ることはできる。
しかし、DBに書き込む権限がないため、エラーが出てしまっている可能性がある。

```
mysql> show grants for 'user'@'localhost';
```
これでどの権限が振られているか確かめる。
権限が振られていなかったら

```
mysql> grant all privileges on db.* to 'user'@'localhost';
```
これで指定したDBに対して全ての権限が与えられ、接続できるはず。
しかしセキュリティのことを考えると、全部の権限を与えるのは不安である。
wordpressのMysqlユーザーに必要な最低限の権限は
SELECT, INSERT, UPDATE, DELETE, CREATE, DROP, INDEX, ALTER
らしいので、面倒でなければこちらを設定した方がいいと思われる。


## nginxにルートディレクトリの実行権限がない

```
$ chown -R user: rootDirectry
```

nginx.confに設定したuserにルートディレクトリにアクセスする権限を付与しないと、アクセスできず権限エラーが起こる。

## mysql.sockの場所が違う

mysql.sockの場所がwp-config.phpに書いてあるpathと違うため起こる。

mysql.sockの場所は、 /etc/my.confに書いてあるので確認
下記のような形で示されている。

```
socket=/var/lib/mysql/mysql.sock
```

ここで出てきたディレクトリをwp-config.phpに設定する。

```
define( 'DB_HOST', 'localhost:/var/lib/mysql/mysql.sock' );
```

## MySQL8.0の認証方式が違う (2019/09/13に追加)

先日久々にこのエラーにぶち当たり、どの原因とも関係がなさそうだったのでmysqlのエラーログを調べたところ、

```
he server requested authentication method unknown to the client
(サーバーがクライアントに知られていない認証方法を要求しました)
```

というエラーが出ていました。心当たりがないのでそのままエラー文で調べたところ、
MySQL8.0からセキュリティが強化され、デフォルトのユーザー認証方式がmysql_native_password ではなく、caching_sha2_passwordになっている模様。

このcaching_sha2_passwordがサポートされていないクライアント(phpとか)が引っかかって起こってしまうエラーのようです。
解決方法としては、デフォルトのユーザー認証方式をmysql_native_password に変えて、
ユーザーを再作成します。

```
mysql> alter user 'user'@'localhost' identified with mysql_native_password by 'userpassword';
```

また、ユーザーを作成する際に自動的にmysql_native_passwordの方式にするには、my.cnfに

```
default-authentication-plugin = mysql_native_password
```

と記載し、 `mysqlを再起動`する必要があります。

# どうしても解決できない時は

下記の設定を追加するとwp-config.phpに足すとデバッグモードになりブラウザでバグが確認できたりdebug.logが出力されたりする。
debug.logはphpの実行権限がないと出力されないので,あらかじめ権限をつけてdebug.logファイルを作成しておくこと。

```
define('WP_DEBUG', true) //debugモードonにする
define('WP_DEBUG_LOG', true); //debug.logファイルに記録
define('WP_DEBUG_DISPLAY', false); //ブラウザにエラーを出力する
```
MacでJPEGファイルをPDFに変換する簡単な方法

macOSのターミナル.appを使えば、簡単に複数JPEGファイルをPDFに変換できます。

# (1) ImageMagickのインストール

Homebrewをインストールしてあれば、以下のコマンドを実行して、ImageMagickをインストールします。

```sh
brew install imagemagick
```

# (2) JPEGファイルを準備

一つのディレクトリにJPEGファイルを入れておきます。

# (3) ターミナルから変換

カレントディレクトリでターミナルを開いて、以下を実行します。すると、".jpg"の拡張子を持つJPEGファイルをまとめて、output.pdfという名前で保存します。

```sh
convert *.jpg output.pdf
```

JPEGの画質を落とす場合は以下のように指定します。

```
convert -quality 70 *.jpg output.pdf
```
『増補改訂版Java言語で学ぶデザインパターン入門』をKotlinでやってみる（Singleton編）

## 【経緯】
[『増補改訂版Java言語で学ぶデザインパターン入門』をKotlinでやってみる](https://qiita.com/siroykht/items/f67b2c111e9b3b424f1e)の第四回目。
Singletonパターンです。

## 【サンプルコード】
Singletonは割と多くの人が知っている&使っているイメージです。
Singletonはインスタンスが1つしか存在しないことを保証するパターンです。
良くシステムを通して共通するものの管理に使っているイメージがあります。
ゲーム作成ではお馴染みですね。自分も最初に知ったのはテトリス作ってる時でした。
ただ、そもそもKotlinにstaticがないらしいので、自作Singletonする必要があるのかとか実装自体は結構やり辛かったです。
まあKotlinが用意してくれてるものを使えばそんなに困らないからだろうが・・・。
※今回は[paiza.io](https://paiza.io/projects/-3fY279EIUwvZzrMQ1HfCA?locale=ja-jp)さんでやってみました。便利。

```Kotlin:Main.kt
 fun main(args: Array<String>) {
    // Here your code !
    println("Start")
    
    var obj1 = Singleton.getInstance()
    var obj2 = Singleton.getInstance()
    
    if (obj1 === obj2) {
        println("同じインスタンスです")
    } else {
        println("違うインスタンスです")
    }
    println("End")
}
```
```Kotlin:Singleton.kt
public object Singleton {
    init {
        println("インスタンスを作成しました")
    }

    public fun getInstance() {
        println("インスタンスを取得しました")
    }
}
```
```:出力結果
Start
インスタンスを作成しました
インスタンスを取得しました
インスタンスを取得しました
同じインスタンスです
End
```

## 【練習問題コード】
※1問目と2問目合わせてです。2問目については一応巻末のコードと同じ動きはしますが、自信ないです。。

```Kotlin:Main.kt
 fun main(args: Array<String>) {
    // Here your code !
    println("Start")
    
    var ticket1 = TicketMaster.getInstance()
    var ticket2 = TicketMaster.getInstance()
    
    println("1:" + ticket1.getNextTicketNumber())
    println("2:" + ticket2.getNextTicketNumber())
    
    if (ticket1 === ticket2) {
        println("同じインスタンスです")
    } else {
        println("違うインスタンスです")
    }
    println("End")
    
    var triple = Triples.getInstance(0)
    for (i in 0..8) {
        println(Triples.getNumber(i%3))
    }
}
```
```Kotlin:TicketMaster.kt
public object TicketMaster {
    
    fun getInstance():TicketMaster {
        return TicketMaster
    }
    
    private var number:Int = 1000;
    public fun getNextTicketNumber():Int {
        return ++number;
    }
}
```
```Kotlin:Triples.kt
public class Triples(index:Int) {
    public var  number:Int=index
    private fun getNumber(index:Int):Int {
        return number
    }
    companion object {
        var triples = arrayOf(Triples(0), Triples(1), Triples(2))
        public fun getInstance(index:Int):Triples {
            return triples.get(index)
        }

        public fun getNumber(index:Int):Int {
            return triples[index].getNumber(index)
        }
    }
}
```
```:出力結果
Start
1:1001
2:1002
同じインスタンスです
End
0
1
2
0
1
2
0
1
2
```

## 【参考サイト】
https://yyyank.blogspot.com/2017/03/kotlinstaticwhy-doesnt-kotlin-have.html
http://k-seito.hatenablog.com/entry/2017/10/22/100823
https://android.benigumo.com/20170810/kotlin-static-member/
https://qiita.com/zhangho/items/2de7e4836e9b2bcf6353
AWS, RDS（PostgreSQL）, Lambda（Node.JS）の組み合わせで30秒ぐらいコネクションを使っていると落ちる

下記のようにしていると落ちる。

```javascript
'use strict'

var DBDao = require("../utils/dao").DBDao;

class Dummy {
    static async exec(i) {
        console.log("----------------")
        var sql = `select * from sometable;`

        for (var i = 0; i < 1000000; i++) {
            var dao = new DBDao();
            console.log(i);
            var results = await dao.query(sql, []);
                // .then((res) => {
                //     return new Promise(function (resolve, reject) {
                //         // dao.close();
                //         resolve();
                //     });
                // })
            console.log(results.length);
            dao.close();
        }
    }
}

module.exports.Dummy = Dummy;

```

下記のようなエラーで落ちる。

```
select * from itemtable; []
248
781
select * from itemtable; []
248
782
select * from itemtable; []
query error Connection terminated by user Error: Connection terminated by user
    at Client.end (/Users/yousan/git/test/node_modules/pg/lib/client.js:402:36)
    at Pool._remove (/Users/yousan/git/test/node_modules/pg-pool/index.js:135:12)
    at Timeout.setTimeout (/Users/yousan/test/node_modules/pg-pool/index.js:38:12)
    at ontimeout (timers.js:460:11)
    at tryOnTimeout (timers.js:298:5)
    at Timer.listOnTimeout (timers.js:261:5)
error:  Error: Connection terminated by user
    at Client.end (/Users/yousan/git/test/node_modules/pg/lib/client.js:402:36)
    at Pool._remove (/Users/yousan/git/test/node_modules/pg-pool/index.js:135:12)
    at Timeout.setTimeout (/Users/yousan/git/test/node_modules/pg-pool/index.js:38:12)
    at ontimeout (timers.js:460:11)
    at tryOnTimeout (timers.js:298:5)
    at Timer.listOnTimeout (timers.js:261:5)
```

時間を測ると30秒ぐらいでおちている。
引き続き調査中…。
VS Codeをインストールしてみた

(参考)VS Code 1.26 の気になった新機能(まとめ&小ネタ)＞Windows版が管理者権限なしでインストール可能に(すばらしい！) 
https://qiita.com/12345/items/8ce4b6e045d50a6049ce#%E3%82%A8%E3%83%87%E3%82%A3%E3%82%BF%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%E3%81%AE%E8%87%AA%E5%8B%95%E6%9C%80%E5%A4%A7%E5%8C%96

#インストールしたバージョン
環境:windows7
「
Visual Studio Code
バージョン: 1.26.1
コミット: xxxxxxxxxxxxxxxxxxx
日付: 2018-08-16T18:38:57.434Z
Electron: 2.0.5
Chrome: 61.0.3163.100
Node.js: 8.9.3
V8: 6.1.534.41
Architecture: x64
OK/コピー (C)
」

#vscodeの画面の色を白くした。
ファイル(F)＞基本設定(P)＞設定(S)＞
(参考)Visual Studio Codeの設定「虎の巻」：IDE編 (1/3)　＞VS Codeの設定には「ユーザー設定」と「ワークスペース設定」の2つがある
http://www.atmarkit.co.jp/ait/articles/1708/23/news026.html

「
ユーザー設定　ワークスペース設定
」


(実行方法)
ファイル(F)＞基本設定(P)＞配色テーマ(C)＞Light(Visual Studio)


(結果)
C:\Users\xxx\AppData\Roaming\Code\User\settings.json
{
    "files.autoGuessEncoding": true,
    "workbench.colorTheme": "Visual Studio Light"
}


#気にしない。
表示メッセージ

「
次の場所で Git を検索しています: C:\Program Files\Git\cmd\git.exe
次の場所で Git を検索しています: C:\Program Files (x86)\Git\cmd\git.exe
次の場所で Git を検索しています: C:\Program Files\Git\cmd\git.exe
次の場所で Git を検索しています: C:\Users\xxx\AppData\Local\Programs\Git\cmd\git.exe
Git installation not found.
」

「
Git が見つかりません。Git をインストールするか 'git.path' 設定でパスを構成してください。
ソース:Git(拡張機能) Gitのダウンロード 今後は表示しない
」
フォームからGETで送信すると、クエリ文字が無視されてしまう！？

# フォームからGETで送信すると、クエリ文字が無視されてしまう！？


    <form method="get" action="?page=mylist">

これで送信すると、


    $page = isset($_GET['page']) ? (string)$_GET['page'] : '';

$_GET['page'] は取得できない。



      <input type="hidden" name="p" value="del" /> ...

フォームにこんなのがあったら、$_GET['p']は取得出来るのに。
おかしいな、URIのパラメータは無視されてしまう。


うまく取得できてないんだろうか、しらべる。

    $qs = $_SERVER['QUERY_STRING'];

クエリ文字列からは「page=mylist」が取得出来ました。



フォームで送信すると、クエリ文字は無視されてしまう！！！
気づかなかった！



https://stackoverflow.com/questions/1116019/submitting-a-get-form-with-query-string-params-and-hidden-params-disappear

なんとなくダメっぽい。諦めましたorz


## ハマったきっかけ


```php
     add_options_page(
        "マイリスト管理画面",
        "マイリスト",
        'manage_options',
        'mylist',
        function() use ($table)
        {
            echo '<form method="get" action="?page=mylist">';
            $table->search_box('検索する', 'items');
            $table->display();
            echo '</form>';
        }
    );
```

WordPressでこんなコード書いてました(一部省略)。


    http://wordpress/wp-admin/options-general.php?page=mylist

↑オプションメニューのページからフォームをGETで送信する(hostsにて「wordpress」を仮想設定)。

オプションページのリンクはこのようにpageにスラグを貼り付けているわけで。
ここが無視されると当然ちゃんとしたページが表示されない。



##なぜPOSTではなくGETで送ろうとした・・・！？


ワードプレス管理画面の「投稿」では、POSTはGETで送信してる。

    http://wordpress/wp-admin/edit.php

でも送信先は「edit.php」だからクエリ文字使わないためきちんとうごく。



```php
     add_options_page(
        "マイリスト管理画面",
        "マイリスト",
        'manage_options',
        'mylist',
        function() use ($table)
        {
            $page = esc_attr(isset($_GET['page']) ? (string)$_GET['page'] : '');

            echo '<form method="get">';
            echo sprintf('<input type="hidden" name="page" value="%s" />', $page); // ←しゃーない
            $table->search_box('検索する', 'items');
            $table->display();
            echo '</form>';
        }
    );
```

仕方ないのでhiddenに入れておく。
もっといい方法とかあったら教えてください！



結局WordPressがわの問題ではなかったorz

次はWordPressのリストテーブルについて書きます。
フォルダ内の画像を全部まとめてNumpy配列にしてnpyで保存

表題そのままのスクリプトです

VGG16とSVMを使った判別機を作る際に使用したものの一部を切り取り、単独で機能するようにしました


#動作概略
1)img2ndarray.pyと同じフォルダ内に保存された画像ファイルを読み込み
2)画像サイズを224x224にリサイズ後、Numpy配列化
3)**[npy]**ファイルとして保存

#動作確認環境
python3.6.6
Tensorflow:1.10.0
Keras：2.2.2

#スクリプト全体

```python:img2ndarray.py

import glob
import numpy as np
from keras.preprocessing.image import load_img,img_to_array

#image  array size
img_size = (224,224)
#load images Folder
dir_name = 'test1'
#File type
file_type  = 'jpg'

#load images and image to array
img_list = glob.glob('./' + dir_name + '/*.' + file_type)

temp_img_array_list = []

for img in img_list:
    temp_img = load_img(img,grayscale=False,target_size=(img_size))
    temp_img_array = img_to_array(temp_img) /255
    temp_img_array_list.append(temp_img_array)

temp_img_array_list = np.array(temp_img_array_list)

#save np.array
np.save(dir_name+'.npy',temp_img_array_list)
```

#★解説
上からやっていることを解説

#import一式

```python
import glob
import numpy as np
from keras.preprocessing.image import load_img,img_to_array
```

#読込画像の設定

```python:
#入力画像サイズの指示
img_size = (224,224)
#画像フォルダ名の指示
dir_name = 'test1'
#画像拡張子の指示
file_type  = 'jpg'
```
#画像の読み込みと配列化
```python:
#フォルダ内のファイルパスをリスト化
img_list = glob.glob('./' + dir_name + '/*.' + file_type)
#保存先の配列を確保
temp_img_array_list = []

#ファイルパスのリストをもとに画像を配列化
for img in img_list:
    #画像を224x224にリサイズしPIL形式で読込
    temp_img = load_img(img,grayscale=False,target_size=(img_size))
    #PIL形式からNumpy配列に変換と正規化(224, 224, 3)
    temp_img_array = img_to_array(temp_img) /255
    #変換したNumpy配列を末尾に追加
    temp_img_array_list.append(temp_img_array)
#Numpy配列をリスト化(*, 244, 224, 3)
temp_img_array_list = np.array(temp_img_array_list)
```
#配列をnpyファイルとして保存

```python:
np.save(dir_name+'.npy', temp_img_array_list)
```
SSHについて調べてみた

# SSHとは
SSH(Secure Shell)はクラアント/サーバーアーキテクチャーを使用する2つのシステム間でのセキュアな通信を容易にし、ユーザーがリモートでサーバーにログイン出来るようにするプロトコルです。
SSHはログインセッションを暗号化するため、侵入者が暗号化されていないパスワードを入手するための接続が難しくなります。

よく聞く「OpenSSH」とはこのSSHのプロトコルを実現するための有名なソフトウェアの一つです。

## SSHのログイン認証方法
##### 1. パスワード認証

ユーザ名とパスワードが分かれば誰にでもログインされてしまいます。
SSHの設定ファイルを変更して無効にするのが標準です。
##### 2. 公開鍵認証による接続

事前にローカル側で作成した公開鍵を、ログイン先のサーバに登録することで、
登録された公開鍵に対応した秘密鍵を持っているクライアントのみが接続できます。

### SSHの確認方法

リモートホストのポート番号の初期値は22番です。

```
# sshdが動いてることを確認
$ lsof -i:22
$ lsof | grep sshd

# Macの場合はssh-agent
$ lsof | grep ssh-agend
```

### `~/.ssh/known_hosts`
一度接続したことのあるサーバのSSHサーバ証明書は、
クライアント側のホームディレクトリの中、`~/.ssh/known_hosts`に格納されます。

known_hostsに記録されていないサーバに初めて接続する場合はコンソールに、
サーバの公開情報を出力します。

```
# known_hostsファイルの内容を表示
$ cat ~/.ssh/known_hosts
```

# 公開鍵認証について

### 鍵ペアの生成
SSHプロトコルのバージョン2用のRSA鍵ペアを生成します。

```
$ ssh-keygen -t rsa
Generating public/private rsa key pair.
Enter file in which to save the key (/home/john/.ssh/id_rsa):
```
Enterを押して、新規作成された鍵用のデフォルトの場所(~/.ssh/id_rsa)を確認します。

以下のようなメッセージが出力されます。

```
Your identification has been saved in /home/john/.ssh/id_rsa.
Your public key has been saved in /home/john/.ssh/id_rsa.pub.
The key fingerprint is:
e7:97:c7:e2:0e:f9:0e:fc:c4:d7:cb:e5:31:11:92:14 john@penguin.example.com
The key's randomart image is:
+--[ RSA 2048]----+
|             E.  |
|            . .  |
|             o . |
|              . .|
|        S .    . |
|         + o o ..|
|          * * +oo|
|           O +..=|
|           o*  o.|
+-----------------+
```

`~/.ssh/`ディレクトリのパーミッションを変更します。

```
$ chmod 700 ~/.ssh
```

### クライアント側からサーバ側に公開鍵をコピー
```
$ scp ~/.ssh/id_rsa.pub remote-user-name@server-address:~
```
### ~/.ssh/authorized_keysファイルにコピーした公開鍵の内容を追加

```
# SSHログイン

$ ssh remote-user-name@server-address

# 公開鍵がコピーされていることを確認
$ cd ~ && cat id_rsa.pub

# 「.ssh」ディレクトリを作成・パーミッションを変更
$ mkdir ~/.ssh
$ chmod 700 .ssh

# 「~/.ssh/authorized_keys」を作成・パーミッションを変更
$ touch ~/.ssh/authorized_keys
$ chmod 600 ~/.ssh/authorized_keys

# 公開鍵を「~/.ssh/authorized_keys」に追加
$ cat ~/id_rsa.pub >> .ssh/authorized_keys
```

### ログインする
```
# パスワード認証ではなく公開鍵認証でログインできることを確認します
$ ssh remote-user-name@server-address
```
エラーが出なければ問題ないです。

[OPENSSH](https://access.redhat.com/documentation/ja-jp/red_hat_enterprise_linux/6/html/deployment_guide/ch-openssh)これを読んでさらに理解を深めて行きます。

参考記事
[OpenSSH 7.7 がリリースされました](https://www.unixuser.org/~haruyama/blog/post/20180403.html)
[OpenSSH-7.3p1 日本語マニュアルページ](https://euske.github.io/openssh-jman/ssh.html)
[redhat openSSH](https://access.redhat.com/documentation/ja-jp/red_hat_enterprise_linux/6/html/deployment_guide/ch-openssh)
AWS VPC 생성시 Subnet Size 설정

AWS에서 VPC를 생성하고 Subnet의 크기를 정의하는데 참고하기 위하여 글을 남깁니다.

* VPC 생성시 IPv4 CIDR Block을 반드시 지정해야 함.
* 허용된 Block Size는 /16 netmask (65535) ~ /28 netmask (16) 사이로 지정해야 함.
* 되도록이면 RFC 1918에 지정되어 있는 Private IPv4 IP Range를 사용
    * 10.0.0.0 - 10.255.255.255 (10/8 prefix)
    * 172.16.0.0 - 172.31.255.255 (172.16/12 prefix)
    * 192.168.0.0 - 192.168.255.255 (192.168/16 prefix)
* VPC끼리 연결할 경우, Block Size가 동일할 경우 이슈가 있는 것으로 기억하고 있음.
* 최초 VPC 생성시 입력한 IPv4 CIDR Block은 Primary로 수정이 불가능
* 이후 IPv4에 대해서는 Secondary를 추가할 수 있음.

## References

* [VPCs and Subnets > VPC and Subnet Sizing](https://docs.aws.amazon.com/vpc/latest/userguide/VPC_Subnets.html#VPC_Sizing)
Premiere Pro入門


## 基本手順
### ファイルを読み込む
* 左下のProjectエリアをダブルクリック（command + I）でファイルを読み込む
* Projectエリアにて「動画」「画像」「テロップ」フォルダを作成しておく

### シーケンス（動画の土台）を作成する
* シーケンスを新規作成
	* AVHCD1080p30が基本
* シーケンスにファイルをドラッグアンドドロップ

### シーケンスにて動画を編集
* カット＆つなげる
	* cでカットモードになり、クリック。vで選択モードになりカットエリアを選択後、デリート。デリートしてできた空白エリアをデリートすればつなげられる
* トランジション
	* トランジションする２つの動画の両端の長さを縮める
	* ２つの動画の距離をゼロにする（くっつける）
	* 両方の動画に対してドラッグアンドドロップでトランジションを配置する
* エフェクト
	* シーケンス内の動画にエフェクトをドラッグアンドドロップ
	* エフェクトコントロールでエフェクトを編集する

### タイトル、テロップを付ける
* タイトル > 新規タイトル > 静止タイトル
	* これで作成するとプロジェクトに配置される
* プロジェクト内のタイトルファイルをシーケンスに配置する

### 書き出す
* ファイル > 書き出し > メディア
* 形式：H.264
* プリセット
	* Youtube1080p HD
	* 1080p HD


## ショートカット
https://helpx.adobe.com/premiere-pro/using/default-keyboard-shortcuts-cc.html

Import: CTRL + I
Rewind, Pause, Play: J, K, L
Increase/Decrease Clip Volume: [ or ]
Copy Clips: OPTION-click a clip, drag to a new part of the timeline
New Folder/Bin in Project Panel: CTRL + B
Nudge Clip: (SHIFT) + ALT + LEFT / RIGHT
Razor Blade Editor: C
Link / Unlink: CTRL + L
Mark In / Out: I / O
Export Media: CTRL + M


## テクニック
### 音
* -6が基準

### 静止フレームの書き出し
* ソースモニターおよびプログラムモニターのフレームを書き出しボタンをクリックする

### エンドロールを作る
* タイトル > 新規タイトル > ロールタイトル
* ロール・クロールオプション：開始スクリーンと終了スクリーンにチェックを入れる
* あとは長いテキストのロールタイトルを作成して、シーケンスに配置して、再生時間を長くする

### 音声のフェードイン・フェードアウト
* オーディオに対して、オーディオトランジション > クロスフェード > コンスタントパワー
* コンスタントパワーを音声の始まりと終わりに設置する

### 動画の終わりを暗くする
* シーケンス内の動画を選択
* エフェクトコントロールにて、不透明度のキーアンカーを２つ付ける
	* 開始点：不透明度100%
	* 終了点：不透明度0%

### 動画を傾ける
* シーケンス内の動画を選択
* エフェクトコントロールにて、モーション > 回転

### 動画を徐々に縮小する
* ビデオエフェクト > ディストーション > 変形
* 変形をシーケンス内の動画に設置する
* エフェクトコントロールにて、スケールのキーアンカーを２つ設定する
* スケールのスピードを調整したい場合は、スケールを広く開く→右に調整エリアが出てくるのでそこで手動調整

### モザイクをかける
* ビデオエフェクト > ブラー＆シャープ > ブラー（ガウス）
* ブラー（ガウス）をシーケンス内の動画に設置する
* エフェクトコントロールにて、ブラーを80くらいに設定する

### かっこいいトランジション、Smooth Zoom IN
* [Premiereで出来るかっこいいトランジション、Smooth Zoom IN/OUTの作り方](https://vook.vc/n/332)

### カラーグレーディング
* ウィンドウ > ワークスペース > カラーを選択する
* 基本補正→トーン→自動

## 素材サイト
* [動画素材 - ニコニ・コモンズ](http://commons.nicovideo.jp/search/material/video)
* [送別会、結婚式に！映像制作に使える無料動画素材サイトまとめ](https://liginc.co.jp/web/design/material/60863)

## ショートカット
https://helpx.adobe.com/jp/premiere-pro/using/default-keyboard-shortcuts-cc.html

|操作|コマンド|
|:--|:--|
|リンク|Command + L|
Go Web Examplesの和訳（HTTP Server）

[Go勉強会 Webアプリケーション編 #1](https://go-golang.connpass.com/event/98075/)で使おうと思っている[Go Web Examples](https://gowebexamples.com/http-server/)の和訳です。ほぼGoogle翻訳ですが、リンク等も整理された状態であると便利だと思い作りました。[前回（Hello World）](https://qiita.com/tikidunpon/items/a70fea95c4c688a60439)、[次回（Routing）](https://qiita.com/tikidunpon/items/b3a926d9146d55eb0848)。

# はじめに

この例では、Goで基本的なHTTPサーバーを作成する方法を学習します。最初に、HTTPサーバーの機能について説明しましょう。基本的なHTTPサーバーには、いくつかの重要な仕事があります。

- 動的なリクエストの処理：ウェブサイトを閲覧したり、アカウントにログインしたり、画像を投稿したりするユーザーからの受信リクエストを処理します。

- 静的なアセットの配信：JavaScript、CSS、および画像をブラウザに配信して、ユーザーにダイナミックなエクスペリエンスを提供します。
- 接続を受け入れる：インターネットからの接続を受け入れるには、HTTPサーバーが特定のポートで待機する必要があります。

# 動的なリクエストを処理する

net / httpパッケージには、リクエストを受け入れて動的に処理するために必要なすべてのユーティリティが含まれています。 [http.HandleFunc](https://golang.org/pkg/net/http/#HandleFunc)関数で新しいハンドラを登録することができます。最初のパラメータは、一致するパス、2番目に実行する関数をとります。この例では、誰かがあなたのウェブサイト（`http://example.com/`）をブラウズすると、素敵なメッセージで挨拶されます。

```go
http.HandleFunc("/", func (w http.ResponseWriter, r *http.Request) {
	fmt.Fprint(w, "Welcome to my website!")
})
```

動的な側面では、[http.Request](https://golang.org/pkg/net/http/#Request)にはリクエストに関するすべての情報とそのパラメータが含まれています。 [r.URL.Query（）](https://golang.org/pkg/net/url/#URL.Query)を使用してGETパラメータを読み取ることができます。[r.FormValue](https://golang.org/pkg/net/http/#Request.FormValue)（"email"）を使用して、POSTパラメータ（HTMLフォームのフィールド）を取得します。

# 静的アセットの配信

JavaScript、CSS、画像などの静的アセットを処理するために、組み込みの[http.FileServer](https://golang.org/pkg/net/http/#FileServer)を使用してURLパスを指定します。ファイルサーバーが正常に動作するためには、ファイルを提供する場所を知っておく必要があります。例えばこのように書けます。

```go
fs := http.FileServer(http.Dir("static/"))
```

- [docs: http.Dir](https://golang.org/pkg/net/http/#Dir)

私たちのファイルサーバが一旦配置されると、動的リクエストと同様に、URLパスを指定するだけで済みます。注意すべきこと：ファイルを正しく提供するためには、URLパスの一部を取り除く必要があります。通常これはファイルが置かれているディレクトリの名前です。

```go
http.Handle("/static/", http.StripPrefix("/static/", fs))
```

- [docs: http.StripPrefix](https://golang.org/pkg/net/http/#StripPrefix)
- [docs: http.Handle](https://golang.org/pkg/net/http/#Handle)


# 接続を受け入れる

基本的なHTTPサーバーを完成させる最後の作業は、インターネットからの接続を受け入れるために特定のポートで待機することです。お察しの通りGoには組み込みのHTTPサーバーもあり、すぐに開始できます。起動するとブラウザでHTTPサーバーを表示できます。

```go
http.ListenAndServe(":80", nil)
```

# コード（コピペ用）

これは、この例で学んだことを試すために使用できる完全なコードです。

```go
package main

import (
	"fmt"
	"net/http"
)

func main() {
	http.HandleFunc("/", func (w http.ResponseWriter, r *http.Request) {
		fmt.Fprintf(w, "Welcome to my website!")
	})

	fs := http.FileServer(http.Dir("static/"))
	http.Handle("/static/", http.StripPrefix("/static/", fs))

	http.ListenAndServe(":80", nil)
}
```

- [docs: http.StripPrefix](https://golang.org/pkg/net/http/#StripPrefix)
- [docs: http.Dir](https://golang.org/pkg/net/http/#Dir)

# 参考  
- [次回（Routing）](https://qiita.com/tikidunpon/items/b3a926d9146d55eb0848)
- [net/httpで安全に静的ファイルを返す
](https://shogo82148.github.io/blog/2016/04/13/serving-static-files-in-golang/)