OmniAICreator/Qiita-1.07M huggingface dataset:
Selenium と google-chrome のサンプル (python3)

次のプログラムのドライバーを Firefox から、google-chrome にしました。
[Crowdworks の募集中の案件数を取得 (Beautifulsoup4)](https://qiita.com/ekzemplaro/items/1cca0e35e51a96cd129c)

```py:development_chrome.py
#! /usr/bin/python
# -*- coding: utf-8 -*-
#
#	development_chrome.py
#
#					Sep/10/2018
#
# ------------------------------------------------------------------
import sys
from selenium.webdriver import Chrome
from selenium.webdriver.chrome.options import Options
from selenium.webdriver.support.wait import WebDriverWait
from selenium.webdriver.common.by import By
from selenium.webdriver.support import expected_conditions as EC
#
from bs4 import BeautifulSoup
#
# ------------------------------------------------------------------
def file_write_proc(file_name,str_out):
	fp_out = open(file_name,mode='w',encoding='utf-8')
	fp_out.write(str_out)
	fp_out.close()
#
# ------------------------------------------------------------------
def page_ready_wait_proc(driver):
	ttx = 100
	WebDriverWait(driver, ttx).until(
		EC.presence_of_element_located((By.CLASS_NAME,'result_count'))
		)
	sys.stderr.write("*** page_ready_wait_proc *** end ***\n")
# ------------------------------------------------------------------
sys.stderr.write("*** 開始 ***\n")
url_target = "https://crowdworks.jp/public/jobs/group/development/u/professionals?order=new"
file_html = "tmp001.html"
#
#
options = Options()
options.add_argument('-headless')
driver = Chrome(executable_path='/opt/chromedriver/chromedriver', chrome_options=options)
ttx = 100
wait = WebDriverWait(driver, timeout=ttx)
driver.get(url_target)
#
idx="filter_hide_expired"
box_check = driver.find_element_by_id(idx)
box_check.click()
page_ready_wait_proc(driver)
#
idx="filter_hide_budget_pending"
box_check = driver.find_element_by_id(idx)
box_check.click()
page_ready_wait_proc(driver)
#
page_ready_wait_proc(driver)
html = driver.page_source
#
driver.quit()
#
file_write_proc(file_html,html)
#
soup = BeautifulSoup(html, "html.parser")
ccx=soup.find(class_="result_count")
ccy=ccx.find("span")
count=ccy.get_text()
sys.stderr.write("count = " + count + "\n")
#
sys.stderr.write("*** 終了 ***\n")
# ------------------------------------------------------------------
```

ドライバーの取得方法

```bash
wget https://chromedriver.storage.googleapis.com/2.41/chromedriver_linux64.zip
```

動作確認は次の環境で行いました。

```text
$ uname -a
Linux ***** 4.18.6-arch1-1-ARCH #1 SMP PREEMPT Wed Sep 5 11:54:09 UTC 2018 x86_64 GNU/Linux
$ python --version
Python 3.7.0
$ which google-chrome-stable
/usr/bin/google-chrome-stable
```
最速でストーリーボード（Storyboard）を使わないサンプルiOSアプリを作る

1. Single View App プロジェクトを作成する。
2. Main.storyboard を削除する。
3. Deployment Info の Main Interface にある "Main" を削除する。
4. 以下のコードを AppDelegate.Swift に記述する。

```swift:AppDelegate.Swift
 func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
    window = UIWindow(frame: UIScreen.main.bounds)
    let homeViewController = UIViewController()
    homeViewController.view.backgroundColor = .blue
    window!.rootViewController = homeViewController
    window!.makeKeyAndVisible()
    return true
}
```

以上です。
Javascriptでオブジェクトの配列の追加・更新・削除


よく使うのでメモ。ES2015仕様。
次のようなオブジェクトの配列（連想配列の配列）があるとした場合、

```javascript
var commodity = [
    {"name":"apple","price":300},
    {"name":"orange","price":200}
];
```


#1　更新・追加
###関数
```javascript
/**
* @function Array.prototype.update　オブジェクトの配列要素を更新・追加する
*/
if(!Array.prototype.update){
    Object.defineProperty(Array.prototype,'update', {
        configurable: false,
        enumerable: false,
        writable: false,
        /**
        * @param keyProperty　探索するキー
        * @param keyValue　探索するの値
        * @param newProperty　新しいキー
        * @param newValue　新しい値
        */
        value: function(keyProperty,keyValue,newProperty,newValue) {
            //オブジェクトの配列であるか確認
            if(Object.prototype.toString.call(this[0])!=='[object Object]'){
                console.log('TypeError: Other than an array of object was passed.');
                return false;
            }
            //配列内に目的の要素があれば値を更新し、なければ新しい要素を追加
            if(this.some(e => e[keyProp]===keyVal)){
                this.forEach(e => e[keyProp]===keyVal ? e[newProp]=newVal : false);
                //または 
                //this.map(e => e[keyProp]===keyVal ? Object.assign(e,{[newProp]:newVal}) : e);
            }else{
                this.push({[keyProp]:keyVal,[newProp]:newVal})
            }
            return this;
        }
    });
}
```

###処理→出力
```javascript
var commodity = [
    {'name':'apple','price':300},
    {'name':'orange','price':200}
];
products.update('name','orange','price',250);
products.update('name','banana','price',200);
console.log(JSON.stringify(products, null, '\t'));
```

###結果
```javascript
[
    {"name":"apple","price":300},
    {"name":"orange","price":250},
    {"name":"banana","price":200}
]
```


#2　削除
###関数
```javascript
/**
* @function Array.prototype.delete　オブジェクトの配列要素を削除する
*/
if(!Array.prototype.delete){
    Object.defineProperty(Array.prototype,'delete', {
        configurable: false,
        enumerable: false,
        writable: false,
        /**
        * @param keyProperty　探索するキー
        * @param keyValue　探索するの値
        */
        value: function(keyProperty,keyValue) {
             //オブジェクトの配列であるか確認
            if(Object.prototype.toString.call(this[0])!=='[object Object]'){
                console.log('TypeError: Other than an array of object was passed.');
                return false;
            }
            //配列内から目的の要素を見つけたら削除する
            this.forEach((e,i,self)=> e[keyProp]===keyVal ? self.splice(i,1) : false);
            return this;

            //または（非破壊的メソッド）
            //return this.filter(e=>e[keyProp]!==keyVal);
        }
    });
}
```

###処理→出力
```javascript
var products = [
    {'name':'apple','price':300},
    {'name':'orange','price':200}
];
products.delete('name','orange');
console.log(JSON.stringify(products, null, '\t'));
```

###結果
```javascript
[
    {"name":"apple","price":300}
]
```



#おまけ
WebStorage等をデータベース的に使いたい場合は、処理の前後に、オブジェクトの配列の読み込み・書き込みを追加する。

```javascript
//データベース読み込み
var objArray = JSON.parse(localStorage.getItem("objArray"));
//データベース書き込み
localStorage.setItem("objArray", JSON.stringify(objArray));
```
Cognos Analytics で逆スタースキーマモデルの実践 - ③属性データのモデル取り込み

#概要
前回までのところで、統合ディメンションを作成しての逆スタースキーマモデルで、自由分析を実現する方法をご説明しました。

第②回：自由分析への対応
https://qiita.com/shinyama/items/5bb75bae2e67d6e9cac0

統合ディメンションには、キー列しか含まれませんでしたが、実際にはマスター表には「名称」などの属性データが存在しますので、この属性データをどうやって逆スタースキーマモデルに取り込むか、という点が今回の内容です。

#属性データを持つマスター表のモデルへの追加
下記モデルで、統合ディメンションとしてのDIMB1を作成しましたが、元々持っている製品マスター表(DIMB2)があるとします。
このDIMB2表のPNAME(製品名)を自由分析では使いたいと思いますので、どうやって前回までにモデルに取り込むか、というところです。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/147246/c6471b7c-6032-3026-556c-6b1ba69e95c2.png)

DIMB2はDIMB1の補佐的な役割なので、DIMB1とDIMB2を接続するとして、DIMB2のPROD 1個につき、DIMB1のPRODは複数あるので、1..1 対 1..n でやってみます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/147246/877859f8-906c-fe3a-b08b-73d4d856d5ac.png)

レポート出力はというと、CAPのCHINAとJAPANのSALESが合計されて同じ値で表示されてしまっています。
![001.JPG](https://qiita-image-store.s3.amazonaws.com/0/147246/ec461137-df92-cc90-1e4b-023826432420.jpeg)

正解はこちらでした。1..1 対 1..1で接続します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/147246/3c8c1b33-deab-159c-063e-2d2cd86db140.png)

