OmniAICreator/Qiita-1.07M huggingface dataset:
PHPSTORMをバージョンアップしたらデフォルトインデントが変わってしまった問題の対応

2018.2から2019以降にそのまま移行したときに発生しました。
具体的にはTypeScriptのインデントがスペース4からスペース2になってしまい、フォーマッタをかけると不都合な感じでした。

コードスタイルのTypeScriptにはスペース4と設定してあるのに・・・
あまり情報がなく、しばらくハマりました。のでこの機会に共有します。

設定⇒コードスタイルの「EditorConfigのサポートを有効にする」チェックを外すと直りました。
もとからオープンなコードスタイルをインポートしておくとPHPSTORMのデフォルトスタイルが変わった際も安心です。

![画像の貼り付け先_ 2019-8-21 15-46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284143/08519470-410f-c53b-29bd-e311902a2fd7.png)


PHPStormのオススメポイントはたくさんありますが、一つは簡単に背景画像が変更できることです。
アルベドやキアラをいつも眺めてないと書く気になりませんからね(!!)

Happy Coding~
appendとリスト結合の実行時間の差

# 事の発端
友人とatcoderの問題を解いてる時に、
https://atcoder.jp/contests/abc121/tasks/abc121_c

```python
N,M = [int(s) for s in input().split()]
lst=[]
for i in range(N):
  lst.append([int(s) for s in input().split()])
lst.sort()
count=0
cost=0
for e in lst:
  count+=e[1]
  cost+=e[0]*e[1]
  if(count>=M):
    cost-=e[0]*(count-M)
    break
print(cost)
```

は通るんですが、

```python
N,M = [int(s) for s in input().split()]
lst=[]
for i in range(N):
  lst = lst + [[int(s) for s in input().split()]]
lst.sort()
count=0
cost=0
for e in lst:
  count+=e[1]
  cost+=e[0]*e[1]
  if(count>=M):
    cost-=e[0]*(count-M)
    break
print(cost)
```

はTLEで通らなかった。

配列の生成は重そうなイメージあったんですが、実感したことはなかったので下記で確認。

```py
import time
n = 100000
ex_1 = []
ex_2 = []

start_1 = time.time()
for i in range(n):
    ex_1 = ex_1 + [i]
end_1 = time.time()

start_2 = time.time()
for i in range(n):
    ex_2.append(i)
end_2 = time.time()

print("結合time = {}".format(end_1 - start_1))
# 結合time = 17.951491832733154
print("append time = {}".format(end_2 - start_2))
# append time = 0.015935897827148438
```
3桁くらいの差がありました。
リストの結合は安直に使わないほうが良さそうでした。
同値性を確認してから条件を書き換えましょう - Fizz Buzz 問題を例に

Fizz Buzz を知らない方はこちらをご覧ください => https://ja.wikipedia.org/wiki/Fizz_Buzz

## 条件はシンプルに書きたい...

過去に php のモブプログラミングで Fizz Buzz をやったのですが，その中でこんな議論がありました．

> 「その数が **3 で割り切れる かつ 5 で割り切れる** とき Fizz Buzz と出力する」とあるけど， 3 で割り切れて 5 でも割り切れるなら，初めから 3 と 5 を掛けて **15 で割り切れる** にした方がよくない？

こうじゃなくて

```php
if ($n % 3 === 0 && $n % 5 === 0) {
```

こう書いた方がよいと．

```php
if ($n % 15 === 0) {
```

これは確かに正しいです．コードも見やすくなっていますよね．
でも，この 3 と 5 を **別の数字に変えて遊んでみよう** となったらどうでしょう？
4 と 6 の場合は 4 と 6 をかけて **24 で割り切れる** にしても良いでしょうか？
答えは NO です． 12 が 4 でも 6 でも割り切れますから．

## 「2 つの数字が互いに素」 で無ければ結果が破綻する

15 は単に 3 × 5 から導き出されるものではありません．理由は下記の通り：

n を自然数として，

「n が 3 で割り切れる かつ n が 5 で割り切れる」
<=> 「n が 3 の倍数 かつ n が 5 の倍数」
<=> 「n が 3 と 5 の **公倍数**」
<=> 「n が 『3 と 5 の **最小公倍数**』 の倍数」
<=> 「n が 15 の倍数」
<=> 「n が 15 で割り切れる」 (end)

3 と 5 が互いに素であるから最小公倍数がたまたま 3 * 5 になっていたに過ぎないのです．

## バグを生み出さないようにするために

今回の Fizz Buzz では 3 と 5 が題材に挙がっていたからスムーズにいきましたが，「割り切る数を後で変えられるようにする」などの拡張性を持たせようとするなら，少し考えなければいけないところです．

コーディングをする際に「この条件，こうすれば簡単じゃん」と思うことがあるかもしれません．でもコードを書き換える前に「変更前と変更後の条件は同値なのか？」という確認作業をしておくことが，テストフェーズに行ってからバグを生み出さないことにもつながると思います．
#VsCode で最近のファイルを開くコマンド、ショートカット ( Control + R ) ( Command + Shift + P -> Open Recent )

Command to open a recent file with #VsCode, shortcut (Control + R) (Command + Shift + P-> Open Recent)


Sublimetextと違い、最近のファイルをコマンド/ショートカットで開くことができる！

コマンドパレットを開き Open Recent と入力してみよう。

いいね！

