OmniAICreator/Qiita-1.07M huggingface dataset:
jQueryでスライドメニューを作ってみた

今回はスライドメニューを実装してみた。
スライドバーは右端に配置し、メニューは隠れている。
スライドバーにカーソルを合わせると、左にスライドしメニューが表示されます。
カーソルを外すと、右にスライドし、メニューが隠れます。

#ソース
いつものように、ソースを載せます。

```slide_practice.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>スライド　練習</title>
	<link rel="stylesheet" href="slide.css">
	<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
	<script type="text/javascript">
        $(function() {
            $('#slide_bar').hover(
		      // スライドバーにカーソルを合わせると、左にスライドし、メニューが現れる
              function(){
                $(this).animate({'marginRight':'170px'},500);
              },
                // 合わせていなければ、メニューが隠れる
              function () {
                $(this).animate({'marginRight':'0'},500);
              }
            );
        });
	</script>
</head>
<body>
    <div id="slide_bar">
        <ul>
            <li><a href="#">スライド1</a></li>
            <li><a href="#">スライド2</a></li>
            <li><a href="#">スライド3</a></li>
            <li><a href="#">スライド4</a></li>
        </ul>
    </div>
</body>
</html>
```

```slide.css
#slide_bar {
    margin: 0;
    padding: 0;
    background: #f00;
    position: fixed;
    right: -170px;
    cursor: pointer;
    width: 200px;
}

#slide_bar ul {
    margin: 0;
    padding-left: 30px;
    list-style: none;
}

#slide_bar li {
    margin: 5px;
    padding: 0;
}

#slide_bar a {
    margin: 0;
    padding: 0;
    text-decoration: none;
    color: white;
}
```

#解説
大事なポイントは、以下のコードです。

```
$(function() {
    $('#slide_bar').hover(
        // スライドバーにカーソルを合わせると、左にスライドし、メニューが現れる
        function(){
            $(this).animate({'marginRight':'170px'},500);
        },
        // 合わせていなければ、メニューが隠れる
        function () {
            $(this).animate({'marginRight':'0'},500);
        }
    );
});
```

`hover`メソッドと`animate`メソッドを使っている。

`hover`を使うことで、カーソルがスライドバーにあっている場合とはずれている場合の動作を指定できます。
第１引数にはカーソルがある場合の処理、第２引数には外れているときの処理を指定します。

`animate`でスライドアニメーションを実現しています。
下記は500ミリ秒かけて、要素の右側のマージンを0にするコードです。

```
animate({'marginRight':'0'},500)
```

第1引数には`CSS`のプロパティを設定します。
このとき注意すべきは、プロバティをキャメルケースで記述することです。
`CSS`では`margin-right`ですが、`animate`メソッドの中ではキャメルケースで記述しなければならない。
第2引数には、アニメーションの時間を指定します。

