OmniAICreator/Qiita-1.07M huggingface dataset:
はじめてのyukicoder vol.6

昨日の今日ではあるものの、残り三つだけなのでサクッと終わらせました

なお、文字列が面倒でpythonに甘えた模様

組み込み関数が色々豊富だから 仕方ないね(レ)


##No.48
```48.f90
implicit none
integer(8) A,X,Y,L
read(*,*) X
read(*,*) Y
read(*,*) L
if (mod(X,L)==0) then
    if (mod(Y,L)==0) then
        A=abs(X/L)+abs(Y/L)
    else
        A=abs(X/L)+abs(Y/L)+1
    end if
else
    if (mod(Y,L)==0) then
        A=abs(X/L)+1+abs(Y/L)
    else
        A=abs(X/L)+abs(Y/L)+2
    end if
end if

if (Y>=0) then
    if (X==0) then 
        A=A+0
    else
        A=A+1
    end if
else
    A=A+2
end if
write(*,*) A
end 
```
我らが鉄人28号を動かすための簡単なシステム　　ガンダムでも可

・移動にかかる手数
・y軸による場合分けを用いた向きの変更に伴う手数の変化

二つ目はx軸でも場合分けはできますが、パターンがより複雑になるのでお勧めはしません

小数点以上は全て切り上げ、みたいな関数Fortranにないんですかね・・・

##No.296
```296.f90
implicit none
integer(8) A,B,C,m
integer(8),allocatable :: x(:)
allocate (x(4))
read(*,*) (x(m),m=1,4)
B=(x(1)-1)*x(4)
select case (B)
    case(:59)
        x(3)=x(3)+B
    case(60:)
        x(2)=x(2)+(B/60)
        B=B-(B/60)*60
        x(3)=x(3)+B
end select
if (x(3)>=60) then
    x(2)=x(2)+1
    x(3)=x(3)-60
end if
C=0
do while (x(2)>C)
   C=C+24
end do
x(2)=x(2)-C+24
if (x(2)==24) then
    x(2)=0
end if
write(*,*) x(2)
write(*,*) x(3)
end
```
見事ひっかけに嵌った私です

何故、24時間を超えると予想できなかったのか・・・コレガワカラナイ

"C=0"から下の部分を最初書いてなくて、初っ端のテストケースで1247とか表示させました

一日は24時間ダルルォ、というわけできちんと日にちも考えようね！　あと、24時を0時に直そう！

これくらいです

(特に解説することも)ないです

そもそも、頭からガジガジするような解き方している時点で解説もへったくれもないのですが・・・(名推理)

##No.69
```69.py
A=list(input())
B=list(input())
A.sort()
B.sort()
C=0
for i in range(len(A)):
    if A[i] != B[i]:
        C += 1
    else:
        C += 0
if (C>0):
    print("NO")
else:
    print("YES")
```
面倒だったのでpythonに甘えました

ごくごく普通の文字列ならFortranでも書くんですけどぉ (言い訳)

上から四行の部分はワンライナーで書けそう・・・書けそうじゃない？

私は見栄えとしてのワンライナーは好きなんですが、自分で書く気にはならないです

いや、pythonのワンライナーで書かれたのは古文書にしか見えない・・・見えなくない？

後で見返したときに、何がどうなっているのかを辿るのがいやで、練習してないです

そもそも書けって言われても書かないんですけどね、初見さん

一度先輩にChekiOの解答見せたのですが、

**『pythonの良さを全否定するプログラミングを初めて見たwwwwww』**

と爆笑されました　絶対許早苗

・文字の比較を行って、違っていたらその数をカウントして、0以上なら全部"NO"

という単純なプログラムです

<br><br>

ぐぬぬぬ・・・次回から何をしようか、考え中

本日は以上!
js　nodeの扱い方


```javascript

window.onload = function(){
  var logo = document.getElementById('logo');
  var attrs = logo.attributes;
   console.log(attrs)

→
NamedNodeMap {0: id, 1: src, 2: height, 3: width, id: id, src: src, height: height, width: width, length: 4}

  var result = []
   s = attrs.length
   console.log(attrs.item(0).nodeName)

→　id

   console.log(attrs.item(1).nodeName)
→　src

   console.log(attrs.item(0).nodeValue)

→　logo
   console.log(attrs.item(1).nodeValue)
 
→　　http://www.wings.msn.to/image/wings.jpg

NamedNodeMap 
{0: id, 1: src, 2: height, 3: width, id: id, src: src, height: height, width: width, length: 4}

nodeName　：キー
nodeValue:値

```




```html
<form>
    <label>
       サイト名:<br/>
         <input type="text" name="name" size="30">
    </label>
    <label>URL:
      <input type="text" name="url" size ="50">
    </label>
　　　<input type="button" value ="追加" onclick="add(this.form)">
  </form>

this.form
→　フォームを取れる

this はこれだけ
→　　　<input type="button" value ="追加" onclick="add(this.form)">


var anchor = document.createElement('a');
  console.log(anchor)
  → <a href ="あdさsd"></a>
  anchor.href = f.url.value;
  console.log(f)
　　　　→　form
  console.log(f.url)
　　　　→　 <input type="text" name="url" size ="50">
  console.log(f.url.value)
　　　　→　あdさsd
  console.log(anchor.href)
　　　　→　file:///Users/watanabeakifumi/enviroment/js-app/%E3%81%82d%E3%81%95sd


結果


```
CSS で項目間の点線を表現する

## この記事で作るもの
こんなやつ。