レポートの出力はこちらになります。無事正常に出力されていますね。
![002.JPG](https://qiita-image-store.s3.amazonaws.com/0/147246/75a2c677-14fe-072c-486d-a6aeea190e2a.jpeg)

#モデルのまとめ
逆スタースキーマで自由分析を行いたい時の、モデルを概念図にまとめるとこんな感じです。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/147246/b5412f91-f451-54af-db5b-5cd8bf11957d.png)

#次の問題 - パフォーマンス
このモデルで正確な値が出力できるようになったのですが、最後に残ったのはパフォーマンスが遅いという問題でした。
次回は最終回で、パフォーマンスへの対応を投稿します。

#目次
第①回：基本的なモデルの動作検証
https://qiita.com/shinyama/items/0567425a4a47ad7d6efa

第②回：自由分析への対応
https://qiita.com/shinyama/items/5bb75bae2e67d6e9cac0

第③回：属性データのモデル取り込み
https://qiita.com/shinyama/items/b66d59a92a58533f7c2b

第④回：パフォーマンス・チューニング
https://qiita.com/shinyama/items/b4b28844b4235db70032
[個人的メモ]RSpecでHogeHelerを読み込む方法

# はじめに

現在勉強中のRailsとRSpecで、RSpec内でHogeHelperの中のメソッドを使いたい場合
どのようにすれば良いのかを調べてもなかなか出てこなかったのでメモします


現在使用中のバージョン

- ruby 2.4.4p296
- Rails 5.2.1
- RSpec 3.8
  - rspec-core 3.8.0
  - rspec-expectations 3.8.1
  - rspec-mocks 3.8.0
  - rspec-rails 3.8.0
  - rspec-support 3.8.0


## やり方

`spec/rails_helper.rb`のなかを変更します

変更内容は以下のように、`config.include`で使いたいHelperを呼び出すだけです

```ruby:spec/rails_helper.rb
RSpec.configure do |config|

# 略

  config.include HogeHelper
end
```
Realm導入

#Realmとは
CoreDataやSQLiteに変わる次世代Mobileデータベースのこと。

#導入手順
CocoaPodsは、Xcodeプロジェクトのライブラリ依存関係を管理するソフトウェア。
これを使って簡単にRealmをインストールする。まず、ターミナルを開き以下のコードを入力する。

```:ターミナル
sudo gem install cocoapods
pod setup
cd 導入するべきプロジェクトファイルのPATH
pod init
```
ここまでの操作でプロジェクトファイル内に新しく'Podfile'が作成されている。これに修正を加える。以下は一例である。

```:Podfile
# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'

target 'RealmFirstTry' do
  # Comment the next line if you're not using Swift and don't want to use dynamic frameworks
  use_frameworks!　#⬅️⬅️⬅️

  # Pods for RealmFirstTry
  pod 'RealmSwift' #⬅️⬅️⬅️ ソースファイルには import RealmSwift と記述することになる

  target 'RealmFirstTryTests' do
    inherit! :search_paths
    # Pods for testing
  end

  target 'RealmFirstTryUITests' do
    inherit! :search_paths
    # Pods for testing
  end

end
```
修正後再びターミナルにて以下のコードを打ち込むことで完了する。

```:ターミナル
pod repo update
pod install
```
#注意点
・.xcodeprojではなく.xcworkspaceを開く。
・プロジェクトファイル内に既にPodfileが存在するとき、pod initはエラーとなる。
#参考資料
Qiita SwiftでRealm Databaseを使ってみた: https://qiita.com/ottijp/items/35dee1c03e055e450c81
Qiita【Swift】CocoaPods導入手順 : https://qiita.com/ShinokiRyosei/items/3090290cb72434852460
RealmHP : https://realm.io/docs/swift/latest/
CocoaPodsHP : https://guides.cocoapods.org/using/getting-started.html
YARN のウェブUI から Spark アプリケーションの実行後ログを見る方法

