OmniAICreator/Qiita-1.07M huggingface dataset:
回り道Python（２）

# リストの要素削除で唸る

　discrepancyの測定（まとまったら別に記事でまとめる）で、Pythonのリストを使って系列を表現したプログラムを作成している。その中で、「予め昇順にソートしてある整数値のリスト末尾にある要素と同じ要素を全て取り除く」処理を書いていた。

　つまり、`a = [1, 3, 4, 6, 7, 7, 8, 10, 10]`のようなソート済みのリストがあった場合に、末尾にある要素10に注目して、この要素と同じものを全て取り除くという処理だ。

　最初に浮かんだのは、

```cuttail_while.py
tail = a[-1]
while a[-1] == tail:
    del a[-1]
```

みたいなwhile文による削除方法だ。しかし、これはaの要素が空になるとエラーになる。考えてみれば当たり前なのだが、aの中身が空っぽの場合は、a[-1]なんて要素が無いからだ。対処方法はいろいろ考えられるのだが、別の場所でこの削除した後の要素数が必要になるので、それを変数elementsに入れて記録してみた。

```cuttail_while2.py
elements = len(a)
tail = a[-1]
while (elements > 0) and (a[-1] == tail):
    del a[-1]
    elements -= 1
```

動くには動くのだが、もう少し簡単に書けない？と考えて、以下のような手を思いついた。

```cuttail_delslice.py
del a[ -a.count(a[-1]): ]
```
　おお、これはスッキリ。早速、要素数6万程度のデータ数本で実験をしてみたら、**上の2つのプログラムが1秒程度で終わった処理が、一番下の書き方だと100秒程度かかる**ようになってしまった。

　簡単に、簡潔に書き直したハズがその部分だけで100倍も遅くなるのか。

　幾つか試験的なプログラムを書いてみて、リストの全体に対する処理（countやlenなど）は要素数が増えてくるととても重い処理になるようだ。そのため、それ以外の部分が簡潔に書けていたとしても、処理速度は速くなるどころか逆に遅くなる場合もある。

　特に今回は、このリストを処理する部分以外があまり負荷の大きくない処理だったため、この部分の処理速度差が露骨に表れたのではないかと推測している。

　この辺りの匙加減が良くわからない辺りが、自分はまだPythonに慣れていない証拠だ。
よろしく

はじめまして
とりあえず毎日のプログラミングの出来事を
いろいろ記録していきたいと思います
宜しくお願い致します。

#####2018.09.20
laravel migrationを行う時に、こんなエラー出てきました

```ruby:qiita.rb
SQLSTATE[42S01]: Base table or view already exists: 1050 Table ‘users’ already exists (SQL: create table users ( 
id int unsigned not null auto_increment primary key, name varchar(255) not null, email varchar(255) not null, 
password varchar(60) not null, remember_token varchar(100) null, created_at timestamp default 0 not null, up 
dated_at timestamp default 0 not null) default character set utf8 collate utf8_unicode_ci)

[PDOException] 
SQLSTATE[42S01]: Base table or view already exists: 1050 Table ‘users’ already exists
```
解消方法：userのmigrationのソースに

```ruby:qiita.rb
Schema::dropIfExists('users');
```
を追加
設計の重要性 〜CSS設計について〜

「設計」といっても分野ごとに多岐に渡るため今回は特にCSSに焦点を当てて見てていこうと思います。
　CSSと聞くとHTMLとともにプログラミング入門者がWebサイトを作る際にはじめに触れる言語というイメージが強いかもしれません。スクレイピング(検証コマンド)を用いて様々なサイトの内部構造を見て、参考にしつつ、Bootstrap等のライブラリを用いてお洒落なデザインを取り入れ、見栄えを良くする。CSSの場合、見栄えを良くするための装飾的な言語に過ぎず、書くうえでの統一性やリファクタリングなどにはあまり気を使わない・・・開発現場に出るまで私はそのような考え方でした。
　しかし、node.jsやAngularなど元々フロント(クライアントサイド)のJSフレームワークを扱ううえでは、ModelとViewの設計は明確に分けられるべきものであり、View(フロント)側を担当するHTML、CSSは、構造を与える&与えられた構造をもとに装飾していくものとして、Dataを扱うModelサイドとは役割を明確に分ける必要があるということを学びました。そのため、サーバーサイドを担当する側と同様にDRYな管理が必要とされます。その理由として、システムの保守性・拡張性が挙げられます。
　具体的な点としては、普段から何気無く使っていた「img」タグをCSS側に書くことが挙げられます。私はそれまで画像を表示させようとする際には、HTML上に載せたい画像の情報を書き込むのが普通であると考えていました。しかし、これは大きな間違いで、正確な書き方は「HTMLは構造を与えるのみ」「情報はCSS上に記述する」ということでした。最初は、何をどうすればいいかわかりませんでしたが、CSS設計の書籍などを読んでその意味を把握しました。
　HTMLにはclassのみ記述し、CSSファイルに参照にすべき画像があるファイルのパスを書くことが正解でした。他にも日常的にごく当たり前に書いていたコードや習慣が開発現場では見当違いであったということがいくつもありました。その点についてはまた後日ブログで書いていこうと思います。
FireFoxのバージョンを指定してダウンロードする

#FireFoxをアップデートしたらSelenium動かなくなった
ローカルで動かしているSeleniumが動かなくなった。

##元のバージョンに戻した
ここから選ぶ
https://ftp.mozilla.org/pub/firefox/releases/

バージョン
https://ftp.mozilla.org/pub/firefox/releases/24.0esr/

OS
https://ftp.mozilla.org/pub/firefox/releases/24.0esr/linux-x86_64/

言語
https://ftp.mozilla.org/pub/firefox/releases/24.0esr/linux-x86_64/ja/

ファイル
https://ftp.mozilla.org/pub/firefox/releases/24.0esr/linux-x86_64/ja/firefox-24.0esr.tar.bz2

##ダウンロード
```teminal
$ wget https://ftp.mozilla.org/pub/firefox/releases/24.0esr/linux-x86_64/ja/firefox-24.0esr.tar.bz2
$ tar xfj firefox-24.0esr.tar.bz2
```

##シンボリックリンク
```terminal
　　　　$ mv firefox /usr/local/
　　　　$ ln -s /usr/local/firefox/firefox /usr/bin/firefox
```

###参考記事
Centos7.4にFirefox57をインストールする
https://qiita.com/snow_rain000/items/551e35e76b92df06f7ea

Firefoxを旧バージョンに戻す方法（更新して不具合が出た時の対策）
https://plumpliver.com/firefox-restore-old-version/
How to disable history back

You can return Response with headers below

```
   /**
     * @param  string  $view
     * @param  array   $data
     * @return \Illuminate\Http\Response
     */
    function view($view = null, $data = [])
    {
        return response()->view($view, $data)
            ->header('Cache-Control', 'no-store, no-cache, must-revalidate, max-age=0, post-check=0, pre-check=0')
            ->header('Pragma', 'no-cache');
    }

```


or

```
   /**
     * @param \Illuminate\Contracts\View\View view
     * @return \Illuminate\Http\Response
     */
    function View($view)
    {
        return response()->make($view)
            ->header('Cache-Control', 'no-store, no-cache, must-revalidate, max-age=0, post-check=0, pre-check=0')
            ->header('Pragma', 'no-cache');
    }

```
JavaScriptによる右クリックの禁止・禁止を解除する方法

Webサイトなどで手軽に右クリックをできないようにする方法と、逆に右クリックを禁止したページで右クリックできるようにする方法を書いていきたいと思います。

## 右クリックの禁止方法

右クリックされた時のイベントはoncontextmenuで取得することができます。なので、このイベントリスナーでfalseをリターンすれば、右クリックを無効にすることができます。htmlタグに直接書く方法もありますが、今回はjsコードで書く方法を書いていきます。


```javascript:document全体で右クリックを禁止する方法
document.oncontextmenu = function () {return false;}
```

```javascript:html要素に対して右クリックを禁止する方法
document.getElementsByTagName('html')[0].oncontextmenu = function () {return false;}
```

```javascript:body要素に対して右クリックを禁止する方法
document.body.oncontextmenu = function () {return false;}
```
以上の方法で、簡単に右クリックを禁止できるようになります。ただ、後述する方法で、この禁止を解除することができてしまうので、あくまで**手軽に右クリックができなくなるだけということは覚えておきましょう。**

## 右クリック禁止を解除する方法

禁止を解除する方法で、JavaScriptを無効にする方法がよく紹介されていますが、Webサイトの中にはJavaScriptを無効にすると真っ白なページが表示されるような処理をしているサイトも多くあります。なので、JavaScriptを無効にする方法は確実に有効なものではありません。確実に解除するには、デベロッパーツールなどを使って、oncontextmenuのイベントでtrueを返す処理をする必要があります。

### デベロッパーツール（Chrome）を使って右クリック禁止の解除処理を実行させる

1. Windowsの場合はF12、Macの場合はOption + Command + Iでデベロッパーツールを表示させます。
2. Consoleを選択して、解除処理をJavaScrptで記述してenterキーを押す。

<img width="1059" alt="js_oncontextmenu.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/205865/ab8dde40-0956-b861-8ac9-2462a3d106d1.jpeg">

```javascript:document全体の右クリック禁止を解除する方法
document.oncontextmenu = function () {return true;}
```

