OmniAICreator/Qiita-1.07M huggingface dataset:
2018年にお世話になった方に年賀状を作った話

# はじめに

普段学習した内容をQiitaに投稿する目的は **学習した内容の整理** だったり **私はこんな知識やスキルを持ってますよというアピール** だったり、 **自分のため** であることが多いと思う。自分のために学習することも素晴らしいことだが、 [機械学習の力で、おもてなしを量産する](https://qiita.com/icoxfog417/items/621f0fa1178c51124d03)という記事を読んで、 **たまには日頃お世話になっている方に感謝を伝えるために技術を使っても良いのでは？** と思ったのが本記事のきっかけ。

# 作ったもの

2018年お世話になったある方（以下「Aさん」と呼ぶ）に年賀状を作った。年賀状にした理由は上記記事を読んだのが年末で、ちょうど年賀状を作成する時期だったため。

- [年賀状](https://mizuhara.github.io/new-year-card/)

- [ソースコード](https://github.com/mizuhara/new-year-card)

使用技術はHTML5 + CSS3 + JavaScriptなので真新しいものはないが、Aさんに感謝を伝えることが目的なので気にしない。

**感謝を伝えたいなら心を込めて手書きで書いたら？** とツッコまれそうだが、SNS上での知り合いのため手書きの年賀状を郵送することはできない。まぁ手書きで作成した年賀状の写真を撮ってDMを送ることはできるけど。。。

# こだわった点

## 紙ではできないことをしたい

AさんとはSNS上での知り合いで紙の年賀状を郵送することができないため、計画当初からWebで作成、リンクをDMするという提供形態を考えていた。そのため紙の年賀状のような綺麗なデザインの年賀状を作ることより、動きのある年賀状を作るという案を採用した。まぁ綺麗なデザインを考えることを諦めたのは、デザイナーではない私に綺麗なデザインを考えるスキルはないというのも１つの理由ですが。

最初は [はしるねこ](https://qiita.com/ampersand/items/7180f657b3d0a0c05734#%E3%81%AF%E3%81%97%E3%82%8B%E3%81%AD%E3%81%93) のような感じで年賀状の上をイノシシが走るようなことをさせたかったが、残念ながら私にはイノシシをお絵描きするスキルが無かった。

一生懸命お絵描きするも上手くいかず、新年に間に合いそうにないのでイノシシはCSS3で描くことにして、尻尾を動かすのと、おみくじ機能をつけて運勢をイノシシの縞模様の代わりに表示する案に変更した。

## フォントとページ表示速度

年賀状のデザインを検討した際に色々な年賀状を見たが、タイトル部分（謹賀新年の文字）は毛筆フォントで描きたいなと思った。Webフォントを使えば簡単にできるが表示が遅いという問題もある。まぁ遅くなると言っても数秒くらいだからいいんじゃね？という気もしなくはないが、何となく気になるのと、見る側からすると早く表示される方が嬉しいので、下記2つの対策により高速化をした。

1. [CSSでwebフォントの読み込みが遅い問題を改善する方法](https://qiita.com/oreo/items/2e82bfeb42e351557c3c)
    - google fontsではあまり効果を実感できなかったとあるが、私が使用したフォントでも効果を実感することはできなかった。

2. [サブセットでWebフォントの軽量化](https://irec.jp/web-create/the-weight-of-the-font/)
    - 私の場合は「謹賀新年」の4文字のみをサブセット化した。
    - 早くなったと体感できるくらい効果があった。

無料で使える毛筆フォントは何種類かあるが、毛筆フォントの中でも丸みがあって柔らかく優しい印象の [青柳隷書しも](https://opentype.jp/aoyagireisho.htm) を使用した。

## おみくじ機能

[JavaScriptで配列をシャッフルする方法](https://qiita.com/komaji504/items/62a0f8ea43053e90555a) によると ```Array.prototype.sort()``` ではシャッフル結果に偏りが生じるらしいので、おみくじ機能は [Fisher–Yates](https://ja.wikipedia.org/wiki/%E3%83%95%E3%82%A3%E3%83%83%E3%82%B7%E3%83%A3%E3%83%BC%E2%80%93%E3%82%A4%E3%82%A7%E3%83%BC%E3%83%84%E3%81%AE%E3%82%B7%E3%83%A3%E3%83%83%E3%83%95%E3%83%AB) のアルゴリズムを使って実装した。```Array.prototype.sort()``` で実装しても、Aさんが「運勢が偏って出力される！」と感じることはないだろうから無駄な努力かもしれないが。

```javascript
function setMark() {
  var fortunes = ['大吉', '吉', '中吉', '小吉'];
  for (var i = fortunes.length - 1; 0 < i; i--) {
    var r = Math.floor(Math.random() * (i + 1));
    var tmp = fortunes[i];
    fortunes[i] = fortunes[r];
    fortunes[r] = tmp;
  }
  var mark = document.getElementsByClassName('mark')[0];
  mark.innerHTML = fortunes[0];
}
```

# まとめ

Aさんからは「小吉でしたw」「年賀状のイノシシの尻尾が動いていてかわいい♡♡」という感想を頂いた。色々妥協した部分はあったが、楽しんでもらえたようなので良かった。

一方Webで作成したためAさんの名前などを入れることができず、年賀状の文章も「あなたにとって〜」と、ちょっと他人行儀な感じになってしまったのは残念な感じがする。

[CSSで年賀状を作ろう！](https://qiita.com/takashimelon/items/77af922bd51a04b5dfd3) や [お前らの年賀状は古い](https://qiita.com/serinuntius/items/df24fbceffeb7c6f1942) のように、他にも年賀状を作成されている方がいます。もし **誰かをハッピーにするために技術を使いたい** と思っている方がいれば、バースデーカードでも来年の年賀状でも他の何かでも、挑戦してみてはいかがでしょうか。
プログラムと美しさ：第一章　その美の特徴　―きれいな画面の中身―

～ プログラミングって面白そうと思った方に向けた連載エッセイ ～

　先ほど画面の美しさとプログラムの美しさには直接の関連性はないと書いた。プログラミング経験のない方には理解しづらい点だろう。個別のトピックに触れる前に、この点について補足しつつ、プログラムにおける美しさの特徴について、簡単に整理しておきたい。

　ソフトウェア開発において、プログラミングと画面デザインは分業されることが多い。設計者やデザイナが図やプロトタイプ（模型）に表したものを、プログラマがプログラムに組み込んでいくのである。画面の美しさは、基本的には元のデザインによって決まる。表示するためのプログラム構造が汚いからといって画面が汚くなるわけではない。どんな組み込み方をしようと、プログラマに目的を達成する意思と時間があれば、デザインの美しさを画面に再現することは概ね可能である。

　規模の小さいソフトウェアや、画面デザインの優先度が比較的低い業務ソフトウェアでは、プログラマがデザイナを兼ねることも少なくない。しかし、プログラミングとデザインは基本的に別の根を持つスキルである。優れたプログラマが優れたデザインセンスを持っているとは限らない。バランスの悪い配色やメリハリに欠けた配置のせいで、中身のプログラムも同じだろうと類推され、ソフトウェア全体の品質が低く評価されてしまうことがあるのは、何とももったいない話である。

　画面はユーザーに直接触れるもので、その美しさは操作性とあわせて評価される。デザインの本来的な役割は強調、関連といった意味づけであろうから、意図を明解に伝えられたとき、それを美しいというのかもしれない。

　画面デザインとプログラムはソフトウェアの価値としては一体のものであるが、美しさの基準や効用にはかなりの違いがある。両者を一緒くたに扱うと論の輪郭が不明瞭になるおそれがあるため、ここではプログラムの美しさに画面デザインの美しさは含めないことにして、以降の文を進めさせていただく。

　プログラムの美しさは、ソフトウェアの外観には表れない。「美しいプログラムでできています」と訴えても人々の心に響くことは期待できないので、セールスポイントに挙がることもまずないだろう。ユーザーに及ぼす影響は、実は小さくないのだが、あくまで間接的なものである。

　では、プログラムにおいて美は、いったいどこに存在するのだろうか。

　プログラムの美には目的がある。目的とは、品質、生産性の向上である。この実利に資する美であるという点が、そのありかを探す鍵となる。

　プログラマにとってプログラムは、コンピュータを動かす手段というだけでなく、ほかのプログラマ（未来の自分を含む）とのコミュニケーション手段でもある。美しいプログラムは簡潔・明瞭である。その意図がスムーズに伝達されるため、作業のロスが少ない。無駄なく整理されているため、変更や拡張も容易である。

　プログラムにおいて「美しい」は「正しい」という意味も含んでいる。想定漏れだらけで許されるならいかほどでも短く書けるだろうが、それを美しいとは言わない。どれだけきれいに整頓されたソースコードでも、品評会に出したいくらい均整のとれたアーキテクチャでも、処理効率が悪ければ全体として美しくはない。逆も然りで、バランスが大事なのである。

　以下、このような目的にも触れながら、プログラムに存在する美について具体的に見ていきたい。

---

[序章](https://qiita.com/CodeOne/items/01b4e49a7d5a84d48c71)
第一章　その美の特徴
[第二章　見た目と冗長性](https://qiita.com/CodeOne/items/96df6d1140301347156a)
[第三章　ロジック](https://qiita.com/CodeOne/items/3009027a2f8b892e2b6b)
[第四章　命名](https://qiita.com/CodeOne/items/dfc3ace22c46273dc22c)
[第五章　アーキテクチャ](https://qiita.com/CodeOne/items/469b9f421e5d914f1ffb)
[第六章　リファクタリング](https://qiita.com/CodeOne/items/df50fad6bb0bd2f0096f)
[第七章　デザインパターン](https://qiita.com/CodeOne/items/0ac628d6be24328ecc10)
[第八章　正規化](https://qiita.com/CodeOne/items/5df2a5e38cc4c1c90a7a)
[終章](https://qiita.com/CodeOne/items/12ad8d54329bc946b85c)
Python3で現在時のスタンプを作成する方法

ファイル名に実行時刻を付与したいときによく使うのでメモとして書いておきます。

参考にしたのはsamuraさんの記事。-> https://www.sejuku.net/blog/23606

以下では日時のスタンプを付与してます。

```python:timestamp.py
# Import
import datetime

# Create Time Stamp using zero fill
date = datetime.datetime.now()
time_stamp = '%04d%02d%02d' % (date.year, date.month ,date.day)
print(time_stamp)
```


利用例

```python:create_file.py
f = open('sample%s.txt' % time_stamp ,'w')
f.write( str(time_stamp) + '\n')
f.close()
```

年から秒まで以下の方法で取得可能
https://www.sejuku.net/blog/23606

```python:samples
print("年：",date.year) 
print("月：",date.month)
print("日：",date.day) 
print("時：",date.hour)
print("分：",date.minute)
print("秒：",date.second)
```
浮動小数点数について

# 浮動小数点数
コンピュータの世界では2進数しか扱えないため、10進数の小数を2進数に変換すると循環小数になります。
例えば0.1という10進数を2進数に変換すると、
0.000110011001100.....となり無限に続きます。

>【循環小数とは】
>ある桁から先で同じ数字の列が無限に繰り返される小数


Rubyで小数の計算をすると以下のようになります。

```
> 0.1 + 0.2
=> 0.30000000000000004

> 1.2 - 1.0
=> 0.19999999999999996
```

そのため金額計算などに使用してはいけません。
Unity

## 位置について

Transformの値を拾うには

```c#
transform.position
transform.rotation
transform.lossyScale
transform.localScale
```

## キー入力
キー入力にはInputクラスを使用します。
https://docs.unity3d.com/ja/current/ScriptReference/Input.html

`KeyCode.`で候補が出てきます。
定義はenumでされているようです。

<img width="475" alt="スクリーンショット 2019-01-03 17.43.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/201127/b1a08b3f-e0ab-0a1d-5465-d2dc597794a7.png">


```c#
// スペースキーを押した時にhogehogeを出力する
// GetKeyは識別されたキーを押している間、trueを返します
Input.GetKey(KeyCode.space){
  Debug.Log("hogehoge");
}
```

上下左右

```c#
// 左右のキー入力
Input.GetAxis("Horizontal");
// 上下のキー入力
Input.GetAxis("Vertical");
```
atcoder ABC113 D問題

今回はビット全探索とdpを組み合わせた問題でありとても難しかった。
https://atcoder.jp/contests/abc113/tasks/abc113_d

#方針
あみだくじをもとに、好きに横棒を配置し、指定した位置にくるようにできる横棒の配置の組み合わせを数え上げる問題である。あみだくじの性質上、横棒は水平なので、ある高さをhとし、左からw列目について考えると、h-1から(h,w)にくるのは、3通り
(1) 高さh-1でw列とw-1列が繋がっている時
![図1.png](https://qiita-image-store.s3.amazonaws.com/0/263740/c195215c-c535-9376-4cc3-908e025258f9.png)
(2) 高さh-1でw列とw+1列が繋がっている時
![図2.png](https://qiita-image-store.s3.amazonaws.com/0/263740/340fbd81-c126-e66b-cdb3-781af85fb6d7.png)

(3)  (1)(2)以外(真上から降りてくる時)
![図3.png](https://qiita-image-store.s3.amazonaws.com/0/263740/babb9ef2-8c02-1d77-8d7f-57d7cd00753f.png)

つまり、それぞれの高さについて横棒の置き方を全列挙して、(1)~(3)の場合分けをしてdpを更新していくことで、目的の高さH、K列目の総数を求めることができる。ここで問題となるのが、横棒の全列挙の仕方であるがここではビット全探索を用いる。

#ビット全探索とは
ビット演算を用いて、横棒を表すものである。根本的な考え方としては、ビット演算は二進数で考えるので、01を左に1ビットする(1に2をかける)と10(2)となる。つまり,0001の1を横棒で表そうということである。ここで、

```java
for(int i = 0;i < (1 << W-1);i++){

}
```
のようにすると、0001,0010,0011,0100,0101,.....のようにw番目まで全通り二進数で表せる。つまり横棒の組み合わせを全列挙できる。ここで、問題文をみると、横が繋がるのは禁止されている。図で見ると以下の感じ。![図5.png](https://qiita-image-store.s3.amazonaws.com/0/263740/9b662887-ddc6-5228-1757-28b58e687a8b.png)
なので、このような配置は取り除かなければならない。ここで、横棒を二進数の1で表したことを考え、横でつながっているのを11で表せば良いと気づく。なので、ある配置(例えば01010)に対し、(00011,00110,01100,11000)のように11を左から右へスライドしていき、ビット論理積(&)を取り、11をスライドしたものと同じになるかどうかで、横棒が繋がっているか判定できる。
例えばある配置が(10011)の時、00011と論理積を取ると

```java:例
System.out.print(11 & 3)   // 10011 & 00011 
```
  
```java:結果
3                         //00011
``` 
となる。


引用、参考
http://lovedvoraklayout.hatenablog.com/entry/bit-full-searchhttp://kaworu.jpn.org/kaworu/2008-04-10-2.php
macOSのC++で秒速並列化！

WindowsのVisual Studioだと設定に`<OpenMPSupport>true</OpenMPSupport>`を加えて、並列化したいところに`#pragma omp parallel for`を貼るだけでよしなにやってくれる
macOSでもよしなにしてほしい！しかも短時間で！

ということで時間がない人のための並列化を残す

# やること
環境はMBP2016 15inch macOS10.13.4

コンパイラはこんなところ

```bash:g++
Configured with: --prefix=/Applications/Xcode.app/Contents/Developer/usr --with-gxx-include-dir=/usr/include/c++/4.2.1
Apple LLVM version 9.1.0 (clang-902.0.39.2)
Target: x86_64-apple-darwin17.5.0
Thread model: posix
```

まずは必要なものを`brew`でインストール

```bash:libompインストール
$ brew install CLIUtils/apple/libomp
```

これでインストールは終わり、インストールに際して適宜必要なものは入れてほしい

次はテストプログラムを書く

```c++:test.cpp
#include <omp.h>
#include <stdio.h>
int main() {
    #pragma omp parallel
    printf("Hello from thread %d, nthreads %d\n", omp_get_thread_num(), omp_get_num_threads());
}
```

最後にコンパイルして実行

```bash:コンパイルして実行
$ g++ -Xpreprocessor -fopenmp -I$(brew --prefix libomp)/include $(brew --prefix libomp)/lib/libomp.dylib test.cpp
$ ./a.out
Hello from thread 0, nthreads 8
Hello from thread 3, nthreads 8
Hello from thread 2, nthreads 8
Hello from thread 4, nthreads 8
Hello from thread 6, nthreads 8
Hello from thread 7, nthreads 8
Hello from thread 1, nthreads 8
Hello from thread 5, nthreads 8
$
```

はい、ちゃんと動いてそう
ここまで、10分もかからない

あとは、並列化したいforの前に、`#pragma omp parallel for`だの`#pragma omp parallel for schedule(dynamic, 1) num_threads(NUM_THREAD)`だの書いて(詳しくは調べて)、

このオプション

```
-Xpreprocessor -fopenmp -I$(brew --prefix libomp)/include $(brew --prefix libomp)/lib/libomp.dylib
```

を足してコンパイルでおしまい。

# 参考
https://github.com/CLIUtils/homebrew-apple
https://stackoverflow.com/questions/47081991/is-c-compilable-with-openmp-and-boost-on-macos/47225639#47225639
https://gist.github.com/fyears/59e67cf0f521bc199235
https://qiita.com/kaityo256/items/ae9329dae24ea8828ae0
DeepCreamPyを使ってみた

#概要
ざっくりいうと、画像を変換するプログラムです
指定した箇所を補完します

#使い方
1. 本体ダウンロード  
https://github.com/deeppomf/DeepCreamPy
からclone
2. モデルファイルのダウンロード  
\DeepCreamPy-master\models
に入っている"download and unzip model here!"というリンク先のファイルを同じフォルダに保存します
3. inputフォルダに画像を設置  
保存フォルダはdecensor_inputです  
png形式で保存しないと変換してくれません
背景白、カラーのアニメ画像が最も変換しやすいようです  
特に苦手な物は、以下二点です  
・背景が人物の色に近い  
・スクリーントーン  
4. 画像を加工  
rgb(0,255,0)で変換したい部分を塗り潰します  
細かく指定したくなりますが、できるだけざっくり指定した方がうまくいきます  
直線的な形状にしましょう。複雑な形は失敗しやすいです。  
変換に要する時間はGPU（GTX1070）だと10秒かかりません。  
CPUはもう少し掛かりそうですね
5. 画像を確認  
未来を感じる事ができると思います
AWSで日本語版Windows Server AMIがどうしても見つからない時の対処法

#苦闘の背景
AWSでWindows ServerのEC2を構築する時、日本語に対応したAMIを探すと思います。「クイックスタート」では英語版のAMIが選ばれてしまうため、起動してRDPしたときに『これ日本語じゃないじゃん』となり、Terminateして、もう一度作り直すという経験をされた方は多いのではないでしょうか。

日本語版 Windows AMIを探す手順ですが、EC2を作成するウィザード画面で「コミュニティAMI」を選び、次に『Windows Server 2012 R2 Japanese』などと、日本語版であることを特定するキーワードを入れて検索し、その中で『Provided by Amazon』が書かれたEC2を選びます。この手順で日本語版 Windows AMIが見つかるはずですし、今まで私もこの手順で探して見つけてきたと記憶しているのですが、最近、まさかまさかですが、この手順で詰まって悪戦苦闘する機会がありました。

この記事は、日本語版 Windows AMIが見つからず、なんで？ どうして? と考え、試行錯誤した時の備忘録となります。
#急に日本語版 Windows AMIが見つからなくなった？
気づいたきっかけは、プロジェクトのメンバーが**『日本語版が見つからない』**と声を上げ、悪戦苦闘していたことです。どれどれ、物は試しに・・・と、いつもやっている手順で日本語版 Windows AMIを探してみると、確かに見つかりません。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/211986/fd43ddba-e7c3-7187-ee63-a5a1c1e7785d.png)

**画像を見て分かるように、出てくるのは英語版のWindows AMIばかりです。**

検索結果をページングしても見つかる気配はありません。検索結果は20,545件ですから、もしかしたら下の方にあるのかもしれませんが、探す気が起きません。フィルターもしてみましたが、やはり見つかりません。たかがAMIを探すという作業でこれほど苦闘するとは思いませんでした。苦闘しながら、ふと**『日本語版Windows AMIは提供されなくなったのか？』『これからどうすればいいんだ?』『わざわざ英語版を日本語化するのか?』『もしかして、英語なんて出来て当たり前だって煽られてるのか?』**などという考えがよぎりました。

#ちょっとした工夫で日本語版 Windows AMIが見つかった
30分ほど悩み、検索結果が細かすぎるのではないか？ 思い、検索ワード(フィルター)を緩くしてみることにしました。
検索ワードを**『Japanese』だけ**にしてみます。すると・・・
![image.png](https://qiita-image-store.s3.amazonaws.com/0/211986/319dc4b8-fb08-e991-9383-569969fbcd04.png)

**あっさり見つかりました。**

どうやら『Windows』と入れるのがいけないようです。スペースを開けて『Windows』を追加すると、見つからなくなります。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/211986/9bb03e67-f033-1624-0493-31fdd356f7a8.png)
#結論:日本語版 Windows AMIを探す時は 『Japanese』 Only
**余計な検索ワードは入れない。黙って『Japanese』だけを入れてEnter!**

Windowsの日本語版だから『Windows Japanese』などと検索ワードを入れたくなるところですが、このように入れても見つかりません。正確には、以前は見つかったはずなので、今は見つからなくなった、というのが正しいような気がするのですが・・・。

思わぬところでの大苦戦でしたが、無事に日本語版 Windows AMIを探し当てることが出来ました。
MacPortsのautoconfでインストールができなかった

MacPortsのautoconfでインストールができなかった
===

具体的なエラーは以下の通り

```
$ sudo port install autoconf
--->  Computing dependencies for autoconf
--->  Fetching archive for autoconf
--->  Attempting to fetch autoconf-2.69_5.darwin_17.noarch.tbz2 from http://kmq.jp.packages.macports.org/autoconf
--->  Attempting to fetch autoconf-2.69_5.darwin_17.noarch.tbz2.rmd160 from http://kmq.jp.packages.macports.org/autoconf
Warning: Failed to verify signature for archive!
Error: Failed to archivefetch autoconf: version @2.69_5
Error: See /opt/local/var/macports/logs/_opt_local_var_macports_sources_rsync.macports.org_macports_release_tarballs_ports_devel_autoconf/autoconf/main.log for details.
Error: Follow https://guide.macports.org/#project.tickets to report a bug.
Error: Processing of port autoconf failed
```

シェルの環境変数をリロードしたら解決した。

```
$ source ~/.bashrc
```
プログラムと美しさ：序章　―動けばいいのか？―

～ プログラミングって面白そうと思った方に向けた連載エッセイ ～

　コンピュータは優れた計算能力を持っているが、言われなければ何もしない。コンピュータを動かすための命令を記述したものをプログラムという。それを組む作業がプログラミング、組む人がプログラマである。Windows や Excel、iPhone アプリといったソフトウェアは、どれもプログラムでできている。

　プログラマは、人間とコンピュータの橋渡しとなるプログラミング言語を使って命令を記述する。世の中にはいくつものプログラミング言語があるが、簡単な英単語で構成されるのが一般的である。記述された命令から成るテキストは「ソースコード」、あるいは単に「コード」と呼ばれる。ソースコードはコンピュータが理解できる言葉に翻訳され、実行に移される。翻訳を行うのはコンパイラやインタープリタと呼ばれる特殊なプログラムである。

　プログラムには、「こう動きなさい」「次にこうしなさい」「こういうときはこうしなさい」といったことが綿々と綴られている。「そうなったとき」のケースをあらかじめ洗い出し、どうするかを決めて書いておくのである。

　プログラムを渡されたコンピュータは、盲目的な従順さでそれを実行に移す。余計な気を利かせることは一切ない。「雨天中止」とそこに書いていなければ、嵐でも運動会は決行される。想定外の動きをしたら、それは不具合である。あるいは単に想定漏れという。「どうするか」には、ユーザーに判断を求めたり、データベースから過去の成功事例を参照することも含まれる。学習・推論を行うプログラムも今では一般的だが、究極的な仕組みは変わらない。結果は状況に応じた非決定的なものであっても、それを導き出すロジック自体は、あらかじめ与えられたとおりの決定的なものである。

　硬い。融通が利かない。面白みがない。

　コンピュータやプログラムがそうであるならば、それを相手にするプログラマも思考に柔軟性を欠く人が多いのではないか。感情よりも論理を優先する傾向が強そうだ。プログラミングの現場というのはきっと、数値化できるメリットのないものは容赦なく無駄と切り捨てる、ゴリゴリの実利至上主義社会なのだろう。

　そう推測する方も少なからずおられると思う。

　しかしそのプログラミングの現場で、しばしば「美しい」という言葉が違和感なく発せられ、最上級の褒め言葉として歓迎されるのはどういうわけだろう。

　美的要素など邪魔にしかならないのではないか。

　念のために添えておくと、ここで取り上げる「美しい」は、ソフトウェアを動かしたときに表示される画面の美しさのことではない。プログラムの美しさと画面の美しさに直接の関連性はないと言ってよい。見た目は美しいけれど中身はぐちゃぐちゃ、というケースは決して珍しくない。

　プログラムとは、第一義的にはコンピュータに指示を与えるものである。そして、指示を受けるコンピュータは美しさを解さない。どんなに汚いプログラムだろうと、命令が正確に記述されてさえいれば正しく動作する。だが、プログラムには別の側面もある。

　プログラムを読むのはコンピュータだけではない。人間も読むのだ。人間とは他人であり、ときに未来の自分である。作成中にも読み返すし、リリース後も調査の必要があれば読む。不具合があれば修正するし、機能追加があれば再利用が検討される。書かれたプログラムは、人間によって繰り返し見られ、変更され、利用される運命にある。

　ここに美しさの意義が生まれてくる。

　実際、プログラミングにおいて美しさは、邪魔などころか価値がある。それどころか重要である。品質を確保するには不可欠でさえある、とされている。

　プログラムにとって美とは、少なくとも縁遠い存在ではないのである。もちろんプログラミングは芸術ではない。技術である。その「美」は絵画や音楽における「美」とは性質も基準も異なるものだろう。しかし「アート」の語源は技術であるというから、その語源に却って技術に宿る美しさに目を向けてみるのも、あながち無駄とは言えまい。

　人間的行為の代表格である美術とは一見対極にあるコンピュータ・プログラムの世界。そんなところにも「美」が存在し、広く価値を認められている。美術について門外漢の私が美について語るのはおこがましいことではあるが、その点はご寛容をいただき、あまり表に出ることのないプログラムの世界を、ちょっと覗いてみるつもりで気軽に楽しんでもらえれば幸いである。なお、読み進めるにあたってプログラムの知識は必要ない。例として挙げるのは普通の日本語である。

---

序章
[第一章　その美の特徴](https://qiita.com/CodeOne/items/1969ec81d04529fbdb34)
[第二章　見た目と冗長性](https://qiita.com/CodeOne/items/96df6d1140301347156a)
[第三章　ロジック](https://qiita.com/CodeOne/items/3009027a2f8b892e2b6b)
[第四章　命名](https://qiita.com/CodeOne/items/dfc3ace22c46273dc22c)
[第五章　アーキテクチャ](https://qiita.com/CodeOne/items/469b9f421e5d914f1ffb)
[第六章　リファクタリング](https://qiita.com/CodeOne/items/df50fad6bb0bd2f0096f)
[第七章　デザインパターン](https://qiita.com/CodeOne/items/0ac628d6be24328ecc10)
[第八章　正規化](https://qiita.com/CodeOne/items/5df2a5e38cc4c1c90a7a)
[終章](https://qiita.com/CodeOne/items/12ad8d54329bc946b85c)
webpack-config-utilsを使ってwebpack.config.jsを整理する

# 背景

webpackの設定をproduction, development等に分けて管理したい場合、[webpackのガイド](https://webpack.js.org/guides/production/)にはwebpack.common.js, webpack.prod.js, webpack.dev.jsに分ける方法が書かれている。この方法では、常に編集対象以外のファイルの記述内容も意識する必要があり、管理も煩雑になりやすい。
そこで、webpack-config-utilsを導入して、一つのwebpack.config.jsにproductionとdevelopmentの両モードを定義をする。

# 概要
* webpack-config-utilsによって、webpack.config.js内で`ifProduction`や`ifDevelopment`等によるモード毎の値の切り替えが可能になる
* モード定義の違いから発生する配列要素数による問題は`removeEmpty`によって回避する
* production/developmentは`NODE_ENV`で切り替える
    * 例: `$ NODE_ENV=production node run build`

* webpackのconfigの基礎については参考URLを参照ください。
   

# インストール
npmでlocalにインストール

```
$ npm install --save-dev webpack-config-utils
```
# webpack.config.jsでの定義

webpack-config-utilsで定義されている`ifProduction`, `ifDevelopment`等のAPIを使って、モード毎の定義を記述する

### webpack.config.jsのサンプル

```javascript:webpack.config.js
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { getIfUtils, removeEmpty } = require('webpack-config-utils')
const path = require('path')

const { ifProduction, ifDevelopment } = getIfUtils(process.env.NODE_ENV)

module.exports = {
  mode: ifProduction('production', 'development'),　// NODE_ENV=productionの時は'production'、それ以外では'development'が返る
  entry: './src/index.js',
  plugins: removeEmpty([ // 配列要素数による問題を回避（この例では不要）
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
      title: ifProduction('Production', 'Development')　// productionとそれ以外でtitleを切り替える
    }),
    ifDevelopment(new webpack.HotModuleReplacementPlugin())// developmentモードでは、HMRを有効にする
  ])
}
```

# package.jsonでの定義
`$ npm run`から呼び出すスクリプトに、NODE_ENVを指定する。

### サンプル

```json:package.json
  "scripts": {
    "start": "NODE_ENV=development webpack-dev-server",
    "build": "NODE_ENV=production webpack --config webpack.config.js"
  },
```

# 実行

上記のサンプルでは、`$ npm run start`でdevelopmentモードでDevServerの起動、`$ npm run build`でproductionモードでビルドが実行される。

```
$ npm run start

> package-name@1.0.0 start /path/to/project
> NODE_ENV=development webpack-dev-server
...
```
```
$ npm run build

> package-name@1.0.0 build:prod /path/to/project
> NODE_ENV=production webpack --config webpack.config.js
...
```

# 参考URL
* [webpack Getting Started: Using a Configuration](https://webpack.js.org/guides/getting-started/#using-a-configuration)
* [webpack-config-utils - npm](https://www.npmjs.com/package/webpack-config-utils)
* [The Fine Art of the Webpack Config](https://blog.flennik.com/the-fine-art-of-the-webpack-2-config-dc4d19d7f172)
* [One webpack config to rule them all — environments that is](https://medium.com/@ryandrewjohnson/one-webpack-config-to-rule-them-all-environments-that-is-277457769779)
SDLアプリコンテスト 一日目、二日目、三日目

#概要

SDLアプリコンテスト、見つけたので挑戦してみる。

#androidのビルドを調査

android api 26か、28の様だ。

#自分の環境でビルドできるか、テスト。

windows 7 で、ADT持ってる。バージョンは、v22.6.2
JDK８入れて、api26入れたら、動かなくなった。
捨てる。

#vistaに、古いandroid studio入れる。

android-studio-bundle-135.1245622-windows　入れた。
api17にして、無理やりsdl_androidをビルド。
ダイヤモンド関数エラー
アノテーションライブラリーエラー
com.livio.BSON無し
等等で、ビルド出来ず。
捨てる。

#ラズベリーパイで、sdl_coreをビルド

cmakeで、libusbが見つからない。
includeとlibの配置が違う。
捨てる。

#sdl_coreビルドのため

ubuntu minimalCDを焼く。

#windows　７に、最新ANDROID　STUDIO入れる。

インストール出来たけど、エミュレータが起動しない。
メモリ不足と見た。
amazonに発注。

#リンク

SDLアプリコンテスト
http://sdl-contest.com/
ASCII
http://ascii.jp/elem/000/001/803/1803743/
http://ascii.jp/elem/000/001/768/1768875/
qiita
https://qiita.com/matterd/items/76e237ce25748917d74a
https://qiita.com/masaya3/items/ac49a630f1d7cd2eb22f
https://qiita.com/masaya3/items/8e68ed3007f8e7b01409
本家
https://www.smartdevicelink.com/en/guides/android/getting-started/installation/
manticore
https://smartdevicelink.com/resources/manticore/

news
https://av.watch.impress.co.jp/docs/news/1156770.html

pdf
https://d83tozu1c8tt6.cloudfront.net/media/builds/pdf/android-documentation-guides-english-b11a5561.pdf
http://events17.linuxfoundation.org/sites/events/files/slides/SDL%20and%20Linux%20integration.pdf
https://developer.ford.com/uploads/1-Doug-VanDagens-Keynote-compressed.pdf
https://developer.ford.com/uploads/2-Keynote_VanDagens.pdf
https://abc.android-group.jp/2018a/wp-content/uploads/sites/12/2018/11/SDL_ABC.pdf

リポジトリ
https://github.com/smartdevicelink/sdl_android
https://github.com/tanaka3?tab=repositories
tizen
https://wiki.tizen.org/IVI/Step_by_step_constructing_your_build_environment_for_Tizen_IVI_-_%E3%83%93%E3%83%AB%E3%83%89%E7%92%B0%E5%A2%83%E6%A7%8B%E7%AF%89%E6%89%8B%E9%A0%86
brison
https://www.brison-inc.jp/development_verification.html
youtube
https://www.youtube.com/watch?v=oElQa2c1gII
https://www.youtube.com/watch?v=yysd7XZPUF4
https://www.youtube.com/watch?v=QetftbCmG5g
https://www.youtube.com/watch?v=zww7ujv6-LE

以上。
【SAPUI5】OData(3) ODataのQuery optionsを使ってみる

##Query optionsとは
[第一回目](https://qiita.com/tami/items/411a226d1ea6bb25b5f1)の記事で、ODataはURIという識別子でアクセスすること、URIの形式は以下のようになっていることを説明しました。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/276021/5df0d2db-5ca9-0c23-15b0-ae8bdb45c2e4.png)
[OData Version 4.0 Part 2: URL ConventionsInformation published on non-SAP site](http://docs.oasis-open.org/odata/odata/v4.0/errata03/os/complete/part2-url-conventions/odata-v4.0-errata03-os-part2-url-conventions-complete.html#_Toc453752335)より引用

Query optionsは、リソースに対して追加で条件を指定して結果を絞り込んだり、必要な項目だけ取得したりするために使います。

※OData関連の投稿一覧は以下の記事をご参照ください。
[【SAPUI5】OData(1) ODataとは](https://qiita.com/tami/items/411a226d1ea6bb25b5f1)

##Query optionsの種類
以下にQuery optionの種類と使用例を掲載します。
ブラウザに使用例をコピーして貼り付けると、結果が確認できます。

|Query options|用途 |使用例    |備考    |
|:------------|:----|:--------|:-------|
|$filter|$filterの後に指定する条件で結果を絞り込む|https://services.odata.org/TripPinRESTierService/People?$filter=FirstName eq 'Scott'  |条件の指定方法は様々ある。詳しくは[リファレンス](http://docs.oasis-open.org/odata/odata/v4.0/errata03/os/complete/part2-url-conventions/odata-v4.0-errata03-os-part2-url-conventions-complete.html#_Toc453752358)を参考  |
|$expand|Navigation propertyで関連づけられたEntity Setを一緒に返す               |https://services.odata.org/TripPinRESTierService/People('keithpinckney')?$expand=Trips  |左の例ではPeopleのEntity Setと、関連するTripsのEntity Setが返ってくる  |
|$select|$selectの後に指定するプロパティのみ取得する|https://services.odata.org/TripPinRESTierService/Airports?$select=Name, IcaoCode  |  |
|$orderby        |結果を指定した並び順でソートする|https://services.odata.org/TripPinRESTierService/(S(ufwrs1ttr010p5olpjnjh3z1))/People?$orderby=FirstName desc  |降順に並べるときはdescを指定する  |
|$top|指定した個数のデータを取得する|https://services.odata.org/TripPinRESTierService/People?$top=2 |左の例では先頭2件の結果が返される  |
|$skip|指定した個数のデータを結果から除外する|https://services.odata.org/TripPinRESTierService/People?$skip=18|結果を見ると、先頭から除外しているわけではなさそう  |
|$count|条件に一致したデータの件数を返す|https://services.odata.org/TripPinRESTierService/People/$count  |  |
|$search      |フリーテキストの検索条件を指定し、条件に一致した結果を返す               |https://services.odata.org/TripPinRESTierService/(S(swdsvztrhy0xegmpily2f1xd))/People?$search=Boise  |何をもって一致とするかは、ODataサービス側の実装による  |
|$format|受け取るデータ形式を指定する（xml, jsonなど）|https://services.odata.org/TripPinRESTierService/(S(swdsvztrhy0xegmpily2f1xd))/People?$format=json  |  |


##参考
[OData Version 4.0. Part 2: URL Conventions Plus Errata 03](http://docs.oasis-open.org/odata/odata/v4.0/errata03/os/complete/part2-url-conventions/odata-v4.0-errata03-os-part2-url-conventions-complete.html#_Toc453752359)
[Reference Services · OData - the Best Way to REST](https://www.odata.org/odata-services/)

##関連記事
[OData(2) ODataを構成するもの](https://qiita.com/tami/items/4853415fdc826158618d)
[OData(4) SAPでのODataサービスの作り方 環境編](https://qiita.com/tami/items/a87a6f67be928c78e4e8)
viコマンド（vim）をインストールする方法

docker＋ubuntuという環境で開発していたら、viコマンドが使えなかった。

```
root@a8dafc8c2920:/home/ubuntu/# vi hoge.json
bash: vi: command not found
```

そもそもvi（vim)が入っていないらしい。。。
ということで以下のコマンドでvimをインストールをすると使えるようになる。

```
apt-get update
apt-get install vim
```

これで無事にvim使えるようになった。
TypeScriptで関数宣言の実処理部分に()と{}を使う時の違い

# 結論

`()` を使う場合は `return` を書かなくてよくなる。

# Playgroundで確認

## ()を使う場合

### TypeScript

```typescript
const func1 = (arg: string): string => (
    arg + 'a'
)
```

### Javascript

```javascript
var func1 = function (arg) { return (arg + 'a'); };
```

`return` を書いていなくても、実処理部分で評価された式の結果を返している。
そのため、これは構文エラーになる。

```typescript
// Expression expected.
const func1 = (arg: string): string => (
    return arg + 'a'
)
```

また、複数文に渡る処理も書くことができない。

```typescript
// Type '(: any, ret?: string) => any' is not assignable to type 'string'.
const func1 = (arg: string): string => (
    const ret = arg + 'a';
    ret + '1';
)
```

## {}を使う場合

```typescript
const func2 = (arg: string): string => {
    return arg + 'b';
}
```

```javascript
var func2 = function (arg) {
    return arg + 'b';
};
```

returnは自分でつける必要があるため、下の書き方は戻り値の方が合わずエラーとなる。

```typescript
// A function whose declared type is neither 'void' nor 'any' must return a value.
var func2 = function (arg) {
    arg + 'b';
};
```
アドバタイズドショートカットを通常のショートカットに変更する

#やりたいこと
Visual Studio 2015 Installer Projects で作成したインストーラにて、アドバタイズドショートカットを通常のショートカットに変更する。

#手順
1. 以下の内容のvbsを作成する。

	```vb
	Option Explicit
	
	Const msiOpenDatabaseModeTransact = 1
	
	Dim msiPath : msiPath = Wscript.Arguments(0)
	
	Dim installer
	Set installer = Wscript.CreateObject("WindowsInstaller.Installer")
	Dim database
	Set database = installer.OpenDatabase(msiPath, msiOpenDatabaseModeTransact)
	
	Dim query
	    query = "INSERT INTO Property(Property, Value) VALUES('DISABLEADVTSHORTCUTS', '1')"
	Dim view
	Set view = database.OpenView(query)
	view.Execute
	database.Commit
	```

2. ソリューションエクスプローラでインストーラのプロジェクトを選択し、**F4を押す**。（右クリックのプロパティではだめ。）
3. プロジェクトのプロパティが開くので、`PostBuildEvent`に以下のコードを入力する。

	`"<vbsのパス>" "$(BuiltOuputPath)"`
Twythonを使ったTwitterのメンションの判定

#作るもの
Twitterで特定のアカウントの最新のツイートを取得し、そのツイートがメンションだった場合にアクションをする
今回のアクションはツイート
#準備
ターミナルで
```$ sudo pip install twython
```
でtwythonをインストールしてください
#コード
```python
#!/usr/bin/env python 
# coding: utf-8 
from twython import Twython,TwythonError 
import datetime
import time
#twitterの認証情報を入力 
CONSUMER_KEY = "XXXXXXXXXXXXXXXXXXXXXXX"
CONSUMER_SECRET = 'XXXXXXXXXXXXXXXXXXXXXXX' 
ACCESS_KEY = 'XXXXXXXXXXXXXXXXXXXXXXX' 
ACCESS_SECRET = 'XXXXXXXXXXXXXXXXXXXXXXX' 
api = Twython(CONSUMER_KEY,CONSUMER_SECRET,ACCESS_KEY,ACCESS_SECRET) 
print('Auth Done!')

#日時取得
now = datetime.datetime.now()
print(now)
tw_text = ('First value')
print(tw_text)

try:
    user_timeline = api.get_user_timeline(screen_name='ここに取得したいアカウントID',count=1)
except TwythonError as e:
    print('error')
    print (e)

while True:
    #重複処理
    print(tw_text)
    for tweet in user_timeline:
        print(tweet['text'])
        print("From now on, checking duplication")
        #TL取得更新
        try:
            user_timeline = api.get_user_timeline(screen_name='ここに取得したいアカウントID',count=1)
            print("GET TL")
        except TwythonError as error:
            print('error')
            print (error)
        if tw_text != tweet['text'] :
            print(tw_text)
            print(tweet['text'])
            print('This is new tweet')
             #TL取得更新
            try:
                user_timeline = api.get_user_timeline(screen_name='ここに取得したいアカウントID',count=1)
                print("GET TL")
            except TwythonError as error:
                print('error')
                print (error)
            for tweet in user_timeline:
                print("tw_textに代入")
                target = '誰か特定の相手に対するメンションが判定したい場合はここにその相手のID'
                fb = 0
                fd = tweet['text'].find("@" + target)
                print('find' + str(fd))
                if fd == -1:
                    print('This tweet is not order')
                if fd != -1:
                    print('This tweet is order')
                    try:
                        now = datetime.datetime.now()
                        api.update_status(status='ここにツイートさせたい内容' + str(now))
                        print('Have tweeted')
                    except TwythonError as e:
                        print('ERROR')
                        print (e)
                tw_text = tweet['text']
        else :
            print("I have seen")
    print('4')
    print(tw_text)
    print(tweet['text'])
    print("==========================================================")
    time.sleep(10)
```
#解説
TwitterAPIの入力のところはXXXXXXXXXXXXXXXXXXXXXXXってしてるのでご自分の入力してください
fd = tweet['text'].find("@" + target)のfind以降のカッコの中身が取得したツイートの中に含まれているか検索する
ここに特定の人へのメンションを判定したかったらIDを入れればOK！
RTを除外したかったらそのカッコ内にRTを入れてRTか判定するif文組めばOK！
あと重複処理ってところでは新しいツイートかをチェックします
同じツイートだった場合はアクションを起こしません
同じツイートはできないのでnowで今の時間を取得して、ツイートに含ませています
time.sleeo()のなかの数字は秒数でこの場合10秒ごとにTLこのプログラムをループします
#今後の展望的なやつ
絶起警視庁bot（@Step_Z_to_B）ってのがあってこういう風に絶起に反応するだけだったらfindのところに絶起ってするだけでいいのでそのうち自動化した絶起警察のコードを書いてみたいと思います
あと僕はよく絶起するので待ち合わせとかでよく遅刻します
申し訳ないので何時までにツイートしなかったら起床してないと判断して先に謝罪ツイートする機能を作っていきたいと思います
プログラムの追加と削除に表示されるアイコンを指定する

#やりたいこと
Visual Studio 2015 Installer Projects で作成したインストーラにて、プログラムの追加と削除に表示されるアイコンを指定する。

#手順
1. ソリューションエクスプローラでインストーラのプロジェクトを選択し、**F4を押す**。（右クリックのプロパティではだめ。）
2. プロジェクトのプロパティが開くので、`AddRemoveProgramsIcon`に使用したいアイコンファイルを選択する。すると、インストーラプロジェクト配下にアイコンファイルが追加される。
3. ソリューションエクスプローラで追加されたアイコンファイルを選択し、F4を押す。（これは、右クリックのプロパティでもOK。）
4. アイコンファイルのプロパティが開くので、`Exclude`を`True`に変更する。これをしないとアイコンファイルがアプリケーションフォルダに出力されてしまう。

#問題点
アイコンファイルのプロパティの`SourcePath`を見ると絶対パスになっている。
gasとChatWorkで出退勤の打刻を促す

今の会社ではクラウド勤怠を導入しているのだが、PCやスマホから打刻するため忘れることがちょこちょこあった。
出勤時間5分前と退勤時間にChatWorkで通知するようにしてみた。

```
var kintaiUrl = "[hr]クラウド勤怠システムのURL";
var msgMorning = "[toall]\nもうすぐ始業時間だよ、打刻を忘れないようにしてね! \n" + kintaiUrl;
var msgEvening = "[toall]\n終業時間だよ、打刻を忘れないようにしてね! \n" + kintaiUrl ;

// トリガーを始業時間5分前にセット
function setTrigger() {
    var triggerDay = new Date();
    var hours = triggerDay.getHours();

　　// if文の条件はgasのデフォルトトリガーを7時〜8時、16時〜17時の間で設定しているため。いらない気もするが一応、、、
    if (hours == 7) { 
        triggerDay.setHours(8);
        triggerDay.setMinutes(55);
      
        // triggerDayに設定した時間で新しいトリガーを作成
        ScriptApp.newTrigger("dakokusite").timeBased().at(triggerDay).create();
    
    } else if (hours == 16) {
        triggerDay.setHours(18);
        triggerDay.setMinutes(00);  
        ScriptApp.newTrigger("dakokusite").timeBased().at(triggerDay).create();
    }
}

// その日のトリガーを削除する
function deleteTrigger() {
  var triggers = ScriptApp.getProjectTriggers();
  for(var i = 0; i < triggers.length; i++) {
    if (triggers[i].getHandlerFunction() == "dakokusite") {
      ScriptApp.deleteTrigger(triggers[i]);
    }
  }
}

function dakokusite() {
  deleteTrigger();

  var client = ChatWorkClient.factory({token: "APIトークン"});
  var today = new Date();
  var hours = today.getHours();
  
  // 祝日判定用
  var calendarId = "ja.japanese#holiday@group.v.calendar.google.com";
  var calendar = CalendarApp.getCalendarById(calendarId);
  var todayEvents = calendar.getEventsForDay(today);
  
  if (hours == 8 && todayEvents.length == 0) {
    client.sendMessage({
      room_id: チャットワークのルームID,
      body: msgMorning}); 
  } else if (hours == 18 && todayEvents.length == 0) {
    client.sendMessage({
      room_id: チャットワークのルームID,
      body: msgEvening}); 
  } 
}
```

gasのトリガーは細かい時間指定ができないが、setTrigger関数のよう実装すれば細かく指定できる。ただ、新しいトリガーを生成しているので、deleteTriggerで生成したトリガーを削除してあげないとどんどん増えていくので注意が必要。
[ Swift ] UIColor の色を増やす[ extension クラスを用いて拡張する](初心者向け) 光の三原色（RGB）の割合を使う。

# [Swift]　光の三原色(RGB)の割合を用いてUIColor に独自の色を追加する
- 何故16進数でやらないのか？<br> 元々、私自身
[こちらの記事](https://qiita.com/senseiswift/items/11ad4da513181781b3af)でUiColor の拡張をしようとしてみたのですが、今の**SwiftにはUIColorにrgbColorの拡張子**がないみたいです。
また、16進数よりも**中学生くらいの時に習った光の三原色を使用したほうが皆さんにわかりやすいかなと思いました！** 
<br> 
 
***
###準備
UIColor に独自の色を付け加えていくので、色を反映するのとは別にextension File をお作りください。

***
## サンプルコード(etension側)
```swift:Etension.swift
import UIKit

extension UIColor{
    // オリジナルのカラーを生成します。割合については下の方の参考の部分でURLを載せておきます！
    //オレンジ
    class func OrangeColor()->UIColor{
        let Black = UIColor.init(red: 1.0, green: 0.6, blue: 0, alpha: 1.0)
        return Black
    }
    //ミドリ
    class func GreenColor()->UIColor{
        let Black = UIColor.init(red: 0.0, green: 1.0, blue: 0.6, alpha: 1.0)
        return Black
    }
    //ピンク
    class func PinkColor()->UIColor{
        let Black = UIColor.init(red: 1.0, green: 0.6, blue: 1.0, alpha: 1.0)
        return Black
    }
}


```
***
##サンプルコード（使用側）
```swift:ViewController
    //雑で申し訳ないですが簡単に使い方だけ
    //extension で拡張したclass  が使用できるようになります！
    //万一出なかった場合は下の方を試してみてください！
    UILabel.textColor = UIColor.PurpleColor()

```
***
## もし上手くいかなかった場合。
理由はよくわかりませんですが、私もたまにUIColor にうまく拡張できていない場合がありました。
そうい言うときは下記のようにワンクッション置くとうまく行ったのでお試しください<br>

```swift:Extension
import UIKit


class ColorComPonent:UIColor{
   //ワンクッションの作業
     
}
// ワンクッション置いたためUIColor ではなく　ColorComPonent の拡張子を広げてあげる
extension ColorComPonent{
    // オリジナル
    
    class func OrangeColor()->UIColor{
        let Black = UIColor.init(red: 1.0, green: 0.6, blue: 0, alpha: 1.0)
        return Black
    }
    class func GreenColor()->UIColor{
        let Black = UIColor.init(red: 0.0, green: 1.0, blue: 0.6, alpha: 1.0)
        return Black
    }
    class func PinkColor()->UIColor{
        let Black = UIColor.init(red: 1.0, green: 0.6, blue: 1.0, alpha: 1.0)
        return Black
    }
 
}
```

** この場合だと使用する側のコードも変わります**

```swift:ViewController
    //UIColor ではなく　ColorComPonent を使う
   UILabel.textColor = ColorComPonent.GreenColor()
```

***
#終わりに
いかがだったでしょうか？
うまくいきましたか？何かへんなところ、もっとこうした方が良いところなどがございましたらコメントお願いします！！！！
ありがとうございました！
#参考
[光の三原色の割合について](http://blog.livedoor.jp/healthlifeuuu-sakusei2/archives/1039808942.html)
bash で 関数 || echo ng とかすると set -e が無効になる話

びっくりしたのでメモ。

bash スクリプトで `set -e` と関数と `||` を組み合わせると、関数内では `set -e` が無効になります。嘘のようですが本当です。

例えば以下のスクリプトは `end f` が出力されず `start`, `start f`, `ng`, `end` が出力されそうに見えます。
が、実際には `ng` が出力されず `end f` が出力されます。

```bash
set -e

f() {
  echo "start f"
  false
  echo "end f"
}

echo "start"
f || echo "ng"
echo "end"
```

結果:

```
start
start f
end f
end
```

なかなかに不可解です。

## どうすればよいのか
`f` を関数ではなく別コマンドとするか、`set -e` に頼らず真面目にエラー処理をするのがよいと思います。

## それらしい回答

https://ja.stackoverflow.com/questions/27866/関数と-e-オプションを併用すると意図通りに動作しないのはなぜ

> 質問の例ですとfalseは関数中では単独で呼び出されていますが、その関数を呼び出しているのは&&を含んだコマンド列ですので、
> 
> > && または || によるコマンドのリストの一部
> 
> という事になるのだと思います。

https://lists.gnu.org/archive/html/bug-bash/2012-12/msg00094.html

> Indeed, the correct behavior mandated by POSIX (namely, that 'set -e' is completely ignored for the duration of the entire body of f(), because f was invoked in a context that ignores 'set -e') is not intuitive.  But it is standardized, so we have to live with it.

僕らはPOSIXと共に生きなければいけないのです。不可解でも納得しましょう。
npm コマンドで Angular CLI のインストール、バージョンアップする方法（まとめ）

## 概要
Node.js をインストールすると一緒にインストールされる（はず）の npm コマンドを使って、Angular および Angular CLI をインストールしたりバージョンを上げたりするときの備忘録。

Angular CLI 無くても、package.json とか用意して手動でパッケージのバージョン指定しながらベースとなるソースコードは作れるけど、そこまでするよっぽどの理由がない限りは、Angular CLI でベースプロジェクト作成したりした方が圧倒的に楽なので、手動はオススメしない。
なので、Angular CLI を使用する前提のお話です。

### 前提
以下の環境になっている前提です。

- Node.js： 10.15.0
- npm： 6.4.1

## コマンド一覧

### 現在の Angular, Angular CLI のバージョンを確認

すでに Angular CLI が入っている場合は、以下のコマンドで確認可能。
`@angular` 系のパッケージバージョンが目的のバージョン (今回だと 7.x.x) になっていればOK.

```bash
# バージョン確認コマンド
$ ng --version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 7.0.6
Node: 10.15.0
OS: darwin x64
Angular: 
... 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.10.6
@angular-devkit/core         7.0.6
@angular-devkit/schematics   7.0.6
@schematics/angular          7.0.6
@schematics/update           0.10.6
rxjs                         6.3.3
typescript                   3.1.6
```

### Angular CLI 新規インストール（まだ入れたことがない場合）

以下のコマンドで Angular CLI をグローバルインストール

```bash
# グローバルインストール（場合によっては 先頭に "sudo" が必要）
npm install -g @angular/cli
```

### Angular CLI アップグレード（バージョンが古い場合）

今のバージョンを一旦アンインストールしてから、もう一回インストール

```bash
# 消す
npm uninstall -g @angular/cli

# チェック
npm cache verify

# 安定版の最新を再インストール
npm install -g @angular/cli
```

### Angular 本体のアップグレード（Angular CLI のバージョンアップはしたけど、既存 Angular 本体のバージョンが古い場合）

Angular で作ったアプリが存在する（package.json が存在する）場合のみ、実行可能なコマンド。（ソースコードがない空のプロジェクトでは実行不可）

```bash:package.jsonが存在するディレクトリで実行
# ng update パッケージ名
ng update @angular/core
```

基本的にはパッケージそのまま指定すれば良い。（`@angular/material` とか）
ブラウザのFlashを無効にする

2019年1月2日（日本時間の3日）にScratch3.0がリリースされて「これでFlashが要らなくなった」という方も多いと思います（かなり偏ってるかもしれません）。

以前はFlashはプラグインのひとつでしたが、現在はブラウザの機能としてブラウザの設定に組み込まれていて、オフにする方法がわかりにくくなっているので、各ブラウザごとにオフにする方法をまとめてみました（Macでしか確認できていないので、IEとかedgeが含まれていませんが、近いうちに追加します）。

## Chrome
1.右上のメニューから「設定」を選びます。
<img width="359" alt="スクリーンショット 2019-01-03 16.20.55.png" src="https://qiita-image-store.s3.amazonaws.com/0/78056/724ab3d8-4cc3-b96e-24a9-14f3eced6eb0.png">
2. 設定画面のタブが表示されるので、一番下の「詳細設定」をクリックして表示される設定項目から「コンテンツの設定」を選びます。<img width="709" alt="スクリーンショット 2019-01-03 16.21.20.png" src="https://qiita-image-store.s3.amazonaws.com/0/78056/2a81f838-9d67-0e93-b3d2-164707eea5a7.png">
3. 「Flash」という項目がありますので、これをクリックします。<img width="698" alt="スクリーンショット 2019-01-03 16.21.42.png" src="https://qiita-image-store.s3.amazonaws.com/0/78056/6035de29-2286-80c0-4580-6a83d733b01a.png">
4. 「サイトでのFlashの実行をブロックする」になるように設定のスイッチを変更します。<img width="717" alt="スクリーンショット 2019-01-03 16.21.50.png" src="https://qiita-image-store.s3.amazonaws.com/0/78056/0f536a33-0936-41ff-e1e5-1563fac4f34e.png">
5. Chromeを再起動すると、Flashが無効になります。

## Firefox
1. 右上のメニューから「アドオン」を選びます。  
<img width="290" alt="Screen Shot 2019-01-03 at 16.09.05.png" src="https://qiita-image-store.s3.amazonaws.com/0/78056/82c33f5f-3246-133c-938d-063857c1ef9e.png">
2. 「アドオンマネージャー」というタブが表示されますので、「Shockwave Flash」の右側のメニューで「無効化する」を選ぶとFlashがオフになります。
<img width="696" alt="Screen Shot 2019-01-03 at 16.09.28.png" src="https://qiita-image-store.s3.amazonaws.com/0/78056/cc62fd0c-c5c7-e47f-b1a1-1c79269cc67a.png">

## Safari
1. Safariの設定画面から「Webサイト」を選択します。<img width="942" alt="スクリーンショット 2019-01-03 16.40.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/78056/6b8b7517-79e0-1a42-3d61-db3613424f73.png">
2. 左側のメニューの中に「Adobe Flash Player」という項目がありますので、このチェックボックスをオフにすると無効になります。

## その他のブラウザ
確認できしだい、随時追加します。
循環小数 2/7の1 ~ 6桁目までを算出する

# 循環小数 2/ 7について
* 2 / 7　は、 0.28571428571...

ですので、

* １桁目 → 2
* 2桁目 → 8
* 3桁目 → 5
* 4桁目 → 7
* 5桁目 → 1
* 6桁目 → 4

となります。

今回は、これを一つずつ算出しようと思います。

```typescript

const decimal = 2 / 7
```
まず、2/7を定義

```typescript

const multiplied = decimal * Math.pow(10, i)
```

これをi桁目分べき乗します

```typescript
const integer = Math.floor(multiplied)
```
小数点以下を切り下げます。

```typescript
integer = String(integer);
```
stringにします。（次の動作をするため）

```typescript
const lastDigit = integer.slice(-1)
```
文字列の下一桁目を出力します。

```typescript
var exportNum = Number(lastDigit);
```
求値です。


## 全体のコード
```typescript
for (let i = 1; i < 7; i++) {
    const decimal = 2 / 7
    const multiplied = decimal * Math.pow(10, i)
    const integer = Math.floor(multiplied)
          integer = String(integer)
    const lastDigit = string.slice(-1)
    const exportNum = Number(lastDigit)
    alert(`小数点${i}桁目 : ${ exportNum }`)
}
```

# 最後に
最後まで見ていただき、ありがとうございました。
obnizの機能のみでプログラム間の情報交換を実現する方法

##はじめに
obnizのプログラム間の情報交換はDropboxなどの外部サービスで実現できるが、**排他フラグなどのような少量情報の交換を、とにかくサクッと実施したい**という場合に便利な方法を紹介します。**obnizの機能のみで実現**できます。

##■概要
**outputピンのtrue/falseの2値を共有情報として利用します。**
**output(true/false)**でピンXの**状態を設定**し、**resetOnDisconnect(false)**でプログラムが終了しても**状態を保持**するようにし、他のプログラムでは**adX.getWait()**でピンXの**電圧を取得しtrue/falseを判断**します。obnizは12ピンありますので、最大12Bitの情報交換ができま。

##■共有情報の書込方法
**・ピンXにtrueを設定する場合  → obniz.ioX.output(true)**
**・ピンXにfalseを設定する場合 → obniz.ioX.output(false)**

##■共有情報の参照方法
**・ピンXの電圧を取得する　→ vol=await obniz.adX.getWait()**
**・電圧からかtrue/falseを判断する → true≒5、false≒0　(微変動します)**
例えばvol=3v当たりを閾値にしtrue/falseを判断するとよいでしょう。

##■ピンの状態を保持させる方法
**・obniz.resetOnDisconnect(false)**
通常はobniz.close()が呼ばれた場合やプログラムが終了する際にピンの状態がリセットされてしまいますが、この処理を無効化してリセットされないようにします。この設定は、書き込み側と読み込み側のプログラムの**両者で必ず設定**する必要があります。
尚、この設定をした場合は**他のピンの状態も保持**されることになりますので、例えばLEDの消灯をプログラムの終了に依存している場合などは、明示的にOFFにするなどの対策が必要になるかもしれません。**既存部分の再点検**をお勧めします。

##■サンプルプログラムのデモ動画
スマホから設定したio1ピンの状態が、別プログラムのWeb画面で正しく参照されている事がわかると思います。確認用にピン1にLEDを接続してあり、trueで点灯します。

[サンプルプログラムのデモ動画]
https://youtu.be/RrCH5wTUnRw

以上
読みごたえのある .NET 技術書

# .NET Framework
## [Essential .NET ― 共通言語ランタイムの本質](https://www.amazon.co.jp/dp/4891003685)
Don Box, Chris Sells 著

.NET の仕組みについて突っ込んだ解説がされています。
2001年頃、.NET 1.0 を対象に書かれた本ですが、今も変わらないコアな技術の話で構成されています。

# プラクティス
## [.NETのクラスライブラリ設計 改訂新版](https://www.amazon.co.jp/dp/4296080040)
Krzysztof Cwalina, Jeremy Barton, Brad Abrams 著

「良い設計のフレームワーク」を作成するためのガイドライン、プラクティス、アンチパターンをまとめたものです。
個々のガイドラインに対し、Jeffrey Richer, Chris Anderson, Chris Sells ら多数の寄稿者による注釈が付記されています。
重点が少し異なるところもありますが、基本的にはアプリケーション開発者にとっても役立つ汎用的な内容です。
Visual Studio のコード分析機能（参考：[弊社コード標準化支援](https://codeone.jp/Services/Rules.aspx)）に実装されているものも多くあります。

## [Adaptive Code ~ C#実践開発手法 第2版](https://www.amazon.co.jp/dp/4822253546)
Gary McLean Hall 著

「アジャイル開発のフレームワーク」「アダプティブコードの基礎」「SOLIDコード」「アダプティブコードの適用」の四部構成で、「適応力のあるコード」を目指す本です。
オブジェクト指向設計の SOLID 原則について書かれた部分は、アジャイルに関係なくお勧めです。
デザインパターンや .NET の言語サポートと絡め、各原則の実用的な意義がサンプルコード付きでわかりやすく解説されています。

# WPF
## [エッセンシャル WPF](https://www.amazon.co.jp/dp/4798114200)
Chris Anderson 著

WPFチームのチーフアーキテクトがWPFの基本概念について解説したものです。
WPFの心がわかります（WPFが目指したことの理解に役立ちます）。

## [プログラミング Windows 第6版 上](https://www.amazon.co.jp/dp/482229496X)
Charles Petzold 著

副題に「C#とXAMLによるWindowsストアアプリ開発」とあるとおり、ストアアプリを対象としていますが、多くの部分はWPFにも（一部読み替えて）適用できます。（参考：[プログラミング Windows 第6版 WPF編](https://blogs.msdn.microsoft.com/shozoa/2014/07/23/windows-6-1-wpf/)）
そこそこの分量（720ページ）があって章立ても網羅的なことから、辞書的に使おうとお考えになるかもしれませんが、通読に向いています。
MVVM についても一章割かれています。

# ASP.NET MVC
## [プログラミング Microsoft ASP.NET MVC](https://www.amazon.co.jp/dp/4822298388)
Dino Esposito 著

APIの解説から具体的な実装手法、アーキテクチャまで。
ユニットテストにも一章割かれています。

# Entity Framework
## [Programming Entity Framework](https://www.amazon.co.jp/dp/0596807260)
Julia Lerman 著

英語でかなりの分量がありますが、日本語の本がない現状では、頑張って読む価値があります。
あまり知られていないソリューションがコード付きで紹介されていたりするので、興味のあるトピックを拾い読みするだけでも役に立つと思います。

ただし、最終第2版が2010年の刊行（CodeFirst / DbContext が導入されたEF4.1は第3刷でようやく触れる程度）と、結構年数が経っています。
新しい機能は他書や技術サイトで補ってください。

# 非同期処理
## [C#によるマルチコアのための非同期/並列処理プログラミング](https://www.amazon.co.jp/dp/4774158283)
山本 康彦 著

.NET 1.x から .NET 4.5 までの非同期処理技術の進化を、豊富なサンプルコードとともにわかりやすく解説しています。

ThreadPool ～
　APM (Asynchronous Programming Model) ～
　　EAP (Event-based Asynchronous Pattern) ～
　　　TAP (Task-based Asynchronous Pattern) ～
　　　　async/await

# ユニットテスト
## [The Art of Unit Testing: with examples in C#](https://www.amazon.co.jp/dp/1617290890)
Roy Osherove 著

依存性の切り離し方、モックライブラリの使い方から、テストクラスのパターン／アンチパターンまで。
「モックとスタブの違いは？」といったトピックもあります。

# 番外編
## [ADO 集中講座](https://www.amazon.co.jp/dp/4798101303)
Rob Macdonald 著

ADO.NET ではなく、ADO の本です。
（出番はかなり少なくなりましたが、VBA や古いアプリケーションの保守など、まだまだ活躍する機会はあるでしょう）
Redordset の高速な操作、階層化... ADO を使い尽くすことができます。

## [標準 FindBugs 完全解説](https://www.amazon.co.jp/dp/4756146554)
宇野るいも, arton 著

Java 用のバグ発見（静的解析）ツールのルール解説書です。
各ルールについて、なぜそれが潜在的なバグなのか、丁寧に説明されており、.NET プログラマにも得るところがあります。
よいプラクティスの生まれる一つの源になるかもしれません。
誰よりもバグが嫌いな方にお勧めです。

## [オフショア開発に失敗する本―中国オフショアのリスク管理](https://www.amazon.co.jp/dp/4883732673)
幸地 司 著

文化、常識の異なる人たちと一つの物を作り上げるときの心構えが学べます。
事例も教科書的でなく現場に即したもので、発注側／受注側双方の立場、気持ちの理解に役立ちます。
2008年刊行のため、業界の動向に関する記載に古い点もありますが、オフショア開発はもちろんのこと、国内のアウトソーシングや国際交流一般にも応用できる内容です。
CentOS7でNFSサーバを作る

# はじめに

NFSサーバを公開する方法を残しておく。

# 構成

```
server
os:centos7
 |
client
os:centos7
```

# NFSサーバを作る

serverで行う。

```bash
yum provides '*/nfs-server.service'
  # --> nfs-utils
yum install nfs-utils -y
systemctl start nfs-server
systemctl enable nfs-server
mkdir /nfsshare
touch /nfsshare/a.txt
echo '/nfsshare client(rw)' | tee -a /etc/exports
exportfs -r
firewall-cmd --permanent --add-service=nfs
firewall-cmd --reload --add-service=nfs
```

# NFSマウントできることを確認する

client で行う。

```bash
yum provides '*/nfs.service'
yum install nfs-utils
systemctl start nfs
systemctl enable nfs
mount -t nfs server:/nfsshare /mnt
ls -al /mnt
touch /mnt/b.txt
umount /mnt
```
Pycharm内でjupyter notebookを動かす方法

:::note warn
このドキュメントは2019年に執筆されており、最新の情報とは異なる可能性があります。
:::

# はじめに
諸々面倒くさいことをしないでもpycharm上でjupyter notebookを実行し完結できることを知ったので書いておきます。

対象としてはTerminalでjupyter notebookを起動しBrowserでjupyter notebookを使用しているが、pycharm上で開いた.ipynbをpycharm上で実行したい方向けです。

とりあえずnotebookを起動する方法だけ記述しましたが、interpreter周りを後日もう少し詳しく追記したいと思います。

**pycharm上のinterpriterを設定する**方法と(token)を設定する方法をご用意しております


## pycharm上でpython interpreterの設定をする
pycharmはプロジェクトごとにpython interpreterを設定できます。
今までjupyter notebookを動かす際に使用してきたpythonをpychrm上で使用するpythonに指定することにより、moduleや設定を引き継ぎつつpycharm上で動かすことができます。

まずはpycharmでプロジェクトのディレクトリを開き、`⌘,`で設定を変更します。
interpreterの項目を開きます。
ここでmodule一覧が表示されます。この一覧にjupyter等現在使用しているmoduleが表示されたら使用しているpythonをpycharmが見ているので問題ないのですが、
表示されない場合手動で設定して上げる必要があります。

### interpreterを手動で設定する
右上の⚙から`add...`を選択し、現在使用しているinterpreterを選択します。
現在使用しているinterpreterはpythonで`import sys;print(sys.prefix)`を実行してあげればわかります。
ターミナルで`python`を実行し対話モードを開き、

```python
import sys;print(sys.prefix)
```
と入力することで教えてくれます。[参考](https://www.haya-programming.com/entry/2018/08/30/015737)

pycharmへ戻り、
<img width="905" alt="Screenshot_2019-01-02 15.47.57_Z0QuRX.png" src="https://qiita-image-store.s3.amazonaws.com/0/270408/b2661e27-6927-6ded-8952-250875d6c19a.png">
赤い囲いから先程探したパスを入力することで設定することができます。





## 実際にpycharm上でjupyter notebookを実行する
左上(画像参照)のEdit Configurationを選択し、
<img width="588" alt="Screenshot_2019-01-02 15.03.51_LMGSpB.png" src="https://qiita-image-store.s3.amazonaws.com/0/270408/d6096030-85a6-b827-3a34-8a5d8918ef3e.png">

開いたウィンドウの右上`+`ボタンからJupyter notebookを選択します。
Portを適当に設定して、`Python interpreter`の項目を今までjupyter notebookを実行していたinterpreterに設定します。
<img width="1071" alt="Screenshot_2019-01-02 15.09.19_dgWMiJ.png" src="https://qiita-image-store.s3.amazonaws.com/0/270408/e819abed-5c40-fc3f-b396-c753885ceb1b.png">

OKで閉じ、右上の緑色をした▶ボタンから実行するとpycharm上で開いたipynbファイルを実行することができます。

以上です。

---
ちなみにMarkdownで参考文献を引用する時などのUrl操作はこれが楽でオススメですよ
[MarkdownでUrl引用するときにちょっと簡単にするハック【小ネタ】 - Qiita](https://qiita.com/2357gi/items/155a03080ef2cf2936f4)
同一 LAN 内で firebase serve している onCall 関数を呼び出す

手元のPCで開発用に動かしている Firebase HTTPS Callable Function を React Native なんかで動かしてる開発機から呼びたかったときのやつ。onCall 関数というのは、クライアントから直接叩ける Cloud Functions の関数で、プロトコルとしては `Content-Type: JSON` の HTTP POST です。

- https.onCall のプロトコルの仕様 Firebase https://firebase.google.com/docs/functions/callable-reference?hl=ja

#### 前提条件
- Cloud Functions を動かすサーバーとアクセスするクライアントが同じLAN内にある（≠ 同じ端末）
  - 同じ端末内で両方動かす場合はローカルIPを指定せずに localhost と書けばよい

```js:cloud-functions
import * as functions from 'firebase-functions'

export const echo = functions
  .region('asia-northeast1')
  .https.onCall(async (data, context) => {

  return { data }
})
```
onCall Function を書く、ここのコードでは東京リージョンを指定している

```sh
$ firebase serve --only functions -o 0.0.0.0
```

`-o 0.0.0.0` で Bind Address にワイルドカードを指定して、Cloud Functions を手元で起動する

```sh
$ ipconfig getifaddr en0
10.0.1.2
```

Cloud Functions を起動したIPアドレスを確認する（en0でないかもしれない）

```js:client-app
import firebase from 'firebase'
import 'firebase/functions'

const app = firebase.initializeApp({...})
app.functions().useFunctionsEmulator(`http://10.0.1.2:5000`)

firebase
  .functions()
  .httpsCallable('echo')()
  .then(response => {
    console.log(response)
  })
```

`app.functions().useFunctionsEmulator(url: string)` に先程のIPアドレスとポートを指定した http の URL をセットする。ポートはデフォルトで `5000` になっているはず。
SoftMax（ソフトマックス）関数とは？文系の人にもわかりやすく

この記事ではソフトマックス関数について、レベルを分けてできる限り分かりやすく説明していきます。

Wikipediaによると（https://en.wikipedia.org/wiki/Softmax_function）
「ソフトマックス関数は、非正規化されたベクターを取って、それを確率分布に正規化するもの」らしいです。

え？　　これではよくわかりませんね。順を追って説明しましょう。

##とりあえず、何が言いたいの##

ざっくり言えば、<b>ソフトマックス関数とは、出力されたごちゃごちゃした数字を和が綺麗に100%(1.0)になる数字に変えてくれる関数</b>です。

画像を見て猫と犬かを当てるプログラムがあるとしましょう。

隠れ層を通過して無事、画像が猫か犬かの確率を表す数字が出力されたとします。

そこでソフトマックス関数が無いと、犬が2.0、猫が1.5などとプログラムは出力してしまいます。2.0と1.5では和が3.5です。これは全体の350%中、犬である確率が200%、猫である確率が150%と言っているのと同じことです。これでは分かりにくいですよね。

ソフトマックス関数があると、犬が0.62、猫が0.38などとプログラムは出力してくれます。これはソフトマックス関数が値を調整してくれるからです。どのように調整するかというと、犬と猫の和が1.0(100%)になるようにしてくれます。この例で言えば、犬は0.62、猫は0.38で、和が1.0になるようにソフトマックス関数は調整してくれます。これだと全体の100%中、犬である確率が62%、猫である確率が38%となり、とても分かりやすいですね。

まとめると<b>ソフトマックス関数は、出力されたごちゃごちゃした数字を綺麗に、全体の確率が100%(1.0)になるように調整してくれる関数です</b>。

出力されたごちゃごちゃした数字（犬:2.0 猫:1.5）　→　和が1になる見やすい数字に(犬:0.62 猫:0.38)

言い換えて説明すると、
出力されたごちゃごちゃした確率（犬:200% 猫:150%) →　和が100%になる見やすい確率に(犬:62% 猫:38%)

##少し深く##
では具体的にどのように調整しているのでしょうか。

ソフトマックス関数は、式にするとこうなります。

![softmax (1) (1).png](https://qiita-image-store.s3.amazonaws.com/0/335630/c1a221c2-b9a1-4e3a-401d-dcd710525a79.png)


では先ほどの例で計算してみましょう。

ソフト関数前の出力数は、犬が2.0、猫が1.5でした。これをソフトマックス関数に通すと

犬: S(2.0) = e^2  / (e^2+e^1.5) = 0.622459
猫: S(1.5) = e^1.5/ (e^2+e^1.5) = 0.377541

0.622459+0.377541=1.0(100%)となりました。これで犬である確率が約62%、猫である確率が38%に無事変換されました。

この式ではSをソフトマックス関数、yを出力された数字としています。また分母にあるΣ（シグマ）は全ての出力された数字の和を表しています。

なぜ62%+38%=100%は、200%+150%=350%と同じことを述べていると断定できるのでしょうか。それは2.0と1.5に同じ数を掛けたり割ったりしているからです。この例ではe^xで掛けて、(e^2+e^1.5)で割っています。よって式を通す前と通した後は同じ割合なのです。