![この記事で作るものの画像](https://qiita-image-store.s3.amazonaws.com/0/224350/5ce42cfc-bba7-57bc-75d4-b602386dc3b7.png)

## HTML をどう書くか

HTML は、文法エラーを出さない。そのためか、適切な HTML 要素の検討、選択は、軽んじられているところがある。
しかしアクセシビリティや、開発の容易さを考えると、適切な HTML を書くことは非常に重要だと思う。
そんなわけで、今回作るものにはどの HTML 要素が適切かを検討していきたい。

今回作るものは、上の画像からもわかるように、複数の項目が列挙されている。つまり、**リスト形式になる**ということだ。
HTML でリストを表現にする際には、リスト要素(`ul`, `ol`, `dl`要素)を使用する。
次に、この記事で作るものでは「**各項目と、それに対する値段**」を書く必要がある。
これを表現することに適しているリスト要素は、一連の用語と説明をリスト化できる**`dl`要素**だ。

`dl`要素で骨組みを作ってみる。ついでにクラスも割り当てる。また、`dt`, `dd`要素がすべて隣接していると、項目ごとの装飾が難しくなる。そのため、項目ごとに`div`要素で囲んだ。

```HTML
<dl class="products">
  <div class="product">
    <dt class="productName">項目1</dt>
    <dd class="productPrice">500円</dd>
  </div>
  <div class="product">
    <dt class="productName">項目2</dt>
    <dd class="productPrice">1,000円</dd>
  </div>
</dl>
```

## CSS をどう書くか

上に書いたような HTML 構造になれば、あとは CSS でいかようにもできる。
`div.product`の`before`, `after`擬似要素で点線を表現し、それを`dt`, `dd`要素の間に持ってくれば完成だ。

まず、`before`, `after`擬似要素を`dt`, `dd`要素の間に持ってくるには、 flexbox の`order`プロパティを使うやり方がスマートだろう。
**`dt`, `dd`要素のどちらかの`order`プロパティに、マイナス、もしくは 1 以上の数値を設定**すれば良い。このとき、**`dd`要素には margin がかかっている**ことに注意しよう。

次に、点線の表現方法だが、これは人によって色々なやり方をするだろうと思う。今回は`border-radius`プロパティ、`background`プロパティを使う方法の2つを紹介する。

### 点線の表現に`border-radius`プロパティを使う

```CSS
dd {
  margin: 0;
}

.product {
  display: flex;
  align-items: center;
}

.product::after {
  content: '';
  border-top: 5px dotted;
  flex: auto;
}

.productPrice {
  order: 1;
}
```

### 点線の表現に`background`プロパティを使う

`radial-gradient`関数を使っているところがポイントだ。

```CSS
dd {
  margin: 0;
}

.product {
  display: flex;
  align-items: center;
}

.product::after {
  height: 1em;
  content: '';
  background: radial-gradient(#000 20%, transparent 30%) center/ 1em;
  flex: auto;
}

.productPrice {
  order: 1;
}
```

### 点線の表現はどっちでやったほうがいいのか？

`border-radius`プロパティを使った場合、点の大きさは、「**点の半径が `border-width`プロパティの計算値の半分**」であることから調整できる。
しかし、**各点間の空白は、各ブラウザの実装に依存している**。それに、この点はブラウザが用意した点だ。そのため、**点線に対するちょっとした装飾すらも困難**だ。

それでは、`background`プロパティを使うとどうだろう。この場合、**点自体を`radial-gradient`関数を使い、自分で用意している**ため、点の大きさ、間隔など、**ちょっとした装飾が比較的容易に行える**はずだ。

というわけで、**点線のスタイルにこだわりを持っているなら、`background`プロパティを使い**、**点線なら何でもいいのなら`border-radius`プロパティを使う**と良いだろうと思う。
fortranの配列外参照の挙動

追記： -fcheck=all　オプションで回避できることがわかったので、セキュリティタグをはずしました。

いまどきfortranが表でガンガン動いてるなんてことはないと思うので、セキュリティタグが正しいかはわからないです…

コンパイラはgfortranです。

普通は配列外参照なんて書かない（動かす前に気づく）と思うんですが、時たま事故的に配列外参照が出ることはなくもなく、そのときにちょっとびっくりな挙動をしたのでメモ。

結論だけいえば、配列外参照をしてもエラーで停止しない場合が多々あります。

# ローカル配列の配列外参照

```fortran
program main
    double precision array(10) 
    array = 100
    do i =1, 15
        write(*,*) array(i)
    end do
end program
```

```
   100.00000000000000     
   100.00000000000000     
   100.00000000000000     
   100.00000000000000     
   100.00000000000000     
   100.00000000000000     
   100.00000000000000     
   100.00000000000000     
   100.00000000000000     
   100.00000000000000     
   2.2348460840167035E-314
   2.5463949491583268E-313
   6.9531188553868160E-310
   2.2348286607917029E-314
   6.9531188553883970E-310
```

今回実行した限りでは、**配列外参照しても咎められません。**が、**環境によっては**segmentation fault的なものをはいてとまることもあります。どういうことなんだ。



# モジュール配列の配列外参照

```fortran
module global
    double precision array(10) 
end module

program main
    use global
    array = 100
    do i =1, 15
        write(*,*) array(i)
    end do
end program
```

んで、これをコンパイルしてみると…**なんのエラーもなく通ります**
さらにこれを実行すると…

```
   100.00000000000000     
   100.00000000000000     
   100.00000000000000     
   100.00000000000000     
   100.00000000000000     
   100.00000000000000     
   100.00000000000000     
   100.00000000000000     
   100.00000000000000     
   100.00000000000000     
   0.0000000000000000     
   0.0000000000000000     
   0.0000000000000000     
   0.0000000000000000     
   0.0000000000000000  
```

**やはり配列外参照をしてるのに咎められることがない**んですね…なんてこった…



かなり危険な挙動だと思います。実際これが原因で出力値がうまくいかないエラーに当たりました。**OSやマシンによってメモリの割当は時々変わりうるので、再現性も低く、知らないとかなり原因が特定しにくかったです。**
いまどき配列外参照が咎められないとは思いませんし…

fortranはどうにもヒープとかそんな概念以前の言語らしく、メモリ管理が後の言語とかなり違うために起こるんでしょうか...
Myキーボードとお気に入りのコーヒーについて語る

キーボードとマウスとコーヒーとAdventCalendar2018の12/8の記事です。

# 使用しているPC
- Mac Book Pro 2018 13インチ スペースグレイ

今年の夏の始め頃に購入しました。
メモリを16GB, ストレージをSSD256GBのものにしました。合計で24万円ほどしましたが一括で支払いました:sunglasses:


# キーボード
- [Magic Keyboard（テンキー付き）- 日本語（JIS） - スペースグレイ] (https://www.apple.com/jp/shop/product/MQ052J/A/magic-keyboard%E3%83%86%E3%83%B3%E3%82%AD%E3%83%BC%E4%BB%98%E3%81%8D-%E6%97%A5%E6%9C%AC%E8%AA%9Ejis-%E3%82%B7%E3%83%AB%E3%83%90%E3%83%BC)

バタフライキーボードが嫌いというわけではないです。
友人がテンキーレスのキーボードを持っていたので触らせてもらったのですが、タイピング感覚がめっっっっっっっっっっっっちゃ良かったので思わず購入しました。
この記事を書くためのタイピングもはかどります。バタフライキーボードと比べてキーストロークがいい感じです。

MacBookProの色がスペースグレイなので、キーボードも同じ色のしたいと思っていたのですが、テンキー付きのものしかスペースグレイがなかったのテンキー付き。方向キーが大きくなったのは嬉しい:relaxed:



# マウス
トラックパッドが快適なのでマウスは使っていないです・・・

# コーヒー
気分にもよりますが基本的に、集中している時は`苦いもの`を、リラックスしている時は`甘めのもの`をよく飲みます。
中途半端に甘いのは嫌いなので、微糖とかは飲みません。

## 集中している時
- [UCC ブラック コーヒー コールドブリュー](https://www.amazon.co.jp/UCC-%E3%83%96%E3%83%A9%E3%83%83%E3%82%AF-%E3%82%B3%E3%83%BC%E3%83%92%E3%83%BC-%E3%82%B3%E3%83%BC%E3%83%AB%E3%83%89%E3%83%96%E3%83%AA%E3%83%A5%E3%83%BC-500ml%C3%9724%E6%9C%AC/dp/B079T3FT97/ref=sr_1_3?ie=UTF8&qid=1541842335&sr=8-3&keywords=%E3%82%B3%E3%83%BC%E3%83%AB%E3%83%89%E3%83%96%E3%83%AA%E3%83%A5%E3%83%BC)
    - 迷った時はこれ。スッキリとして飲みやすくて美味しい。俺の相棒。
- [トーヨーベンディング アイスブレンド](http://www.mirubiki-coffee.jp/)
    - 自販機なのですが、ミル挽き機能がついており、挽きたてコーヒーが味わえます。味が安っぽくなくしっかりとした苦味があるのがあるのが良い。

## リラックスしている時
- [雪印 コーヒー牛乳](https://www.amazon.co.jp/%E9%9B%AA%E5%8D%B0%E3%82%B3%E3%83%BC%E3%83%92%E3%83%BC-%E5%86%B7%E8%94%B5-%E9%9B%AA%E5%8D%B0%E3%83%A1%E3%82%B0%E3%83%9F%E3%83%AB%E3%82%AF-%E9%9B%AA%E5%8D%B0%E3%82%B3%E3%83%BC%E3%83%92%E3%83%BC500mlX10%E6%9C%AC/dp/B074LW7J3K/ref=pd_sbs_325_3?_encoding=UTF8&pd_rd_i=B074LW7J3K&pd_rd_r=15a80a29-e4ce-11e8-a9bf-17b1a941fca2&pd_rd_w=QOxVd&pd_rd_wg=yWieq&pf_rd_i=desktop-dp-sims&pf_rd_m=AN1VRQENFRJN5&pf_rd_p=cda7018a-662b-401f-9c16-bd4ec317039e&pf_rd_r=BJTP2A7S2RW1FVG0R90P&pf_rd_s=desktop-dp-sims&pf_rd_t=40701&psc=1&refRID=BJTP2A7S2RW1FVG0R90P)
    - コ、コーヒーって名前入ってるから許して・・・。子供の頃からこれ好きなんです。疲れているときにはこれを飲んでいます。
- [サントリー コーヒー クラフトボス ラテ](https://www.amazon.co.jp/dp/B072C2G4SN/ref=sspa_dk_detail_1?psc=1&pd_rd_i=B072C2G4SN&pf_rd_m=AN1VRQENFRJN5&pf_rd_p=35261a28-eed5-46a8-9369-308fa0c478f8&pd_rd_wg=yWieq&pf_rd_r=BJTP2A7S2RW1FVG0R90P&pf_rd_s=desktop-dp-sims&pf_rd_t=40701&pd_rd_w=tTosa&pf_rd_i=desktop-dp-sims&pd_rd_r=15a80a29-e4ce-11e8-a9bf-17b1a941fca2)
    - 友人から`思ったよりも甘くなかったからあげる`と言われて飲んでみたら美味すぎた。甘さ加減が完璧に自分好みだった。
redux thunkの内部実装について

今までなんとなく使っていたredux thunkだったが、内部実装を理解して簡単にまとめた。

## サンプルコード



```javascript:action/index.js
export const toggleTodoAction = id => dispatch => {
  setTimeout(() => {
    dispatch({type: TYPE.TOGGLE_TODO, payload: {id}})
  }, 1000)
}
export const changeFilterTypeAction = filterType => ({type: TYPE.CHANGE_FILTER_TYPE, payload: {filterType}})
export const addTodoAction = name => ({type: TYPE.ADD_TODO, payload: {name}})
```
コンポーネント側でイベントが起きた時に、toggleTodoActionは関数を返し、changeFilterTypeActionとaddTodoActionはオブジェクトを返すことになる。

```javascript:store.js
import { createStore, applyMiddleware } from 'redux'
import rootReducer from './reducers'

const thunk = store => next => action => {
  typeof action === 'function' ? action(store.dispatch) : next(action)
}

export default createStore(rootReducer, applyMiddleware(thunk))
```
thunkでは対象のアクションが関数なのかそうではないかで次の動きが決まる。
toggleTodoActionは関数を返すのでstore.dispatchをラップすることによってaction内で非同期処理などを書くことができる。
RubocopのそれぞれのCopsにはどんな役割があるのか調べてみた

Railsを使ってるとリンターとして多くのプロジェクトで使われているRubocopで、違反すると出てくる`Naming`や`Styel`、`Layout`といったそれぞれのCopsがどういった役割をしてるのか調べてみました。
# Copの種類[^1]
* Style Cops
* Layout Cops
* Lint Cops
* Metrics Cops
* Naming Cops
* Perfomance Cops
* Security Cops
* Rails Cops
* Bundler Cops

[^1]: 公式のドキュメントではそれぞれのCopsは複数形で表現されていたので、その表現を使っています。


# それぞれのCopの役割

### Style Cops
主に[Ruby Style Guide](https://github.com/rubocop-hq/ruby-style-guide)に従っているかどうかのチェックを行っているCops。　　

例）`Style/EmptyElse`はelseの後に何もステイトメントがない場合、違反を検知します。

```ruby:Style/EmptyElse
#違反している例 
if condition
  statement
else
end

#正しい例1
if condition
  statement
else
  nil
end

#正しい例2
if condition
  statement
end
```



### Layout Cops

インテンドやホワイトスペースが一貫して使われているかのチェックをするCops。

例）`Layout/IndentationWidth`というCopはインテンドの深さをチェックしている。

```ruby:Layout/IndentationWidth
#違反している例 
class BadExample
 def greeting
 puts 'hello'
 end
end

#正しい例
class GoodExample
  def greeting
    puts 'hello'
  end
end
```

### Lint Cops
曖昧なものや間違いである可能性が高いものをチェックしているCops。

例）`Lint/DuplicateMethods`というCopは同じメソッドが複数定義されていないかのチェックをしている

```ruby:Lint/DuplicateMethods
#違反している例
class BadExample
  def foo
    1
  end

  def foo
    2
  end
end

#正しい例
class GoodExample
  def foo
    1
  end

  def bar
    2
  end
end
```


### Metrics Cops
ソースコードの中で定量化可能なプロパティーを扱うCops。
クラス名の長さ等がこれに該当する。それぞれの許容される最大値は設定で変更することができる。

### Naming Cops
その名の通り、メソッド名や定数、ファイル名のコードの名前付けをチェックするCops。セッターなのに、=がついていない。Rubyファイルはスネークケースであるべきなのに、キャメルケースを使ってる場合等に違反を検知する。

### Perfomance Cops
ある特定のRubyイディオムにおいて、それと同じ働きをするが、パフォーマンスが良い別のRubyイディオムがある場合、それを検知するCops。

### Security Cops
セキュリティー的にまずいコードを検知するCops。ファイルを外から読み込むコード等をチェックする。

### Rails Cops
おなじみのフレームワークRuby on Railsのフレームワークの規約を守ってるかをチェックするCops。
他のCopsとは違い、デフォルトでは使えないので、`.rubocop.yml`で宣言する必要がある

### Bundler Cops
Gemfile内のコードをチェックするCops。
Gemfile内で同じGemが記載されていないか等のチェックをする。

### Gemspec Cops
Gemを作る際に作成する必要がある`.gemspec`ファイルの中をチェックする。（Gemを自分で作ったことがないため、チェック内容は把握していません。:sweat_smile:）

#　参考元
Rubocopの公式ドキュメント
https://docs.rubocop.org/en/latest/

##　その他
今後、随時更新予定
何か間違いやアドバイスがあれば、ぜひコメントください:grinning:
【Unity(C#)】コンポーネントのON・OFF(enable)とゲームオブジェクトの表示・非表示の切り替え(SetActive)

　　
　　

この記事は

**『プログラミング完全未経験からUnityでの開発現場に迎え入れてもらえた世界一の幸せ者』**

の記事です。そのつもりでお読みください。


　　
##コンポーネントのON、OFF(enable)
enable はインスペクターにチェックボックスがあるタイプのコンポーネントなら、ON,OFFできる。(たぶん)
![無題.png](https://qiita-image-store.s3.amazonaws.com/0/244071/98c277ab-29d1-2af4-bfb4-b58b90f8f9d9.png)


```C#
Renderer _renderer;
GameObject cube;

 _renderer = cube.GetComponent<Renderer>();
 _renderer.enabled = false;
```


##SetActiveはゲームオブジェクトの表示をオン、オフに切り替える。

```C#
GameObject cube;

cube.SetActive(false);
```
        
　　
　　
enableに出会うまでは　なんでもかんでもSetActiveかDestroy使ってました。。。


---
2019/04/01 追記
コンポーネントそのものを削除したい！...という場面に出くわしたのでメモしときます。

```C#
Destroy(参照したいゲームオブジェクト.GetComponent<削除したいコンポーネント名>());
```

---
2019/04/9 追記
ゲームオブジェクトの存在確認で便利なものを見つけました。
ゲームオブジェクトのアクティブ・非アクティブに関係なく参照できます。

```C#
if(ゲームオブジェクト名)
{
  //存在してたら実行
}

```

ちなみに`activeInHierarchy`を使うと
ゲームオブジェクトのアクティブ・非アクティブ状態を参照できます。

```C#
if(ゲームオブジェクト名.activeInHierarchy)
{
  //アクティブなら実行
}

```
CANVASの品質レベルを落とす方法

### WebRtcで撮影した画像をアプリ内でサムネイルにする
画像を加工・ストレージ（S3)に保存・ダウンロードする機能を持つアプリを作成中に画像一覧にサムネイルをどう作成しればよいか悩んだので一つのやり方を提示。

```
var url = canvas.toDataURL('image/png');
```
第2引数で品質レベルを落とせる(0~1の範囲)

```		
var urlToThumb = canvas.toDataURL('image/jpeg', 0.1);
```
解析度を抑えた状態でデータベースに格納。
拡張子pngをjpegに変えるだけで1/3ほどに落とせる。詳しくはわからないが圧縮率が違うのだと思う。その上で品質レベルを1/10まで落とすとデータベースに格納出来る。上の例で3,000文字数程度。
サムネイルに利用するだけならこれで十分なような・・・。

本来ならストレージからLambda関数なんかで引っ張ってくるのが正解なんでしょうが、初心者にはハードルが高い。次善策として備忘録。
非エンジニアだった私がJavaのfor文をやっと理解した話

#まえがき
初めての投稿ですが、理解できて嬉しかったので、
Javaの超基礎のfor文のループ処理に関して共有できたらと思っています。

私は30歳手前で別ジャンルの営業からIT業界飛び込み、
飛び込むまでは良かったが溺れていたので勉強し直しているところです。


さて、さっそく本題ですが。

```Java
public static void main(String[] args) {
	int sum = 0;
	for (int i = 1; i <= 10; i++) {
		sum += i;
		System.out.println(sum);
	}

}
```
これ。

あ〜、１〜１０まで繰り返して処理するのね。っていう薄っぺらい知識でいるわけですよ。

でもどんな順序で動いてるかわからない。
で、非エンジニアさん向けに流れを紹介したい。

まずこの部分

```Java
public static void main(String[] args) {
		
		
}
```
Javaのプログラム書いたときの始めますよっていう合図みたいな感じです。
｛｝これで囲った中の処理をしてくれます。

なので意味があるのは

```Java
int sum = 0;
for (int i = 1; i <= 10; i++) {
	sum += i;
	System.out.println(sum);
		
}
```
ここだけって言っても過言ではない。

で、ここからです。
#意味
ある意味プログラミング言語なんて外国語だと思うのでざっくり日本語訳します。

```Java
int sum = 0;
```
「整数の　合計値さん　の中身は０です」

#forの条件部分
```Java
for (int i = 1; i <= 10; i++) {
}
```
ここは熟語みたいな感じで
for (初期化；繰り返し条件；更新処理) {
   繰り返す内容
}
らしいんですけどよくわからない。


現状の私の理解では以下の感じ。
(整数のiさんは1です;iさんが10以下なら繰り返します;ちなみに数字は１ずつ足します）

#繰り返し内容
```Java
sum += i;
```
合計値さんに順番にiさんを足していく

```Java
System.out.println(sum);
```
ここはコンソールに出せっていう命令文（合計値さんを）;

#ここまでの処理を順番に

```Java
public static void main(String[] args) {
	int sum = 0;
	for (int i = 1; i <= 10; i++) {
		sum += i;
		System.out.println(sum);
	}

}
```

処理1回目
合計値さんは０
iさんは１からスタートするので
0+1 つまり合計値さんは１になる

処理2回目
合計値さんは1になった
iさんは1ずつ増えるので2
1+2 つまり合計値さんは3になる

処理3回目
合計値さんは3になった
iさんは1ずつ増えるので3
3+3 つまり6になる

こんな感じで処理を繰り返し

コンソールには
1
3
6
10
15
21
28
36
45
55

みたいに出ます。

おわり。

マサカリ期待してお待ちしています。
少しでも理解の助けになれば幸いです。
[Rails] undefined method authenticate_user!の対処方法

# 概要
Ruby初心者が陥りやすい存在するはずの関数が見つからない状況になったときの対処方法について。


# 環境
- Ruby 2.5.1
- Ruby on Rails 5.2.1
- devise 4.4.3
- devise_token_auth 0.2.0

# 
## エラー
devise_token_authを利用しているため、json形式のレスポンスとなる。
レスポンスで`authenticate_user!`が定義されていません。のメッセージが返却される。

```json:response
{
  "status": "error",
  "message": "undefined method `authenticate_user!' for #<Api::DummysController:0x0000000000000000>"
}
```

## RoutesとController
**名前空間apiにmount_devise_token_auth_forを所属させている**のが特徴である。

```ruby:routes.rb
Rails.application.routes.draw do
  namespace :api do
    mount_devise_token_auth_for 'User', at: 'auth', controllers: {
      registrations: 'api/auth/registrations'
    }
    resources :dummys
  end
end
```

```ruby:DummysController.rb
class Api::DummysController < ApplicationController
  before_action :authenticate_user! # ここでエラー

  # 省略
end
```

## 原因
routes.rbの名前空間が原因で`authenticate_user!`の定義エラーが発生。
[mount_devise_token_auth_forの内部で呼び出されるdevise_for](https://github.com/lynndylanhurley/devise_token_auth/blob/master/lib/devise_token_auth/rails/routes.rb)を呼び出すと自動的にauthenticate_userを生成する仕組みとなっている。よって、自動的に作成した時の名前空間が通常と異なると生成されるauthenticate_userも名前空間に従った命名に変更される。

[公式ドキュメント](https://devise-token-auth.gitbook.io/devise-token-auth/usage/controller_methods#methods
)にも同じような記載があるので一度は確認しましょう。


## 対応
名前空間に対応した関数名に変更することで解消する。

- before : `authenticate_user`
- after : `authenticate_api_user`

```ruby:DummysController.rb
class Api::DummysController < ApplicationController
  before_action :authenticate_api_user! # 変更点

  # 省略
end
```

# 補足
authenticate_userだけではなく、current_userも同様の仕組みとなっているため、
**current_userをcurrent_api_userに変更する必要がある。**

# 参考文献

https://github.com/lynndylanhurley/devise_token_auth/issues/182
5分で終わる！Reproイベントトラッキングのやり方

※サーバーサイドからやった感じなので、ネイティブの方が求めてる記事じゃないです、すみません。

## Reproとは
ユーザー行動分析ツール。アプリでユーザーが動いた動線を追跡できるイメージです。
例えば、ボタンぽちっと押されたのは何回？何人？みたいな数値がわかります。
その他に、ユーザーの画面の動きを動画で撮れたりします。
公式DOC参照:https://docs.repro.io/ja/dev/sdk/webview.html

## イベントトラッキングとは
画面表示されたりボタンぽちっと押されたりと、ユーザーの動きによって発火される画面上の動作をイベントと言っています。（フロントエンドの方は聞きなじみありますね）
イベントトラッキングをして、上記の何回？何人？の数値的な部分がRepro側に送信されてReproツール画面上で分かるようになります。

##イベントトラッキングするぞ
サーバーサイドでやることは以下２点のみ。

1.ヘッダーにRepro使うよの宣言

```html:test.html
<head>
<script src="//cdn.reproio.com/js/v3/repro.js" type="text/javascript" charset="utf-8"></script>
</head>
```

2.トラッキングする部分にrepro.track()を埋め込む

```html:test.html
// イベントIDのみ送る
<a href="javascript:void(0)" onclick="repro.track('ここにはIDを入れる');">
// イベントIDとプロパティも送る
<a href="javascript:void(0)" onclick="repro.track('ここにはIDを入れる', { key: val});">

```
トラッキングは以上です。
実際にイベントを動かして、reproコンソール上の「アクセス分析」あたりから確認できるはずです。

##イベントトラッキングされないぞ
サーバーサイドの方々、詰まったときに以下の点を確認してみてください。

1. ヘッダーでRepro宣言しているか
2. トラッキング部分repro.track()をタイポしていないか
3. トラッキングIDをタイポしていないか
4. トラッキングで送るべきパラメータを送れているか
5. トラッキング送信してからReproで集計されて画面上に反映されるまで時間の間に確認していないか（そもそも時間設定できるのでネイティブの方に反映されるまでの時間を確認してもいいかも）
6. そもそもネイティブの方がRepro設定の埋め込み漏れしていないか
7. JS・jQueryの中でトラッキングしている場合、実行タイミングがあっているか（やめる勇気だす）
8. JS・jQueryの中でトラッキングしている場合、読み込まれているか

以上のことで大体は解決されるはずです。
sshコマンド

# 概要
`ssh`コマンドは、他のコンピュータ(PC,サーバー）などにログインして、コマンド操作などをできるようにするコマンドです。
簡単に言うと、他のコンピュータを遠隔操作できるコマンドです。

`telnet`コマンドの上位互換なので、`telnet`を使うぐらいなら`ssh`を使いましょう。
`ssh`は、`telnet`を暗号化したバージョンです。

# sshできる条件
遠隔操作をするためには、必要な条件が3つあります。
1. 接続先のIPアドレス、またはDNSアドレスを知っている
2. 接続先のコンピュータに、接続するユーザーが登録されている
3. 登録されているユーザーに接続許可がされていること

## 1.接続先のIPアドレス、またはDNSアドレスを知っている
接続先の住所がわからないと、どこに接続すればいいかわかりませんね。

## 2.接続先のコンピュータに、接続するユーザーが登録されている
どのコンピュータにも、ログインできるユーザーが登録されています。
誰でも好き勝手に操作することができるコンピュータなんて意味ないですからね。
遠隔操作する際にも、そのコンピュータにユーザーが登録されている必要があります。

## 3.登録されているユーザーに接続許可がされていること
コンピュータに登録されているユーザーには、それぞれ権限が設定されています。
重要な設定ファイルをみんなが変更できたら困るので、ユーザーによっては、そのコンピュータ内でできることが制限されています。
その登録されているユーザーに接続権限がないと、sshで遠隔操作はできません。

# 使い方3つ
1.`ssh ユーザー名@IPアドレス（ホスト名）`

```
ssh username@ip_address
```

2.`ssh IPアドレス（ホスト名） -l ユーザー名`

```
ssh ip_address -l username
```

3.`ssh IPアドレス（ホスト名）`
これはsshコマンドを実行するユーザーと、ログインするユーザーが一致しているときのみ使える。

```
ssh ip_address
```
Qiitaと炎上問題。ユーザー努力によるコミュニティ改善は可能だ。


# 最近、Qiitaがよく燃えている。炎上案件が多いような気がする。

記事自体の良し悪しはさて置いて、コメント欄が燃えているケースが。

- [今後必要になるプログラム言語 ](https://qiita.com/administrator1974/items/387aab2a42bf57e3b215)
- [「ゴミ記事が多すぎる問題」に対する私見 - Qiita](https://qiita.com/akira_/items/c8881dcde93d4cb035c7)
- [全ての開発者がQiitaへのアウトプットをやめるべき理由 - Qiita](https://qiita.com/qiitadaisuki/items/2160a390ce91283707a1)

他にもちらほらと炎上系を見かけたような。

## Qiitaの「トレンド」の仕組みは燃えやすい？

Qiitaトップページが「トレンド」を全面に押し出すように変わったことも大きいのだろうか。

[最近のQiitaの記事の質が下がってきている事への考察 - Qiita](https://qiita.com/wannabe/items/294b34334a94e8e3618c)

たとえ仮に今のQiitaが「燃えやすい仕組み」になっているとしても、それも一長一短だ。短所があるということは、つまり僕らは長所の恩恵も受けているわけで。

たとえばトレンドがあるおかげで、トップページを開いただけで、最近の技術流行などが何の努力もなく分かるという点は、ものすごく大きな利点だと感じている。

なので僕らはその「弱点」を最小化して「長所」を最大化すれば良い。Qiitaの「武器」をうまく使っていく必要があると思う。

# 当事者意識はあるか。僕らの心はコミュニティ「参加」しているか。

人がコミュニティ作る。コミュニティを作っているのは「僕ら」だ。

「誰か」がコミュニティを壊すのではなく、「誰かが作ったシステム」がコミュニティを壊すのではなく、コミュニティを壊すものがあるとしたら、それは「僕ら」じゃないだろうか。

# 人とコミュニケーションする時は「同意できる部分」を見つけてみよう

個人的な話だが、僕の場合、Qiita記事にコメントする時に心がけているのは「同意できる部分」を見つけるということだ。

「反論できる部分」を見つけるか「同意できる部分」を見つけるかというのは、まさに習慣の違いだと思うけれど、どちらでも話題は広がると実感している。

# 部分的同意は全面的同意ではない。

たとえ記事やコメントに誤りが含まれていたとして、その中の一部に同意したからと言って、全面的に同意したことにはならない。

もちろん「情報の誤りを正す」ということは、ものすごく重要なのだけれど、「人の考え」まで正す必要はないかなと思う。
あとは、「誤りに対する反論」は多くの人から自然に付きやすいものなので、バランス的には「同意できる部分」を見つけることで、コミュニティを良いものに出来るかなと思う。

# もっとQiitaのコメント欄を使おう！ ポジティブな用途で。

なぜ僕らは「反論が必要な記事」にはコメントをつけて、役に立った記事に「いいね」だけ押して立ち去るのだろうか。

[Qiitaの記事には絶対コメントを書いてはいけない (わけがない) - Qiita](https://qiita.com/YumaInaura/items/5532cb4eea013b2f4a4b)

[枯れ果てた開発者の心のバケツ - Qiita](https://qiita.com/rana_kualu/items/a033d3df87e022d0c456)

# コミュニティの財産を積み上げよう。借金返済して貯金を作ろう。

日頃からポジティブなコメントやリアクションが飛び交うような状態であれば、多少のネガティブな事象なんか気にならなくなるんじゃないだろうか。

たとえばお金がたくさんあれば、多少使っても貧乏にはならないように。
たとえば日頃から健康に気をつけていれば、多少のウィルスが来ても病気にならないように。

マイナスに対してのプラスを大きくするイメージ。コミュニティの財産を積み上げようじゃないか。

# あわせて読みたい？


- [「Qiitaでのアカウント停止について」の大事な3点。HRTは最重要ガイドライン・スルースキルを身に着けよう・停止理由は「技術的誤り」ではない。 - Qiita](https://qiita.com/YumaInaura/items/eb71e0a85fe906581971)
  - テーマが大きめなったので、こちらの記事から分離。
- [最近のQiitaは炎上しがち。– YouTube](https://www.youtube.com/watch?v=kXQcbSstbbo)








<!-- Update From Qiita API -->

# チャットメンバー募集


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

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





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
expressを使ってDBの値を取得・表示

## DB準備

とりあえず、一つテーブルを作成。

- postsテーブル
    - title varchar(255)
    - content varchar(255)

以下のようにデータを入れておきます。

| title | content |
| --- | --- |
| title1 | content1 |
| title2 | content2 |


## アプリケーション実装

routes/index.js を以下のようにします。

```javascript

var express = require('express');
var router = express.Router();

var posts = [];

/* db connect */
var mysql = require('mysql')
var connection = mysql.createConnection({
  host     : 'localhost',
  user     : 'myuser',
  password : '******',
  database : 'my_db',
  insecureAuth : true
});

connection.connect()

// データベースからデータ取得
connection.query('SELECT * from posts;', function (err, rows, fields) {
  if (err) throw err

  posts = rows
})

connection.end()

/* GET home page. */
router.get('/', function(req, res, next) {
  // viewにデータを渡す
  res.render('index', { title: 'Express' , posts: posts});
});

module.exports = router;

```

viewテンプレートはとりあえず以下のような感じで。

```twig
{% extends 'layout.twig' %}

{% block body %}
  <h1>{{title}}</h1>
  <p>Welcome to {{title}}</p>
  <p>Hello World</p>

  {% for post in posts %}
    <p>{{ post.title }}</p>
    <p>{{ post.content }}</p>
  {% endfor %}
{% endblock %}

```


データ表示できましたー。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/168990/3396e337-9588-70ba-4ce1-bab1b0791164.png)
ghqとpecoが便利すぎたので快適なcd(change directory)方法を紹介する【bash対応】

みなさんは開発用ディレクトリに移動する場合どうしていますか？

ターミナルを立ち上げた後、cdコマンドでTABキーを何回も打鍵していませんか？

それ、もうやらなくていいんです。

そう、 **ghqとpecoを組み合わせればね。**

# 何ができるようになるの？
自分の好きなコマンドですぐに移動したいディレクトリ(ワークスペース)へ移動できます。

# デモ

![demo2.mov.gif](https://qiita-image-store.s3.amazonaws.com/0/32950/3f03d32f-4901-e724-d9c1-9c20afa78864.gif)


# ghqとは
https://github.com/motemen/ghq

ghqのREADME.mdから和訳
> Remote repository management made easy

リモートリポジトリの管理を楽にする

> 'ghq' provides a way to organize remote repository clones, like go get does. When you clone a remote repository by ghq get, ghq makes a directory under a specific root directory (by default ~/.ghq) using the remote repository URL’s host and path.

'ghq'はgo getのようにリモートリポジトリをクローンする方法を提供します。 ghq getでリモートリポジトリをクローンすると、ghqはリモートリポジトリURLのホストとパスを使って特定のルートディレクトリ（デフォルトでは~/.ghq）の下にディレクトリを作成します。

例えば、 `git@github.com:motemen/ghq.git` をcloneする場合

```
ghq get git@github.com:motemen/ghq.git
```

`ghqが参照するルートディレクトリ/github.com/motemen/ghq` 配下にリポジトリをクローンします。

ghqが提供しているコマンド `list` を利用すると ghqが参照するルートディレクトリ配下のリポジトリを出力するので、この機能を利用します。

# pecoとは
https://github.com/peco/peco
README.mdにわかりやすいデモが記載されているため割愛


# 環境構築手順
## Goをインストール
```bash
brew install go
```
## GOPATHを設定(パスはお好みの値を設定してください)
```bash
export GOPATH=$HOME/go
```

## ghqをインストール
```bash
go get github.com/motemen/ghq
```

## ghqが参照するルートディレクトリの設定
```bash
git config --global ghq.root $GOPATH/src
```

## pecoをインストール
```bash
go get github.com/peco/peco/cmd/peco
```

## .bashrcか.bash_profileにコマンドのエイリアスを書く
エイリアス名はお好みで。
今回は `sd` (select directory) とします。

```bash:.bashrc
function peco-cd {
  cd "$( ghq list --full-path | peco)"
}

alias sd='peco-cd'
```

```bash
source ~/.bashrc
または
source ~/.bash_profile
```

おめでとうございます！
これで快適なcd方法を手に入れました！

それではまたどこかでお会いしましょう！
Happy Coding!


# 参考文献
https://qiita.com/strsk/items/9151cef7e68f0746820d
Mac mini 2018 128GB モデルの開発用セットアップメモ

新型Mac miniが届いたのでセットアップをはじめました。

で、ディスク容量はOSだけでだいぶ持ってかれるのかな、、と思ったら、93GBあった。
これなら開発ツール入れて、データはThunderbolt3の外つけディスク運用で問題なさそう。

![スクリーンショット 2018-11-10 16.55.12.png](https://qiita-image-store.s3.amazonaws.com/0/6047/e0cb174c-e22c-ea6e-b896-bb53cd44fbb3.png)

### ディスクアンマウント問題

High Sierraだったかどのバージョンからか、外つけHDDがSleep時に不正アンマウントされて、ダイアログが出る症状が存在する。

で、まさに、それがでた。

この問題、HDDとの相性だったり、PRAMリセットだったり、HUBかましたり、対処方法のオカルトが色々あるが、決定打がない。

データが壊れても嫌なので、おとなしく、Sleep時にUnmountして、復帰時にMountしてくれるユーリティを導入した。

というか、メインのMacBookで普段から使ってる、Mountain を MacMiniにも導入した。

### MountainのAppStore問題

このソフト、AppStoreで公開されてるバージョンが古いままで、そのまま使うとエラーになる。

AppStoreからインストール後、公式で配布されてるバイナリで上書きする事で回避可能。

理由は察っせる。作者は悪くない。
[C#] UnixTimeからDateTimeに変換する【演算子オーバーロード】

# 概要

サーバーから取得した時刻数値([UnixTime](https://ja.wikipedia.org/wiki/UNIX%E6%99%82%E9%96%93))をC#の[DateTime型](https://docs.microsoft.com/ja-jp/dotnet/api/system.datetime?view=netframework-4.7.2)に変換する時どうしてますか？
数か所ならともかく、何か所もあったらどうします？ユーティリティメソッド作る？

**型キャスト演算子オーバーロード**したこんな方法はどうでしょうか。

# 変換専用クラス
変換を簡単に書けるようにこのようなクラスを用意してみました。

```CSharp
using System;

/// <summary>
/// Unixのエポック秒とDateTimeを変換するための構造体
/// </summary>
public struct UnixTime
{
    private readonly DateTime _dateTime;
    private static readonly DateTime UnixEpochBase = new DateTime(1970, 1, 1, 0, 0, 0, DateTimeKind.Utc);

    public UnixTime(uint unixEpochDate)
    {
        _dateTime = UnixEpochBase.AddSeconds(unixEpochDate).ToLocalTime();
    }

    /// <summary>
    /// UnixTime型からDateTime型に変換する。
    /// </summary>
    /// <param name="from">基準となるUnixTime</param>
    /// <returns>DateTime</returns>
    public static implicit operator DateTime(UnixTime from)
    {
        return from._dateTime;
    }
}
```
2018/11/12: コメントでご指摘いただいたので class から struct に変更しました。
2018/11/13: 同じくコメントでのアドバイスにより、コンストラクタで変換してDateTimeを保持するようにしました。


# 使い方

時刻数値を引数にしてUnixTimeオブジェクトを作り、代入するだけ。

```CSharp
public class Hoge
{
    private DateTime dateTime;

    public void SetTime(uint epocSeconds)
    {
        dateTime = new UnixTime(epocSeconds);
    }
}
```

# 解説

```public static implicit operator DateTime(UnixTime from)```というのは演算子オーバーロードの一つで、この場合UnixTime型からDateTime型への暗黙的な型変換を定義するものです。
つまり、```dateTime = new UnixTime(epocSeconds);```と書くと自動的に上記の型変換メソッドが呼ばれるわけです。

ちなみに暗黙的型変換に対して明示的型変換というのもあります。
キーワードimplicitの代わりにexplicitを使います。そのようにして演算子オーバーロードを定義すると、```dateTime = (DateTime)new UnixTime(epocSeconds);```のように明示的に型キャストを指示する必要があります。

参考：[変換演算子のオーバーロード](https://docs.microsoft.com/ja-jp/dotnet/csharp/programming-guide/statements-expressions-operators/using-conversion-operators)
ionicでcordova buildできなかったときにしたこと

Windowsでionicの次のコマンドでAndroidのapkを作成しようとしたときに発生したエラーを解決しましたので、簡易的なメモですが備忘のため記録します。

```
ionic cordova build android
```

## 対処概要

* Android Studio インストール
* adbのパスを環境変数に追加
* javaのパスを環境変数に追加
* Android イメージダウンロード

## 対処内容

### Android Studio インストール

以下のURLの「DOWNLOAD ANDROID STUDIO」ボタンをクリックしてダウンロード。

https://developer.android.com/studio/

ダウンロードしたファイルを実行してインストール。

### adbのパスを環境変数に追加

以下のパスを環境変数に追加。

```
C:\Users\[ユーザー名]\AppData\Local\Android\Sdk\platform-tools
```

### javaのパスを環境変数に追加

以下のパスを環境変数に追加。
※Javaを他で利用していないため、Android Studio依存のパスですが許容しています

```
C:\Program Files\Android\Android Studio\jre\bin
```

### Android イメージダウンロード

以下のエラーが出た場合には、
対象のイメージがダウンロードできていないのでダウンロードします。

```
BUILD FAILED in 1m 41s
cmd: Command failed with exit code 1 Error output:
FAILURE: Build failed with an exception.

* What went wrong:
A problem occurred configuring project ':CordovaLib'.
> You have not accepted the license agreements of the following SDK components:
  [Android SDK Platform 27].
  Before building your project, you need to accept the license agreements and complete the installation of the missing components using the Android Studio SDK Manager.
  Alternatively, to learn how to transfer the license agreements from one workstation to another, go to http://d.android.com/r/studio-ui/export-licenses.html
```

Android Studioで初めてプロジェクトを作成して、
エミュレータで実行するときに規約に同意してイメージをダウンロードすれば
OKでした。

成功すると次のようなメッセージが表示されます。

```
BUILD SUCCESSFUL in 1s
46 actionable tasks: 1 executed, 45 up-to-date
Built the following apk(s):
        [プロジェクトルート]\platforms\android\app\build\outputs\apk\debug\app-debug.apk
```

何かのお役に立てれば幸いです。
CentOS上にPython3.7をインストールする（pyenv）

# 概要

CentOS7上にpyenvを使ってpython 3.7.1をインストールしようとしたら、module不足のエラーが発生しました。
本記事では、エラー内容とその解消方法を記載しています。

# 環境

* CentOS 7.5.1804 (Core)
* kernel 3.10.0-862.14.4.el7.x86_64
* pyenv 1.2.8

# Pythonインストールまでにやったこと

* pyenvのインストールと環境変数のセットアップ

```bash
$ sudo yum -y install git
$ git clone https://github.com/yyuu/pyenv.git ~/.pyenv
$ vi ~/.bash_profile
# 以下を追記する。
export PYENV_ROOT="$HOME/.pyenv"
export PATH="$PYENV_ROOT/bin:$PATH"
eval "$(pyenv init -)"

$ . ~/.bash_profile
```

* 必要なパッケージのインストール

```
$ sudo yum -y install xz bzip2 sqlite-devel gcc openssl-devel readline-devel zlib-devel
```

# Python3.7インストール

```bash
$ /bin/bash -lc "pyenv install 3.7.1 && pyenv rehash && pyenv global 3.7.1"
Downloading Python-3.7.1.tar.xz...
-> https://www.python.org/ftp/python/3.7.1/Python-3.7.1.tar.xz
Installing Python-3.7.1...

BUILD FAILED (CentOS Linux 7 using python-build 1.2.8)

Inspect or clean up the working tree at /tmp/python-build.20181110073538.3811
Results logged to /tmp/python-build.20181110073538.3811.log

Last 10 log lines:
    import pip._internal
  File "/tmp/tmp295z_qwe/pip-10.0.1-py2.py3-none-any.whl/pip/_internal/__init__.py", line 42, in <module>
  File "/tmp/tmp295z_qwe/pip-10.0.1-py2.py3-none-any.whl/pip/_internal/cmdoptions.py", line 16, in <module>
  File "/tmp/tmp295z_qwe/pip-10.0.1-py2.py3-none-any.whl/pip/_internal/index.py", line 25, in <module>
  File "/tmp/tmp295z_qwe/pip-10.0.1-py2.py3-none-any.whl/pip/_internal/download.py", line 39, in <module>
  File "/tmp/tmp295z_qwe/pip-10.0.1-py2.py3-none-any.whl/pip/_internal/utils/glibc.py", line 3, in <module>
  File "/tmp/python-build.20181110073538.3811/Python-3.7.1/Lib/ctypes/__init__.py", line 7, in <module>
    from _ctypes import Union, Structure, Array
ModuleNotFoundError: No module named '_ctypes'
make: *** [install] Error 1
```

以下のモジュールが存在しないとのエラーが出力されました。

```bash
ModuleNotFoundError: No module named '_ctypes'
```

# 解消方法

libffi-develをインストールしてあげれば解決しました。

```bash
$ sudo yum -y install libffi-devel
```

python3.7.1再インストール。

```bash
$ /bin/bash -lc "pyenv install 3.7.1 && pyenv rehash && pyenv global 3.7.1"
Downloading Python-3.7.1.tar.xz...
-> https://www.python.org/ftp/python/3.7.1/Python-3.7.1.tar.xz
Installing Python-3.7.1...
WARNING: The Python bz2 extension was not compiled. Missing the bzip2 lib?
Installed Python-3.7.1 to /home/vagrant/.pyenv/versions/3.7.1

$ pyenv versions
  system
* 3.7.1 (set by /home/vagrant/.pyenv/version)
```

無事成功。

# 参考

* Github（pyenv）のissues  
https://github.com/pyenv/pyenv/issues/1183

# 2019/1/13追記

* Ubuntuの場合

libffi-develに相当するパッケージはlibffi-dev。

```bash
$ sudo apt-get install libffi-dev
```
module 'scipy' has no attribute 'io'の対処

## 環境
* windows8.1
* python3.5

scipy.io.wavfile.writeを使いたかったが、`import scipy`だけでは下記のエラーが出た

```
AttributeError: module 'scipy' has no attribute 'io'
```

## 解決法
[こちら](https://qiita.com/scleen_x_x/items/65afb5d9b15142bf11a9)に従い、下記のようにすれば動作した

```python:sample.py
import scipy
from scipy import io
from scipy.io import wavfile
```

##原因
[こちら](https://stackoverflow.com/questions/11172623/why-cant-i-use-the-scipy-io)によると、`import パッケージ名`ではパッケージ内のモジュールにはアクセスできない。
そのため`import パッケージ名.モジュール名`する必要がある。（または`from パッケージ名 import モジュール名`）

##参考
* [サウンドを使った機械学習と分類を始めるときの手順をまとめてみた（参考：実践機械学習システム） ヽ(ﾟｰﾟ*ヽ)(ﾉ*ﾟｰﾟ)ﾉわぁい](https://qiita.com/scleen_x_x/items/65afb5d9b15142bf11a9)
* [Why can't I use the scipy.io?](https://stackoverflow.com/questions/11172623/why-cant-i-use-the-scipy-io)
expressでDBに接続してみる


## mysql install

```shell-session
$ brew install mysql
## mysql起動、ユーザー作成
```


以下の記述を、app.jsに追加


```javascript

var mysql = require('mysql')
var connection = mysql.createConnection({
  host     : 'localhost',
  user     : 'user',
  password : '******',
  database : 'my_db'
});

connection.connect()

connection.query('SELECT 1 + 1 AS solution', function (err, rows, fields) {
  if (err) throw err

  console.log('The solution is: ', rows[0].solution)
})

connection.end()
```

```shell_session
$ DEBUG=myapp:* npm startexp
```

mysqlのエラーが出つつ、なんとかクリア
v-modelに初期値をインラインから設定する


##はじめに

form の input 要素 や textarea 要素、 select 要素に双方向 (two-way) データバインディングさせるためには、
`v-model` を使用します😇

しかし、 Vue.js の[ドキュメント](https://jp.vuejs.org/v2/guide/forms.html)に以下のようなことが書いてあります。

>v-model は任意の form 要素にある value、checked または selected 属性の初期値を無視します。input または textarea は常に、信頼できる情報源として Vue インスタンスを扱います。コンポーネントの data オプションの中で JavaScript 側で初期値を宣言する必要があります。

つまり、 `v-model` は入力の初期状態を無視するため、フォーム要素でチェックまたは選択した値を設定することはできません😿
常に Vue インスタンスデータが扱われるので、 
初期値を設定するためには、data オプション( JavaScript ) 側で初期値を宣言する必要があります。

##初期値をHTML側でセットしたい😿

編集画面などで、ビューをレンダリングしたときに、入力データを HTML 側から取得したいことがよくあります😥
しかし、`v-model` でデータバインディングしている入力要素では、初期状態が無視されるので、
初期値を設定するためには data オプションで入力値をセット(取得)しないといけません。。。
`type="text"` 要素だとシンプルに値を取得すれば良いのですが、　
`type="radio"`要素や`type="checkbox"`では少し手間がかかります。
何より、例えば入力要素が動的に変動するような場合に、柔軟に対応できないと思いました。

```javascript
data: function () {
  return {
    name: document.getElementById('js-name').value
  }
}
```

##カスタムディレクティブを使う！

Vue.js は実際に HTML から初期化するようには設計されていないので、
ディレクティブを使用して値を初期化してみる！

Vue.js ではディレクティブの標準セット(`v-model`,`v-show`など)に加えて 、
独自のカスタムディレクティブを登録することができます✌️


```javascript

Vue.directive('init', {
  bind: function (el, binding, vnode) {
    vnode.context[binding.arg] = binding.value
  }
})
```

上記では、`v-init` というカスタムディレクティブを登録しています。
カスタムディレクティブにはフック関数が提供されており、 `bind` フックを利用して初回のみセットするように指定します👏

> bind: ディレクティブが初めて対象の要素にひも付いた時に 1度だけ呼ばれます。ここで 1回だけ実行するセットアップ処理を行えます。

また、フック関数は引数を持っており、それらを利用することで初期値を設定することが可能になります。
ディレクティブフック引数については[こちら](https://jp.vuejs.org/v2/guide/custom-directive.html#%E3%83%87%E3%82%A3%E3%83%AC%E3%82%AF%E3%83%86%E3%82%A3%E3%83%96%E3%83%95%E3%83%83%E3%82%AF%E5%BC%95%E6%95%B0)

### カスタムディレクティブ`v-init`の例


```html
<input type="checkbox" v-model="subscribed" v-init:subscribed="true">
```

`v-init`はコロン`:`の後の名前であるバインディング引数をとり、
それを Vue インスタンス上の指定された値に設定します😇
※Angular の `ng-init` に似ている？

これによって、`v-model`でデータバインディングしている入力要素に、インラインで値を初期化することができました👏

## 注意点

しかし、いくつかの注意点があります😰

- データプロパティを先に宣言する必要があります。
- すべてJavaScriptとして評価されるため、キャメルケースのデータプロパティを設定する場合は、その指示文のキャメルケース変換にケブケースを記述する必要があります。

### 参考

[Set Initial value to vue.js model which is directly available in HTML](https://stackoverflow.com/questions/47885443/set-initial-value-to-vue-js-model-which-is-directly-available-in-html)
Windows Subsystem for Linux(WSL)に「Ubuntu 18.04 TLS」を入れたときに最初にしたこと(WSL2対応)

## 会社のPCにWSLをインストール
linuxのmanを見たり、簡単なshellを試したりするのに会社のPC(Windows10Pro)にWSLをインストールしました。
たまに環境が汚くなったら消して入れ直すので、その時のためのメモ(備忘録)。

インストールは、Microsoft Storeからサクッとインストールします。
useridとpasswordを聞かれるので適当に設定(忘れないように!)。

## Proxyを通すために環境変数を追加
社外に出るのにproxyを経由するので、~/.bashrcに環境変数を追加する。

```~/.bashrc
(省略)
export ftp_proxy=http://<userid>:<password>@proxy.company.co.jp:8080
export http_proxy=http://<userid>:<password>@proxy.company.co.jp:8080
export https_proxy=http://<userid>:<password>@proxy.company.co.jp:8080
```
useridとpasswordは管理者の方に確認してください(linuxのuseridではありません)。


## パッケージを最新化します。
```
$ sudo -E apt update && sudo -E apt upgrade -y
```
sudoに「-E」オプションがあるのは、ログインユーザーの環境変数(proxyの設定)を読み込ませるため。


## 日本語ロケールに設定
下記コマンドで、コマンドの出力を日本語に変更。

```
$ sudo -E apt install language-pack-ja-base language-pack-ja ibus-mozc
```

続いて「locale」を更新。

```
$ sudo update-locale LANG=ja_JP.UTF-8
```
一度、WSLを閉じて起動しなおす。
以下のコマンドでもいいかも。

```
exec $SHELL -l
```

LANG変数を確認し、dateコマンドを実行して日本語表示するか確認。

```
$ echo $LANG
ja_JP.UTF-8
$ date
2018年  3月  7日 水曜日 12:20:12 DST
```

## manコマンドの日本語化
下記コマンドで日本語マニュアルをインストール。

```
$ sudo -E apt install -y manpages-ja manpages-ja-dev
```
manコマンドを実行し日本語表示するか確認。

```
man bash
```
## タイムゾーンの変更

初期状態では、タイムゾーンが「DST」となっていて、日本標準時になっていないので下記コマンドを実行し変更。

```
$ sudo dpkg-reconfigure tzdata
```
下記画面になるので「アジア」を選択。 
![](https://i.imgur.com/UkOMcv5.jpg)

続いて「東京」を選択し[Enter]。


## WSL2にアップデート(2019.09.02追記)
参照：[公式ドキュメント](https://docs.microsoft.com/en-us/windows/wsl/wsl2-install)
1. 管理者としてPowerShellを起動
2. Enable-WindowsOptionalFeature -Online -FeatureName VirtualMachinePlatform を入力
3. wsl -l で使用可能なディストリビューションを検索
4. wsl --set-version 「使用するディストリビューション名」 2 でWSL2への切り替えがスタート

```powershell:(#3)
PS C:\WINDOWS\system32> wsl -l
Windows Subsystem for Linux ディストリビューション:
Ubuntu-18.04 (既定)
PS C:\WINDOWS\system32>
```  

```powershell:(#4)
PS C:\WINDOWS\system32> wsl --set-version Ubuntu-18.04 2
変換中です。この処理には数分かかることがあります...
WSL 2 との主な違いについては、https://aka.ms/wsl2 を参照してください
変換が完了しました。
PS C:\WINDOWS\system32>
```
プログレスバーなども一切出ずに5分以上掛かったと思います。辛抱強くお待ちください。


気のせいかも知れませんが `sudo apt update && sudo apt ugrade -y` がやたらと早くなったような気がします。

以上
Rubyでミンコフスキー距離

##ITP1_10_D
[AOJ](http://judge.u-aizu.ac.jp/onlinejudge/description.jsp?id=ITP1_10_D&lang=jp)より、ミンコフスキー距離を算出する問題
![スクリーンショット 2018-11-10 16.02.04.png](https://qiita-image-store.s3.amazonaws.com/0/264562/7f61966d-9dce-54f3-836d-aa5722eea10d.png)
文系の僕には式を見ても何も理解出来ませんでした。
Σなんて高校数学以来触ってすらない・・・。
Σを用いない計算式がググってもなかなか見つからずに困ったので備忘録用に。

##結論

```ruby
n = gets.to_i
a=gets.split.map &:to_i
b=gets.split.map &:to_i
c=n.times.map{|i|(a[i]-b[i]).abs}
p c.sum
p c.map{|i| i**2}.inject(:+)**0.5
p c.map{|i| i**3}.inject(:+)**(1/3.to_f)
p c.max
```

##p=1~2までのそれぞれの距離の定義
```
#マンハッタン距離
Dxy=|x1−y1|+|x2−y2|+...+|xn−yn|
```

```
#ユークリッド距離
Dxy=√(|x1−y1|)**2+(|x2−y2|)**2+...+(|xn−yn|)**2)
```

```
#チェビシェフ距離
Dxy=maxni=1(|xi−yi|)
```
問題文に付属していた公式が上記。
p=1,2の場合は理解出来るがp=3の事例は見当たらずチェビシェフ距離の公式に至っては何を意味してるのかが分からない。
Wikipediaよりチェビシェフ距離とはチェス盤の距離らしいので、なんだ`(|x2-x1|,|y2-y1|)`のことかと解決。
今回の場合では絶対値の最大値を取ってあげれば解決。

##p=3の距離の定義

```
Dxy=(|x1−y1|)**3+(|x2−y2|)**3+...+(|xn−yn|)**3)**(1/3)
```
ググったところ、p=2のケースに１足して考える模様。
√は`**(1/2)`とも受け取れるので、+1して`**(1/3)`にするようです。

##追記
@scivola さんの投稿 [ミンコフスキー距離を絵にしてみた](https://qiita.com/scivola/items/ee37b686d0b36d6e9b39#_reference-59ee3759dcc7717d083a) にて絵にして頂きました、光栄の限りです・・。
Kotlin で手軽にテキストファイルを読み込む

## 概要

- Kotlin Standard Library に含まれている java.io.File.readText を使用
- 文字エンコーディング UTF-8, EUC-JP, Shift_JIS のテキストファイルを読み込む

## サンプルコード cat.kts

```kotlin
import java.io.File

val pathUtf8  = args[0]
val pathEucjp = args[1]
val pathShiftjis = args[2]

println("UTF-8 : ${pathUtf8}")
println(File(pathUtf8).readText(Charsets.UTF_8))

println("EUC-JP : ${pathEucjp}")
println(File(pathEucjp).readText(charset("EUC-JP")))

println("Shift_JIS : ${pathShiftjis}")
println(File(pathShiftjis).readText(charset("Shift_JIS")))

println("windows-31j : ${pathShiftjis}")
println(File(pathShiftjis).readText(charset("windows-31j")))
```

## 読み込むテキストファイル (UTF-8, EUC-JP, Shift_JIS) を用意

UTF-8, EUC-JP, Shift_JIS のテキストファイルを用意。Shift_JIS (Windows-31J, CP932: Microsoft Windows Codepage 932) のファイルには文字化けしがちな文字を入れておく。

```
$ cat utf8.txt 
さんぷる
サンプル
SANNPURU

$ nkf -E eucjp.txt 
さんぷる
サンプル
SANNPURU

$ nkf -S shiftjis.txt 
さんぷる
サンプル
SANNPURU
①㈱髙
```

## サンプル実行結果

サンプルコードを実行。

```
$ kotlinc -script cat.kts utf8.txt eucjp.txt shiftjis.txt
UTF-8 : utf8.txt
さんぷる
サンプル
SANNPURU

EUC-JP : eucjp.txt
さんぷる
サンプル
SANNPURU

Shift_JIS : shiftjis.txt
さんぷる
サンプル
SANNPURU
�@�棋�

windows-31j : shiftjis.txt
さんぷる
サンプル
SANNPURU
①㈱髙
```

Shift_JIS のテキストファイルは、charset に "Shift_JIS" を指定したら見事に文字化けしている。 "windows-31j" を指定すると文字化けしない。

## 動作確認環境

Kotlin 1.3.0 + Java 11.0.1 + macOS Mojave 10.14.1

```
$ kotlin -version
Kotlin version 1.3.0-release-212 (JRE 11.0.1+13-LTS)

$ kotlinc -version
info: kotlinc-jvm 1.3.0 (JRE 11.0.1+13-LTS)

$ java -version
java version "11.0.1" 2018-10-16 LTS
Java(TM) SE Runtime Environment 18.9 (build 11.0.1+13-LTS)
Java HotSpot(TM) 64-Bit Server VM 18.9 (build 11.0.1+13-LTS, mixed mode)

$ uname -mrsv
Darwin 18.2.0 Darwin Kernel Version 18.2.0: Fri Oct  5 19:41:49 PDT 2018; root:xnu-4903.221.2~2/RELEASE_X86_64 x86_64

$ sw_vers
ProductName:	Mac OS X
ProductVersion:	10.14.1
BuildVersion:	18B75
```

## 参考資料

- [Kotlin でコマンドラインの Hello World アプリケーション \- Qiita](https://qiita.com/niwasawa/items/6b0c5ae8d37d12e5a40d)
- [readText \- Kotlin Programming Language](https://kotlinlang.org/api/latest/jvm/stdlib/kotlin.io/java.io.-file/read-text.html)
- [charset \- Kotlin Programming Language](https://kotlinlang.org/api/latest/jvm/stdlib/kotlin.text/charset.html)
- [JDK 11 Documentation - Internationalization Guide - Supported Encodings](https://docs.oracle.com/en/java/javase/11/intl/supported-encodings.html)
- [Java Platform Standard Edition 8 Documentation - Java™ Internationalization Support - Supported Encodings](https://docs.oracle.com/javase/8/docs/technotes/guides/intl/encoding.doc.html)
- [Java Platform Standard Edition 8ドキュメント - Java(tm)の国際化サポート - サポートされているエンコーディング](https://docs.oracle.com/javase/jp/8/docs/technotes/guides/intl/encoding.doc.html)
- [Microsoftコードページ932 \- Wikipedia](https://ja.wikipedia.org/wiki/Microsoft%E3%82%B3%E3%83%BC%E3%83%89%E3%83%9A%E3%83%BC%E3%82%B8932)
- [本当は怖くないCP932 \- Qiita](https://qiita.com/kasei-san/items/cfb993786153231e5413)
- [【 nkf 】コマンド――文字コードと改行コードを変換する：Linux基本コマンドTips（51） \- ＠IT](http://www.atmarkit.co.jp/ait/articles/1609/29/news016.html)
「Qiitaでのアカウント停止について」の大事な3点。HRTは最重要ガイドライン・スルースキルを身に着けよう・停止理由は「技術的誤り」ではない。


# 元の話

「技術的に誤りが含まれている記事」を元にして、話が派生して、トレンドでバズったりコメント欄で応酬があったという話。

関連記事がいろいろと。

- [今後必要になるプログラム言語](https://qiita.com/administrator1974/items/387aab2a42bf57e3b215) (停止済み)
- [「今後必要になるプログラム言語」にひたすらマサカリを飛ばす - Qiita](https://qiita.com/alter/items/389dba835cccf4e54e11)
- [「今後必要になるプログラム言語」を読むに当たって - Qiita](https://qiita.com/pik/items/1c95d69debee4aedffea)

ひとつのアカウントが停止扱いになり、それに対してQiitaから公式のガイダンスがあった。

[Qiitaでのアカウント停止に関する考えについて - Qiita Blog](https://blog.qiita.com/account-suspension-in-qiita/)



# HRTは最重要ガイドライン


決してQiitaの人がそう言ったわけではないが、僕はそう思っている。

要するに「マナーを大事に」しよう。

>HRTを尊重したコミュニケーションを取っていただけるよう重ねてお願いいたします

[大事な言葉・HRT～「Humility（謙虚）」、「Respect（尊敬）」、「Trust（信頼）」。ああなんて難しい - Qiita](https://qiita.com/developer-kikikaikai/items/9e08fe0f8ee0eebaccab)


# スルースキルを身に着けよう

言うは易し行うは難し案件ではあるけれども。

>万が一そうした点を尊重しないコミュニケーションに巻き込まれてしまった場合は、必要以上にご自身で対応しようとせずQiitaサポートまでお問い合わせください。


# アカウント停止の理由は「技術面な誤り」じゃない

問題と鳴った元の記事が既に見られないので、何があったかは正確に追いづらいが、アカウント停止理由は「技術的にどうこう」ではない。

Qiitaの運営・運用を素直に受け取ろう。

なぜなら、他にも膨大に「技術的に間違った記事」なんて膨大にあるだろうけれど、それが削除されたという話は聞かないということが反証になると思う。

>Qiitaでは「技術的にレベルが低い」「技術的に間違っている」「Qiitaというサービスや運営に批判的である」といった理由で記事の非公開化やアカウント停止という措置を取ることはございません。
>過去にも何度か事例がありますが、アカウント停止措置の実施理由は殆どの場合、他のユーザーに対して攻撃的な発言や誹謗中傷を繰り返すなど、コミュニティガイドラインや利用規約に沿わないというものです。

# ところで、そういうこの記事はQiitaガイドラインに沿っているの？

技術情報じゃないので厳密には違反しているのかもしれない。

僕自身は「プラットフォーム自体について語れないプラットフォームなんてないよね」と考えている。

気になる方はコメント欄で注意喚起をお願いしたい。

# あわせて読みたい？

- [Qiitaと炎上問題。ユーザー努力によるコミュニティ改善をしよう。 - Qiita](https://qiita.com/YumaInaura/items/27a766acfb42c1203a11)
  - テーマが大きくなった部分を、別記事として分離したもの。









<!-- Update From Qiita API -->

# チャットメンバー募集


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

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





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
Hopfield networkに画像を覚えさせる

# Hopfield networkでやれること

**複数の画像をモデルに埋め込むことができる。**

1. モデルに画像を学習させる
2. 学習済みモデルを使って、ノイズありの覚えさせた画像から、元々のノイズなしの画像を復元

## 例

**1. モデルに複数枚の画像を学習させる**

覚えさせる画像１：「lena.jpg」　↓
<img width="250" alt="woman.png" src="https://qiita-image-store.s3.amazonaws.com/0/247972/70d1d8b8-299e-29ae-07dc-65ac7a4b5c2c.png">

**2. 学習済みモデルを使って、ノイズありの覚えさせた画像から、元々のノイズなしの画像を復元**

ノイズあり画像１（lena.jpgにノイズを加えた後）：「noise_lena.jpg」　↓
<img width="250" alt="noise_woman.png" src="https://qiita-image-store.s3.amazonaws.com/0/247972/a06b631b-011f-0154-f486-871171fd33be.png">

ノイズあり画像１（noise_lena.jpg）から復元した画像：「restored_noise_woman.jpg」　↓
<img width="250" alt="restored_noise_woman.png" src="https://qiita-image-store.s3.amazonaws.com/0/247972/7a1aee19-1915-0d0d-1c26-68c65746514c.png">

# Hopfield networkとは

ニューロン間に対照的な相互作用があるニューラルネットワークである。

例として、２ x ２ の画像を想定する。
各ピクセルがニューロンとなり、ニューロン間には自分以外のニューロンとの間に学習した重みwを設定する。

![network.png](https://qiita-image-store.s3.amazonaws.com/0/247972/db937a56-250e-7783-9cd3-9e48ded2872e.png)
（※参考1）

## 学習モード(重みの設定)

![プレゼンテーション1.png](https://qiita-image-store.s3.amazonaws.com/0/247972/23d2b7f6-d411-31e1-e0b3-d3a97ebf98f6.png)

## 想起モード（復元）

![プレゼンテーション2.png](https://qiita-image-store.s3.amazonaws.com/0/247972/ad6359ef-dcf9-4e16-c7c7-bf711b8977b1.png)

(例では、閾値θ=0でも想起できた。)

Hopfield network の学習から想起（復元）までのアルゴリズムは、(とりあえず)以上です。

**めちゃくちゃシンプルです。**

# 備考

## 「適当に長い時間」とは？

ここで、エネルギー関数 E を考える。

![プレゼンテーション3.png](https://qiita-image-store.s3.amazonaws.com/0/247972/91dd7707-b59a-15a6-b001-a0d549df4551.png)

エネルギーのイメージ図です。 ↓
谷に落ちると、画像がうまく復元できる。（できない場合もある。 -> 局所解）

![enegy.gif](https://qiita-image-store.s3.amazonaws.com/0/247972/3cba7b2c-e577-9a35-b783-296b11f77500.gif)
（※参考2）

## ボルツマンマシン

Hopfield network は**局所最適解に落ちやすい。**
よって、この問題を改良したのが**ボルツマンマシン**

[ボルツマンマシン](http://www.sist.ac.jp/~kanakubo/research/neuro/boltzmannmachine.html)

# 参考
- [再帰型ニューラル・ネットワークの徹底調査](https://www.ibm.com/developerworks/jp/cognitive/library/cc-cognitive-recurrent-neural-networks/index.html)
- [ニューラルネットワークのエネルギー関数](http://www.gifu-nct.ac.jp/elec/deguchi/sotsuron/kanbe/node8.html)
Expressを使って簡単なアプリ作成

nodeの勉強のために、expressを使ってアプリ作成part2

https://expressjs.com/ja/starter/generator.html
を追うだけの簡単なお仕事

## インストール

```
$ npm init
$ npm install express-generator
```

## アプリ立ち上げ

テンプレートエンジンとスタイルシートエンジンをオプションで選択できるよう。
普段phpをよく使う身としては、twigが描きやすそう
スタイルシートは普通にcssでいいでしょう。

```
$ express --view=twig myapp
$ ls .
myapp
node_modules
package-lock.json
package.json

$ tree myapp
myapp
├── app.js
├── bin
│   └── www
├── package.json
├── public
│   ├── images
│   ├── javascripts
│   └── stylesheets
│       └── style.css
├── routes
│   ├── index.js
│   └── users.js
└── views
    ├── error.twig
    ├── index.twig
    └── layout.twig
$ cd myapp
$ npm install
$ DEBUG=myapp:* npm start
```

以下のようなページが表示されましたー。


<img width="1360" alt="スクリーンショット 2018-11-10 15.42.30.png" src="https://qiita-image-store.s3.amazonaws.com/0/168990/6016b8de-69be-723c-54b9-7cde6c7e5015.png">
Qtを使ってmacOS上で等幅フォントで日本語を描画する

この記事は、私がstackoverflowで質問した結果から書き起こしたものです。
https://ja.stackoverflow.com/questions/41083/

macOSでC++とQtを使って、等幅フォントでテキストを描画するとき、半角2文字と全角1文字の幅が一致するように描画したいと思いましたが、単純にやっただけだと、幅が変わってしまいました。

``` .cpp
void MainWindow::paintEvent(QPaintEvent *event)
{
    QPainter p(this);
    p.setFont(QFont("Monaco", 20));
    p.drawText(0, 30, "WWWWWWWWWW");
    p.drawText(0, 60, "||||||||||");
    p.drawText(0, 90, "あああああ");
}
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/61222/6c1cea99-cf65-1244-0538-de13238f8d71.png)

Monacoは等幅フォントですが、欧文フォントなので、漢字1文字の幅と英数2文字の幅が一致しません。

日欧混合で等幅描画したいとき、ひと工夫が必要です。

``` .cpp
void MainWindow::paintEvent(QPaintEvent *event)
{
    QPainter p(this);
    QFont font = QFontDatabase().font("Osaka", "Regular-Mono", 20);
    p.setFont(font);
    p.drawText(0, 30, "WWWWWWWWWW");
    p.drawText(0, 60, "||||||||||");
    p.drawText(0, 90, "あああああ");
}
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/61222/bb7a344a-fa53-2b1f-bc72-696e3329f6db.png)

Osakaは確実に日本語フォントです。ただ、Osakaフォントをそのまま使うとプロポーショナルになってしまうため、明示的に等幅フォントを取得する必要があります。