```javascript:html要素に対しての右クリック禁止を解除する方法
document.getElementsByTagName('html')[0].oncontextmenu = function () {return true;}
```

```javascript:body要素に対しての右クリック禁止を解除する方法
document.body.oncontextmenu = function () {return true;}
```
上記のようにデベロッパーツールを使えば、簡単に右クリック禁止を解除することができます。

### 追記

stopPropagationを使ってイベントの伝播を中断させる方法なら、何に対して右クリックが禁止になっていても、禁止を解除することができます。

```javascript
document.addEventListener('contextmenu',function(e){e.stopPropagation();},true);
```

## まとめ

右クリックは、JavaScriptを使えば簡単に禁止できるのですが、逆に禁止を解除することもJavaScriptの知識があれば簡単にできてしまいます。
Qiita初体験～Swift学習の進捗記録に使うのはどうだろう？

### Qiitaの利用者・活用法

- **Qiitaの利用者**

プログラミング初心者向けの参考記事が、Qiitaにいくつかあったので、試しに登録＆初投稿してみた。

Qiitaは、プログラミング初級者～上級者の人が利用している印象を受けたけど、**本当の初心者の人とかは、あまり使っていないのかな？？**

- **学習の進捗記録や、質問用に有用？**

一応、プログラミング学習のオンラインサロンには参加しているので、簡単な進捗報告や質問は、そちらがメインになるはず。

その際に、Qiitaに詳細を記録し、こちらへのリンクを貼るという使い方は、**普通のブログ等に比べて、便利なこともあるのだろうか？**

※Qiita利用者の方に、アドバイスをもらえる可能性がある等
※今は、Googleドキュメントを主に使用

