OmniAICreator/Qiita-1.07M huggingface dataset:
初めて最適化問題を実務に適用する時に大変だった点

# モチベーション
前回、記事を描いてからとてつもない時間がたってしまいました。その間、筆者が何をしていたかと言うと、最適化の実務適用をしていました。（[#1 Google OR-toolsを使って hello-worldする](https://qiita.com/amashima/items/bcad1d23c83a6ad629b3)で宣言していましたね。）まだ仕事が全て終わったわけではないのですが、一旦一区切りがついたと思っています。そこで、今回はなるべく差し障りのない範囲で思ったことを書きたいと思います。

### 結構、設計能力を要求される
実務適用の際に一番に苦しんだといっても過言ではないポイントだと思っています。文章として書くと至極当たり前ではあるのですが、現実の問題を最適化問題に帰着させるために「現実のモデル化」を行います。それはすなわち「設計」することと大差ありません。これが難敵で、小さく問題を区切っても、設計部分はどうしてもある一定の時間はかかってしまいます。あくまで体感・直感の話で戯言のようなものなのですが、これくらいの難易度の「設計」ができる人は、ORで活躍するよりもっと別の分野で「設計」する方がお金になるんではないかなと思います。（あと、それぐらい「設計」ができる人は市場になかなか出てこないレベルで貴重な気がします。）

これがエキスパートシステムの時代に流行らなかった一番の理由とも思えます。
### ドメイン知識を要求される
これは前述の「設計」の話にも言えることではあるのですが、最適化問題を適用するためには、最適化問題のドメイン知識と、実際に適用する業務のドメイン知識がどうしても必要になってきます。どちらが欠けてと良い定式化ができなくなってしまいます（例えば不要な変数を定義してしまう、実は暗黙に了解していることを見逃して無意味な最適化を行ってしまう）。今回のプロジェクトは、最適化分野の情報収集と業務知識のヒアリングを同時に進めていきました。業務知識の方は今の所、問題がありませんが、定式化の学習がどうしても実務に追いつかず、「この実装、本に書いてあるし！しかもこの実装の方が良いし！」なんて言いながら、結構手戻りを発生させてしまいました。

### 表現方法に気をつけつつ、変数立てを行う必要がある。
最適化問題を解くだけ、ならとても簡単な話なのですが、今回は実務適用であるため、非エンジニアもわかるように話を進めなければなりません。これが大変難しく、アルゴリズムとその表現方法を同時に考える必要に迫られます。当たり前の話ではあるのですが、自分の作った定式化により、最適化問題が正しく解けていることを理解してもらう必要があります。今回の問題に対しては、複数の変数の切り方があり、それぞれの切り方によって、表現を実装するのがとても大変になることがわかりました。しかし表現実装のコストを安くすると、変数の数が非常に多くなるため、痛し痒しでした。

### 意外と解くスピードが早い
これはびっくりしたのですが、ナイーブな変数設定にも関わらず、Google OR toolsは非常に高速に解いてくれるようでした。今回の変数数は実務を模したデモデータに対して約16万個あったのですが、おおよそ80分程度で解いてくれます。もっと変数の数を抑えることはできるはずなので、

- 変数を抑えて実装すること
- 制約条件が凸型になっていることを確認すること（かなり意識して設定したので大丈夫なはず）
- 線形緩和問題に切り替えること
- ヒューリスティクスの利用

これらの要素を検討してあげれば、もっと高速になる気がしています。

# 振り返り
実際に作業を行ったのは2週間前後、ヒアリングだったり設計に別業務と平行で1ヵ月かけているので、結構大変な仕事でした。急ぎ仕事でもあったので、早急にリファクタリングして、今後のアップデートに対応したいところです。

# 終わりに
自分の記事のクオリティを高めたいので、質問でも、次の要望、ただの感想、何でもいいのでコメントを残して頂けると幸いです。

# 関連記事
- [#1 Google OR-toolsを使って hello-worldする](https://qiita.com/amashima/items/bcad1d23c83a6ad629b3)
日付のフォーマット


##python
```python
from datetime import datetime
now =datetime.now()
now_hms = "{0:%H:%M:%S}".format(now)
print(now_hms)
```
#####結果 '07:04:27'

```python
from datetime import datetime
now_timestamp=str(datetime.now().strftime("%Y_%m_%d_%H_%M_%S"))
print(now_timestamp)
```
#####結果 '2019_07_03_07_04_31'

##PHP
```php5
$date = '2015-12-31';
echo date('Y年m月d日',  strtotime($date));
```
#####結果 '2015年12月31日'


##SQL文
```sql
date="2015-05-01"
DATE_FORMAT(date,"%Y-%m")
```
#####結果  '2018-05'

## 【日付フォーマット　共通】
phpでは'%'はつけない

| 文字 | 説明 | 例 |
|:---:|:--:|:--:|
|%Y	|年（西暦4桁）	|2015	|
|%y	|年（西暦2桁）	|15	|
|%m	|月（ゼロ埋め）	|01～12	|
|%c	|月（ゼロ無し）	|1～12	|
|%M	|月（英字）	|January～December	|
|%b	|月（省略英字）	|Jan～Dec	|
|%d	|日（ゼロ埋め）	|01～31	|
|%e	|日（ゼロ無し）	|1～31	|
|%I	|時（12時間/ゼロ無）	|1～12	|
|%k	|時（24時間/ゼロ無）	|0～23	|
|%h	|時（12時間/ゼロ有）	|01～12	|
|%H	|時（24時間/ゼロ有）	|00～23	|
|%i	|分（ゼロあり）	|00～59	|
|%s	|秒（ゼロあり）	|00～59	|
|%f	|マイクロ秒	|000000	|
|%M	|曜日（英字）	|Sunday～Saturday	|
|%a	|曜日（省略英字）	|Sun～Sat	|
|%w	|曜日（数字）	|0（日曜）～6（土曜）	|
|%j	|年間の通算日数	|0～365	|
|%p	|午前/午後	|AM/PM	|
#Rails の ActiveRecord の OR条件をつなげる時は、 joins などの構造が矛盾せず、一致していなければいけないらしい！

# このエラー何？

```rb
User
  .left_joins(:books)
  .where.not(books: {user_id: nil}).or(
	User
	  .left_joins(:lovers)
	  .where.not(lovers: {user_id: nil})
  )
```


```
 ( ArgumentError: Relation passed to #or must be structurally compatible. Incompatible values: [:left_outer_joins] )
```

# メインの方にも、ORの方にも、両方に全く同じ joins  をつけなければいけないみたいだ！

なんか冗長だよね？でも、そうなんだよ。

```rb
User
  .left_joins(:books)
  .left_joins(:lovers)
  .where.not(books: {user_id: nil}).or(
	User
	  .left_joins(:books)
	  .left_joins(:lovers)
	  .where.not(lovers: {user_id: nil})
  )

```

# Scope とかにまとめておくと良いかもしれないね！

```rb
class User < ApplicationRecord
...
  scope :useful_joins, -> do
    .left_joins(:books)
    .left_joins(:lovers)
  end
end
```

```rb
User
  .useful_joins
  .where.not(books: {user_id: nil}).or(
    User
      .useful_joins
	  .where.not(lovers: {user_id: nil})
  )

```

# Original by Github issue

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








<!-- Update From Qiita API -->

# チャットメンバー募集


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

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





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
EDSDKのwrapperをC++で書いた

4月からいよいよ日本国内でもEDSDKが希望者に配布されるようになりました。EDSDKなんたらかんたらのプログラミングをするには、ちと辛いのでC++でwrapperを作りました。C#で作られた物はありますが、C++で実用的なものはないようなので、自作しました。

使い方は、

```c++

#include “cameralib.h”

Camera* camera;

camera = new Camera();

camera->TakePictureToFile();
camera->TakePictureToStream();
camera->LiveViewOn();

Etc.etc.

```

実はNikon SDKのwrapperもできていて、上記はCanonとNikonを多重継承した汎用Cameraクラスです。

```c++:cameralib.h

#ifndef CAMERALIB
#define CAMERALIB
#include "edsdklib.h"
#include "nikonsdk.h"


class Camera : public CanonCamera, public NikonCamera {

	private:

		char CameraName[80];
		int TotalCameraCount;
		Camera* activeptr;

	public:
		bool    usenikon = false;
		bool    usecanon = false;

		  Camera();
		  ~Camera();

		  Camera* getptr(){
			return activeptr;
		  }
	  char* GetName();
	  unsigned char* getbuffer();
	  long	getsize();
		  unsigned char* getlivebuffer();
	  long	getlivesize();

			void TakePictureToStream();
			void RecordMovie();
			void StopMovie();
            char* CGetName();
			void LiveViewOn(void);
			void LiveViewOff(void);
			void LiveViewOnTFT(void);
            void LiveViewOffTFT(void);
			void DownLoadEVFData(void);
			int  IsTransfered(void);
			void UnsetTransfered(void);
			void TakePictureToFile();
			void Rehook(void);

};

#endif

```
VBA 日付を指定しファイル名をつけて保存する

エクセルVBAはたまにしか使わないので、気がつくと忘れてググっているのでメモ

```vb

Dim file_name As String  'ファイル名

file_name = "ファイルの名前"

Application.DisplayAlerts = False 'アラートを表示させない
ActiveWorkbook.SaveAs Filename:=file_name, FileFormat:=xlCSV 'CSVで保存
Application.DisplayAlerts = True　　'アラートを表示させる

```
Macの場合ファイルパス名はファイルを選択して
⌘+option+C
でコピーできるので便利
TECH DAY -10 HTML/CSS

勉強した項目：　HTML/CSS概要　
時間： 2:30
内容：
＊学習アウトプットです。なにぶん間違いなんかもあります。気をつけますがその際はご指摘いただけますと幸いです＊

###【HTMLの書き方を学ぶ】
　　　サイトの作成においての全体像の把握
　　　→大きなボックス状のものから想像していく、入れ子のごとく
　　　HTMLのテンプレートは作れるようにしておく？　コピペでもいいのか。
　　　　→何回か作って体に覚えさせてしまう方が良さそう。
　　　　　基本構造のおさらい

```html.
<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8"
     <tittle></tittle>
     <link rel="stylesheet" href="style.css"
   </head>
  <body>
  </body>
</html>
```

**body内に作りたいボックスごとにヘッダー、セクションを作りクラスを当てて指定する**

###【CSSを使ったスタイリングの方法を学ぶ】
　　　　**→CSSでは各クラスのボックスの高さと背景色の指定をする**
　　　　　CSSの色の指定は２パターン
　　　　　・**`rgba`の`（赤）``（緑）``（青）```（透明）`を`０〜２５５`までの範囲で指定する方法**
　　　　　・**`＃色見本`の指定などに合わせて１６真数表記での方法、この場合は`透明度の調整は不可`**
　
　　**余白の指定を行う**
　　　`margin`と`padding`を使用
　　　`margin`の方が**外側**
　　　`padding`の方が**内側**の余白
　　　　
|パラメータの個数|設定される部分|
|:-----------|------------:|
| 1つ         | （上下左右） |
|2つ          | （上下）（左右） |
|3つ          | （上）（左右）（下） |
|4つ          | （上）（右）（下）（左） |


 •CSSの完全適応には、`normalize.css`
　　　ブラウザによるレイアウトの違いをうまく吸収してくれる`normalize.css`
　　　読み込み設定として
　　　`style.css`よりも上に記述してあげる

まとめ：実際に打ち込みの数だけ学習は進む感じ
　　　　頭で理解するのは、その後からでも遅くない。htmlのテンプレートは何度か打てば覚えられる。
　　　構造の理解にも繋がる。
　　　頑張ろう！
#Rails 初心者向け - ActiveRecord のメソッドとRubyメソッドの違いを意識してみる

# 題材: left_joins とかして重複した結果をユニークにするには uniq じゃなくて distinct が良いよ！

ユーザーが10人いるとき

```rb
User.count
# => 10
```

ユーザーがそれぞれ本を何冊も持ってると、結果が増えるよね！

```rb
User.left_joins(:books).size
# => 30
```

結果を uniq したら、ユーザーはユニークになるけど？

```rb
User.left_joins(:books).uniq.size
# => 10
```

アソシエーションが途切れてしまうので、その後に ActiveRecord 関係のメソッドを繋げられなくなるよ！

```rb
User.left_joins(:books).uniq.where(id: 1)
# NoMethodError: undefined method `where'
```

Kaminari gem のページングするときとかに困るよね？

```rb
User.left_joins(:books).uniq.page(1)
# NoMethodError: undefined method `page'
```

でも distinct なら問題ないね！

```rb
User.left_joins(:books).distinct.size
# => 10

User.left_joins(:books).distinct.where(id: 1)

User.left_joins(:books).distinct.page(1)
```

この場合の distinct は uniq と結果自体は同じだよ

同じインスタンスの配列が返ってきているよ

```rb
User.left_joins(:books).distinct == User.left_joins(:books).uniq
# true
```

distinct で何が起きているかは SQL を見てみよう！

```rb
User.left_joins(:books).to_sql
# => "SELECT `users`.* FROM `users` LEFT OUTER JOIN `books` ON `books`.`user_id` = `users`.`id`"

User.left_joins(:books).distinct.to_sql
# => "SELECT DISTINCT `users`.* FROM `users` LEFT OUTER JOIN `books` ON `books`.`user_id` = `users`.`id`"
```

uniq は Ruby のメソッドなので、メソッドチェーン先の to_sql メソッドはないよ。


```rb
User.left_joins(:books).uniq.to_sql
# NoMethodError: undefined method `to_sql' for #<Array:0x000055b59ea9cbb8>

User.left_joins(:books).uniq.class
# Array
```

# Original by Github issue

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








<!-- Update From Qiita API -->

# チャットメンバー募集


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

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





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
ruby on rails link_toの使用方法

##ruby on railsにおけるlink＿toの使用場面
link_toを使用すると普段aタグでで書くところをだいぶ省略できる。

 a href="/about">Tweetとは /a
これを以下のように書き換える事ができる。
<%= link_to("Tweetとは","/about") %>
　　　　　　　　　　↑　　　　　　↑
第一引数はリンクタグの文字　　第二引数は実際のリンク先になる

このようにruby on rails ではaタグを省略して書く事ができる。
【Forge】1.14.2と1.14.3での自作したEntityのRenderが表示されない問題の対処

# 開発環境
|OS |IDE |Forge |JDK |Lang|
|:-----------------------|:-----------------|:-------------|:--------|:---|
|Windows10 1809 17763.593|IntelliJ IDEA 2019|1.14.3-27.0.15|1.8.0_202|Java|


# はじめに
1.13.2から1.14.2へ対応させた際に、自作したEntityのレンダーが表示されず躓いたのでまとめました。
参考になればと思います。
Entity登録については1.13.2と同様です。→[【Forge】1.13.2での自作したEntityとEntityRenderの登録方法](https://qiita.com/noriokun4649/items/49523ecc546acde7a8ca)
ソースコードは前回同様自作ModのTorchBowModを元に説明してきます。

- [GitHub - TorchBowMod](https://github.com/noriokun4649/TorchBowMod)



# 症状
症状としては、クライアント側で下記のようにレンダーとエンティティを紐付けているのですが、表示されないという症状です。

```java:RenderResist
RenderingRegistry.registerEntityRenderingHandler(EntityTorch.class, RenderTorch::new);
```
1.13.2ではこれできちんと表示されていました。

## Entityは正常に登録されているのか？
まずはEntityの登録がうまくいっていないことを疑いました。
しかしながらEntityが行う当たり判定などの処理は正常に動いていたので、Entityの登録は正常なようです。

# 原因と対処法
いろいろ検索をしていくと原因と対策法がわかりました。

## 原因
まず原因としては、EntityTypeにてEntityを登録する際に今まででは、

```java
TORCH_ENTITY = EntityType.Builder.<EntityTorch>create(EntityTorch::new, EntityClassification.MISC)
```
のように、createメソッドに直接インスタンスを渡してましたが、1.14.2ではこのインスタンスではなく、新しく追加された`setCustomClientFactory`でインスタンスを渡してあげる必要がありました。

## 対処法
まずは、先ほども触れたEntityTypeを修正します。

```java
TORCH_ENTITY = EntityType.Builder.<EntityTorch>create(EntityClassification.MISC)
               .setCustomClientFactory(EntityTorch::new)//この行を追加
```
こんな感じです。
ラムダ式で省略されててわかりにくいかもしれませんが、これだけだと`<net.minecraftforge.fml.network.FMLPlayMessages.SpawnEntity, World>`という期待値にそぐったコンストラクタがEntityにないとエラーになります。
`setCustomClientFactory`の中をわかりやすいラムダ式？でかくとこんな感じです。

```java
.setCustomClientFactory((FMLPlayMessages.SpawnEntity spawnEntity, World world) -> new EntityTorch(spawnEntity,world))
```

コンストラクタの作成は

```java
public EntityTorch(FMLPlayMessages.SpawnEntity packet, World worldIn﻿) {
    super(TORCH_ENTITY, worldIn﻿);
}
```
こんな感じでsuperで自分のEntityTypeを渡してあげれば良いと思います。多分。
そしてEntityクラスにはコンストラクタの追加の他に、`createSpawnPacket`をオーバライドしてあげる必要があるみたいです。

```java
@Override
public IPacket<?> createSpawnPacket() {
    return NetworkHooks.getEntitySpawningPacket(this);
}
```
こんな感じにオーバライドして、自身のスポーンパケットを返してる感じです。
とりあえずはこんな感じでレンダーが表示されるようになりました。

# 最後に
今回のこの仕様変更にかなり躓いたのでもし同じような現象に悩まれている方が居ましたら参考にしてみてください。
また、何か間違い等ありましたら編集リクエストかコメントでよろしくお願いします。
RealityKitでusdzを読み込む


ARViewのSceneに追加するにはanchorが必要になるので適当なアンカーを付け足す。

```swift
public class USDZ: Entity, HasAnchoring {
  public var anchoring: AnchoringComponent {
    get {
      return anchorEntity.anchoring
    }
    set {
      anchorEntity.anchoring = newValue
    }
  }
  
  private var anchorEntity = AnchorEntity(world: .zero)
}

extension USDZ {
  public static func load(contentsOf url: URL) throws -> USDZ {
    let root = try Entity.load(contentsOf: url)
    let usdz = USDZ()
    root.setParent(usdz, preservingWorldTransform: true)
    return usdz
  }
}
```
2022年度最新版構成管理ツールのテストツールの比較

# 概要
Ansible,Chef,Puppet,SaltといったIaaS用の構成管理ツールでインフラ構築を完了した後、その妥当性をテストするツールの比較

# 構成管理テストツール一覧
選定条件 
- GitHubやBitBucketでソースコードが公開されている、かつスター1000以上である。(BitBucketはスタートがないため考慮しない)
- ライセンスが緩めである。(MIT, Apache2.0, etc)
- ドキュメントが存在する。

<table>
<tr>
  <th width="50">ツール名</th>
  <th width="50">動作環境</th>
  <th width="50">ライセンス</th>
  <th width="50">ドキュメント</th>
  <th width="50">特徴</th>
</tr>
<tr>
  <td><a href="https://github.com/mizzy/serverspec">ServerSpec</a> 
  </td>
  <td>Ruby</td>
  <td>MIT</td>
  <td><a href="https://serverspec.org">あり</a></td>
　<td>RSpecをラップして<br>作られているので、<br>Rspecと同じ感覚で<br>テストコードを書く<br>ことが可能。</td>
</tr>
<tr>
  <td><a href="https://github.com/inspec/inspec">InSpec</a> 
  </td>
  <td>Ruby</td>
  <td>Apache2.0</td>
  <td><a href="https://www.inspec.io">あり</a></td>
  <td>元々serverspecの拡張として<br>作られていたため、<br>テストコードの書き方は<br>serverspecとほぼ同じ。<br>機能性はserverspecよりも多い。</td>
</tr>
<tr>
  <td><a href="https://github.com/aelsabbahy/goss">Goss</a> 
  </td>
  <td>Go</td>
  <td>Apache2.0</td>
  <td><a href="https://github.com/aelsabbahy/goss/blob/master/docs/manual.md">あり</a> 
  </td>
  <td>yamlベースで<br>テストコードを<br>書くことが可能。</td>
</tr>
<tr>
  <td><a href="https://github.com/philpep/testinfra">Testinfra</a> 
  </td>
  <td>Python</td>
  <td>Apache2.0</td>
  <td><a href="https://testinfra.readthedocs.io/en/latest/">あり</a></td>
  <td>pytestをラップして<br>作られているので、<br>pytestと同じ感覚で<br>テストコードを書くことが可能。</td>
</tr>
<tr>
  <td><a href="https://github.com/sstephenson/bats">Bats</a> 
  </td>
  <td>Bash</td>
  <td>MIT</td>
  <td><a href="https://github.com/sstephenson/bats/blob/master/README.md">READMEのみ</a></td>
  <td>構成管理のテスト専用<br>ツールではないが、<br>bashベースなので<br>構成管理のテスト<br>にも十分使える。</td>
</tr>
</table>
USDZをUIDocumentPickerViewController選択させる



```
let documentTypes = [
      "public.3d-content"
    ]
    
    let picker = UIDocumentPickerViewController(documentTypes: documentTypes, in: .import)
    picker.delegate = self
    present(picker, animated: true, completion: nil)
```

`public.3d-content`を指定すれば、3dモデルだけ選択できるようになる
snackbar_is_openのRx(JS)による実装

Material-UI の [Snackbar](https://v4-0-2.material-ui.com/components/snackbars/) の表示を外部から制御する方法のメモ。

（snackbar ... イベント完了時などにポップアップ表示されるやつ。）

## やりたいこと

Material-UI の Snackbar には `autoHideDuration` というプロパティが用意されており、 `autoHideDuration={2000}` などと書けば2秒後に自動で `onClose` を呼んでくれる。
しかし、2秒立たないうちにSnackbarを再度開くイベントが発生したとき、一度閉じてまた開く動作をされてしまったので（そのまま保持してほしかった）  `open: boolean` の値を外部からコントロールすることにした。

`onClose`イベントを無視するようにすると一応これを防げたが、そもそもUIコンポーネントにtimerのような状態を持たせることが気持ち悪いので、`open: boolean`の値に応じて状態が定まるような fully-controlled component として snackbarを使いたい（≒`autoHideDuration`プロパティを使いたくない）。

## 結論

Rx(JS)を使うと以下のように書ける。 `sourceEvent$` を snackbar を開くイベントを発火する Observable とする。

```ts
const snackbarIsOpen$: Observable<boolean> = sourceEvent$.pipe(
  switchMap(() => timer(2000).pipe(mapTo(false), startWith(true)))
)
```

意味としては、`sourceEvent$`が発火するたびに `(true)-----2000ms----->(false)`という形のObservableを生成し switchMap する。
図にすると以下のようになる。


```

sourceEvent$ 
---o------o-o----------o-----------o---

~~~ ***Map(() => timer(2000).pipe(mapTo(false), startWith(true))) ~~~

---t------t-t----------t-----------t---
    \      \ \          \           \
     \      \ \          \           \
      \      \ \          \           \
       \      \ \          \           \
        f      f f          f           f

   <---->
   2000ms

           ~~~ switchMap ~~~


---t----f-t-t----f-----t----f------t----f---


```

switchMapの場合、後に生成される `true---->false`が古いものを上書きするので、falseの前に次のtrueが発火すると古いfalseは捨てられる。
これにより、連続してイベントが発火したときにはsnackbarを閉じずに、イベントが2秒止んだタイミングで初めて閉じる動作が実現できる。

---

ちなみに

```ts
const snackbarIsOpen$: Observable<boolean> = sourceEvent$.pipe(
  switchMap(() => timer(2000).pipe(mapTo(false), startWith(true)))
)
```

は

```ts
const snackbarIsOpen$: Observable<boolean> = sourceEvent$.pipe(
  switchMapTo(timer(2000).pipe(mapTo(false), startWith(true)))
)
```

でも同じ意味のはず。

## あとがき

ざっと書いたのでRxに慣れている人にしか読めないかもしれませんが、参考になれば幸いです。
[nuxt.js その２] 全体像の把握

# 物事を知るには大枠から
PHPのHelloWorldの時も同じく大枠の把握から入りました。
これは個人的な問題なのかもしれないですが、私は全体がどうなっているかをざっくり理解してからでないと、どうも頭の中が整理できないまま結局何もわからなかった　となりがちです。なのでまずは全体がどうなっているのかを調べました。

以下公式ページからの抜粋

![alt](https://ja.nuxtjs.org/nuxt-views-schema.svg)

ここについてはvue.jsと比較すると以下のような感じかな。

| 上図 |vue .js|nuxt.js　|
|:-----------------|:----------------- |:--------------------------|
| Document         |       ~/index.html |~/app.html　*1|
| Layout           | ~/App.vue 　　　　　　　　　　　　　|~/layouts/index.vue|
| Page             | ~/App.vue: \<router-view/\> *2　|~/layouts/index.vue:\<nuxt/\>　*2|

*1　デフォルトではファイルが存在しない
*2　描画したいファイルをルーターに定義すれば埋め込んでくれる

一度vueを触ったことあるから照らし合わせると非常に理解しやすい。
デフォルトでvuetifyできれいなレイアウトを生成してくれているので、pages/配下のファイルとルーターのカスタマイズで作っていくことにします。
Vue.jsではページを作成したらルーターの定義を自分で記述してあげる必要があったけど、nuxtはルールを守って~/pages配下にファイルを作成していけば勝手に作成してくれるみたい。[ルーティングについて](https://ja.nuxtjs.org/guide/routing)
例えば、~/pages/inspire.vueがデフォルトで生成されてるけど、このページには http://localhost:3000/inspire  でアクセスできる。このルールは~/.nuxt/router.jsに生成されている。

試しに以下を作ってアクセスできることを確認した。

```
 ~/pages/
   └ sample/
     └ index.vue

 http://localhost:3000/sample/ 
```

```
 ~/pages/
   └ sample/
     └ sample.vue

 http://localhost:3000/sample/sample 
```

~/.vue/router.jsも自動で変わってる

```javascript

export function createRouter() {
  return new Router({
    mode: 'history',
    base: decodeURI('/'),
    linkActiveClass: 'nuxt-link-active',
    linkExactActiveClass: 'nuxt-link-exact-active',
    scrollBehavior,

    routes: [{
      path: "/inspire",
      component: _1da4f318,
      name: "inspire"
    }, {
      path: "/sample",
      component: _43eed0fc,
      name: "sample"
    }, {
      path: "/sample/sample",
      component: _7cab1dac,
      name: "sample-sample"
    }, {
      path: "/",
      component: _49a418ec,
      name: "index"
    }],

    fallback: false
  })
}
```
b-tableとb-paginationでページネーションを実装する上でハマった点とその対応方法

bootstrap-vueを使った時に`b-table`でページングを実現する方法がわからず、ちょっとハマったので自分用のメモとして投稿しました。

APIから取得したデータを`b-table`で表示し、`b-pagination`を使ってページングするUIを作りたくて下記のように実装しました。1ページ目は問題なかったのですが、2ページ目以降は何も表示されず...。

```vue
<template>
  <b-table
    :items="items"
    :current-page="currentPage"
    :per-page="perPage"
    :fields="fields"
    responsive="sm"
  />
  <nav>
    <b-pagination
      v-model="currentPage"
      :total-rows="totalRows"
      :per-page="perPage"
      prev-text="Prev"
      next-text="Next"
      hide-goto-end-buttons
    />
  </nav>
</template>
<script>
data: () => {
  return {
    fields: [],
    items: [],
    currentPage: 1,
    perPage    : 10,
    totalRows  : 0,
  }
},
methods: {
  async fetch() {
    const res = await api.fetch() 
    this.perPage = res.data.perPage
    this.totalRows = res.data.totalRows
    this.items = res.data.items
  }
}
</script>
```

`this.items`にAPIから取得した要素を追加していかないとそりゃ次のページは表示されないんですが、アホな僕はひたすら `b-table refresh doen't work` とか調べてたので、全く答えにたどり着けませんでした。
スマートな回答がわからず、結局下記のような感じでページングを実現しました。

```vue
<script>
data: () => {
  return {
    fields: [],
    items: [],
    currentPage: 1,
    perPage    : 10,
    totalRows  : 0,
  }
},
methods: {
  async fetch() {
    const res = await api.fetch({
      currentPage: this.currentPage,
      perPage: this.perPage,
    }) 
    this.perPage = res.data.perPage
    this.totalRows = res.data.totalRows
    this.items = new Array((this.currentPage - 1) * this.perPage).fill({})
    this.items = this.items.concat(res.data.items).map(function (item) {
      // 取得したitemを加工？
      return item
    })
  }
},
watch: {
  currentPage(newValue, oldValue) {
    this.fetch()
  },
},
</script>
```

一回指定されたページまでのダミーを作って、APIから取得したデータを追加するという... :innocent: 
APIで一旦全レコードを取得して、`this.items`にぶっこんでしまうのが早いんでしょうか？
とにかく絶対他にいい&かっこいい方法があるはず...
Ruby ハッシュ配列の複数Keyでのソート

Rubyの小ネタです。
ハッシュ配列を複数Keyで順位をつけてソートしたいケースがあり、やり方を検討した時の備忘。
他におすすめの方法があれば、ご指摘もらえると嬉しいです。

## 前提

- Ruby 2.6.3

### 対象データ

```.rb
def rand_hash
  { k1: rand(10), k2: rand(10), k3: rand(10), k4: rand(10) }
end

def rand_hash_array(num)
  num.times.map { rand_hash }
end

# このデータを k1 > k2 > k3 > k4 の順でソートしたい。
>> rand_hash_array(10)
=> [
  {:k1=>6, :k2=>7, :k3=>9, :k4=>0},
  {:k1=>8, :k2=>1, :k3=>0, :k4=>6},
  {:k1=>5, :k2=>6, :k3=>7, :k4=>6},
  {:k1=>6, :k2=>3, :k3=>1, :k4=>8},
  {:k1=>6, :k2=>0, :k3=>2, :k4=>7},
  {:k1=>8, :k2=>1, :k3=>5, :k4=>9},
  {:k1=>3, :k2=>3, :k3=>7, :k4=>7},
  {:k1=>0, :k2=>1, :k3=>5, :k4=>9},
  {:k1=>5, :k2=>1, :k3=>1, :k4=>1},
  {:k1=>6, :k2=>8, :k3=>8, :k4=>3}
]
```

## 方法1: Enumerable#sort

[Enumerable#sort](https://docs.ruby-lang.org/ja/latest/class/Enumerable.html#I_SORT) を使う

```.rb
data.sort do |a, b|
  comp1 = a[:k1] <=> b[:k1]
  comp2 = a[:k2] <=> b[:k2]
  comp3 = a[:k3] <=> b[:k3]
  comp4 = a[:k4] <=> b[:k4]
  next comp1 if comp1 != 0
  next comp2 if comp2 != 0
  next comp3 if comp3 != 0
  next comp4 if comp4 != 0
  -1
end

=> [{:k1=>0, :k2=>1, :k3=>5, :k4=>9}, {:k1=>3, :k2=>3, :k3=>7, :k4=>7}, {:k1=>5, :k2=>1, :k3=>1, :k4=>1}, {:k1=>5, :k2=>6, :k3=>7, :k4=>6}, {:k1=>6, :k2=>0, :k3=>2, :k4=>7}, {:k1=>6, :k2=>3, :k3=>1, :k4=>8}, {:k1=>6, :k2=>7, :k3=>9, :k4=>0}, {:k1=>6, :k2=>8, :k3=>8, :k4=>3}, {:k1=>8, :k2=>1, :k3=>0, :k4=>6}, {:k1=>8, :k2=>1, :k3=>5, :k4=>9}]
```

## 方法2: Enumerable#sort_by

[Enumerable#sort_by](https://docs.ruby-lang.org/ja/latest/method/Enumerable/i/sort_by.html) を使う。
同一型として比較できるならソートキーを作ってブロックの中で指定する。
以下は文字列として各要素をソート順に連結したソートキーを作った解法例。

※各要素は2桁までの数値桁のデータが入っている前提。

```.rb
data.sort_by { |h| '%02d%02d%02d%02d' % [h[:k1], h[:k2], h[:k3], h[:k4]] }

=> [{:k1=>0, :k2=>1, :k3=>5, :k4=>9}, {:k1=>3, :k2=>3, :k3=>7, :k4=>7}, {:k1=>5, :k2=>1, :k3=>1, :k4=>1}, {:k1=>5, :k2=>6, :k3=>7, :k4=>6}, {:k1=>6, :k2=>0, :k3=>2, :k4=>7}, {:k1=>6, :k2=>3, :k3=>1, :k4=>8}, {:k1=>6, :k2=>7, :k3=>9, :k4=>0}, {:k1=>6, :k2=>8, :k3=>8, :k4=>3}, {:k1=>8, :k2=>1, :k3=>0, :k4=>6}, {:k1=>8, :k2=>1, :k3=>5, :k4=>9}]
```

### 追記 (2019/07/03)

コメントをいただき、ソートキーは配列で指定するシンプルな書き方を教えてもらいました。
以下の方法で、配列で指定した要素を順に `<=>` 比較し、上の書き方より、桁考慮/意図しない文字列比較結果等の考慮が不要になるので優れている解法だと思っております。コメントありがとうございました。

```.rb
data.sort_by { |h| h.values_at(:k1, :k2, :k3, :k4) }

=> [{:k1=>0, :k2=>1, :k3=>5, :k4=>9}, {:k1=>3, :k2=>3, :k3=>7, :k4=>7}, {:k1=>5, :k2=>1, :k3=>1, :k4=>1}, {:k1=>5, :k2=>6, :k3=>7, :k4=>6}, {:k1=>6, :k2=>0, :k3=>2, :k4=>7}, {:k1=>6, :k2=>3, :k3=>1, :k4=>8}, {:k1=>6, :k2=>7, :k3=>9, :k4=>0}, {:k1=>6, :k2=>8, :k3=>8, :k4=>3}, {:k1=>8, :k2=>1, :k3=>0, :k4=>6}, {:k1=>8, :k2=>1, :k3=>5, :k4=>9}]
```
UX Competitor Analysis: 簡単なガイド

##自己紹介

こんにちは、JP です。(Bridge Institute of Technology) 奥多摩日本語学校の学生です。現在奥多摩日本語学校の留学生です。、以前の記事にはUXデザインに興味を持っているということを書きました。この記事ではUXのCompetitor Analysisについて中心としてまとめました。

##概要
UXデザインにはたくさんユーザーリサーチの方法があります。一つはUXのCompetitor Analysisです。しかし、UXのCompetitor Analysisはなにでふくまれるのかという質問があるので、一緒に理解しましょう！

##UXのCompetitor Analysisとは
UsabilitygeekによるとUXCompetitor Analysisというのは、自分のプロダクトやサービスをよく知り、潜在的な競争と比較することを意味します。

###目的
基本的に2つのフェーズで構成されています。まず、適切に研究する方法を知るべきで、探している情報を明確に知るべきです。あとは情報を分析してまとめます。

そうすると自分のプロダクトの市場のどこにあるのかを理解して強弱が表せます。そして、対象者をはっきり知れます。

##UXのCompetitor Analysisステップガイド
####1. 目標をはっきりにして理解するべきです。
最初に、UXのCompetitor Analysisの目標をはっきりしなければなりません。そもそもなぜこのリサーチをしていますか。具体的な目標を書きます。

そうすれば、情報を分析中に、目標を最初に明確にしたので、情報を読み誤がちのことは避けられます。


####2. 競争をはっきり知るべきです。
直接競争と間接競争を定義してリストします。簡単な方法はググるスプレッドシートを使うことです。

ソース：　https://www.smashingmagazine.com/2018/08/guide-competitive-analysis/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/301449/1137ac7d-bfdb-1022-fb23-a48bb5762eee.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/301449/2fec56be-4c3a-4c98-865b-634a82610386.png)


####3. 情報の分析とまとめ
集めた情報から、分析します。それから、分かったことを書いて、簡単なまとめをします。
この段階で、プロダクトのイノベーションのために、競争の弱点を知っていて、デザイン機会を定義することができます。

####4. まとめた分析をかかわる人達に発表する
簡単にするとパワーポイントを作ることです。パワーポイントの内容には一般的な情報より最も影響的な具体的なポイントをピックアップして、発表します。

##まとめ
良いUXデザインをするために、リサーチが必要です。一つの方法はUXのCompetitor Analysisです。リサーチには、自分のプロダクトに対して、多くの情報があるので、どちらのが最も影響があるかということを明確に決めなければなりません。そうすれば、価値高い洞見が表せます。それをかかわる人達に発表したら、新しいアイディアが表せて、プロダクトのイノベーションへの道を開くことができます。

#参考記事
https://usabilitygeek.com/how-to-do-ux-competitor-analysis/
https://www.smashingmagazine.com/2018/08/guide-competitive-analysis/
Kotlin coroutine withContext とは

coroutineのコンテキストを切り替えるための中断関数。
以下の２つのコードの実行結果は変わらないが、async/awaitではcoroutineを新たに生成する一方、withContextは実行中のcoroutineのコンテキストを切り替えているだけです。なのでwithContextの方が[パフォーマンスがよくメモリも食わない](https://stackoverflow.com/a/50231191)。

```kotlin:
GlobalScope.launch(Dispatchers.Main) {
    // メインスレッドでの何らかの処理1
    // ...

    // バックグラウンドスレッドで非同期処理をして待機して結果を取得
    val result = async(Dispatchers.Default) { // 新たなcouroutineが生成される
      blockInBackground()
    }.await()

    // メインスレッドでの何らかの処理2
    // ...
}
```

```kotlin
GlobalScope.launch(Dispatchers.Main) {
    // メインスレッドでの何らかの処理1
    // ...

    // バックグラウンドスレッドで非同期処理をして待機して結果を取得
    // couroutineのコンテキストが切り替わる(Main→Default)
    val result = withContext(Dispatchers.Default){
      blockInBackground()
    }
    // couroutineのコンテキストが切り替わる(Default→Main)

    // メインスレッドでの何らかの処理2
    // ...
}
```

間違っていたらご指摘いただけると幸いです。

参考）
https://kotlinlang.org/docs/reference/coroutines/coroutine-context-and-dispatchers.html#coroutine-context-and-dispatchers
Unityで基本的な2Dの動きを作ろう

前回のポストで、Unityで2Dキャラクターをアニメートする方法を紹介しました。今回、それでは、そのキャラクターをゲーム内で移動およびジャンプさせる方法について説明します。キャラクターがゲーム内で動くための単純な動き。たのしみましょう！

##準備
まず、ゲームに使用するグラウンドをインポートし、それにBox Collider 2D Componentを追加します。
![ground.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/293087/3b2fff57-1b78-b990-80c8-f6026cdeb194.png)

その後、グラウンドスプライトにグラウンドタグを追加します。
![tag.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/293087/75adf768-fe63-f6e7-8937-3da38d79336d.png)

次に、Box Collider 2DとRigidBody2D Componentをキャラクタースプライトに追加し、その設定をそのままにします。
![character.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/293087/33c43bd8-6656-880c-ac3a-cab1d71b0ab1.png)

準備は完了したので、キャラクタを動かすためのコードの作成に進みましょう。

##ミギ、ヒダリ、ミギ、ヒダリ
まず、C＃スクリプトを作成し、それをコンポーネントとしてキャラクターに追加しましょう。
![code.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/293087/5188f6d1-5120-17ee-c327-5e4b4a671648.png)

さて、プレーヤーがキーボードの左右のキーを押したときにキャラクターが左右に動くようにこのコードを書きます。

![move.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/293087/28db636e-c483-7233-aefc-e80f5c43ab0e.png)
![move.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/293087/e035cbe9-2c28-baf4-dd83-2168fd721afb.gif)

##ジャンプ、キャラ、ジャンプ!

キャラクターを左右に動かすことができました！さらに面白くするために、スペースキーを押すだけでキャラクターがジャンプできるようにジャンプ機能を追加しましょう。
![jump.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/293087/d14036bf-ea9a-6189-48e3-095edc2b9cb0.png)
![ezgif.com-video-to-gif (2).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/293087/63007ef5-9999-bc69-dfff-48bfb46dcd71.gif)

できました！ これで、ゲーム内でキャラクターを動かすことができます。
雑にディスク空き容量を監視する

この時代に Windows Server 2003 のディスク使用率を監視する苦難に見舞われた架空の話です。
尚、問題となるサーバはパフォーマンスの監視はされていないものの、イベントログの監視はされているものとします。

以下のようなバッチファイルを設置し、タスクで定期的に動かすことで解決することにしました。

```shell
@echo off

:: しきい値(GB)
set /a Threshold=10

:: dirコマンドの最終行の3つ目のトークン（ディスクの空き容量）を取得
for /F "tokens=3" %%i in ('dir') do @(set DirLastLine=%%i)

:: ディスクの空き容量のカンマを除去
set FreeDiskSpace=%DirLastLine:,=%

:: batでは32bit数値までしか扱えないため末尾9桁を除去して大雑把なGBを得る
set /a FreeDiskSpaceGB=%FreeDiskSpace:~0,-9%

:: しきい値を下回っていればイベントログにエラーを出力する
if %FreeDiskSpaceGB% lss %Threshold% (
    eventcreate /L Application /T ERROR /ID 1 /D "Disk Critical [%FreeDiskSpaceGB%GB Free] Threshold=%Threshold%GB"
)
```

dirコマンドの最終行にディスクの空き容量が表示されていることに気づいたのはつい最近です。だってそういう目的で使ったこと無いし。

32bit数値までしか使えないところに時代を感じます。変数展開でうまく末尾除去でGBに変換ができたので良かったです。~~危うく `rd /s /q C:\Windows` を仕込むところだった~~

GB への変換が雑なのは間違いないですが、概ね目的が達成できているので良いのだと思います。雑なのは良いことです、コスパ的に考えて。

一気にMBレベルまで食いつぶしたらどうするんだという話はあると思うのですが、そこまで行ったら本当にサーバ止めた方が良いと思う。
【Rails】Active Storageでアップロードした画像が表示されなくなったので、原因を調べた

#はじめに
結論として、画像が表示されなくなった原因は、
**`Routing Error対策`**として`routes.rb`に

```
match "*path" => "application#error404", via: :all
```
を書き込んだのが原因であった。

# 事象の説明

開発中にActive Storageでアップロードしたはずの画像が表示されなくなってしまいした。
<img width="298" alt="スクリーンショット 2019-07-02 14.03.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251648/c07d9149-51f5-ee37-a168-e0afe364f656.png">
こいつが
↓
<img width="301" alt="スクリーンショット 2019-07-02 14.02.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251648/06f7e4da-8199-8c00-8ad3-0883acf0f460.png">

こんな感じになってしまった。

# 原因となっていたrouting error対策の説明

<img width="490" alt="スクリーンショット 2019-07-03 0.53.22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251648/92c4d94e-8f6b-f1d9-45e6-65d9baac4332.png">

routeに存在しないurlでアクセスすると、上記のように**`Routing Error`**となり、
`HTTP status code 404`がレスポンスされる。
これが面倒なので、「**routeに存在しないアクセスをすると、root_pathにリダイレクト**」という処理を行った。

```application_controller.rb
  def error404
    redirect_to root_path, alert: "エラーが発生しました"
  end
```

```routes.rb
・
・
・
  match "*path" => "application#error404", via: :all
end
```

routes.rbの一番最後の行に`match "*path" => "application#error404", via: :all`と記述することによって、
「それまでにマッチしなかった全てのルートは**application_controller**の**`error404`**が呼び出される」
という処理がされる。

## 原因の理由
`rails routes`でルートを確認してみると、**`Active Storage`**に関するルートより先に**`Routing Error`**対策のルートが記述されている。

```
$ rails routes
・
・
・
          letter_opener_web        /letter_opener                                                                           LetterOpenerWeb::Engine
                                   /*path(.:format)                                                                         application#error404
         rails_service_blob GET    /rails/active_storage/blobs/:signed_id/*filename(.:format)                               active_storage/blobs#show
  rails_blob_representation GET    /rails/active_storage/representations/:signed_blob_id/:variation_key/*filename(.:format) active_storage/representations#show
         rails_disk_service GET    /rails/active_storage/disk/:encoded_key/*filename(.:format)                              active_storage/disk#show
  update_rails_disk_service PUT    /rails/active_storage/disk/:encoded_token(.:format)                                      active_storage/disk#update
       rails_direct_uploads POST   /rails/active_storage/direct_uploads(.:format)                                           active_storage/direct_uploads#create
```
つまり、Active Storageに関するルートが読まれるよりも前に、「それまでにマッチしなかった全てのルートは……」が読まれてしまう。
どうやらActive Storageに関するルートは`routes.rb`を読み込んだ後に記述されるらしい。。。

現に`match "*path" => "application#error404", via: :all`の一行を削除すると直る。:hugging:

<img width="301" alt="スクリーンショット 2019-07-02 14.02.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251648/d18bb3c2-5c2e-cb1c-6ab0-422e7eba7819.png">
↓
<img width="298" alt="スクリーンショット 2019-07-02 14.03.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251648/170ae758-3408-ed48-27bf-16523e7e79cb.png">

#おわりに
画像表示のために**Routing Error対策**は諦めてしまったのだが、
何かうまい方法はないものか。:thinking:
[未経験からのRuby開発 #2] ダイビングのログブックを紙からWebに変える

#これなに
ここ2年でハマったダイビングで毎回書いている[ログブック](https://kotobank.jp/word/%E3%83%AD%E3%82%B0%E3%83%96%E3%83%83%E3%82%AF-663463#E3.83.80.E3.82.A4.E3.83.93.E3.83.B3.E3.82.B0.E7.94.A8.E8.AA.9E.E9.9B.86)が基本紙で管理していますが、毎回持ち歩くのが面倒なので、Webアプリをつくることにした記録です。

##過去日誌
- [Day1](https://qiita.com/nanataso/items/ecfb17aa144486e3fb60)

#Day2にやったこと
##各プラットフォームの設定
- facebookからトライしたが、全然できない
    - そもそも2月の変更で `https` でアクセスできるようにしないといけないらしい
    - mkcertでSSL証明書を作成
    - pumaの設定ファイルでSSL証明書を指定する
    - `.gitignore` でSSL証明書を無視したいけど、これを調べてもできない
    - 一旦 `https://localhost:3000/users/sign_up` へアクセスはできた

- がしかし、facebookに登録ができない。twitterもできない。Googleもできない :sob:
- ちょっと私には `Omniauth` は早かったようだ
- まずは `deviseを使ってログイン機能をつくる` をちゃんとやろう

>先生「Omniauthを使うにはoauthという仕組みを理解しないとハマるかもしれないです」
私「ちょっと早すぎました、私には。潔く撤退します！」
先生「oauthは別途解説します。cookie etcの周辺情報もわかってないといけないのでね」
私「cookieはきいたことがありますが、正体不明！ 🍪を含むお菓子の類だと喜びます！」
先生「・・・。忙しいのでまた明日ね」
私「ちぇ、つれないなー」

###ということでもう1度Day1の作業をやり直す
- Day1の [ログイン機能をつくる](https://qiita.com/nanataso/items/ecfb17aa144486e3fb60)の1) だけ再度やる
- できると思って意気揚々を始めるが、migrateがどうもうまくいっていないとエラーがでる
- 先生はお仕事中のため質問の回答は遅くなるようなので今日はもう寝て明日確認しようと思う。git pushはしないでおく


###参考
- [[Rails] Facebook/Twitter/Googleでのユーザー登録をDevise & Omniauthを使って爆速で実装する](https://qiita.com/kazuooooo/items/47e7d426cbb33355590e)
- [omniauth-facebookでユーザー情報を取得する](https://qiita.com/tanaka512/items/08641aa0f9b968d6320f)
- [【Rails】Facebookでユーザー認証する](https://qiita.com/t12u/items/52721d3ea2ce1e605ae9)
- [[初心者] deviseを使ってログイン機能を実装してみよう](https://qiita.com/Orangina1050/items/a16e655519a60f35b394)

#Day2の成果
- deviseを使ったログイン機能まで実装したところにうまく戻れず
- 結局Day1より後退しました
- 先生がいないで一人でやると何か間違ったときにうまく回避できず
- マイナス成果となりました:persevere:
    - どんどんいじるとどんどん沼。早く有識者に相談しましょう

#Day3どうする
- 先生にDay1の状態に戻す方法を聞きます
- Day1の状態にまずは戻します
- うまくできたらせめてControllerの設定くらいはしたい
PDFをKindleで読みたい

## 1. kindleに送信するためのE-mailアドレスを確認する
settings > Your Account > Send-to-Kindle Email で確認できる

![IMG_2672.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94313/5fab259f-5224-9f21-e46b-9ecae0f71a13.jpeg)

![IMG_2673.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94313/398c4528-1f9f-90d5-fbdf-ed26c842490d.jpeg)

## 2. PDFと共にそこにメールを送る
仮に、Send-to-Kindle Emailを `hoge@kindle.com` とすると、メールはこんな感じで送ります。

TO: `hoge@kindle.com`
Subject: Convert
Body: （本文は空でOK）
Attach: 送りたいPDFファイル

## 3. 1分ほど待つ
KindleにPDFが届きます。

---
(追記)
実際に、kindleで読んでみると、、、とても読めたものではないほどに崩れていたので、いろいろ調べてみたところ、メールを送る際の件名を空にしてみるという方法がありました。Convertしないことで、そのままのPDFとして読めるのかと思います。
Railsからフロントエンド領域だけなんとか切り出す

※注意：

1. これが最適解とかいうわけではないです。個人的な経験に基づくソリューションです。
1. Railsの良し悪しの話ではないです。あくまで開発規模や体制によっては手法を変えるのもアリだから一考するのも選択肢として存在するという話です。

# 前提

- 小規模に開発していたRails製のwebサービスの機能拡張をより柔軟に行っていきたい
- そのためサーバーサイド/フロントエンドそれぞれで課題を解決していくためにも分業化を勧めていきたい
- Rails上のViewにフロントエンドを入れたまま分業化した場合、サーバーサイド/フロントエンドいずれかのエラーによって相手の作業をブロックするリスクを孕んでいる。
- 既存のサービスでデグレを起こさず、開発上できるかぎりの疎結合でサーバーサイド/フロントエンド開発を実現することがゴール。

# 要点

- Viewテンプレート内のbodyタグ内のDOMを取り除く
- View内で利用していたRailsから渡される変数をscriptタグ内のグローバル変数に格納する(buttonやformなども基本的にuriだけ利用してjs側で生成する)
- 仮想DOMで実装した外部のjsを読み込み、Rails側のグローバル変数を参照してつなぎこむ
- あとはよきように運用する

# 手順

```erb:helloword.erb:
<html>
<head>
...
</head>
<body>
<div>
<%= @message %>
</div>
...
```
のようなViewがあったとする。これを切り離したい場合。
erbは

```erb:helloword.erb:
<html>
<head>
...
</head>
<body>
<script>
var bridge_data = {message:"<%= @message %>"}
</script>
<!--上記のグローバル変数を参照してDOMを作るjsを読み込む-->
<script src="/path/to/external.js"></script>

...
```
として、Viewをサーバー側に持たせない作りにすることで、分業をよりスムーズに実現することができる。（複雑な構成のdomほど効果は高くなる）    
以上。
[VM環境] ホストOSのブラウザから表示ができないときの確認事項

## ホストOS 確認
コントロール パネル\システムとセキュリティ\Windows Defender ファイアウォール
> 詳細設定をクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/57249/f4caf078-8977-d2c5-769c-a9850bbad052.png)

>無ければ、右の「受信の規則」で80番を開いてあげる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/57249/0c32ff5d-820d-a832-e8f7-11b119d6ce08.png)

## ゲストOS 以下のシェルまたはコマンドを実行

```shell 
#!/bin/sh

systemctl start firewalld

firewall-cmd --zone=public --add-service=http
firewall-cmd --zone=public --add-service=http --permanent
firewall-cmd --zone=public --add-port=8080/tcp --permanent

firewall-cmd --reload

firewall-cmd --list-all

systemctl status firewalld

systemctl stop firewalld

systemctl restart httpd

systemctl status httpd
```
>シェルで実行する場合のパーミッションについて

作成したら以下のコマンドでパーミッションを実行可能にする

```shell

$ chmod u+x hello.sh
```
パーミッションを実行可能にしたらシェルスクリプトを実行させる

```shell

$ ./hello.sh
```

## 補足
まあ、自動起動設定使えば良い話だけど、それに頼ると仕事上で新規にVM環境作るときに表示できる仕組みやコマンドを忘れる可能性もあるためシェル化しただけです。
よい要件定義は個別の実装を上回る価値がある(かもしれない)。

技術を開発しようとするときは、どう良い開発要件の定義をできるかだ。


##  重要な理由

 - 開発の目的・ゴールに対して影響する。

   開発の目的が組織の中で共有されることによって、組織の中で必要な協力を得られる体制を作ることにつながる。

 - 何が実現できれば価値があるのかを明確にすること。
　適切な要件定義は、そのゴールを達成すれば、価値があると判断されていることを示している。
　例えば、自動車会社が歩行者検出に対して示した次のデータセットは、何を実現すれば
価値があるのかを示しています。
http://www.gavrila.net/Datasets/Daimler_Pedestrian_Benchmark_D/daimler_pedestrian_benchmark_d.html

- 適切な要件定義は、ゴールを明確にします。
　何を実現すべきなのかを示すとともに、何を実現したら開発を打ち切れるのかも示します。
　どこまでの性能が必須なのかを示さない場合には、開発を打ち切ることができません。
　開発を継続するには、多大なリソースを必要とします。一人の技術者が１年間従事し続けるだけで、その給料や社会保険料や間接部門に関わる費用なども含めたコストが発生します。
　ですから、どこまでできたら十分なのかを示し、次の段階に引き継げることが必要になります。

- よい要件定義は、本当に必要なことを言い切るので、無駄をそぎ落としてあって、何を開発すれば十分なのかを明らかにしてくれます。

## 悪い要件定義

- 本当に必要なものを反映していない。そのためにその内容を達成しても、なんら価値を生じない。
- 無駄に実現の可能性を損なう要因を加えている。その要因を取り除けば、実現が容易になり、しかも製品・サービスとしての価値を損なわない場合がある。
- 悪い要件定義は、開発者に対して実現の手法に対して無駄に制約を増やしてしまいます。
- 無意味な束縛を減らせば問題を解決しやすいように定義し直すことができます。
- それによって実現可能性を高めることができるし、必要なハードウェアリソースを減らすことができます。
- 悪い要件定義のままにしておくことは、その業務の推進を難しくします。
- 悪い要件定義のままにしておくことは、その開発要素を含むプロジェクト全体の状況にも影響します。



##  「良い」研究とは？ (引用元　http://ibisml.org/ibis2018/files/2018/11/kanade.pdf）
カーネギーメロン大学故アラン・ニューウェル（ＡｌｌｅｎＮｅｗｅｌｌ）教授
“Good science responds to real phenomena or real problems.”良い科学は現実の現象、現実の問題に応答する。
“Good science is in the details.”良い科学はちょっとしたところにある。
“Good science makes a difference.”良い科学は差を生む。つまりインパクト

https://www.cs.cmu.edu/~hzhang/Newell.GoodScience

### コンテストは要件定義のひとつ

https://signate.jp/competitions/256


https://www.ipa.go.jp/sec/old/users/seminar/seminar_tokyo_20180328-03.pdf
Macでトラックパッドとマウスのスクロール設定を別に設定できる「Scroll Reverser」

Macでトラックパッドとマウスのスクロール設定を別に設定できる「Scroll Reverser」を試してみました。とっても簡単でした。

## 対象読者

Macでマウスとトラックパッドを両方使用する者

## 前提条件

* macOS Mojave
* Homebrew 
* Homebrew-cask

```sh
$ sw_vers
```
```結果
ProductName:	Mac OS X
ProductVersion:	10.14.5
BuildVersion:	18F132
```
```sh
$ brew --version
```
```結果
Homebrew 2.1.6
Homebrew/homebrew-core (git revision b639; last commit 2019-07-02)
Homebrew/homebrew-cask (git revision ee89b; last commit 2019-07-02)
```

## 背景

Macではマウスとトラックパッドを併用しようとするとスクロールの設定が強制的に共有されます。
個人的にその設定が馴染まなかったので、個別に設定できる方法はないのか調べようと思いました。

```検索ワード
mac mouse スクロール トラックパッド 別
```

検索上位に「[Scroll Reverser](https://pilotmoon.com/scrollreverser/)」が引っかかったのでこれをインストールすることにしました。

## 導入

Homebrewで入れられかなと思って検索してみます。

```sh

$ brew search scroll-reverser
```
```sh
==> Casks
scroll-reverser
scroll-reverser
```

ありました。

さっそくインストールしてみます。

```sh
$ brew cask install scroll-reverser
```
```sh

==> Satisfying dependencies
==> Downloading https://pilotmoon.com/downloads/ScrollReverser-1.7.6.zip
######################################################################## 100.0%
==> Verifying SHA-256 checksum for Cask 'scroll-reverser'.
==> Installing Cask scroll-reverser
==> Moving App 'Scroll Reverser.app' to '/Applications/Scroll Reverser.app'.
🍺  scroll-reverser was successfully installed!
```

成功しました。

さっそく起動してみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160365/ec2b5ff8-bbd0-ed61-18c5-39d7fa3a2f1e.png)

操作を求められたので**開く**を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160365/6f79759c-a974-8d15-b37d-e68bfda8daa1.png)

さらにアクセシビリティアクセスの変更を求められたので**"システム環境設定"を開く**を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160365/f3b254ff-acf5-7dd6-40ef-6becb7cd16d8.png)

ロックを外して、チェックを入れて、ロックを掛け直します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160365/2b8d9fe9-c95d-392d-3074-e18717cc7509.png)

メニューバーに「↕」のアイコンが表示されるようになりました。

## 設定

設定を見てみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160365/e298b244-e872-fb6b-bf5f-979be7003487.png)

トラックパッドの設定はそのままにしたかったので、チェックを外しておきました。（下図）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160365/32c8ae2f-4a65-8a75-40d4-6194d0e79cd5.png)

アプリタブに切り替えて、ログイン時に開始するようチェックを入れたのと更新を自動で確認するように設定しました。（下図）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160365/50f01829-da13-8387-0c5b-cbf8416b20cb.png)

簡単にマウスとトラックパッドのスクロール設定を個別に設定することができました。


## 参考

* [Mac - トラックパッドとマウスのスクロール方向を逆に - 「Scroll Reverser」](https://pc-karuma.net/mac-app-scroll-reverser/)
* [Macでトラックパッドとマウスのスクロール方向を逆に設定](https://easyramble.com/reverse-scroll-with-mac-mouse.html)
HTMLでできること（すごい初歩段階）

#まずはじめに

[未来電子テクノロジー](https://www.miraidenshi-tech.jp/intern-content/program/)でインターンをしている＠reies1204です。
まだProgeteを触り始めて1週間と経っていない超初心者ですが、その中で学んだことを少しでもまとめてみようと思います。
ただし、プログラミング初心者であるため、内容に誤りがあるかもしれません。
もし、誤りがあれば修正するのでどんどん指摘してください。

##HTMLで何ができるの？
まだまだできることは沢山あると思いますが、とりあえず超初歩段階での学びをまとめてみたいと思います。

まずHTMLでは、「タグ」と呼ばれる要素でテキストを囲むことで、そのテキストに様々な意味を与えることができます。

* 見出しを作る
   
　”h”(heading)というタグで囲むと見出しを作ることができます。
　例えば`<h1>あいうえお</h1>`といった感じです。

* 段落を作る

　”p”(paragraph)というタグで囲むと段落を作ることができます。
　例えば`<p>かきくけこ</p>`といった感じです。

* リンクを貼る

　”a”というタグで囲むとリンクを作ることができます。
　テキストからリンク先に飛ぶようにするためには、href属性というものを追加して
`<a href="url">`という形にする必要があります。
　具体的には
`<a href="https://www.miraidenshi-tech.jp/intern-content/program/">未来電子テクノロジー</a>`と言う風に書きます。
冒頭にあるやつと同じですね。（多分）

* 画像を貼る

　”img"というタグで囲むと画像を貼ることができます。
　先ほどのリンクと同様に、scr属性というものを追加して`<img scr="画像のurl">`という形にすることで画像を表示させることができます。
ちなみに”img”要素については囲む必要はありません。

* 箇条書きにする

　”li"というタグでテキストを囲むと、箇条書きにすることができます。
　そして”li”要素を”ul”要素で囲むと黒点、”ol”要素で囲むと数字で箇条書きにすることができます。
　ちなみに囲む方の要素を親要素、囲まれる方を子要素といいます。

#さいごに
まだまだ勉強は始まったばかりなので、ひたむきに勉強を続けていきたいと思います。
これからの成長をぜひ見守ってください。
CoderDojo検索Alexaスキルを作る（設計〜実装までの軌跡）

#1.はじめに

いきなりですが、皆さんは[CoderDojo](https://coderdojo.jp/)をご存知でしょうか。
CoderDojo は7〜17歳の子どもを対象にしたプログラミング道場です。
2011年にアイルランドで始まり、世界では110カ国・2,000の道場、日本には178以上の道場があります。

CoderDojoはプログラミングで遊びたい、何かを作りたい子どもたちが集まる公園みたいなものです。

少しでも多くの子どもたちがCoderDojoを見つけることができるように、イベント検索用のAlexaスキルを開発してみます！**（うーん、強引）**

#2.ユースケース
基本的には、参加希望者がCoderDojoを探すことを想定し、主催者側の機能は考えないことにしました。
そこで大きく2つのユースケースを考えます。

- 「近くのCoderDojoを探して」と発話すると、現在地からもっとも近いCoderDojoのイベント情報を答える。
- 「CoderDojo●●の開催情報を教えて」と発話すると、特定のCoderDojoのイベント情報を答える。

残念ながら、スキルから直接申し込みはできないので、どちらも最後に**Alexaアプリへカードを表示する**ことにします。

#3.設計

##最寄りのCoderDojoを探す場合
Alexa側は「近くのCoderDojoを探して」が拾えるようにするだけなので、一旦端折ります。

<img width="1157" alt="スクリーンショット 2019-07-03 0.28.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96385/63954a98-4e8d-3c2b-1c58-2b53c2d1fe30.png">

処理を分解すると、こんな感じでしょうか。
ネックになるのはZenからのCoderDojo情報とCoderDojo Japanのイベント情報をどうやって紐付けるかになりそうです。

| No     |       処理概要 |    備考    |
|:-------|:-------------|:------------------|
| 1      |Alexaへのリクエストに現在地情報(lat,lon)を入れる | https://developer.amazon.com/ja/docs/custom-skills/location-services-for-alexa-skills.html#conditions-for-location-services         |
| 2      |lat,lonを使ってZenのAPI「search-nearest-dojos」をコンコンして最寄りのDojo情報を取得する |       https://zen.coderdojo.com/documentation#!/api/postApi20DojosSearchnearestdojos       |
| 3      |2で取得したDojoの情報から**何かキー**を使って、CoderDojo Japanが統合管理しているイベント情報を取得する |        キーになりそうなもの。「"id": "52aa6cef-a5b5-4827-aa72-dd22a69b3065"」        |
| 4|必要な情報を整形してレスポンスを返す。と同時にカード表示する。|https://developer.amazon.com/ja/docs/custom-skills/include-a-card-in-your-skills-response.html|

##特定のCoderDojoを調べる場合

通常であれば、AlexaのカスタムスロットにDojoの名前を1つ1つ設定してビルドをすると、同じDojoでも複数の呼び方に対応できたりして聞き取りの精度が上がるはずですが、今後CoderDojoが増えていくことを考えていくと毎回手動で設定、ビルド、公開審査といったメンテナンスすることになり、非常に面倒です。

そんな困りごとを途方にくれながら呟いていたところ、突如[kun432](https://twitter.com/kun432)さんから救いの手が！！
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">どうですかね？<br><br>つ <a href="https://t.co/jDdu2tI0F3">https://t.co/jDdu2tI0F3</a></p>&mdash; kun432 (@kun432) <a href="https://twitter.com/kun432/status/1146437380997431296?ref_src=twsrc%5Etfw">2019年7月3日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

要約すると、カスタムスロットを動的に追加することができる機能が追加されたということでした。
記事にはハードコーディングしている例が載っていますが、外部からデータを引っ張ってきて利用することも可能なはずです。
また制約として100件までという上限がありますが、これはVUIをうまく設計すれば100件以内に収めることも可能と見込んでいます。
（例えば、地域を先に答えてもらい、裏ではその地域のリストを動的に生成して、次にCoderDojo名を答えてもらうという方法がありそうです。これなら名称の重複も回避できるかも？）

これら踏まえた概要図はあとで追加します。。。



随時更新していきます！こうしたらいいんじゃない？みたいなことがあればコメントお願いします🙏
PrintObserver「オブザーバデザインパターン：説明と実装例」

最近、プロジェクトのJavaFXアプリケーションのために色々なターミナルタイプを扱うことを実験しています。

アプリケーションが何かを印刷しようとしているときはいつでも、システム端末、アプリケーション端末ビュー、および他の将来のビューの両方からの端末がStringを表示できるはずです。

これで、オブザーバーパターンがこの問題を解決するための最善の方法であると判断しました

#Observer Patternとは

####Observer=観察者

このパターンは、 観察者となるオブジェクトが、観察対象となるオブジェクトからの状態変化の通知を受けそれに体する処理を行うパターンです。

###このパターンを使うことの利点は以下の通りです：

1. オブジェクトとオブザーバの間のカップリングを説明します。

2. ブロードキャストタイプの通信をサポートします。

###使用法：

1. オブジェクトを緊密に結合した状態に保ちながら、オブジェクトの状態の変化を別のオブジェクトに反映させることが必要時。

2. 将来に最小限の変更で新しいオブザーバーを追加することが必要時。



###サンプルPrint Observer

![PrintObserverUML.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/293084/50d85a11-c293-7f77-37aa-8be1e1297800.png)


###役割
####PrintObserver (印刷観察) <<抽象クラス>>:
このクラスのすべての子ノードは有効な端末タイプを追加、削除、および「（Printableを実装しているクラス）」使用できます。

```PrintObserver.java
import java.util.ArrayList;

public abstract class PrintObserver {
    private final ArrayList<Printable> printerList = new ArrayList<>();

    public void notifyAllPrinters(String toPrint) {
        if(!toPrint.equals("")) {
            for(Printable printer : printerList) {
                System.out.println("\n");
                printer.print(toPrint);
            }
        } else {
            System.out.println("Quitting! Thank you!");
        }
    }
    
    public void addPrinter(Printable printer) {
        this.printerList.add(printer);
    }
    
    public void removePrinter(Printable printer) {
        this.printerList.remove(printer);
    }
}
```

####Printable (印刷可能) <<インタフェース>>:
このインタフェースを実装するすべてのクラスはオブザーバであり、何かが印刷されるのを待っています。

```Printable.java
public interface Printable {
    void print(String toPrint);
}
```

####PrintTerminalAとPiikun:
Printableを実装しているので、PrintObserverの子ノードがこのPrintableを追加してnotifyAllObserversという関数を呼び出す場合は、印刷されます。

**各Printableに対して、他のPrintableとは独立した独自の印刷実装が含まれています。**

```PrintTerminalA.java
public class PrintTerminalA implements Printable {
    @Override
    public void print(String toPrint) {
        System.out.println("This is terminal A");
        System.out.println("It seems that someone has printed this message: "+toPrint);
    }
}
```

```Piikun.java
public class Piikun implements Printable
{
    @Override
    public void print(String toPrint) {
        System.out.println("こんにちは！ピーくんです！");
        System.out.println("印刷するものを送って頂いてありがとうございます。メッセージはこちらです：");
        System.out.println(toPrint);
    }
    
}
```

####PrintSource <<メイン>>:
mainメソッドが含まれています。
サンプルPrintableをリストに追加して、ユーザー入力をすべてのPrintableクラスに送信します。

```PrintSource.java
import java.util.Scanner;

public class PrintSource extends PrintObserver {
    
    public PrintSource() {
        addPrinter(new PrintTerminalA());
        addPrinter(new Piikun());
        
        String toPrint = "~";
        while(!toPrint.equals("")) {
            System.out.print("\n\nEnter String to print: ");
            Scanner sc = new Scanner(System.in);
            toPrint = sc.nextLine();
            
            notifyAllPrinters(toPrint);
        }
    }
    
    public static void main(String[] args) {
        PrintSource printSource = new PrintSource();
    }
}
```

####githubでこのプロジェクトをダウンロード:
[Github:] https://github.com/CoralBeef-zz/PrintObserverExample
電車のLCD風Webアプリを作った

![FireShot Capture 081 - TrainLCD - trainlcd.tinykitten.me.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244632/7410ca39-c654-31ac-c7da-d452340af9c8.png)

作ったってだけで技術的に難しいことはあまりないので特に書くことないんですけど

[Elixirで作ったStationAPI](https://github.com/tinykitten/stationapi)を使ってまたクソWebアプリを作りました。
今度は電車のLCDをWebでリアルタイムに再現するアプリですね。誰が使うんだろこれ。
フロントはAngular使ってます。
開発時間は細々としたBugfixを除いて完成まで３時間程度でした。

百聞は一見に如かず。試してみてください。
[https://trainlcd.tinykitten.me](https://trainlcd.tinykitten.me)

めんどっちいので１つのコンポーネントに色々書いてる。Issue/PR多分待ってます。
[GitHub](https://github.com/TinyKitten/TrainLCD)

## React Native版作りました
[電車のLCDを再現したアプリ「TrainLCD」をリリース予定です](https://qiita.com/TinyKitten/items/898f1e20d50c91669e4c)