#参考資料
[jQuery-メニューやコンテンツをスライドさせて表示する](https://gimmicklog.com/jquery/203/amp/#i-2)
[jQueryのanimateで自由にアニメーションできるようになろう](https://www.webopixel.net/javascript/507.html)
Rocket.Chatが自動起動しない

#導入
公式サイト
https://rocket.chat/docs/installation/manual-installation/centos/
にあるようにRocket.Chatを入れてみた。

#問題
サーバーの再起動時にRocket.Chatがうまく自動起動しない。しかし、後から手動で立ち上げることはできる。

#理由
rocketchat.serviceがmongod.serviceの後で起動していないので、接続エラーが起きていた。

#対策
/usr/lib/systemd/system/rocketchat.serviceを/etc/systemd/system/へコピーして、次のように起動順序を正しく指定する。(mongod.~に注目)

```ruby:/etc/systemd/system/rocketchat.service　変更前(抜粋)
[Unit]
Description=The Rocket.Chat server
After=network.target remote-fs.target nss-lookup.target nginx.target mongod.target
```


```ruby:/etc/systemd/system/rocketchat.service　変更後(抜粋)
[Unit]
Description=The Rocket.Chat server
After=network.target remote-fs.target nss-lookup.target nginx.target mongod.service
```

#所感
問題は解消したが、公式のミス？nginx.targetもnginx.serviceが正しいのでは？
NetworkUPSTools(nut)でOmronのUPSがシャットダウンできない

#導入
nutでOMRONのUPSを使用した事例
http://wncdevelop.livedoor.blog/archives/19779.html
https://qiita.com/sugi_0000/items/89c025e3804cfcfdf11e
等々があるので参考にした。ありがとうございます。
さて、公式マニュアル
https://networkupstools.org/docs/user-manual.chunked/index.html
をもとに、サーバー(CentOS7.6)へnut(2.7.2)を入れて、UPS(BX35F)を付けてみた。そして、商用電源遮断のシーケンスチェックをかけた。

#問題
サーバーのシャットダウンは行われるが、UPSのシャットダウンは行われない。これでは電源復帰時にサーバーの自動復帰ができない。

#理由1
OMRONのUPSはondelay設定が**存在しない**。一方、ドライバのデフォルトはondelay=3 (min)である。故に、UPSが正しく指示を受け取れない。

#対策1
ups.conf へ次のように追記し、UPSとの整合性を図る。

```ruby:ups.conf　追加分
ondelay = 0
```

この時、デバックモードでUPSへシャットダウンをかけると、UPSは"OK"を返した後にシャットダウンすることがわかる。また、"ACK","(ACK"でないためドライバは失敗と判定するが、幸いにUPSのシャットダウン処理自体に影響はない。なお、この確認を行うときUPSは無負荷にすること。

#理由2
killpower(UPSをシャットダウンするのに必要)が生成できない。通常、upsmonはnutユーザーとして動き、/etcへkillpowerを作る権限がない。

#対策2
例えば、upsmon.confを次のように修正して、killpowerが生成できるようにする。

```ruby:upsmon.conf　変更前(抜粋)
POWERDOWNFLAG /etc/killpower
```

```ruby:upsmon.conf　変更後(抜粋)
#POWERDOWNFLAG /etc/killpower
POWERDOWNFLAG /var/run/nut/killpower
```

#所感
問題が解消したので、selinuxの設定等も再確認したい。
Airflow 備忘

# はじめに
Airflow関連の作業の備忘録

# 対象バージョン
１系

# 基本
- Airflowとは
    - ワークフローをpythonで書いたDAGを作成し、定常実行するものです。
    - https://airflow.apache.org
    - 類似でdigdag、jenkinsなどあります。
- Airflow source code
    - https://github.com/apache/airflow
- アーキテクチャ
    - sql alchemy
        - https://qiita.com/bokotomo/items/a762b1bc0f192a55eae8
    - 図
        - https://cloud.google.com/composer/docs/concepts/overview?hl=ja#architecture
            - celeryのredis利用用途
                - celery message broker (タスクキューイング用 redis, RabbitMQ等が使える)
    - Executor
        - メッセージのキューイングするプロセスです。ExecutorとSchedulerは密に結合しており、スケジュールされた各タスクを実際に実行するWorkerプロセスを決定します。次のような異なるタイプのExecutorがあります。
            - SequentialExecutor: Schedulerプロセスと同じマシン上でタスクをシーケンシャルに処理する
            - LocalExecutor: Schedulerプロセスと同じマシン上でタスクを並列処理する
            - CeleryExecutor: Workerマシンのクラスタにタスクを分散して並列処理する
                - キューイングから実行まで
                    - 実行部分
                        - execute_async がコールされます。キューイングも指定がなければデフォルト
                            - https://github.com/apache/airflow/blob/1.10.2/airflow/executors/celery_executor.py#L46-L86

# 同時実行数について
| airflow.cfg name | Environment Variable | Default Value |
|:--|:--|--:|
| parallelism | AIRFLOW__CORE__PARALLELISM | 32 |
| dag_concurrency | AIRFLOW__CORE__DAG_CONCURRENCY | 16 |
| worker_concurrency | AIRFLOW__CELERY__WORKER_CONCURRENCY | 16 |
| max_threads | AIRFLOW__SCHEDULER__MAX_THREADS | 2 |

- parallelism
    -  タスク同時実行数。これは、全ての実行しているDAGを通しての制限値になります。
- dag_concurrency
    - 特定DAG内のタスク同時実行数
    - たとえ、50のタスクを持ったDAGでも同時実行数はこのパラメータに制限されます。
- worker_concurrency
    - 一つのワーカーで実行されるタスクの数。４つワーカーがあれば、16のworker concurrencyで最大64タスクを同時に実行できます。

# タスク優先度付
- タスクに優先度をつけたい場合
    - queue、priority_weightを利用する
    - 設定できるのはCPU優先度部分のみ？メモリなどはなさそう。
    - https://airflow.apache.org/concepts.html

# テーブル
- テーブル一覧

 スキーマ |         名前          |    型    |   所有者
----------+-----------------------+----------+-------------
 public   | alembic_version       | テーブル | xxxxx
 public   | celery_taskmeta       | テーブル | xxxxx
 public   | celery_tasksetmeta    | テーブル | xxxxx
 public   | chart                 | テーブル | xxxxx
 public   | connection            | テーブル | xxxxx
 public   | dag                   | テーブル | xxxxx
 public   | dag_pickle            | テーブル | xxxxx
 public   | dag_run               | テーブル | xxxxx
 public   | import_error          | テーブル | xxxxx
 public   | job                   | テーブル | xxxxx
 public   | known_event           | テーブル | xxxxx
 public   | known_event_type      | テーブル | xxxxx
 public   | kube_resource_version | テーブル | xxxxx
 public   | kube_worker_uuid      | テーブル | xxxxx
 public   | log                   | テーブル | xxxxx
 public   | sla_miss              | テーブル | xxxxx
 public   | slot_pool             | テーブル | xxxxx
 public   | task_fail             | テーブル | xxxxx
 public   | task_instance         | テーブル | xxxxx
 public   | task_reschedule       | テーブル | xxxxx
 public   | users                 | テーブル | xxxxx
 public   | variable              | テーブル | xxxxx
 public   | xcom                  | テーブル | xxxxx
git checkoutするブランチ名をpecoで選択する git エイリアス

## ブランチ選択面倒ですよね

- `git branch` して、あるいは `git branch --remote` してブランチ一覧を確認
- ブランチ名をコピーして、remoteブランチだったら `remotes/origin/` などのプレフィックスを外して
- `git checkout`

そんなゴニョゴニョは `peco` に任せましょう。

## 前提条件

- `peco` コマンドがインストールされていること
- `tr`, `grep` , `sed`, `xargs` などのunixでは標準的なコマンドが使える環境であること


## `alias` に設定するコマンド

```config
[alias]
    cop = !"git branch --all | tr -d '* ' | grep -v -e '->' | peco | sed -e 's+remotes/[^/]*/++g' | xargs git checkout"
```

## コマンドの詳細

`git branch --all`

- remoteブランチも含めすべてのブランチを出力（ただし、 `git fetch` していないなどでremoteブランチの情報が同期されていないと表示されません）

`tr -d '* '`

- `*` と ` ` (半角スペース)を削除します

`grep -v -e '->'`

- `->` を含む行を削除します。 `remotes/origin/HEAD -> remotes/origin/master` などの行を除外するためです。

`peco`

- 入力された情報を使ってインクリメンタルサーチと選択を行います

`sed -e 's+remotes/[^/]*/++g'`

- 選択された行が `remotes/origin/feature/function` 等の場合、 `remotes/origin/` の部分を削除して具体的な `checkout` 用のブランチ名にします。
- 人によってはremotesの名前に `/` を含んだりするのかもしれないけど…一旦無視してます。

`xargs git checkout`

- 選択されたブランチ名を使ってチェックアウトを行います

`cop = !"<command>"`

- そもそもこの alias の書き方はなんぞ？と思う人もいるかと思いますが、単純にこれをシェルとして実行するという意味です。

## alias設定しましょう

色々できるんで、よく使うコマンドがあるひとはぜひ。
curlでPOSTする

いつも忘れるので備忘として記録。

```
curl -v --proxy Proxy_IP:8080 --request POST \
  --url 'https://hogehoge' \
  --header 'accept: application/json' \
  --data "{"requestId":"1234567890"}"
```

##リクエスト/レスポンスの情報を表示したい
**-v** をつけましょう。

##ヘッダーを指定したい
**--header**をつけましょう。省略系**-H**でも可。

##データを指定をしたい
**--data**をつけましょう。省略系**-d**でも可。

##改行したい
**/**をつけましょう。
libpng-ruby を使ってビットマップデータをPNG形式で保存

とあるキャッシュデータの中に非圧縮のビットマップデータが埋もれていたので、慣れているrubyで抽出・保存したくなった。ヘッダーを付けて[BMP形式](https://ja.wikipedia.org/wiki/Windows_bitmap)で保存するのが簡単だが、非圧縮だと無駄に重いことや透明度情報（アルファ値）が入っていることから、[PNG形式](https://ja.wikipedia.org/wiki/Portable_Network_Graphics)で保存することにした。

ライブラリのインストールが少なく済みそうなものを探していたら、 libpng のrubyインターフェースである [**libpng-ruby**](https://github.com/kwgt/libpng-ruby) というgemがあったので、これを使うことにした。

<!--
[^bmp-padding]: BMP形式の場合、画像1行のデータが4バイトの倍数になるようパディングが必要。
-->

## TL;DR・感想

* ライブラリの使用自体は楽
* libpng が古いとgemをインストールできない
* 生データの色順や画素順を整えるのに試行錯誤

## インストール
[Ubuntu 16.04 の libpng-dev はバージョン1.2](https://packages.ubuntu.com/ja/xenial/libpng-dev)で、gemインストール時にコンパイルエラーが出てしまった。これは [libpng16-dev](https://packages.ubuntu.com/ja/xenial/libpng16-dev) をインストールすることで回避できた。

```shell-session
$ sudo apt update
$ sudo apt install libpng16-dev
```

その後はREADME通り単純に `gem install` した。

```shell-session
$ gem install libpng-ruby
```

## 利用
生のビットマップデータとその幅・高さ・色の種類（グレースケール・RGB・RGBAなど）の情報がわかっていればいい。

[README](https://github.com/kwgt/libpng-ruby/blob/master/README.md#encode-sample)にサンプルとオプション説明が記載されているので、正直ここで説明することは無い。

```ruby
require 'png'

bin = IO.open("input", "rb") { |io| io.pread(size, offset) }

encoder = PNG::Encoder.new(width, height, pixel_format: :RGB)
IO.binwrite("output.png", encoder << bin)
```

## 備考：データの並べ替え

### ピクセルの色順変更
READMEを見ると、PNGの読み込みではピクセル内のRGBの並び順とアルファ値の位置を様々に選べるのに対し、書き出しでは生データの色順が1種類になっている。このまま出力すると本来と異なる色と解釈されて変色してしまうので、生データのバイト列を並べ替える。

例えばアルファ値の位置を変更してみる。4バイト毎を取り出して編集すればいいので、置換 `gsub` を使うのが楽。文字列はバイナリ（[`Encoding::ASCII_8BIT`](https://docs.ruby-lang.org/ja/latest/method/Encoding/c/ASCII_8BIT.html)）なので、正規表現には `m` と `n` のオプションを指定する。

```ruby
bin = "ABGRabgrABGR"

bin.gsub!(/.{4}/mn) { |pixel| pixel << pixel.slice!(0) }

p bin
#=> "BGRAbgraBGRA"
```

### 上下反転
画像データの形式には、下の行から始まるものと上の行から始まるものがある。方向が合っていないときは出力画像が上下逆になってしまうので、生データを行単位で区切って反転させる。

```ruby
width = 4
bin = "AAABBBCCCDDDaaabbbcccddd111222333444"

ary = bin.scan(/.{3}/mn).each_slice(width).to_a
ary.reverse!
bin = ary.join

p bin
#=> "111222333444aaabbbcccdddAAABBBCCCDDD"
```

### 左右反転
これはあまり使わないと思うが念のため。生データを行毎に反転させる。上下反転と合わせると180°回転ができる。

```ruby
width = 4
bin = "AAABBBCCCDDDaaabbbcccddd111222333444"

ary = bin.scan(/.{3}/mn).each_slice(width).to_a
ary.each(&:reverse!)
bin = ary.join

p bin
#=> "DDDCCCBBBAAAdddcccbbbaaa444333222111"
```

### 縦横入れ替え
単体で使うことは無いが、反転と一緒に使うと**90°回転**を実現できる。実行後は画像の幅と高さの情報も入れ替えることに注意。

```ruby
width = 4
bin = "AAABBBCCCDDDaaabbbcccddd111222333444"

ary = bin.scan(/.{3}/mn).each_slice(width).to_a
ary = ary.transpose
bin = ary.join

p bin
#=> "AAAaaa111BBBbbb222CCCccc333DDDddd444"
```

## 参考

* [GitHub - kwgt/libpng-ruby: libpng interface for ruby.](https://github.com/kwgt/libpng-ruby)
* [Can't `make` on Ubuntu 16.04 · Issue #31 · kornelski/dssim · GitHub](https://github.com/kornelski/dssim/issues/31)
【swift】 Class vs Struct: Choose Structures by Default ~構造体を通常は使ってください~

私は趣味で iOS アプリを作っています。
最近 Swift 5.1 の公式ドキュメントに
[Choosing Between Structures and Classes（原文)](https://developer.apple.com/documentation/swift/choosing_between_structures_and_classes)
[構造体かクラスのいずれかを選ぶ（対訳)](https://rusutikaa.github.io/docs/developer.apple.com/documentation/swift/choosing_between_structures_and_classes.html)
という項目があるのを見つけました。

>Choose Structures by Default
構造体を通常は使ってください
Using structures makes it easier to reason about a portion of your code without needing to consider the whole state of your app. Because structures are value types—unlike classes—local changes to a structure aren't visible to the rest of your app unless you intentionally communicate those changes as part of the flow of your app. As a result, you can look at a section of code and be more confident that changes to instances in that section will be made explicitly, rather than being made invisibly from a tangentially related function call.
構造体を使うことは、あなたのアプリの全体の状態を考える必要なしに、あなたのコードの一部について結論を下すことを簡単にします。構造体が値型であることから — クラスとは違い — 構造体への局所的変更はあなたのアプリの残りには不可視です、あなたが意図的にそれら変更をあなたのアプリのフローの一部として伝達しない限りは。結果として、あなたはコードのある区画を調べて、その区画のインスタンスに対する変更が明確だということを、ほとんど無関係な関連する関数呼び出しから不可視に行われるよりむしろずっと自信を持てます。
Important
重要
Treat identity with care. Sharing class instances pervasively throughout an app makes logic errors more likely. You might not anticipate the consequences of changing a heavily shared instance, so it's more work to write such code correctly.
同一性を注意して取り扱ってください。アプリの隅々まで行き渡る共有クラスインスタンスは、論理エラーをより招きやすくします。あなたは、重く共有されるインスタンスの変更の帰着を見越して備えられないかもしれません、それでそのようなコードを正しく書くためにさらに仕事が増えます。

私はオブジェクト指向の概念もよく分かっていないアマ・プログラマーですが、class や struct の使い分けについて勉強中に上記の記事を見つけました。（BASIC 上がりの手続き型プログラマーなので、カスタム class や struct を定義するような高度なプログラムは書いたことがありません・・・。）
PHPでJavaScriptファイルを動的に生成する

サーバーサイドのリソースを使用して、クライアントに読み込ませるJavaScriptファイルを動的に変化させたい場合などに

まず、JavaScriptファイルとして読み込ませるPHPファイルを用意します。

```php:js.php
<?php
header('Content-Type: application/x-javascript; charset=utf-8');
$date = date('Y/m/d H:i:s');

$script = <<< EOF
function displayServerDatetime(){
    alert('{$date}');
}
EOF;

echo $script;

```

header関数でContent-Typeを`application/x-javascript`として指定することで、ブラウザ側でJavaScriptファイルとして解釈してくれます。

あとは、HTMLをPHPで出力するときと同じ要領でJavaScriptのコードを書いていくだけです。

```html:index.html
<html>
<head>
  <script src="js.php"></script>
</head>
<body>
</body>
  <script>
  displayServerDatetime();
  </script>
</html>
```

HTML側では、上記のように通常のJavaScriptファイルと同じように読み込むだけです。
Leetcode #280: Wiggle Sort

Solution 1: Sorting

```swift
func wiggleSort(_ nums: inout [Int]) {
    nums = nums.sorted()
    for i in stride(from: 1, to: nums.count - 1, by: 2) {
        nums.swapAt(i, i+1)
    }
}
```

Solution 2: One pass swap

```swift
func wiggleSort(_ nums: inout [Int]) {
    for i in stride(from: 0, to: nums.count - 1, by: 1) {
        if (i % 2 == 0 && nums[i] > nums[i+1]) || (i % 2 == 1 && nums[i] < nums[i+1]) {
            nums.swapAt(i, i+1)
        }
    }
}
```
date_selectを使ったフォームの確認画面でhidden_fieldを使う時の注意

##date_selectでhidden値を設定したい時

date_selectを使用したフォームで確認画面を用意したい場面があり、確認画面ではhidden_fieldを使用して登録完了画面に進む実装をしてみたのですが上手く行きませんでした。その時にハマったことのメモになります。

##date_selectで値を渡してhidden_fieldを使用した時に発生する問題

date_selectを使ってフォームを作成して、確認画面を挟んで登録完了画面に向かう際にhidden_fieldメソッドを使用すると、date_selectで渡した1988-8-17というDate型の値をbirthdayというパラメータで渡せると思いきや、birthday=>{1=>1988, 2=>8, 3=>17}と言う形式に変換されてしまいDate型として保存出来なくなり登録画面に遷移出来なくなりました。「もしかしたらdate_selectを使用すると確認画面を作成出来なくなるのでは？」とすら考えました。

##date_selectのオプションを使用する

結論としてはdate_selectメソッドを使用したフォームで確認画面を用意する場合、hidden_fieldは使用せず、date_selectのdiscard_year、discard_month、discard_dayオプションを使用します。これらのオプションはそれぞれ年の選択ボックス、月のボックス、日にちのボックスを非表示にするオプションになります。つまり、これらのオプションをtrueにして有効にすることによってdate_selectのボックスは表示させず、値だけを完了画面に渡すことが可能になります。もちろんその値はDate型になり、date_selectを使用して確認画面を通ってフォームの登録完了画面への遷移を実現することが出来ます。
蟻本の硬貨の問題をrubyで解いてみる(記録用)

# 問題
１円玉、５円玉、１０円玉、５０円玉、１００円玉、５００円玉が、それぞれ C1, C5, C10, C50, C100, C500枚ずつあります。できるだけ少ない枚数の 硬貨でＡ円を支払いたいと考えています。何枚の硬貨を出す必要があるでしょうか？なお、そのような支払い方は少なくとも１つは存在するとします。

# 入力例
3 2 1 3 0 2
620

# 回答例
```ruby
a=gets.chomp.split(" ").map(&:to_i).reverse
goal=gets.to_i
b=[1,5,10,50,100,500].reverse
answer=0
a.map.with_index {|item, index| 
  t=[goal/b[index],item].min
  goal = goal - t*b[index]
  answer = answer+t
}
puts answer
```
Overdrawモードを誤解していた話

この間まで誤解していたので備忘録です。シーンビューの Overdraw モードはサクッと確認できていいけど、他の方法も用いるべきかも、という話です。

Overdraw モードはシーンビューのコントロールバーから描画モードを変更して使用します。

<img width="147" alt="overdraw1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/31480/fa5554e9-0d51-4855-5525-55518f5894f5.png">

例えば Sprite を重ねると、黒背景に薄いオレンジ表示され、重なっている部分ほど白に近づいて「やばいかも」とパッと見で分かり良い感じです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/31480/227b315f-aac3-9b15-cd84-8dfea85808a7.png)

Sprite は Transparent なマテリアルを用いているので納得の挙動ですが、実はこれ不透明なキューブでも同じように表示されます。

![chrpo-io9zl.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/31480/782004f2-98a8-8c48-f55d-1e124cdfbaff.gif)
不透明なキューブを増やすと白に近づく様子

Overdraw モードは実際には全オブジェクトに Additive なマテリアルを割り当てて表示する代物のようで、フォーラムでもハマっていた人がいました。

https://forum.unity.com/threads/overdraw-of-opaque-and-transparent-geometry.463962/
https://forum.unity.com/threads/sceneview-overdraw-mode-is-misleading.545748/

実際マニュアルでも、透明なシルエットとして表示するとしか書かれていません。
https://docs.unity3d.com/ja/current/Manual/ViewModes.html

正確な計測がしたい場合、 FrameDebugger や RenderDoc 使いましょう、というお話でした。
Java：Web API認証のための時限トークン管理クラス

Web API認証のための時限トークン（OAuth2のアクセストークンを想定）を複数スレッドで共有する場合の排他処理の実装（Java）について検討した。

#### トークン管理仕様

トークン管理に関する仕様は以下を仮定する。

* 複数のスレッドで同じトークンを使ってWeb APIを呼び出す。
* トークン失効時は最初に失効を検知したスレッドがトークン更新処理を行う。
* トークン更新処理中、その他のスレッドのトークン取得処理は待ち状態となる。

#### 実装コード（Java）

上記仕様で動作するトークン管理クラスを以下のように実装した。

```java
public class TokenManager {

	// Singletonパターン
	private static TokenManager instance = new TokenManager();
	private TokenManager() {}
	public static TokenManager getInstance() {
		return instance;
	}

    /* トークンと更新日時は参照時に常に最新状態を取得できるようにvolatile変数にする */
    // 時限トークン
	private volatile String token = null;
    // トークン有効期間から算出した更新日時（UNIXタイムスタンプ）
   	private volatile long refreshAt = 0L;

    // volatile変数で最新状態を取得するためsynchronizedは不要となる
	public String getToken() {
		if (System.currentTimeMillis() >= refreshAt) {
			syncUpdateToken();
		}
		return this.token;
	}

    // 更新処理はsynchronizedで排他制御（同時に1スレッドしか実行できないように）する
	private synchronized void syncUpdateToken() {
        // 更新処理中にgetTokenを呼び出した後続スレッドでは更新処理を再実行しないようにする
		if (System.currentTimeMillis() < refreshAt) {
			return;
		}

		// トークン更新処理
        // getTokenメソッドでの有効期限検証を通過した時に確実に最新のトークンを取得できるように、
        // token -> refreshAtの順序で更新する。
		this.token = ...
		this.refreshAt = ...
	}
}
```

インスタンス変数（token, refreshAt）をvolatile変数にすることで、トークン参照メソッド（getToken）をsynchronizedにする必要がなくなり、トークンが有効期限内の参照処理は並列実行可能にしている。

この場合、更新処理中にgetTokenを呼び出した後続スレッドはトークン更新メソッド（updateToken）を呼び出すことになるため、メソッド内で再度有効期限の検証を行い、不要なトークン更新処理を防止している。
[SCSS]CSSの波線をIE・Edgeにも対応させるブラウザハックとMixin


CSSの ```text-decoration:underline wavy;``` で波線を引けるようになりましたが、IEとEdgeはサポートしていないため、CSSグラデーションで波線を再現させたブラウザハックです。
Scssのmixinにまとめたので、設定しておけば一行の指定で ```text-decoration:underline wavy;``` を各ブラウザで使えます。

### ブラウザの表示例

#### Chrome（対応ブラウザ）

```text-decoration: underline wavy #8A65FE;``` が適用されています。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62022/895c37af-c49f-233a-c679-47d74f030b16.png" alt="Chrome表示例" width="471">


#### IE

```background``` で波線を再現しています。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62022/2c647a78-2853-290a-2567-00553d6062b1.png" alt="IE表示例" width="427">


### コード

#### Mixin

```scss
@mixin wavy-underline-style($underline-color:currentColor) {
  display: inline;
  padding-bottom: .15em;
  background:
  radial-gradient(circle at top,
    rgba(255,255,255,0) .1em,
    $underline-color .1em,
    $underline-color .15em,
    rgba(255,255,255,0) .15em
    ),

  radial-gradient(circle at bottom,
    rgba(255,255,255,0) .1em,
    $underline-color .1em,
    $underline-color .15em,
    rgba(255,255,255,0) .15em
    ),
  ;
  background-position: 0 1em, .25em 1.05em;
  background-size: .5em 1.15em;
  background-repeat: repeat;
}

@mixin wavy-underline($underline-color:currentColor) {
  text-decoration: underline wavy $underline-color;

  @at-root _:-ms-lang(x)::backdrop, & {
    /* Edge */
    @include wavy-underline-style($underline-color);
  }

  @at-root _:lang(x)::-ms-backdrop, & {
    /* IE11 */
    @include wavy-underline-style($underline-color);
  }
}

```

#### 使い方

インライン要素に波線用classを割り当てます。

```html
 <span class="wave">Lorem ipsum dolor sit amet...</span>
```

Scssの指定方法は以下の通りです。

```scss
.wave {
  @include wavy-underline(#8A65FE); // 波線の色を指定。指定がなければ文字色。
}
```

アウトプットされたCSS

```css
.wave {
  text-decoration: underline wavy #8A65FE;
}

_:-ms-lang(x)::backdrop, .wave {
  /* Edge */
  display: inline;
  padding-bottom: .15em;
  background: radial-gradient(circle at top, rgba(255, 255, 255, 0) 0.1em, #8A65FE 0.1em, #8A65FE 0.15em, rgba(255, 255, 255, 0) 0.15em), radial-gradient(circle at bottom, rgba(255, 255, 255, 0) 0.1em, #8A65FE 0.1em, #8A65FE 0.15em, rgba(255, 255, 255, 0) 0.15em);
  background-position: 0 1em, .25em 1.05em;
  background-size: .5em 1.15em;
  background-repeat: repeat;
}

_:lang(x)::-ms-backdrop, .wave {
  /* IE11 */
  display: inline;
  padding-bottom: .15em;
  background: radial-gradient(circle at top, rgba(255, 255, 255, 0) 0.1em, #8A65FE 0.1em, #8A65FE 0.15em, rgba(255, 255, 255, 0) 0.15em), radial-gradient(circle at bottom, rgba(255, 255, 255, 0) 0.1em, #8A65FE 0.1em, #8A65FE 0.15em, rgba(255, 255, 255, 0) 0.15em);
  background-position: 0 1em, .25em 1.05em;
  background-size: .5em 1.15em;
  background-repeat: repeat;
}

```

以上になります。

CSSグラデーションを使ったブラウザハックですが、波線のデフォルトスタイルを使いたくない場合にもお好みの下線にアレンジできます。

参考になりましたら幸いです。

---

▼IEとEdgeのブラウザハックは下記を参考にしました。ありがとうございます。
[css hacks 2019 ( IE11 / Edge / Chrome / Safari / Firefox )](https://qiita.com/feo52/items/b58de2c43e1ba7b10b2e)

▼text-decoration-style
https://developer.mozilla.org/ja/docs/Web/CSS/text-decoration-style
Vueでhello worldまで

Vueでhello worldするまでの手順メモ
今回はvue-cliを用いてvue３系で行う

# vue-cliのインストール
以下のコマンドでインストールすると3系が入る
npmがインストールされていない場合は別途インストール

```
npm install -g @vue/cli
```

# プロジェクト作成
```
vue create test-app
```
途中での選択はdefaultにした

# サーバー起動
```
cd test-app
npm run serve
```

# 画面表示してみる
以下の表示が出たらブラウザへ

```

  App running at:
  - Local:   http://localhost:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.
```

http://localhost:8080/にアクセスして、この画面が表示されていたらOK!
<img width="839" alt="スクリーンショット 2019-08-14 22.31.00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/168995/41e186a7-8242-2e98-15c7-3636f5f683bf.png">
【初心者】探索アルゴリズムについて調べてみた。

[未来電子テクノロジー](https://www.miraidenshi-tech.jp/)でインターンをしている**to-fu16**です。
今回は、アルゴリズムの中でも基礎的な事柄である探索アルゴリズムについて調べてみました。


##アルゴリズムとは
アルゴリズムとは、何らかの問題を解決するための方法や手順のことです。
プログラミングを学習するには、プログラミング言語の文法を理解するのに加えて、アルゴリズムを学ぶ必要があります。
同じ処理でも、アルゴリズムの違いによってプログラムの処理速度は大きく変わります。
計算量の少ないアルゴリズムほどよいアルゴリズムとされています。

##探索アルゴリズムとは
膨大なデータの中から目的のデータを探し出すためのアルゴリズムを**探索アルゴリズム**と言います。

###線形探索アルゴリズム
最初のデータから順に、すべてのデータを見て探す方法です。
このアルゴリズムは単純で分かりやすいですが、ほとんどの場面で非効率であり、データの確認に多くの時間がかかってしまいます。

###2分探索アルゴリズム
整列されたデータを半分にして、目的のデータが前にあるのか後ろにあるのかを判断することで、目的のデータを見つけ出す方法です。
データが整列されていないと使用できませんが、線形探索に比べ高速で探索することができます。
データの整列にはソートアルゴリズムが用いられます。

##おわりに
プログラミング初心者であるため、内容に誤りがあるかもしれません。
もし、誤りがあれば修正するのでどんどん指摘してください。

##参考
https://paiza.hatenablog.com/entry/2015/10/19/IT%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%AA%E3%82%89%E7%9F%A5%E3%81%A3%E3%81%A6%E3%81%8A%E3%81%8D%E3%81%9F%E3%81%84%E3%80%81%E4%BB%8A%E6%9B%B4%E8%81%9E%E3%81%91%E3%81%AA%E3%81%84%E3%82%A2
https://qiita.com/totepo18/items/021c4c29d823a2eeea8c
VsCodeをIntelliJっぽくする方法

# 新しくエディタの使い方覚えるのめんどいもんね

## 設定

```
# ダブルクリックでタブを開くようにする
"workbench.editor.enablePreview": false
"workbench.editor.enablePreviewFromQuickOpen": false
"workbench.list.openMode": "doubleClick"

# エクスプローラービューが選択したタブのファイルに移動しないようにする
"explorer.autoReveal": false
```

## プラグイン
- [IntelliJ IDEA Keybindings](!https://marketplace.visualstudio.com/items?itemName=k--kato.intellij-idea-keybindings): キーバインド
- [Darcula IntelliJ Theme](!https://marketplace.visualstudio.com/items?itemName=trinm1709.dracula-theme-from-intellij): テーマ
Leetcode #979: Distribute Coins in Binary Tree

```swift
func distributeCoins(_ root: TreeNode?) -> Int {
    var answer = 0
    balance(root, &answer)
    return answer
}

private func balance(_ node: TreeNode?, _ answer: inout Int) -> Int {
    if node == nil {
        return 0
    }
    let left = balance(node?.left, &answer)
    let right = balance(node?.right, &answer)
    answer += abs(left) + abs(right)
    return left + right + node!.val - 1
}
```
Bubble sortがO(n^2)を体感した話。

# やったこと
bubble sortをpythonで実装して、ソートするリストの長さを変え、実行時間がリストの長さの２乗に比例することを理解した。

# 実装
https://qiita.com/shinshin86/items/40122455dee2bfd2f3f1
を参考にして、ランダムな配列の作り方を実装しました。

長さeのランダムな並びのリストを作って、それぞれに対して、実行時間を測っています。

```bubble_sort.py
def bubble_sort(a):
    # input array and return sorted array
    for i in range(1,len(a)):
        j = i # j is current pos
        while j != 0 and a[j] < a[j-1]:
            a[j],a[j-1] = a[j-1],a[j]
            j -= 1
    return a 


e=[10,100,1000,10000,100000] # 要素数
size = 1000000 # 0~sizeまで
if __name__=="__main__":
    import random
    import time
    for k in e:
        init_list = random. sample(list(range(0, size)), k)
        #print(init_list)

        start = time.time()
        bubble_sort(init_list)
        end = time.time()

        #print(init_list)
        print("bubble_sort : size {} time {}".format(k,end-start))

```

#　結果
```
bubble_sort : size 10 time 1.9311904907226562e-05
bubble_sort : size 100 time 0.0008120536804199219
bubble_sort : size 1000 time 0.07604408264160156
bubble_sort : size 10000 time 7.907392978668213
```
sizeが１０の時に小さいのは、ソート以外での処理にかかる時間（関数の呼び出しなど？）と思えば、リスト長が大きくなると、size100から1000,1000から１００００をみると、長さが１０倍になると、実行時間が100倍になっていることがわかります。

#　余談（逆順にソートされている場合）
```reverse_list.py
def bubble_sort(a):
    # input array and return sorted array
    for i in range(1,len(a)):
        j = i # j is current pos
        while j != 0 and a[j] < a[j-1]:
            a[j],a[j-1] = a[j-1],a[j]
            j -= 1
    return a 


e=[10,100,1000,10000,100000] # 要素数
size = 1000000 # 0~sizeまで
if __name__=="__main__":
    import random
    import time
    for k in e:
        #init_list = list(range(k,0,-1))
        init_list = random. sample(list(range(0, size)), k)
        if k < 100:
            print(init_list)
        pass
        start = time.time()
        bubble_sort(init_list)
        end = time.time()

        #print(init_list)
        print("bubble_sort : size {} time {}".format(k,end-start))

```

ちなみに逆順になっている場合は、理論的には、単純に、一番外のループ（今回のコードでいうところでのi)で、終了するまでにswapを繰り返す回数(jを何回更新するか）が、ランダムな時は、i/2で理論的になるのが、逆順になっている場合は、全部入れ替える必要があるので、i回swapが必要となり、ループを回る回数（実行時間も）は2倍になるはずです。（あってますよね？）

そこで実行してみると、以下のようになり、確かに、ランダムな場合の２倍かかっていることが確認できました。
面白いですね。

```
[10, 9, 8, 7, 6, 5, 4, 3, 2, 1]
bubble_sort : size 10 time 1.5020370483398438e-05
bubble_sort : size 100 time 0.001268148422241211
bubble_sort : size 1000 time 0.15845394134521484
bubble_sort : size 10000 time 14.583886861801147
```
APIキーはsecrets.ymlから読み込む

備忘録メモ

RailsでAPIキーのような見られたくない情報をプログラム内にベタ書きしたくない時は、`config/secrets.yml`に記述することで呼び出せるようになる

Twitter APIを使うとして...

# ymlファイルを作る
設定したいキー情報を`secrets.yml`に記述する

```yaml:config/secrets.yml
default: &default
  twitter_consumer_key: "Consumer API key"
  twitter_consumer_secret: "Consumer API secret key"
  twitter_access_token: "Access token"
  twitter_access_token_secret: "Access token secret"

development:
  <<: *default

test:
  <<: *default

production:
  <<: *default
```

# Controller側で呼び出す 
`secrets.yml`の情報は`Rails.application.secrets`で呼び出せる

```ruby:twitter_controller.rb
class TwitterController < ApplicationController
  def new
    # ymlに記述したキー情報を取得する
    @client = Twitter::REST::Client.new do |config|
      config.consumer_key        = Rails.application.secrets.twitter_consumer_key
      config.consumer_secret     = Rails.application.secrets.twitter_consumer_secret
      config.access_token        = Rails.application.secrets.twitter_access_token
      config.access_token_secret = Rails.application.secrets.twitter_access_token_secret
    end
    # tweetする
    @client.update("This is test")
  end
end
```
【Delphi】クラスヘルパによる private メンバアクセスの件を with 文で回避できると聞いて

# はじめに
Delphi ではクラスヘルパを使うと裏技的にクラスの private メンバにアクセスできました。

最初期のクラスヘルパは Delphi のバージョン 2006 で実装されましたが、この裏技は Delphi 2009 辺りから使えるようになりました。

 - [クラス ヘルパとレコード ヘルパ（Delphi）(DocWiki)](http://docwiki.embarcadero.com/RADStudio/ja/%E3%82%AF%E3%83%A9%E3%82%B9_%E3%83%98%E3%83%AB%E3%83%91%E3%81%A8%E3%83%AC%E3%82%B3%E3%83%BC%E3%83%89_%E3%83%98%E3%83%AB%E3%83%91%EF%BC%88Delphi%EF%BC%89)
 - [クラスヘルパ (Owl's perspective)](http://owlsperspective.blogspot.com/2011/11/class-helper.html)

# 改悪
ところがこのクラスヘルパを使った裏技は 10.1 Berlin で封じられてしまいました。

> 可視性のセマンティクスを実行するため、クラス ヘルパやレコード ヘルパでは、拡張元のクラスやレコードの private メンバにはアクセスできません。

 - [15.3 Delphi コンパイラのその他の改良点 (DocWiki)](http://docwiki.embarcadero.com/RADStudio/Berlin/ja/%E6%96%B0%E6%A9%9F%E8%83%BD#Delphi_.E3.82.B3.E3.83.B3.E3.83.91.E3.82.A4.E3.83.A9.E3.81.AE.E3.81.9D.E3.81.AE.E4.BB.96.E3.81.AE.E6.94.B9.E8.89.AF.E7.82.B9)

**それまで使えていたものがいきなり使えなくなったため非難轟々でした。**

## 回避策１
回避策の一つ目はインラインアセンブラで記述するというものです。

 - [10.1 Berlinのclass helper仕様変更は全然改良じゃないと思った？ (Swanman's Horizon / 全力わはー)](https://lyna.hateblo.jp/entry/20160420/1461081751)

## 回避策２
最近見つかった回避策は **With** 文を使う方法です。[RSP-15237](https://quality.embarcadero.com/browse/RSP-15273) のコメ欄にこう書いてあります。

> In a helper for class SomeClass with a private property SomeValue,
> Self.SomeValue don't works
> With Self do SomeValue :=... works
> Is it a bug or something you allowed for some obscur reason ?

 - [RSP-15237 Add possibility to access to private properties and methods in natural way like it was for class helpers (Quality Potal)](https://quality.embarcadero.com/browse/RSP-15273)

## 検証
拙作の [Value Calc プロパティエディタ](https://ht-deko.com/delphiforum/?vasthtmlaction=viewtopic&t=1349) で検証してみます。これは IDE 用の拡張で...説明が面倒なので、詳しくは以下の動画に譲ります。

 - http://www.youtube.com/watch?v=YSoVQT1vaEM
 - http://www.youtube.com/watch?v=5qu7MQ3PwZE
 - http://www.youtube.com/watch?v=Pv-J3gJ4IXQ
 - http://www.youtube.com/watch?v=1YgdT03elYs

この拡張は 10.1 Berlin 対応時に、インラインアセンブラのコードを追加して問題を回避していました。

```pascal:uPropEditorHelper.pas

{$IFDEF USEMULTIEXP}
function TPropertyEditorHelper.GetPropList: PInstPropList;
{$IF CompilerVersion < 31.0}
begin
  Result := Self.FPropList;
end;
{$ELSE}
// http://d.hatena.ne.jp/tales/20160420/1461081751
asm
  MOV EAX, Self.FPropList;
end;
{$IFEND}
{$ENDIF}
```

この部分を **with** 文で回避してみます。

```pascal:uPropEditorHelper.pas
{$IFDEF USEMULTIEXP}
function TPropertyEditorHelper.GetPropList: PInstPropList;
begin
  with Self do
    Result := FPropList;
end;
{$ENDIF}
```

あら簡単。

# おわりに
そのうち先述の回避策も潰されてしまうのかもしれませんが、ユーザーの意見を聞いてコンパイラ指令で使用の有無を切り替えられるようにしたらいいんじゃないかと思います。
【python】オブジェクト指向プログラミング基礎vol.3 ~データメンバーの初期化と関数~

オブジェクト指向の勉強の続きです。
## データメンバーの初期化

```python
class Player:
    name = ''
    position = ''
    attack = 0
    defense = 0
    technique = 0
    skill = ''

christefan = Player()
christefan.name = 'クリステファン・ローディ'
christefan.position = 'FW'
christefan.attack = 409
christefan.defense = 193
christefan.technique = 395
christefan.skill = '天衣無縫'
```

このように値を1つ1つ入れるのではなく。以下のように入れたい。

```python
christefan = Player("クリステファン・ローディ", "FW", 409, 193, 395, '天衣無縫')
```



## `__init__`メソッド

`__init__`は、「インスタンスが作成されるタイミングで呼びだされる特殊なメソッド」である。

Pythonは__(アンダースコア2つ)から始まる変数や関数は、そのクラス内でしか参照できなくなる。初期化する時はほかのクラスからの影響を受けては困るため、そのような配慮がされている。

`__init__`メソッドを定義し、試しに`__init__`内にprint文を加えてインスタンスを作成し、コンストラクタの挙動を見ると。

```python
class Player:
    # name = ''
    # position = ''
    # attack = 0
    # defense = 0
    # technique = 0
    # skill = ''
    def __init__(self, name, position, attack, defense, technique, skill):
        print('ポケサカ')
        self.name = name
        self.position = position
        self.attack = attack
        self.defense = defense
        self.technique = technique
        self.skill = skill

christefan = Player("クリステファン・ローディ", "FW", 409, 193, 395, '天衣無縫')
print(christefan.name, christefan.position, christefan.attack, christefan.skill)
```

実行すると、インスタンスを作成した際に`__init__`内にあるprint文が呼び出される。以下実行結果。

```
ポケサカ
クリステファン・ローディ FW 409 天衣無縫
```

`__init__`メソッドがない場合、コメントアウトされた6行で初期化される。

`__init__`メソッドがある場合、`__init__`メソッド内の処理が反映される。



- **`__init__`メソッドの第1引数self**

Pythonではオブジェクトが利用する関数]を定義する場合、第1引数はオブジェクト自身が自動的に代入される仕組みになっている。

第一引数selfには生成したインスタンス（上の例ではchristefan）が入り、self以外の引数にはインスタンス生成時に渡された引数が入る。



## 関数の追加

クラスに関数を追加するには、通常の関数定義と同じ`def`キーワードを使うが、第一引数が予約されている。

```python
class Player:
    def __init__(self, name, position, attack, defense, technique, skill):
        self.name = name
        self.position = position
        self.attack = attack
        self.defense = defense
        self.technique = technique
        self.skill = skill

    def intro(self):
        ability = self.attack + self.defense + self.technique
        print("名前:{},ポジション:{},総合能力値:{}".format(self.name, self.position, ability))

    def power_up(self, rate_up):
        """
        能力上昇率から
        上昇後の総合能力値を返す関数
        """
        up_ability = (self.attack + self.defense + self.technique) * (1 + rate_up)
        return float(up_ability)


christefan = Player("クリステファン・ローディ", "FW", 409, 193, 395, "天衣無縫")
christefan.intro()
print(christefan.power_up(0.1))

delby = Player("デルビー・ベルコム", "OMF", 326, 259, 368, "銀河の象徴")
delby.intro()
print(delby.power_up(0.5))
```

実行結果

```
名前:クリステファン・ローディ,ポジション:FW,総合能力値:997
1096
名前:デルビー・ベルコム,ポジション:OMF,総合能力値:953
1429
```

メソッドの中にある**selfという引数には、メソッドを呼び出したインスタンスが入る**

つまり「`christefan.intro()`」とメソッドを呼び出すと、selfには「christefan」が入っているので、`intro()`メソッドの中の「`self.name`」は「`christefan.name`」を意味することになる。
【python】オブジェクト指向プログラミング基礎vol.2 ~オブジェクトとクラス~

オブジェクト指向の勉強の続きです

## クラス

オブジェクト指向において最も基本的な仕組みで、管理対象となる情報（変数）と振る舞い（関数）を定義したテンプレートのこと。

クラスの機能として、「**カプセル化**」と「**インスタンス（オブジェクトの生成）**」がある。



## カプセル化

**変数と関数をまとめた上で、外部に公開する情報を制限する機能のこと**

複数の変数と関数をまとめて一つのクラスにすることで、プログラムを整理整頓することができる



例：体重と身長を渡すとBMIと適正体重を求める関数

```python
proper = 22

def cal_bmi(weight, height):
    return weight / height ** 2

def cal_proper_weight(height):
    return height ** 2 * proper
```

properというグローバル変数が使われてしまっている。

クラスを使うと以下のようになります。

```python
class Calculation:
    proper = 22
    
    def bmi(self, weight, height):
        return weight / height ** 2
    
    def proper_weight(self, height):
    	return height ** 2 * Calculation.proper  
```

**変数と関数をまとめる**ことができる。

クラスが持つ変数を**クラス変数（属性）**、クラスが持つ関数を**メソッド**という名前で呼ぶ

上の例だとCalculationクラスはクラス変数properとbmiメソッド、proper_weightメソッドを持つクラスであるといえる。



## クラスの定義

**クラスをつくるイメージ**
![クラスイメージ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/481315/f7dfbafb-873b-a37f-50c4-b981d72f975e.png)
この例では、左記で表現されているものを抽象化してクラスとして定義している。共通している属性をまとめてグルーピングして、そのグルーピングに対して名称をつける。

## クラスの作り方

- `class`キーワードの後ろにクラス名を記述し、右にコロン(:)をつける
- 慣例として最初の文字は大文字
- 変数はインデントして宣言

```python
class Player:
    name = ''
    position = ''
    attack = 0
    defense = 0
    technique = 0
    skill = ''
```



## オブジェクトをつくる構文

- `クラス名()`でオブジェクトをつくることができる
- オブジェクトを生成することを**初期化（イニシャライズ）**と言う
- クラスの情報を引き継いで生成されたオブジェクトのことを**インスタンス**という

```python
christefan = Player()
christefan.name = 'クリステファン・ローディ'
christefan.position = 'FW'
christefan.attack = 409
christefan.defense = 193
christefan.technique = 395
christefan.skill = '天衣無縫'
print(christefan.name, christefan.position, christefan.attack, christefan.skill)

delby = Player()
delby.name = 'デルビー・ベルコム'
delby.position = 'OMF'
delby.attack = 326
delby.defense = 259
delby.technique = 368
delby.skill = '銀河の象徴'
```

実行結果

```
クリステファン・ローディ FW 409 天衣無縫
```



## オブジェクトとクラス

オブジェクトはクラスをもとにつくられたものものであり、Pythonのすべての値は、オブジェクトである。クラスはオブジェクトをつくる設計図で、オブジェクトはクラスからつくる。

![オブジェクトとクラス.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/481315/daca1af7-00fb-4e68-85e4-63df92872657.png)



クラスの種類を表すために、**型**(type)という言葉を使う。たとえば、文字列のクラスstrはstr型に、整数のクラスintはint型になる。

クラスもまたオブジェクトであり、作成した``Player``もまたオブジェクトである。クラスというオブジェクトの型(type)はtype(型)で、`type(Player)`は、`type`になる。

`type`を使うと、クラスも作成できる。このクラスは、`class`で作成したものと同じオブジェクトで、`type`クラスのオブジェクトである。

```python
Player = type('Player')

christefan.name = 'クリステファン・ローディ'
christefan.position = 'FW'
christefan.attack = 409
christefan.defense = 193
christefan.technique = 395
christefan.skill = '天衣無縫'
print(christefan.name, christefan.position, christefan.attack, christefan.skill)
print(type(Player))
```

実行結果

```
クリステファン・ローディ FW 409 天衣無縫
<class 'type'>
```

- **クラス(class)**  :  管理対象となる情報と振る舞いを定義したテンプレートのこと
- **インスタンス(instance)** :  クラスの情報をすべて受け継いで生成されたオブジェクトのこと
ACCESSで日付を空白埋めする

#ことのはじめ 
とあるシステムでACCESSでとあるボタンを押したら、あらかじめテーブルに登録してあるSQLが実行されて、その内容でCSVを出力して
さらにそれをWORDに差し込んでさらにPDF化みたいなことをしている

そこで月ごとの金額明細みたいな表を作った時に、日付が
2016/11/10
2016/12/9
2017/1/8
2017/2/10
みたいな感じで縦に並べた時、幅がバラバラになる
なので書式をyyyy/mm/ddにして0詰めしたいところだが、お客様的にはそれが見栄えが良くなくてNGらしい(気持ちは分かる)
word側で等幅とかにしてみたけど余計に気持ちがわるい

どうにかyyyy/m/dとyyyy/mm/ddの幅を同じにしたい

で、どうしたものかと検索かけたら同じことをやりたい人がヒット(ﾟ∀ﾟ )
http://www.accessclub.jp/bbs/0085/beginers31302.html

…うげえ、めんどくせえ

いや、この方法は思いついたけどさあ。。。
やりたくないからなんかスマートなformat方法はないかと調べたわけなんすよ。。。

ということで諦めて作ることにした

#やりたいこと 
イメージは

2017/1/8→2017/ 1/ 8
2017/2/10→2017/ 2/10
みたいな感じ
あと、西暦だけじゃなくて和暦でも同じような感じにしたい
そして年月日だけじゃなく年月とかでもちゃんと表示できるようにしたい

要はいろんな日付書式で年や月や日が1ケタの場合空白で出来るようにしたい
そしていちいち＆とかで繋げるんではなく、設定が楽にできるようにしたい

#完成品
ということで、普通のformat関数の書式設定を使いつつどうにかできないかなとVBAゴネゴネしてたらいつの間にかできてた

```
'------------------------+'
'+ 共通モジュール   　　　　　　
'+
'+   Name : dateFormat
'+
'+   月や日が1桁の場合空白で充填する
'+ 引数
'+   a：日付項目(中身がNULLでも可)
'+   b：日付書式
'+
'+ 使い方
'+ dateFormat (now(),"yyyy/m/d日")→2018/ 9/ 5
'+ dateFormat (now(),"ggge(yyyy)年m月d日")→ 平成30(2018)年 9月11日
'+--------------------------------------------------------+'


Public Function dateFormat(a As Variant, b As String) As String
    If Nz(a, "") <> "" And IsDate(a) = True Then
        b = StrConv(b, vbLowerCase)
        b = Replace(b, "ggg", Format(a, "ggg"))
        b = Replace(b, "gg", Format(a, "gg"))
        b = Replace(b, "g", Format(a, "g"))
        b = Replace(b, "yyyy", Format(a, "yyyy"))
        b = Replace(b, "ee", Format(a, "ee"))
        b = Replace(b, "e", Format(Format(a, "e"), "@@"))
        b = Replace(b, "mm", Format(a, "mm"))
        b = Replace(b, "m", Format(Format(a, "m"), "@@"))
        b = Replace(b, "dd", Format(a, "dd"))
        b = Replace(b, "d", Format(Format(a, "d"), "@@"))
        dateFormat = b
    ElseIf Nz(a, "") = "" Then
        b = StrConv(b, vbLowerCase)
        b = Replace(b, "ggg", "　　")
        b = Replace(b, "gg", "　")
        b = Replace(b, "g", " ")
        b = Replace(b, "yyyy", "    ")
        b = Replace(b, "ee", "  ")
        b = Replace(b, "e", "  ")
        b = Replace(b, "mm", "  ")
        b = Replace(b, "m", "  ")
        b = Replace(b, "dd", "  ")
        b = Replace(b, "d", "  ")
        dateFormat = b
    Else
     Exit Function
    End If
End Function
```

#使い方

使い方例にあるように
dateFormat (now(),"yyyy/m/d")→2018/ 9/ 5
dateFormat (now(),"ggge(yyyy)年m月d日")→ 平成30(2018)年 9月 1日
みたいな感じで変換できる！！！

そして日付が無いときにも対応！！！えらい！！！
dateFormat (null,"yyyy/m/d")→ / /
dateFormat (null,"ggge(yyyy)年m月d日")→　　 (   )年 月 日

#注意
自分の使う書式しか入ってないので、他の日付書式とか曜日とか入れたい人は
```
        b = Replace(b, "aaa", Format(a, "aaa"))
```

みたいな感じで入れるとよい

#補足
実際にwordとかに差し込む場合は一つ注意点があって、段落オプションで
空白の自動調整的なのをオフにする必要がある
あとこれ、試してないけどexcelでも使えるんじゃないかな
【初心者】ソートアルゴリズムについて調べてみた。

[未来電子テクノロジー](https://www.miraidenshi-tech.jp/)でインターンをしている**to-fu16**です。
今回は、アルゴリズムの中でも基礎的な事柄であるソートアルゴリズムについて調べてみました。


##アルゴリズムとは
アルゴリズムとは、何らかの問題を解決するための方法や手順のことです。
プログラミングを学習するには、プログラミング言語の文法を理解するのに加えて、アルゴリズムを学ぶ必要があります。
同じ処理でも、アルゴリズムの違いによってプログラムの処理速度は大きく変わります。
計算量の少ないアルゴリズムほどよいアルゴリズムとされています。

##ソートアルゴリズムとは
データベースのデータを一定の規則に従って並べ替える(ソートする)ためのアルゴリズムを**ソートアルゴリズム**と言います。
ソートアルゴリズムにはたくさんの種類がありますが、最も一般的な3種類のソートアルゴリズムについて解説します。

###バブルソート
隣り合う要素の大小を比較し、入れ替えを繰り返すことによって整列します。
もっとも単純なアルゴリズムですが、効率は悪いです。


###クイックソート
基準値(ピボット)を1つ決め、データを基準値以上と基準値未満に分けるという処理を繰り返すことによって整列します。
一般的に最も高速だと言われているアルゴリズムですが、データの並びや数によっては必ずしも早いわけではありません。

###マージソート

データを分割し、その各々でソートを行った後に併合(マージ)する方法です。
処理時間がデータの並びの影響を受けにくく、最悪計算量がクイックソートより少ないのが特徴です。

##おわりに
プログラミング初心者であるため、内容に誤りがあるかもしれません。
もし、誤りがあれば修正するのでどんどん指摘してください

##参考
https://qiita.com/hiso/items/5c36f50c7de61fe870a2
https://moneyforward.com/engineers_blog/2016/02/02/sort-algorithm/
[Golang]並列処理で便利な、チャネル(channel)のサンプルコード

# お急ぎの方へ　先に結論のコード
```golang:チャネルのサンプル
package main

import (
	"fmt"
)

func hode(result chan string) {
	result<- "hogeです。"
}

func main() {
	result := make(chan string)

	go hode(result)
	
	fmt.Printf(<-result) // => hogeです。
}
```

# 並行処理でのチャネルの使い方とは

あるメソッドの処理結果を、mainメソッドに返して使いたい。
ただし、**goroutineを使って並列処理で…**

という処理を行いたい場合、

```golang:不可な例
res1 := go hoge()
go res2 := fuga()
```

こういった書き方では、処理してもらえません。
(syntaxエラーが出ます。)

そこで、**mainメソッドで用意した変数に、任意のメソッドでの処理結果を代入する…**
といったやり方をすることによって、上記を叶えることができます。

ここでチャネルを使います。

# チャネルの書き方サンプル

```golang:チャネルの書き方
package main

import (
	"fmt"
)

func hode(result chan string) {
	result<- "hogeです。"        // 3.チャネルであるresultに、「hogeです。」が代入される
}

func main() {
	result := make(chan string) // 1.変数を用意してチャネル名を設定

	go hode(result)             // 2.チャネルを引数に入れてメソッド実行
	
	res := 	<-result            // 4.resultに値が入ったことを確認して、その値を変数resに代入
	fmt.Printf("resultには「%s」が入っています。\n", res)
}
```

# 解説
## 1.変数を用意して、チャネルの名前を設定
`result := make(chan string)`
このようにして、スライスなどと同じ、参照型のデータを用意します。
## 2.チャネルを、引数に入れてメソッド実行
`go hode(result)`
こんな感じです。

- goはgoroutineの書き方
- hogeはここではメソッド名
    - `()`内に変数resultを入れることで、メソッドに引数として渡している。

## 3.メソッド内でチャネルに値を代入する
`result<- "hogeです。" `
ここですね。
`result<-`変数に左矢印という、特徴的な書き方ですね。

## 4.mainメソッドでチャネルを使う
`res := <-result `
(実際の現場では、あまりこのような書き方はしないかもですが…)
ここでは、変数resにresultというチャネルの値を代入しています。

重要なのは、
`<-result`
これで、チャネルから値を取得できるということです。

### ちなみに
さきほどもちらっと書きましたが、チャネルの値をわざわざ変数に入れることなく、そのまま使えます。

```golang:こんなに丁寧に書かなくても…
	res := 	<-result
	fmt.Printf(res)
```

```golang:これでもOK
	fmt.Printf(<-result)
```

結果は同じものが出力されます。
今回の記事では、細かい説明を共有したかったので、冗長に書いてます…

# さいごに
今日は、チャネルについて学んだので、共有させていただきました。
なお、関連記事として、並行処理についての記事は[こちら](https://qiita.com/riotam/items/a82af0b0d76c9367b79b)です。

最後までありがとうございました。
メモ：モーターの制御について


# モーターの制御について

戦車作る時に必ずDCモーターを使うと思うがその際の制御方法について述べる。

※ここでは**DCのブラシつきモーター**の話をしています。ラジコン用のブラシレスを採用しようとしている~~キチガイ~~未来志向の方はお帰りください。



## モーターについて

弊ロボコンにあるモーターが使えると思う。

385とか555とかいろいろ種類があるけど基本的には385で事足りる。むしろ555とか電気食いまくるのでおすすめしない。

あと減速比1:100のギアボックスが最初からついてるのでその辺は心配しなくていいと思う。

で、バッテリーはもちろん~~プラスチック爆弾~~リポバッテリーを使う。あんなものをマイコンで制御させようなんて無理です、燃えます。

そこで使用するのが**モータードライバー**。



## モータードライバーについて

モータードライバーはモーターを制御するための基板で、いろいろ種類があるけど安く済ませたかったらロボコンにあるロームの白いやつを使えばいいと思う。去年燃えたらしいが。

ちなみにうちは追加で買った。でかすぎて戦車に入らないからね。

制御方法は今まで見てきたのは大きく分けて２種類

ひとつ注意だが、PwmOutが可能なピンは限られているのでその辺を考えて設計すること。


### ２ピンで制御するタイプ
![0J10254.1200.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/466207/600a7b05-7684-76c5-8d6b-b675fa66e1cc.jpeg)

たいていINAとかINBとかいう名前の端子があって、そのピンにPWMの出力を入れるとPWMの値によってスピードが変化する。INAだけ、INBだけに入力する。どっちも入力するとブレーキのかかるものがおおい。ロームの白いやつはこのタイプ。

あ、もちろん電源供給はいります。

VddとかVddとかVssとかGNDとかいろんな表記があるけどちゃんとデータシートで確認しましょう。



### 3ピンで制御するタイプ
![14450a-01.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/466207/eab7e19e-a096-07ab-c49e-023323ec3476.jpeg)
こっちはINAとINBともうひとつ、PWMがある。

INAとINBで回転方向、PWMで速度を制御するタイプ。こっちのほうが貴重なPWMを節約できていいと思う。

ただ、ロボコンだとTB6612FNG(赤くて小さいやつ)ぐらいしかない。INAとINBはDigitalOut、PWMはPwmOutを用いる。



ちなみにモータードライバーは自作できます。どうしても自作にこだわりたい方はぜひどうぞ。



## マイコンを壊さないために

オプトカプラーとかできちんと絶縁しましょう。
剰余演算の最適化とリングバッファのインデックス


```python:python
# 2のn乗の剰余の場合
# x % (2**n) = x & (2**n-1)
>>> 3%(2**3) # 3%8
3
>>> 3&(2**3-1) # 3&(8-1)
3

# マチガイ-> x % n = x & n**2-1
# 速さという点では剰余演算は遅いらしい
# >>> 3%10
# 3
# マチガイ-> >>> 3&(10**2-1)
# マチガイ-> 3
```

```python:python
# リングバッファのインデックス
# サイズ５のバッファを論理的につなげる
>>> 0%5
0
>>> 1%5
1
>>> 2%5
2
>>> 3%5
3
>>> 4%5
4
>>> 5%5
0
>>> 6%5
1
>>> 7%5
2
>>> 8%5
3
>>> 9%5
4
>>> 10%5
0
```
機械学習を始めたい人のための入門書

これまでに読んだ機械学習関連の本の中で、本当にいいと思った本を紹介したいと思います。付随する難易度は目安です。

#機械学習、ＡＩ
・[難易度★][人工知能は人間を超えるか（松尾 豊）（Amazon）](https://www.amazon.co.jp/dp/4040800206/)
ＡＩブームの流れ、ＡＩでどの辺りまでできるのか、日本のおける問題点、などがすごく分かり易く書いてあります。全体像が分かるので、機械学習を学び始める第一歩としておススメです。

・[難易度★★][データマイニング入門（豊田 秀樹）（Amazon）](https://www.amazon.co.jp/dp/4489020457) 
Ｒのコードが書いていますが、Ｒをやらない人はコードを飛ばして読んでいいです。色んなアルゴリズムがかなり丁寧に解説されているので、アルゴリズムを知りたい時の最初の本としては最適と思われます。**決定木、自己組織化マップ、アソシエーション分析、クラスター分析**が非常に分かりやすいです。※ニューラルネットワークの説明はやや微妙と感じました。

・[難易度★★★][はじめてのパターン認識（平井 有三）（Amazon）](https://www.amazon.co.jp/dp/4627849710)
基本的なアルゴリズムをカバーしてあります。コードの記載は無く理論よりの本なので、大学初年度レベルの微分積分、線形代数、統計学を理解していることが必須です。**決定木、ランダムフォレスト、アダブースト、クラスター分析**が特に分かりやすいです。

・[難易度★★★][多変量解析入門――線形から非線形へ（小西 貞則）（Amazon）](https://www.amazon.co.jp/dp/4000056530)
入門と書いていますが、じっくり腰を据えて読む本です。数学者が書いているので数式の展開で細かいところにも気を配っており信頼性があります。コード記載無しです。**単純な線形回帰、Lasso回帰、Ridge回帰、ロジスティック回帰、主成分分析、サポートベクターマシン**が特に分かりやすく、カーネル法の説明も良かったです。

#Pythonプログラミング
・[難易度★★][独学プログラマー Python言語の基本から仕事のやり方まで（コーリー・アルソフ ）（Amazon）](https://www.amazon.co.jp/dp/4822292274)
初めてpythonを勉強しようと思い、高評価のレビューを参考にして購入しました。レベルも程よく繰り返し読みなおすと更に理解が進み、新たな発見があって、多くの人に評価されている意味が分かりました。Pythonを学ぶ最初の一冊としていいと思います。

・[難易度★★][Pythonで動かして学ぶ！あたらしい深層学習の教科書 機械学習の基本から深層学習まで（石川 聡彦）（Amazon）](https://www.amazon.co.jp/dp/B07GW9RMLL/)
Pythonのライブラリを使って機械学習をする入門書です。数式はほとんどなくコードも簡単です。

・[難易度★★★][Python 機械学習プログラミング（Sebastian Raschka、Vahid Mirjalili）（Amazon）](https://www.amazon.co.jp/dp/4295003379)
Pythonによる実装と理論の記述のバランスが良く、図もたくさんあってイメージしやすいです。ただし、いきなりこの本を読んでも途中で分からなくなるかもしれないので、別の本を読んだ後に読むといいと思います。

#微分積分
[難易度★★] [北海道大学の黒田先生のＰＤＦファイル](http://www7b.biglobe.ne.jp/~h-kuroda/pdf/text_calculus.pdf)
非常に丁寧で理論飛躍がほぼなく、広い範囲を網羅しています。機械学習で必要な多変数の微分や条件付き最適解も詳しく記載されています。例題が豊富です。

[難易度★★★][微分積分学（笠原 晧司）（Amazon）](https://www.amazon.co.jp/dp/4781901085/)
４０年以上前に出版されていますが、未だに人気がある本です。他の本を終えた後で読んでも理解が深まる良書です。
#線形代数
[難易度★★][線形代数学（川久保　勝夫）（Amazon）](https://www.amazon.co.jp/dp/4535786542/)
あまり目立っていない本ですが、私も含め購入者は意外といて新装版が発売されています。既存の線形代数の本の中では一番分かり易いのではないかと思うほどで、数学者が書いたとは思えないほど行間が埋めてあり独学もしやすいです。ベクトルと行列の説明も１から書いてあります。

[難易度★★] [北海道大学の黒田先生のＰＤＦファイル](http://www7b.biglobe.ne.jp/~h-kuroda/pdf/text_linear_algebra.pdf)
これも微分積分と同じで範囲も広く例題が多いので助かります。

#統計学
・[難易度★★][統計学入門（東京大学教養学部統計学教室）（Amazon）](https://www.amazon.co.jp/dp/4130420658)
確率統計を使う実務家にも人気でとても有名な本です。ポイントを押さえて読み手が理解しやすい構成になっていて、統計学の１冊目として丁度いいと思います。ただし、数式に慣れていない人は初めに「完全独習 統計学入門（小島 寛之）」を読むといいかもしれません。

・[難易度★★★＋][現代数理統計学の基礎（久保川 達也）（Amazon）](https://www.amazon.co.jp/dp/4320111664/)
上記よりも更に数学的な本で、本気で取り組まないと進みません。標準的な統計学の本には書かれていない分布や定理の証明が載っています。私自身も読み進めている途中ですが、難しいです。あとは辞書としても使えます。
Python+Seleniumで自動実行を行う時に並列で回すサンプル

# この記事は何？
Seleniumを使って並列でwebdriverをぶん回してやりたいと思った時のサンプルです。（例えば自社のサービスに手操作と同じルーチンで大量データを作成したい場合など）
巷のSeleniumHowtoは単一プロセスでwebdriverを利用するケースは多々あるのですが、並列で回す例はあまりなく、かつpythonで並列処理というサンプルもあまりなかったので、書き起こしました。

# 早速ですがサンプルです。

実行環境

```
Python 3.6.4
selenium (3.11.0)
```

以下の様な感じになります。

```python
from selenium import webdriver
from selenium.webdriver import Chrome
import concurrent.futures

def driverfunc(order):
    drvpath="C:/mydriverpath/chromedriver.exe"
    driver = webdriver.Chrome(drvpath)
    # basic認証の場合はユーザー:パスワード@サイトURLでgetできる
    driver.get("http://basicuser:basicpass@example.com")
    # ==============================================
    # 以下seleniumでの自動処理を記述する。
    # ==============================================
    driver.close()

# 並列実行するテストケースの配列
# このサンプルはあくまでも書き方サンプルなのでデータは適当
testcase = [1,2,3,4,5]

# 並列実行するexecutorを用意する。
# max_workers が最大の並列実行数
executor = concurrent.futures.ThreadPoolExecutor(max_workers=2)
for t in testcase:
    executor.submit(driverfunc,t)
```

## 注意する点
- `concurrent.futures.ThreadPoolExecutor`の`max_workers`が同時実行数になる。
    - 当然僕らのChromeはじゃぶじゃぶメモリを食うの、で少ない数で試して閾値を決めよう。
    - 当然アクセスされるサイトも並列で処理されるので、スクレイピングなんかで使うと×××される可能性もあると思うので注意
- `executer.submit()`で`executer.submit(func(arg))`というような書き方をすると、シングルスレッドで実行されるだけで並列処理されない。ドキュメント記載の通り、`executer.submit(func,arg)`と書いて引数を渡そう。
- このサンプルは`headless`で実行していないので、ブラウザがworkerの数立ち上がる。煩わしいったらないので、headless推奨。

# 参考サイト
concurrent.futures -- 並列タスク実行 — Python 3.7.4 ドキュメント
https://docs.python.org/ja/3/library/concurrent.futures.html#threadpoolexecutor
【Python】マルチスレッドでSeleniumのFirefoxを複数起動する方法 - あずみ.net
https://a-zumi.net/python-selenium-multithread/