****************************************************
**＜2018/9/20 16:15 追記＞
↓の記事のように、コードを表示・貼り付けすると見やすいですね。
[【超初心者の為の！】Swiftまとめ](https://qiita.com/TakeshiKanazawa/items/b21728739594fd267096)**
****************************************************


### Markdawn技法について

面食らったのが、記事をMarkdawn技法で書くことを暗にオススメされていること。
Markdawn技法は、プログラミングにも役立つのだろうか？

ブログで、htmlタグをいじりながら記事作成することはあるので、あまり抵抗はないけど、有用でなければ、**気にせず（Markdawn技法を使わずに）記事作成してもよい？？**


### 参考記事

そんなわけで、これから継続利用するかわからないけれど、今日見つけた、Swift初心者向けの参考記事のリンクを貼っておきます。

**[初心者がオリジナルのiOSアプリを開発できるようになるまで]
(https://qiita.com/justin999/items/986fe025331f077e453e)
[[Swift] [Xcode] 脱・初級者のための学習ソース]
(https://qiita.com/y-some/items/f3432fa2be6577e6b06b)**


****************************************************
**＜2018/9/21 12:30 追記＞

### 本日のSWift学習記録

Qiitaでは、箇条書きのような進捗記録は好まれないかもしれませんが、タグ削除依頼があったので、「Swift」タグ分だけ、載せておきます:sweat_smile:

**アプリ「codebell」**
- 1章：Swift基礎（0.5h）
- 2章：変数と定数（1.0h）
- 3章：数値型と文字列型（0.5h）
- 4章：配列（0.5h）
- 5章：辞書（0.5h）

このアプリはチャット形式で、プログラミング初心者にもわかりやすいが、既に頭がいっぱいいっぱいなので、要復習。
（10章までしかないが、応用・実践編／他プログラミング言語でもあれば、ニーズがかなりありそう）

ただ、覚えるまで次に進まない、ではなく、まずは先に進んでイメージを掴み、適宜戻って再確認する方がよさそう。


### 補足

Qiitaは、ある程度まとまった／コードを記載する進捗報告に使用しようかと思っていますが、普段の進捗記録は、note・一般的なブログ等がいいかもしれませんね。



****************************************************
pthreadsを使わずにcronだけでPHPのバッチスクリプトを平行処理するアイデア

## はじめに
`pthreads`を使わない強い理由があるわけではないのですが、すでにあるPHPのバッチスクリプトであっても、ちょっとした工夫で平行処理できるアイデアがあるので紹介します。
`pthreads`については、下記の記事に詳しく書いてあるので参照ください。

- [PHPはマルチスレッド化で爆速化できるか？ pthreadsの使い方（基礎編） - WPJ](https://www.webprofessional.jp/parallel-programming-pthreads-php-fundamentals/)
- [スレッド処理は慎重に – PHPでのスレッド処理 : 前編 | POSTD](https://postd.cc/thread-carefully-1/)
- [スレッド処理は慎重に – PHPでのスレッド処理 : 後編 | POSTD](https://postd.cc/thread-carefully-2/)

尚、並列（`pararell`）処理というと、怒られそうなので、並行（`concurrent`）処理という言葉を使っています。

- [parallel と concurrent、並列と並行の違い - 本当は怖い情報科学](http://freak-da.hatenablog.com/entry/20100915/p1)

## 結論
何かしらユニークなIDをパーティショニングして、バッチスクリプトの実行時引数として渡してあげることで処理を分散、平行処理することができます。

## サンプル
`items`テーブルの`id`を3分割して取得し、それに対して何らか処理をするサンプルです。

```php
// /path/to/batch/script.php
// 前処理など、いろいろ省略

list($partitionIndex, $partitionSize) = explode('/', $argv[1] ?? '0/1');

$items = $itemRepository->fetchByPartition($partitionIndex, $partitionSize);

foreach ($items as $item) {
    // do something...
}
```

```php
class ItemRepository
{
    public function fetchByPartition($partitionIndex = 0, $partitionSize = 1)
    {
        $sql = <<<SQL
SELECT * FROM items
WHERE id % {$partitionSize} = {$partitionIndex}
ORDER BY id ASC
LIMIT 1000
;
SQL;

        $statement = $this->connection->query($sql);
        return $statement->fetchAll();
    }
}
```

```bash
$ crontab -e

*/5 * * * * php /path/to/batch/script.php 0/3
*/5 * * * * php /path/to/batch/script.php 1/3
*/5 * * * * php /path/to/batch/script.php 2/3
```

## おわりに
泥臭い方法ではありますが、十分に処理時間を短縮できる方法かと思います。
`PHP`に限ったアイデアではないので、`Python`など他の言語でも活用していただけると幸いです。

ではでは。
Railsのdeviseを入門してみる

## 0 説明

ユーザー登録、ログイン、承認、ログイン状態維持などのウェブアプリケーションには必須である機能を簡単に実装できるdeviseを触ってみたいと思います。最近Railsを勉強し始めたばかりなので、技術的なこと詳しく書けません。一通りのフローや、どういう理屈でdeviseが動いているのか、理解だけするための記事です。


## 1 railsのプロジェクトを作る

下記のコマンドでデスクトップに`devise_test`というプロジェクトが作られます。

```
$ pwd
/Users/hujisawa/desktop
$ rails new devise_test
```

## 2 Gemfileに以下を追記

deviseを使うためにgemファイルにdeviseを追加しましょう

```
gem 'devise'
```

んで、そのあとにbundle installを実行してライブラリを使えるようにします

```
bundle install
```

## 3 設定ファイルを追加しましょう

下記のコマンドでdevise設定ファイルを作ります。必須です。詳しくは[ここ](https://qiita.com/ShinyaKato/items/a098a741a142616a753e)を参照お願いします

```
rails g devise:install
```

## 4 モデルとマイグレーションを作る

下記のコマンドでdeviseで使われる、モデルやマイグレーションが生成されます。下記のコマンドではUserモデルと、そのためのマイグレーションが作られます。必須です。詳しくは[ここ](https://qiita.com/ShinyaKato/items/a098a741a142616a753e)を参照お願いします


```
rails g devise User
```

モジュール追加の編集が終わったらマイグレーションを実行します

```
rake db:migrate
```

## 5 やってみる

railsのウェブサーバーを起動して

```
rails s -p 3335
```

下記のurlにアクセスすればデフォルトの登録画面が表示されます

```
http://localhost:3335/users/sign_up
```

<img width="392" alt="Screen Shot 2018-09-20 at 15.13.20.png" src="https://qiita-image-store.s3.amazonaws.com/0/135794/f05e978f-9889-e995-a3b7-2a4cf1cc4fb8.png">

# 6 ユーザー登録が完了した


<img width="657" alt="Screen Shot 2018-09-20 at 15.13.26.png" src="https://qiita-image-store.s3.amazonaws.com/0/135794/3781f1ba-5978-f763-7a99-2880d5230b54.png">

ユーザー登録をしてみたら、実際にユーザーがdbに登録されているのか確認してみましょう

アプリのディレクトリに移動して

```
$ cd /Users/hujisawa/Desktop/devise_test 
$ pwd
/Users/hujisawa/Desktop/devise_test
```

railsのdbのコンソールを起動して

```
$ rails dbconsole
```

既存テーブルを確認してユーザーテーブルが生成されていることを確認して

```
.tables
```

selectしてみて、登録されているか確認

```
select * from users;
//登録されてる
1|a@gmail.com|$2a$11$hD04NGAGdNzsLvyRxRFxBuIwrxn.....
```

もう一回 `http://localhost:3335/users/sign_up` にアクセスしてみればわかると思いますが、`http://localhost:3335/`にリダイレクトされますね。これは、 `http://localhost:3335/users/sign_up`にアクセスされた時、もう既にユーザーが登録されていて、今は承認済みで、その状態が維持されているので、その場合はルートディレクトリに、リダイレクトされます。

## 解説

この時点で、ユーザーの登録、そして承認という簡単な流れができました。もし、承認済みユーザーのみアクセスできるページ、承認されてないユーザーでも見れるページ、などを分けたり、どのくらいアクセスしてなくても承認されている時間を維持するか（クッキー的な）を決めたり、フォームのバリデーションをしたり、もっとviewを工夫したり、そういうことをしたい場合は、参考に上げたurlを参考に、コントローラーや、ビューや、ルートをいじってください。デフォルトの機能を実装するために、コントローラーや、ビューや、ルートはいらないし、必要もないですが、もっと機能を足して、実用化するには、下記のurlを参考に、コントローラーや、ビューや、モデルをもっといじってください。

# 参考

[【Rails備忘録】deviseまとめ](https://qiita.com/ShinyaKato/items/a098a741a142616a753e)
unityでfirebase①　～firebase設定編～

Firebaseのプロジェクト作成とメールアドレス/パスワードでログイン認証ができるように設定すること
unity側の操作はまた別で。

使用Unity
Unity2018.1.1f1


まず前提として
androidでの動作を主目的にやった。

・Unity
・UnityのAndroid開発環境
・Googleのアカウント

があること。

前提ができていたらFirebaseのconsoleにアクセス
Firebase でgoogle先生に聞くと出てくるはず。

以下　Firebase Console　のリンク
[リンク]「https://console.firebase.google.com/?hl=ja」

![スクリーンショット (12).png](https://qiita-image-store.s3.amazonaws.com/0/293460/63399421-fc3e-593a-6030-63d8333f42a2.png)


プロジェクトの追加をクリック

![スクリーンショット (16).png](https://qiita-image-store.s3.amazonaws.com/0/293460/e12dcf04-d63e-af34-9800-a823c7cbd86a.png)

筆者無能なのでアナリティクス云々よくわからないです

<font color="DarkGray">気になったらGoogle先生に聞いてみてください</font>

特に気にしないのであればそのまま全部チェックを付けて
[プロジェクトを作成]
をクリック

![スクリーンショット (19).png](https://qiita-image-store.s3.amazonaws.com/0/293460/845b7ee9-879a-3d49-8d65-7bb4644b1a23.png)

準備できたら次へ
これでプロジェクト自体は作れました。


![スクリーンショット (20).png](https://qiita-image-store.s3.amazonaws.com/0/293460/97b9eb1e-2bf6-adfb-ecde-cb9b9837899a.png)


お次はAndroidで使いたいのでドロイド君のマークをクリック

![スクリーンショット (22).png](https://qiita-image-store.s3.amazonaws.com/0/293460/507c01eb-cf0e-a9a1-226b-5df6f3752d7f.png)

この画面になったら
・パッケージ名
・アプリのニックネーム
を入力

![スクリーンショット (24).png](https://qiita-image-store.s3.amazonaws.com/0/293460/9b156d27-cd20-95d6-fbbf-b88ff01b6a69.png)


パッケージ名はあとでunity で設定に使うのでメモ帳かなんかに貼り付けておくと便利
ニックネームはテキトーでいいですわかりやすい名前にしとこうそうしとこう

入力出来たら
[アプリを登録]


![スクリーンショット (26).png](https://qiita-image-store.s3.amazonaws.com/0/293460/831bb4e5-1811-8584-1988-73f548698e44.png)

はい、この　.json　てファイルちょぅじゅぅょぅ

＃＃＃＃＃＃＃<font color="Red">必ずダウンロードしておくこと！</font>＃＃＃＃＃＃＃


ダウンロードしたら
[次へ]


![スクリーンショット (28).png](https://qiita-image-store.s3.amazonaws.com/0/293460/d1211c6f-347a-2dac-0b89-7ba62e82a4ce.png)


ふむふむ…よくわからん！（無能
次！


![スクリーンショット (30).png](https://qiita-image-store.s3.amazonaws.com/0/293460/7d82e6ed-eae8-d9e8-71d6-f3a052917da4.png)


……………………………ながい！スキップ！


![スクリーンショット (45).png](https://qiita-image-store.s3.amazonaws.com/0/293460/9bffacb2-7e1f-222c-7a53-734e62ac0ffa.png)


開発タブを開いて Authentication をクリック


![スクリーンショット (39).png](https://qiita-image-store.s3.amazonaws.com/0/293460/a9fdccde-4c31-f1a0-76a2-2d08466dda67.png)


したらこんな画面

そしたら
メール/パスワード
をクリック
そしたら


![スクリーンショット (40).png](https://qiita-image-store.s3.amazonaws.com/0/293460/49a872db-4714-799d-71a6-37c0766a178f.png)


こーなって(´・ω・｀)

![スクリーンショット (41).png](https://qiita-image-store.s3.amazonaws.com/0/293460/27cb293b-bcf7-c221-fa24-a83b6645b6e7.png)


こーして(´・ω・｀)

![スクリーンショット (42).png](https://qiita-image-store.s3.amazonaws.com/0/293460/7c34ca3d-f37f-07fe-6fb3-fbdfee463e0f.png)


こうじゃ！(｀・ω・´ )


![スクリーンショット (43).png](https://qiita-image-store.s3.amazonaws.com/0/293460/20df7ca1-a142-0c85-5564-ba37f895b7f5.png)


ユーザータブに戻ればこうなってるはずです


今回はここまで！

次回は unity 側の設定をしていきます。
androidSDKとかNDKとか入ってる前提で書いていく
そのうちデータベースのほうもやっていく…いきたい…_(:З｣ ∠)_
【Vue.js】配列の特定のインデックスの値を書き換える

# Vueでリアクティブにならない時
VueのdataやVuexでは以下のようなインデックス数値を使った配列要素の更新を検知してくれない。

```.js
let list = [
  { name: 'hoge' },
  { name: 'fuga' }
]

list[0] = { name: 'hogehoge' }
```

# 解決方法① Vue.setを使う
グローバルAPIのsetメソッドを使うと配列を更新することが出来る。

```.js
let list = [
  { name: 'hoge' },
  { name: 'fuga' }
]

// Vue.set(更新する配列, 配列のインデックス, 新しいデータ)
Vue.set(list, 0, { name: 'hogehoge' })
```

# 解決方法② spliceを使う
```.js
let list = [
  { name: 'hoge' },
  { name: 'fuga' }
]

list.splice(0, 1, { name: 'hogehoge' })
```

spliceはの第一引数は配列のインデックス、第二引数はインデックスから数えて何個要素を取り除くのかを指定、第三引数で挿入する値を指定する。
上記の例では、listの1番目の要素から1つを取り除き、{ name: 'hogehoge' }を挿入している。

spliceを使えば追加、削除、挿入全てができるのでspliceを使うのが良さげ。
[python] 国土数値情報のAPIを使ってデータを取得してみた

# この記事の目的
国土数値情報のAPIを使って、国土数値情報のZIPファイルをダウンロードしてそれを解凍するプログラムを作ります。ちなみにAPI触るの初めててです。

# 国土数値情報とは
[国土数値情報](http://nlftp.mlit.go.jp/ksj/)とは、日本の地理情報に関する空間データのことです。国土交通省が公開してます。
1. 国土(水・土地)
　　海岸線、森林地域、地価データ等
2. 政策区域
　　行政区域、医療圏、避難施設データ等
3. 地域
　　警察署、福祉施設データ等
4. 交通
　　バスルート、駅別乗降客数
5. 各種統計

なんか色々使えそうなデータがあります。

##  ダウンロード方法
WEBサイトをポチポチクリックして直接ダウンロードする方法とAPIを使ってダウンロードする方法の二つがあります。
どちらの方法もZIPファイルをダウンロードすることになり、中身は同じみたいです。
都道府県をえらんでアンケートに答えて〜って毎回するのもめんどくさいので、今回は前述したとおりAPIを使ってダウンロードします。

## 国土数値情報API
[国土数値情報API](http://nlftp.mlit.go.jp/ksj/api/about_api.html)の詳細については仕様書を確認してください。ZIPファイルの中身からなんちゃらも全部確認できます。
[appId=ksjapibeta1, dataformat,identifier]は必須パラメータみたいです。
APIのデモ通り、データ識別子のIDと、データの最新年度、都道府県コードを指定して、データをダウンロードしてみます。

# プログラム
```python:modules
from lxml import etree
import requests
import zipfile
import os.path
import os
```
## APIを呼び出す
```python:connect_api
dataformat = 1
identifier = "N03"
prefCodes = range(1, 48)
# prefCodes = [27]
fiscalyear = 2018

    def get_zip_url(self):
        call_url = 'http://nlftp.mlit.go.jp/ksj/api/1.0b/index.php/app/getKSJURL.xml?appId=ksjapibeta1&lang=J&dataformat=%s&identifier=%s&prefCode=%s&fiscalyear=%s'%(dataformat, identifier, prefCode, fiscalyear)
        print("Connect: ", end="")
        print(callurl)

        try:
            r = requests.get(callurl, timeout=5)
        except Exception as e:
            print("erro and retry")
            r = requests.get(callurl, timeout=5)

        root = etree.fromstring(r.content)

        # APIからZIP URLが出力できていないことを表示
        for iter in root.iter('STATUS'):
            if iter.text is "1":
                print("No such a data file /  URL is not wrong")
        return root

```
## ダウンロードURLからZIPファイルをダウンロード
```python:download_file
    def download_file(self, url):
        """
        URL を指定してカレントディレクトリにファイルをダウンロードする
        """

        print("Downloading: ", end="")
        print(url)
        filename = url.split('/')[-1]
        if os.path.isfile(filename):
            print(filename + " aleready exist")
            return filename

        r = requests.get(url, stream=True)
        with open(filename, 'wb') as f:
            for chunk in r.iter_content(chunk_size=1024):
                if chunk:
                    f.write(chunk)
                    f.flush()
            return filename
```

## ZIPファイルを解凍
```python:extract_zip
    def extract_zip(self, filename):
        """
        ファイル名を指定して zip ファイルをtmpディレクトリに展開する
        """
        # 作業ディレクトリ作成
        target_directory = './tmp'

        if os.path.isdir(target_directory) is False:
            os.mkdir('tmp')

        zfile = zipfile.ZipFile(filename)
        zfile.extractall(target_directory)
```
Python3での、配列の重複要素の確認方法

二つの配列があって、両者で共通する要素があるかどうか確認したい場合があります。

そのときの確認方法を紹介します。

対象となる配列は

```py
a = [1,2,3]
b = [3,4,5]
```

## やり方

やり方としては以下のようになります。

```py
a = [1,2,3]
b = [3,4,5]

set(a) & set(b) # {3}
```

やっていることとしては、集合演算が可能なset型を利用します。この型のもつ、積集合を利用すると、2つの配列から重複する要素のみを取得することができます。

## 存在確認がしたい場合


```py
# その1
if set(a) & set(b):
    # 存在するときの処理

if not set(a) & set(b):
    # 存在しないときの処理

# その2
if len(set(a) & set(b)) > 0:
    # 存在するときの処理
```

というようなやり方があります。
Azure IaaS における運用設計入門

<p>この投稿は東京渋谷ヒカリエ 8 階にある <a href="http://aka.ms/aajp" target="_blank">Azure Antenna</a> で実施された「Azure IaaS における運用設計入門」で使われた資料のご案内です。</p>

- <strong>Azure IaaS における運用設計入門-本編- </strong><br />
https://www.slideshare.net/JunMisawa/20180918ops-on-azuremain
- <strong>Azure IaaS における運用設計入門-ハンズオン＆Appendix-</strong><br />
https://www.slideshare.net/JunMisawa/20180918ops-on-azureappendix


<p>:satellite:&nbsp;&nbsp;新しいイベントの情報は、Connpass の <a href="http://aka.ms/aajp" target="_blank">Azure Antenna サイト</a>よりご確認いただけます。</p>

<p>:arrow_backward:&nbsp;<a href="https://qiita.com/AzureAntenna/items/71f394c100fbfa8ddcc8">「Azure Antenna 実施イベント資料（カテゴリ別）」に戻る</a></p>
レスポンシブ時代のイメージマップ（クリッカブルマップ）

10年ぶりくらいにイメージマップを使用したのでメモ。

# あれ、イメージマップってどうやって作るんだっけ…？

昔はDreamweaverとかでポチポチやってた気がしますが、今持ってないしどうしよう…。
と思ったらこんな便利なジェネレータがありました。

[HTML Imagemap Generator
](https://labs.d-s-b.jp/ImagemapGenerator/)

画像をアップしてポチポチするだけでこんな感じのHTMLタグを生成してくれます。

```html:html
<img src="xxx.png" usemap="#ImageMap" id="image_map" alt="" />
<map name="ImageMap">
  <area shape="rect" coords="255,2,477,81" href="#" alt="頭部" />
  <area shape="rect" coords="257,84,479,132" href="#" alt="眼" />
  <area shape="rect" coords="260,168,473,239" href="#" alt="首・頸部"  />
  <area shape="rect" coords="261,247,470,365" href="#" alt="胸部" />
  <area shape="rect" coords="264,425,471,553" href="#" alt="腹部" />
  <area shape="rect" coords="15,193,126,304" href="#" alt="手足" />
  <area shape="rect" coords="131,209,258,308" href="#" alt="腕" />
  <area shape="rect" coords="244,561,492,726" href="#" alt="脚" />
</map>
```

# 画像を%表示したらどうなるんだろう…。

イメージマップは画像の原寸に対しての座標になるので、画像を拡大／縮小すると、当然ずれます。
それを解決してくれるjQueryのプラグインがありました。

[jQuery-rwdImageMaps](https://github.com/stowball/jQuery-rwdImageMaps)

まず、cssで画像を100%表示にします。

```css:css
#image_map {
    max-width: 100%;
    width: auto;
}
```

そして、プラグインのメソッドを実行します。

```js:JavaScript
$('#image_map').rwdImageMaps();
```

# デモ
[イメージマップ](https://sses-tokyo.github.io/github-pages/image_map/)



# 注意点
画像が非表示の状態でプラグインのメソッドを実行してもうまくいきませんでした。
使用する際は、画像を表示してからメソッドを実行するようにしましょう。
ユニットテストの心得

# 前置き
ユニットテスト（≒テストコード）は開発のペースや品質に安定をもたらします。
しかし、テストコードを書くこと自体にもコストがかかり、また下手なテストコードは保守性や開発ペースを下げてしまいます。ここではテストコードのメリットがデメリットを上回る様、うまくテストを書くための心得を3つにまとめてみましたので紹介します。

# さっそく心得
ひとつ、良いテストを知るべし。
ひとつ、書くべきテスト、書くべきでないテストを見極めるべし。
ひとつ、テストを起点にコードを書くべし。

## 良いテストの状態とは
次のような状態を目指す、維持することが良いとされています。

- すぐにテスト結果を得られること（Fast）
- わかりやすいこと（Clean）
- 頼れる、信用できること（Confidence）
- 実装がテストに縛られないこと（Freedom）

### すぐにテスト結果を得られること（Fast）
- 実行時間が長いと開発ペースが遅くなる
 - テストダブルを適切に利用することで不要な処理が走るのを防ぐことができる
- 実行しやすいことも大事

### わかりやすいこと（Clean）
- 何のためのテストで、何を保証しているのかがわかりやすいことが大事
- わかりにくいと
 - 意味のないテストや無駄に重いテストなどが混ざりやすくなる
 - 保守性が下がるだけでなく他の3項目（Fast, Confidence, Freedom）に悪い影響が出る

### 頼れる、信用できること（Confidence）
- 頼れない、信用できない状態では、別途手動テストをやる羽目になるなど、テストコードの価値が低くなる
- 信頼性を高めるには
 - テストの意図に沿って抜け漏れがないこと
 - 複雑な部分や不安になりやすい部分がしっかりテストされていること

### 実装がテストに縛られないこと（Freedom）
- コード間の結合度が高くなるほど変更が大変になるが、テストコードも実装と結合している点を見逃しがち
- 特にUIコンポーネントのテストコードは緩さがないとメンテが回らずすぐに破綻する
- BDDと狭義のTDD(※1)を使い分け、適度な緩さを保つことが大事
- 緩さの例
 - クラスのpublicメソッドのみをテストし、privateメソッドはpublicメソッドを通して担保する

※1 誤解を恐れずに書いた個人的なTDDとBDDの理解の表

|    項目   |内容|
|----------|---|
| 広義のTDD | 純粋にテストコードを起点として開発を進めること。<br>BDDと狭義のTDD両方を含む。 |
| 狭義のTDD | 結果としてボトムアップ型で、ホワイトボックステストに似た<br>一つ一つの分岐を確認するテストが書かれる。 |
| BDD      | 結果としてトップダウン型で、ブラックボックステストに似た<br>振る舞いにおける一連の処理をまとめて確認するテストが書かれる。 |

## 書くべき、書くべきでないテストとは
### 書くべきでないテスト :no_good:
#### 個人の経験に依存したテスト
- テストの粒度がばらつく
- 抜け漏れもに気づきにくい
- 結果的に**「良いテストの状態」**を保てなくなる

#### 信頼性 < メンテコスト となるテスト
- コスパが悪い状態
- 経験上の例
 - 「configファイルの設定が正しく渡せているかのテスト」
 - 解消できる不安がほとんどないのに設定が変わるたびにテストの修正を必要とした（低いFreedom性）
- ユニットテスト以外の保証の仕方を検討する
 - 例）振る舞いのテストの中で結合的に担保する
 - 例）上記の例の様な場合で変更の頻度が低いなら、手動テストで担保するのもあり

### 手段を確認するテスト
- 例）引数を整形する関数が、整形に必要なサブ関数を何回呼べているか
 - 上記で「サブ関数を3回呼べています」というテストを見ても正しいのか自信を持てない
 - returnしない関数やメソッドにありがち
- テストコードをだけを見て、対象が "どんなものなのか" がわかるか見返してみる

#### カバレッジ100%を目指したテスト
- 一定の基準に沿って網羅したテストを書くこととカバレッジ100%は全くの別物
- 書くべきでないテストが量産される
- カバレッジは飽くまで目安にとどめたほうが良い

### 書くべきテスト :ok_woman:
#### 目的を確認するテスト
- 手段を確認するテストの逆
 - 例）引数を整形する関数が、引数を正しく整形できているか

#### チームの方針、基準に沿ったテスト
- 複数人で開発する場合は事前にチームで話し合い、テストの方針、基準を決めてそれに沿って書くと良い
  - 抜け漏れが出にくくなる
  - テストコード全体の一貫性が保ちやすくなる
  - 結果として、わかりやすさと信頼性が増す

#### 方針、基準はどう決めるのか
- 銀の弾丸は無さそう（あればぜひコメントで教えてください！！）
 - 言語や利用フレームワーク、プロダクトの規模や性質によって最適解が変わるため
- 4つの**「良いテストの状態」**は変わらないので大方針としてはそれを目指す
- 具体策はチームで随時話し合い、自分たちの開発環境に合った基準を探す
 - どこを保証すれば効果的か
 - どこのテストが 信頼性 < メンテコスト となりやすいのか
 - などなど
- チームで相談して基準を変更するなど、継続的なメンテも大事
 - 例）決めた規準ではテスト不要となるが、実装に不安な部分がでた場合

## テストを起点にコードを書く
- テストコードの恩恵を受けやすくするため
- 要素としてテストファースト、テストドリブンについて紹介します。

### テストファースト
- テストコードを意識せずに書いたコードは、非常にテストコードが書きにくいものになりがち
 - 後からテストを書こうとして挫折した経験がある人も多いはず
- テストファーストはテストコードを書くコストを低く保つために必要

### テストドリブン
- テストを起点に実装することにより、
 - テストコードが実装の根拠となる
 - 実装の目的や内容をテストコードが表現することになる
- 結果的にテストは実装を要約したドキュメントの様な役割を果たす
 - 後から参加したメンバーもテストを通してコードを理解できる

# まとめ
- 3つの心得を元に、良いユニットテストの書き方を紹介
- テストコードはただ書けば良いものでは無い
- 具体的にどの様なテストを書いていくかはチームで探求し続けよう！

# 参考資料
- [Four Goals of a Good Test Suite / built to adapt](https://builttoadapt.io/four-goals-of-a-good-test-suite-651b3a4cfd33)
- [初めての自動テスト / O'Reilly](https://www.oreilly.co.jp/books/9784873118161/)
Zabbix3.0をCentOS6.7にインストール

# 概要
CentOS6.7にZabbix環境を構築する
## 構成
|Software|Version|
|:-------|------:|
|CentOS  |6.7    |
|Apache  |2.2.15 |
|PHP     |5.5    | 
|MySQL   |5.1.73 |
|Zabbix  |3.0.22 |

## 参考手順
- https://www.zabbix.com/documentation/3.0/manual/installation/install_from_packages
- https://doruby.jp/users/nakamatsu/entries/CentOS6%E7%92%B0%E5%A2%83%E3%81%ABZabbix%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%97%E3%81%A6%E3%81%BF%E3%81%9F
- https://usado.jp/spdsk/2017/11/02/post-2515/
- https://pochio.github.io/old_memo/oss/zabbix.html#php
- https://blog.ybbo.net/2014/01/22/%E3%80%90%E3%82%B7%E3%83%B3%E3%83%97%E3%83%AB%E3%80%91centos6%E3%81%ABphp5-5%E3%82%92yum%E3%81%A7%E7%B0%A1%E5%8D%98%E3%81%AB%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%99%E3%82%8B/

# 手順
- Apache、MySQLをインストール

```
# yum install -y httpd mysql-server
```

- Zabbixパッケージをダウンロード

```
# rpm -ivh https://repo.zabbix.com/zabbix/3.0/rhel/6/x86_64/zabbix-release-3.0-1.el6.noarch.rpm
# yum -y install zabbix-server-mysql zabbix-web-mysql zabbix-web-japanese zabbix-agent
```

- MySQLを起動

```
# service mysqld start
# chkconfig mysqld on
```

- MySQLにZabbix用データベースを作成

```
# mysql -uroot
mysql> create database zabbix character set utf8 collate utf8_bin;
mysql> grant all privileges on zabbix.* to zabbix@localhost identified by 'zabbix';
mysql> quit;
```

- 初期データをインストール

```
# zcat /usr/share/doc/zabbix-server-mysql-3.0.*/create.sql.gz | mysql -uzabbix -pzabbix zabbix
```

- バージョンを確認

```
# rpm -q zabbix-server-mysql
```

- Zabbixのデータベース接続設定

```
# vi /etc/zabbix/zabbix_server.conf
```
```/etc/zabbix/zabbix_server.conf
DBHost=localhost         # ADD
DBName=zabbix            # DEFAULT
DBUser=zabbix            # DEFAULT
DBPassword=zabbix        # ADD
```

- Zabbixサーバー起動、自動起動を設定

```
# service zabbix-server start
# chkconfig zabbix-server on
```

-  httpd.confを設定

```
# vi /etc/httpd/conf/httpd.conf
```
```/etc/httpd/conf/httpd.conf
#ServerName www.example.com:80
ServerName localhost:80             # ADD
```

- PHP5.4以上が必要なので、必要なリポジトリをインストール

```
# rpm -ivh http://dl.fedoraproject.org/pub/epel/6/x86_64/epel-release-6-8.noarch.rpm
# rpm -ivh http://rpms.famillecollet.com/enterprise/remi-release-6.rpm
```

- PHP5.5および必要なエクステンションをインストール

```
# yum install -y --enablerepo=remi-php55 php php-bcmath php-gd php-ldap php-mbstring php-xml php-mysqlnd
```

- Zabbix-web設定ファイルをhttpd/conf.dにコピー

```
# cp /usr/share/doc/zabbix-web-3.0.*/httpd22-example.conf /etc/httpd/conf.d/zabbix.conf
# vi /etc/httpd/conf.d/zabbix.conf
```
```/etc/httpd/conf.d/zabbix.conf
        # php_value date.timezone Europe/Riga
        php_value date.timezone Asia/Tokyo       # ADD
```

- Apacheを起動

```
# service httpd start
# chkconfig httpd on
```

- ZabbixWebUIにアクセス
    - http://localhost/zabbix/
- ZabbixWebUIの初期設定
    - Configure DB connection
        - Password `zabbix`
- ZabbixWebUIにログイン
    - Username `Admin`
    - Password `zabbix`
PowerShellで.NetのBigInteger型を使って巨大な整数を計算

#環境
### 下記環境で確認 
- Windows7 PowerShell 3.0 (.Net Framework 4.0以降が必要)
- Windows10 PowerShell 5.1
- Windows10 PowerShell 6.0

#巨大な整数
Windowsに付属している電卓では、当たり前だが計算で扱える桁数に制限がある。
.Net Framework 4.0で追加されたBigIntegerをPowerShellで扱えるか確認した。

#例) 階乗
###100の階乗を計算するワンライナーを実行
```
> @(1..100)|% -Begin{$fact=[bigint]::One} -Process {$fact*=[bigint]::Parse($_)}
> $fact
93326215443944152681699238856266700490715968264381621468592963895217599993229915608941463976156518286253697920827223758251185210916864000000000000000000000000
```

とくに問題なく使えそうだ

#説明

`@(1..100)`で階乗の値を指定する。パイプでforeachに渡して`$fact`をBigIntegerの1で初期化。(PowerShellで`[bigint]`型として使える)
あとは乗算`*=`を階乗の回数だけ繰り返す。普通の数値型や文字列等からは`Parse`メソッドで変換してやる。


#注意点
階乗の計算は昔からCPUを食う(実行時間がかかる)ことで知られている。大きな階乗を計算するとものすごく時間がかかるので注意。
試しに100万の階乗を計算したら18分かかった。。。(Win10、Core i5-4570 CPU @3.20GHzのマシン)
CPUの高負荷テストに使えるかも。

```
> Measure-Command{@(1..1000000)|% -Begin{$fact=[bigint]::One} -Process {$fact*=[bigint]::Parse($_)}}


Days              : 0
Hours             : 0
Minutes           : 18
Seconds           : 42
Milliseconds      : 228
Ticks             : 11222287421
TotalDays         : 0.0129887585891204
TotalHours        : 0.311730206138889
TotalMinutes      : 18.7038123683333
TotalSeconds      : 1122.2287421
TotalMilliseconds : 1122228.7421
```
React基本(css)

+ 概要
+ 解説

***

#概要
cssを以下のように記述することができます
https://qiita.com/tomi_shinwatec/items/cdd319d8fce8bdb829d0

```

// 謎の定義
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

const mixStyles = function(){
  var res = {};
  for (var i = 0; i < arguments.length; ++i) {
    if (arguments[i]) Object.assign(res, arguments[i]);
  }
  return res;
}

// スタイルを定義
const Styles = {
  bgRed: {
    backgroundColor: "red",
  },
  bgBlue: {
    backgroundColor: "blue",
  },
  fontSize16: {
    fontSize: "16px",
  },
  fontSize20: {
    fontSize: "20px",
  }
}

// スタイル適用
class StyleComponent extends React.Component {
  render() {
    return (
      <div>
        <p style={mixStyles(Styles.bgRed, Styles.fontSize16)}>背景：赤,文字サイズ：16</p>
        <p style={mixStyles(Styles.bgRed, Styles.fontSize20)}>背景：赤,文字サイズ：20</p>
      </div>
    )
  }
}

export default ListComponent;


```


#解説


###謎の定義
肝になっていそうだが面倒なのでパス

###スタイルの定義
`const`にスタイルを格納する
名前はなんでもよい

```
const Style = {
  bgRed: {
    backgroundColor: "red",
  },
  bgBlue: {
    backgroundColor: "blue",
  },
  fontSize16: {
    fontSize: "16px",
  },
  fontSize20: {
    fontSize: "20px",
  }
}
```

###スタイルを適用
```

class MyComponent extends React.Component {
  render() {
    return (
      <div>
        <p style={mixStyles(Style.bgRed, Style.fontSize16)}>背景：赤,文字サイズ：16</p>
        <p style={mixStyles(Style.bgRed, Style.fontSize20)}>背景：赤,文字サイズ：20</p>
      </div>
    )
  }
}
```
`mixStyles`という関数を使う
あとは配列と同様に指定したデータを入れる
AWS SNS APNSの証明書の有効期限を確認する方法

# エラー表示

有効期限が切れていると下記のようなエラーがでます。

```
Platform application is disabled
```

# リファレンス

https://docs.aws.amazon.com/sns/latest/api/API_GetPlatformApplicationAttributes.html
https://docs.aws.amazon.com/cli/latest/reference/sns/get-platform-application-attributes.html

# aws cli で実行してみる

```
$ aws sns get-platform-application-attributes --platform-application-arn {確認したいSNSのarn}
```

```
$ aws sns get-platform-application-attributes --platform-application-arn arn:aws:sns:ap-northeast-1:0123456789:app/APNS/hogehoge
{
    "Attributes": {
        "SuccessFeedbackSampleRate": "100",
        "EventDeliveryFailure": "arn:aws:sns:ap-northeast-1:0123456789:hogehoge-disabled",
        "SuccessFeedbackRoleArn": "arn:aws:iam::0123456789:role/SNSSuccessFeedback",
        "Enabled": "false",
        "AppleCertificateExpirationDate": "2017-12-01T00:21:01Z",
        "FailureFeedbackRoleArn": "arn:aws:iam::0123456789:role/SNSFailureFeedback",
        "EventEndpointUpdated": "arn:aws:sns:ap-northeast-1:0123456789:hogehoge-disabled"
    }
}
```

**AppleCertificateExpirationDate** というキーが有効期限ですね
ASP.NET CoreのResponseCacheAttributeはformタグが入っていると機能しない

３時間くらい延々とハマったのでメモ

ResponseCacheAttributeを設定すると、その設定通りのレスポンスヘッダが設定されるが、出力するhtmlの中(Razorの中)にformタグがあるとCSRF対策が機能するため(要出典)、no-store no-cacheなレスポンスヘッダとなる。
Windows10にキャプチャツールのGreenshotをインストールする方法

# インストーラをダウンロードする
[Greenshotのサイトでインストーラをダウンロードする。](http://getgreenshot.org/downloads/)
[Vectorのサイトにもある](https://www.vector.co.jp/soft/dl/winnt/art/se505369.html)が、インストール後に `You are not using the newest Greenshot version.` って出て悲しい。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/159761/86da0083-66c3-d5a2-87e0-1305833b70a9.png)


# インストーラでインストールする
日本語はないので英語で頑張る。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/159761/cf5768b1-bc34-2ea7-f631-70f8b81d79c6.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/159761/b42e836a-4884-e5fc-fbfd-4ba2eb5e3a4b.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/159761/43ebfc63-88ef-6305-6c78-4c44729891c1.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/159761/28f50dec-b849-ec77-c159-0e540572998f.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/159761/8d55fa53-01fe-f094-cffc-e1586e59b315.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/159761/e086ce7c-cc42-6a63-6f97-80118c9a854a.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/159761/f2b8c2ff-ab15-e384-a821-d6c2582b8d9a.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/159761/6df2e18d-b036-7d55-be66-a748b8c0da87.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/159761/eefa7434-b68c-7ff8-8fe0-65672ac7ce30.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/159761/8d55e1c7-a8c6-dce2-d2dd-3120183bfc06.png)


## 既にインストールしたGreenshotがある場合は停止してからインストールする
![image.png](https://qiita-image-store.s3.amazonaws.com/0/159761/71504585-0d6c-384d-5e11-1602d05dec27.png)

## `The hotkey(s) "PrintScreen...` 的な `Warning` が出たらどうするかは自分で決める
そのキーはOneDriveとかDropBoxとかがもう使ってるよということなので何を優先するかは自分で決める。
[My PrntScreen key no longer works with Greenshot.... why?](http://getgreenshot.org/faq/my-prntscreen-key-no-longer-works-with-greenshot/)
[windows 10 - Greenshot: The hotkey(s) &quot;PrintScreen, Alt + PrintScreen, Ctrl + PrintScreen, ...&quot; could not be registered - Super User](https://superuser.com/questions/1151007/greenshot-the-hotkeys-printscreen-alt-printscreen-ctrl-printscreen/1239937)
Google Calendar APIの繰り返しイベント

#取得できないイベントがある・・・？
[API Explorer](https://developers.google.com/apis-explorer/?hl=ja#p/calendar/v3/calendar.events.list?_h=8&)で `timeMin` と `timeMax` を指定したのに、その期間内にあるイベントを取得できなかった。カレンダー上には確かに存在するのに・・・

#何が原因だった？
取得したかったイベントが「繰り返しイベント」であることが原因だった。
デフォルトの場合は、繰り返しイベントは取得されず、そのベースになったものしか取得されないようだ。

例えば、9月18日に何かイベントを作成し、毎週繰り返すという設定にした場合→9月18日のイベントは取得できるが、9月25日以降のイベントは取得できない。

#対策
パラメータに `singleEvents=true` を加えた。このパラメータをつけると繰り返しイベントが展開されて個々のイベントを取得できるようになる。

これだけで6時間ハマった。つらい。
TensorFlowで画風変換を試してみた メモ

TensorFlowをPCに入れる機会があり、せっかくなので前々からやってみたかった画風変換をためしてみました。

環境構築さえできれば、先人たちの知恵で気軽に画風変換を楽しめました。
一番時間がかかったのが環境構築でした。

# 環境
Python 3.6.6
TensorFlow 1.10.1

今回 neuralart_tensorflow を利用させてもらいましたm(_ _)m
手軽に試せるのでとても助かります。

```
git clone https://github.com/ckmarkoh/neuralart_tensorflow.git
```

## 訓練済み画像認識モデル
READMEにもありますが、今回は訓練済みモデルを利用します。下記からDLできます。
https://drive.google.com/file/d/0B8QJdgMvQDrVU2cyZjFKU1RrLUU/view

## Python３ 用にちょっとコード修正
print の記述を Pyhon３ 用に修正 line 138 あたり

```
# print (sess.run(cost_total))
print (sess.run(cost_total))
```

# 実行！
ここまできたらあとはコマンドを叩くだけで実行されていきます！

```
 python main.py
```
CPU環境なのですごく時間がかかりました。


# 参考記事
main.pyのコード内容がさっぱりだったのですが、下記記事に大変わかりやすくまとめてくださっていました！
完全に理解するのは難しいですが大変勉強になりました。

[TensorFlowで画風変換を少し説明しつつ実装してみる](https://qiita.com/isboj/items/4e25f0bd0a2577d7b857)
Clojure ファーストインプレッション

Clojure 初学者が感じた Clojure の基礎文法に関するつぶやき

参考情報 = 私のスペック: プログラミング歴 10年, lisp経験なし, 関数型経験あり, 4clojure の elementary & easy は全て解いた, 「clojure for brave and true」 で学習

## infix でないことの強み
`+`, `=` や `and` など他の言語では infix な演算子が Clojure では prefix になっており、可変個の引数を受け付ける。これにより、他の言語での sum, product というような関数は不要になる: `(+ 1 2 3)` , `(apply + [1 2 3])`, `(* 1 2 1)`, `(and true false false)`。

## 名づけが絶妙
特に seq まわりの関数に当てはまるが、反復操作の処理パターンを類型化し、名前をつけるのが上手い。例: `mapcat`, `juxt`, `interleave`, `interpose`, `partition`。この辺りを知れば知るほど簡潔にプログラムが書けるようになりそう。

## 自由すぎる
4clojure のような単純な要件でさえ、実装方法のバリエーションが多い。書くのは楽だが読むのは辛いという印象が強い。ある問題では、`for` を使った内包表記で回答を作る人がいれば、`reduce`を使ったり、 `loop`, `iterate` を使った人もいた。

## 読みづらい
よく言われるように括弧多すぎというのもあるが、一番つらいのはインデントが深くなること。JavaScript, Python を書いてるときは最大でもインデント深さを 3くらいにとどめていただけに、インデントの深い expression を見ると発狂しそうになる。

## destructuring の強力さ
最近では JavaScript でも使えるけど、destructuring は便利すぎる。多くの lexical binding は destructuring で驚くほど簡潔になる。

## 関数合成の実際
いくつか実践してみると `comp`, `partial` よりも `->` などのスレッディングマクロを使うほうが楽なケースが多い。`#((as-> ...)` をよく使う。 `transduce` も seq に対する処理の際にはかなり便利に使える（transducer の合成がめちゃ楽なのがよい）。

## エラーメッセージ
何言っているのかわからないメッセージが多くてつらい

## 楽しい
短くかけて楽しい
Prettier で整形した結果の diff があったときに CI を落とす方法

よく使い回すのでメモ。
仕事上ほとんど CircleCI なので例は config.yml だけど、どこでも変わらない。

## TL;DR

### Prettier 1.16 以降

prettier 1.16 から `--check` オプションが追加された。変なことをしなくても以下で OK。

```package.json
{
  "scripts": {
    "lint:prettier": "prettier --check './src/**/*.{js,ts}'"
  }
}
```

以下のような CircleCI で動くという具合。

```yml:.circleci/config.yml
version: 2
jobs:
  build:
    working_directory: ~/app
    docker:
      - image: circleci/node:8.10.0
    steps:
      - checkout
      - restore_cache:
          keys:
          - v1-dependencies-{{ checksum "yarn.lock" }}
          - v1-dependencies-
      - run: yarn
      - save_cache:
          paths:
            - node_modules
          key: v1-dependencies-{{ checksum "yarn.lock" }}
      - run: yarn lint:format
```

### Prettier 1.16 以前　

prettier の `-l` オプションを使う。以下のような  package.json がある場合に……

```package.json
{
  "scripts": {
    "format": "prettier './src/**/*.{js,ts}'"
  }
}
```

以下のような CircleCI で動くという具合。 `-l` オプションをつけると、変更があった場合に exit code 1 を返してくれる。

```yml:.circleci/config.yml
version: 2
jobs:
  build:
    working_directory: ~/app
    docker:
      - image: circleci/node:8.10.0
    steps:
      - checkout
      - restore_cache:
          keys:
          - v1-dependencies-{{ checksum "yarn.lock" }}
          - v1-dependencies-
      - run: yarn
      - save_cache:
          paths:
            - node_modules
          key: v1-dependencies-{{ checksum "yarn.lock" }}
      - run: yarn -s format -l
```

## prettier の変更検知について

その他いくつかの変遷をたどったのでメモ。

### prettier -&gt; git diff

以前まで使っていた方法。

#### Pros

- 楽。見たらやっていることがわかるほか、 prettier 以外の依存が入らない。

#### Cons

- package-lock.json や yarn.lock が CI で書き換わったら頓死する。
- `-l` オプションを知った結果不要になった。

### prettier-check を使う

https://github.com/hexacta/prettier-check を使う。

#### Pros

- `-l` オプションでやりたかったことが実現できている。
- `-l` がない頃は使われていた様子。

#### Cons

- この程度のことで依存を増やしたくないので prettier からの git diff のときは使わずにいた。
- 今はそもそも不要になった。

## 資料

公式ドキュメントにあった。

> `--list-different`
> Another useful flag is --list-different (or -l) which prints the filenames of files that are different from > Prettier formatting. If there are differences the script errors out, which is useful in a CI scenario.

https://prettier.io/docs/en/cli.html#list-different

`-l` が導入された時の議論はここ。

https://github.com/prettier/prettier/issues/150

### 追記: --check オプション

1.16 からは --check オプションができたのでこれで良い。

https://prettier.io/blog/2019/01/20/1.16.0.html
JavaScriptでクリーンアーキテクチャはどうすればいいのか(Usecase編)

# Usecaseもパイプの、とある実装(フィルタ)

* 以下のコードではrepositoryから得られたデータを直接Presenterに渡している

```javascript
class FilterUsecase {
  changeDepartment(i, department){//まずは部門で絞込
    this.cond = {department : (i < 1) ? null : department };
    const 勤務実績表 = this.repository.q("勤務実績", this.cond);
    this.oport["memberfilter"].update(勤務実績表, this)
  }
// this.oport["memberfilter"]の実態は、Presenter
}
```
---

# 従って、Usecaseもとあるデータ形式の変換処理をする

* Repositoryから得られた**DomainModel(の一つ)を変換**
* DomainModel->(変換)->Presenter#update(list)
  * ここでのDomainModelはTable; RDBにおけるテーブルそのもの
* Usecaseでの処理はPresenterに渡すデータ型への変換処理と**考える**

```javascript
class FilterUsecase {
  changeDepartment(i, dept){
    this.cond = {department: (i < 1) ? null : dept}
    const 勤務実績表 = this.repository.q("勤務実績", this.cond)
    const members  = this.filterMember(勤務実績表)
    this.oport["memberfilter"].update(members, this)
  }
  filterMember(table){
    return table.select("氏名").uniq().left_join(this.repository.from("従業員").sortby("表示順").toArray()
  }
// this.oport["memberfilter"]の実態は、Presenter
}
```

* this.repositoryにどこまで任せればいいのか
* this.repository.q()の実装をどうすればいいのだろう...

--- 
# その時Presenterは?

* Usecase->Presenter->View
* DOM操作を行うのが役割?
  * HTMLの静的な部分がView **と考える**
    * Presenterから見るとViewとはidが指し示す画面上の領域のことである(はず)
  * 以下、いったんto_vdomを挟んでいるのは処理イメージ
 
```javascript
class SelectPresenter
  constructor(id){
    this.node = document.getElementById(id)
  }
  to_vdom(array){
    return {select: array.map((v, i)=>{return {option: v, value: i} })}
  }
  update(departments, usecase){
    //勤務実績repositotyから得られたtableを変換してUIに反映する
    //1. departments(Array)-> 中間表現vdomに変換
    const vdom = this.to_vdom(departments)
    //2. vdomの内容を、DOMに反映
    this.node.appendChild(toDom(vdom).addEventLister("change", function(evt){
     const i = this.selectedIndex;
     const department = this.options[i].text
     usecase.changeDepartment(i, department)
    }))
  }
```
# Presenterの問題

* このSelectPresenterは、usecase.changeDepartment()のせいで密結合すぎる
    * 引数で渡されるdepartments部分と同様に、イベントハンドラも引数で渡せないものか?
* 所属フィルタと勤務形態フィルタは同じセレクトボックスであるが、 **勤務形態フィルタは選択肢が少ないからラジオボックスで明示的に表現したいと言われるかもしれない**      
* (前編からの続き)vdom->DOMへの反映時に
  * 部門を毎回選択する度に、appendChildするNodeListを消して付け加えるのは冗長では?
  * optionタグ分を入れ替えれば良いはず
  * =>セレクトボックスを作るメソッドと、セレクトボックスの項目を入れ替えるメソッドを分けた方が良い
    * セレクトボックスを作るメソッドではイベントハンドラを引数で渡す
    * 項目を入れ替えるメソッドでは、このように配列を引数で渡せばよさそうだ

---

# Presenter編に続く

* [JavaScriptでクリーンアーキテクチャはどうすればいいのか(前編)](https://qiita.com/Gatz/items/d6b0250bfab6e1e74d69)
* JavaScriptでクリーンアーキテクチャはどうすればいいのか(Usecase編)
* [JavaScriptでクリーンアーキテクチャはどうすればいいのか(Presenter編)](https://qiita.com/Gatz/items/e70d6e854b3bbfef105e)
* [JavaScriptでクリーンアーキテクチャはどうすればいいのか(initializer編)](https://qiita.com/Gatz/items/c224000a510bf0f74298)
* [JavaScriptでクリーンアーキテクチャはどうすればいいのか(Repository編)](https://qiita.com/Gatz/items/ca0c5b7db7321d99451c)
* [JavaScriptでクリーンアーキテクチャはどうすればいいのか(DataStore編)](https://qiita.com/Gatz/items/d93f6ae895c65b8785e5)
* [JavaScriptでクリーンアーキテクチャはどうすればいいのか(DomainModel編)](https://qiita.com/Gatz/items/d88124c9db1facb6f67a)
UiPathのコミュニティエディションをちょっとだけ使ってみた - インストールまで

友人がRPAやるかもということだったので、
事前の学習として個人で試すことができるUiPathの導入と、ちょっとしたサンプルを提供ついでに投稿します。

## 環境情報
- windows10 Pro

## さっそくダウンロード
細かいことは置いといて、まずはダウンロードしてみましょう。
なお、コミュニティエディションの商用利用はNGとしっかり書かれていますのでくれぐれも注意してください。

  1. [公式サイト](https://www.uipath.com/ja/rpa/robotic-process-automation) に移動して

  2. サイト右上のトライアルの開始をクリック
  ![7ca1e996.png](https://qiita-image-store.s3.amazonaws.com/0/69329/1ca79392-277e-8004-3fe5-48218e8f2908.png)

  3. UiPathコミュニティエディションを選択

  4. 姓・名・Eメールを入力してダウンロードボタンをクリック
  ![41cac677.png](https://qiita-image-store.s3.amazonaws.com/0/69329/45c41bf1-fc66-2055-5de2-8cd02ce085f2.png)

  5. 登録したメールにURLがついてくるので、そちらからUiPathStudioSetup.exeをダウンロード

## 続いてインストール

  1. ダウンロードしたUiPathStudioSetup.exeを実行

  2. 起動時に毎回ライセンスの有無を聞かれるので、Start Free(2回目以降はContinue Free)を選択
  ![ecbcc460.png](https://qiita-image-store.s3.amazonaws.com/0/69329/3a27cdda-5674-ff5b-6409-f1f36b5ea444.png)

  3. 登録時に使用したアドレスの入力を求められるので、入力し、Activate
  ![bff6fe4e.png](https://qiita-image-store.s3.amazonaws.com/0/69329/4bd96e1c-a92d-1fff-0aeb-7c028cd20bc1.png)
    ※Device IDはそのままで。

これでインストールまで完了です。

次は[サンプル](https://qiita.com/giisuu/items/1093bb3ae732dcc369f8)作成をやります。
Githubでコミットメッセージを修正したいとき

コミットメッセージやっぱり直したいな、ってときの為。

1.コマンドラインで、修正したいコミットを含むリポジトリに移動。
2.テキストエディタで、コミットメッセージを編集。
```git commit --amend```
3.コミットを保存。
４.古いコミットを強制的にプッシュ。
```git push --force example-branch```

(引用元：https://code.i-harness.com/ja/q/a3b3e4)
PHAssetCollectionSubtypeメモ

[以前書いた内容](https://qiita.com/MTattin/items/0f065e7174d1b8f069fc) が上手く動作しなくなっていたので調査。

前の記事では「hashValue」で抽出してたけど、「hashValue」が変わったようなので、今回は「rawValue」で抽出。


| localizedTitle | rawValue |
|:--------|---------:|
| パノラマ | 201 |
| ビデオ | 202 |
| お気に入り | 203 |
| タイムラプス | 204 |
| 非表示 | 205 |
| 最後に追加した項目 | 206 |
| バースト | 207 |
| スローモーション | 208 |
| カメラロール | 209 |
| セルフィー | 210 |
| スクリーンショット | 211 |
| ポートレート | 212 |
| Live Photos | 213 |
| アニメーション | 214 |
| 長時間露光 | 215 |
| 最近削除した項目 | 1000000201 |
C++ - auto&& vs auto& vs auto

C++ is difficult...T_T

* Choose auto x when you want to work with copies.
* Choose auto &x when you want to work with original items and may modify them.
* Choose auto const &x when you want to work with original items and will not modify them.
* Use auto && is a [Universal Reference](https://isocpp.org/blog/2012/11/universal-references-in-c11-scott-meyers).


https://stackoverflow.com/questions/29859796/c-auto-vs-auto
https://zhuanlan.zhihu.com/p/25148592


# 2018/11/06 Updated
I found this and explained very detail.
http://tommyjswu-blog.logdown.com/posts/1766009-c-11-mouth-cannon-universal-reference-rvalue-reference-and-move-semantics
micro:bitでWebUSBを使う


MakeCode for micro:bit ~~のベータ版~~で、WebUSBが使えるようになったので、試してみました。詳細はこちら。

https://support.microbit.org/support/solutions/articles/19000084059-beta-testing-web-usb

~~**この記事の内容確認は、全てMac上のGoogle Chromeで行いました。Windows 10環境で動作しない場合は、以下の情報を参考にしてください**~~

~~https://support.microbit.org/support/solutions/articles/19000089574-beta-testing-mbed-driver-doesn-t-work-with-windows~~

## DAPLinkバイナリのダウンロード

まず、micro:bitのDAPLinkファームウェアを最新版に更新します。WebUSBに対応したファームウェアバージョンは、v0249以降になります。

https://microbit.org/get-started/user-guide/firmware/

## DAPLinkファームウェアの書き込み

続いて、このDAPLinkファームウェアをmicro:bitに書き込みます。

* micro:bit 背面のリセットボタンを押しながら、USBケーブルでPCと接続する
* `MAINTENACE` という名前のドライブがマウントされるので、`0253_kl26z_microbit_0x8000.hex` ファイルをコピーする

書き込みが終わるとUSBドライブはアンマウントられ、再びマウントされます。```MICROBIT``` という名前のドライブがマウントされれば成功です。

## MakeCode for micro:bit から使ってみる

これで準備が出来たので、MakeCodeからWebUSBの機能を使ってみます。

* MakeCodeを開く
https://makecode.microbit.org/

* 設定（画面右上の歯車のアイコン）から、Pair deviceまたは「デバイスを接続する」を選択する

<img width="444" alt="スクリーンショット 2018-09-18 10.54.50.png" src="https://qiita-image-store.s3.amazonaws.com/0/75582/458cc151-0537-c6b3-78f5-9664aeb1ad68.png">

* 表示されたデバイスを選び、接続ボタンを押す

![select.png](https://qiita-image-store.s3.amazonaws.com/0/75582/1931fe12-39b6-b6cc-f079-4d4322b0ea85.png)

これでデバイスが設定されます。ダウンロードボタンを押すと、プログラムがファイルとしてダウンロードされるのではなく、デバイス側に直接書き込まれます。

**以上！！**

これだけだと、「デバイスに直接書き込めるので、ホストパソコン側にファイルが増えなくて便利」だけなのですが、WebUSBの機能を使ったNode.jsパッケージがArmから公開されています。

## DAP.js を使う

DAP.jsは、CMSIS-DAP のJavaScriptインタフェースです。CMSIS-DAPを通じてArmマイコンをNode.jsや、WebUSBを使ってブラウザから制御することが出来ます。詳細は、DAP.jsリポジトリの説明をご覧下さい。

https://github.com/ARMmbed/dapjs/

以下は、WebUSBが有効なDAPLinkファームウェアが載ったmicro:bitを繋いで、`examples/read-registers/` のサンプルコードを動作させた例です。

```
$ node webusb.js 
Select a device to read registers:
1: BBC micro:bit CMSIS-DAP
R0: 00000000
R1: 200021e4
R2: 00000000
R3: 00000000
R4: 00000018
R5: 20002ce4
R6: 200024d4
R7: 0002f10f
R8: 00000000
R9: 00000000
R10: 00000000
R11: 00000000
R12: 0002f299
R13: 20003fec
R14: 0002f2a7
R15: 0001a832
```

いかがでしょうか？Armマイコン（Cortex-M0）の汎用レジスタの内容が表示されています。
今までは、専用デバッガだったり、OpenOCD/pyOCDとGDB等のデバッグソフトウェアを組み合わせて使ったりしなければ、マイコンのデバッグ制御が出来ませんでした。WebUSBなDAPLinkファームウェアとDAP.jsの組み合わせで、一気に可能性が広がりそうです。
コアレジスタやメモリを操作するためのDAPにアクセスする機能は全て実装されているので、そのうちウェブブラウザ上でマイコンのデバッグが出来るようになるのかも知れませんね。
Assembly Definition で Editor スクリプトを設定する

#はじめに
AssemblyDefinition で Editor スクリプトを設定したときにうまくいかなかったので、その際の解決方法をメモ。

#やったこと
- まとめたいスクリプトの**Editor下 のフォルダ**にAssemblyDefnitionファイルを置く

```
OK HogehogePlugin/Editor/AssemblyDefinition.asmdef

NG HogehogePlugin/AssemblyDefinition.asmdef
   HogehogePlugin/Editor
```

- AssemblyDefinition ファイルの Platform を Editor にする
![キャプチャ.PNG](https://qiita-image-store.s3.amazonaws.com/0/46534/f6d2d70a-9a9e-0db7-b806-111c82e83e1a.png)
C++ - &= vs |= vs && vs ||

Great explain. Very clear.

First: a &= b; is not the same as a = a && b;. a &= b; means a = a & b;. In C/C++ there is no  a &&= b;.

Logical AND a && b is bit like a test for 1 bit. If the first "bit" is already 0, than the result will always be 0 no matter the second. So it is not necessary to evaluate b if the result is already clear from a. The C/C++ standard allows this optimization.

Bitwise AND a & b performs this test for all bits of a and b. So b needs to be evaluated if at least one bit in a would be non-zero. You could perhaps wish that if a==0, than b would not be evaluated, but this optimization is not allowed in C/C++.

https://stackoverflow.com/questions/23107162/do-the-and-operators-for-bool-short-circuit
Ubuntu Docker インストールとproxyとsudo無し実行

## Docker install
`$ curl -fsSL https://get.docker.com/ | sh`
コマンドを確認
`$ docker --version`
`$ docker version`

## proxyに対応させる
`docker`のオプション付けるディレクトリ作成
`$ sudo mkdir -p /etc/systemd/system/docker.service.d`
`$ cd /etc/systemd/system/docker.service.d/`

### 編集
http-proxy.confの作成
`$ sudo vi http-proxy.conf`

```
[Service]
Environment="HTTP_PROXY=http://[id]:[passwd]@[proxy.example]:[port]/"
```
https-proxy.confの作成
`$ sudo cp http-proxy.conf https-proxy.conf`
`$ sudo vi https-proxy.conf`

```
[Service]
Environment="HTTPS_PROXY=http://[id]:[passwd]@[proxy.example]:[port]/"
```
HTTP ▷ HTTPSにするだけ

### 反映
`$ sudo systemctl daemon-reload`
`$ sudo systemctl restart docker`

## sudo無しでDocker動かしたい

UbuntuでDockerの環境整えたのだが
sudo無いとコマンド実行できず

Macでは、sudo無しなのでうざったい。
そこでsudo無しでも行けるよってのは、公式にも書いてある。

### `docker`のグループ作成
`$ sudo groupadd docker`
これは、既に作成している。

### ユーザーを`docker`に追加
`$ sudo gpasswd -a $USER docker`
ここで設定は完了

しかしこのままでは、まだsudoが必要
再起動すればおそらく問題ないが面倒...

### shellを更新
`$ newgrp docker`
これで行ける。