# はじめに
Apache hadoop の公式イントロダクション[ "Hadoop Cluster Setup" ](https://hadoop.apache.org/docs/current/hadoop-project-dist/hadoop-common/ClusterSetup.html)まで完了していることを前提とします．
YARN クラスタを起動すると，http://[server IP]:[server port] でResource Manager の web UI が立ち上がります．YARN 上で Spark アプリケーションを動かす場合，基本的にの web UI 上でモニタリングすると思います．実行中は下図の「Tracking URL」から実行中のアプリケーションのモニタリング画面に行けます．

<img width="668" alt="running.png" src="https://qiita-image-store.s3.amazonaws.com/0/139085/9861b288-a371-e2a4-9acf-76f80231058a.png">


しかし，実行後は同じ「Tracking URL」を押してもモニタリングの画面に行けなくなります．デフォルトでは終了したアプリケーションのモニタリング画面を表示する機能を提供していないのです．ちなみに [Hadoop Cluster Setup](https://hadoop.apache.org/docs/current/hadoop-project-dist/hadoop-common/ClusterSetup.html)で紹介されている "MapReduce JobHistory server" というのは実は Spark アプリケーションの jobHistory server とは別物なんですね．なので spark の History server は自分で構築しなければなりません．本記事ではアプリケーション終了後に 「Tracking URL」のリンク先でアプリケーションのモニタリング画面に行ける方法を紹介します．

# 参考ウェブページ
次のページを参照すれば，本記事を読まなくとも解決できると思います．
- [Apache Spark documentation](https://spark.apache.org/docs/latest/monitoring.html)
- [cloudera documentation](https://spark.apache.org/docs/latest/monitoring.html)

# 設定方法
spark アプリケーションの History server を果たす機能は YARN ではなく，Spark のシステムに組み込まれています．どこかのノードで Spark History server を立ち上げて，これを "Tracking URL" の参照先にリンクさせるイメージで構築します．

## Spark History server の立ち上げ
[Apache Spark documentation : Monitoring and Instrumentation](https://spark.apache.org/docs/latest/monitoring.html) の "Viewing After the Fact" 項に従って構築します．

基本的には [spark dir]/conf/spark-defaults.conf に三つの項目を設定すればOK.
- spark.eventLog.enabled : 実行後のログを吐き出すか否か
- spark.eventLog.dir : 実行後のログをどこに吐き出すか
- spark.history.fs.logDirectory : history server がどのディレクトリにあるログを読み出すか

オプションで，ポート番号をデフォルトの 18080 から変更できます．
- spark.history.ui.port

設定例

```conf/spark-defaults.conf
spark.eventLog.enabled           true
spark.eventLog.dir   file:/work1/ytakahashi/tmp/spark-events
spark.history.fs.logDirectory   file:/work1/ytakahashi/tmp/spark-events
```

サーバを立ち上げます．基本的な使い方ならサーバは１台だけで問題ないと思います．

```
./[spark dir]/sbin/start-history-server.sh
```

これにより，アプリケーション終了後に，ウェブブラウザから http://[history server IP]:18080 に接続することでログの一覧を確認できるようになります．

<img width="753" alt="history_menu.png" src="https://qiita-image-store.s3.amazonaws.com/0/139085/4e962279-f789-fb06-1719-8e0efe4d9147.png">


## "Tracking URL" の参照先を Spark History server にリンクさせる

Spark History server を立ち上げるだけだとまだ Resource Manager の "Tracking URL" から接続することができません． [spark dir]/conf/spark-defaults.conf を修正することで，Spark から YARN Resource Manager に history server のリンク先を教えてあげることができます．
( cf. [cloudera documentation](https://spark.apache.org/docs/latest/monitoring.html))

```conf/spark-defaults.conf
spark.yarn.historyServer.address=http://[history server IP]:18080
```

これで，終了したアプリケーションのモニタリング画面を "Tracking URL" から見れるようになります． http"//[history server IP]:18080 から直接見ることも出来ます．
str.formatの書式指定文字列の、腑に落ちない点

前置き
---
先日、書式指定文字列の構文規則を確認する機会があった。
> 置換フィールドの文法は以下です:

> ```
replacement_field ::=  "{" [field_name] ["!" conversion] [":" format_spec] "}"
field_name        ::=  arg_name ("." attribute_name | "[" element_index "]")*
arg_name          ::=  [identifier | digit+]
attribute_name    ::=  identifier
element_index     ::=  digit+ | index_string
index_string      ::=  <any source character except "]"> +
conversion        ::=  "r" | "s" | "a"
format_spec       ::=  <described in the next section>
> ```

引用元： [Python3.6.5 標準ライブラリ » string » 書式指定文字列の文法](https://docs.python.jp/3/library/string.html#format-string-syntax)

腑に落ちない点
---
前述の構文規則について、index_stringの定義が腑に落ちない。
**文字列リテラルではなく、単に文字列を要求しているのだ。**

実際に試してみると、この仕様の歪さが浮かんでくる。

```Python
>>> dct = {'answer': 42}
>>>
>>> '{0[answer]}'.format(dct)
'42'
>>>
>>> '{0["answer"]}'.format(dct)
Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
KeyError: '"answer"'
```

例えば、キーとして文字列`42`を指定できない。

```Python
>>> dct = {42: 'integer', '42': 'string'}
>>>
>>> '{0[42]}'.format(dct)
'integer'
>>>
>>> '{0["42"]}'.format(dct)
Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
KeyError: '"42"'
```

f-string
---
一方、Python3.6以降で導入されたf-stringはこの問題を解消している。

```Python
>>> f'{dct[42]}'
'integer'
>>>
>>> f'{dct["42"]}'
'string'
```

便利になった一方、**一貫性がない**という不満もある。
Railsのbefore_actionを使わずにシンプルに書く方法

[before action setter いる？ / Good-bye "before action setter"](https://speakerdeck.com/osa/good-bye-before-action-setter)
自分も`before_action`で`setter`を定義する書き方は良くないと思っていて、自分の書き方を共有しておく。

```ruby
class HogesController < ApplicationController
  def show
  end

  def hoge
    @hoge ||= Hoge.find_by!(id: params[:hoge_id])
  end
end
```

`private`修飾はせずに`view`でもメソッドで呼び出し。

```erb
<%= controller.hoge %>
```

モデルの依存関係も同じように書ける。

```ruby
class ApplicationController < ActionController::Base
  def current_user
    @current_user ||= User.set_current_user!
  rescue
    # 説明用として書くが、raiseは`set_current_user!`内に記述する。
    raise Unauthorized, 'error message'
  end
end

class BooksController < ApplicationController
  def show
  end

  def book
    @book ||= current_user.books.find_by!(id: params[:book_id])
  end
end
```

コントローラのクラスやメソッドごとに変数利用の有無を`before_action`で意識する必要がないし、`book`は`current_user`に依存するが記述の順番を意識しなくてよい。

メソッドにしておくとシンプルに書くことができて良い。
Git / SourceTree で、Shift JIS ファイルの差分を文字化けなく表示する

歴史的経緯など、やんごとなき事情により、現在でも文字コード Shift JIS の案件があります。あるところには、あります。

そういった UTF-8 以外の文字コードに対して git を使用した場合、diff が文字化けして読めない！！！ といった事態が発生します。

<img width="350" alt="スクリーンショット 2018-09-10 18.01.51.png" src="https://qiita-image-store.s3.amazonaws.com/0/45034/846aed52-f4c0-882d-a234-b24cac062737.png">

その対処方法です。  
(Mac でしか検証していませんが) 以下の方法で、ターミナルでも SourceTree でも、SJIS の差分の文字化けが解消できました。

## 設定

`.gitattributes` ファイルと、config の textconv 設定を利用します。

まず、プロジェクトのルートディレクトリに、 `.gitattributes` ファイルを作成。

今回は拡張子 html のファイルはすべて Shift JIS とみなし、以下のように記述します。

```
*.html diff=sjis
```

これは拡張子 html のファイルには、差分表示時に `sjis` というフィルタを使え、という設定です。

続いて、`sjis` という差分表示用のフィルタを定義します。

```
$ git config diff.sjis.textconv "iconv -f sjis"
```

Mac には最初から文字コード変換コマンドとして iconv が入っています。こちらを利用し、iconv コマンドで Shift JIS を UTF-8 に変換してから diff を表示せよ、という設定になります。

上記2つの組み合わせで、拡張子 html のファイルの差分は、iconv によるコード変換を通した結果が出力されるというわけです。

ちなみに、さきほどの `git config` コマンドにより、`.git/config` ファイルには以下のような設定が追記されます。

```
[diff "sjis"]
	textconv = iconv -f sjis
```

## 結果

いけたー 🙌

<img width="350" alt="スクリーンショット 2018-09-10 18.02.05.png" src="https://qiita-image-store.s3.amazonaws.com/0/45034/7c434377-6180-9224-2059-f4f3ed7a5acf.png">

SourceTree でもいけたー 🙌

<img width="258" alt="スクリーンショット 2018-09-10 18.29.42.png" src="https://qiita-image-store.s3.amazonaws.com/0/45034/c2042adc-9d2b-9b93-e5fc-ff363c31992a.png">

## 参考

- [Git - Git の属性](https://git-scm.com/book/ja/v1/Git-%E3%81%AE%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA-Git-%E3%81%AE%E5%B1%9E%E6%80%A7)
Vuejsの新しいフレームワークを実装する

# Vuesax

![vuesax-logo.png](https://qiita-image-store.s3.amazonaws.com/0/289173/57e43aa8-01cb-7f23-c2b2-d729d80ee067.png)

[Vuesax](https://lusaxweb.github.io/vuesax/) は、vuejsに基づいたコンポーネントのフレームワークであり、段階的に採用できるようにゼロから設計されたフレームワークです。

フレームワークは、アプリケーションの開発を容易にし、必要な機能を削除せずにアプリケーションの設計を改善することに重点を置いています。私たちはすべてのコンポーネントが色、形、デザインで独立していて、すべてのフロントエンドが好きですが、作成や制作のスピードを損なうことがないようにします。

## インストール

このインストレーションチュートリアルでは、vuesaxの使用方法について説明します。

- webpack
- Vue CLI 3
- NPM
- Node.js

CDNによってプロジェクトにvuesaxを実装しようとしている場合は、vuejsの後にスクリプトのインポートを置くだけで説明することはあまりありません

## プロジェクトを作成する

まず、偉大なプロジェクトをホストするフォルダが必要ですが、Vue CLIを使用する予定であるため、作成する必要はなく、プロジェクトを作成するときに自動的に作成します
そのため、Vue CLI 3を使用してプロジェクトを開始します。もちろん、それがコンピュータにグローバルにインストールされている場合は、このスクリプトを実行してください

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

すでにグローバルにインストールされている場合は、すべてのプロジェクトが保存されているフォルダに置かれます（プロジェクトフォルダVue CLIは作成しません）

スクリプトを実行してVue CLIプロジェクトを開始します

```bash
vue create my-project
```

vuejsを持つプロジェクトに必要なすべてのファイルが入ったフォルダが用意されています。
この場合、私のorijectと呼ばれるフォルダを入力します（ `vue create`はプロジェクトの名前です）

プロジェクト内でテストサーバーを起動し、すべてがうまくいくことを確認します

```bash
npm run serve
```

しばらくすると、私たちのVue CLIはサーバーを立ち上げます。ほとんどの場合、サーバーパスは `localhost：8080`です

![1_r-QPtbwcOzOiz35mAN-NTg.png](https://qiita-image-store.s3.amazonaws.com/0/289173/a5542bf4-9e00-640c-e07f-f77d234bc235.png)

## Vuesaxをインストールする

必要なものをすべて準備してプロジェクトを準備したので（Vue CLI）、私たちのためにすべてを行います。コマンドでVuesaxを追加します

```bash
npm install vuesax
```

依存関係がプロジェクトにインストールされるのを待つ必要があります

今すぐインストールが完了すると、アプリケーション内のどこでも使用するための実装が不足します

メインファイルを開きます。

```js
import Vue from 'vue'
import Vuesax from 'vuesax' //import dependency
import 'vuesax/dist/vuesax.css' // import css style

Vue.use(Vuesax) // implement Vuesax throughout the application
```

The file should be like this

```js
import Vue from 'vue'
import App from './App.vue'
import Vuesax from 'vuesax'
import 'vuesax/dist/vuesax.css'

Vue.use(Vuesax)

Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app')
```

私たちはすでにアプリケーションにすべてのコンポーネントと機能を持つvuesaxを持っています

## コンポーネントを追加する

アプリケーション全体にはすでにvuesaxがありますが、今度はテンプレートにコンポーネントを追加します。

ボタンを追加し、 `my-project / src / components / HelloWorld.vue`ファイルのリンクを置き換えます

ファイルは、テンプレートの一部だけがクリアである必要があります

```html
<template>
  <div class="hello">
   <vs-button vs-type="filled">Primary</vs-button>
  </div>
</template>
```

実装後、 `vs-button`コンポーネントの外観を見てみましょう

![1_aOG89HlIJlmTx_CBb_7tRQ.gif](https://qiita-image-store.s3.amazonaws.com/0/289173/6883ce96-8ebf-ab9d-c422-175440643ea1.gif)

Vuesaxが今すぐ実装されているため、アプリケーションの準備が整いました

Vuesaxについて読む時間をとってくれてありがとう

## リンク

- [Vuesax](https://lusaxweb.github.io/vuesax/)
- [Github Vueasx](https://github.com/lusaxweb/vuesax)
- [Vue CLI](https://cli.vuejs.org/)
- [webpack](https://webpack.js.org/)
- [NPM vuesax](https://www.npmjs.com/package/vuesax)
ABC108解き直してみた

# ABC108解き直してみた

表題通りです。[ABC108](https://abc108.contest.atcoder.jp/)

それでは、

## A問題

K以下の偶数の数 × K以下の奇数の数ですね。Kの偶奇で場合分けするといいでしょう。

```cpp:A.cpp
#include <iostream>
#include <string>
#include <vector>
#include <algorithm>
#include <cmath>

using namespace std;

int main() {
	int k;
	cin >> k;
	if (k%2==0) {
		cout << (k/2)*(k/2) << "\n";
		return 0;
	}
	cout << ((k-1)/2)*((k+1)/2) << "\n";
	return 0;
}
```

## B問題

真面目にやるんだったら、回転行列とか書くんでしょうが、簡単に下図を書けば、十分に一般的です。

![B_1.png](https://qiita-image-store.s3.amazonaws.com/0/286943/c4f26dc2-2c79-6189-a706-1c3e177fc1f2.png)

```cpp:B.cpp
#include <iostream>
#include <string>
#include <vector>
#include <algorithm>
#include <cmath>

using namespace std;

int main() {
	int x1,y1,x2,y2;
	cin >> x1 >> y1 >> x2 >> y2;
	int a = x2 - x1;
	int b = y2 - y1;
	int x3 = x2 - b;
	int y3 = y2 + a;
	int x4 = x3 - a;
	int y4 = y3 - b;
	cout << x3 << ' ' << y3 << ' ' << x4 << ' ' << y4 << "\n";
	return 0;
}
```

## C問題

「a+bがkで割り切れる」⇔「a%k+b%kがkで割り切れる」ですね。
式の対称性から、
「a%k = b%k = c%k = 0　or　a%k = b%k = c%k = k/2(ただしkが偶数)」
の時だけを拾えば良いです。

```cpp:C.cpp
#include <iostream>
#include <string>
#include <vector>
#include <algorithm>
#include <cmath>

using namespace std;

int main() {
	long n,k;
	cin >> n >> k;
	long mod_0 = 0, mod_half = 0;
	for (long i=1;i<=n;++i) {
		if (i%k==0) ++mod_0;
		if (k%2==0 && i%k==k/2) ++mod_half;
	}
	cout << mod_0*mod_0*mod_0 + mod_half*mod_half*mod_half << "\n";
	return 0;
}
```
なんか、longを使わないと、微妙に桁あふれするようなので、できる限りlongを使って行きましょう。

## D問題

これは、コンテスト時にはわかりませんでした。終了後、解説を見たのですが、しばらく考えて、ようやくわかりました。

まず、ノードの数が、20以下なので、

$$
2^r < L
$$
となる最大の$r(<20)$を取ってきて、$r+1$個のノードを作りましょう。なぜ、$2^r$にするのかというと、__2進数と関係があります__。以下のように、辺を生やしましょう。

![D_1.png](https://qiita-image-store.s3.amazonaws.com/0/286943/2907abd5-4923-c22d-0913-5d4e3a61c3c3.png)

ノード$1$からノード$r+1$までのパスの長さは、$2^i$を選ぶか、$0$を選ぶかで、2進数で表現できます。よって、$0, 1, 2, 3, ...,2^r-1$までのパスが一本ずつ構成できます。

さて、ここでノード$i$からノード$r+1$へ長さ$X$の辺を張ったとしましょう。新しく辺を張ったことにより、この辺を通る$X, X+1, ..., X+(2^{i-1}-1)$のパスが一本ずつ新たにできました。この作業により、$2^r<=L$の時に、足りないパスを張って行きましょう。ノード$r$からノード$1$まで、順番に見ていって、もし、$2^r <= L$なら、今いるノード$i$から、$X = L - 2^{i-1}$の辺を張りましょう。これにより、$0, 1, ...,2^r-1$と$X,X+1, ...,L-1$のパスができます。足りないのは、$2^r, ...,X-1$のパスなので、$L$から$2^{i-1}$減らして($L$を$X$にして)次のノードに行きましょう。

```cpp:D.cpp
#include <iostream>
#include <string>
#include <vector>
#include <algorithm>
#include <cmath>

using namespace std;

int main() {
	long l;
	cin >> l;
	long r;
	for (r=1;r<=19;++r) {
		if (l < pow(2,r)) {
			break;
		}
	}
	--r;
	vector<vector<long>> ans;
	for (long i=1;i<=r;++i) {
		ans.push_back({i,i+1,0});
		ans.push_back({i,i+1,static_cast<long>(pow(2,i-1))});
	}
	for (long i=r;i>=1;--i) {
		if (l - pow(2,i-1) >= pow(2,r)) {
			ans.push_back({i,r+1,l-static_cast<long>(pow(2,i-1))});
			l -= pow(2,i-1);
		}
	}
	cout << r+1 << ' ' << ans.size() << "\n";
	for (auto each_ans : ans) {
		cout << each_ans[0] << ' ' << each_ans[1] << ' ' << each_ans[2] << "\n";
	}
	return 0;
}
```
Raspberry pi に液晶を取り付ける


## 実際のブツ
![image](https://www.waveshare.com/w/thumb.php?f=3.5inch-RPi-LCD-A_l.jpg&width=450)
https://www.waveshare.com/wiki/3.5inch_RPi_LCD_(A)
千石電商さんに3000円ほどで売ってました。
WAVESHARE社製の3.5インチLCD液晶です。日本語の情報が思ったほどなかったので
ちょっとビビりましたが特段躓くこともなくドライバのインストール~動作までこぎつけられました。

ユーザーマニュアルは[こちら](https://www.waveshare.com/w/upload/3/3e/RPi-LCD-User-Manual.pdf)


## 事前準備とドライバのインストール

[上記URL](https://www.waveshare.com/wiki/3.5inch_RPi_LCD_(A))にインストールの仕方も書いてありました。

```
$ sudo raspi-config
# 以下を選択
# Advanced Option -> Expand Filesystem
# Boot options -> Desktop / CLI -> Desktop Autologin
```

```
$ wget https://www.waveshare.com/w/upload/1/1e/LCD-show-180817.tar.gz
$ tar xvf LCD-show-180817.tar.gz 
$ cd LCD-show/
$ chmod +x LCD35-show
$ ./LCD35-show
$ sudo reboot
```

何回かちょいちょい再起動が入りますが気にせず続けます。

## 取り付け方

ラズパイの角とぴったり合うように取り付けるだけです。
写真は後で貼り付けます。

## 再起動

再起動すると液晶にラズパイのデスクトップが表示されます。

## フィルムをはがして使う

フィルムが張ってあるので注意しましょう。数秒気づきませんでした。

## TODO

* カメラと一緒に使う方法があるらしいのでそれも分かり次第追記します。
* バーチャルキーボードがないと文字入力できないので後でインストールします。
Sider（旧Side CI） の ESLint  v5 で「No files matching the pattern "." were found.」

## 問題：ESLint で Oops! Something went wrong! :(

GitHub で利用できる自動コード・レビューサービス[「`Sider`」（旧`SideCI`）](https://sider.review/ja)で Javascript の構文チェッカー「`ESLint`」を有効にすると、以前は発生していなかった以下のエラーが発生する。

> 2018-08-13T23:37:12Z
> Oops! Something went wrong! :(
> ESLint: 5.1.0.
> No files matching the pattern "." were found.
> Please check for typing mistakes in the pattern.


## TL;DR

ESLint のバージョンが v4.x 系から v5.1.0 になったことによる動作仕様変更です。

`eslint` を実行しても**指定したディレクトリ下に Javascript ファイルが１つもないとエラーが返される**ようになりました。`.js` ファイルを設置するまで `ESLint` を無効にするか、以下のいずれかをお試しください。

### 対処法1

> `sideci.yml`に対象ディレクトリを追加する

「`sideci.yml`」の**「`linter:`」設定に「`eslint`」がない場合**、デフォルトで使われる `dir` 設定が「`.`」となりレビューに失敗するので、**明示的にディレクトリのパスを指定**します。

```yaml:sideci.yml
linter:
  eslint:
    dir: “./*”
```


#### 参考文献

- [Issue #10530 Invalid warning about Webpack config after upgrading to 5](https://github.com/eslint/eslint/issues/10530) | ESLint @ GitHub
- [Issue #10599 ESLint 5.1.0 - No files matching the pattern for several repos](https://github.com/eslint/eslint/issues/10599) | ESLint @ GitHub

### 対処法２

> ダミーの`js`ファイルを設置する

```javascript:dummy.js
function hello(name) {
    document.body.textContent = "Hello, " + nama + "!"
}

hello("World");
```

#### 参考文献
- [ESLint 最初の一歩](https://qiita.com/mysticatea/items/f523dab04a25f617c87d) @ Qiita
- <details><summary>Siderオンライン・サポート</summary><div>
<img width="259" alt="スクリーンショット 2018-09-10 17.45.43.png" src="https://qiita-image-store.s3.amazonaws.com/0/78776/8abccff0-8cf5-edac-42fe-6340858e3630.png">
</div></details>


## TS;DR

先日までパスしていた「`sideci.yml`」の設定で、「`README.md`」ファイルを修正したところ、以下のエラーでレビューを通りませんでした。

> 2018-08-13T23:37:12Z
> Oops! Something went wrong! :(
> ESLint: 5.1.0.
> No files matching the pattern "." were found.
> Please check for typing mistakes in the pattern.

エラー内容を見ると、ESLint の対象ディレクトリの探索パターンが「`.`」であることが原因のようで `ESLint v4.x` 時代には発生しませんでした。

該当リポジトリの Sider 設定で ESLint を有効にはしているものの、今後のために有効にしているだけで、実際には対象となる JavaScript は（まだ）ありません。

同様の不具合が v5.1.0 からあるらしく、「`sideci.yml`」に明示的に「`dir: "./*”`」を設定したところレビューがパスされるようになったので、デフォルトの設定の見直しが必要なのかと思い[サポートに問い合わせた](https://qiita-image-store.s3.amazonaws.com/0/78776/8abccff0-8cf5-edac-42fe-6340858e3630.png)ところ、**ESLint v5 からの仕様**であるとのこと。「Javascript ファイル置いたらエラーが出なくなるので設置してね」ということに。
【初級】Dockerコマンドチート 〜images + container delete → pull → run → container in → commit〜

Dockerにおける一番はじめによく行う以下の動作コマンドを忘れないように記載しておきます。

1. 既存のimages or containerを削除
2. イメージをpullします。
3. pullしたイメージを起動(run)してcontainerを生成します。
4. 起動したcontainerに入ります(in)。
5. 作業をして、イメージに対してcommitします。
6. 最後にDockerHubに対してpushします。


### 1. 既存のimages or containerを削除

**container削除**

```bash
$ docker rm `docker ps -a -q`
```
もし、`Error response from daemon:`とエラーがでる場合にはCONTAINER IDを抽出して`--force`オプションで削除します。

```bash
$ docker ps --format "table {{.ID}} {{.Names}}"
CONTAINER ID        NAMES
79157a49118d berserk_curie

$ docker rm --force 79157a49118d
79157a49118d

$ docker ps --format "table {{.ID}} {{.Names}}" 
CONTAINER ID        NAMES
# なくなりました。
```
`"table {{.ID}} {{.Names}}"`をつけることで出力するカラムを指定しています。

**image削除**

```bash
$ docker rmi `docker images -aq`
```

### 2. イメージをpullします。
今回は、`debian`のイメージをpullします。

```bash
$ docker pull debian:latest
```

```bash
$ docker images
REPOSITORY          TAG                 IMAGE ID            CREATED             SIZE
debian              latest              f2aae6ff5d89        5 days ago          100.6 MB
```

### 3.pullしたイメージを起動(run)してcontainerを生成します。
pullしたimageを起動してCONTAINERを生成します。
execを使ったやり方など色々ありますが、今回はシンプルにrunとattachを利用していきます。

```bash
$ docker run -itd debian
388e45913a52ed4665c1a673de1e75039ceb12b4ca31db6f2ae5689c0352de69
```
`-d` : バックグランド実行

```bash
$ docker ps -a --format "table {{.ID}} {{.Names}}" 
CONTAINER ID        NAMES
388e45913a52 high_engelbart
```

### 4. 起動したcontainerに入ります(in)。
CONTAINER IDを指定してattachしていきます。

```bash
$ docker ps -a --format "table {{.ID}} {{.Names}}" 
CONTAINER ID        NAMES
388e45913a52 high_engelbart

$ docker attach 388e45913a52
root@388e45913a52:/# 
```

### 5. 作業をして、イメージに対してcommitします。


```bash
root@388e45913a52:/# touch test.list //適当なファイル作成
root@388e45913a52:/# exit
exit
$ docker commit 388e45913a52 add_test.list
sha256:dd09ff64419d04ef96c64b6b67719ffc3d9a9461707b0d9c926b170e2376ff1d
$ docker images -a
REPOSITORY          TAG                 IMAGE ID            CREATED             SIZE
add_test.list       latest              dd09ff64419d        2 days ago          100.6 MB //増えている
debian              latest              f2aae6ff5d89        5 days ago          100.6 MB

$ docker run -it add_test.list ls -la test.list
-rw-r--r-- 1 root root 0 Sep  8 01:03 test.list
```

以上です。
普段開発する際は、docker-composeやDockerfileなどを利用することが多くなると思います。
その場合には、まだ別の操作に必要になりますのでぜひ調べてみてください。

おまけ
Dockerでホストをコンテナ内にマウントする

```
$ docker run -v [ホストディレクトリの絶対パス]:[コンテナの絶対パス] [イメージ名] [コマンド]
```
at coder beginner contest 005

B
高橋君は試作したたこ焼きを食べることにしました。 
高橋君は熱々のたこ焼きが好きなので、できてすぐのたこ焼きから食べます。 
それぞれのたこ焼きが何秒前にできたかが与えられるので、一番できたてのたこ焼きが何秒前にできたか出力して下さい。 

```
#include<iostream>
#include<vector>
#include<algorithm>
using namespace std;
int main() {
	int N, b=110,T[110];
	cin >> N;
	for (int i = 0; i < N; ++i) {
		cin >> T[i];
		b = min(b, T[i]);
	}
	cout << b << endl;
}
```
最小値をどんどん取っていく方法

```
#include<iostream>
#include<vector>
#include<algorithm>
using namespace std;
int main() {
	int N;
	cin >> N;
	int min = 101;
	vector<int>T(N);
	for (int i = 0; i < N; ++i) {
		cin >> T[i];
		if (T[i] < min) {
			min = T[i];
		}
	}
	cout << min << endl;
}
```
vectorを使う

```
#include<iostream>
#include<algorithm>
using namespace std;
int main() {
	int N;
	cin >> N;
	int a[110];
	for (int i = 0; i < N; ++i) {
		cin >> a[i];
	}
	sort(a, a + N);
	cout << a[0] << endl;
}
```
sortを使う

C
高橋君は、たこ焼きをどの順番で売るか悩んでいました。というのも、作り置きされたたこ焼きは美味しくないとわかっているので、高橋君はそのようなたこ焼きを売りたくないのですが、できたてばかり売ってしまうと売れるたこ焼きの数が減ってしまいます。 
また、お客さんを待たせてばかりだと、次第にお客さんが離れてしまうだろうと高橋君は考えています。
そこで、彼は T 秒以内に作成されたたこ焼きを売り続けることで、お客さんを捌ききれるかどうかを調べることにしました。
たこ焼きは A1、A2、…、AN 秒後に焼きあがります。
お客さんは B1、B2、…、BM 秒後にやってきます。
1 人のお客さんに対して、たこ焼きを 1 つ売るとします。すべてのお客さんにたこ焼きを売れるならyes、売れないならnoを出力して下さい。 

```
#include<iostream>
using namespace std;
int main() {
	int t, n, m;
	cin >> t >> n;
	int a[110], b[110];
	for (int i = 0; i < n; ++i)cin >> a[i];
	cin >> m;
	for (int i = 0; i < m; ++i)cin >> b[i];
	bool ans = n >= m;
	int tako = 0,cus = 0;
	while (ans&&cus < m) {
		if (b[cus] < a[tako]) {
			ans = false;
		}
		else if (b[cus] > a[tako] + t) {
			++tako;
			if (tako == n) {
				ans = false;
			}
		}
		else {
			++tako;
			++cus;
		}
	}
	if (ans)cout << "yes";
	else cout << "no";
	cout << endl;
}
```
まず考えるのはbool値でうまく客にたこ焼きを渡せたらtrue渡せなかったらfalseになるようなやつ。あとは貪欲法？
PayPal Sandbox環境について

こんにちは

PayPal Sandbox環境でexpress checkoutをテストしています。

テストは順調に進み、本番環境に切り替えようかというタイミングで突如、webサイトのsandbox環境のPayPal Checkoutボタンをクリックしても画面がログイン画面に遷移しなくなりました。

なんの反応も無いというのではなく、一瞬画面が立ち上がり、すっと消えてしまうという感じです。

Sandboxのメンテナンスが以下の時間帯にあるのでこれが関係しているのかなと思いながらも、PayPal　Status Pageのステータスは「All Sandbox Systems Operational」となっています。

Maintenance Start: Sep 11, 04:00 UTC
Maintenance End: Sep 11, 11:00 UTC

何か仕様が変わり、従来のscriptが突然使えなくなるようなことがあるのでしょうか？

そういうことだと運用が不安定になりそうで、非常に怖いです。何かアナウンスがあったとかなのでしょうか。


自分で調べてはいるのですが、何かご存知の方いらっしゃいましたら教えて頂けますと助かります。

追記：scriptなどは何も変更していません。当投稿が9/10 18:00過ぎですが、少なくとも9/10 11:00までは問題なく動いていました。

追記：21:30に再度確認したところ、問題なく画面遷移しました。勿論何の変更もしていません。時間帯によってうまくいったりうまくいかなかったりということがあるのでしょうか。本番環境含め今後しばらくウォッチして何か気づきがあったら追記します。動きが不安定なのはやはりちょっと怖いですね。
Raspberry piのSDカードのバックアップとレストア

環境はUbuntu 16.04、コマンドはすべてrootで実行しています。

## 1. デバイスの特定

ラズパイのOSが入ったSDカードを指して `fdisk -l` を実行
この例だと `/dev/mmcblk0` がddコマンドの対象(ifパラメータ)になる

```
# fdisk -l
Disk /dev/sda: 477 GiB, 512110190592 bytes, 1000215216 sectors
Units: sectors of 1 * 512 = 512 bytes
Sector size (logical/physical): 512 bytes / 512 bytes
I/O size (minimum/optimal): 512 bytes / 512 bytes
Disklabel type: dos
Disk identifier: 0xa11e823f

デバイス   起動     Start 最後から セクタ  Size Id タイプ
/dev/sda1  *         2048  966846463 966844416  461G 83 Linux
/dev/sda2       966848510 1000214527  33366018 15.9G  5 拡張領域
/dev/sda5       966848512 1000214527  33366016 15.9G 82 Linux スワップ / Solaris

# ここがSDカード。容量とかであたりを付ける
# ddのifに渡すのは /dev/mmcblk0 になる。
Disk /dev/mmcblk0: 14.8 GiB, 15836643328 bytes, 30930944 sectors
Units: sectors of 1 * 512 = 512 bytes
Sector size (logical/physical): 512 bytes / 512 bytes
I/O size (minimum/optimal): 512 bytes / 512 bytes
Disklabel type: dos
Disk identifier: 0xb7ba065b

デバイス       起動 Start 最後から セクタ  Size Id タイプ
/dev/mmcblk0p1       8192    93814    85623 41.8M  c W95 FAT32 (LBA)
/dev/mmcblk0p2      94208 30930943 30836736 14.7G 83 Linux
```

## 2. ddコマンドでバックアップ作成

```
# dd if=/dev/mmcblk0 of=/tmp/RPI−tensorflow-keras.img bs=1M
```


## 3. 空のSDカードに差し替えてumountする

コマンドたたくのが面倒で、Nautilusからマウントを外しちゃいました。
画面左のボリューム一覧の部分にSDカードが新しく出てくるのでそこのEjectボタン的なのを押しました。

## 4. ddコマンドでレストア。

```
# dd if=/root/RPI−tensorflow-keras.img of=/dev/mmcblk0 bs=1M
```

## 進捗を確認

pkillコマンドというものがあってそれで確認できました。

※Macでこれをやるとddがkillされちゃうらしいので注意。

```
# pkill -USR1 dd
----------------------
# 別ターミナルでdd実行中の画面
# dd if=/root/RPI−tensorflow-keras.img of=/dev/mmcblk0 bs=1M 
9733+0 レコード入力
9733+0 レコード出力
10205790208 bytes (10 GB, 9.5 GiB) copied, 795.021 s, 12.8 MB/s
11936+0 レコード入力
11935+0 レコード出力
12514754560 bytes (13 GB, 12 GiB) copied, 993.262 s, 12.6 MB/s
12818+0 レコード入力
12817+0 レコード出力
13439598592 bytes (13 GB, 13 GiB) copied, 1072.74 s, 12.5 MB/s
12892+0 レコード入力
12892+0 レコード出力
13518241792 bytes (14 GB, 13 GiB) copied, 1079.82 s, 12.5 MB/s
```

## と、ここまで来て

容量が足りないと怒られる。メーカーは違うけど16GB表記なんだけどなんで？？？？
FDISKで容量を確認すると確かに違う。。。。同じの買えってことなのか？
これじゃバックアップ気軽にとれないんだけどな。

```
# SDカードA
Disk /dev/mmcblk0: 14.8 GiB, 15836643328 bytes, 30930944 sectors

# SDカードB
Disk /dev/mmcblk0: 14.4 GiB, 15487467520 bytes, 30248960 sectors
```

## 容量の小さいほうをベースにするとうまくいく

結局コピー元とコピー先をひっくり返したら上手くいきました。なんだかなぁって感じですが。

コピー元を作るときは最小限の容量のカードで、実際に使うものは一回り大きいサイズの物を使う
って感じの運用が良さげかもしれません。ddで8GB->16GBのコピーはやったことがないですが、
公式のイメージは4GBちょっとで、16GBにddで書き込んだらルートのパーティション拡張して
よしなにやってくれたので、初回起動時とか `raspi-config` とかが上手いことやってくれそうな気がします。
Excelファイルをaxiosで扱うときのメモ

## ハマったポイント

サーバ処理

```go
return c.Blob(http.StatusOK, "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", buf.Bytes())
```

上記のレスポンスをaxiosでExcelデータとして取得し,処理する時

```js
axios.get('/ex').then(res=>{
    let blob = new Blob([res.data]);
     ....
});
```

これだと，ファイルは文字化けしてしまう．

## ミス
axios.getは***デフォルトが一度文字列***として，処理する．

## 解決策
getでファイルタイプを選択しておく．

```js
axios.get('/ex',{
    responseType:'blob',
    dataType:'binary',
}).then(res=>{
    let blob = new Blob([res.data]);
     ....
});
```
pandas_profiling で列名が日本語のときに相関プロットのラベルが豆腐（文字化け）になるのをなんとかする

# どういうこと？

列名が日本語のデータを

``` input.csv
列1,列2
1,3
2,4
3,3
4,4
```

pandas-profilingにかけると

```py
import pandas as pd
import pandas_profiling

df = pd.read_csv('input.csv')
prof = pandas_profiling.ProfileReport(df)
prof.to_file('output.html')
```

相関のプロットのラベルに含まれる日本語が文字化けして豆腐になります。
matplotlib でよく見るやつです。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/40309/1e25b95b-1819-8719-8f72-e7e6185da574.png)

環境によっては以下のようなエラーが出ます。(Ubuntuの場合)

```
UserWarning: findfont: Font family ['sans-serif'] not found. Falling back to DejaVu Sans
```

エラーメッセージから matplotlib のエラーだと分かるので、以下のようにコードを変更してみましたが、うまくいきません。

```py
import pandas as pd
import pandas_profiling

# フォント指定
import matplotlib
matplotlib.rcParams['font.family'] = 'MigMix 1M'

df = pd.read_csv('input.csv')
prof = pandas_profiling.ProfileReport(df)
prof.to_file('output.html')
```

## フォントについて

MigMix 1M なのは趣味です。
Ubuntuでのフォントのインストールからmatplotlibへの反映までは以下を参照してください。

- [Linuxだからできないなんて言わないよ Ubuntu Fontのインストール その１](http://tenten909.blog.shinobi.jp/%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0%E9%96%A2%E9%80%A3/ubuntu%20font%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%20%E3%81%9D%E3%81%AE%EF%BC%91)
- [ubuntuでmatplotlibのfontを設定 - Qiita](https://qiita.com/gymnstcs/items/50432a12fb9139b316bc)
- [MigMix 1M](http://mix-mplus-ipa.osdn.jp/migmix/#migmix1m)

# なぜ？

[pandas-profiling Font family not found](https://www.google.com/search?q=pandas-profiling+Font+family+not+found) で検索すると [Issue #95 · pandas-profiling/pandas-profiling · GitHub](https://github.com/pandas-profiling/pandas-profiling/issues/95) がヒットしました。
読んでみると、 pandas-profiling で用意している設定ファイル `pandas_profiling.mplstyle` で上書きされているようです。

# どうすればいい？

`pandas_profiling.mplstyle` を上書きします。
場所は、 `pandas_profiling.__file__` と同じディレクトリです。

ファイルの以下の部分を

```
font.family: sans-serif
font.sans-serif: Arial, Liberation Sans, Bitstream Vera Sans, sans-serif
```

次のように変更します。

```
font.family: sans-serif
font.sans-serif: MigMix 1M, Arial, Liberation Sans, Bitstream Vera Sans, sans-serif
```

`font.family: sans-serif` を `font.family: MigMix 1M` にするのでもいいかもしれません。

再度実行するとプロットに日本語が表示されます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/40309/37b7589d-4039-3160-099f-9c7e4d7e3470.png)

pandas_profiling.ProfileReport の引数あたりで `matplotlib.rcParams` 形式が指定できるようになると楽だと思います。
Cloudinaryから取得した画像URLをhttpsに変更する

## 環境

* Ruby 2.4.0
* Rails 5.0.2

## やりたいこと

Railsで作成していたアプリケーションの画像のストレージにCloudinaryを使っていた。
表示されている画像のパスを見ると、`http`になっていたので、`https`で表示されるようにしたかった。

## 試したこと

[https://qiita.com/t_fujise/items/537ef2b24b55741e36d5](https://qiita.com/t_fujise/items/537ef2b24b55741e36d5)こちらを参考にしてみたのですが、自分の環境ではhttps化を実現することは出来ませんでした。


## 実現できた方法

公式のドキュメントを漁っていたところoptionsに関する記述を見つけました。
[Ruby On Rails integration](https://cloudinary.com/documentation/rails_integration#configuration_options)

`config/cloudinary.yml`の設定ファイルに設定を記述していきます。

```yaml
production:
  cloud_name: "sample"
  api_key: "874837483274837"
  api_secret: "a676b67565c6767a6767d6767f676fe1"
  cdn_subdomain: true
```

https化する前は上記のような記述だったのですが、以下のように`secure: true`を追加し変更します。

```yaml
production:
  cloud_name: "sample"
  api_key: "874837483274837"
  api_secret: "a676b67565c6767a6767d6767f676fe1"
  secure: true
  cdn_subdomain: true
```

これでCloudinaryから引っ張って来る画像のURLがhttpsに変わります。
[rails]新規プロジェクト作成時のメモ(準備)

# railsプロジェクト始動でやったことメモ
今回railsプロジェクトでやったことをメモに残そうと思います。
rubyとかrailsとかrbenvは入ってる前提ですみません。。

## rubyのバージョンを最新に。
まずはrubyのバージョンを上げたいと思います。
https://www.ruby-lang.org/ja/downloads/
↑ここで最新バージョン確認
今回は2.5.1が安定版っぽいので2.5.1にしたいと思います。

```terminal
$ruby -v
→ruby 2.4.1p111
```

2.4.1なので2.5.1に変えたい。

```terminal
$rbenv versions
...
...
*2.4.1
```
このリストの中に2.5.1がないのでrubyをupdateしないとだめ？

```terminal
$rbenv install -l
...
...
2.4.1
...
```
めっちゃ出てきたけどここにもない。。

```terminal
$brew update
$brew upgrade rbenv ruby-build
```
brew updateしてrbenvもupgradeします。

```terminal
$rbenv install -l
...
...
2.5.1
...
```
もう一回rbenv install -lしたら今度は2.5.1がありました。

```terminal
$rbenv install 2.5.1
```
2.5.1が入りました。
rbenv versionsで確認します。

```terminal
$rbenv versions
...
*2.4.1
2.5.1
```
2.5.1が入りました！ので、2.5.1にバージョンを変更します。

```terminal
$rbenv global 2.5.1
$ruby --version
```

で確認すると2.5.1にバージョンが変更されてると思います。

## railsもバージョンを最新に。
```terminal
$rails -v
```
rails -vで確認。
railsってコマンド無いよって怒られたので

```terminal
$rbenv exec gem install bundler
$gem install rails
```
を実行

```terminal
$rails -v
```
で最新バージョンが入ってることが確認できました！

## プロジェクトの作成
```terminal
$rails new app --database=mysql --webpack=vue --skip-test
```
--databaseでデータベースを指定し、
--webpack=vueでwebpackerでvueのインストール?を指定し、
--skip-testでデフォルトのミニテストを追加させないようにする。

でとりあえず完成です。
pyenv install に失敗して BUILD FAILED と表示される

### TL;DR;


```sh:
$ xcode-select --install
```
xcode command line toolsをインストールする

### pyenv install の ERROR 表示
```sh:
$ pyenv install 3.7.0
python-build: use openssl from homebrew
python-build: use readline from homebrew
Downloading Python-3.7.0.tar.xz...
-> https://www.python.org/ftp/python/3.7.0/Python-3.7.0.tar.xz
Installing Python-3.7.0...
python-build: use readline from homebrew

BUILD FAILED (OS X 10.13.6 using python-build 20180424)
.
.
.
make: *** [install] Error 1
```

### ERROR の原因
新旧 Mac で macOS を移行した際に、xcode command line tools をインストールし忘れたため、
何だかんだで小一時間ほどハマってしまった。
VSCodeでNimのデバッグ(ステップ実行)

## 概要

(追記)2018/09/11 Windows,Macでも動作確認できました。

VSCodeでNimアプリケーションのデバッグ＆ステップ実行できますよ

### VSCodeでのデバッグ

こちらの[記事](https://github.com/pragmagic/vscode-nim/issues/65)を参考に、とりあえず自分のLinux/Windows/Mac開発環境で試してみました。
Nimのバージョンは、0.18.0です。

以下、設定の手順となります。

* Native-Debugプラグインをインストールする
* コンパイルタスクを設定し、コンパイルする
* デバッグ設定をする
* ブレークポイントの設定をし、デバッグ実行を行う

### Native-Debugプラグインをインストール

拡張機能より、"Native Debug"を検索し、インストールします。
インストール後は、VSCodeの再起動をしておいたほうが良いでしょう(たぶん)。

![Screenshot from 2018-09-10 16-27-07.png](https://qiita-image-store.s3.amazonaws.com/0/58872/7ea02460-4c7d-aee1-dbcf-0a1fe98bd4c4.png)

### コンパイルタスクを設定する

tasks.jsonを作成・変更します。
"command"でコンパイルする対象のnimファイル(test.nim)は適宜置き換えて下さい。
ctrl+shift+bでビルドします。

```json:.vscode/tasks.json
{
	"version": "2.0.0",
	"tasks": [{
		"label": "Build Debug",
		"type": "shell",
		"command": "nim c -d:debug --debuginfo --lineDir:on --debugger:native test.nim",
		"group": {
			"kind": "build",
			"isDefault": true
		},
	}]
}
```

### デバッグ起動設定を行う

デバッグウィンドウを表示し、「構成がありません」の右隣の設定ボタンをクリックし、
選択肢の中から「C++(GDB/LLDB)」を選択します。(※「GDB」でも良いかもしれません。後述)
(追記：Windowsでは選択肢として表示されません。「GDB」を選択してください)

![Screenshot from 2018-09-10 16-44-51.png](https://qiita-image-store.s3.amazonaws.com/0/58872/09c7cd90-312a-f698-2141-855d8a778875.png)

launch.jsonがデフォルト表示されますので、「program」属性の中身を、ビルド設定後生成される実行ファイル名に置き換えます。

```json:launch.json
{
	"version": "0.2.0",
	"configurations": [
		
		{
			"name": "(gdb) Launch",
			"type": "cppdbg",
			"request": "launch",
			"program": "${workspaceFolder}/test",
			"args": [],
			"stopAtEntry": false,
			"cwd": "${workspaceFolder}",
			"environment": [],
			"externalConsole": true,
			"MIMode": "gdb",
			"setupCommands": [
				{
					"description": "Enable pretty-printing for gdb",
					"text": "-enable-pretty-printing",
					"ignoreFailures": true
				}
			]
		}
	]
}

```

「GDB」を選択した場合は、以下のシンプルな起動エントリになるようです。
Windowsでは、こちらの設定となりました。
ちなみにこちらでもデバッグ実行はできました。

```json:.vscode/launch.json
		{
			"type": "gdb",
			"request": "launch",
			"name": "Launch Program",
			"target": "./test",
			"cwd": "${workspaceRoot}"
		},
```



### ブレークポイントの設定を行い、デバッグ実行を行う

ソースの行番号の左側をクリックすることで、ブレークポイント設定がトグルされます。
その後、以下のいずれかの手段で、デバッグを開始します。

* F5キー
* ツールバーの緑色の右向き△ボタン
* メニューバーの「デバッグ」-「デバッグの開始」

下記のキャプチャ画面では、ブレークポイントに停止し、ローカル変数の値が参照できていることが確認できます。
(※Nim上のコードから、ステップインするとC言語のソースに入ったりします。）

![Screenshot from 2018-09-10 16-51-31.png](https://qiita-image-store.s3.amazonaws.com/0/58872/924a17f9-c7a6-2057-52f5-dd6a0ecaa173.png)

ちなみに、構成の違いによるデバッグ時の特徴としては以下のものでした。

* C++(GDB/LLDB)の場合は、別ターミナルが表示される
* GDBの場合は、別ターミナルは表示されない

## まとめ

VSCodeによるNimのデバッグ(ブレークポイント＆ステップ実行等)ができることが確認できました。
いままでは、Echoによるデバッグばかりでツラタンでしたが、ステップ実行ができるなら、
Nimの勉強効率＆開発効率もかなり上がるのではと思います。

~~今回はLinux上でのデバッグ方法の紹介でしたが、Mac/Windowsでもできるとは思いますので、
どなたかチャレンジしていただければと思います。~~

（2018/9/11追記）Linux,Windows,Macいずれも動作確認できました。
WinServ2012r2でバックアップが失敗する……

```
USN　ジャーナル内に不整合があります。操作を再試行してください。
```
ってなんだろ？？？

https://barracuda.atlassian.net/wiki/spaces/BB/pages/65929419/Agent+USN
これか……

```
fsutil usn queryjournal C:
fsutil usn deletejournal /D C:
```

ただ他の日では成功しているし
エラーメッセージが
```
別の操作が進行中のため、操作は失敗しました。操作を再実行してください。
```
って出るんだよな……
http://odasusu.hatenablog.com/entry/2013/08/02/111351

```
タスクマネージャの[設定]タブで、以下の2項目を変更する。
•「スケジュールされた時刻にタスクを開始できなかった場合、すぐにタスクを実行する」のチェックを外す
•「タスクが既に実行中の場合に適用される規則」で「新しいインスタンスを開始しない」を選択
```
かな？と思ったけどタスクマネージャーに設定タブがない……
【PHP】文字列に日本語以外の文字が半分以上含まれているかを判別する方法

スパム的な文章を弾くために、日本語以外の文字が一定割合以上含まれているかどうかを判別したいことがあったので、その方法を書いていきます。**（正確には全角文字と半角文字の判別をする形になります）**

## 全角文字と半角文字の割合を算出する

全角文字と半角文字の割合を判別するために、`mb_strlen`と`mb_strwidth`を使用します。

### mb_strlen

> **mb_strlen — 文字列の長さを得る**
文字列の長さを取得します。

[引用元：PHP: mb_strlen - Manual](http://www.php.net/manual/ja/function.mb-strlen.php)
mb_strlenは、シングルバイト文字もマルチバイト文字も1としてカウントして長さを取得します。つまり文字数を取得するための関数となります。

### mb_strwidth

> **mb_strwidth — 文字列の幅を返す**
string str の幅を返します。 半角文字は 1 として、 全角文字は 2 として数えます。

[引用元：PHP: mb_strwidth - Manual](http://www.php.net/manual/ja/function.mb-strwidth.php)
mb_strwidthは、文字列のバイト数を取得するための関数となります。

### mb_strlenとmb_strwidthを利用して割合算出

基本的には、バイト数から文字数を引くことで全角文字(マルチバイト文字)の数を算出することができます**（絵文字などの4バイト文字などが含まれていない場合）**。全角文字数を取得できたら、後はその値を文字数で割れば全角文字の割合を出すことができます。

```php
$hoge = "Helloワールド";

$len = mb_strlen($hoge, "UTF-8");
$str_w = mb_strwidth($hoge,"UTF-8");

// 全角文字の割合
$multibyte_rate = ($str_w - $len) / $len;
// 半角文字の割合
$singlebyte_rate = 1 - $multibyte_rate;

if($singlebyte_rate >= 0.5){
	echo '半分以上が半角文字です';
}
```

## まとめ

mb_strlenとmb_strwidthを使用して文字数とバイト数を取得することで、絵文字などの4バイト文字が含まれていない限りは全角文字の割合を出すことができます。なので、日本語と英語（半角文字）の割合などは、基本この方法を使って算出できると思います。
Setup node.js express server on IIS

## Pre-condition
1. Setup IIS and your web side
2. Install [Node.js](https://nodejs.org/en/)
3. Install [iisnode](https://github.com/azure/iisnode/wiki/iisnode-releases)

## Install express
```common-lisp:install_express
npm install express --save
```
If not use `package.json` to manage package, don't need add `--save`

## Run express server
```javascript:index.js
const express = require('express');
const port = process.env.PORT; //This is for get port from IIS

var app = express();
app.get('/api', (request, response) => {
    response.write('express run on IIS');
    response.end;
});

app.listen(port);
```
Then open your index page `http://localhost:[port]/api`, then you should see `express run on IIS` one web page

## Use app.route() to combine get/post
```javascript:index.js
const express = require('express');
const port = process.env.PORT; //This is for get port from IIS

var app = express();
app.route('/api')
    .get((req, res) => {
        res.send('express get method')
    })
    .post((req, res) => {
        res.send('express post method')
    });

app.listen(port);
```
【Python】OpenCVの顔認証するときにとあるWebサイトを参考にしてつまった方、ご覧ください


##[Python + OpenCV で顔検知のWebサイト](https://www.kunihikokaneko.com/dblab/improc/facedetect.html)
上記WebサイトでOpenCVを使って顔認証する方法を紹介をされていますが
いかんせん、情報社会で世の中の移ろいも早く、
そして、コード実行時に詰まったので、備忘録を記しておきます。


Webサイトの項目は、Windows環境であれば
【OpenCV パッケージのインストール】の項目まで問題なくいくはずです。

以降の【プログラム例】から注意してください。

```python:Webに記載されているプログラム例
import cv2
import numpy as np

######ここでのディレクトリの指定に注意##################################
face_cascade = cv2.CascadeClassifier('C:\ProgramData\Anaconda3\pkgs\opencv-3.2.0-np112py36_204\Library\etc\haarcascades\haarcascade_frontalface_alt.xml')
#####################################################################

bgr = cv2.imread('d:/lena.jpg', cv2.IMREAD_COLOR)#レナPicは任意の場所にする
gray = cv2.cvtColor(bgr, cv2.COLOR_BGR2GRAY)

face_rects = face_cascade.detectMultiScale(gray, 1.1, 3)
if len(face_rects) > 0:
    for (x,y,w,h) in face_rects:
        cv2.rectangle(bgr, (x,y), (x+w,y+h), (0,255,255), 4)
else:
    print("no faces")
        
cv2.imshow("Face Detector", bgr)
print("press any key to exit")
c = cv2.waitKey()

cv2.destroyAllWindows()

```
コメントで囲っている箇所は要注意です。
例として載っているので、もちろんまるコピしてもエラーになります。
※ここまでのサンプルって結構ていねいにのせてくれている方ですよ。

openCVも都度バージョンが変わります。
2018年9月10日段階で既に3.4.2です。
しかも、今日知ったのですがパッケージディレクトリの後の中で
openCVのパッケージフォルダの仕様がややこしく変わっています。

ハウハウしました。

【旧表示(Web)】：opencv-3.2.0-np112py36_204
【最新表示】：libopencv-3.4.2-h20b85fd_0

頭に【lib】とかついてるし!

私はAnacondaを使っているので

```python:openCVをインストールする(管理者権限のコマンドプロンプトで実施)
conda install -y opencv 
```
上記実行すると、opencv-3.4.2-py36h40b0b35_0のフォルダが出来るのですが
そのあとのLibraryフォルダがないのです!

途方に暮れて、pkgsディレクトリの右上んとこの検索スペースで【haarcascade_frontalface_alt.xml】と検索すると
【libopencv-3.4.2-h20b85fd_0\Library\etc\haarcascades】というフォルダ内に存在することが判明。

色々と大人の事情はあるのでしょうが、
こういうのちょいちょいやられると地味に嫌です。

でも、ひとつ賢くなりましたよ。
皆様のお役にたてれば何よりです。
pandasは2262-04-12以降の日付を変換できない

# どういうこと？

例えば、中身が下記のようなファイルを

``` input.txt
date
20180910
20171228
20190702
23000501
```

`pandas.read_table` や `pandas.read_csv` で以下のように読み込んでも日付に変換されません。

```py
import pandas as pd
df = pd.read_table('input.txt', parse_dates=['date'])
print(df)
```

```
       date
0  20180910
1  20171228
2  20190702
3  23000501
```

# なぜ？

`pandas.Timestamp` で定義されている日付の範囲を超えているからです。

実際、先程のコードに続いて `pd.to_datetime(df['date'])` と実行すると、

```
OutOfBoundsDatetime: Out of bounds nanosecond timestamp: 2300-05-01 00:00:00
```

というエラーが出ます。

エラーメッセージで検索してみると以下QAが該当します。
[python - pandas out of bounds nanosecond timestamp after offset rollforward plus adding a month offset - Stack Overflow](https://stackoverflow.com/questions/32888124/pandas-out-of-bounds-nanosecond-timestamp-after-offset-rollforward-plus-adding-a)
どうやら未来の日付は `pd.Timestamp.max` の値である `Timestamp('2262-04-11 23:47:16.854775807')` までしか変換できないようです。

試してみると、 `pd.to_datetime('2262-04-11')` は変換できますが、
`pd.to_datetime('2262-04-12')` は `OutOfBoundsDatetime` エラーになります。

# どうすればいい？

`parse_dates` オプションの指定による変換を諦めて、例えば以下のような処理をします。
未来すぎる日付は潔く `NaT` にしてしまいましょう。

```py
import pandas as pd

# 文字列として読む
df = pd.read_table('input.txt', dtype={'date': str})
# pd.Timestamp.max 以降の日付をNaNとする
df.loc[df['date'] > f'{pd.Timestamp.max:%Y%M%d}', 'date'] = pd.np.nan
# NaNはNaTになる
df['date'] = pd.to_datetime(df['date'])
print(df)
```

その他の日付形式へは各自読み替えてください。