OmniAICreator/Qiita-1.07M huggingface dataset:
Google Inbox にインスパイアされた ユーザーアイコンを色分けするプログラム

![image.png](https://qiita-image-store.s3.amazonaws.com/0/129854/c5662de4-4de5-05d7-8899-4b033044554e.png)

# なにがしたい？

![image.png](https://qiita-image-store.s3.amazonaws.com/0/129854/4abbd092-5936-581d-f09d-5ba28ef1ba50.png)

Google Inbox って、メールアドレスの（ドメインかユーザー名の）頭文字によって色分けしてくれるんですよね。これが「だれからきたのか？」「同じ人からどれだけ来ているのか？」「前にいつ来たのか？」ということが、ひとめでわかる。コレ欲しい！


# はいどうぞー

なんでも良いので文字列を与えると、それに基づいてパレットから1色返してくれる君をつくりました。なるべく28色をまんべんなく使いたいのでハッシュしてるのがポイントと言えばポイントですが、コード自体は特別なことは何もして無くて、超カンタンです。

超カンタンだけど、イチから作ると **いい感じのカラーパレットを用意** したり、ハッシュは何をどうしようかと考えるのがめんどくさいかなーと。コピペできるコードを貼り付けておいたら便利に使ってもらえるかなーというのがこの記事の趣旨です。


```php
function getIdColor( $str )
{
    $colors = [
        '#c31a15', '#c84318', '#ec6d20', '#fe8a27',
        '#9aca28', '#c8b654', '#c79b38', '#ca7620',
        '#86b042', '#53a527', '#67981b', '#13864b',
        '#21aa66', '#66b393', '#1897a6', '#70b3b9',
        '#3cb7e3', '#1a9acb', '#1993e8', '#1789cf',
        '#8266ca', '#754cb2', '#6568c9', '#1b57b7',
        '#a969ca', '#983bca', '#c35d7e', '#e42664',        
    ];
    $count = count( $colors );
    
    return $colors[ crc32($str) % $count ];
}
```

# 適用例

![image.png](https://qiita-image-store.s3.amazonaws.com/0/129854/8db360a5-a0d8-ddea-958c-b58b5240c4a6.png)

右側が適用したものです。名前にモザイクしていますが、誰の発言かわかりますよね。

# 余談

デザインの要素にはいろいろありますが、人間が物体を認識する順序＝デザイン要素の重要度は、

1. 色
2. カタチ
3. 質感

だと思っています。色が人に与えるイメージは意外なほど固定的だし、なにより**色の認識スピードは異常に速い**。なにかを区別してほしかったら、色分けするのが一番効果的。それを突き詰めたのが近年のフラットデザインかなーと解釈していて、個人的には説明が不要になって仕事がやりやすいです（笑）。

UIデザインは色分けがうまくできるかどうかがスタート地点。でも、やたらめったらカラフルにするわけにもいかず、腕が試されるところです。
寄り目を利用した「目diff」および「立体インデント」の考案

疲れてくると寄り目になっちゃう現象ありますよね。
これを有効活用する方法を思いついたので書き留めようと思います。

# 目diff

先日 react native でアプリを作ってたんですが、なんかの操作の前後で挙動が想定と違いました。
よく分かんなかったので、とりあえずデータの中身を表示させて、
ふとした拍子で再現しなくなると困るので念のためスクショを撮りました。
（左: バグる前 / 右: バグった後。データは今てきとーにでっち上げたものです。）

![before.png](https://qiita-image-store.s3.amazonaws.com/0/235355/612b299c-ce6c-7f6f-0eca-19314cfd7b78.png)

見ても分かんない、えーと、どうすんだっけ…
Remote Debug 有効にして Chrome の…テキストを diff で…あぁ、目が寄るぅ……

![after.png](https://qiita-image-store.s3.amazonaws.com/0/235355/8a98f80e-234f-161d-61c4-4203455d6bd5.png)

あぁなんだ categoryId が変わっちゃってるじゃん、と一目瞭然ですね。
インデントと行数が揃ってるっていう前提の上ですが、寄り目を使うと diff 部分が
マトリックスでラグってるとき風に（網膜上に）表示され、大変便利です。

後で知ったんですが、間違い探し業界ではわりと知られたテクニックのようです。
何かの事情で diff コマンドが使えず裸眼で戦わなきゃいけないときにお使いください。

# 立体インデント

他に寄り目の活用方法ないかなーと思ってふと思いついたのが、立体視です。
立体視を使うと奥行きを表現することができ、これで立体的にインデントできます。

例えばこういう fizzbuzz のコードがあったとして

```javascript
for (var i = 1; i <= 100; i++) {
  if (i % 3 === 0) {
    if (i % 5 === 0) {
      console.log("FizzBuzz")
    } else {
      console.log("Fizz")
    }
  } else if (i % 5 === 0) {
    console.log("Buzz")
  } else {
    console.log(i)
  }
}
```

uglify すると改行もインデントも消えて

```javascript
for(var i=1;i<=100;i++){if(i%3===0){if(i%5===0){console.log("FizzBuzz")}else{console.log("Fizz")}}else if(i%5===0){console.log("Buzz")}else{console.log(i)}}
```

読めないわよ prettify しなきゃってのは、ライブラリのコードを追うときとかによくあります。
ブロックがどこで終わってるのかパッと見で把握できないのがつらいですね。

そこで寄り目（立体視 交差法）を使って、こう。

![fizzbuzz.png](https://qiita-image-store.s3.amazonaws.com/0/235355/d5bea1b4-c5c6-b941-8bf5-657344afc31c.png)

ピントが合うと、ネストの深い部分が手前に浮いて見えます。
妙に未来感のある UI なのでちょっとやってみてください。

立体視は疲れ目を癒やすっていう説もあるし、一石二鳥な気がしないでもないです。
こういうエディタがあると楽しそう。


------

【追記】微修正した別バージョンの画像作ったので貼っておきます。
こちらは↑の画像と奥行方向が逆になってまして、交差法で見ると深い部分が谷底に見えます。

![fizzbuzz.png](https://qiita-image-store.s3.amazonaws.com/0/235355/7ed40f66-c421-810c-077a-5155171a3b80.png)
WooCommerce PDF Invoicesで日本語を扱う

前提：WooCommerce 日本語化済み、ある程度PHPが使える知識、composerが使える、WooCommerce PDF Invoicesを購入してプラグインインストール

オフィシャル文章
https://docs.woocommerce.com/document/woocommerce-pdf-invoice-setup-and-customization/


失敗した方法
・Using Google Fonts
→日本語文字化けして使えませんでした

上手く行った方法
・Using a True Type font
コツ：「.ttfファイル」を配置後に、load_font.phpで「.ufmファイル」を作成


STEP1.
load_font.phpを配置
https://github.com/dompdf/utils
（WPのルートディレクトリ）/wp-content/plugins/woocommerce-pdf-invoice/lib/dompdf


STEP2.
https://ipafont.ipa.go.jp/old/ipafont/download.html
ipaのttfファイルをデプロイ
（WPのルートディレクトリ）/wp-content/plugins/woocommerce-pdf-invoice/lib/dompdf/lib/fonts

STEP3.
ターミナルからコマンド実行
cd （WPのルートディレクトリ）/wp-content/plugins/woocommerce-pdf-invoice/lib/dompdf/

composer require dompdf/dompdf

php load_font.php ipamp.ttf （WPのルートディレクトリ）/wp-content/plugins/woocommerce-pdf-invoice/lib/dompdf/lib/fonts/ipamp.ttf

※動かない場合、適当にcomposerが動くフォルダでやってufmファイルを移動させるのが良いです。私は素直には動かなかったです

STEP4.
template.php
   @font-face {
   	font-family: 'ipamp';
   	font-style: normal;
   	font-weight: normal;
   	src: local(ipamp), url(https://ほげほげ/ipamp.ttf) format('truetype');
   }
   @font-face {
   	font-family: 'ipamp';
   	font-style: normal;
   	font-weight: bold;
   	src: local(ipamp), url(https://ほげほげ/ipamp.ttf) format('truetype');
   }
   body {
      font-family: 'ipamp', 'Mplus 1p', "DejaVu Sans", "DejaVu Sans Mono", "DejaVu", sans-serif, monospace;
      font-size:11px;
    }


ぶっちゃけSTEP4だけで良い気がすry

参考
http://navi-local.com/article/php%E3%81%8B%E3%82%89pdf%E3%82%92%E5%87%BA%E5%8A%9B%EF%BC%88dompdf%EF%BC%89/

http://reffect.co.jp/blog/post/laravel-dompdf70-japanese
HTML5で履歴書

[<img src="https://qiita-image-store.s3.amazonaws.com/0/273713/a06cb2c0-37b4-9e22-167f-a7ebbf8668ee.png" width=75%></img>](https://stsysd.github.io/resume.jp/)

[stsysd/resume.jp](https://github.com/stsysd/resume.jp)

ブラウザ上で新卒者向けの履歴書を作るツール。
サーバは使ってないので、外部にデータは送られず安心。
JSONでのエクスポート・インポートにも対応してるよ。

# なんでこんなの作ったのか
この間生まれて初めて履歴書が必要になる機会があり、せっかくだから手書きしたらすごく大変で、これは人間がやる仕事ではないなと思い知り、印刷で済ませる必要性を感じた。
ちょうど同じぐらいのタイミングで、どこかの企業の履歴書作るサービスがバズってて、こんなので個人情報吸い出されるのも馬鹿らしいなと思って、自分で作ることにした。
印刷することを前提としている以上、本来ならTeXとかを使うのがふさわしいとは思うのだが、ブラウザさえあればどこでも動く手軽さとわかりやすさを重視してHTML5で作成した。

# 使ってるライブラリなど
- Vue.js: 単品。コンパイルとかもしてない
- Pure CSS: Normalize ＋α的な感じ
- Font Awesome: 右下のアイコンに
- LESS: 必要最小限簡単なもので十分だと思った

# 苦労した点
## 枠線問題
写真を貼るところをよけるように凹んだ枠線をCSSで描こうとするとすごく大変。
なので、今回は大抵ひとつにまとめられる名前と住所をふたつの箱に分けてしまって解決した。

## ふりがな問題
履歴書では名前や住所にはふりがなを振る。大体記入欄の上部が点線で区切られていて、上にふりがな・下に漢字を書く。HTMLで愚直にこれを実装すると、ふりがなと漢字がそれぞれ左詰めになってしまって美しくない。ちゃんと対応する漢字の上にふりがなが乗るようにしようとすると、ちょっとひねる必要がある。加えて、住所の欄だとふりがなと漢字の間に郵便番号が挟まったりして、混迷を極める。
そこで今回は`ruby`タグで簡単に済ませることにした。点線で区切られているのは、あくまで記入の際のガイドラインなのだから、印刷で済ませる今回は必要ないだろうという判断である。
ただ、`ruby`タグはCSSで制御できる部分が少なく、細かい調整が難しい。
また、縦方向のセンタリングはルビが降られている文字を基準に行われるので、ルビと合わせて見ると中心からずれているように感じられてちょっと気持ちが悪い。

## 枠からのはみだし
編集で内容が変更されるので、文字数によっては枠からはみ出てしまうことがある。うっかり気付かないまま印刷してしまわないように、はみ出たら赤くなって注意を引くようになっている。
これは高さを固定したうえで、要素の`scroll[Width|Height]`と`client[Width|Height]`を比較することによって検知している。
ただ、前述の`ruby`（正確にはその中の`rt`）がよくわからない挙動をして1pxぐらいずれることがあるので、比較にはちょっと余裕を持たせている。


# もう少しいじりたいところ
- フォームのバリデーションをきちんとやりたい。日付なんかは月に関係なく31日まで受け付けるようになっちゃってる
- 学歴・職歴・資格の編集フォームがいくらなんでも雑すぎる
- 文字の大きさ・文字間の幅などを柔軟に変更できるようにしたい
- 誕生日を入れたら中学・高校の入学・卒業年月ぐらいは自動で埋まるようにしたい

# よくわかんないところ
- なぜかA4の高さぴったりの297mmにすると印刷の時に2ページになってしまうので、現状高さは296.9mmになっている
- 印刷することを考えると、幅はパーセントで指定するよりmmできっちり指定したほうがいいのか？

# 最後に
作ってみたけど、最初の機会以降ESばっかりで全然履歴書を要求されないのであった。
そしてほんとはフロントエンドの仕事はあまりしたくないのであった。
GraphQLの旅(6) GraphQLを読み込む最小Vue.jsフロントエンド

# vue-apolloを使う

GraphQLのAPIを使用しデータを取得するフロントエンドアプリを作ります。
使用できるフレームワークは、ReactやVue.jsなどがあります。
今回はVue.jsを利用します。（Reactは次回とします）

Vue.jsに加えて、apollo-client（GraphQLクライアントライブラリ）、そしてvueからapolloを使いやすくするvue-apolloを使います。

- [vue-apollo](https://github.com/Akryum/vue-apollo)

なかなかhello world的なものが見当たらないのですが、
[fullstack GraphQL](https://blog.pusher.com/fullstack-graphql-app-prisma-apollo-vue/)で紹介してくれています。

# 前提

とあるGraphQLサーバにて`User`のAPIがあるとします。

```graphql
type User {
  id: ID! @unique
  name: String!
}
```

# Vueがインストールされたサーバでまずはひな型を作る

下記コマンドでひな型を作ります。
**`router`を使用する設定にします。**

```sh
vue init webpack <アプリ名>
```

# vue-apolloなどライブラリを追加

```sh
yarn add vue-apollo graphql apollo-client apollo-link apollo-link-http apollo-link-context apollo-cache-inmemory graphql-tag vue-moment
```

# Vueのコンポーネントを追加

- `components/User.vue`を追加

```vue

<template>
  <div>
    <h1>vue-apollo example: users</h1>
    <div v-for="user in users" :key="user.id">
        <div>{{ user.id }}, {{ user.name }}</div>
    </div>
</template>

<script>
import gql from 'graphql-tag'

const FeedQuery = gql`
{
  users {
    ...namename
  }
}
fragment namename on User {
  name
  id
}
`
export default {
  data: () => ({
    users: [{name: 'test'}]
  }),
  apollo: {
    users: {
      query: FeedQuery,
      loadingKey: 'loading'
    }
  }
}
</script>
```

- `router/index.js`に`/user/`ルートを追加

```js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import User from '@/components/User'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/user/',
      name: 'User',
      component: User
    }
  ]
})
```

- 最後に`main.js`にGraphQLサーバへの接続を書く

```js

import Vue from 'vue'
import { ApolloClient } from 'apollo-client'
import { HttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'
import VueApollo from 'vue-apollo'
import App from './App'
import router from './router'

Vue.config.productionTip = false

// install the vue-momnet plugin
Vue.use(require('vue-moment'))
Vue.use(VueApollo)

const apolloProvider = new VueApollo({
  defaultClient: new ApolloClient({
    link: new HttpLink({ uri: 'http://＜GraphQLサーバ＞' }),
    cache: new InMemoryCache()
  })
})

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  provide: apolloProvider.provide(),
  components: { App },
  template: '<App/>'
})
```

ファイル構成はこうなります。★を追加・更新しました。

```
.
├── build
├── config
├── index.html
├── package.json
├── README.md
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   ├── HelloWorld.vue
│   │   └── User.vue　★
│   ├── main.js　★　（更新のみ）
│   └── router
│       └── index.js　★（更新のみ）
├── static
├── test
└── yarn.lock
```

# 起動

```sh

yarn dev
```

これで、`http://localhost:8080/#/user/`にアクセスするとVueアプリが起動します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/96277/1c1f02b2-c43d-ce7f-8d76-bac31267b9e8.png)
How to dock esri-hosted Vector Tiles to Maputnik

# Background
I wanted to dock Esri-hosted Vector Tiles to Maputnik so that I can learn more about that vector tiles. I implemented this by modifying root.json. This practice is experimental.

![640px-STS-76_docking_with_MIR.jpg](https://qiita-image-store.s3.amazonaws.com/0/102082/a2b2fb88-d009-a215-5637-e2c0f0602610.jpeg)

# Steps
## (1) Prepare an https server to host a style.json
Although Esri uses [Mapbox Style Specifications](https://www.mapbox.com/mapbox-gl-js/style-spec/), their root.json cannot directly be used by Maputnik because of slight difference. We need to host a modified version of root.json to a CORS-enabled https server. 

In my case, I used the htdocs space of [tile-block](https://github.com/hfu/tile-block) to host the file.

## (2) Modify root.json and host it as style.json
### Locate root.json and download it
You can find root.json at somewhere like https://{server}/arcgis/rest/services/Hosted/{t}/VectorTileServer/resources/styles/root.json. Save it as style.json

### Modify sprite, glyphs, and sources
First, we need to modify the first ten lines that contain sprite, glyphs, and sources.

#### sprite
The original root.json reads:

```json
"sprite": "../sprites/sprite",
```

This shall be modified as:

```json
"sprite": "https:{server}/arcgis/rest/services/Hosted/{t}/VectorTileServer/resources/sprites/sprite",
```

#### glyphs
The original root.json reads:

```json
"glyphs": "../fonts/{fontstack}/{range}.pbf",
```

This shall be modified as:

```json
"glyphs": "https://{server}/arcgis/rest/services/Hosted/{t}/VectorTileServer/resources/fonts/{fontstack}/{range}.pbf", 
```

#### sources
The original root.json reads:

```json
"sources": {
  "esri": {
    "type": "vector",
    "url": "../../"
  }
},
```

This shall be modified as:

```json
"sources": {
  "esri": {
    "type": "vector",
    "tiles": ["https://{server}/arcgis/rest/services/Hosted/{t}/VectorTileServer/tile/{z}/{y}/{x}.pbf"]
  }
},
```

Please note that the key 'url' changed to 'tiles'. Also please note that the value for the 'tiles' key is an array.

In addition, please note that the template url contains {z}/{y}/{x}, not {z}/{x}/{y}.

### Modify other small things
Sometimes you see several dialects of style.json which Maputnik cannot understand. You may need to fix them by trial and error. In many cases the error messages of Maputnik help. 

In my case, I had to delete '#' from '#rgba(255,255,255,0.75)' to correct it to 'rgba(255,255,255,0.75)'.

## (3) Host style.json
Upload your style.json at an https server.

## (4) Open from Maputnik
You can open your style.json at https://maputnik.github.io/editor/?style={your-style-json-url}#{z}/{lat}/{lng}.

Enjoy!
AnacondaでKivyをインストールする

# はじめに
AnacondaでPythonの仮想環境を構築したときに，Kivyのインストールが成功しませんでした．なぜか調べたらKivyを提供しているプラットフォームが複数存在しているのと，Kivy 1.10からPython3.5，3.6のサポートを始めたということで，Python3.7で環境構築しようとすると失敗するらしいです．

そこで備忘録がてらなるべく最新のPython3.6でKivyの環境を構築します．


# 環境構築
## 仮想環境の作成
AnacondaでまずはKivy用の仮想環境を作ります．環境名は**kivy**にします．

```
conda create -n kivy python=3.6
conda activate kivy
```



## Kivyのインストール
kivy環境でKivyをインストールします．

```
conda install -c conda-forge kivy
```

```conda install -c``` オプションは，パッケージをダウンロードするためのチャンネル名を指定しています．チャンネルというのはパッケージの提供者のことです．

Kivyを提供している人は複数人いますが，3.x系をサポートしている人はconda-forgeだけみたいです．krisvannesteさんも提供していますが2.7までしか提供していません．

# おわりに
今回はPython 3.6でKivyをインストールしました．**特定の数学ライブラリをインストールしたらKivyがConflict起こした**という報告があるので，環境構築が成功してから開発を始めましょう．Anacondaはその辺りが割と良い作りになっているので，インストール段階でヤバいパッケージがあったらエラーを吐いてくれます．

ちなみに，Anacondaでパッケージを提供しているチャンネルやサポートしているPythonバージョンなどを調べる方法などもあります

例えば，調べ方としては[Anaconda Cloud](https://anaconda.org/)でパッケージ名で検索するとチャンネルが複数出てきます．検索先でフィルターもかけることができて，仮想環境の種類やプラットフォームなどもフィルターできます．ただし，Pythonのバージョンは個別のチャンネルで提供しているかどうか自分で調べないといけないのが面倒です．

今回は以上になります．お疲れ様でした．
[Rails5]twitter認証を取り入れたら、emailを使った登録ができなくなった件

表題の通り、できでたsignupができなくなった。
#email
![DBバグ２.PNG](https://qiita-image-store.s3.amazonaws.com/0/232561/798afbf8-a891-e334-9ed7-04324dbf01ac.png)
![DBバグ.PNG](https://qiita-image-store.s3.amazonaws.com/0/232561/19e071f2-3b96-4b4d-aae5-c4af3d2d68be.png)

emailは既に存在しているとなる。
ログを見ると、Unpermitted parameter: email　とある。
DBを見てもemaiデータは入っていない。twiiter認証の方は、emailデータが入ってる。
ストロングパラメーターにemailは入れなくていいと思うんだけど

```application_controller.rb
class ApplicationController < ActionController::Base
  # CSRFへのセキュリティ対策
  protect_from_forgery with: :exception
  before_action :configure_permitted_parameters, if: :devise_controller?

  # 省略
  
  protected
    #
    #パラメーターname,emailを渡せるようにする
    #
    def configure_permitted_parameters
      devise_parameter_sanitizer.permit(:sign_up, keys: [:name, :email])
      devise_parameter_sanitizer.permit(:account_update, keys: [:name, :email])
      devise_parameter_sanitizer.permit(:sign_in, keys: [:name, :email])
    end 

end
```

とemailを加える事で解決。

#uid
twitter登録ではなく普通の登録だからuidデータは必要ないのに、このuidはすでに存在してるとなる。

```models/user.rb
#validates :uid, uniqueness: true
```

とバリデーションをコメントアウトで外したらエラーは取れた。
デジタル数字表示CSS

# 背景
デジタル数字表がCSSのみで出来たら楽しいかなぁと思ったので作ってみました。
完全な個人的な備忘録になります。

ただ、@n4o847 様の記事のヤツのほうがかっこいいです…要素1つですし…
@n4o847 様の記事はこちらです！
・[CSSを駆使してDIV要素１つでデジタル数字を作る](https://qiita.com/n4o847/items/30b0f542f155232bf4d1)

# 完成品
完成品はこちらになります。

<p data-height="436" data-theme-id="0" data-slug-hash="LBGXGZ" data-default-tab="result" data-user="hashito" data-embed-version="2" data-pen-title="seven-segment display CSS" class="codepen">See the Pen <a href="https://codepen.io/hashito/pen/LBGXGZ/">seven-segment display CSS</a> by hashito (<a href="https://codepen.io/hashito">@hashito</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


#コーディング
##棒部分

私は1つの棒毎に要素を割り当てて書いてみました。

```css
.b{
  transform:translateX(0px) translateX(0px);
  background-color:var(--font-color);  
  height:var(--line-h-body);
  width:var(--line-w);
  top:var(--line-h-tr);
  position:absolute;
}
.b:before{
  position:relative;
  content  :"";
  display:block;
	width: 0;
	height: 0;
  top:calc(var(--line-h-tr)*-2);
	border-top:    var(--line-h-tr) solid transparent;
	border-right:  var(--line-h-tr) solid transparent;
	border-bottom: var(--line-h-tr) solid var(--font-color);
	border-left:   var(--line-h-tr) solid transparent;
}
.b:after{
  position:relative;
  content  :"";
  display:block;
	width:0;
	height:0;
  top:calc(var(--line-h-body) - var(--line-h-tr)*2);
	border-top:    var(--line-h-tr) solid var(--font-color);
	border-right:  var(--line-h-tr) solid transparent;
	border-bottom: var(--line-h-tr) solid transparent;
	border-left:   var(--line-h-tr) solid transparent;
}

```

## 数値化
各要素に数値クラス`n0`~`n9`を割り当てて表示しました。
※ここも変数にしたかった…

``` css
.num .b:nth-child(1){top: 30px;  left:10px; }
.num .b:nth-child(2){top:-10px;  left:45px; transform:rotate(90deg);}
.num .b:nth-child(3){top: 30px;  left:80px; }
.num .b:nth-child(4){top: 70px;  left:45px; transform:rotate(90deg);}
.num .b:nth-child(5){top:110px;  left:10px; }
.num .b:nth-child(6){top:110px;  left:80px; }
.num .b:nth-child(7){top:150px;  left:45px; transform:rotate(90deg);}

.n0 .b:nth-child(1){}
.n0 .b:nth-child(2){}
.n0 .b:nth-child(3){}
.n0 .b:nth-child(4){display:none;}
.n0 .b:nth-child(5){}
.n0 .b:nth-child(6){}
.n0 .b:nth-child(7){}
```
Djangoで、複数台構成のread replicaなdbサーバに参照する時だけランダムに接続する

GAE/pyでcloud sqlに繋ぎに行っていたんですが、
データ参照をread replicaに分散させないと高負荷に耐えられないケースが稀にあるので。

Cloud Spannerを使うだけの予算があったり、
上手くDataStoreで実装できればそれで済むこともあるんですが……
キャッシュを使っていてもなおスペックが足りなかったりと、世の中はままならないので。
DBを参照する際にread replicaなサーバにランダムで繋ぎに行った時の問題と解決方法の備忘録でも。

もっといい方法があるよ！という方がいれば是非とも。

# Django公式の説明
[Multiple databases](https://docs.djangoproject.com/en/2.0/topics/db/multi-db/)

この通り複数台構成の場合の説明はあります。
db_for_readで参照先を、db_for_writeで書き込み先を指定してあげればいいだけのお手軽設定です。
さすがに書き込み先を分散させる……ということは早々ないはずなので、
下のような感じで、db_for_readで接続先をランダムに指定してあげれば、
一つのDBサーバに接続が偏らずに、無事にスケールできそうな予感がします！

```py
def db_for_read(self, model, **hints):
    random.choice(settings.DATABASES.keys())
```

## 実装の問題点
- **selectが走る度**にrandom.choiceで**接続先がランダムで選択される**
- 一度のリクエストで**N台のDBサーバへのコネクションが発生**してしまった！
- スケールどころではなく一瞬で死亡！
- **トランザクション中でも**、read replicaを参照してしまう！
- begin -> update -> select -> あれ……!？

## 解決方法
- 一度ランダムで選択したものを、保持するようにする
- db_for_write....つまり、デフォルトの接続先がトランザクション実行中であれば、参照先をそこに切り替えるようにする
- haproxyを使えない環境なので、read replicaが落ちている場合は自動で他のreplicaに切り替えられるようにpython側でどうにかする

## 実装方法
という訳で下の内容で実装してみました。
db_for_readの中でトランザクションの実施判定、一度設定した接続先を記憶するようにしています。

```py
from django.db import connections
from django.db.transaction import DEFAULT_DB_ALIAS

class FailOverRouter(object):
    def __init__(self):
        self.default = DEFAULT_DB_ALIAS
        self.read_connection = None

    def is_transaction(self):
        has_connection = hasattr(connections._connections, self.default)

        if has_connection:
            return connections[self.default].in_atomic_block

        return False

    def db_for_read(self, model, **hints):
        if self.is_transaction():
            return self.default

        if self.read_connection is None:
            self.read_connection = self.default

            # read replicaの一覧をshuffleしたものを取得
            read_instance_names = get_read_instances()

            for read_name in read_instance_names:
                # 接続先がダウンしていないかどうかの確認
                if test_connection_to_db(read_name):
                    self.read_connection = read_name
                    break

        return self.read_connection

    def db_for_write(self, model, **hints):
        return self.default

    def allow_migrate(self, db, app_label, **hints):
        return db == self.default
```

# 実装してみて
これを利用して、高負荷サービスでも（read replicaが耐えられる範囲までは）問題なくさばけるようになりました。
データベースを追加すれば追加するほど、無限にさばける人数を増やせるようになったかなと。
まぁ、増やせば増やすほどコストも無限にスケールするんですが……

# 最後に
[株式会社ネコカリ](https://www.nekokari.co.jp/)では高い負荷を求められるサービスでも、求められないサービスでも、
猫の手をかせるお仕事を合わせて募集しています！

一緒に働くメンバーも募集していますので、よかったら是非！
Apple PayボタンをWebサイトに組み込むの巻き

#Apple Payボタンの微調整について
まぁ詳しいCSSについては、Apple Pay on the Web のサンプルコードを参照ください。

サンプルのコードを貼ってちゃんとボタンが設定できたのだが、
幅と高さを微調整したかったので

```css:css
.apple-pay-button {
  /*　追加　*/
  height: 50px;
  width: 100%;
}
```

widthとheightを設定すればいい。
ボタンが大きくなるとApple Payアイコンも自動的に大きくなるよ:relaxed:

#Supportsについて

ここからはCSSについてのメモ

Supports
指定した条件が使用できるかどうかを条件判定するSupportsですが、JavaScriptでは`CSS.supports()`というものがある。

（https://blog.kazu69.net/2016/09/14/using-at-rule-supports-development-with-css-property-of-future/ コードについてはこちらを参考に）
作業開始する前に最低限確認したいことリスト

# 読んでほしい人
- 新人や若手
- 新しい現場に入った直後の人
- 自分（備忘録）

# リスト
- 作業の目的
- 作業発生の起因となったこと
- 再現手順・再現環境
- 現状想定している解決方法
- 過去に類似作業をおこなっていないか（真似できないか）
- スケジュール
- 試験環境情報（URL・サーバ・DB・ブランチetc）
- 試験環境へのデプロイ方法
- ビルド方法
- 自分だけでは解決できない要素（顧客との調整・他システムとの連携・有識者の協力etc）

きっとこれらを解決しとけば設計・実装に集中できるはず！
Weblogicの任意のコード実行(CVE-2018-2894)

7月18日に、Oracle Fusion Middleware の Oracle WebLogic Server
において、任意のコードが可能な脆弱性が公開(CVE-2018-2894)されました。
脆弱性の公開後、githubや中国圏を中心とした検証サイトでPoCが公開されています。

#脆弱性
脆弱性の影響を受けるバージョンは以下となります。今回検証した12.2.1.0.0でも脆弱でしたので、以下バージョン以前は気を付けなくてはいけません。

- 10.3.6.0
- 12.1.3.0
- 12.2.1.2
- 12.2.1.3

#脆弱環境
Weblogicを立ち上げ、console画面にログインします。ログイン後、ドメイン構造のbase_domainをクリックします。

![wee.JPG](https://qiita-image-store.s3.amazonaws.com/0/254131/4dcccd3a-db54-fb1b-e4d5-710c2ef0ac61.jpeg)

下にスクロールすると、「Webサービスのテスト・ページの有効化」の項目がありますので、これにチェックを入れます。Weblogicを再起動する必要があるみたいなので再起動。

![weblogic.JPG](https://qiita-image-store.s3.amazonaws.com/0/254131/8f30576e-fa45-466a-6252-7e2d767c74ec.jpeg)

hXXp://localhost:7001/ws_utc/config.doにアクセスすると、無事ページが公開されました。7001ポートはデフォなので、自分の環境に従ってアクセスしてね。

![vwa.JPG](https://qiita-image-store.s3.amazonaws.com/0/254131/056b14dd-e55a-707d-e476-166acc50548d.jpeg)

#レッツ検証
検証したPoC：
https://raw.githubusercontent.com/LandGrey/CVE-2018-2894/master/CVE-2018-2894.py

第一段階：
現在の作業ディレクトリを別のディレクトリに変更してます。
自分のカレントディレクトリに新たなcssフォルダが追加されてます。

![gwa.JPG](https://qiita-image-store.s3.amazonaws.com/0/254131/03a8be9b-fe87-3e01-fdd5-00cf3d52dfce.jpeg)

第二段階：
/ws_utc/resources/setting/keystore宛に複数ファイルをアップロードします。本PoCは文字列を表示させるファイルを複数アップロードするだけですが、他のPoCではここでBackdoorをアップロードしてます。

![pp.JPG](https://qiita-image-store.s3.amazonaws.com/0/254131/57a57776-72ae-5443-bf63-3c527a69b2a2.jpeg)

アップロードしたファイルにアクセスためには、タイムスタンプが必要です。サーバから以下のような応答が返ってきますので、5つのファイルがアップロードできたことがわかります。

![server.JPG](https://qiita-image-store.s3.amazonaws.com/0/254131/d4d55c94-a22b-0778-7c21-e89c946a9b52.jpeg)

第三段階：
タイムスタンプを含めたファイルへアクセスします。(hXXp://localhost:7001/ws_utc/css/config/keystore/1532091925590-_360sglab.jsp)
文字列が表示されており、無事PoCが成功したことが確認できました。

![resp.JPG](https://qiita-image-store.s3.amazonaws.com/0/254131/34565172-6fa9-c7a7-098b-6de80886c4ff.jpeg)

番外：
アップロードされたファイルは2パターンで確認できます。
違いとしては、Web上の方はjspファイルしか見れなくて、インストールフォルダは全部見れるということでしょうか。

1つ目は、securityタブを押すことで、アップロード一覧が見れます。
![sec.JPG](https://qiita-image-store.s3.amazonaws.com/0/254131/39406561-74f2-3fa8-231d-ab86dce2a871.jpeg)

2つ目は、インストールフォルダの配下を確認することで、アップロード一覧が見れます。
インストールフォルダ\user_projects\domains\base_domain\servers\AdminServer\tmp\_WL_internal\com.oracle.webservices.wls.ws-testclient-app-wls\4mcj4y\war\css\config\keystore

#最後に
現在のPoCはテストページを意図的に生成しなければ成功しないみたいです。
そのため、12月末に出た脆弱性と違いあまり影響はないと思います。
ハニーポットでも本脆弱性と考えられる検知もないことですし。

#追記 7月21日
上記のPoCはアップデートされてるので、現在の挙動は異なります。
GCEインスタンス数の制限解除について



Google Cloud Engine (GCE)で、100インスタンスを作成しようと思った時に、下記のようなメッセージが出力され、なぜか69個までしか作成されないことがありましたので、解決方法を共有しておきます。

```
* google_compute_instance.test.51: Error creating instance: googleapi: Error 403: Quota 'IN_USE_ADDRESSES' exceeded. Limit: 69.0 in region asia-northeast1., quotaExceeded
* google_compute_instance.test[18]: 1 error(s) occurred:
```

+ ダッシュボードから、**[IAMと管理]**で、**[割り当て]**をクリック
+ `Compute Engine API (In-use IP address)`と`Compute Engine API (CPUs)`を選択し、**[割り当てを編集]**をクリック

![ss 2018-07-07 17.53.55.png](https://qiita-image-store.s3.amazonaws.com/0/42406/707c2d21-4924-2ed2-e693-9303489a0d8b.png)

新しい割り当ての上限を設定しリクエストを送信
![image.png](https://qiita-image-store.s3.amazonaws.com/0/42406/47f1cb48-f9ae-05ea-eacc-4ac9ab3e681c.png)

翌日に、メールでなんで100インスタンス作りたいのかなど聞かれたので、performance テストをしたいとかと返信すれば、上限が更新され、めでたく、100インスタンス作成できるようになります。
ちなみに、100インスタンス作成するのに2分程度かかりました。

以上
Dimensions使い方メモ

※2018/7現在の情報です。

#DSL (The Dimensions Search Language)
APIを用いて検索を行う際の言語

- 公式マニュアル http://docs.dimensions.ai/dsl/1.5.0/index.html

## 基本構文
```search データベース in 検索範囲 for 検索語 where フィルタ return 取得データ``` 

- in, for, whereの順番は変更不可
- `in 検索範囲`は省略可能（デフォルトはfull_data）
- `where フィルタ`も省略可能

####検索語
- ANDやORも使用可能だが、小文字にすると検索語として扱われるので&&や||を使用した方が良い

####whereフィルタ
- Field of researhでのフィルタ
    - 構文： where FOR=####
4桁のidで指定するが、このidは内部のFOR　idであり、一覧にかかれているid(例. 1103 Clinical Science)とは別となるので注意が必要（この場合は3053を指定する必要あり）
NativeBaseでAndroidのステータスバーの色を変更する

NativeBase使用時にAndroidのステータスバーの色を変更したかったのですが、簡単な方法があったので
`androidStatusBarColor`オプションで変更可能です
Headerを表示する必要がない場合は`display:'none'`でも大丈夫です

```javascript
<Header androidStatusBarColor="#2c3e50" style={{display:'none'}}/>
```
Macのキーリピートの速さの限界を超えたいとき

macOSでは、キーリピートの速さをコントロールできる上限があります。

<img width="653" alt="スクリーンショット 2018-07-20 15.34.25.png" src="https://qiita-image-store.s3.amazonaws.com/0/67424/9520d236-ea23-d2eb-3ba5-040aa76c3400.png">

正直、個人的にはこれだとおそすぎます。

キーのリピートをもっと速くしたい。

macOS になる前は、 `Karabiner` で変更できたのですが、今は無理になりました。

実は、下記コマンドで簡単に変更できます。

```
defaults write -g InitialKeyRepeat -int 12 # normal minimum is 15 (225 ms)
defaults write -g KeyRepeat -int 1 # normal minimum is 2 (30 ms)
```

なお、再起動しないと反映されないので、再起動してください。


## 参考↓　古いですが、まだコマンドは使える
https://apple.stackexchange.com/questions/10467/how-to-increase-keyboard-key-repeat-rate-on-os-x
iCalendar形式のデータをPHPで読み込む

とりあえず使ったので。

 * 参照元：http://d.hatena.ne.jp/stog/20141017/1413564439

上記記事の通り、Sabre\VObjectを使います。

# インストール

composer.jsonを作り、次のような処理を追加します。

```json:composer.json
{
    "require": {
        "sabre/vobject": "~4.1",
    }
}
```

そして、いつもの通りコマンドを実行。

```cmd
> curl -Ss https://composer.org/installer | php
> php composer.phar install
```

Windows 10でPowershellのバージョンが5以下の環境をお使いの場合、`curl`を`curl.exe`に置換えてください。

# 使い方

VObject\Reader::read()メソッドでicsファイルを読み込みます。

```php:php
$file = file_get_contents("file.ics");
$vcalendar = VObject\Reader::read($file);
```

Web上のデータを扱う場合、このままでは読めない場合があります。以下のようにしておきましょう。

```php:php
$ctx = stream_context_create([
  'ssl' => [
      'crypto_method' => STREAM_CRYPTO_METHOD_TLS_CLIENT,
  ],
]);
$file = file_get_contents($ics_url, false, $ctx);
$vcalendar = VObject\Reader::read($file);
```

上記コードならGoogleカレンダーのICSファイルなども読めます。

※ ただし、GoogleカレンダーなどのICSファイルには、**Googleカレンダーを使い始めてからいままで全てのデータが格納されているため、非常に大きい**です。Web上で動かしたりはしない方が良いです。

## データの読み方

`$vcalendar->VEVENT`に、データが配列で入っています。foreachで回すと良いでしょう。

```php:php
foreach ($vcalendar->VEVENT as $event) {
  /* なんかいろいろ */
}
```

文字列形式のデータは`$event->SUMMARY->getValue()`などとして読み込みます。

日付のデータは、`$event->DTSTART->getDateTime()->setTimeZone($tz)`等として読み込みます(取得できるデータは(GoogleカレンダーのICSファイルの場合)GMTなので、`setTimeZone()`をしておくと良い)。

なお、改行(\n)があるデータについては、`getValue()`の段階で展開されます。GoogleカレンダーのICSファイルの場合、DESCRIPTIONにHTMLタグが入っている場合があるので、注意します(無視するのならそれでも良いです)

### データの読み方(補足)

基本的に`$event->VCARDのタグ名->getValue()`でデータが読めます。ただそうすると、LAST-MODIFIEDなどはどうなるんだ？

答えは`$event->{"LAST-MODIFIED"}->getDateTime()->setTimeZone($tz)`です。

また、GoogleカレンダーのICSファイルの場合、**イベントに個別で可視性を設定した場合のみ、CLASSという要素が追加されます。可視性がデフォルトのイベントにはCLASSがそもそもありません**ので注意しましょう。

# 作例を見たい

以下リポジトリを見るといいと思うよ。

* [ical2md](https://github.com/TakamiChie/ical2md)
「Mathematica」「SymPy」「Sage」「Maxima」のコマンドの比較表をみつけた

# 以下のコマンドの比較表が、おすすめです。

http://hyperpolyglot.org/computer-algebra2

・他におすすめがあれば教えて下さい。
・「MATLAB」のコマンドの比較表を探しています。
・コンバーター(converter)があると助かります。

# sympy「ライブラリブック」おすすめです。
K-TechLabo 様
2023/05/19

~~????リンクの私の調子が悪いです。~~
~~????接続がプライベートではありません~~
~~sympy＜**「ライブラリブック」**＜Python3のテキストができました．~~
~~https://www.k-techlabo.org/www_python/python_modules.pdf#page=171~~

pdfのダウンロードです。sympyは以下で勉強しています。「pythonテキスト」もおすすめです。
P171 sympy＜ **「ライブラリブック」** ＜Python3のテキストができました．
「3.3 数式処理ライブラリ： SymPy」

「K-TechLaboゼミ用学習ノート」 様 のポータル

http://www.k-techlabo.org/blog2/?page_id=163

# sympyのドキュメント。やっぱり?!!
公式ホームページ

https://docs.sympy.org/latest/index.html

# sympyとFreeCADとつないでいます。
大学入試問題の作図問題が解けます。(例)cadで√2,分数の表示ができますしね。
個人的に最強の組み合わせだと思います。(2023/06/01)
公式ホームページ

https://www.freecad.org/index.php

https://forum.freecad.org/viewforum.php?f=16

https://forum.freecad.org/index.php

(sympy,freecadで私の大学入試問題解答例 多数)　アドバイスをいただくと助かります。　

https://qiita.com/tags/freecad

# (参考)Wolfram￨Alpha 開発物語
ウルフラムリサーチ 様

https://www.jstage.jst.go.jp/article/bplus/16/2/16_149/_pdf

＜　https://www.jstage.jst.go.jp/

# (参考)Wolfram Alpha による数式処理マニュアル
http://lab.ms.oita-u.ac.jp/yoshikawa/siryo/WolflamAlpha-Manual-Shimura.pdf
(全26頁)2023/05/29追加
＜大分大学 理工学部 数理科学コース＜

https://lab.ms.oita-u.ac.jp/yoshikawa/res.html

(上のページの後半部分です。id=が見当たりませんでした。
 リンクはページ最初です。）
＜　**マニュアル等**
Wolfram Alphaによる数式処理マニュアル
(紫村一輝君が作成,2017年度 大分大学開放イベントでの配布資料)
自分用-Scilabマニュアル(2017/12/18アップロード, 2013年作成)
自分用-MATLABマニュアル(2017/12/19アップロード, 2017年作成)
自分用-Mathematicaマニュアル(2017/12/19アップロード, 2011年作成)
導入から始めるPython(2018/6/21アップロード)

以上、抜粋でした。

・**[WolframAlpha マニュアル　P13「2.9定義域と値域」いいですね！！](http://lab.ms.oita-u.ac.jp/yoshikawa/siryo/WolflamAlpha-Manual-Shimura.pdf#page=14)**

・以下の,mathematicaの記号幾何学は,WolframAlphaで動きませんでした。(2023/06/02)
Integrate[1, {x, y} \[Element] Disk[]]
https://www.wolframalpha.com/input?i=Integrate%5B1%2C+%7Bx%2C+y%7D+%5C%5BElement%5D+Disk%5B%5D%5D&lang=ja
Mathematica 10の新機能 ›記号幾何学
https://www.wolfram.com/mathematica/new-in-10/symbolic-geometry/index.html

・mathematicaで

https://mathematica.stackexchange.com/questions/8016/how-to-find-the-domain-and-range-of-a-function-with-mathematica

# (参考)Sage⊇Sympy
(2018/10/22補足)　SageにSympyは含まれる。

https://funmatu.wordpress.com/2017/09/13/sympy-vs-sage/


# mathematica-vs-matlab
2023-11-15追加
他あります。

https://appmus.com/vs/mathematica-vs-matlab

# sympyがない時は、最強の文献だと思います。FORTRAN77 
2023-11-16追加

[プログラマのための幾何学入門 A.Bowyer, J.Woodwark 著,外山みさ子 訳](https://iss.ndl.go.jp/books/R100000002-I000001723140-00)
＞https://ja.wikipedia.org/wiki/啓学出版
＞1994年に倒産。
＞https://archive.org/details/AProgrammersGeometry

# MathMLの勉強を開始(2023-12-7)
移動しました。(2023/12/20)

https://qiita.com/mrrclb48z/items/40ceadf74a7562aaeafa
BigQueryでタブ使いたくない？

# はじめに
BigqueryでSQLを書いていると、というか分析SQL書く時全般に言えることだと思うけど、1つのSQLだけで完結することはなかなかない。
もちろん最終的には1つのSQLというアウトプットになるが、その途中で試しに走らせてみたり、関数の動作確認をしたくなることもある。
そんな時今までは
`書きかけのSQLをテキストエディタに寄せておく`
→`お試しSQLを実行`
→`書きかけのSQLをBQコンソールにコピペし作業再開`
という手順を踏まないとできなかった。（BQ画面を複数開いておけばまあできるのだけど）

そんなお悩みを解決するのが
`SuperQuery`だ。

## SuperQuery
chromeの拡張です。
http://web.superquery.io/
先に言っておくと`HPのUIとは大きく異なる。だいぶ簡素。`
それでも便利になるのでビッグクエラーにはぜひオススメしたい。

入れるとこんな感じになります。
#### query editor
![](https://gyazo.com/c5ba661f7c0711a50b4851328d896532.png)

1. タブが使えるようになる。5つまでひらけて、最初のタブ以外は名前がつけられる
1. StandardSQL⇄RegacySQLがボタンで切り替えられる

#### 実行結果
![](https://gyazo.com/46af4461946d11a6598ad466f269fb70.gif)
1. ドラッグ&ドロップでカラムを並べ替えることができる&枠外にドロップすればカラムを消せる
 注) CSVに吐いた時はクエリの実行結果のままなのであくまでBQUI上での表示が変わるだけ

#### ダッシュボード
<img width="1659" alt="bq.png" src="https://qiita-image-store.s3.amazonaws.com/0/137894/1f01e5a4-2df8-97b0-8168-84ffd436a718.png">

これはSuperQueryを入れたからこそ見れるものだ。
googleアカウントでのサインインと同意をすれば、コストやクエリの本数などをダッシュボードとしてみることができる。
ユーザー単位で絞れたりしてかなり便利。
なぜかGCSも見られる。

## 注意点
#### 注意点①
http://web.superquery.io/pricing/
ここに記載があるが実は有料のサービスだ。
だが毎月100TBは無料だし、なかなか100TBも使うことはないと思うのであまり気にしなくても良さそう。
ちなみにこの100TBはチーム単位で計算されるので注意が必要。
HPによると100TBいった段階で、支払い情報などが求められ、90TBに達したらお知らせのメールが来るそうだ。
ちなみに`evaluex`時代(SuperQueryに名前が変わる前)から使っているが、お知らせメールはきたことがない(90TBもいかないという意味)。

#### 注意点②
FirebaseやGA360のデータのような構造体を持つデータに対して、構造体を表示させるようなクエリを書くと結果が表示されない。
これはバグだと思う。
構造体を扱う時は一時的に拡張をOFFにして対応しないといけないのは面倒。

## まとめ
細かい機能は他にもあるが、

`Bigqueryでタブが使える`

これに尽きる。
これだけでだいぶ効率が変わるのでBigQueryでSQLをバシバシ叩く人はぜひ検討してみてください！
sympyで「行列の回転(Rotation matrix)逆回転」をやってみた//simplifyがmatrixでもできた

(参考)回転行列
https://ja.wikipedia.org/wiki/%E5%9B%9E%E8%BB%A2%E8%A1%8C%E5%88%97
(参考)【python】sympyのsympifyとsimplifyの違いについて  ?simplify
https://piruty.hatenablog.com/entry/%3Fp%3D117

``` fullscript.py
from sympy import *
var("t")
var("A B C")
A=Matrix(([cos( t),-sin( t)], [sin( t),cos( t)]))
B=Matrix(([cos(-t),-sin(-t)], [sin(-t),cos(-t)]))
C=A*B
print(C)
print(type(C))
print(simplify(C))
# Matrix([[sin(t)**2 + cos(t)**2, 0], [0, sin(t)**2 + cos(t)**2]])
# <class 'sympy.matrices.dense.MutableDenseMatrix'>
# Matrix([[1, 0], [0, 1]])
```
Vue.js で json を読み込む

静的なデータをコンポーネントと別ファイルで管理したい時にどうぞ。

## Vue-cliを使っている場合
例えばassetフォルダ内にjsonファイルを用意して、それをcomponentsフォルダ内のコンポーネントから読み込むときは以下のように書けば良い。

```json:assets/data.json 
[
  {
    "id": 1,
    "name": "hogehoge"
  },
  {
    "id": 2,
    "name": "gehogeho"
  },...
]
```

```javascript:main.vue
import users from '../assets/data.json'

export default {
  data: () => {
     users: users
  }
}
```

## その他の場合
axiosを使う必要があります

```html:index.html
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="./app.js"></script>
```

```javascript:app.js
var app = new Vue({
  data: {
     items:null
  },
  mounted: function () {
    axios.get("./items.json").then(response => (this.items = response))
  }
})
```
【SQL】突然始まるPostgreSQL §1 関数作成

#PostgreSQLの関数　書き方
##はじめに
CodewarsというサイトでSQLの問題にチャレンジしている際に書けてしまったので、
発見は記録しておこうということでこちらに書いていこうかなということで記事にしました。

##こんなコード書いたんです
```sql:書式
DROP FUNCTION IF EXISTS weekdays(DATE,DATE);

CREATE OR REPLACE FUNCTION weekdays(DATE,DATE)
RETURNS INTEGER AS $$
  select $1 - $2
$$
LANGUAGE sql;
```

##問題の内容
Codewarsで出題された問題なんですが、以下のような感じでした。
※この記事書いてる時点では解けていないです笑

二つの日付（DATE型）を引数として与えられた関数が
その二つの引数間の営業日ベース（土日除く）で日数をカウントして、
INTEGERのデータ型がカウントした日数を出力せい　

##実行結果と分析
まず、実行した結果からお伝えします。

```sql:実行結果
| weekdays |
|   --:    |
|   -9     |
```


まぁ、これがお作法なのかは全く分からないまま書き連ねているのですが…

とりあえず、最初の一文「DROP FUNCTION IF EXISTS weekdays(DATE,DATE);」で関数自体の初期化をしています。

DROP　FUNCTION なので、処理としては「読んで字の如く」ですね。
最初に関数の定義自体を捨てています。このことを私が勝手に初期化とかかっこつけて呼んでます。
これを行う理由としては引数を変えた時にPostgreSQLが引数の情報を更新できないことがあるからだそうです。

※以下の方の記事を参考にさせていただきました。ありがとうございます。
【PostgreSQLで関数を作って、使う[PL/pgSQL入門]】
＜ https://qiita.com/SRsawaguchi/items/411801e254ee66f511f1 ＞

初期化をした後に以下のような形式で関数の定義を行なっています。

```sql:関数定義
CREATE OR REPLACE FUNCTION weekdays(DATE,DATE)
RETURNS INTEGER AS
```

上記は関数名：weekdaysという名前でかつ、その関数に与えられる引数はDATE型のデータ2つであることが定義さしています。

見方なのですが、
　　「CREATE OR REPLACE FUNCTION」は「関数を作るよ」の宣言部分
　　「関数名（引数１,引数2）」
と私は解釈しています。

そして、RETURNSには関数の戻り値が格納されます。
RETURNSの後に記載するのは戻り値のデータ型です。

つまり、この関数はDATE型2つを引数にとり、戻り値はINTEGER型で返すということです。

```sql:実行部分
RETURNS INTEGER AS $$
  select $1 - $2
$$
LANGUAGE sql;
```

実際の処理部分は

```sql:実行部分
$$〜$$
```

で囲った箇所になります。

つまり、この関数で言うと「select $1 - $2」の部分が実行部分になります。
LANGUAGEは何の言語を使用するかを指定する部分です。

↑の関数の場合はSQLを使用するということを示しています。
ちなみに現在、使用可能な言語は以下、公式サイトに記載されています。

【PostgreSQL 9.6.5文書　CREATE FUNCTION】
＜ https://www.postgresql.jp/document/9.6/html/sql-createfunction.html ＞

```bash:公式からの抜粋
lang_name
関数を実装している言語の名前です。 
このパラメータには、sql、c、internal、もしくはユーザ定義手続き言語(例：plpgsql)の名前を指定可能です。
名前を単一引用符で囲むのは廃止予定で、大文字小文字の一致が必要になります。
```

ということでsql,c,internal(?),ユーザが定義した言語(★)を指定することが可能とのことです。
※執筆時点(2018年7月時点)の最新バージョン9.6ではそのように定義されています。
★PostgreSQLではユーザが定義した言語とはストアドプロシージャを示すそうです。
　以下のサイトに情報が上がっていました。

　【ユーザー定義関数を使う】
　　< http://www50.tok2.com/home/oppama/pgfuncdef.html >

問題が解けたら随時更新していきます！
競馬を統計的に予想してみる(その2：レース結果をスクレイピング)

## 目的
競馬を統計的に予想したい！

何回かに分けて目的を達成してく予定
1. [レース結果のURLを取得](https://qiita.com/marumen/items/7a990f2cfa6b28ac4a1e)
<b>2. 1のURLからレース結果をスクレイピング <- 今回はこれが目的</b>
3. 2のデータから統計モデルを作る
4. 予想してみる

## 環境
+ Raspberry Pi 3 ModelB[^1]
[^1]: ラズパイ上で動作させることは必須ではないが、今後スタンドアローンで動かせるようにしていきたいため、ラズパイを使用
+ Python v3.5.3

## 作業メモ

### レース結果をスクレイピング

<b>参考サイト</b>
レース結果テーブルの情報取得
https://stackoverflow.com/questions/21997587/beautifulsoup-get-text-from-find-all

無駄な改行の削除
https://tonari-it.com/python-strip/

文字列の最後尾から文字を取り出す
http://www.openspc2.org/reibun/Python/string/006/index.html

リストが空か判断
https://qiita.com/yonedaco/items/d0f65ca3dad2e085a51d

<b>スクリプトを作成する</b>

前回同様コードをGitHubに公開済み
https://github.com/marumen/git_netkeiba_scraping

使用方法は上記のREADMEを読んでいただければわかると思われる

```
$ python result_scraping.py
```
[レース結果のURLを取得](https://qiita.com/marumen/items/7a990f2cfa6b28ac4a1e) で作成したURLファイル(`url_list.txt`) に書かれたURLからレース結果を取得して、`output`というディレクトリにcsv形式のファイルとして格納する
結果ファイルのフォーマットについては、GitHubにサンプルを挙げているのでそちらを参照ください

<b>注意点</b>

+ 障害レースは対象から外している(数年単位だとデータが少なくなるため)
+ レース結果ファイルが`output`ディレクトリに存在する場合は、処理をスキップさせている
+ 処理にかなりの時間(1日単位)がかかるため、時間に余裕があるときの使用をおすすめする[^2]
[^2]: 参考に今回の環境だと5年分のデータ取得に約1日かかった
+ 連続アクセスにならないよう、一定間隔でsleep(5sほど)を持たせている[^3]
[^3]: `robots.txt`が[サイト](http://www.netkeiba.com/)のTOPに見当たらなかったため、sleepの時間は適当に設定しているが、サイトアクセスの回数がかなり多いため、時間を変更する場合はあまり短くしないように注意
+ 大量のファイルを出力するため、空き容量には注意[^4]

[^4]: 数年分のデータであれば、100MBもあれば十分


## まとめ
今回の目的は達成！

>競馬を統計的に予想したい！

><b>2. 1のURLからレース結果をスクレイピング <- 今回はこれが目的</b>

次回は以下を実現する
><font color="Black">3. 2のデータから統計モデルを作る</Black>
AWSのSimple Email Serviceを使って独自ドメインからメールを送信する方法

#目的
SESを使用する際のメモとして残します。

# 1. SESでの設定
#### ドメインを追加
ナビゲーションペインからDomainsに移動します。
Verify a New Domainという青色のボタンを押して新しいドメインを使用できるようにします。
ドメインを入力して、[DKIM Setting]をチェックします。
画面に表示されるレコード情報をそれぞれ設定します。

# 2. IAMでの設定
#### 新規ユーザを作成
IAMにて新規ユーザを作成します。
この時、プログラムによるアクセスをチェックしてください。
アクセス権限の設定にて[SendEmail][SendRawEmail]を許可してください。
この時、アクセスキーIDとシークレットアクセスキーを控えておいてください。

# 3. SESでの受信ルールの設定
ここで使用したいメールアドレスをRecipientにします。
アクションはS3にしてください。既存のS3のストレージを選択するか新規作成してください。
そこにメールが保存されます。
prefixを設定すればそのディレクトリにメールが保存されます。

# 4. SESでの新規メールアドレスの設定
ナビゲーションペインからEmail Addressに移動します。
先ほどのストレージにVerification用のメールが届いているので確認してそのリンクに飛んでください。
このメールで「設定が完了していない」といったような内容のものが送られることがありますが、それはIAMにてドメインの権限を付与していないからです。
一度設定してからVerificationメールを送り直しましょう。

# 5. Node.jsでの送信
まず、先ほどのアクセスキーIDとシークレットアクセスキーをjsonファイルに保存します。
region-codeは各自の環境に合うものを調べてください。

```:credentials.json
{
  "accessKeyId": "ACCESSKEYID",
  "secretAccessKey": "SECRETACCESSKEY",
  "region": "REGION_CODE"
}
```
次にNode.jsでプログラムを実行します。
まずAWS SDKをインストールして、下記プログラムを実行します。
```$ npm install aws-sdk --save```

```javascript:email.js
var AWS = require('aws-sdk');
AWS.config.loadFromPath('./credentials.json');
var ses = new AWS.SES({
  sslEnabled: true
});
var fromAddress="from@example.com";
var toAddress="to@example.com";
var subject="題名";
var body="本文";
var params = {
  Source: fromAddress,
  Destination: {
    ToAddresses: toAddress,
  },
  Message: {
    Subject: {
      Data: subject
    },
    Body: {
      Text: {
        Data: body
      }
    }
  }
};
ses.sendEmail(params, function(err, data) {
  if (err) {
    reject(err);
  } else {
    resolve(data);
  }
});
```
シェルスクリプトで連続処理をより効率的に

# 想定シチュエーション
日付など連続値で順次処理したい。簡単に効率よく速く処理したい。
【例】
- 20170101～20171231までのログファイルがあって、それぞれに処理を行いたい。
- `sh execute.sh -d 20170101` で 1日分の処理が行える。

# なにも考えないと
```bash:01.sh
sh execute.sh -d 20170101
sh execute.sh -d 20170102
（中略）
sh execute.sh -d 20171231
```
Excelで365行のコマンドを作って処理。だれもがやったことがあるのでは。

# 脱Excel
```bash:02.sh
STARTYMD=20170101
ENDYMD=20171231

TD=${STARTYMD}
ENDYMD=`date -d "${ENDYMD} 1 days" '+%Y%m%d'` # 便宜上+1日してるだけ。
while [ ${TD} -ne ${ENDYMD} ]; do
  sh execute.sh -d ${TD}
  TD=`date -d "${TD} 1 days" '+%Y%m%d'`
done
```
日付を追うのはdateコマンドに任せる。日付ではなく連番であれば単にforを使う。

```bash:02-2.sh
STARTNUM=1
ENDNUM=10

for NUM in $(seq ${STARTNUM} ${ENDNUM}); do
  sh execute.sh -n ${NUM}
done
```

# CPUを効率的に
上記では1コアしか使わず、今どきのPC/Serverでは力を持て余すので、コア数分だけ分ける。

```bash:03child1.sh
STARTYMD=20170101
ENDYMD=20170331
（略）
```
```bash:03child2.sh
STARTYMD=20170401
ENDYMD=20170630
（略）
```
```bash:03child3.sh
STARTYMD=20170701
ENDYMD=20170930
（略）
```
```bash:03child4.sh
STARTYMD=20171001
ENDYMD=20171231
（略）
```
```bash:command
$ sh 03child1.sh &
$ sh 03child2.sh &
$ sh 03child3.sh &
$ sh 03child4.sh &
```
これで4コア並行で使える。

# 並列処理も自動に
```bash:04.sh
STARTYMD=20170101
ENDYMD=20171231

THREADS=$(nproc --all)                                         # コア数取得
TD=${STARTYMD}
ENDYMD=`date -d "${ENDYMD} 1 days" '+%Y%m%d'`                  # 便宜上+1日してるだけ。
while [ ${TD} -ne ${ENDYMD} ]; do
  sh execute.sh -d ${TD} &                                     # バックグラウンドにしてしまう。
  while [[ $(jobs | wc -l) -ge ${THREADS} ]]; do sleep 1; done # コア数まで処理中になったら待つ
  TD=`date -d "${TD} 1 days" '+%Y%m%d'`
done
wait                                                           # これを付けるとすべての処理の完了を待つ
```

今どきは32コアマシンとかポチポチで起動できちゃうので、1サーバでさっと処理できるようになって便利ですね。
Go GoCSVでShift_JISでCRLFなCSVを作る

# ソース

```go
package main

import (
    "encoding/csv"
    "fmt"
    "io"
    "os"
    "time"

    "golang.org/x/text/encoding/japanese"
    "golang.org/x/text/transform"

    "github.com/gocarina/gocsv"
)

const layout = "20060102150405"

type User struct {
    Name string `csv:"名前"`
    Mail string `csv:"メール"`
    Age  string `csv:"age"`
}

func main() {
    var users []*User
    users = append(users, &User{
        Name: "ほげ",
        Mail: "hoge@example.com",
        Age:  "21",
    })

    gocsv.SetCSVWriter(func(out io.Writer) *gocsv.SafeCSVWriter {
        writer := csv.NewWriter(transform.NewWriter(out, japanese.ShiftJIS.NewEncoder()))
        writer.UseCRLF = true
        return gocsv.NewSafeCSVWriter(writer)
    })

    now := time.Now()
    file, err := os.OpenFile(now.Format(layout)+".csv", os.O_CREATE|os.O_WRONLY, os.ModePerm)
    if err != nil {
        fmt.Println(err)
    }
    defer file.Close()

    gocsv.MarshalFile(&users, file)
}
```

# 参考

- [Go CSV](https://github.com/gocarina/gocsv)
- [encoding/csv/#Writer](https://golang.org/pkg/encoding/csv/#Writer)
- [os/#pkg-constants](https://golang.org/pkg/os/#pkg-constants)
- [os/#FileMode](https://golang.org/pkg/os/#FileMode)
- [time/format.go](https://golang.org/src/time/format.go)
- [gocsvを使ってラクにCSVファイルをつくる](https://qiita.com/nkumag/items/ef372ea35dcfbfa19310)
- [golang.org/x/text/transformパッケージを使う #golang](https://tech.mercari.com/entry/2017/12/05/154907)

## 参考2

- [vim-go チュートリアル](https://github.com/hnakamur/vim-go-tutorial-ja)
- [Dep](https://github.com/golang/dep)
Graph Laplacian Matrix の実装に関するメモ

##Points
* Graph Laplacian matrix を実装し、具体的な数値例で確認。

##Reference
[1. A Tutorial on Spectral Clustering](http://citeseerx.ist.psu.edu/viewdoc/download;jsessionid=EE6AA90BADEB0286DB6AF3DD5F9641F2?doi=10.1.1.165.9323&rep=rep1&type=pdf)

##Data
```python
def create_data(n_input, dim, n_classes):

  n_input_per_class = n_input // n_classes

  x_1 = np.random.normal(loc = [7.0, 7.0], scale = [0.5, 0.5], size = [n_input_per_class, dim])
  x_2 = np.random.normal(loc = [5.0, 1.0], scale = [0.5, 0.5], size = [n_input_per_class, dim])
  x_3 = np.random.normal(loc = [2.0, 4.0], scale = [0.5, 0.5], size = [n_input_per_class, dim])

  x = np.concatenate([x_1, x_2, x_3], axis = 0).astype(np.float32)

  y_1 = np.array([0] * (n_input_per_class))
  y_2 = np.array([1] * (n_input_per_class))
  y_3 = np.array([2] * (n_input_per_class))

  y = np.concatenate([y_1, y_2, y_3]).astype(np.int32)
  y_one_hot = np.identity(n_classes)[y].astype(np.int32)
  
  return x, y, y_one_hot

  
n_input = 9
dim = 2
n_classes = 3

x, y, y_one_hot = create_data(n_input, dim, n_classes)

fig = plt.figure(figsize = (8, 3))

ax = fig.add_subplot(1, 2, 1)
ax.scatter(x[:, 0], x[:, 1], c = y, cmap = 'Accent')  # Accent
ax.set_xlim(-3.0, 12.0)
ax.set_ylim(-3.0, 12.0)
ax.set_title('Scatter graph of sample')

plt.show()
```
![image.png](https://qiita-image-store.s3.amazonaws.com/0/254604/9979824a-6bc6-46c0-7618-aa83cddfbe9a.png)


##Sample Code
```python
x_input = tf.expand_dims(x, 1)
M = tf.tile(x_input, [1, n_input, 1])
M_T = tf.transpose(M, [1, 0, 2])

# Gaussian similarity
sig = 1.0
W = tf.reduce_sum(tf.square(M - M_T), axis = -1)
W = tf.exp(-0.5 * W / sig**2)

# unnormalized Laplacian
diag = tf.reduce_sum(W, axis = -1)
D = tf.matrix_diag(diagonal = diag)
L = D - W 
e, v = tf.self_adjoint_eig(L)

# normalized Laplacian
D_I = tf.matrix_diag(diagonal = 1.0 / diag)
L_rw = tf.matmul(D_I, L)
e_rw, v_rw = tf.self_adjoint_eig(L_rw)

with tf.Session() as sess:
  e = sess.run(e)
  v = sess.run(v)
  e_rw = sess.run(e_rw)
  v_rw = sess.run(v_rw)


print ('Eigenvalues (unnormalized)')  
print (e)
    
plt.plot(v[:, 0], label = 'eigenvector 1')
plt.plot(v[:, 1], label = 'eigenvector 2')
plt.plot(v[:, 2], label = 'eigenvector 3')
plt.plot(v[:, 3], label = 'eigenvector 4')
plt.title('Eigenvectors (unnormalized)')
plt.legend(loc = 'upper right')

plt.show()

print ('-' * 30)
print ('Eigenvalues (normalized)')  
print (e_rw)
    
plt.plot(v_rw[:, 0], label = 'eigenvector 1')
plt.plot(v_rw[:, 1], label = 'eigenvector 2')
plt.plot(v_rw[:, 2], label = 'eigenvector 3')
plt.plot(v_rw[:, 3], label = 'eigenvector 4')
plt.title('Eigenvectors (normalized)')
plt.legend(loc = 'upper right')

```
![image.png](https://qiita-image-store.s3.amazonaws.com/0/254604/1879a05a-f66a-a79e-cdb1-8df65659e4a1.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/254604/5b53d74b-c47f-7448-315f-37118d0d5d40.png)
PythonでEXCELファイルをCSVへコンバートする方法

# 環境
OS : Windows 10
Python 3.6

EXCELファイルをCSVへコンバートしたい事案があり、調べました。
Pythonのライブラリ **xlsx2csv** を使ってxlsxファイルをcsvファイルへ変換できます。


# インストール
ライブラリ xlsx2csv はpipコマンドでインストールできます。

```:コマンド
pip install xlsx2csv
```

# 準備

pipコマンドの実行でこのフォルダの配下に、 **xlsx2csv** という名前のファイルができました。
C:\Users\xxx\AppData\Local\Programs\Python\Python36\Scripts

このフォルダが環境変数のpathに設定されていても、 **xlsx2csv** が拡張子のないファイルのため、そのままでは使いにくかった。
（以下のようにpythonコマンドおよびファイルパスを指定しないと動きませんでした。）

```:コマンド
python (ファイルパス指定)/xlsx2csv
```

中身をみるとpythonスクリプトです。


## ファイル名変更

簡単に使うために **.py** の拡張子つきにファイル名を変更します。

**xlsx2csv** → **xlsx2csv.py**

# 使い方
コマンドプロンプトのコマンドラインで実行できます。
xlsx2csv.py が置かれているフォルダのpathが通っていれば以下のコマンドで実行できます。

```:コマンド
xlsx2csv.py xlsxfile [outfile]
```

以下に便利なオプションを抜粋して記載します。

## 使い方・ヘルプを確認したい

```:コマンド
xlsx2csv.py -h
```

## csvファイルに結果出力したい

```:コマンド
xlsx2csv.py xlsxfile csvfile
```

- 実行例省略


## コマンドラインに結果出力したい

```:コマンド
xlsx2csv.py xlsxfile
```

```:実行例
>xlsx2csv.py sample.xlsx



,サンプルファイル,,,,
,,,,07-20-18,サンプル会社

,サンプル表,,,,
 ,,列１,列２,列３,列４
,1,"\11,000","\12,000","\13,000","\14,000"
,2,"\21,000","\22,000","\23,000","\24,000"
,3,"\31,000","\32,000","\33,000","\34,000"
,4,"\41,000","\42,000","\43,000","\44,000"
```


## タブ区切りに変更したい


- デフォルトはカンマ(,)区切り。
- 金額や係数で3桁区切りのカンマ(,)がハードコードされているときとかはタブ区切りにしたい。

```:コマンド
xlsx2csv.py -d tab xlsxfile
```

```:実行例
>xlsx2csv.py -d tab sample.xlsx



        サンプルファイル
                                07-20-18        サンプル会社

        サンプル表
                列１    列２    列３    列４
        1       \11,000 \12,000 \13,000 \14,000
        2       \21,000 \22,000 \23,000 \24,000
        3       \31,000 \32,000 \33,000 \34,000
        4       \41,000 \42,000 \43,000 \44,000
```


## 空白行は出力から除きたい

```:コマンド
xlsx2csv.py -i xlsxfile
```

```:実行例
>xlsx2csv.py -i sample.xlsx
,サンプルファイル,,,,
,,,,07-20-18,サンプル会社
,サンプル表,,,,
 ,,列１,列２,列３,列４
,1,"\11,000","\12,000","\13,000","\14,000"
,2,"\21,000","\22,000","\23,000","\24,000"
,3,"\31,000","\32,000","\33,000","\34,000"
,4,"\41,000","\42,000","\43,000","\44,000"
```

## 文字列を" "で括りたい

- 括るレベルの指定が必要
    - レベル：none / minimal / nonnumeric / all
    - -q のあとに上記いづれかをKEYWORD指定

```:コマンド
xlsx2csv.py -q *KEYWORD* xlsxfile
```

```:実行例
>xlsx2csv.py -q nonnumeric sample.xlsx



"","サンプルファイル","","","",""
"","","","","07-20-18","サンプル会社"

"","サンプル表","","","",""
" ","","列１","列２","列３","列４"
"","1","\11,000","\12,000","\13,000","\14,000"
"","2","\21,000","\22,000","\23,000","\24,000"
"","3","\31,000","\32,000","\33,000","\34,000"
"","4","\41,000","\42,000","\43,000","\44,000"
```