![image](https://user-images.githubusercontent.com/13635059/63625716-66b4b600-c63b-11e9-8b72-bd02f0b87d0c.png)

Control + R がショートカットだ。


# Original by Github issue

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








<!-- Update From Qiita API -->

# チャットメンバー募集


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

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





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
素因数分解をできるだけ短く書いてみた（Python）

# はじめに
　とある友人から、これまたとあるプログラムの作成を依頼されたときに即席で素因数分解のコードを組んだのですが、再帰処理を使えば意外と短く素因数分解のコードを書くことができたので紹介します。

# コード
```Python
stack = []
def prime_factorization(target):
	# type:(int)->None
	for i in range(2, target):
		if target % i == 0:
			stack.append(i)
			next_mod = target // i
			prime_factorization(next_mod)
			return
	stack.append(target)

prime_factorization(2**10) #結果->[2, 2, 2, 2, 2, 2, 2, 2, 2, 2]

```

# 気持ち程度の解説
　まずやることは、調べたい数字が割り切れるかどうかです。ここではfor文で１と自分の数字以外でわれるかどうかという脳筋手法で調べています。
　そして、素数の場合はリストに追加し、逆に割り切れる場合は、調べたい数字を割った上で再帰します。

# 終わりに
　「Python　素因数分解」と調べると素因数分解をしてくれる関数があるライブラリが出てきますが、そういうライブラリが使えないというような状況になった場合にぜひ参考にしてください。

# 8/24追記
　私の書いた再帰処理は、コードが短くなる一方でメモリがかなり食われてしまったり、グローバル変数を使わなければならないといった欠点があります。
　そういった欠点を抑えつつ、簡潔なプログラムをコメントで教えていただいたので、追記させていただきます。

```Python
def prime_factorization(value: int) -> list:
    primes = []
    for i in range(2, value):
        while value % i == 0:
            primes.append(i)
            value //= i
        if value == 1:
            break
    return primes

print(prime_factorization(2**10)) #結果->[2, 2, 2, 2, 2, 2, 2, 2, 2, 2]
print(prime_factorization(12345678)) #結果->[2, 3, 3, 47, 14593]
```

```Python
def prime_factorization(value: int) -> generator:
    i = 2
    while i <= value:
        while value % i == 0:
            yield i
            value //= i
        i += 1

print(list(prime_factorization(2**10))) #結果->[2, 2, 2, 2, 2, 2, 2, 2, 2, 2]
print(list(prime_factorization(12345678))) #結果->[2, 3, 3, 47, 14593]
```
　特に２つ目はPythonのgeneratorを利用したかなりイケてるコードですねしゅごい...
【Vue初心者向け】シンプルなじゃんけんアプリを作る

Vue.jsで作ったシンプルなサンプルコードです。

対象者は、Vue.jsを始めたところで、色々サンプルコードをいじってみたい人です。

じゃんけんボタンを押すと、相手の手がランダムで決定され、結果が表示されます。

実際に動作はこちらで確認できます。

[じゃんけんアプリ](https://code.ameneko.com/janken)

```
<template>
    <div class="janken">
        <p>じゃんけん…</p>
        <div class="janken_choice">
            <button @click="startJanken(0)">グーを出す</button>
            <button @click="startJanken(1)">チョキを出す</button>
            <button @click="startJanken(2)">パーを出す</button>
        </div>
        <div class="janken_result">
            <p v-if="result">あなたは{{this.choice[this.yourChoiceNumber]}}を出して、相手は{{this.choice[this.enemyChoiceNumber]}}を出しました。結果は{{this.result}}です</p>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            choice: ["グー", "チョキ", "パー"],
            result: null,
            yourChoiceNumber: null,
            enemyChoiceNumber: null,
        }
    },
    methods:{
        startJanken(yourChoiceNumber){
            //ランダムで相手の数字を決定する
            var enemyChoiceNumber = Math.floor( Math.random()*3 );

            this.enemyChoiceNumber = enemyChoiceNumber
            this.yourChoiceNumber = yourChoiceNumber

            //じゃんけんの手によって結果を判定する
            if(yourChoiceNumber - enemyChoiceNumber == 0){
                this.result =  "あいこ"
            }
            if(yourChoiceNumber - enemyChoiceNumber == 1){
                this.result =  "負け"
            }
            if(yourChoiceNumber - enemyChoiceNumber == 2){
                this.result =  "勝ち"
            }
            if(yourChoiceNumber - enemyChoiceNumber == -1){
                this.result =  "勝ち"
            }
            if(yourChoiceNumber - enemyChoiceNumber == -2){
                this.result =  "負け"
            }
        }
    }
}
</script>

<style scoped>
.janken_result{
    margin-top:20px;
    font-weight:bold;
}

</style>
```
ポイントは、じゃんけんの手は配列にしている点です。配列の番号（数字）で手を判別します。
相手のじゃんけんの手は、Javascriptの乱数を用いています。0〜２が返ってきます。
じゃんけんの勝敗の判定の実装方法は色々あるようですが、今回はコードとして長いですが、自分の手と相手の手の数字の差で判別しています。

宣伝：ブログ書いてます！[ブログ](https://www.katonobo.com/)
【DirectX】FBX SDKの導入

# いったい何のために？
VRoid という, 無料で3D人型キャラクター(VR用のアバター)を作ることのできる,
高性能な素晴らしいソフトを知っているでしょうか.
私は, VRoid を用いて作成したデータを, どうにかしてアニメーションを付け,
DirectXで動かせないかと試行錯誤しました. そのメモ書き程度に.

VRMファイルをFBXファイルにするには, Blenderなどのソフトのプラグインを使用したり, 
UnityのAssetStoreに変換するやつがあったので, それらで.

# DirectX の導入
おそらく他に誰かが記事にしていたり, ブログがあると思うので省略.

# FBX SDK の導入
参考にさせていただいたページ
https://www.tkng45memo.com/fbxmesh

おおむねここのページ通りに進めていけば導入可能です.
しかし, バージョンアップが早いのか環境によって異なるのかは不明ですが,
追加の依存ファイルの数が違う場合があります.

私の環境では,
 - libfbxsdk-mt.lib
 - zlib-mt.lib
 - libxml2-mt.lib
 - libfbxsdk.lib
の４つでした.

この, 追加の依存ファイルの部分で詰まったため, ここにメモ書きを遺すことにします.

# おまけ
FBX SDKを使用するにあたり, やっぱりクラス化して便利に使いたいよね.

```C++:sample.cpp
int main()
{
     std::unique_ptr<FBX_Model> model = std::make_unique<FBX_Model>();
     model->Create(...);

     model->Draw(...);

     return 0;
}
```
みたいな.

参考になるかどうかは分かりませんが, こちらに.
https://github.com/Nyarll/FBX-SDK-Helper/tree/dev
Bearer認証について

HTTP上で認証を行う場合,

- セッションによる認証
- リクエストボディにトークンを含める認証
- 独自ヘッダにトークンを含める認証
- Authorizationヘッダを用いた認証(Basic, Digest, Bearer)
- JWT認証

など, 様々な方法がある.
この記事ではAuthorizationヘッダを用いた認証のうち, 特にBearer認証についてまとめている.

# 認証と認可
そもそも認証や認可とは何を指す言葉なのか.

**認証** ... ある個人を特定すること
**認可** ... 行動やリソースの許可をすること

よくあるWebサービスの場合, 認証を行った時点でそのユーザが使用できる機能が決まるため, 認可もされているということになる.

# Bearer認証
**Bearer**認証は, トークンを利用した認証・認可に使用されることを想定しており, OAuth 2.0の仕様の一部として定義されているが, その仕様内でHTTPでも使用しても良いと記述されている.
bearerは「担い手」や「使い」といった意味を持つ.
詳細は, 『RFC 6750 The OAuth 2.0 Authorization Framework: Bearer Token Usage』を参照.

HTTPのAuthorizationヘッダにスキームとして指定でき, `Authorization: Bearer <token>` のようにして指定する.
トークンの形式はtoken68の形式で指定することが定められている.

# Authorizationヘッダ
**Authorization**ヘッダの仕様に関しては, 『RFC 7235 Hypertext Transfer Protocol (HTTP/1.1): Authentication』を参照.

Authorizationヘッダに指定できるスキームには, BasicやDigest, Bearer等が存在し, これらのスキームはIANAによって管理されている.

# token68
**token68**は１文字以上の半角英数字, `-` (ハイフン), `.` (ドット), `_` (アンダーバー), `~` (チルダ), `+` (プラス), `/` (スラッシュ)から構成された文字列を指す.
文字列の末尾に任意個の `=` (イコール)が挿入されていても良い.

# リクエストとレスポンス
まずクライアントから `Authorization: Bearer <token>` を含めたリクエストが投げられる.
それを受け取ったサーバは `WWW-Authenticate: Bearer realm="XXXX"` 形式, 又は `WWW-Authenticate: Bearer error="XXXX"` 形式のヘッダを含めたレスポンスを返す.

### 成功パターン
特に返したいパラメータが無い場合は `realm` を空にして返す.

```
WWW-Authenticate: Bearer realm=""
```

### 失敗パターン

##### リクエストにAuthorizationヘッダが含まれていないケース(401 Unauthorized)

```
WWW-Authenticate: Bearer realm="token_required"
```

##### リクエストパラメータが不正なケース(400 Bad Request)

```
WWW-Authenticate: Bearer error="invalid_request"
```

##### トークンが失効, 破損しているケース(401 Unauthorized)

```
WWW-Authenticate: Bearer error="invalid_token"
```

##### トークンのスコープが不十分なケース(403 Forbidden)

```
WWW-Authenticate: Bearer error="insufficient_scope"
```

# トークンはどこに保持するのか
クライアント側はlocalStorageかsessionStorage, サーバ側はDBに保存することになる.

# トークンに有効期限は設けるのか
トークンが漏れてしまうと第三者がそのトークンを使ってあらゆる操作ができてしまうため, 有効期限は設けておくべき.
webarenaでubuntu その26

#概要

webarenaでubuntu18.04やってみた。
mysql5.7やってみた。
csvをインポートする方法の検討。

#案1

csvをftpでアップロードして、
mysqlのコマンドラインで、LOAD DATA LOCAL INFILEを使う。
一行づつとか、できないっぽい。文字化けするよね。
使った事がない。

#案2

入力する、フォームを作って、VBSで、IEを操作して、１件づづ、アップロード。
IEが、言う事を聞かん。

#案3

入力する、phpにvbsでpostデータを１件づづ、送りつける。
生postデータを作るのが、めんどい。

#実際

案2を採用。
windows7、IE11では、動かず。vista、IE9で、実行。

以上。
Laravelでpublic下のファイルが読み込めない場合

laravelではasset('ファイルパス')でpublicディレクトリのパスを受け取るが、タイポも無いのにcssやjsが読み込めない場合は、rootからのディレクトリ名に<b>日本語</b>や<b>特殊文字</b>が無いか確認してみましょう。
Rust で fmap

型の中に関数を適応させます。

ああこれってHaskellのfmapに似てる〜ってちょっと感動したのでメモです。
堅牢さと簡潔さが両方求めるような状況下で役立ちそうです。

# Haskell

## コード

```haskell
main = do 
   print (fmap  (+7) (Just 10)) 
   print (fmap  (+7) Nothing)
```

## 結果

```
Just 17
Nothing
```

# Rust

## コード

```rust
fn main() {
    println!("{:?}", Some(10).map(|v| v+7));
    println!("{:?}", None::<usize>.map(|v| v+7));
}
```

## 結果

```
Some(17)
None
```

# 参考
[AtCoder abc118 arzkさんの回答](https://atcoder.jp/contests/abc118/submissions/4294200)
Djangoのchoicesで設定した値をDB値ではなく読みやすい方の値をテンプレートに表示する

# はじめに
choiceの選択値の表示方法を調べると、カスタムタグライブラリ作成したり、get_foo_displayで表示できるって書いてあったり（結局表示されたのはDB値の方）でもっとシンプルな方法ないか調べてみました。

# モデル
```models.py
from django.db import models
from djchoices import DjangoChoices, ChoiceItem

class HumanResource(models.Model):
    """ 人材情報
    """
    class ResourceType(DjangoChoices):
        empty = ChoiceItem('', '選択してください')
        employee = ChoiceItem(0, '社員')
        business_partner = ChoiceItem(1, 'ビジネスパートナー')
        freelance = ChoiceItem(2, 'フリーランス')

    human_resource_type = models.CharField('人材の種類', max_length=1, blank=True, null=True, choices=ResourceType.choices)

    def resource_type_verbose(self):
        return self.ResourceType.get_choice(int(self.resource_type)).label
```
  
# テンプレート
```html
...
..
.
{% for item in items %} <!-- view側でcontext['items'] = HumanResource.objects.all()してます。-->
{{ item.resource_type_verbose }} <!-- 社員とかフリーランスとかがちゃんと表示される -->
{% endfor %}
...
..
.
```
  
これだけで表示できるんかーーーーい
【lightbox2】IE11 でポップアップを開くとページ上部が表示される問題【jQurey】

最新バージョンの [litebox 2.11.1](https://github.com/lokesh/lightbox2) を利用してライトボックスを実装しました。

IE11 だけポップアップを開くと、画像の位置ではなくページ上部が表示されるバグ？があります。

バージョンを [2.10.0](https://github.com/lokesh/lightbox2/releases) に落としたところ、IE11 でも正常に動きました。

試してはいませんが、2.11.0 でも正常に動作するかもしれません。

製作者が IE11 には対応しない方針なのか、それともバグなのかわかりません。

バグの可能性があるなら、お強い方は Issue をどうぞです。

----
**追記**

Issues を見ると指摘あるので、そのうち修正版がでるかもしれません。

- [Disable Scrolling scrolls to top when image is clicked. #620](https://github.com/lokesh/lightbox2/issues/620)

----
**追記**

2.10.0 の `lightbox.css` の `html.lb-disable-scrolling` には `position: fixed;` が指定されています。

```css:litebox.css（デフォルト）
html.lb-disable-scrolling {
  overflow: hidden;
  /* Position fixed required for iOS. Just putting overflow: hidden; on the body is not enough. */
  position: fixed;
  height: 100vh;
  width: 100vw;
}
```

下記のように、`static`にするとページ上部が表示される問題が解消されるかもしれません。

```css:litebox.css（static
html.lb-disable-scrolling {
    overflow: hidden;
    position: static;
    height: 100vh;
    width: 100vw;
}
```
Oculus Quest で右手左手で銃を丁度いい位置で持つ方法

##この記事の目的
OculusQuest購入１週間。簡単な射的ゲーム的な物を作ろうとしたところ、両手それぞれの手で銃を持つ位置の調整で、かなりつまづいたので記事を書きます。Quest関連の記事は本当に少なくて誰かの参考になれば幸いです。
##最初に両手を画面に出す設定が必要
OculusuQuestでは、初期設定では何故か画面上に片手しか登場しません。そこで最初に
>OVRCameraRig にアタッチされている OVR Manager の Target Devices の “Gear Vr Or Go” を “Quest” に変更する
>以下のメニュー操作で Asset/Plugins/Android/AndroidManifest.xml を作る
Oculus > Tools > Remove AndroidManifest.xml
Oculus > Tools > Create store-compatible AndroidManifest.xml

上記の設定をしたのちにさらにAndroidManifest.xml Scriptの中の
>
```
<category android:name="android.intent.category.INFO"/>
```
のところを
```
<category android:name="android.intent.category.LAUNCHER"/>
```
と変更する操作が必要です。

##次につまづいたところ
Playerを動きまわらせるようにしたかったので、HierarchyにOVRPlayerControllerを配置。
以下のようにOVRPlayerController以下のLeft（Right）HandAnchorと同じ階層にOVRControllerPrefabを配置して、万事OK!
![スクリーンショット 2019-08-24 2.49.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/464190/1b9cc5a2-1c16-2540-1ade-d6e6242b9eb6.png)

っと行きたいところでしたが、この方法では上手く行きませんでした。
色々階層を変えてみたりしましたが、ダメでした。最終的に上手く入ったのは、
![スクリーンショット 2019-08-24 2.58.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/464190/9cc60a2c-4039-3efa-e409-c636e82e42dc.png)
上記のようにOVRPlayerController と同じ階層にDistanceGrabHandRight(Left)を置く方法でした。

##銃を適切な位置に掴ませる為に
https://raspberly.hateblo.jp/entry/OculusQuestSnapOffset
上記ブログを参考にさせていただいたのですが、記事中では銃にAttachされたDistance Grabbable(script) の”'Snap Offset'はNullにして、Snap Position, Snap Orientationにチェックを入れる。銃を持つ位置の調整は、銃のmodelの位置を調整するよう" にあったのですが、その方法だとどうしても銃の弾が出る位置がおかしな位置へずれてしまい、最終的に僕はこの方法は採用しませんでした。
代わりに僕がやったのは
·Hierarchyの原点（0、0、0）の位置の空のGameObject(snapOff)を配置。その状態で銃にAttachされたScriptにsnapOff(GameObject)をセット。　
·それでBuildをしてみて、銃の位置のずれをSnapOffの値を調整することで直していく
方法です。

![スクリーンショット 2019-08-24 3.13.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/464190/60d104d0-e277-a44f-82fa-1a3c3cf8021d.png)

##左手にも適切な位置に持たせる！
最後に最も時間がかかったところですが、右手で上記操作で適切な位置に調整しても、左手に持ち替えた時に明らかにおかしな位置で持ってしまうという問題です。
最終的に
https://www.youtube.com/watch?v=98gfkursxYI&list=PLrk7hDwk64-Y7ELKfkw8ox8TaT9y3gNpS&index=3
の5分30秒〜を参考にしつつ、DistanceGrabHandRight(Left)にAttachされているDistanceGrabber.cs　scriptを書き換えてください。

後は、右手の時と同様にsnipOffの値を調整し適切な位置を見つけてください。
以下は僕が最終的に何とかたどり着いた画像です。
<blockquote class="twitter-tweet"><p lang="und" dir="ltr"><a href="https://t.co/7ySez44XJM">pic.twitter.com/7ySez44XJM</a></p>&mdash; KodoOjiEngineer (@KodoOjiEngineer) <a href="https://twitter.com/KodoOjiEngineer/status/1164970343062097920?ref_src=twsrc%5Etfw">August 23, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

まだ少し持つ位置おかしいですが、これで一旦よしとします。
（Macだと毎回毎回QuestにBuildしてDebugが必要で、大変です。誰かいい方法あれば教えてください）
Rustで競プロのインタラクティブ問題を解く

#はじめに

Rsutで以下のインタラクティブ問題を解いていたところ、無限に追加の入力ができなくて辛酸を嘗めたので解決策を残しておきます。

#なにがあったか

以下のようなコードで下記の問題を解いていました。マクロの宣言などは省略します。
[CODE THANKS FESTIVAL 2017(Parallel): E - Coin Authentication](https://atcoder.jp/contests/code-thanks-festival-2017-open/tasks/code_thanks_festival_2017_e)

```rs
fn main() {
    input! {
        N: usize;
    }
    let mut ans = vec![0; N];
 
    for i in 0..((N - 1) / 5 + 1) {
        print!("? ");
        for j in 0..N {
            print!("{} ", if j >= i*5 && j < (i+1)*5 { 10u64.pow(j as u32 % 5) } else {0});
        }
        println!("");
        io::stdout().flush().ok();
 
        input! {
            res: usize,
        }
        let mut res = rse;
 
        let num = if N % 5 != 0 && i == (N - 1) / 5 { N % 5 } else { 5 };
 
        for j in 0..num {
            let ret = res % 10;
            if ret <= 2 {
                ans[i*5 + j] = 10 + ret;
                res -= 10 + ret;
            } else {
                ans[i*5 + j] = ret;
                res -= ret;
            }
            res /= 10;
        }
    }
 
    let ans: Vec<usize> = ans.into_iter().map(|a| if a % 2 == 0 { 0 } else { 1 }).collect();
    print!("! ");
    printvec!(ans);
    io::stdout().flush().ok();
}
```


すると、インタラクティブにやりとりする場面でどうしても追加の入力ができず、手詰まりとなりました。結局Pythonで書いて通したのですが、なぜうまくいかなかったのか原因を調査しました。

#解決策

原因は入力時にスレッドロックがかかっているらしいことです。
自分が競技プログラミングの際にしようしている入出力マクロは、以下の記事を参考に使用させて頂いています。
[Rustで競技プログラミングの入力をスッキリ記述するマクロ](https://qiita.com/tanakh/items/0ba42c7ca36cd29d0ac8)

この中のinput!マクロ内を見てみると

```rs

macro_rules! input {
    (source = $s:expr, $($r:tt)*) => {
        let mut iter = $s.split_whitespace();
        let mut next = || { iter.next().unwrap() };
        input_inner!{next, $($r)*}
    };
    ($($r:tt)*) => {
        let stdin = std::io::stdin();
*       let mut bytes = std::io::Read::bytes(std::io::BufReader::new(stdin.lock()));
        let mut next = move || -> String{
            bytes
                .by_ref()
                .map(|r|r.unwrap() as char)
                .skip_while(|c|c.is_whitespace())
                .take_while(|c|!c.is_whitespace())
                .collect()
        };
        input_inner!{next, $($r)*}
    };
}

```

stdin.lock()という式が存在していることが確認できます。
この関数が入出力を止めてしまっているらしいことが原因でした。

よって、以下のような入出力用関数を作成して代用しました。

```rs
fn get_line() -> String {
    let mut s = String::new();
    std::io::stdin().read_line(&mut s).ok();
    s.trim().to_string()
}
fn readln<T>() -> T
    where
        T: std::str::FromStr,
        <T as std::str::FromStr>::Err: std::fmt::Debug {
    get_line().parse().unwrap()
}
```

変更後

```rs

fn main() {
+   let N: usize = readln();
    let mut ans = vec![0; N];
 
...
 
+       let mut res: usize = readln();
 
...
 
```

というわけで、原因は自分がスレッド周りのことを理解できていなかったことでした。

#まとめ

インタラクティブ問題特有のミスという感じがしました...
Rustを使うならスレッドやメモリに意識をちゃんとむけつつプログラムを書いていきたいところです。
Vuetify で v-app で囲わないで使う

# 前提
Vuetify を使う際、 `v-app` で囲わないと、色が反映されません。
下記の例でいうと、 text-field のエラー表示や、btn の色などがグレーになります。

```html
<v-app>
    <v-text-field type="email" label="メールアドレス" />
    <v-btn color="success">ボタン</v-btn>
</v-app>
```

# 解決策
`v-app` がどこかに存在してればいいので、下記のように囲わずとも記述しておけばスタイルが適用されます。

```html
<v-app style="height: 0; margin: 0; padding: 0;"></v-app>
<v-text-field type="email" label="メールアドレス" />
<v-btn color="success">ボタン</v-btn>
```

# 環境

| Vue | Vuetify |
| --- | --- |
| 2.6.10 | 1.5.16 |


# 参考
- https://matometaru.com/post-2882/
PHP演算子->,=>,::の異なる点

最近PHPを学んている、書くよく紛らわしい演算子についてのまとめです。
#『->』と『$this』
『->』は左側のメンバーを右側の関数や変数などで使うことです。$this（疑似変数）はオブジェクト中に属性（変数）とメソード（関数）を指定と定義するものです。


```->.php
<?
class getprice{
    public $fruit;
    public $price;
    public $number;
    public function name(){
        return $this->fruit;//$fruitの内容
    }
    public function total(){
      return  $this -> number*$this -> price;
    }

}

$astore=new getprice;//オブジェクトを作る
$astore -> fruit= 'apple';
$astore -> number= 3;
$astore -> price= 100;


echo $astore->name();
echo $astore ->total();
?>
```
#『=>』
配列中の『キー=>値』の示す符号です。

```=>.php
<?
$students = array('sam','larry','tom');
foreach ($students as $key => $student) {
    echo "{$key} => {$student}";
    print_r($arr);
}
?>
```
#『::』
static宣言のメソードを呼び出す方法です。$thisは静的コールをできません。

```error.php
<?
class getprice{
    public $fruit;
    public $price;
    public $number;
    public function name(){
        return $this->fruit;
    }
    public static function total(){
      return  $this -> number*$this -> price;
    }

}

$astore=new getprice;
$astore -> fruit= 'apple';
$astore -> number= 3;
$astore -> price= 100;


echo $astore->name();
echo $astore ->total();
?>
エラー：Fatal error: Uncaught Error: Using $this when not in object context

```
『::』を直して、静的コールをします。

```right.php
<?
class getprice{
    public $fruit;
    public $price;
    public $number;
    public function name(){
        return $this->fruit;
    }
    public  function total(){
      return  $this -> number*$this -> price;
    }
    public static function get($a,$b){
        return $a*$b;
      }

}

$astore=new getprice;
$astore -> fruit= 'apple';
$astore -> number= 3;
$astore -> price= 100;


echo $astore->name();
echo $astore->total();
echo $astore::get(10,3);
?>
```
npmでpermission deniedへの対処

#はじめに
Vue.jsを導入し、vue createした所、

```

✨  Creating project in /Users/username/test.
🗃  Initializing git repository...
⚙  Installing CLI plugins. This might take a while...

Unhandled rejection Error: EACCES: permission denied, mkdir '/Users/username/.npm/_cacache/index-v5/a4/4d'

Unhandled rejection Error: EACCES: permission denied, mkdir '/Users/username/.npm/_cacache/index-v5/18/8b'

中略

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/username/.npm/_logs/2019-08-23T17_24_55_583Z-debug.log
 ERROR  command failed: npm install --loglevel error
```

と言うエラーが吐かれたので対処します

#対処法
permission deniedだったのでnpmへのアクセス権限関係の事かなーと予想を立てつつ検索。
[こちら](https://qiita.com/okohs/items/ced3c3de30af1035242d)の記事を参考にさせて頂き、対処してみましたが、うまくいきません。

エラー文に　https://npm.community/ でエラーを報告してね！と書いてあったので、見に行くと同じ様なエラーが出ている人がいました。
結論としては

```
sudo chown -R $(whoami) ~/.npm
```
の一行で解決しました。

#まとめ
結局、最初の予想通りでしたが回り道をしてしまいました。
初歩で躓いていたので解決しませんでしたが、また別のときpermission deniedのエラーが出た時は最初に見たQiitaの記事を参考にさせていただきたいと思います！
英語のサイトをちゃんと見る重要性を感じたので、この気持ちを忘れない様にしたい。


#参考にしたサイト
https://qiita.com/okohs/items/ced3c3de30af1035242d
https://npm.community/t/unhandled-rejection-errors/5296
Nuxt.jsとSSR

Nuxt.jsでWebサービスのフロントエンドを書く上でSSRに関することを調べたのでまとめた.

# SPA
**シングルページアプリケーション**(**SPA**)は, 単一ページによるWebアプリケーションのことで, 画面遷移によるページ全体のリロードが発生しない.
レンダリングはクライアントサイドが担うため,

- 初回ロード時間が長い  
全ページをレンダリングしてから表示するため, 初回ロード時間が長くなる.
- SEO的な観点から見ると良くない  
空白のページがサーバから返された後にJavaScriptが実行され, コンテンツがレンダリングされる.  
そのため, JavaScriptを解釈できないクローラの場合(今時あるのだろうか？), コンテンツの無いWebページだと認識されることがある.

といった問題点がある.

# SSR
SPAの問題を解決すべく, **サーバサイドレンダリング**(**SSR**)が登場した.
SSRはクライアントサイドでレンダリングしていたものをサーバサイドでレンダリングすることによってSPAの問題に対処した.

また, SSRと似たような概念として,

- **アイソモーフィックJavaScript**  
アイソモーフィックは英語でIsomophicと記述し, 「同型」といった意味を持つ.  
クライアントサイドとサーバサイドを同じ言語(JS)で記述することで, コードの共有を可能する試み.
- **ユニバーサルJavaScript**  
ユニバーサルは英語でUniversalと記述し, 「一般的な」「普遍的な」といった意味を持つ.  
クライアントサイドやサーバサイドだけでなく, モバイル端末や組み込みデバイス上まで考え方を広げたもの.

といったものも存在する.

# Nuxt.jsにおけるビルド方式の選択肢
Nuxt.jsでは, 上に挙げたSPAとSSRの他, 静的化(Static Site)といったビルド方式を選択できる.
以下にそれぞれのビルド方式のメリット・デメリットをまとめた.

- SPA  
３つの中では一番実装しやすくサーバの準備が楽(GitHub PagesやNetlifyで動作するため).  
ただし前述したSPAの問題点は残る.
- SSR  
SPAの問題点は解消できるが, 実装が面倒でサーバの準備が面倒(Heroku, Now等, Node.jsが動作するサーバを用意する必要があるため).
- 静的化  
静的化は各ルートのHTMLを事前にレンダリングして生成する方式で, 生成時にはSSRの仕組みを利用するため, SSRを考慮した実装が必要.  
SPAの欠点の解消ができ, サーバの準備も楽(GitHub PagesやNetlifyで動作するため)でSSRよりも速い.  
ただし, 利用用途が限られる(更新が少ないサイト・ドキュメント・ブログ向き).
ASUS-X205TA,E203NにChrome(Chronium)OSを導入する

###この記事の目的
ASUSの少し古いPC、X205TAとE203NへChroniumOS(CloudReady)を導入したい人向けの記事。
つまり結構ニッチ。
ただ、Windows8.1とか、10へCloudReady を導入したい人も参考になるかも。
あくまで自分が困ったポイントしか書かないので、細かいやり方は各項目のリンク見てください。

##先に結論
CloudReadyを導入したいなら、公式のソフトウェアを使うのが一番早い。

##必要なもの
USBメモリ
（8か16GBで、可能ならSanDisk製品以外）

##手順

1.CloudReady公式サイトからUSBMAKERをダウンロードする。
　公式のソフトウェアはこちら↓
　[CloudReady公式サイト](https://www.neverware.com/freedownload)

2.USBをさしてダウンロードした.exeファイルを実行。

3.イメージファイルを作成
　X205TAの場合　32bit版を選択
　E203Nの場合   64bit版を選択

　やり方はこちらの記事を参考に↓
　[Windows PCにCloudReadyをインストールしてChromebookとして再利用する](https://www.atmarkit.co.jp/ait/articles/1908/09/news032.html)

4.BIOSの設定を変更

　X205TAはこちらを参考にしてください↓
　Windows10用のやり方ですが、Widows8もだいたい一緒です。
　ただ、自分の場合LanchCSMの項目がありませんでした。
　起動はしましたが…。
　[ASUS公式USBBootのやり方](https://www.asus.com/jp/support/FAQ/1013017/)

　E203Nも基本は一緒です。
　ただ、UFEIメニューというのが出てくる場合があるので、その場合はUSBの優先順位を一番上にすれば起動します。
　（UFEIメニューの操作方法もなんかの記事でみたのですが、見つからなかったので割愛。）

##困ったポイント
- **イメージUSBが認識されない**

　共通の問題

**原因**
　イメージUSBの作成ができていない
　もしくは、USBが破損していた。

　とりあえず、今回の記事で取り上げている２機種は絶対イメージUSBを認識できます。
　イメージUSBがBootメニューに存在しないという場合は、イメージUSBを作り直してみてください。
　因みに、イメージUSBの作り方は色々あるようですが、自分はChromeの拡張機能を使ったら失敗しました。
　故に、先に挙げた公式のUSBMAKERを使うことをおすすめします。


-  **CloudReadyが起動しない**

　X205TAのみ

**原因**
　OSのbit数の問題でした。
　X205TAは32bitじゃないと起動しませんでした。
　最初、64bitを起動していました。
　BootMenuには存在するし、起動までは漕ぎ着けるものの、画面が真っ暗なまま先に進まず。
　32bitで起動すると成功。
　E203Nは64bitで大丈夫でした。

- 　**Wifi・Bluetoothがつながらない**

　X205TAの問題

　chroniumOS導入あるあるみたいです。
　ドライバの問題らしいので、自分みたいなトーシロには解決は難しいです。
　キーボードとタッチパッドは使えたので、諦めてSwitch用のUSBLANアダプタをつなぎました。
　

- **処理が重たい**

　X205TAの問題

　未解決事件で迷宮入りです。
　おそらく、相性が悪いんでしょう。（ぶん投げ）
　X205TAは使用を諦めました。

- **タッチパッドの不良**

　E203Nの問題

　タッチでクリック出来るはずが出来ない。
　設定の問題か？と思いきやそんなことはありませんでした。
　これも未解決ですが、きっとドライバのせいです。
　LInuxでのコマンドが云々〜みたいな記事を見かけたので、そのうち弄ってみます。
　直ったら報告します。

- **キーボードがUSレイアウトと認識されている**

　文字を打つときなれない動作で少し戸惑うだけなので、無視しました。


##感想

色々なブログを見て遠回りをしてしまったので、とても大変な気がしましたが、実際の作業時間は一時間程度です。
そしてインストールさえできれば超快適に動くので、とりあえず一度挑戦していただくとよいかもしれません。

また、今回の記事は文章を書く練習も兼ねているので、なにかあればご指摘いただけますと幸いです。
Linux の使用状況を見るためのコマンドまとめ

CentOS 7 で確認。

### CPU とメモリの使用量を見る
```
vmstat <秒数>
```

指定した秒数ごとに更新される。止めるときは `Ctrl + c` を押す。

ただし、メモリの使用量は後述の `free` のほうが見やすい。

### CPU とメモリを使用しているプロセスを見る
```
top
```

デフォルトで定期的に更新される。更新間隔を指定するには `-d <秒数>` をつける。止めるときは `q` を押す。

デフォルトでプロセスのリストが CPU の使用率順に表示される。表示中に `M` を押すと、メモリの使用率順になる。CPU の使用率順に戻すには、表示中に `P` を押す。

### プロセスのリストをツリー状に表示する
```
ps afux
```

`pstree` の方が見やすいけれど、CentOS 7 の最小構成には入っていない。

### メモリの使用状況を見る
```
free -hs <秒数>
```

指定した間隔で更新される。止めるときは `Ctrl + c` を押す。 

### ストレージの使用状況を見る
```
df -h
```

### Nvidia 製 GPU の使用状況を見る
```
nvidia-smi -l <秒数>
```
GCSとは　～GCP無料枠を利用して学習～


#GCSとは

GCS(Google Cloud Strage)とはGCPが提供するクラウドストレージサービスです。
GCPサービスで作成されたデータの出力先やバックアップ先として使用することが可能です。
HTMLファイルや画像ファイル等の静的データを保存でき、直接Web上に公開することもできます。

4種類のストレージクラスが用意されています。
それぞれ特徴が異なります、用途に合わせて使い分けることができます。

|ストレージクラス|Multi-Regional|Regional|Nearline|Coldline|
|:-:|:-:|:-:|:-:|:-:|
|取得時の料金|無料|無料|有料|有料|
|最小保存期間|なし|なし|30日|90日|
|特徴|地理的な冗長性|地理的に近い場所でデータを保存|データ保存コストが安い|データ保存コストが非常に安いが、データ取得がNearlineより高い|

Nearline、Coldlineは頻繁にアクセスしない、バックアップや監査ログ等の保存に適しています。
AWSのS3 Glacierと同等のサービスですが、S3 Glacierはデータ取得に時間が掛かるのに対して、データの取得に時間が掛からないという特徴もあります。

#用語

- バケット
データを格納するためのコンテナ。
GCSの保存するデータはバケットに格納されます。
フォルダのように入れ子構造にすることはできません。

- オブジェクト
GCSの保存されるファイルやフォルダといったデータ。
バケット内に格納されるデータの数に制限はありませんが、1オブジェクトの容量は5TB以下です。

#GCSの無料枠

GCSの無料枠は執筆時点では以下の通りになっています。

>5 GB の Regional Storage（期間合計、米国リージョンのみ）
>5,000 回のクラス A オペレーション（1 か月あたり）
>50,000 回のクラス B オペレーション（1 か月あたり）
>1 GB の北米から全リージョン宛ての下りネットワーク（1 か月あたり、中国およびオーストラリアを除く）
>Always Free は、us-east1、us-west1、us-central1 のリージョンでのみご利用いただけます。使用量の計算は、これらのリージョンにわたって集計されます

詳細は[Google Cloud Platformの無料枠](https://cloud.google.com/free/docs/gcp-free-tier)をご確認ください。

#GCSの作成

無料枠を利用してGCSを作成してみます。
@hnwさんの[GCPの課金データ取得のススメ](https://qiita.com/hnw/items/409d6b7c431ca5f74eb2)を参考に、課金データをエクスポートしてみます。

GCPコンソールのハンバーガーメニューから「ストレージ」>「ブラウザ」をクリックします。

![クラウド コンピューティング サービス  _  Google Cloud - Google Chrome 2019_08_21 23_28_54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/439091/d562580b-7ac3-792d-a154-2e523116b6d8.png)

「作成」をクリックします。

![クラウド コンピューティング サービス  _  Google Cloud - Google Chrome 2019_08_21 23_29_04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/439091/79dd9119-be77-850e-8eba-11d2d1bd6a49.png)

バケット名はグロ－バルで固有でなければなりません。

![クラウド コンピューティング サービス  _  Google Cloud - Google Chrome 2019_08_21 23_34_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/439091/a9e859ff-ac29-a251-f62c-effeaf356f3a.png)

ストレージクラスは無料枠を利用するため「Regional」とし、「場所」をUSから選択します。

![クラウド コンピューティング サービス  _  Google Cloud - Google Chrome 2019_08_21 23_34_47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/439091/07e9bf33-965c-3e52-da9e-a0e4d6c447c7.png)

その他の設定をして、「作成」をクリックします。
※オペレーションA=データのダウンロード、オペレーションB=データのアップロードのようなもの

バケットが作成されました。

![クラウド コンピューティング サービス  _  Google Cloud - Google Chrome 2019_08_21 23_39_40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/439091/83cfa4f4-1c1c-3a87-daad-8a961b558b1c.png)


#課金データのエクスポート設定

GCPコンソールのハンバーガーメニューから「お支払い」>「課金データのエクスポート」をクリックします。
「ファイルのエクスポート」から課金ログのエクスポート設定ができます。

「バケット名」には先ほど作成したGCSのバケット名を入力します。
「レポート接頭辞」は作成される課金データのファイル名として使用されます。
「フォーマット」はCVSまたはJSONから選択します。

![クラウド コンピューティング サービス  _  Google Cloud - Google Chrome 2019_08_21 23_42_04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/439091/34935f15-b925-2c87-21c1-1e85891b8fee.png)

GCPコンソールのハンバーガーメニューから「ストレージ」>「ブラウザ」をクリックします。
エクスポート先に指定したGCSをクリックするとファイルが作成されていることが確認できます。

![クラウド コンピューティング サービス  _  Google Cloud - Google Chrome 2019_08_24 0_53_08.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/439091/22796bd2-d6fe-c649-df98-ff07c44a88c7.jpeg)
【四日目】Unity でモブプログラミング [E02_CatchButterfly]

# 取り組みの概要
勉強会でモブプロでゲームを作っています。今回で４回目になりますがあーだこーだ言いながら何とか作成しました。

# 企画内容の検討
ニンテンドーDSなどで勉強しつつ、どのゲームを移植（パクリではない）しようか検討した結果、オブジェクトをタッチする系のゲームになりました。別のチームの企画内容を確認すると雰囲気が被っていたため、見た目などを被らないように取り組みました。

# 考えたゲームの企画内容
別チームは画面をタッチして蚊を倒すゲームらしいので、こちらはタッチしたら蝶を捕まえるゲームとしました。ゲームの仕組みは同じモノになりますが、ゲームの目的を違うように見せ方を変えてます。企画内容の被りについてはそれぞれ違った方向に展開するのが良いと感じ、ゲームの目的を変更するように作っていくのは間違っていないように思います。

# ゲーム画面

- タイトル
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/412322/0c405460-2641-199a-cc81-e665f34435ee.png" width="50%">

- プレイ画面
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/412322/9a935492-4219-01d7-87ea-a88b23d64ee5.gif" width="50%">

- ゲームクリア
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/412322/52a7495b-32fd-d338-07e6-9d4cc90a15ee.png" width="50%">

- ゲームオーバー
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/412322/e88d2406-239c-d8ee-37ce-c1bce4b0fdbc.png" width="50%">

蝶を捕まえるということで額縁の蝶を捕まえるようにしました。見た目をエレガントな雰囲気にしてみました。蚊をやっつけるゲームは見た目がポップなので差をつけてみたつもりです。

ランダムな動作ですがこちらはAddForceで加速度を使用しています。制御的に心配なところもありましたが、キビキビしたカンジがもう一方のゲームと異なったように思います。



```
    private float changeTime = 0.3f;
    private float timeElapsed;
    private float timeOver;
    private float limitTime = 20;
    private float thrust = 10;
    private const float minSpeed = -20;
    private const float maxSpeed = 20;

    void Update()
    {
        direction = Random.Range(0, 360);

        //Vector3 pos = new Vector3(x,0,0);
        //gameObject.transform.rotation = new Quaternion(this.transform.position.x, this.transform.position.y, this.transform.position.z, direction);
        //gameObject.transform.rotation = new Quaternion(this.transform.position.x, this.transform.position.y, this.transform.position.z, direction);
        timeElapsed += Time.deltaTime;
        timeOver += Time.deltaTime;
        time.text = (limitTime - timeOver).ToString("F2");
        if (timeOver >= limitTime)
        {
            SceneManager.LoadScene("GameOverScene");
        }
        if (timeElapsed >= changeTime)
        {
            //transform.Rotate(transform.position.x, transform.position.y, direction);
            timeElapsed = 0;
            rb.velocity = new Vector2(0, 0);
            rb.AddForce(new Vector2(Random.Range(minSpeed, maxSpeed), Random.Range(minSpeed, maxSpeed)), ForceMode2D.Impulse);
        }
    }

```

### オブジェクトの生成について
どちらのゲームも複数のオブジェクトが画面に出現するわけですが、こちらのゲームは最初から設置している状態でスタートします。蚊のゲームではオブジェクトをプレハブ化して最初にコードからInstantiateで生成する形になっています。後々のことを考えるとプレハブ化してInstantiateする方が良いカンジです。ただ、Unityでは最初から設置してもミニゲームとして成立できるので、今回のような時間が限られてしまうときにはイイかもしれません。

# 総括
- ゲームの企画が被ったが見た目が違ったゲームになってよかった
- 見た目だけでなくプログラミングの内容も異なった
- 制御方法やオブジェクトの生成などアプローチはいろいろ
- モブプロで詰めるところは詰めて端折るところは端折ってイイかもしれない
【Rspec】 モデルのテスト

先日、単体テストについての質問を受ける機会がありましたが、
知識が曖昧であったために回答を控えてしまいました。

自分の勉強不足を反省しつつ、テストの基礎知識を以下にまとめておきます。

#モデルスペックに含めるテスト内容
[Everyday Rails - RSpecによるRailsテスト入門](https://leanpub.com/everydayrailsrspec-jp/read)より
>・有効な属性が渡された場合、モデルのcreateメソッドが正常に完了すること。
>・バリデーションを失敗させるデータがあれば、正常に完了しないこと。
>・クラスメソッドとインスタンスメソッドが期待通りに動作すること。

#exampleを作成する
```rb:/spec/models/article_spec.rb
require 'rails_helper'

describe Article do
  #titleとcontentが入っていれば有効であること
  it "is valid with title and content"
end
```

```:実行結果
Article
  is valid with title and content (PENDING: Not yet implemented)

Pending:
  Article is valid with title and content
    # Not yet implemented
    # ./spec/models/article_spec.rb:5

Finished in 0.00056 seconds
1 example, 0 failures, 1 pending
```


＊```require 'rails_helper'```はすべてのスペックに含める。


#マッチャを書いてテストをパスさせる

＊マッチャ：期待値と実際の値を比較して、一致した（もしくは一致しなかった）という結果を返すオブジェクト。

```rb:/spec/models/article_spec.rb
 #省略
describe Article do
  #titleとcontentが入っていれば有効であること
  it "is valid with title and content" do
    article = Article.new(
      title: 'hoge',
      content: 'hogehoge'
    )
    expect(article).to be_valid
  end
end
```

```:実行結果
Article
  is valid with title and content

Finished in 0.01854 seconds
1 example, 0 failures
```
マッチャに関してはこちらを参考に。
[使えるRSpec入門・その2「使用頻度の高いマッチャを使いこなす」](http://qiita.com/jnchito/items/2e79a1abe7cd8214caa5)
#exampleを入れ子に記述する

＊describeとcontextは同義。RSpecを出力したときに入れ子になって表示されてわかりやすくなる。

```/spec/models/article_spec.rb
  describe "fetch recent article" do
    #articleの作成時間が指定時間内であれば情報を返すこと
    context "created_at > time" do
      it "returns recent_articles that match"
    end
    #articleの作成時間が指定時間内でなければ情報を返さないこと
    context "create_at < time" do
      it "does not return anything"
    end
  end
```

#FactoryBotの利用
テストデータを何度も書かなくて済むようにする

factoriesディレクトを作成。

```rb:/spec/factories/article.rb
FactoryBot.define do
  factory :article do
    title: 'hoge'
    content: 'hogehoge'
  end
end
```

下記のように使用。

```rb:/spec/models/article_spec.rb
 #省略
describe Article do
  #titleとcontentが入っていれば有効であること
  it "is valid with title and content" do
    article = FactoryBot.build(:article)
    expect(article).to be_valid
  end
end
```

##FactoryBot楽に使う
FactoryBot.build(:article) -> build(:article)と省略出来る。
下記を追加

```rb:/spec/spec_helper.rb
#ファクトリを簡単に呼び出せるように、FactoryGirlの構文をインクルードする
config.include FactoryBot::Syntax::Methods
```

#Fakerの利用
リアルなダミーデータを作成する

```rb:/spec/factories/article.rb
require 'faker'

FactoryBot.define do
  factory :article do
    title: { Faker::Lorem.sentence }
    content: { Faker::Lorem.paragraph }
  end
end
```

```
title: "Et nisi et dolores et eveniet laborum et.",
content: "Consequuntur impedit minus blanditiis quos unde. Est voluptatem modi ratione culpa sunt iste. Dolores et tempore autem recusandae."
```
のようなダミーデータが入る。

その他、様々なダミーデータがあるので下記を参考に。
http://www.rubydoc.info/github/stympy/faker/master/frames





#参考

[Everyday Rails - RSpecによるRailsテスト入門](https://leanpub.com/everydayrailsrspec-jp/read)
を参考にしております。詳細な説明・使い方を知りたい方はオススメです。

[使えるRSpec入門・その1「RSpecの基本的な構文や便利な機能を理解する」](http://qiita.com/jnchito/items/42193d066bd61c740612)
RSpecに関しましてはこちらも参考になります。その1~その4まであります。
UnityのVR SamplesをOculusQuestで動かしてみる

# はじめに
Unity Technologiesさんから配布されているVR Samplesという無料アセットをOculusQuestで動かしてみます。

[VR Samples]
(https://assetstore.unity.com/packages/essentials/tutorial-projects/vr-samples-51519)
アセットのページです。

[VRを始めよう！サンプルアセットと学習用チュートリアル]
(https://blogs.unity3d.com/jp/2015/12/09/get-started-with-vr-sample-pack-learning-articles/)
アセットの紹介ページです。

[VRでのインタラクション]
(https://unity3d.com/jp/learn/tutorials/topics/virtual-reality/interaction-vr)
アセット中で使用しているコードについての説明があります。

#開発環境
Unity 2019.2.0f1
VR Samples - 1.4


#ビルド手順
OculusQuest向けのビルド設定を行うだけで動作します。

1. 3Dで新規プロジェクトを作成します。
2. Build Settings から Platform を Android に Switch Platformします。
3. VR Samplesをアセットストアからダウンロードし、インポートします。インポートには数分時間がかかります。
4. Player Settings... から以下の項目を変更します。

	4-1. Other Settings -> RenderingのAuto Graphics APIにチェックをいれ、Configration の Target ArchitecuturesのX86のチェックを外します。(Identification の Package Nameと、Minimum API Levelは、 アセットをインポートした時点で画面の通り更新されているため今回は変更不要です)
	4-2. XR Settings -> Virtual Reality Supported にチェックをいれ、Virtual Reality SDKs の + を押して、Oculus を選択します。
5. アセットをインポートした時点でビルドするシーンが選択されているので、そのままBuild Settings からビルドします。
（変更しなくても動作しますが、Texture CompressionはATSCに設定するのがおすすめです）

![otherSettings2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215278/64c71270-8fce-be51-ead9-9808c42871e8.png)

![XRSettings.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215278/57f5ac26-c04b-b45a-bcd8-f1c3f13b1ca2.png)

![BuildSettings.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215278/54afbb06-55ca-65f0-0659-f9cba881f3c3.png)

#さいごに
次回は、Oculus Integrationを使用してTouchコントローラで操作できるようにしてみます。
[UnityのVR SamplesのMazeをTouchコントローラで操作できるようにする]
(https://qiita.com/Satoshi_Takahama/items/d44a65c5cfd4e3dd32bc)
DjangoのUserモデルを使ってみよう


# Userモデルについて
DjangoではデフォルトでUserモデルが提供されています。
このUserモデルを使うことで簡単に認証機能を作ることができます。
Userモデルには、

+ username
+ first_name
+ last_name
+ email
+ password
+ date_joined
+ last_login

などのフィールドがあります。

# ユーザーページを作る
簡単なユーザーページの作り方を紹介します。
## urls.py
urls.pyのurlpatternsに以下のようなpathを追加する。

```py
urlpatterns = [
  ・・・
  path('users/<int:pk>/', views.users_detail, name='users_detail'), 
]
```

## views.py
views.pyに以下を追加する。

```py
from django.shortcuts import get_object_or_404, render
from django.contrib.auth.models import User

def users_detail(request, pk):
    user = get_object_or_404(User, pk=pk)
    return render(request, 'app/users_detail.html', {'user': user})
```

## users_detail.html
users_detail.htmlを作成し、以下のように記述する。
ここでは、base.htmlを拡張している。

```py

{% extends 'app/base.html' %}

{% block content %}

<h2 class="user-name">@{{ user.username }}</h2>

{% endblock %}
```
ESP32でRTCM3基地局

#ESP32でRTCM3基地局
一家に一台、持ち運びも便利なRTK基地局いかがでしょう？
<img width="503" alt="スクリーンショット 2019-08-23 23.41.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181687/012e62e7-841b-ea6c-9833-835d9c4acf90.png">

##材料
ESP32 https://www.switch-science.com/catalog/3555/
simplertk2b basic starter kit https://www.ardusimple.com/store/
LTE WiFiルータ
IOTモバイルバッテリー
各種ケーブル
ホームセンターの工具箱等入れ物

##組み立て例
今回の場合、Simple RTK2BのIOREFには3.3vを繋いでください。（スイッチサイエンスのESP32だとピンはんだ付けして重ねれば繋がります）
![IMG_4718_01.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181687/678e7fb5-8252-17e1-496e-6175f7cd2794.jpeg)

 
##ESP32に入れるプログラム
https://github.com/GLAY-AK2/NTRIP-server-for-Arduino
熟年データサイエンティストに文句を言わせないテクニック

# 記事を書こうと思った経緯

自社のお仕事とは別に、某超大手企業様の中でもAI関連のシステムをよく開発してます。
もう今年に入って開発したものだけで、３つ？４つ？くらい作ってきました。

同じチームのメンバーに、熟年(熟練？)のデータサイエンティストの方がいて、よく開発の方針で揉めますw

# 課題

AIのレコメンドAPIを開発する中で、`redis`や、`datastore`など、必要なモジュールを共通utilsの中で使っています。

これに対し


**熟年エンジニア**: 
データ整形や、ベクトル化する関数は使いたい。
それ以外の`redis`関連や`datastore`関連のモジュールはインストールしていないからエラーが発生するため、ファイルを分けてほしい

**私**:
同じプロジェクトなんだから、`pip install -r requirements.txt`やってくださいよ

**熟年エンジニア**:
私は使わないから、インストールしたくない


**私**:
「~~なんて協調性のない人なんだ・・・~~。。。。。」



という、理不尽な問題が発生しました


# 解決方法

```python
import redis

def get_state(id):
    redis = redis.Redis(host='localhost', port=6379, db=0)
    return redis.get(id)

def get_vector(xxx):
    ...

```

これを`get_vector`だけimportしてもエラーとなる。

```python

def get_state(id):
    import redis
    redis = redis.Redis(host='localhost', port=6379, db=0)
    return redis.get(id)


def get_vector(xxx):
    ...
```

と書くと、`get_vector`だけimport可能になる。


フレームワークの中を覗いてると、たまにこの記述見かけますよね

相互参照の回避や、インストールしてない人対策などに使えるので、~~あまり必要ないかもしれませんが、~~頭の片隅に覚えておくと役に立つ時がくるかもしれません・・・・w
Spring Data JPAのWeb supportを使ったハンドラメソッドをテストする方法

# はじめに

この記事はSpring Data JPAが提供するWeb supportの「`@PathVariable`のid検索して引数に設定してくれる」機能を使っている場合に、そのハンドラメソッドをどうやってテストすればいいかを説明したものです。記事中で説明しているコードは以下に置いてあります。
https://github.com/junjis0203/spring-jpa-web-unittest

# Spring Data JPAのWeb support

Spring Data JPAには[Web support](https://docs.spring.io/spring-data/jpa/docs/2.1.10.RELEASE/reference/html/#core.web)機能があります。これを使うと、

```java:UserController.java抜粋
	@GetMapping("/users/{id}")
	public User show(@PathVariable("id") User user) {
		return user;
	}
```

このように自分でidからUserエンティティを検索しなくていいのでハンドラメソッドを非常にシンプルにできます。なお裏側はUserクラスに対応するRepository使って検索しているのでRepositoryインターフェース自体は必要です。

# よしではテストするぞ

・・・どうやって(。´･ω･)?
検索されるエンティティはどう準備すればいいの？Spring Data JPAみたいに`@DataJpaTest`付けてTestEntityManager使う？idは？自分で指定しておけばいい？

まあ出てきたエラー見てから考えるか、てことでテストを作成、

```java:UserControllerTest.java抜粋
	@Test
	public void userExists() throws Exception {
		mockMvc.perform(get("/users/{id}", "1"))
			.andExpect(status().isOk())
			.andExpect(jsonPath("name", is("alice")));
	}
```

実行。なおgithubに置いてあるのは最終形なので同じようなエラーが出ることを確認したい人はConfigクラスに付いている`@TestConfiguration`外してください。

```
java.lang.AssertionError: Status expected:<200> but was:<500>
```

コンソールの方にはこんなのが出ていた（長いので適当に改行）。やはりSpring Data JPAのWeb supportは動かないようだ。

```
2019-08-23 22:55:51.036  WARN 8140 --- [           main] 
.w.s.m.s.DefaultHandlerExceptionResolver : 
Resolved [org.springframework.web.method.annotation.MethodArgumentConversionNotSupportedException: 
Failed to convert value of type 'java.lang.String' to required type 'com.example.demo.User'; 
nested exception is java.lang.IllegalStateException: 
Cannot convert value of type 'java.lang.String' to required type 'com.example.demo.User': 
no matching editors or conversion strategy found]
```

# 本題：テストをするためのセットアップ

テスト環境でWeb supportが動かないからと言ってControllerにRepositoryをDIさせたくないし何か方法はないかと「spring jpa pathvariable test」で検索したところ以下のページが引っかかりました。
https://stackoverflow.com/questions/40240547/combine-webmcvtest-with-pathvariable-annotated-controllers-in-spring-boot-1-41

なるほどWebMvcConfigurer.addFormattersで登録すればいいのか。
というわけでこれを参考にテストを書いていたのですが、複数のエンティティが必要な状況に遭遇したのでもう少しかっこいいConverterにしました。

```java:UserControllerTest.java抜粋
	private static Map<String, User> userMap;

	@Before
	public void setUp() {
		userMap = new HashMap<>();
		userMap.put("1", User.builder().name("alice").mail("alice@example.com").build());
	}
	
	@TestConfiguration
	static class Config implements WebMvcConfigurer {

		@Override
		public void addFormatters(FormatterRegistry registry) {
			// emulate Spring Data JPA Web support
			registry.addConverter(String.class, User.class, id -> userMap.get(id));
		}
		
	}
```

やっていることは

- StringとUserの対応Mapを`@Before`付けたメソッドで用意。`@BeforeClass`でもいい気はするけどテストごとにリセットされる方がいい気もする
- ConverterはMap使って返すだけ（Stack Overflowでは存在しないidに対してIllegalArgumentException投げてるけど「本物」の挙動的にはnull返す方が正しい）
- static classが参照できるようにMapもstaticにしないといけないのがダサいが仕方ない

ともかくこれでテストができました。

# おわりに

今回はSpring Data JPAが提供するWeb supportを使ってる場合にどうやってテストすればいいのかを説明しました。
公式にテストする方法用意しておいてくれよと思うのですが、だったら自分で作ってプルリク送るのがいいのですかね。Springの動作理解して適切な「設定の書き方」構築するまで相当かかりそうですが・・・
LaravelでAmazon S3のバージョニングしたファイルを取り扱う方法

# はじめに
Laravel公式リファレンスでは、Amazon S3のファイルを取り扱う方法として、
Storageファサードを使用する方法が紹介されています。

しかし、Storageファサードを使用する方法では、
S3でバージョニングを有効化したバゲットのファイルを取り扱うことができないようです。

正確には、
・アップロード時に、アップロードしたファイルのバージョンIDを取得することができない
・ダウンロード時に、ダウンロードするファイルのバージョンIDを指定することができない
です。

この問題は、AWS SDKを使用することで解決します。

# 前提条件
- Laravel 5.8.24で動作確認しました。
- aws/aws-sdk-phpがインストール済であるものとします。
- Amazon S3の設定については割愛します。

# 環境変数
以下の変数を設定します。

```text:.env
// ...
AWS_ACCESS_KEY_ID=＝(IAMユーザーのアクセスキーID)
AWS_SECRET_ACCESS_KEY=(IAMユーザーのシークレットアクセスキー)
AWS_DEFAULT_REGION=(バゲットを作成したリージョン)
AWS_BUCKET=(作成したバゲットの名前)
```

# アップロード
putObject()メソッドの戻り値 'VersionId' からバージョンIDを取得することができます。

```php
public function upload($key, $body, $content_type)
{
    $params = array();
    $params['Bucket'] = env('AWS_BUCKET');
    $params['Key'] = $key;
    $params['Body'] = $body;
    $params['ContentType'] = $content_type;
    $result = \Aws\Laravel\AwsFacade::createClient('s3')->putObject($params);
    return $result['VersionId'];
}
```
※ サーバ上のファイルをアップロードする場合、パラメータ 'Body' と 'ContentType' は不要で、
　 その代わりに 'SourceFile' にそのパスを指定します。

# ダウンロード
getObject()メソッドのパラメータ 'VersionId' にバージョンIDを指定することができます。
バージョンIDを省略した場合は、最新バージョンのファイルをダウンロードします。

```php
public function download($key, $version_id = null)
{
    $params = array();
    $params['Bucket'] = env('AWS_BUCKET');
    $params['Key'] = $key;
    if (!is_null($version_id)) {
        $params['VersionId'] = $version_id;
    }
    return \Aws\Laravel\AwsFacade::createClient('s3')->getObject($params);
}
```
---
ミニマムコードであるため、必要に応じて書き換えてください。
AndroidStudio3.5でレイアウトxmlのフォーマットがおかしくなるときの対処法

# はじめに
待望のAndroidStudio3.5が出ました。
I/Oで発表されていたdatabinding回りの改善が多く入っているということで早速アップデートしたのですが・・・。
フォーマッタ回りで問題が発生したので解決法を書き記します。

# 発生する問題
レイアウトのフォーマットを行うとxmlの中の順番が大きく変わるようになります。
ConstraintLayoutを使っているイケてるコードならいいのですが、LinearLayoutを使っていると順番が変わることで爆死します。
あと、databindingの\<data>タグが下に行きます。

# 解決方法
設定からフォーマッタを修正します。

Preferences > Editor > Code Style > xml
ここで、右上にあるSet form... > Predefined Style > Android と押します。(Set format？)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192408/f3dccdb9-fc9a-806b-96e3-09751baae888.png)
変更したことや設定が変わったことは特に表示されませんが、右下のApplyが押せるようになっているはずなので、ApplyしてCloseします。

これで、LinearLayoutの中身の順番も変わらず、databindingの\<data>タグも上のままになると思います！
2019/08/23 'field_with_errors'

# 学習記録（2019/08/23）

## 起こったこと

グループでチャットができるアプリを実装中にこんなことが起こりました。

### 前提
- メッセージの送信機能を実装中
- フロント実装には「rails」、入力フォームには``form_for``を使用
- Modelには、空欄での投稿ができないように、validation ``presence: true``を設定
- validationでメッセージが保存できないときは、入力画面``render :index``に戻るように設定

### 事象
検証のため、「空欄で投稿する」 → 「renderでindexに戻る」　を確認したところ、入力欄のレイアウトがおかしくなった。

__↓実際の画面↓__

これが...
![b5e195cc.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450355/d0d22fc5-c9a8-deab-014a-a6342d7d6d2d.png)

こうなった！

![dac34ccb.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450355/fd39bb25-cd1d-f6c2-8bb2-e135cbcbe9fc.png)


### 状況確認
render後のhtmlに`<div>`が追加されてました。　　
(勝手に変えるときは、教えてよー)

__↓実際の画面↓__
<img width="733" alt="スクリーンショット 2019-08-23 22.07.40.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450355/f2acfeff-b561-b2eb-4c6a-67ed1fac1ecf.jpeg">





### 解決方法
configにあるapplication.rbに以下を追加しました。

```ruby.application.rb
class Application < Rails::Application
(中略)
  config.action_view.field_error_proc = Proc.new do |html_tag, instance|
    %Q(#{html_tag}).html_safe
  end
end
```

- なぜ'field_with_errors'が追加されるか？
- 'Proc'って一体なんのか？

といった点は、後日調査したいと思います。

### 参考
（参考にさせていただきました！ありがとうございます！）
- [Rails、form_forが勝手に吐き出す\<div class="field_with_errors"></div>を制御する - naichi's lab](https://blog.naichilab.com/entry/2016/01/15/013321)
- [Active Record バリデーション - Rails ガイド](https://railsguides.jp/active_record_validations.html#%E3%83%90%E3%83%AA%E3%83%87%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%A8%E3%83%A9%E3%83%BC%E3%82%92%E3%83%93%E3%83%A5%E3%83%BC%E3%81%A7%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B)
docker(77)今日のdocker error: denied: requested access to the resource is denied

「量子アニーリングの基礎」を読む 第２日(予習)
https://qiita.com/kaizen_nagoya/items/749043f4f8ae026ec5e5

作業してhubに保存しようとして出た。

```
$ docker push kaizenjapan/openjij-ch2-ubuntu
The push refers to repository [docker.io/kaizenjapan/openjij-ch2-ubuntu]
ddb89b419376: Preparing 
42cc7cd900d4: Preparing 
75e70aa52609: Preparing 
dda151859818: Preparing 
fbd2732ad777: Preparing 
ba9de9d8475e: Waiting 
denied: requested access to the resource is denied
```

３度同じエラーが出た。

しかし、runしてみると保存されていた。

原因は不明。
### 最後までおよみいただきありがとうございました。

いいね　💚、フォローをお願いします。
#### Thank you very much for reading to the last sentence.

Please press the like icon 💚　and follow me for your happy life.
名前のスタイリングについて

## 概要
言語別の名前で使用するケースの使い分けについて。とりあえず、RubyとJavascriptについて

### キャメルケース
単語ごとに大文字で区切る。最初の文字を小文字にするローワーキャメルケースと
大文字にするアッパーキャメルケースがある
ローワーキャメルケース

```
captainamericaAndWinterSoldier
```
アッパーキャメルケース

```
CaptainamericaAndFalcon
```

### スネークケース
単語ごとにアンダーバー(_)で区切る

```
ironman_and_warmachine
```

## Javascriptの場合
### 変数名
ローワーキャメルケース

```
var thorAndLoki
```

### 関数名
ローワーキャメルケース

```
function makeHulkAngry() {}
```
### クラス名
アッパーキャメルケース

```
class Marvel{}
```

## Rubyの場合
### 変数名
スネークケース

```
antman_and_wasp
```

### 関数名
スネークケース

```
def make_hulk_soothe
end
```
### クラス名
アッパーキャメルケース

```
class Marvel
end
```

## 参考
[javascript スタイルガイド](http://snowdream.github.io/javascript-style-guide/javascript-style-guide/jp/naming-conventions.html)
[変数/クラス名の命名規則に使われる記法の分類](https://qiita.com/yimajo/items/a3fac0026c07ec538fc2)
[Ruby 命名規則まとめ](https://qiita.com/TakeshiFukushima/items/647a652439b55525945f)