OmniAICreator/Qiita-1.07M huggingface dataset:
React Native version mismatch



expo.ioにて作成したアプリ

React Native version mismatchエラーが出た解決のメモ




```
watchman watch-del-all

rm -rf node_modules &&  && npm i

rm -rf /tmp/metro-bundler-cache-*

npm start -- -- reset-cache

rm -rf /tmp/haste-map-react-native-packager-*

```





```
console.error: "React Native version mismatch.

JavaScript version: 0.57.1
Native version: 0.55.4


Make sure that you have rebuilt the native code. If the problem persists try clearing the Watchman and packager caches with `watchman watch-del-all && react-native start --reset-cache`."


```


```
  "dependencies": {
    "@expo/samples": "2.1.1",
    "expo": "^32.0.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
```




```

 
 ```
vuex




# Vue CLI3 



# Setup

## Installation

まずはVue CLI3のインストールから

[Installation | Vue CLI 3](https://cli.vuejs.org/guide/installation.html)


```shell
npm install -g @vue/cli
# OR
yarn global add @vue/cli
```

完了したらVersionを表示してインストール完了チェック

```shell
vue --version
```

`vue serve` `vue build`を使うためにアドオンを追加

```shell
npm install -g @vue/cli-service-global
```



## Vueプロジェクト作成

### vue create

vue create コマンドでプロジェクトを作成する。

```
vue create first-project
```

以下のようにプリセットを使うか、マニュアルで作成するか選択を促される。
今回は、Manualで進めてみます。


```shell
Vue CLI v3.4.1
? Please pick a preset:
  default (babel, eslint)
❯ Manually select features
```


Babel, ROuter, Vuex, CSS, Linter を選択

```
? Please pick a preset: Manually select features
? Check the features needed for your project:
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◉ Vuex
 ◉ CSS Pre-processors
 ◉ Linter / Formatter
❯◯ Unit Testing
 ◯ E2E Testing
```



 
 
```
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
```
















---


[Vuex とは何か？ | Vuex](https://vuex.vuejs.org/ja/)
Django チュートリアル: 地域図書館ウェブサイト　（その４）

Session を使って訪問回数を表示します。
![session_mar1702.png](https://qiita-image-store.s3.amazonaws.com/0/179446/7197cf2d-6369-d796-0ef2-bcfb46a579cd.png)


こちらで作成したページの続きです。
[Django チュートリアル: 地域図書館ウェブサイト　（その３）](https://qiita.com/ekzemplaro/items/8580f00c107b70726ceb)

こちらのページで行っているのと同じ内容です。
[Django Tutorial Part 7: Sessions framework](https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Sessions)

1) catalog/views.py　へ追加

```py:catalog/views.py
（省略）
    num_authors = Author.objects.count()

# Number of visits to this view, as counted in the session variable.
    num_visits = request.session.get('num_visits', 0)  # 追加
    request.session['num_visits'] = num_visits + 1  # 追加


    context = {
        'num_books': num_books,
        'num_instances': num_instances,
        'num_instances_available': num_instances_available,
        'num_authors': num_authors,
        'num_visits': num_visits, # 追加
    }
（省略）
```

2) catalog/templates/catalog/index.html へ追加

```html:catalog/templates/catalog/index.html
（省略）
<p>あなたは {{ num_visits }} 回訪れました。</p>
{% endblock %}
```

3) 開発サーバーを起動して、ブラウザーでアクセス。
EC2にてnpm install yarn -gが失敗する

# 現象
Ruby on Railsで本番環境(production)でscss(css)が
反映されないので```$ rake assets:precompile RAILS_ENV=production```
しようと思ったらyarn入れろって怒られた。


```
[ec2-user@ip-xxx-xx-xxx-xxx hogehoge]$ rake assets:precompile RAILS_ENV=production
Yarn executable was not detected in the system.
Download Yarn at https://yarnpkg.com/en/docs/install
```

`$ npm install yarn -g`したらまた怒られた。

```
[ec2-user@ip-xxx-xx-xxx-xxx hogehoge]$ npm install yarn -g
npm WARN checkPermissions Missing write access to /usr/lib/node_modules
npm ERR! path /usr/lib/node_modules
npm ERR! code EACCES
npm ERR! errno -13
npm ERR! syscall access
npm ERR! Error: EACCES: permission denied, access '/usr/lib/node_modules'
npm ERR!  { Error: EACCES: permission denied, access '/usr/lib/node_modules'
npm ERR!   stack: 'Error: EACCES: permission denied, access \'/usr/lib/node_modules\'',
npm ERR!   errno: -13,
npm ERR!   code: 'EACCES',
npm ERR!   syscall: 'access',
npm ERR!   path: '/usr/lib/node_modules' }
npm ERR!
npm ERR! The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user
npm ERR!
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator (though this is not recommended).

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/ec2-user/.npm/_logs/2019-03-17T00_34_58_378Z-debug.log
```

# 解決法
sudoしましょう。。

```
[ec2-user@ip-xxx-xx-xx-xx hogehoge]$ sudo npm install yarn -g
/usr/bin/yarn -> /usr/lib/node_modules/yarn/bin/yarn.js
/usr/bin/yarnpkg -> /usr/lib/node_modules/yarn/bin/yarn.js
+ yarn@1.13.0
added 1 package in 0.486s
```

# 結果
幸せな世界が訪れました。
めでたしめでたし。

```
[ec2-user@ip-xxx-xx-xx-xx hogehoge]$ rake assets:precompile RAILS_ENV=production
yarn install v1.13.0
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
Done in 0.13s.
```
RailsでAPI作成

#APIとは
API は Application Programming Interface の略。
インプットしたデータに対して、処理をしてアウトプットしてくれるソフトウェア的なもの。

#やること
① routes 作成
② controller にてメソッドの作成
③ JavaScript にてリクエストを送る

#postリクエスト
基本的にデータを送るときはpostリクエストを使う。
##① routes 作成

```ruby:routes.rb
Rails.application.routes.draw do
  namespace :api do
    resources :posts, only: %i(create)
  end
end
```

## ② controller にてメソッドの作成


```ruby:api_controller.rb
class Api::PostsController < ApplicationController
  def create
    @post = Post.new(data: params[:data])
    if @post.save
      render json: @post.to_json
    else
      render json: { status: 'NG' }, status: :bad_request
    end
  end
end

```


## ③ JavaScript にてリクエストを送る

関数は下のように書いて、イベントで関数を呼び出すたびにリクエストを送るように設定する。

```javascript:main.js
function doPost(data) {
   // URLの指定
   var url = url;

   // XMLHttpRequest
   var xhr = new XMLHttpRequest();
   xhr.open("POST", url);
   xhr.setRequestHeader("Content-Type", "application/json");
   xhr.onload = () => {
     console.log(xhr.status);
     console.log("success!");
     location.reload();
   };
   xhr.onerror = () => {
     console.log(xhr.status);
     console.log("error!");
   };

   // CSRF-Token
   var csrfToken = document.head.querySelector('meta[name="csrf-token"]').content;
   xhr.setRequestHeader('X-CSRF-Token', csrfToken);
   xhr.send(JSON.stringify(data));
}
```

#まとめ
実務でこのようにすべて書くということはないようですね。
それぞれのJavaScriptフレームワークにあった手法（ajaxなど）を使って、中身では上記のコードを実行していると理解しておいていただけるといいかと思います。

間違いなどがあればご指摘をお願いします。

## 参考
[リンク]https://qiita.com/keniooi/items/458732fc8f29cc8e445a
[リンク]http://semooh.jp/jquery/api/ajax/jQuery.ajax/options/

---
### 会社紹介

**株式会社 Mosaica**  
最先端テクノロジーで社会課題を解決し、持続可能な未来を創造する IT カンパニー。
AI ソリューション、クラウド統合、DX 推進、経営コンサルティングなど包括的なサービスでビジネス変革を支援しています。  

詳しくは [公式サイト](https://mosaica.co.jp/) までお気軽にご相談ください。
公式サイト： https://mosaica.co.jp/
#01「タグマネジメント」

#1.Point(要点)
  Googleタグマネージャとは？
  WebサイトのHTMLに埋め込まれている「**様々なツールのタグを一元管理する**」
  為のツール。
#2.Reason(理由)
Webサイト運営では、アクセス解析の「Googleアナリティクス」や広告配信の
「GoogleAdWords」などインターネットを通じ処理を行う様々な種類のツールを
HTMLのタグに埋め込んで行ったがある問題が発生。
#3.Example(具体例)
発生した問題。それは、「管理が大変」と言う事。以下は、代表的な問題。

**引用開始(「実践Googleタグマネージャ入門増強版」「畑岡大作」「2015年」「P.8」)**
・埋め込まれているタグの状況を把握しきれない
・Webページによってタグが異なる場合がありややこしい
・HTMLの編集を第三者に依頼している場合、即座にタグの追加や削除ができない
・外部のコンサルタントなどに現在のタグの利用状況を正しく伝えるのが難しい
**引用終了(「実践Googleタグマネージャ入門増強版」「畑岡大作」「2015年」「P.8」)**
#4.Point(要点)
そこで、上記の問題を解決する為の手段として生まれたのが「タグマネジメント」と
言う考え方で、「Googleタグマネージャ」を利用する事により、複雑だった
「タグマネジメント」を簡潔にする事が出来ます。
AWS認定学習メモ

## IPsec encription

[IPsec - Wikipedia](https://en.wikipedia.org/wiki/IPsec)

## サービス可用性

稼働率に対するダウンタイム表

|稼働率|ダウンタイム|
|:--|--:|
|99.9%|8.76時間/年|
|99.95%|4.38時間/年|
|99.99%|52.56分/年|
|99.999%|5.26分/年|

## 参考

[AWS Certified Solutions Architect (Associate)(Safari Online Bools)](https://learning.oreilly.com/videos/aws-certified-solutions/9780135229415)
Emacs に markdown-mode を入れる 


## 目的 ##
  * Emacsでmarkdownファイルの編集を快適に行う
  * Emacsで作成したmarkdownファイルをGithubの体裁でHTML表示する

## 用語 ##
### パッケージ/プログラム ###
  * markdown-mode/gfm-mode  
  Emacsのmarkdownファイルの編集モード用パッケージ。  
  * markdownパーサ  
  markdown形式で書いたファイルを、HTMLファイルに変換するためのプログラム。markdown-mode/gfm-modeから呼び出される。  
  各プログラムによって、生成されるHTMLファイルに軽微な差異がある。

### markdown-mode内変数 ###

|変数名|説明|
|:---|:---|
|markdown-command|markdownパーサの実行コマンドを設定する|
|markdown-command-needs-filename|markdownパーサのコマンドのファイル入力要否を設定する|
|markdown-content-type|HTMLファイルのmetaタグに記載されるContent-Typeを設定する|
|markdown-css-paths|HTMLファイル内で読み込むCSSファイルのパスを設定する|
|markdown-xhtml-header-content|HTMLファイルのヘッダ部に挿入する内容を設定する|

## 環境 ##
  * OS  
  macOS Mojave (10.14.3)
  * Emacs  
  GNU Emacs 26.1

## 導入手順概要 ##
1. markdown パーサの導入
github-markupと、github-markupの内部で呼び出されるcommonmakerをインストールする。
gemを利用する。

1. markdown-modeのインストール
markdown-modeをインストールする（gfm-modeもインストールされる）。
package.elとMELPAリポジトリ（melpa-stable）を利用する。

1. init.elの編集
markdown-mode内変数を適切に設定する。
markdown-css-pathsにはGithubのCSSファイルを設定する。
markdown-xhtml-header-contentには、bodyタグに対するCSSと、bodyタグにclassを追加するjavascriptを設定する。（GithubのCSSファイルの記述はbodyタグに"markdown-body"classが付与されていることを想定しているのため）

## 導入手順 ##
1. markdown パーサの導入

	``` shell
	sudo gem install github-markup commonmarker
	```  

1. markdown-modeのインストール
`M-x package-install RET markdown-mode RET`

1. init.elの編集

``` elisp
;;++++++++++++++++++++++++;; 
;; markdown-mode settings ;;
;;++++++++++++++++++++++++;;
(use-package markdown-mode
 	     :commands (markdown-mode gfm-mode)
	     :mode (("\\.md\\'" . gfm-mode)
		    ("\\.markdown\\'" . gfm-mode))
	     :config
	     (setq
	      markdown-command "github-markup"
	      markdown-command-needs-filename t
	      markdown-content-type "application/xhtml+xml"
	      markdown-css-paths '("https://cdn.jsdelivr.net/npm/github-markdown-css/github-markdown.min.css")
	      markdown-xhtml-header-content "
<style>
body {
  box-sizing: border-box;
  max-width: 740px;
  width: 100%;
  margin: 40px auto;
  padding: 0 10px;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', () => {
  document.body.classList.add('markdown-body');
});
</script>
" ))
```

## 参考URL ##
[markdown-modeで“GitHub Flavored Markdown”を実現する](https://qiita.com/ybiquitous/items/34a4c3cb33f26136f670)

## Future Work ##
  * シンタックスハイライト
  * Table入力時のキーバインド
  * CSSファイルのパス（ここでいいのか）
Koa.js で同期処理


### なんで？
そもそもNodeの環境は非同期型だという認識が甘くてすこしはまったのでメモ書きしておきます。

### Node は非同期型の環境
Node は非同期の環境であり、他の言語とは大きく違います。
時間がかる処理Aが存在するとします。同期型の環境ではAが終わるのを待ってから次のBを実行します。それに対して非同期型の環境ではAをスキップしてBを実行してしまうのです。これは以下の簡単な実験で試すことができます。

**Python(同期型の環境)**

``` exe.py
import time

def sayHello():
  time.sleep(2)
  print("hello")

sayHello()
print("hello2")
```

**Node(非同期型の環境)**

```exe.js
function sayHello(){
  setTimeout(function(){
    console.log("hello");
  },2000);
}

sayHello();
console.log("hello2");
```


sayHello関数が時間のかかる処理に当たります。
PythonではsayHello()処理が完了するまで2秒待った後に次の処理が実行されます。
``2秒待つ > hello出力 > hello2出力``
Nodeでは、sayHello()処理が一度呼ばれるものの、即座に次の処理が実行されます。
``hello2出力 > 2秒経つ > hello出力``

JavaやPHPやPythonなど多くの言語は同期型のようです。Nodeは非同期型です。

### 非同期型でウェブ開発する上での問題点
非同期型でWeb開発していると困ってしまうことがあります。それは、遅延処理があった場合、処理が終わる前に画面レンダリングされてしまう、ということです。他のAPI から値を取得するために遅延する場合、DBからデータを取得するための遅延する場合などが該当します。


```app.js
const Koa = require('koa');
const app = new Koa();

app.use(async ctx => {
  setTimeout(()=>{
    ctx.body="hello"
  },2000);
});

app.listen(3000);

// ブラウザの画面にはNot Found と表示された(helloとは表示されない)
```

## Promiseで同期処理
Promise はこの問題を解決してくれます。Promise は処理が終わるのを待って、終わり次第結果を返してくれるオブジェクトです。処理が成功したときにはresolve()、失敗したときにはreject()を呼びます。Promiseオブジェクトはthen()で発火できます。

```promiseHello.js
const delayHello = new Promise((resolve,reject)=>{
  setTimeout(()=>{
    resolve("hello!");
  },2000);
});

delayHello.then((value)=>{
  console.log(value);
})

// 2秒待ってからhello と出力される
```

Koa でPromise をうまく使うとこんな感じになります！

``` app.js
const Koa = require('koa');
const app = new Koa();

const  sayHello  =  new  Promise((resolve,reject)=>{
  setTimeout(()=>resolve("hello!"),5000);
})

app.use(async ctx => {
  sayHello.then((value)=>{
    ctx.body = value;
  );
  // もしくはawait でもっと綺麗にかける
  // const value = await sayHello;
  // ctx.body = value;
});

app.listen(3000);
```

リポジトリ置いとくのでよかったらどうぞ！
https://github.com/yoneda/koa-templete/
ElectronからCORSが有効なAPIサーバーに対してアクセスしたい

Electron上から、外部サーバーに存在するAPIを叩く際に、サーバー側のCORSが有効になっていることから、アクセスができなかったのを解決する方法を調べたのでメモです。
# CORSとは？
セキュリティ上の理由から、ブラウザーは、スクリプトによって開始されるオリジン間 HTTP リクエストを制限しています。例えば、 XMLHttpRequestや Fetch API は同一オリジンポリシーsame-origin policyに従います。つまり、これらの API を使用するウェブアプリケーションは、そのアプリケーションが読み込まれたのと同じオリジンからのみ HTTP リソースのリクエストを行うことができ、それ以外のオリジンからの場合は正しい CORS ヘッダーを含んでいることが必要です。
（[MDNのオリジン間リソース共有 (CORS)](https://developer.mozilla.org/ja/docs/Web/HTTP/CORS)の項目より引用）

# Electronでの解決方法
解決方法をさまよっていて、[このスレッド](https://github.com/electron/electron/issues/1990)を見つけました。それに従い、[公式ドキュメント](https://github.com/electron/electron/blob/master/docs/api/browser-window.md)を参照してみて、以下の設定をしたところ、`Electron`の中でAPIとの通信用に`axios`ライブラリを利用していたのですが、レスポンスを受け取ることができました。

`index.js`内部で`Electron`のウィンドウを生成するのに`BrowserWindow`が呼ばれていると思いますが、そのパラメータに以下を設定します。

```js
webPreferences: {
    webSecurity: false
}
```

自分は社内ツールの作成に`Electron`を利用しているだけなので、この方法だけで解決しましたが、不特定多数のユーザーが利用するケースで`Electron`を使用している場合、他に考慮する必要があるものがあるかもしれません。
ディレクトリ内のpdfをまとめてimagemagickで二値化する

cygwin上で実施。要imagemagick, ghostscript
~~むちゃくちゃメモリを使う。32Gでギリギリだったが、
limit_memory_size=10280MBとできるようにした。~~
convertでpdfから画像を作るときに地獄のようにメモリを
使うようなので、pdftoppm にそこの部分を変更。
これにより、要 Poppler 。convertはいずれにせよ二値かなどで使うので、
binary_threshold, limit_memory_sizeを指定できるのはそのまま。
thresholdの値は、事前にpdftoppm で画像にしたものなどで調整するとよい。
（pre-testの部分）

~~text~~

```bash
#!/bin/bash

#convert -threshold 30000 seihi_even.pdf-001.png seihi_even_test_005_bin.png

binary_threshold=40000
limit_memory_size=5140MB

for ls_result in $(ls *.pdf) ; do

    processing_pdfname=$ls_result
    pagenumber=$(gs -q -dNODISPLAY -c "($processing_pdfname)  (r) file runpdfbegin pdfpagecount = quit")
    echo "processing " $processing_pdfname " ..."

    for ((i=1; i < $pagenumber; i++)); do
    
        #insert 0 or 00
        if [ $[$i] -le 9 -a $[$pagenumber] -ge 100 ];then
            ZERO=00
        elif [ $[$i] -le 9 -a $[$pagenumber] -lt 100 ];then
            ZERO=0
        elif [ $[$i] -le 99 -a $[$pagenumber] -ge 100 ];then
            ZERO=0
        elif [ $[$i] -le 99 -a $[$pagenumber] -lt 100 ];then
            ZERO=''
        else
            ZERO=''
        fi
    
        pdftoppm -png -f $i -l $i $processing_pdfname $processing_pdfname

        #echo "making binary " ${processing_pdfname}-${ZERO}${i}_bin.png " ..."
        convert -limit memory $limit_memory_size -threshold $binary_threshold ${processing_pdfname}-${ZERO}${i}.png ${processing_pdfname}-${ZERO}${i}_bin.png 
        rm ${processing_pdfname}-${ZERO}${i}.png

    done

    #echo "making pdf " ${processing_pdfname}_bin.pdf " ..."
    convert -limit memory $limit_memory_size ${processing_pdfname}-*_bin.png ${processing_pdfname}_bin.pdf
    rm ${processing_pdfname}-*_bin.png

done


```

関連技術は以下参照

https://qiita.com/NickTominaga/items/1040b5a15074ace9fcc5
https://qiita.com/NickTominaga/items/25dad0749d3a4be59d8e
https://qiita.com/NickTominaga/items/23a054e0b42735a6d99c
【Payjp】データベースと顧客情報を紐付ける方法

###前回の記事
【Payjp】payjp.jsを用いてトークンを取得する方法
https://qiita.com/kubbo0211/items/0030c00cea8461b1a498

#概要
本記事ではJSファイルで作成したトークンを用いてデータベースにPayjpの顧客情報を保存する方法を解説します。

データベースに顧客情報を保存する事によって得られるメリットとして下記があるのでデータベースに保存しておくのが吉。

・ユーザーは毎回クレジットカード情報を入力する事なく支払いを実行することが可能
・ユーザーはクレジットカード情報の変更、削除などが行える

#前提

・Payjp.jsを用いてトークン取得済
・パラメーターとしてトークンID送信済

#データベースに顧客情報を保存
フォームが送信されてpayjp.jsファイルでトークンが作成されると、コントローラー側で処理をします。

``` payments_controller.rb
  def create
    Payjp.api_key = 'skから始まるテスト秘密鍵'
    customer = Payjp::Customer.create(card: params[:payjpToken])
    @payment = Payment.new(user_id: current_user.id, customer_id: customer.id, card_token: params[:payjpToken])
    if @payment.save
      redirect_to root_path
    else
      redirect_to new_payment_path
    end
  end
```

###手順
・Payjp.api_keyにテスト秘密鍵をセットします。
・Payjp::Customer.createで顧客作成
　→バリューはパラメーターで送られてきたトークン
<img width="905" alt="スクリーンショット 2019-03-17 5.03.20.png" src="https://qiita-image-store.s3.amazonaws.com/0/346998/a1d85866-ab2a-f8c2-bcfe-a0fa202aebe7.png">
・new, saveでデータベースにuser_id, customer_id, card_tokenを保存

ここでcustomer_idのバリューに置いたcustomer.idについて説明しておきます。
まずcustomerにトークンを用いて作成された顧客情報を導入します。

```payments_controller.rb
customer = Payjp::Customer.create(card: params[:payjpToken])
```
顧客作成後レスポンスとして返ってくるのは下記になります。

```
{
  "card": {
    "address_city": null,
    "address_line1": null,
    "address_line2": null,
    "address_state": null,
    "address_zip": null,
    "address_zip_check": "unchecked",
    "brand": "Visa",
    "country": null,
    "created": 1442290383,
    "customer": null,
    "cvc_check": "passed",
    "exp_month": 2,
    "exp_year": 2020,
    "fingerprint": "e1d8225886e3a7211127df751c86787f",
    "id": "car_e3ccd4e0959f45e7c75bacc4be90",
    "livemode": false,
    "metadata": {},
    "last4": "4242",
    "name": null,
    "object": "card"
  },
  "created": 1442290383,
  "id": "tok_5ca06b51685e001723a2c3b4aeb4",
  "livemode": false,
  "object": "token",
  "used": false
}
```
上記の"id": "tok_5ca06b51685e001723a2c3b4aeb4"が顧客IDで、支払い時などにも利用するものになるのでcustomer_idカラムにcustomer.idとして顧客IDを保存します。

```payments_controller.rb
@payment = Payment.new(user_id: current_user.id, customer_id: customer.id, card_token: params[:payjpToken])
```

（Usersテーブルにcustomer_idを追加するといったやり方でも可能ですが、2枚目のクレジットカード登録に対応できないためpaymentsテーブルを作成しています）
とあるエンジニアの問題意識 2019-03-16


# エンジニア は現代の大工。

この思い方が、しっくりくる。 <https://t.co/R34nuelhEH> 
# テクノロジーを理解するという行為さえ理解できなくて困る。

なぜテクノロジーなんていうものを人間が理解できるのかが不思議でならない。

エンジニア <https://t.co/twnqov5ihu> 
# プログラミングをしていると、思い通りに行かないことがあまりにも多すぎて、鍛えられる。
自然は思い通りにならないものだというが、その感覚にさえ近い。自我を手放す修行かもしれない。 エンジニア。

# Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/795








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
初めまして...

# 初めまして...

## はじめに
私は学生時代から将来のキャリアにソフトウェアの開発に関わる仕事を行いたいと思いました。その中で私はiosアプリの開発で使用されるSwiftに興味を持ち、「iosアプリのリリース」、「既存アプリの最適化」などを行っておりました。
自身のアカウントでは、iosアプリの情報や知識を投稿し、皆様との知識、知性の共有の場の実現をさせたいと思い投稿活動を始めさせていただきます。また、私はアプリ以外の開発も投稿することもありますので、フォローとコメントいただければ幸いです。
何卒宜しくお願い致します。
pandas-profilingを使うとjapanize-matplotlibが無効になってしまう

## はじめに
Jupyter Notebookで作業をしていると、愛用させていただいている[japanize-matplotlib](https://qiita.com/uehara1414/items/6286590d2e1ffbf68f6c)が突然無効になってしまい、豆腐だらけになってしまった。
どうやら、pandas-profilingを使った後、無効になってしまう模様。

## 対処法
pandas-profilingのフォント設定が影響しているので、pandas-profilingのフォント設定を変更する。
具体的にはpandas_profiling.mplstyleの中身を変更するだけ。

```pandas_profiling.mplstyle

# 変更前
font.sans-serif: Arial, Liberation Sans, Bitstream Vera Sans, sans-serif

# 変更後（IPAexGothic を追加）
font.sans-serif: IPAexGothic, Arial, Liberation Sans, Bitstream Vera Sans, sans-serif
```

## 参考
[pandas_profiling で列名が日本語のときに相関プロットのラベルが豆腐（文字化け）になるのをなんとかする](https://qiita.com/yubiquita/items/9c056e175ccb085eb137)
WKWebView で JS を使用して値を取得する 3 つの方法

# 環境

- Swift 4.2
- iOS 12.1
- Xcode 10.1


# 方法

JS 部分は `document.documentElement.innerHTML` としてます。

## 1. evaluateJavaScript(_:completionHandler:) を使う

https://developer.apple.com/documentation/webkit/wkwebview/1415017-evaluatejavascript

```swift
webView.evaluateJavaScript("document.documentElement.innerHTML") { value, error in
    print(value as? String)
}
```

一番良く見るやり方。
このコードを実行する場合、読み込みが完了した [WKNavigationDelegate の webView(_:didFinish:)](https://developer.apple.com/documentation/webkit/wknavigationdelegate/1455629-webview) 内などで実行する。

## 2. evaluteJavaScript を同期的に

UIWebView の [stringByEvaluatingJavaScript(from:)](https://developer.apple.com/documentation/uikit/uiwebview/1617963-stringbyevaluatingjavascript) 的な感じで。

```swift
extension WKWebView {
    
    @discardableResult
    func evaluate(javaScript script: String) -> String? {
        var result: String?
        var isCompletion: Bool = false
        
        self.evaluateJavaScript(script) { value, _ in
            result = value as? String
            isCompletion = true
        }
        
        while !isCompletion { RunLoop.current.run(mode: .default, before: Date() + 0.1) }
        return result
    }
}
```

値が取得できるまで 0.1 秒ずつ待って、取得できたら値を返す。っていうイメージです。

同期処理なので、もちろん重い処理などは特に工夫したほうがいいですね。

`DispatchSemaphore` で実現しようとすると、デッドロックが発生しうまくいきません。
そもそも `evaluateJavaScript(_:completionHandler:)` は(UI系の操作も可能なため)メインスレッドでの実行を求められ、引数の closure もメインスレッドで実行されるため。

## 3. WKScriptMessageHandler を使う

これは日本語の解説記事があんまりなかったイメージ。

```swift
let js = """
var html = document.documentElement.innerHTML;
webkit.messageHandlers.getHtml.postMessage(html);
"""
        
let script = WKUserScript(source: js, injectionTime: .atDocumentEnd, forMainFrameOnly: true)
webView.configuration.userContentController.addUserScript(script)
webView.configuration.userContentController.add(self, name: "getHtml")
```

```swift
extension ViewController: WKScriptMessageHandler {
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        print(message.name) // "getHtml"
        print(message.body) // HTML全文
    }
}
```

気をつけるべきポイントとしては、上記コード例でいう2箇所の `getHtml` の部分は一致してなければいけません。

[この stack overflow の回答](https://stackoverflow.com/a/40730365) のように、 extension を用意すると便利かもしれません。

# 参考
- https://qiita.com/ngyoi/items/ec580a2f9365d18b729a
- https://qiita.com/wassen/items/fc1aaffa16a49cf6ea8b
- https://stackoverflow.com/questions/24049343/
- https://stackoverflow.com/questions/34751860/

他にも方法があれば教えてください。
間違いのご指摘もお願いします！
Qiitaで使える数式記法

Qiitaのマークダウン記法は数式を書けるみたいです。これからは記事ネタで数学、物理学の数式・公式が出てくる場合に便利に使えそうです

## 例
### 微分係数
関数 y = f(x) の x = a における微分係数は次の式で定義されます

```math
f'(a) = \lim_{h \to 0} \frac{f(a+h)-f(a)}{h} \\
または\;f'(a) = \lim_{Δx \to 0} \frac{f(a+Δx)-f(a)}{Δx}\\
```
この数式は以下のように記述します

```
f'(a) = \lim_{h \to 0} \frac{f(a+h)-f(a)}{h} \\
または\;f'(a) = \lim_{Δx \to 0} \frac{f(a+Δx)-f(a)}{Δx}\\
```

### 導関数
微分係数は個々の値 a によって決まります。x の値に個々の値 a を対応させる関数と見たときに、下記を関数 y=f(x) の **導関数** または **微分係数** といいます。

```math
f'(x) = \lim_{h \to 0} \frac{f(x+h)-f(x)}{h} \\
または\;f'(x) = \lim_{Δx \to 0} \frac{f(x+Δx)-f(x)}{Δx}\\
```
この数式は以下のように記述します

```
f'(x) = \lim_{h \to 0} \frac{f(x+h)-f(x)}{h} \\
または\;f'(x) = \lim_{Δx \to 0} \frac{f(x+Δx)-f(x)}{Δx}\\
```
KubernetesのCoreDNSはホストの/etc/hostsを使ってくれないのでConfigMapにレコードを追加する

# 経緯

kubeadmでK8s環境を作っていて気付いたのですが、最近採用されているCoreDNSはホストの/etc/hostsを使ってくれません。すると何が困るかというと、例えばmetrics-serverのようにノードのメトリクスを取得するPodはノード名に対して接続をしようとするので、ノード名がDNSにないと名前解決ができません。

# 対処

CoreDNSのConfigMapにhostsエントリを追加してレコードを記述します。

```
$ kubectl edit cm coredns -n kube-system

# Please edit the object below. Lines beginning with a '#' will be ignored,
# and an empty file will abort the edit. If an error occurs while saving this file will be
# reopened with the relevant failures.
#
apiVersion: v1
data:
  Corefile: |
    .:53 {
        errors
        health
        # 以下追加
        hosts {
           192.168.11.nn xxx
           192.168.11.nn yyy
           192.168.11.nn xxx
           fallthrough
        }
        # ここまで
        kubernetes cluster.local in-addr.arpa ip6.arpa {
           pods insecure
           upstream
           fallthrough in-addr.arpa ip6.arpa
        }
        prometheus :9153
        proxy . /etc/resolv.conf
        cache 30
        loop
        reload
        loadbalance
    }
kind: ConfigMap
metadata:
  name: coredns
  namespace: kube-system
  (略)
```

するとhostsに記述したレコードで名前解決できるようになります。CoreDNSのPodが設定をリロードするまで少し待つ必要があります。

以上です。
[メモ] Python 仮想環境(venv)

Pythonの仮想環境を探していて一番使えそうだなと思った`venv`についてのメモ

## 必要パッケージ
+ python3
+ python3-venv

## 仮想環境構築

```bash
python3 -m venv vpy
cd vpy
source bin/activate # 仮想環境有効化
…
deactivate # 仮想環境無効化
```
Future Option 地獄の対処法 - OptionTの使い方 (Scala)

実コードでは引数の依存や仕様で順番は変えられないものを想定
OptionTを使わない場合と使う場合のコード例
for式を二重にする方法は取り出した値がOptionに包まれた状態で、次のgeneratorで利用できないためここでは触れない

```scala
import scalaz.OptionT
import scala.concurrent.{Await, ExecutionContext, Future}
import scala.concurrent.duration.Duration

object Hello extends App {
  import scala.concurrent.ExecutionContext.Implicits.global
  import scalaz.Scalaz._
  import Factories._

  // 実コードでは引数の依存や仕様で順番は変えられないものを想定
  private val option: Option[String]                = Option("hoge")
  private val futureOption: Future[Option[String]]  = Future.successful(Some("fuga"))
  private val future: Future[Piyo]                  = Future.successful(Piyo("piyo", "piyo"))
  private val futureOption2: Future[Option[String]] = Future.successful(Some("moge"))

// OptionTを使わない場合
  val futureOptionString: Future[Option[String]] = option
    .map(
      hoge =>
        futureOption.flatMap(
          _.map(
            fuga =>
              future.flatMap {
                case Piyo(piyo, piyopiyo) =>
                  futureOption2.map(_.map(moge => s"$hoge $fuga $piyo $piyopiyo $moge"))
            }
          ).getOrElse(Future.successful(None))
      )
    ).getOrElse(Future.successful(None))
  val res1: Option[String] = Await.result(futureOptionString, Duration.Inf)

// OptionTを使った場合
  val optionT: OptionT[Future, String] = for {
    hoge                 <- option.toOptionT
    fuga                 <- futureOption.toOptionT
    Piyo(piyo, piyopiyo) <- future.toOptionT
    moge                 <- futureOption2.toOptionT
  } yield {
    s"$hoge $fuga $piyo $piyopiyo $moge"
  }
  val res2: Option[String] = Await.result(optionT.run, Duration.Inf)

  println(res1 == res2)
}

object Factories {
  import scalaz._
  implicit class RichOption[A](val opt: Option[A]) {
    def toOptionT(implicit ec: ExecutionContext): OptionT[Future, A] = OptionT(Future.successful(opt))
  }
  implicit class RichFutureOption[A](val f: Future[Option[A]]) {
    def toOptionT(implicit ec: ExecutionContext): OptionT[Future, A]               = OptionT(f)
    def toOptionTOption(implicit ec: ExecutionContext): OptionT[Future, Option[A]] = OptionT(f.map(Option(_)))
  }
  implicit class RichFuture[A](val f: Future[A]) {
    def toOptionT(implicit ec: ExecutionContext): OptionT[Future, A] = OptionT(f.map(Option(_)))
  }
}
case class Piyo(piyo: String, piyopiyo: String)

```
ALDS1_3_B - Queue

#問題概要
[問題のリンク](https://onlinejudge.u-aizu.ac.jp/courses/lesson/1/ALDS1/3/ALDS1_3_B)

名前 $name(i)$ と必要な処理時間 $time(i)$ を持つ $n$ 個のプロセスが順番に一列に並んでいる。各プロセス $q$ msだけ処理を実行する。プロセスが完了しなければ、列の最後尾に移動し、次のプロセスに処理が移行する。

全てのプロセスが終了するまで、プロセスが完了した順に名前と処理が終了した時間を出力せよ。

#制約条件
- $1 \leqq n \leqq 100,000$
- $1 \leqq q \leqq 1,000$
- $1 \leqq time(i) \leqq 50,000$
- $1 \leqq$ 文字列 $name(i)$ の長さ $\leqq 10$
- $1 \leqq$ $time(i)$ の合計 $\leqq 1,000,000$


#考えたこと
$q$ ms以内に処理が完了しなければデータは再びコレクションに戻るので、データを先頭から取り出し、末尾に詰めることができるキューを使う。

先頭のデータが $q$ 以下か $q$ より大きいかでデータに対する処理が変わるのでifで場合分けすればよい。 以下ロジックを簡潔に示したもの。$time$は累積していくので毎回足していくこと。

```
if (q > que) {
 time +=q;
 que.Enqueue(que.Dequeue()-q); //queの先頭から取り出して処理を加え戻す
}
else {
 time += que.Dequeue(); //timeにはqueの値を追加
 Console.WriteLine(time);
}
```

また今回の場合、出力に$name$と$time$がある。これを一つの$queue$で管理するのはめんどくさいので、$queue$を二つ作り、$name$と$time$を別のデータ構造の保管し、同時に処理を加えていくこと。


#解答
```b.cs
using System;
using System.Collections.Generic;
using System.Linq;

class Program
{
    static void Main(string[] args) {
        int[] s = Console.ReadLine().Split().Select(int.Parse).ToArray();
        int n = s[0];
        int q = s[1];
        Queue<string> que1 = new Queue<string>();
        Queue<int> que2 = new Queue<int>();
        for (int i = 0; i<n; i ++) {
            string[] str = Console.ReadLine().Split().ToArray();
            que1.Enqueue(str[0]);
            que2.Enqueue(int.Parse(str[1]));
        }
        int time = 0;
        while(que2.Count != 0) {
            if (que2.Peek()-q > 0) {
                time += q;
                que1.Enqueue(que1.Dequeue());
                que2.Enqueue(que2.Dequeue()-q);
            }
            else {
                time += que2.Dequeue();
                Console.WriteLine(que1.Dequeue() + " " + time);
            }
        }
    }
}
```

#キューの実装に関して

- 名前空間：`using System.Collections.Generic;` 
- 宣言： `Queue<string> que = new Queue<string>();`
- コレクションの末尾にデータを追加する： `que.Enqueue();`
- コレクションの先頭のデータを参照する: `que.Peek()`
- コレクションの先頭のデータを取り出す: `que.Dequeue();`
Ruby Gem Fakerでテスト用の人名を作成する

伊藤淳一さんの [チェリー本](https://www.amazon.co.jp/dp/B077Q8BXHC/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1) を読んでいたら、テスト用データを作るGemの [faker](https://rubygems.org/gems/faker) が例で出ており、使ってみると面白そうだったのでメモしておきます。
こちらの記事も参考にさせていただきました。ありがとうございます。
[Fakerでダミーデータを生成する](https://qiita.com/Keisuke69/items/edcaadc100361cf945e2
)

```ruby:GemFile
source "https://rubygems.org"  
gem 'faker'
```  

```bundle:install
$ bundle install --path vendor/bundle
```

```faker_sample.rb
require 'bundler/setup'
require 'faker'

def print_names
    10.times do 
        puts Faker::Name.name
    end
end

# 日本人名
Faker::Config.locale = :ja
print_names

# 英語人名
Faker::Config.locale = :en
print_names

# 中国人名
Faker::Config.locale = 'zh-CN'
print_names
```
- 結果

```
佐々木 空
岩崎 彩花
平野 裕子
藤本 楓
丸山 茜
渡辺 誠
井上 亮太
原 碧
河野 悠斗
竹内 太一
Romeo Wuckert
Fran Lakin
Floy Bradtke
Cuc Oberbrunner
Harold Reynolds
Clarence Okuneva
Mose Labadie
Enrique McLaughlin
Wilton Gutmann
Grover Goyette PhD
侯正豪
龙鹏飞
邱思源
白绍齐
段锦程
武熠彤
汪明杰
廖炎彬
钱瑾瑜
徐擎苍
```
結局、AWS（RDS）使った件

#初めに
ただの感想です。
仕事ではJAVAを触ってるが、プライベートでWEBアプリをつくる必要ができたので、ruby on railsとMySQLでアプリを作り出した。
折角だし、勉強がてらDockerとかも使って、DBもローカルに立てて環境構築の勉強もやろうと思って、色々触ってたが、心が折れた。

#何をやろうとしてたか
* Dockerので開発環境構築（初めて触る）
* ruby on railsでアプリ作成（ruby触ったことない）
* ローカルにMysqlたてて、railsアプリから繋ぐ（普段sql使ってるが環境構築はやったことない）

#心が折れた件
* Docker<br>
rails new してもファイルがダウンロードされなかったりで時間食った。早くコード書かせろ
* ruby on rails<br>
初めてだったしひとまず、デフォの設定でsqlite3使ってたが互換性問題で上手くいかない。Mysqlに変るとAccess deniedされる。早く「Yay! You’re on Rails!」したい。
* mySql<br>
railsアプリから繋ぐと、拒否される。DBeaverから繋いでも拒否される。mysqlコマンドは使えるし、色々ネットにでてる対象は諸々やったが良く分からん。そもそもローカルでやる必要なくね？本番環境にデプロイする時に同じようなことやるの辛すぎだわ。もう早くコード書きたいし、ここは諦めよう。

# 結局
AWS RDSを使うことにした。そもそも本番でもデータ量もアクセス数も大したことないので、無料枠+ちょっとでいけそうだし、アプリ自体もAWS使う予定なので最初に触っとけば便利そう。
AWSを自分で設定して使うのは初めてだったか、アカウント作成から1時間もかからすに「Yay! You’re on Rails!」までいった。

# 思ったこと
* AWS楽すぎてびびった
* 環境構築は開発やり始めて最初に心おられるとこだが、ここで心折れてプログラミングが嫌いになるなんて勿体なさすぎる。
* 世の流れはクラウドなので、AWS触った経験はこの後も役にたつ。
* エンジニアで言えばコード書いて製品つくるのが花形なので、環境周りをやりたい人は少ない。ここらへん知識があると無しでは結構差がつきそう。

今回苦しんだ結果、AWSスゲーって思ったし、クラウド周りへの興味が湧いてきた。
環境構築は、皆苦しむとこだと思うので、こっちの経験を積んでいくのもエンジニアとしては希少価値がでてきた面白いなと思いました。
WordPressの画像取得関数

WordPressの画像取得についていろいろ種類があり、
いつも混合して覚えているので毎回毎回毎回調べるので自分用まとめ

アイキャッチ画像のURLを取得

```
$image_url = get_the_post_thumbnail_url( $post, $size );
```

アイキャッチ画像のIDを取得

```
$image_id = get_post_thumbnail_id();
```

アイキャッチ画像を取得（ imgタグごと ）

```
$attr = array(
  'src'   => $src,	// アイキャッチ画像の URL
  'class' => "attachment-$size",	// 指定した大きさ
  'alt'   => trim( strip_tags( $attachment->post_excerpt ) ),	// アイキャッチ画像の抜粋
  'title' => trim( strip_tags( $attachment->post_title ) ),	// アイキャッチ画像のタイトル
);
$image = get_the_post_thumbnail( $post_id, $size, $attr );
// 値で取得しない場合は the_post_thumbnail()
```


指定したidのメディア画像を取得（ imgタグごと ）

```
$attr = array(
    'src'   => $src,
    'class' => "attachment-$size",
    'alt'   => trim( strip_tags( get_post_meta( $attachment_id, '_wp_attachment_image_alt', true ) ) ),
);
$image = wp_get_attachment_image( $attachment_id, $size, $icon, $attr ); 
```

指定したidのメディア画像URLを取得

```
$image_src = wp_get_attachment_image_src( $attachment_id, $size, $icon ); 
```
C++でzip (未完成)

C++で，複数の列からそれら各要素の同一インデックス同士の組を要素に持つ列を構成するzipを作ってみる．
手元の環境の制約からC++14上の実装を考えます．
もちろん，C++11でも，もっと新しい規格でもよいのですが…

とりあえず，まず始めに作成したコードはこれ[^wandbox1],[^wandbox2]です．まだ未完成です．
コピーするのが面倒なので，リンクを貼るだけにします．

# 目標

まず，引数を可変長にしたいですね．

それと，できるだけコピーや一時的なオブジェクトの生成を減らしたいです．
多くの場合，zipの結果を使用する場面は，演算のフローが明確な場合が多いと思います．
簡単な例を挙げると，

```c++
for (auto&& t : zip(xs, ys, zs)) {
    const auto& x = std::get<0>(t);
    const auto& y = std::get<1>(t);
    auto& z = std::get<2>(t);
    z = f(x, y);
}
```

こんな感じかと思います．

作成コードには，参照方法が異なる3つのパターンを作成しました．
名前空間`lref`は，左辺値参照で列を受け取ります．
`zip`内では，`std::tie`を使用して左辺値参照型を要素に持つ`std::tuple`型が要素の`std::vector`を作ります．

この`zip`は右辺値参照を取ることができません．
そのため，

```c++
auto a = zip(xs, zip(ys, zs));
```

こういったネストするような呼び出しのコードは書けません．
次のような書き方はOKです．

```c++
auto b = zip(ys, zs);
auto a = zip(xs, b);
```

今のところネスト呼び出しの必要性はありません．

そのため，引数の個数を可変長にする事を優先しようと思いますが…
どうやってパックしたり展開すればよいのか，すぐに思い付きません…

# TODO

1. 引数を可変長にする．
2. できるだけコピーや一時オブジェクトの数を減らす．
3. 右辺値参照を受け取れるようにする．

引数を可変長にするには，`std::tuple`の各要素に対して`operator*`や`operator++`を呼び，かつ返り値の`std::tuple`で補足して返す関数があれば良さそう．
でも，どうやって定義するんだ？

また，色々書いてみた[^wandbox2]が，この実装はコンパイルは通るが実行時エラーになってしまう…

# コンパイル時zip

zipの対象となる列が全て`std::array`ならば，constexpr関数として定義できるそうだ[^constexpr]．

つまり，それ以外，例えば`std::vector`を使用する限り，やはり，何らかのコピーや一時オブジェクトの生成は避けられないという事なのかもしれない．

# 参考情報

* [C++14(17) で zip 書いてみた - Secret Garden(Instrumental)](http://secret-garden.hatenablog.com/entry/2017/07/09/041057)
* [c++でzip関数を実装してみた. C++17の構造化束縛と闇テンプレートを使って. - Qiita](https://qiita.com/pshiko/items/aee2641149b0cc97e287)


[^wandbox1]: [作成したコードv1(未完成)](https://wandbox.org/permlink/vZGJXBuwILjLZc5w)
[^wandbox2]: [作成したコードv2(未完成)](https://wandbox.org/permlink/rPYElUrfvQX9JBm7)
[^constexpr]: [本の虫: コンパイル時zip関数の書き方、並びに京都C++勉強会の案内](https://cpplover.blogspot.com/2013/11/zipc.html)
Jupyter Notebookで、真っ白な画面しか表示されなくなってしまった場合の対処方法

久しぶりにconda環境を最新にしようと思い、

```
conda update --all
```
を実施したところ、なんと jupyter notebook が立ち上がらなくなってしまいました。
http://localhost:8888/tree
に何も表示されません。

<img width="542" alt="white.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/331144/8eb1411f-f840-2a61-da43-860d2e174a20.png">
このように真っ白な画面になっています。
いろいろ対処法を探していたところ、[stackoverflow](https://stackoverflow.com/questions/55195384/jupyter-notebook-5-7-6-last-update-shows-blank-page)に、同じような問題が起きているとの書き込みがあり、以下のようにやってみたたら回復できました。

```
# notebookのバージョンを確認　(5.7.6で問題が起きているようです)
conda list

...
nbformat                  4.4.0                    py37_0
notebook                  5.7.6                    py37_0
openssl                   1.1.1b               he774522_1
...

# notebookのバージョンを5.7.4にダウングレード
conda install notebook=5.7.4

# notebookを起動
jupyter notebook
```
Edgeブラウザを使っている場合は、[Ctrl]キーを押しながら、画面の[リロード]ボタンを押すことで、スーパーリロードとなり、notebookの初期画面(ツリー)が正しく表示されるようになりました。
paiza.jpの話【Java標準入力解決】


#paiza.jpでの標準入力　Java編
内容としては[前回（Python編）](https://qiita.com/ameoji/items/c8877dc761d24ca39820)のJava編です。
感想としてはPythonのほうが簡潔で好きです。あとで型が勝手に決まるありがたさをまざまざと感じることになりました。
以下のコードはpublic...などは省略しているので、メイン部分しか記載していません。

###一番原始的な処理
"input"という変数を作成し、代入する作業自体は".nextLine()"でしている。

```java:simple.java

//入力データが以下だったとする
//5

Scanner input = new Scanner(System.in);//入力値が入ってくる変数を定義

//取得は

String l = input.nextLine();//文字列として取得

//もしくは

int l = input.nextInt();//整数として取得

```

Pythonが　l=input()　で終わってしまうだけに、かなりもたもたしている印象を受けてしまう…

###横に連なっている場合（1つずつ取得）

```java:yoko1.java

//入力データが以下だったとする
//5　10　15

Scanner input = new Scanner(System.in);//入力値が入ってくる変数を定義

String l = input.next();//文字列として取得

//もしくは

int l = input.next();//整数として取得

```

1つだけ取得するならわりと簡単。むしろ1つ上のもこれでいい気がする。

###横に連なっている場合（Listとして取得）

```java:yoko2.java

//入力データが以下だったとする
//5　10　15

Scanner input = new Scanner(System.in);//入力値が入ってくる変数を定義

List<String> l = Arrays.asList(input.nextLine().split(" "));
//文字列として取得。split("")とすると1文字ずつ取れるから応用できそう。

//もしくは

？？？//整数として取得

```
可変リストを活用。リスト1つとっても手間がすごい…。整数は未検証です。（追記予定）List<Integer>でいけそうな気もする（未検証）。



###縦に連なっている場合⇒追記します





###番外編：一番原始的な処理（まとめてみた）

```Java:simple.java
//入力データが以下だったとする
//5

String l = new Scanner(System.in).nextLine();

//1つだけデータを取り出すならこれだけ。l=5となる。

```

本当に1つだけデータを取り出すのならこれでも読み取ることはできる。同じ構文を重ねるとエラーが出てしまうので、paizaのスキルチェックなどにはあまり活用できなさそう。

#参照
[[Java 8]コーディングテストで使える標準入力をリストまたは配列に変換するまで](https://qiita.com/riekure/items/0213b30bfdf47b4b5287
)
VBAでは、デストラクタを活用しよう

## VBAとデストラクタ
VBA (Visual Basic for applications)は、多くの現場でインストール済みの開発環境というのが魅力ですが、なにぶん20世紀の言語なだけに使いづらいところも多いです。
そのうちの一つとして、例外処理があります。
try catch どころか finally がないことに苦心します。

そんな VBA ですが、オブジェクト指向が流行り始めた時期に乗ってクラスがあり、そこにデストラクタがあることに救いがあります。
Sub Class_Terminate がそれですね。
また VBA は、参照カウント方式でこれを呼び出す仕様となっています。
つまり、デストラクタを呼び出すタイミングをプログラマが制御できるわけです。

## Application のプロパティでの例
ごたくを並べすぎました。
つまり、「この処理をしたら、それに対応する処理を終了するまでにしておく」ということをこれで実装できるわけです。
具体的には、Application のプロパティの一時変更などに向いています。

まずは、Application.Cursor と Application.Calculation を実例にあげて見ていきましょう。

```vb:ApplicationTemporaryMode
Private mResumeCalculation As Boolean
Private mOrgValCalculation As XlCalculation

Private mResumeCursor As Boolean
Private mOrgValCursor As XlMousePointer

Public Property Let TemporaryCalculation(ByVal NewVal As XlCalculation)
    If Not mResumeCalculation Then
        mOrgValCalculation = Application.Calculation
    End If
    mResumeCalculation = True
    Application.Calculation = NewVal
End Property

Public Property Let TemporaryCursor(ByVal NewVal As XlMousePointer)
    If Not mResumeCursor Then
        mOrgValCursor = Application.Cursor
    End If
    mResumeCursor = True
    Application.Cursor = NewVal
End Property

Private Sub Class_Initialize()
    mResumeCalculation = False
    mResumeCursor = False
End Sub

Private Sub Class_Terminate()
    Call ResumeAll
End Sub

Private Sub ResumeAll()
    If mResumeCalculation Then
        Application.Calculation = mOrgValCalculation
    End If
    If mResumeCursor Then
        Application.Cursor = mOrgValCursor
    End If
End Sub
```
プロパティを初めて変えた時だけ変更前の値のバックアップを取っておいて、デストラクタでその値に戻すわけです。

プロシージャ単位で使うなら冒頭で宣言すればあとは何も書かなくてもそのプロシージャの終了時に戻してくれます。

```vb:ThroughProcedure
Sub SampleProc
    Dim AppTempMode As New ApplicationTemporaryMode
    AppTempMode.TemporaryCursor = xlWait
    
    '(一時変更している間に実行する処理)
End Sub
```
プロシージャの途中での一時利用なら、`With New` でも使えば手軽です。

```vb:InnerProcedure
    With New ApplicationTemporaryMode
        .TemporaryCursor = xlWait
        .TemporaryCalculation = xlCalculationManual
        
        '(一時変更している間に実行する処理)
    End With 
```
プロパティをいくつ変更しようが、`End With`一つで戻りますからね。

## 応用範囲

これでうれしいのは、エラーで中断しようが`Exit Sub`しようが、このブロックを抜けたときに必ず実行されるということです。
そういう対応漏れは、自他ともによく見かけますからね。

ここでは
- `Application.Cursor`
- `Application.Calculation`
だけを取り上げましたが、`Application`のプロパティだけでも他に
- `Application.DisplayAlerts`
- `Application.ScreenUpdating`
- `Application.Visible`
など、一時変更したいプロパティは色々あるので、割とよく使えるのではないでしょうか。
一時変更するものとしては他に
- `Application.Selection`
- ブックの一時的なオープン
などもありますが、これらはもう少し面倒なことがあるので、また別の機会に。
はじめてのC++【20日目】

#はじめに
やっと帰宅
今日はawsを触ってたのでC++少ししかできない。
##AWS
いつの間にか、parallels Desktop Liteが有料化になったのでmac対応のubuntu16.04対応の仮想デスクトップアプリを探していました。そこで、今話題の**AWS**で仮想デスクトップができると聞いて環境構築していました。しかし、ubuntu16.04のssh接続はできたが、デスクトップが立ち上がることができない。調べてみると、リモートデスクトップでできるとのこと。しかし、リモートデスクトップでubuntuに接続できなかった。ubuntu側のリモートデスクトップ設定を変更しなければならないのだが、ターミナルを使ったその設定方法がわからなかった。5時間頑張ったのに、、、。明日も時間があれば少しだけ再挑戦！

##ロベールのC++
###07-03　アップキャスト

```Upcast.cpp
#include "InputStream2.h"
#include <iostream>

int main(){
  InputStream stream;
  std::cout << ">" <<std::flush;

  stream.Set();

  const Stream& ref = stream;//アップキャスト
  std::cout << ref.Get() << std::endl;
}
```
<img width="80" alt="スクリーンショット 2019-03-17 1.51.20.png" src="https://qiita-image-store.s3.amazonaws.com/0/298612/0700cafe-fc6b-5d37-33a7-3b99112e7541.png">

>派生クラスのオブジェクトは基底クラスのオブジェクトに渡すことができる

基底クラスで作ったオブジェクトを派生クラスを通して使うことができるってことかな？

```関数の引数にもできる.cpp
void show(const InputStream2& stream) {
 std::cout << stream.Get() << std::endl;
}
```

#終わりに
アップキャストがなにをしたいのかよくわからなかったので、明日また復習する。
おやすみなさい
FXの予測をする上で何が正規分布なのかわかっていなかった話

###独学でFXの予測をしていたため落とし穴にハマってた

今になって思うとすごいしょうもないのですが、機械学習をする上で分布の仮定はとても大事だと思います。そのうえでなぜかミスったのは分布の問題。

どのようにミスったかというと、終値をそのまま学習にかけていました。ずっとなんかおかしいよなと思っていたのですがよく考えれば値動きを正規分布に仮定しているんですよね。

今の今まで気づかなかった。

学習にはディープラーニングを使っていたため重みの計算によって無視できるのかもしれないですが根本的な理解が足りていなかったことに反省。

ランダムウォークはこのことを話していたんだな。
vuexのActionsって何が嬉しいの？

#はじめに
元社内SEで基幹系とかデータ周りでややこしいのをやってきた私ですが、一念発起してVueの勉強をしています。その中で、「Mutationsで変更を管理するのは判るけど、Actionsって何を書いたら良いの？」的な意見が複数ありました。vueはフロントエンドの技術ですが、私の得意なバックエンド的な発想は違和感がない作りなので、説明してみます。(ご意見歓迎！)

もちろんActionsを使わなくても問題が無いのですが、ある種の問題の解決策になります。

#Vuexのstoreの仕組み
まず、[Vuexのページ](https://vuex.vuejs.org/ja/)にあるのが下の図です。
![vuex.png](https://qiita-image-store.s3.amazonaws.com/0/310093/b9a15cb2-d272-53a2-f93a-6bceea6e6418.png)

わかり易い図ではありますが、この図を見るとVueでStoreを作っても問題が無い気がします。おそらくアプリケーションが単純な内は問題になりません。ただし、大きく二つの問題が発生した場合は、Vuexの導入が必要になってくると思われます。

一つは、管理すべきStateが大きくなりすぎて、stateを変更するmethodが増えすぎた場合です。Modulesを使ってstateを関心事ごとに分割すれば、Mutationsの中身は複雑にならずに済みます。

もう一つは、今回の投稿の目的であるActionsの有用性に関する点です。ActionsはBackend APIと点線で書かれているのは必ずしもやり取りが行われるわけではないことを示していると思われます。しかし、それを含めて一切を調整してくれるのがActionsの機能だと考えています。

#Stateの役割
ちょっと回りくどいですが、Stateについて話します。

たいていのSSR(サーバサイドレンダリング)のサービスの場合は、サーバにDB(データベース)などのデータストアがあります。表示に必要なだけのデータをDBから取得してHTMLを作成します。データに変更がある場合は、サーバにリクエストを送り結果をHTMLで受け取ります。
![store.JPG](https://qiita-image-store.s3.amazonaws.com/0/310093/cad37e67-48dd-8331-01b5-4356e3515fc4.jpeg)

一方、vueで行われているSPA(シングルページアプリケーション)の場合は、最初に表示のため必要なものすべてをHTMLとJavaScripterで受け取った後、データをBlackend APIから取得します。その後のクライアントの操作によってのやり取りは、最小限のデータに限られます。

vueでは、そのために必要なデータをStoreにため込んでいます。

知っておいてほしいのですが、BackendのDBとStoreでは、保持するデータは同じでも表現がまるで違います。Backendでは履歴も含めて永続的にデータを保管する必要があり、Storeは表示やBackendにデータを送る際の必要最低限のデータしかいらないので違ってくるのです。さらにややこしくなりますが、APIのインターフェイスの表現も同一とは限りません。できれば同じであってほしいのですが、サービスを維持・発展する段階において避けられない問題だったりします。

#Mutationsの役割
ActionsとStateの間にはMutationsがあります。Stateを直接変更しないルールにすると何がよいでしょうか。それは、Storeのデータの整合性を一括で管理することです。

オブジェクト指向の一般的な話ですが、Componentsが多く、同じデータについての変更をする箇所が複数ある場合、同じようなロジックの記述が複数個所になります。アプリケーションの複雑化によって、変更に際して問題が起こる可能性が高まります。
![mutations1.JPG](https://qiita-image-store.s3.amazonaws.com/0/310093/5206635a-9923-f8c8-d635-eba0dc124c49.jpeg)

変更をStoreに寄せることで、同様のコードが見つかりやすくなりますし、変更に名前が付くことにより、むやみに同様のコードを書くことを抑えることができるようになります。当然、コードも読みやすくなります。
![mutations3.JPG](https://qiita-image-store.s3.amazonaws.com/0/310093/cc93f91a-8979-71e9-bad9-4c3925a6d554.jpeg)




また、最初の図にあるように、Vueの開発ツールであるdevtoolsのと連携ができます。この機能は非常にパワフルで、mutationsの呼び出しの順序とそれによるデータの遷移を知ることができます。

そして、一番大事なことですが、MutationsはStoreを(特別な理由がない限り)、変更することを約束しています。（副作用が無い。)

#Actionの役割
やっとのことで、Actionsの説明に入ります。

Storeの説明で、StoreはBackendのデータをため込む場所であるという説明をしました。また、MutationsはStore無いのデータの整合性を取る役割があると説明しました。だとすれば、Componentsから何か操作があった場合、BackendとStoreのデータの整合性を取るのがActionsの役割です。

Mutationsと同様にComponentsに同様の処理が分散するのを防ぐ目的があります。

Actionsは、必要に応じてBackend APIと通信を行い。結果をMutationsを通じてStoreに反映させます。もちろん、何からのエラーを返した場合は、エラーページにリダイレクトしたり適切な処理をします。

また、ActionsはBackend APIとの通信という重くなるかもしれない処理を行うからか非同期になっています。
Actonsで一番大事なことは、Actionsは(不正な入力などで、)必ずしも望んだ動作をするとは限らないことです。

#まとめ
- Actionsには、BlackendとStoreの整合性を整えるコードを一括管理できるのが嬉しい
- MutationsはStoreに対する操作を約束してくれます。ActionsはMutationsに対する操作を約束しない
- Blackendとのやり取りが複雑でないサービスはActionsを使わなくても問題ない

#終わりに
ネタ晴らし的に言うと、["Vue Mastery"](https://www.vuemastery.com/)で仕入れた情報で構成しています。とはいえ、基本的にサンプルコードから起こした内容です。実際どうゆうコードになるか知りたい人はそちらを見てみると良いと思います。

~~判りずらいと思いますので、後で図を入れます。~~
いいね・コメントいただければ励みになります。
内容の充実のため、質問を歓迎します。
MS Office 2016 WebDAV不具合を調べた話

タイトルの通りです。

仕事でOffice2016を使っていて、WebDAVでサーバ上のファイルへ直接アクセスすることが結構あるのですが、いつのまにか上手く開けなくなってたので、なんとかした話。

# 環境
まずは環境情報から・・・

<dl>
    <dt>PC</dt>
    <dd>Lenovo X280</dd>
    <dt>OS</dt>
    <dd>Windows 10 Pro</dd>
    <dt>Office</dt>
    <dd>Office 2016 Professional</dd>
</dl>

# 不具合事象
WebDAVでサーバ上のファイルを開こうとするとファイルタイプに合わせたアプリケーション（Excelとか）は起動するのですが、起動するだけで何もファイルが開かれない。（新規ファイル作成すらされない）

# 調査結果
以下のKBのどちらか一方でも適用されてると事象発生する模様。

- KB3178667
- KB4011670

# 解決方法
### 手順1. KBのアンインストール

[プログラムと機能]の[更新プログラムのアンインストール]でも良いが、以下のコマンドでもアンインストールできる。

```:KB3178667
msiexec /package {90160000-0011-0000-1000-0000000FF1CE} /uninstall {68114994-6AB5-4BE9-A79E-6AC43EC8B76E} /passive /norestart
```
```:KB4011670
msiexec /package {90160000-0011-0000-1000-0000000FF1CE} /uninstall {5C6EB269-7EB7-4834-A9B6-E7A364B62D86} /passive /norestart
```

### 手順2.KBをWindows Updateで非表示にする

MSのサイトから**トラブルシューティング ツール**をダウンロードしてくる
[Windows 更新プログラムが Windows 10 に一時的に再インストールされないようにする方法](https://support.microsoft.com/ja-jp/help/3183922/how-to-temporarily-prevent-a-windows-update-from-reinstalling-in-windo)

1. トラブルシューティングツールを実行
2. [次へ]をクリック
3. [Hide updates]をクリック
4. 当該KBにチェックをつけ、[次へ]をクリック
5. [閉じる]をクリック

# その他
KBのアンインストールに使用した**msiexec**は
`msiexec /package {製品 GUID} /uninstall {更新プログラム GUID}`
と指定して使う。
また、他のオプションの意味は以下の通り。
/passive ・・・　無人モード（プログレスバーだけ表示する）
/norestart ・・・　アンインストール後に再起動しない

各**GUID**はレジストリの以下のキー配下から探す。
HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Uninstall

詳しくは以下のサイトを参考に。
[Outlook の更新プログラムをコマンドでアンインストールする方法](https://blogs.technet.microsoft.com/outlooksupportjp/2017/06/23/uninstallupdate/)
M5Stack GrayでGボウルを表示する

M5Stack GrayにはMPU9250という9軸センサ（それぞれ3軸の加速度、ジャイロ、磁気）が搭載されています。これを利用してモータースポーツなどで見かけるGボウルを描画します。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">m5stackでGボウル動いたよ <a href="https://t.co/zEBYiCFPTf">pic.twitter.com/zEBYiCFPTf</a></p>&mdash; きー (Mitsukuni Sato) (@key3) <a href="https://twitter.com/key3/status/1106953394235695105?ref_src=twsrc%5Etfw">2019年3月16日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


I2Cを初期化してMPU9250用のインスタンスを作ります。

```python
from machine import I2C
from mpu9250 import MPU9250

i2c = I2C(sda=21, scl=22)
sensor = MPU9250(i2c)
```

値を取得してループしながら描画します。

```python
x, y = 0, 0

while True:
    ax, ay, az = sensor.acceleration

    # オリジナルのX軸は左が正の値なので反転
    ax = ax * -1  

    # 前回描画したボールを削除
    lcd.circle(x, y, 5, lcd.BLACK, lcd.BLACK)

    # Gボウルを描画
    lcd.circle(160, 120, 110, lcd.WHITE)
    lcd.circle(160, 120, 55, lcd.WHITE)
    lcd.line(50, 120, 270, 120, lcd.WHITE)
    lcd.line(160, 10, 160, 230, lcd.WHITE)

    # ボールを描画
    x = int(ax * (55 / 10)) + 160
    y = int(ay * (55 / 10)) + 120
    lcd.circle(x, y, 5, lcd.RED, lcd.RED)

    time.sleep_ms(20)
```


サンプルコードはこちら。
https://github.com/key/playground-m5stack/blob/master/mpu9250_gbowl/main.py


課題

* 再描画時のチラツキ
    * XOR取って必要な部分だけ再描画するとちらつきが無くなると思います
    * （VRAM直接ポチポチしてた頃にやってたような古典的な対応）
* 加速度センサのノイズ
    * ローパスフィルタや移動平均などを使ってならすと良いかも知れません
Rails devise　ログイン中のユーザー情報の取得　

#　deviseを使った時に、ログイン中のユーザー情報を取得する方法

使用するコントローラ内にて、
before_action :authenticate_user!
とすると、current_userでユーザー情報を取得できます。

ログイン中のユーザーIDであれば、以下のようにすれば取得可能です。

```XXX_controller.rb
class XXXController < ApplicationController
before_action :authenticate_user!

  def index
  end

  def new
    @user = current_user.id
  end

end

```

#参考
https://github.com/plataformatec/devise#controller-filters-and-helpers

時間のあるときに一度しっかり読んだほうが良いと感じました。
【C#】URLのリダイレクト先を取得する

C#におけるURLを用いた処理では、リダイレクト先を内部的に取得して処理してくれます。
内部的に取得されたリダイレクト先URLを取り出したかったのですが、少しハマったので備忘録程度に記事にしました。

## やりたいこと
URLを投げたら最終的なリダイレクト先のURLを返して欲しい

## コード
```Csharp:using
using System.Diagnostics;
using System.Threading.Tasks;
using System.Net.Http;
```

```csharp:ロジック
static void Main(string[] args)
{
	//リダイレクト先を知りたいURL
	string url = "https://goo.gl/xBVejN";

	//リダイレクト先の取得が終わるまで待つ
	Task<string> task = GetLastUrl(url);
	task.Wait();

	//リダイレクト先を表示
	Debug.WriteLine("リダイレクト先 : " + task.Result);
}
		
//リダイレクト先の取得
public static async Task<string> GetLastUrl(string url)
{
	HttpClient client = new HttpClient();
	HttpResponseMessage response = await client.GetAsync(url);
	response.EnsureSuccessStatusCode();

	return response.RequestMessage.RequestUri.ToString();
}
```
```:実行結果
リダイレクト先 : https://wikiwiki.jp/kancolle/北上
```

上のソースでは、短縮URL化した`艦これ攻略Wiki`の`北上様`のURLを与えてみましたが、正しく結果を得られました。
`HttpResponseMessageクラス`の`RequestUriプロパティ`には、リダイレクト先のURL(URI)が格納されていますので、それを読みに行くだけのシンプルな構造です。
必要であれば例外処理を追加することで柔軟な処理が可能になります。

### 参考
>HttpClient Class
https://docs.microsoft.com/ja-jp/dotnet/api/system.net.http.httpclient

>HttpRequestMessage.RequestUri Property
https://docs.microsoft.com/ja-jp/dotnet/api/system.net.http.httprequestmessage.requesturi

>C# 今更ですが、HttpClientを使う
https://qiita.com/rawr/items/f78a3830d894042f891b

>Google URL Shortener
https://goo.gl/