OmniAICreator/Qiita-1.07M huggingface dataset:
Railsでレコードを正規表現検索

PostgreSQLでしか使えませんが、ActiveRecordで正規表現検索をする必要があったので、スコープを自作しました。

```ruby
scope :with_regexp, ->(column, pattern) {
    pattern = pattern.source if pattern.class == Regexp
    where("#{table_name}.#{column} ~ ?", pattern) if columns_hash[column.to_s].type == :string
}
```
各種GitHub CDNでblobを配れるのか実験

メモ。ゲームをGitHubのリポジトリから直接起動できるようにしたいんだけど、リポジトリから直接大きなblobが配れるのか調べてみた。

**注:** そもそも `raw.githubusercontent.com` 自体もFastlyのCDNで提供されるので、この目的でGitHub CDNを使うメリットはrate limit/転送量制限を回避できる( **かも** ) 程度でしかない。

どちらかというと、多数のファイルを提供することによる API rate limit の方が心配になってきた。。

# 結果

90MiBのバイナリを置いたリポジトリ( https://github.com/okuoku/90mb-blob-test )のblobをダウンロードできるかどうかで調査。

**ダウンロードできた**

- https://raw.githack.com/
  - https://rawcdn.githack.com/okuoku/90mb-blob-test/4511a3708d33752a1cc82bcb3129899e5ac1312e/random.blob
- https://rawgit.org/ (RawGit.com **ではない** )
  - https://ghcdn.rawgit.org/okuoku/90mb-blob-test/4511a3708d33752a1cc82bcb3129899e5ac1312e/random.blob

**ダウンロードできなかった**

- https://www.jsdelivr.com/ (20MiB制限)
- https://statically.io/ (制限容量不明)

**ダウンロードURLが出て来なかった**

- https://gitcdn.xyz/
- https://combinatronics.com/

# GitHub CDNとは？

GitHubにpushされている内容は、ファイル単位で直接HTTPSダウンロードできる。例えば、 https://github.com/okuoku/yuni の特定バージョンの `README.md` であれば、

- https://raw.githubusercontent.com/okuoku/yuni/ee584da5a92a746f5aba732ee00c419369a49943/README.md

というURLで直接ダウンロードできる。ただ、この `raw.githubusercontent.com` からのダウンロードはcontent-typeが text 固定になってしまいWebサイトの一部として利用するには不便なので、 **GitHub上のリポジトリをファイル源として使用したCDNサービス** というのがいくつか存在する。

主にGitHub CDNはWeb界隈で使用されていて、JavaScriptパッケージをWebサイトに導入するためによく使用されるし、普通はそれ専用のサービスを使用することが多い。(unpkg.org とか)

メジャーなサイトとしては https://rawgit.com というサイトが昔存在したが、マルウェアの配布に使用されるなどしたので閉鎖されてしまった。

# 容量制限

無料のGitHubリポジトリにコミットできるblobの最大サイズは、今のところ 100MiB に制限されている。このサイズを超えたblobを含むリポジトリをpushしようとするとエラーが出てGit LFSの利用を促される。

実はこの100MiB の制限は Cloudflare も一緒で、Cloudflareを使用しているGithackやrawgit.orgのようなサイトは自然にこの100MiBが制約となると考えられる。

更に、CDNサイトによっては個別の制約を入れていることもある。jsDelivrは20MiB、Staticallyは具体的なサイズは不明だが少くとも90MiBはダウンロードできなかった。

- jsDelivr
  - `File size exceeded the configured limit of 20 MB.`
- Statically
  - ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67446/0375ed07-8733-1fe9-7f17-3e93ecd56995.png)

jsDelivr はファイルを自前のS3 bucketに保存しているらしく、そうだとしたら 20MiB の制限もかなり大盤振る舞いな気がしてしまう。

# かんそう

最近Dockerの無料プランではイメージの保存期間やpullサイズが制約されることになって話題になった( https://www.publickey1.jp/blog/20/docker_hub6.html - さらに6時間あたり100 pullまでのrate limitも追加された)けど、トラフィック代は無料サービスにおいて常に問題になっている印象がある。

GitHubは同じような無料Gitホスティングサイトでは **最もrate limitが厳しく** 、たとえば以前Qiitaでも話題になっていた `github-readme-stats` は、APIのrate limitを回避するために、パーソナルアクセストークン(主にコマンドラインツールでの利用を想定したOAuthトークン)を **複数発行してrate limitをN倍にする** というトンでもねぇ対策( https://github.com/anuraghazra/github-readme-stats/pull/58 )を実装している。( [Sランクって何だよ](https://github.com/anuraghazra/github-readme-stats/issues/330) ってissueが日本の教育制度の所為にされてるのは面白いな。。)

... まぁGitHubは世界一儲かっているソフトウェア会社が運営しているわけで、どちらかというと設備上の問題を気にしたものだとは思うけど。。
JavaScriptでスマホアプリを作る7つ方法


・ヮ・）あ、おはようございまーす 

JavaScript でスマートフォンアプリを作る方法を調べる機会があったのでまとめました！

細かいアーキテクチャに関しては割愛します:sob:


# ネイティブアプリ

## 1. [React Native](https://reactnative.dev/) <font color="#f2cd02">★</font>89.9k


React でネイティブアプリを開発できるフレームワーク
JavaScript でアプリ開発といえばこれですね！

[Expo](https://expo.io) という React Native での開発をサポートするプラットホームを使うと
ネイティブ機能を使うためのプラグインに制限がかかりますが
簡単に実機で確認したり[Appleの審査なし](https://qiita.com/keneo/items/625c7623d0dfb0cf0c6c#%E3%83%AA%E3%83%9D%E3%82%B8%E3%83%88%E3%83%AA)にアプリをアップデートできるらしいです

[Playground(expo)](https://snack.expo.io/)

## 2 [Vue Native](https://vue-native.io/) <font color="#f2cd02">★</font>7.4k


Vue記法で書ける React Native です

ビルドするときに .vue ファイルを React に変換するプラグインのようなもので
実質 React Native といっても過言ではないです

Vue Native と React Native のコードを混在させたり
React Native 用のライブラリを使うこともできます


## 3 [NativeScript](https://nativescript.org/) <font color="#f2cd02">★</font>19k

Angular、Vue、JavaScript(TypeScript) でネイティブアプリを開発できるフレームワークです

[Svelte Native](https://svelte-native.technology/) というプラグインで Svelte で開発することもできるみたいです

[Playground](https://play.nativescript.org/?template=play-vue)

## 4 [Weex](https://weex.apache.org/) <font color="#f2cd02">★</font>13.8k

Vue でネイティブアプリを開発できるフレームワークです

UIコンポーネントが若干HTMLライクなのが特徴
他のフレームワークと比べてプラグインが少ない印象

[Playground](http://dotwe.org/vue)



# WebViewアプリ

ハイブリッドアプリ(WebViewアプリ)と呼ばれるもので
WebView(簡易ブラウザのようなもの)を使い、アプリ内外に仕込ませたWEBページを表示するものです
HTML、CSS、JavaScript といったWEB開発と同じ技術で開発できます

Android と iOS で全く同じUIを作れるのも特徴です

## 5. [Cordova](https://cordova.apache.org/)

WebView ではカメラなどの JavaScript の API は使用できず専用のプラグインを使う必要があります
<font color="gray">しかし、ネイティブ機能へアクセスするためのプラグインが古くなっている印象があります</font>

[ionic](https://ionicframework.com) や [Monaca](https://ja.monaca.io/) 、[PhoneGap](https://phonegap.com/) といった開発プラットホームを使うことが一般的なようです


## 6. [Capacitor](https://capacitorjs.jp/)

Cordova よりスマートにネイティブのコードを実行できるらしいです
Cordova のプラグインに加え、自分で書いたネイティブのコードを簡単に使うこともできます

[ionic](https://ionicframework.com) という開発プラットホームを使うことが一般的なようです


# 7. [PWA](https://developer.mozilla.org/ja/docs/Web/Progressive_web_apps)

番外になりますが PWA も紹介しておきます

PWA はWebブラウザから直接インストールできるアプリケーションです
通常のWEB開発と同じで HTML、CSS、JavaScript で開発します

Qiitaのこのページを「ホーム画面」に追加してみると PWA を体験できます

ネイティブアプリと PWA の比較は [こちら](https://qiita.com/umamichi/items/0e2b4b1c578e7335ba20#pwa%E3%81%A8%E3%83%8D%E3%82%A4%E3%83%86%E3%82%A3%E3%83%96%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AE%E6%AF%94%E8%BC%83) が参考になります

# まとめ

ネイティブ特有のリッチなUIや速度を求めるならネイティブアプリ

 - React Native が圧倒的人気
 - Vueが好きな方は、何かあったら安心の React Native へすぐシフトできる Vue Native が良さそう
 - Angular、Svelteで開発したいなら NativeScript

HTML、CSS、JavaScript のWEB開発技術を使いたいなら WebViewアプリ or PWA

 - Webアプリケーションとスマホアプリ同時に作りたいなら PWA
 - PWAでは足りないネイティブ機能を使いたいなら WebViewアプリ
XcodeでのiOSアプリ内購入のテスト (StoreKit, In-app purchase テスト)

この記事では、Xcode 12 (beta) で提供されているツールを使用してアプリ内購入のテストを行うことについて説明します。

## ヘルパークラスとスタートプロジェクト

私は、あなたがアプリ内購入を処理するのに役立つヘルパークラスを作成しました。[そのファイルはここにあります。](https://github.com/mszmagic/StoreKitTesting/blob/master/StoreKitTesting/StorePurchaseHelper.swift)

[こちら Github で完了したプロジェクトを見ることができます。](https://github.com/mszmagic/StoreKitTesting)このプロジェクトを実行するには、Xcode 12（iOS 14用です）を入手する必要があります。

このスタータープロジェクトでは、ユーザーが購入できる以下のアイテムを用意致します：

| 商品ID | 商品名 | 商品タイプ |
----|----|---- 
| virtualCatFood | バーチャルキャットフード | 消耗品 (Consumable) |
| virtualCatHouse | バーチャルキャットハウス | 非消耗品 (Non-Consumable) |
| dailyVirtualCatFood | 毎日バーチャルキャットフードサブスクリプション | サブスクリプション (Auto-Renewable) |

## `StoreKit Configuration File`

先ず `command-N` をキーボードで入力し `StoreKit Configuration File` を作成してください

<img width="500" alt="image" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635330/67fd4c01-e921-dc46-bcd4-e2320fda7677.png">

## アプリ内課金により購入される商品の設定する

これで設定の下方にあるプラスアイコンをクリックして新しく購入する商品を追加できます。

<img width="500" alt="image" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635330/238bbf93-de00-d6af-33e8-31072c3ad0c6.png">

ここでは3種類のアイテムを追加できます：

| タイプ | 説明 |
----|----|---- 
| 消耗品 (Consumable) | アプリ内購入した消耗品は、一度使うとなくなり、再度購入することができます。バーチャルキャットフードといったものです。|
| 非消耗品 (Non-Consumable) | 非消耗品は一度購入すると期限が切れることはありません。バーチャルキャットハウスといったものです。 |
| 自動更新アイテム (Auto-Renewable) | ユーザーは、キャンセルするまで繰り返し請求されます。毎日与えるキャットフードの定期購入といったものです。|

新しい項目を追加した後は、詳細事項を入力します。項目のID `Product ID`、リファレンス名（リファレンスのみに使用）`Reference Name`、ローカライズ名 `Localizations` を入力する必要があります。

<img width="1000" alt="image" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635330/744cb0cd-e904-9b4d-95ca-d2c837fbb71f.png">

## テスト設定の構成

次に、作成したばかりの設定ファイルの内容をXcodeに知らせる必要があります。上部にあるアプリ名をクリックし、`Edit Scheme` をクリックします。

<img width="500" alt="image" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635330/d68e29e7-2035-d0f8-076f-b087abe7d11b.png">

`StoreKit Configuration` 設定の場所をみつけて、それを作成した構成ファイルの名前に設定します。

<img width="700" alt="image" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635330/cf413da5-2f33-cee8-9de4-a7e8bceb78f2.png">


## アプリ内購入のテスト

これで、シミュレーターまたはお使いのデバイスでアプリを実行できます。そして、購入を行うことができます。購入後にXcodeウィンドウにあるこのアイコンの場所を見つけて、それをクリックすると、すべての領収書が表示されます：

![screenshot10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635330/4fc97413-ad45-5940-7374-25c48693bf5e.png)

そのアイコンをクリックすると、今行ったすべての購入が表示されたウィンドウを確認することができます：

<img width="700" alt="image" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635330/9c9e4f50-aa4a-d7bd-1253-d5d33123e999.png">

---

:relaxed: [Twitter @MszPro](https://twitter.com/MszPro)

:sunny: [私の公開されているQiita記事のリストをカテゴリー別にご覧いただけます。](http://mszpro.com/ioskiji/)
<img width="150" src="https://cdn.mszmagic.com/static-web-content/AppClipImage_small.png">
WebAPI設計 〜スネークケースにするか、キャメルケースにするか〜

# まとめ

WebAPI はユーザが使いやすいように設計するため、基本的にキャメルケースを採用する。

# DBはスネークケースだからWebAPIもスネークケースでいい？

ここでは、スネークケースを採用したDBを例に考えてみます。
以下は、製品カテゴリ (product_categoreis) と 製品 (products) を表すER図です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/134221/52d33c5a-2e18-b725-a249-001a668c83bb.png)

もし単純なREST APIを採用する場合、URLは下記のようになります。

`GET /products` : 一覧取得
`GET /products/1` : 指定取得
`POST /products` : 新規作成
`PATCH /products/1` : 更新（一部更新）
`PUT /products/1` : 更新（上書き）
`DELETE /products/1` : 削除

ここでは`GET /products/1`を検証していきます。
その際、GETレスポンスはどうなるでしょうか？

DB構造をそのままレスポンスにした場合、下記のようになります。

```json:DB構造をそのまま採用したときのGETレスポンス
{
  "id": 1,
  "name": "真っ白Tシャツ",
  "product_category": {
    "id": 3,
    "name": "トップス"
  }
}
```

どうでしょうか？ 一見、シンプルで良い印象です。
それでは、検証してみたいと思います。

## 影響

影響を考える場合、どの観点から考えるかが重要になります。

### 観点： このAPIは誰が使うか？

**"このAPIは誰が使うか？" は設計する上で重要なので、最初に定義しておいたほうが良い**でしょう。
例えば、社内の開発者が使うか、一般ユーザが使うかで考慮する範囲が変わってきます。

社内の開発であれば、開発のしやすさなどが優先度として高くなりますが、
一般ユーザー（外部）の場合、加えてWebAPIを広く使ってもらうための視点も必要になります。

### 命名規則: スネークケース vs キャメルケース

**WebAPIを使うフロントエンド言語の命名規則はキャメルケースが一般的です。**（JavaScript、TypeScript、Swift、Kotlin 等）
しかし、WebAPIがスネークケースで提供されていると、命名規則が壊されてしまいます。

```js:JavaScriptにスネークケースが持ち込まれる
fetch('http://example.com/products/1')
  .then(response => response.json())
  .then(data => {
    console.log(data.id);
    console.log(data.name);

    // JavaScript にスネークケースが持ち込まれる
    console.log(data.product_category.name);
  });
```

なので理想で言えば、**WebAPIもキャメルケースにしたほうがフロントエンドは開発しやすいです。**
一般ユーザーを考慮するのであれば、キャメルケースを採用しましょう。

しかし、社内開発においては、バックエンドの開発言語の特性から、フロントエンドでスネークケースとキャメルケースの変換が必要になるかもしれません。

もし、フロントエンドで変換する必要が出てきた場合、TypeScriptを使用していればスネークケースをコンストラクタに閉じ込められそうです。

```ts:TypeScriptでのコンストラクタでの変換
class ProductCategory {
  id: number;
  name: string;

  constructor(id: number, name: string) {
    this.id = id;
    this.name = name;
  }
}

class Product {
  id: number;
  name: string;
  productCategory: ProductCategory;

  constructor(response: ApiResponse) {
    this.id = response.id;
    this.name = response.name;

    // コンストラクタで変換してしまえば...
    this.productCategory = new ProductCategory(
      response.product_category.id,
      response.product_category.name
    );
  }
}

const product = new Product(res);
console.log(product.productCategory.name);  // 使用するときはキャメルケース
```

# さいごに

WebAPIのベストプラクティスはありますが、その全てを思考停止で採用するとオーバースペックになりますね。
なので、自分のいる組織の特性や、WebAPIの将来的な公開範囲も考慮して設計していきたいと思います。
お手元のPHPファイルをphp-cs-fixerでチェックする

## コマンド

```shell-session
# 自動整形しない(差分表示のみ)
$ docker run -v $(pwd):/project ucanlab/php-cs-fixer fix --dry-run -v --diff --diff-format udiff

# 自動整形する
$ docker run -v $(pwd):/project ucanlab/php-cs-fixer fix -v --diff --diff-format udiff
```

## 参考

- [Laravel PHP-CS-Fixer のルール設定](https://qiita.com/ucan-lab/items/7d4180462347a42009d5)
- [https://hub.docker.com/r/ucanlab/php-cs-fixer](https://hub.docker.com/r/ucanlab/php-cs-fixer)
TF2.1でGPUが認識されているのにcudnnでエラー /  Could not create cudnn handle: CUDNN_STATUS_ALLOC_FAILED

## 環境
Windows10
python3.7.4
tensorflow2.1.0
cuda10.2
cudnn7.6.5


# はじめに
GPUは認識されている

```
from tensorflow.python.client import device_lib
device_lib.list_local_devices()

# 出力結果
[name: "/device:CPU:0"
device_type: "CPU"
memory_limit: 268435456
locality {
}
incarnation: 12939604985444578121
, name: "/device:GPU:0"
device_type: "GPU"
memory_limit: 4990763008
locality {
  bus_id: 1
  links {
  }
}
incarnation: 15893135237303968832
physical_device_desc: "device: 0, name: GeForce GTX 1660 SUPER, pci bus id: 0000:09:00.0, compute capability: 7.5"
]
```


線形層などでは大丈夫だったが、Conv2Dを含むコードを実行時にエラーが発生

```
～～～略～～～
2020-09-06 02:09:49.391503: I tensorflow/stream_executor/platform/default/dso_loader.cc:44] Successfully opened dynamic library cudnn64_7.dll
2020-09-06 02:09:50.835593: E tensorflow/stream_executor/cuda/cuda_dnn.cc:329] Could not create cudnn handle: CUDNN_STATUS_ALLOC_FAILED
2020-09-06 02:09:50.836159: E tensorflow/stream_executor/cuda/cuda_dnn.cc:329] Could not create cudnn handle: CUDNN_STATUS_ALLOC_FAILED
～～～略～～～
tensorflow.python.framework.errors_impl.UnknownError: Failed to get convolution algorithm. This is probably because cuDNN failed to initialize, so try looking to see if a warning log message was printed above. [Op:Conv2D]
```

どうやらメモリーの問題のようで、GPUメモリーの使用に制限をかけると上手くいくらしい

## 試したこと１
使用を抑えるコード

```
import tensorflow as tf
tf.config.gpu.set_per_process_memory_fraction(0.75)
tf.config.gpu.set_per_process_memory_growth(True)

→結果
AttributeError: module 'tensorflow_core._api.v2.config' has no attribute 'gpu'
```
バージョンが違うのか、無いと言われてしまった

## 試したこと２
他の方法もあったので試した
以下のコードを頭につける

```
import tensorflow as tf
gpus = tf.config.experimental.list_physical_devices('GPU')
if gpus:
  try:
    # Currently, memory growth needs to be the same across GPUs
    for gpu in gpus:
      tf.config.experimental.set_memory_growth(gpu, True)
    logical_gpus = tf.config.experimental.list_logical_devices('GPU')
    print(len(gpus), "Physical GPUs,", len(logical_gpus), "Logical GPUs")
  except RuntimeError as e:
    # Memory growth must be set before GPUs have been initialized
    print(e)
```
→上手くいった！！

### 参考
* [Could not create cudnn handle: CUDNN_STATUS_ALLOC_FAILED](https://forums.developer.nvidia.com/t/could-not-create-cudnn-handle-cudnn-status-alloc-failed/108261 "Could not create cudnn handle: CUDNN_STATUS_ALLOC_FAILED")
* [GPUを使用する](https://www.tensorflow.org/guide/gpu#limiting_gpu_memory_growth "GPUを使用する")
Emacs: init.el file を分割する / init-loader

# 目的
- init.el file を分割し, 個別 file へ分割する
    - init.el に多くの設定を記述すると, 肥大化するため




# 方法
- `init-loader` package を導入
- 上記を導入すると, 指定 dir の files を読み込む様になる
- 前提として package manager の設定が必要です
    - https://qiita.com/Aten_Ha_Ra/items/71a4a5d1cb352b802843



# 導入
## 分割 file の保存先 dir を作成
```
$ mkdir ~/.emacs.d/inits/
```


## init-loader を install
```emacs-lisp
M-x package-list-packages
```

- list から `init-loader` を `i` で選択
- `x` で install


## init-loader 有効化
- 以下を記述し, emacs を再起動

    ```shell
    $ emacs ~/.emacs.d/init.el
    ```
 
    ```
    (package-initialize)
    (init-loader-load)
    ```

- 以上で, `~/.emacs.d/inits/` 配下の file を読み込む様になる


## init.el から既存設定を移動
- `init.el` に記述されている既存設定を分割して, `~/.emacs.d/inits/` へ配置する
- 以下例

    ```
    - .emacs.d
        - init.el
        - inits
            - 0000_init.el
            - 0100_python.el
            - 0110_lisp.el
            - 0200_org.el
```




# 参考サイト
http://emacs.rubikitch.com/init-loader/
CocoaPodsでPodをインストールしても使えない

Swift勉強し始めたのですが、podのインストールでめちゃくちゃハマったのでその怒りをQiitaに昇華します。
新鮮な怒りをお届け。


# ぶち当たったエラー
PKHUDとやらをインストールしようとして

```
$ pod install 
```
をしてimportとすると、
![スクリーンショット 2020-09-05 21.08.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352602/061d7037-d021-4713-9376-66a69fe7961d.png)
とこんな感じで

```
No such module 'PKHUD'
```
というエラーが出た。


# 解決方法
`.codeproj`ではなく、`.xcworkspace`からビルドする。

stackoverflowを見ていたら、

> Make sure you opened the .xcworkspace file in Xcode and not just the .xcodeproj file.

というコメントを発見し、
どうやらプロジェクトを新規で作成したときに生成される`.xcodeproj`から設定をいじるのと、pop install時に生成される`.xcworkspace`から設定をいじるのは意味が違うということがわかった。`.xcodeproj`からではなく、`.xcworkspace`からビルドすると、![スクリーンショット 2020-09-06 1.52.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352602/648af7bd-07b4-7f74-599d-e7225b447b1e.png)

`import PKHUD`の部分でエラーが出ずにビルドが成功しました。

# 結局何が原因？
`.codeproj`は一つのプロジェクトを管理するファイル。対して`.xcworkspace`は複数のプロジェクトをまとめて管理するものらしい。

CocoaPodsでインストールしたPodsは一つのプロジェクトとして管理されているので、Podsを使用したい場合は自分が作ったプロジェクト＋Podsを管理しているプロジェクトの２つを一緒にビルドする必要がある。

なので、一つのプロジェクト(自分が作ったプロジェクト)を管理する`.codeproj`から開いてもPodsのインポートでNo module Errorが出た。(ビルドがコケた)

# 最後に
Podsを使った開発をするときは`.xcworkspace`からビルドしよう
ルールを守って楽しく開発！！！

※ (当記事はSwiftを始めて5日位の初心者です。間違いがあったら優しく指摘してね😘 )

# 参考文献
- [【Xcode】xcodeprojとxcworkspaceの違いについて本気出して考えてみた - Qiita](https://qiita.com/rockname/items/bbe73a001568f0f5e801)
- [Xcode - cocoapodsで.xcworkspace｜teratail](https://teratail.com/questions/79742)
- [ALWAYS_EMBED_SWIFT_STANDARD_LIBRARIES Inherited creates project validation issues](https://github.com/CocoaPods/CocoaPods/issues/5981)
- [ios - No such module ... in Xcode - Stack Overflow
](https://stackoverflow.com/questions/39970273/no-such-module-in-xcode)
- [「pod install時に黄色のワーニングが出るんだけど...」](https://qiita.com/yosshi4486/items/d54e60d493d780b6e0cf)
Elmを勉強してるときに出会ったエラー備忘録【随時更新予定】

## この記事で書くこと
表題の件

## Expecting an OBJECT with a field named `xxxxx`"

Json.Decode を使って、jsonをelmで扱える値に変換する処理を書いてる時に出会った。

参考コードは以下

```elm
(D.field "name" D.string)
```

fieldで期待してる値が存在しない場合。自分の場合は、typoでした。
WireSharkでEchonet-liteの通信を解析する方法

#Echonet Liteの機器を通信を解析するための記事です

##Echonet Liteとは？
Echonet Lite（以降ELと書きます。打つの地味にめんどいのでｗ）はHEMSの通信規格です。
本来は、エアコンなどの電機の使用量などを取得するために規定されたっぽいですが、近年のIoTの流れから機器の操作にも使用されてます。
基本的には、UDPのPort:3610を使用します。

##WireSharkとは？
色々な通信を解析出来るツールです。
ただ今回ELを解析しようとすると、単純にUDPの解析になるので、HEXのコードがズラズラ表示されて良くわかりません。
なので、この記事ではズラズラ表示されるHEXをわかりやすくするプラグインを導入します。

#STEP1 WireSharkをインストールする。
以下のリンクからDLしてインストールしましょ。
[>WireSharkのダウンロード](https://www.wireshark.org/download.html)

#STEP2 プラグイン的なものを追加する。
神奈川工科大学が公開しているECHONET Lite プロトコル解析器 for Wiresharkをダウンロードします。
以下のリンクからどーぞ
[>ECHONET Lite プロトコル解析器 for Wireshark](https://github.com/mzyy94/ECHONET-Lite-dissector)

DLしたら、以下の場所に置きましょう。

| OS | パス |
|:-:|:-:|
| Windows  | %AppData%/Wireshark/plugins/  |
| Linux/OS X/macOS  |  ~/.config/wireshark/plugins/ |

置き終わったら、WireSharkを再起動しましょ。

#STWP3 いざ解析！
WireSharkを起動しましょう。
僕のPCはWi−Fiで繋がっているので、Wi−Fiを選択します。
すると、すべての通信が表示されて、えらいこっちゃなのでフィルタを追加します。
上部のフィルタ欄に以下のコードを入力します。
（UDPのポート3610のみを表示するという意味です。つまり、ELをすべて表示する）

![スクリーンショット 2020-09-06 1.38.59.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256408/3c9bba06-9b55-332b-dac2-7591b2bd945f.jpeg)

STEP2が問題なければ、Echonet Liteのコードがわかりやすく表示されてると思います。
ちなみに、ウチにあるダイキンかパナのエアコン。

#最後に
１つ注意点！
この手法の場合ではスマホ（解析PC以外の端末）のELコマンドは解析できません。（なぜかは忘れましたｗ）
スマホのコードを解析したい場合は、以前に記事を少し書いているので以下リンクからどーぞ
[>MAC OS CatalinaでiPhoneの通信をキャプチャする方法](https://qiita.com/U_Sukeee/items/82348c82af0242c37d3d)
Emacs: package manager

# 目的
- emacs の package manager の使用方法を記述する
    - emacs ver24 では標準搭載らしい // 未確認
- 初期状態では使用可能 package が少ないため, 増強する


# 想定環境
- emacs ver24以上
- mac, linux 系


# package 増強 // repository 登録
- 以下を記述し, emacs を再起動する

```shell
$ emacs ~/.emacs.d/init.el
```

```emacs-lisp
(package-initialize)
(setq package-archives
      '(("gnu"   . "http://elpa.gnu.org/packages/")
        ("melpa" . "http://melpa.org/packages/")
        ("org"   . "http://orgmode.org/elpa/")))
```


# package list を開く

```shell
M-x package-list-packages

# M-x は, meta key と,  x key を同時に押下.
```

- 上記で package list が出力される
- install したい package 行へ移動へ, `i` でチェックを付与
- `x` で install を実行する
- install 後の使用方法, 有効化は個別の package の readme などを参照する必要あり


# 参考
- emacs の package 紹介サイト
    - http://emacs.rubikitch.com/
自動化しやすい入力フォーマット、自動化しにくい入力フォーマット

自動化の設計をする際に入力フォーマットや環境に気を付けましょう。なるべく自動化しやすい入力と環境を用意することが、後々管理と運用の省エネ化につながります。

# 入力フォーマットによる自動化の難易度

### 難易度低

* Excelブック
* CSVファイル
* テキストファイル
* 電子メール
* XML
* データベース

### 難易度中

* Word文書
* テキスト情報が埋め込まれたPDF

### 難易度高

* 紙からスキャンされたままのPDF
* 手書き文字が取り込まれたPDF
* PowerPointプレゼンテーション

# 自動化が難しくなる代表的なケース
以下のような環境が含まれそうな場合は、なるべく回避して入らないように設計しましょう。

* 複数のウィンドウに同じタイトルがついている場合、もしくはタイトルがない場合
* 不要なさまざまなウィンドが表示されている場合 (不必要なものは自動化実行前にすべて閉じて置き、自動化実行後は自動化によって開かれたすべてのウィンドウを閉じること。利用するウィンドウは起動後にすぐ最大化しておくのも手。)
* 実行デバイスによって解像度が異なる場合
* 実行デバイスによってOS、IEバージョン、Officeバージョン等のソフトウェアバージョンが異なる場合
* マルチモニター環境
* インタラクティブなFlashフォーム
* マシンパフォーマンスやデータ処理のウェイトによって遅延が出る場合、デバイスごとに異なる場合
* ドラッグ & ドロップの操作、マウスホイールの操作 (マウスポインタを動かしたりクリックさせる場合)
MACでmysqlをDLした後にユーザーを設定せずに出たエラーへの解決

mysql を mac なのでHome brewでDLしました。
https://qiita.com/hkusu/items/cda3e8461e7a46ecf25d
ユーザー名の設定をしていなく、mysql.infoschemaと出てしまいました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/693241/77b98451-e07d-8c6c-42bd-0b764d780141.png)

このmysql.infoschemaをpythonに変更しようと、

```
rename user mysql.infoschema@localhost to python@localhost;
```
でユーザー名変更しようとしたところ、

#
ERROR 1064 (42000): You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near '.infoschema@localhost to python@localhost' at line 1
#

とエラーが出ました。
この場合は、シンプルに新規にユーザー名の変更ではなく、設定を行うとうまく行きました。

ユーザー名の設定
https://qiita.com/YoshitakaOkada/items/f434bb0bc493ff9cd65b#%E3%83%A6%E3%83%BC%E3%82%B6%E4%BD%9C%E6%88%90
macでSSTP接続するために、Windowsにsquidを入れてproxyにした話

# なぜこんなことをしたのか

[発端は、この方と同じような状況](https://qiita.com/data_psyence/items/95844c43995fe6f8a535)です。
VPNが[softether](https://ja.softether.org/)で作成されたのが発端でした。

当初は[iSSTP](https://www.axot.org/2015/03/03/isstp-a-sstp-client-for-mac-osx/)が信頼できるアプリケーションなのかが判断つかなかったので、softetherのL2TP接続でmacから接続できないか、VPN作成側に依頼をしていました。

残念ながら接続はうまくいかず、結局iSSTPを導入して接続してみました。

- CONNECTを連打しないと繋がらない
- つながっても速度が異常に遅い
- macの調子が悪いので再起動したら、Appleマークが出て起動に時間がかかる

など不安なことが多く発生し、「家にWindowsがあるのだからこれをproxyにして接続できるはずだ」という思いつきから始まりました。


# Windowsをproxyサーバーにする

まずWindowsをどうproxyサーバーにすればいいかです。
導入の手間が最小のdockerイメージに、何かないかを探してみたところ、ちょうどよさそうな [sameersbn/docker-squid](https://github.com/sameersbn/docker-squid)がみつかりました。

以下の手順でdockerを導入し、Windowsをproxyサーバー化します。

1.Windowsに [docker for Windows](https://docs.docker.com/docker-for-windows/install/) のインストール
2.Windowsの power shell を開く
3.以下のコマンドでdockerイメージを起動

```
docker run --name squid -d --restart=always --publish 3128:3128  sameersbn/squid:3.5.27-2
```

これで、power shellから 

```
curl example.com -Proxy localhost:3128
```

でプロキシ経由でアクセスできるか試したのですが、エラーが発生。。。

以下のコマンドでsquidのログを確認。

```
docker exec -it squid tail -f /var/log/squid/access.log
```

すると


```
...(略)... 172.17.0.1 TCP_DENIED/403 ...(略)...
```

というエラーが出ていました。

このエラーをググって[この方の記事](https://jamzz.hatenablog.com/entry/20071014/1192325453)に辿り着き、squid.confに[http_access](http://www.squid-cache.org/Doc/config/http_access/)と[acl](http://www.squid-cache.org/Doc/config/acl/)の指定がないとダメそうだなとわかりました。

## dockerイメージのsquid.confの差し替え

まずコンテナ内の既存のconfをホストにコピーします。

```
docker cp squid:/etc/squid/squid.conf .
```

コピーしたsquid.confに、ログに出力されていたIPを通すように以下を追記します。

```
acl docker src 172.17.0.1
http_access allow docker
```

変更したconfでdockerを再起動します。
($pwdに関しては[この方の記事](https://qiita.com/nobuoka/items/50395c23642b4d459946)を参考)

```
# 既存に動作しているイメージを削除
docker rm -f squid

# pwdの指定
$pwd = "/$((pwd).Drive.Name.ToLowerInvariant())/$((pwd).Path.Replace('\', '/').Substring(3))"

# conf付きでイメージ起動
docker run --name squid -d --restart=always \
  --publish 3128:3128 \
  --volume ${pwd}/squid.conf:/etc/squid/squid.conf \
  sameersbn/squid:3.5.27-2
```

これで先ほどの以下のコマンドが成功するようになりました。

```
curl example.com -Proxy localhost:3128
```

# macのproxyにWindowsを指定する

ここの[公式の説明](https://support.apple.com/ja-jp/guide/mac-help/mchlp2591/mac
)を参考に、

`ネットワーク環境設定 > WiFi > 詳細 > プロキシ` の

- Webプロキシ（HTTP）
- 保護されたWebプロキシ（HTTPS）

それぞれに `{WindowsのIPアドレス}:3128` を指定することで、proxyの設定は完了です。

これでブラウザからはVPN経由で接続でき、アクセス元のIP制限がされているWebページがmacから閲覧できるようになりました。

## gitもproxy経由で接続する

本プロジェクトのgitも接続元IPが制限されていました。

上記のmacの設定では、gitはproxyを経由しないので、[この方の記事](https://qiita.com/ryotaro76/items/0e40ffb6173b1580e671)を参考に、以下の指定をします。

```
git config --global http.[https://{gitドメイン}/].proxy http://{WindowsのIPアドレス}:3128
```

これで `git clone` でソースを落としてくることができるようになりました。

# まとめ

同じように困っている方の助けになれば嬉しいです。

macからsoftetherにL2TPで接続する方法を教えてください 泣
Windows10でDRIVER_POWER_STATE_FAILUREに悩まされた話

タイトルどおり、数カ月間Windows10で__DRIVER_POWER_STATE_FAILURE__が発生する状況に悩まされていましたが、自分の環境では解決したので備忘録として残しておきます。

# 現象
バックアップストレージとしてSeagete製HDDを増設して以来、以下の現象が発生。

- OS起動時に特定のHDDを読み込まないことがある
    - OSは起動しているためOSが載っているHDDは必ず読み込まれるが、上記Seagete製HDDともうひとつのHDDがBIOSレベルで認識されない
    - 起動毎にというわけではなく、体感5回に1回くらいのペースで発生
- スリープ復帰後ブルースクリーンになることがある
    - 復帰後5分くらい経ったらいきなりブルースクリーン（__DRIVER_POWER_STATE_FAILURE__）になる
    - これも毎回と言うわけではなく、体感5回に1回のペースで発生



# 環境
OS：Windows 10 Pro 64bit（バージョン2004）
増設HDD：Seagete ST4000VN0001
マザボ：Foxconn H67A-S

# 解決方法

1. BIOSにて、SATAモードをIDEからAHCIに変更
    2. このとき、ただAHCIにするだけではまた別のブルースクリーン（INACCESSIBLE_HARD_DRIVEみたいな）になるので、[レジストリをいじる方法](https://pcrepair.w-pickup.com/post-3841/#toc5)で回避

# 原因

不明
Bootstrapを始めてみたい

# Bootstrapのダウンロード

どうもはじめまして。Webの勉強をしたいですが、周りに教えてくれる人がいませんのでここにやってまいりました。よろしくお願いします。
Bootstrapが何かもよくわかっていませんが、とりあえず始めてみたいと思います。

Bootstrapの公式サイトにダウンロードのページがありますのでそこからダウンロードします。
https://getbootstrap.com/docs/4.1/getting-started/download/

このようなファイル構成になっていました。

```
bootstrap-4
├── css
│   ├── bootstrap-grid.css
│   ├── bootstrap-grid.css.map
│   ├── bootstrap-grid.min.css
│   ├── bootstrap-grid.min.css.map
│   ├── bootstrap-reboot.css
│   ├── bootstrap-reboot.css.map
│   ├── bootstrap-reboot.min.css
│   ├── bootstrap-reboot.min.css.map
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   └── bootstrap.min.css.map
└── js
    ├── bootstrap.bundle.js
    ├── bootstrap.bundle.js.map
    ├── bootstrap.bundle.min.js
    ├── bootstrap.bundle.min.js.map
    ├── bootstrap.js
    ├── bootstrap.js.map
    ├── bootstrap.min.js
    └── bootstrap.min.js.map
```

BootstrapのJavaScriptにはjQueryが必要なのですが、スリム版でいいとのことなので、それを利用したいと思います。
jQueryの公式サイト( https://jquery.com/ )からjquery-3.5.1.slim.min.jsをダウンロードし、先ほどのツリーにあったフォルダjsに入れます。

```
bootstrap-4
├── css
│   ├── bootstrap-grid.css
│   ├── bootstrap-grid.css.map
│   ├── bootstrap-grid.min.css
│   ├── bootstrap-grid.min.css.map
│   ├── bootstrap-reboot.css
│   ├── bootstrap-reboot.css.map
│   ├── bootstrap-reboot.min.css
│   ├── bootstrap-reboot.min.css.map
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   └── bootstrap.min.css.map
└── js
    ├── bootstrap.bundle.js
    ├── bootstrap.bundle.js.map
    ├── bootstrap.bundle.min.js
    ├── bootstrap.bundle.min.js.map
    ├── bootstrap.js
    ├── bootstrap.js.map
    ├── bootstrap.min.js
    ├── bootstrap.min.js.map
    └── jquery-3.5.1.slim.min.js <---追加
```

テスト用のindex.htmlを用意します。

```html:index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <title>Home</title>
  </head>
  <body>
    <h1 class="text-success">h1 class="text-success"</h1>
  </body>
</html>
```

フォルダ構成は最小にしました。

```
.
├── css
│   └── bootstrap.min.css
└── index.html
```

index.htmlをブラウザで表示します。

![スクリーンショット 2020-09-06 0.47.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704305/feb2b6c2-d37c-e4b8-8b95-4deff2eed188.png)

これからも頑張ります。
Mac版 path_helper 問題を解決するシェルスクリプト（path_helper問題２）

## 仕様

MacOSにおけるPATH変数生成は2つの問題がある。（path_helper問題１） #shell - Qiita
https://qiita.com/shiro_usagi/items/8b220ca2323ea02cd804

前記事の問題(2)のみを解決する。
「問題(2) path_helper が生成するpathの優先順位の問題」
MacOS 10.6 〜10.9で動作すると思われる。
筆者が確認したのは10.6 と 10.9。
（2020-09-11、10.11でも動作を確認した。）

path_helperはPATHのみを出力(export)する。この前提が崩れては困る。

paths.dに何時の時点でファイルがインストールされるかユーザーには不明だ。
make install ログには出てくるかもしれないが出ても見落とす人が殆どだろう。
また「make install ログを毎回チェックしてpaths.d以下のファイルを気にする」そんな時間の余裕のあるエンジニアは一人もいないのでは？

この為、paths.d以下のファイルを読み込むことは今日の時点では必須であると筆者は推測する。
今後、Appleがpaths.d以下を使用禁止すれば話は別だが、この点は後日論じる用意がある。

以下はpaths.dにインストールされるファイルの仕様を筆者が推測した。
1.テキストファイルである。実行権限はインストーラーが決めるので読めないファイルは無視。
2.おそらく一行だけ
3.パスの前後に「:」は付かない
4.paths.dに複数のファイルが置かれる
5.おそらくzsh bash両方で使えるはず。

MANPATHは無視した。
/etcに記述するのと高速動作の為、中間ファイルには書き込みたくない。これ大事。

## /etc/zshenv にコード(A)を記述した。

```
# (c) shiro_usagi 2020
# Mac用 /etc/prpfile 。
# path.d からPATHを取得し先頭側に文字列連結する。
# 動作保証はしない。筆者はいっさい責任を取らない。
# 上記の条件で非商用であれば自由に使って下さい。

export PATH=/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin

export PATHS_D=/etc/paths.d
unset FIlES
unset line1

for FIlES in `find "$PATHS_D" -maxdepth 1 -type f `;
  do
  #echo $FIlES  # Debug
  while read line1
    do
    export PATH="$line1:$PATH"
    #echo $PATH # Debug
    #echo ""    # Debug
    done < $FIlES
  done
#echo $PATH
export PATH
```

## 結果

期待したPATH変数の結果となった。過去記事参照すること。

```
/etc $ pwd
/etc
/etc $ echo $PATH    
/usr/X11/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin
/etc $ zsh --version 
zsh 4.3.9 (i386-apple-darwin10.0)
```

## path_helperとシェルスクリプト(A)のメリット、デメリット

path_helperは高速動作だが、とんでもないバグがある。

(A)はシェルスクリプトである為 path_helper より実行速度が遅いかもしれない。
プロセス置換(置換でいいのか？プロセス通信？)を行うのでコード追加が難しい。
OSをアップデートや再インストールしたら(A)は消えるはず。

(b)path_helperをそのままにして見えないシステムバグや不安を多数抱える。
path_helperをそのままに継続するならば、/etc/profile、zshenvを利用するUNIX、Linuxのコマンドやライブラリーのソース全ての洗い出しが必須である。洗い出しだけでも一年以上かかるのではないか？動作検証は更に１，２年かかるだろう。
(c)シェルスクリプト(A)を記述してPATH変数だけでも解決することが出来る。結果、ユーザーから見えないか不明な動作を０に近づける。別の課題や問題が明らかになるはずである。

(b)と(c)どちらが良いか？

## 課題

MANPATHを諦めれば、コード(A)に課題は無いと筆者は考える。
Appleによるpath_helper修正か又はオープンソースかつＣ言語で新規実装が必須である。linuxと同等にすることが早急に必要だ。

10.11以降はどうすべきか？

Appleからmacbook Air 11インチ 2015年、8Gbyte、SSD512Ｇを私にプレゼントして欲しい思う。(笑)

## 過去記事

2020年08月18日に投稿
[\[Q&A\] apple純正のsh,zsh,bash用のダメダメなパスはどのファイルに記載ありますか？ - Qiita](https://qiita.com/shiro_usagi/questions/3e4fcb26e18e44762446)

[mac版/usr/libexec/path_helperがシステムを異常動作に導く #Mac - Qiita](https://qiita.com/shiro_usagi/items/a35f445e1c8d2293d123)

mac用
[zsh /etc/zshenv 用シェルスクリプト。テスト版 #ShellScript - Qiita](https://qiita.com/shiro_usagi/items/095e2871a5fe86e27a71)

[MacOSにおけるPATH変数生成は2つの問題がある。（path_helper問題１） #shell - Qiita](https://qiita.com/shiro_usagi/items/8b220ca2323ea02cd804)

他
[path_helper ($PATHを設定するコマンド) (macOS, /etc/paths.d, /etc/paths, shell間をまたいだパス設定) - いろいろ備忘録日記](https://devlights.hatenablog.com/entry/2017/12/12/160216)

参考までにLinuxの場合。
[Linux の /etc/profile /etc/bash.bashrc /etc/zsh/zshenv #Bash - Qiita](https://qiita.com/shiro_usagi/items/edfcb22e162e0e590024)

[debian-linuxではPath問題は起きない #Linux - Qiita](https://qiita.com/shiro_usagi/items/22306d8dc212cc5fbf05)
Rubyで値の取得をしたい

###### Rubyでの値の取得の一覧をメモ書き

## 値の取得
### ■ 値を一行で取得する
`value = gets`

ただこのままだと出力するときに改行されてしまうので chompメソッドを使う
#### ■ 改行コードを切り落として取得する
`value = gets.chomp`

取得した数値を計算をしたいときは to_i メソッドが便利
#### ■ 値を数値として取得する
`value = gets.to_i`
>to_i メソッドは文字列を数値に変えることができる
>逆に数値を文字列に変えたいときは `to_s` メソッドを使う

#### ■ 一行から複数要素を取得
`a b c`
このように値を1行でスペース区切りに入力されたときは split メソッド
`value = gets.split(" ")`
>split メソッドを使うことで値を配列の形で取得できる
value[0] や value[1] のように配列と同じ形で中身を確認できる
#

#### ■ 一行で取得した値を配列で取得

`value = gets.chars`
>`a b c`
このように値を1行でスペース区切りに入力されたときに
`value = ["a", " ", "b", " ", "c"]`
という配列として値を取得します

##### `value = gets.chomp.split(" ")`
このように記述することで改行コードも切り落とせるので便利
一般的にはこれの方が使うと思う

`value = gets.split(" ").map(&:to_i)`
値が全て数字の時はこのように記述すると配列の形で取得と数値に変換を同時にできる

### ■ 値を複数行で取得する
`value = readlines`
>redalinesは、複数行の文字列を1行ごとの配列として取得できる。

getsと違い、改行を入力してもキーボードからの入力は終了しない。


間違えている若しくはもっと簡単な方法があるときは教えて欲しいです！
ODrive 入門　ー初期設定から動作確認まで

##はじめに
この記事は[BLDC制御実験キットの製作](https://qiita.com/ohaginia218/items/4f130d26aeb32024afdb)の続きです。

前回は実験ボードを作ったのですが、電源が故障してしまったのと、2つのモータを使ってテストしたかったという理由で新しいボードに作り変えました。

電気系統に関しては特に変更点はありません。
今回、固定台としてセリアのすのこを使ったのですが、下に空間があるためナットでガタつくこともなく剛性もあるため非常に良かったです。

 <img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492804/261799fa-6f7e-2e9c-1b58-411913cf0bc7.jpeg">

 <img width="800" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492804/b436aa71-230f-be76-1cda-8d90fe4d9465.jpeg">

本記事ではODriveの初期設定から動作確認までを紹介します。

##環境構築
実行環境：Ubuntu18.04

```bash:
$ sudo apt update
$ sudo apu upgrade
#python3のインストール
$ sudo apt install python3 python3-pip 
$ sudo pip3 install odrive
#PATHの追加　(zshユーザは~/.zshrc)
$ echo "PATH=$PATH:~/.local/bin/" >> ~/.bashrc 
```

##初期設定

まずodrivetoolを起動させ、接続を確認しましょう。

```bash:接続確認
$ odrivetool

ODrive control utility v0.4.0
Please connect your ODrive.
Type help() for help.

Connected to ODrive 306A396A3235 as odrv0
#電圧確認コマンド
In [1]: odrv0.vbus_voltage
Out[1]: 11.97055721282959
```

以下の設定は使用するモータ、エンコーダによって変わります。
今回紹介する設定は、

>モータ：X8318S
>エンコーダ：AS5047P-TS_EK_AB

を使用しています。

```py:初期設定
#モータの極数
odrv0.axis0.motor.config.pole_pairs = 20 
#エンコーダの1回転あたりのカウント数
odrv0.axis0.encoder.config.cpr = 4000
#設定を保存
odrv0.save_configuration()
#再起動
odrv0.reboot()
```

##動作確認

```py:初期設定
#エンコーダのイニシャライズ
odrv0.axis0.requested_state = AXIS_STATE_FULL_CALIBRATION_SEQUENCE
#フィードバック制御の開始
odrv0.axis0.requested_state = AXIS_STATE_CLOSED_LOOP_CONTROL

#絶対位置を指定（エンコーダのカウント数）
odrv0.axis0.controller.pos_setpoint = 10000
odrv0.axis0.controller.pos_setpoint = 0

```


これで動作確認ができました。
次回の記事ではArduinoによる制御と、ROSとArduinoとODriveの通信を紹介します。

##参考文献
https://docs.odriverobotics.com/
githubのサブアカウント作成から、pushするまで

会社のgithubアカウントと個人のgithubアカウントを使っていたが、個人のサブアカウントが欲しくなり、pushするまでに少し悩んだので、メモとして残しておく。

### 手順
#### 1. 新しいemailアドレスでgithubアカウントを作成する
#### 2. ssh接続するためのkeyを生成する

~/.ssh へ移動し下記コマンドで鍵を生成

```terminal
$ ssh-keygen -t rsa -C {サブアカウントのemailアドレス} -f サブアカウントのkey名(任意)
``` 

#### 3. ~/.ssh/config に下記フォーマットで秘密鍵のパスを指定する

```terminal
Host github-sub #=> ここは好きな名前でOK
  HostName github.com
  IdentityFile ~/.ssh/sub_rsa
  User git
  Port 22
  TCPKeepAlive yes
  IdentitiesOnly yes
```

#### 4. 新しいgithubアカウントページに公開鍵を登録する

githubのweb画面のプルダウンからsettings => SSH and GPG keysを選択

そこに2でkeyを生成した時に作られる.pubの方のkey情報を貼り付け

#### 4. 接続確認
ターミナルで先ほど記述したHostの名前でssh接続する

```terminal
$ ssh -T <HOST>

Hi アカウント名! You've successfully authenticated, but GitHub does not provide shell access.
と返ってくると接続成功
```

#### 5. 新しいリポジトリを作成する

#### 6. ローカル環境に新しいプロジェクトを作成
1. `git init`
2. `git config --local user.name アカウント名`
3. `git config --local user.email メールアドレス`
4. 変更を加えて、`git add` & `git commit`
5. git remote をセットする時に、下記のようにoriginを設定する
 
```terminal
$ git remote set-url origin Host名:アカウント名/リポジトリ名.git  
```

最後にgit push --set-upstream origin master
をすると無事pushができる。
[git hub]gitignoreを使ってファイルを除外する

#概要
.gitignoreファイルを使い、指定のファイルをgit hubにアップしないようにする方法です。

rubyでbitcoinの自動売買システムを作成しています。ただ、bitflyerのAPI_KEYをgit hubにアップすると、セキュリティ上まずいです。色々調べると、.gitignoreファイルで対処可能であることが分かったので、記録しておこうと思います。

ruby on railsだと、環境変数でgit hubの管轄外にできることは知っていたのですが、今回は別の方法で。

#手順
手順はざっとこんな感じです。

1 .gitignoreファイルをアプリケーション直下に作成
2 git statusで状況確認
3 .gitignoreファイルに除外したいファイルを記述


###1.gitignoreファイルをアプリケーション直下に作成
アプリケーションの直下に「.gitignore」ファイルを作成します。
拡張子と勘違いされて、保存する前に警告が出ますが、「.gitignore.」で保存すればいいみたいです。それと合わせて、bitflyerのAPI_KEYを記述するkey.rbの作成します。

###2 git statusで状況確認
git statusはcommitされていないファイルを確認するみたいのものです。
（間違っていたらすみません笑)
すると、先ほど作成した2つのファイルが確認できます。これをこのままリポジトリにpushするとAPI_KEYが公開されてしますので、「key.rb」を隠したいと思います。

```
$ git status
```

```
Initial commit

Untracked files:
  (use "git add <file>..." to include in what will be committed)

        .gitignore
        key.rb

nothing added to commit but untracked files present (use "git add" to track)
```

###3 .gitignoreファイルに除外したいファイルを記述
API_KEYの書いているkey.rbファイルを.gitignoreに記述すれば、git hubからの除外に成功です。

```key.rb
API_KEY = "ここにkeyが書いています"
API_SECRET ="secret keyが書いています"
```

```.gitignore.
key.rb
```
クラウドの強みと弱みについて

#クラウドの強み
- クラウドの強みは`「ハードウェアを持たない」`ことである。つまり、サーバー本体を購入して難しい構成をあれこれ考える作業から解放されるということ。

- ソフトウェアすら所有しないということは、サーバーへのインストール作業も不要になる。サーバー監視も自社内設置のサーバーほど重要ではなくなるので、サーバー監視も大きく省力化されることになる。

#クラウドの弱み

- まず`「通信速度」`が欠点として挙げられる。一般的に社内LAN内はインターネットよりも通信速度が速い。速度が足りない場合も、ネットワーク機器の性能を上げて設定することができる。一方でクラウドへのアクセスはインターネットを経由するので、自身で対策を講じることができない。

- クラウド環境の`「バックアップ」`が容易ではない。社内のサーバーであれば、高速なネットワークを活用して日々のバックアップ取得できるが、インターネットの向こう側にあるクラウドコンピュータのデータを自社内でバックアップすることは容易ではない。
【Numpy】２つの一次元配列をおそらく最短で交互に合成する方法

```python
import numpy as np

a = [0, 1, 2, 3, 4] #一次元配列1
b = [5, 6, 7, 8, 9] #一次元配列2

c = np.c_[a, b].flat[:] #合成

print(c)
```

```python:out
[0 5 1 6 2 7 3 8 4 9] #出力はndarrayです
```
【備忘録】Emacsの設定・よく使うコマンドについて

#はじめに
3年ぶりにマシンを新調し、開発環境を整えようとEmacsをインストールしました。
・・・のはよかったのですが、ここ数年自宅ではシェルすら書かない生活を過ごしていたため設定・コマンドのほとんどが記憶の彼方に飛んでいっていることに気付きました。
色々調べて少しずつ思い出してきたので、それについて書いてみようと思います。

#Emacsの設定について
他の方の記事を参考に自分なりに使いやすい設定にしてみました。
自分としては特にTabがワンストロークで打てると快適かなと思います。

下記のリンク先の記事を参考にさせていただきました。
⇨https://qiita.com/yn01/items/b8d3dcb5be9078a6e27f

```
;;キーバインド設定
;;ctrl+hでバックスペース
(define-key global-map (kbd "\C-h") 'delete-backward-char)

;;ctrl+tでウィンドウ移動
(define-key global-map (kbd "\C-t") 'other-window)

;;ctrl+iでTABキー
(global-set-key "\C-i" '(lambda ()
  (interactive)
  (insert "\t")))

;;文字コード設定（デフォルトUTF-8）
(set-terminal-coding-system 'utf-8)
(set-keyboard-coding-system 'utf-8)
(set-buffer-file-coding-system 'utf-8)
(setq default-buffer-file-coding-system 'utf-8)
(set-default-coding-systems 'utf-8)
(prefer-coding-system 'utf-8)

;;スタートアップメッセージ非表示
(setq inhibit-startup-message t)

;;バックアップファイルなし
(setq make-backup-files nil)

;;オートセーブファイルなし
(setq auto-save-default nil)

;;改行コード表示
(setq eol-mnemonic-dos "(CRLF)")
(setq eol-mnemonic-mac "(CR)")
(setq eol-mnemonic-unix "(LF)")

;;メニューバー非表示
(menu-bar-mode -1)

;;ツールバー非表示
(tool-bar-mode -1)

;;タブにスペースを使用する
(setq-default tab-width 4 indent-tabs-mode nil)
```

#よく使うコマンドについて
今回新調したマシンがMacということもあって、ただでさえWindowsとショートカットが違うためヒイヒイいってましたが・・・。
Emacsを触るとなると、それはそれでまた全く違うのでますます混乱が生じました。

というわけでよく使うコマンドについても下記に残しておこうと思います。

|キー入力|動作|
|:------------|:----------|
|Ctrl-x Ctrl-s|ファイルの保存|
|Ctrl-x Ctrl-c|Emacsの終了|
|Ctrl-g|コマンド中断|
|Meta-W|コピー|
|Ctrl-x|カット|
|Ctrl-y|ペースト|
|Ctrl-u|やり直し|
|Ctrl-a|行頭に移動|
|Ctrl-e|行末に移動|
|Ctrl-f|次の文字に移動|
|Ctrl-b|前の文字に移動|
|Ctrl-n|次の行に移動|
|Ctrl-p|前の行に移動|
|Ctrl-x ]|次のページへ移動|
|Ctrl-x [|前のページへ移動|
|Meta-x shell|シェルの実行|
|Ctrl-x K|シェル終了|
|Ctrl-x 0|現在のウィンドウを閉じる|
|Ctrl-x 1|現在のウィンドウのみ残す|
|Ctrl-x 2|ウィンドウを縦に分割する|
|Ctrl-x 3|ウィンドウを横に分割する|

#最後に
環境構築に結構時間がかかったので、次の移行時はもう少しスムーズにしたいです。
Qiita始めたいと思います

こんにちは。

某、北陸で強い国立大学の現在B2機械工学科のYazakiです。最近プログラミングを始めました。

これから主にC++初学者がAtCoderなどのプロコンサイトを通じてどのようにして成長していくのかを

このアカウントで記事に残していけたらと思います。また、自分が解いた問題の解説もできる限り全て

まとめて記事にしたいと思っています。これは自分の復習用でもありますが、今現在、そのような解答

を全てわかりやすくまとめた記事はないと思うのでこれからプロコンを始める人の役に立ったらなと

思いました。頑張ります。
Web画面初心者の教育用メモ2[HTML基礎]


#HTMLの基本構造

```html
<!DOCTYPE html>
　<head>
　　  <meta charset="utf-8">
　　　<link rel="stylesheet" href="css/hogehoge.css">
　　　<style>
     </style>
　　　<title>HOGEHOGE</title>
　　　<script type="text/javascript" src="js/hoge.js"></script>
　　　<script type="text/javascript">
    </script>
　</head>
　<body>
　　<script src="js/hogehoge.js"></script>
　　<script>
    </script>
　</body>
</html>
```

HTMLは上のように\<html>の中に\<head>などが入りその中に…といったような入れ子になっている形です

それぞれを解説すると
●\<!DOCTYPE html>
　HTML5の文書であることを示しています。とりあえずおまじないと思っててください。
●\<html>
　\<head>と\<body>を入れます
●\<head>の中にはそのページの情報を入れます
●\<meta charset="">
　文字コードの指定をしています
●\<link>
　CSSの外部ファイルを読みこみます
●\<style>
　CSSの記述をします
●\<script ～ src="">
　JavaScriptの外部ファイルを読みこみます。
　（画面制御にかかわる部分やどうしても一番上に定義されていないといけないもののみ）
●\<script>
　JavaScriptを記述します。
　（画面制御にかかわる部分やどうしても一番上に定義されていないといけないもののみ）
●\<body>以下には実際に表示するものを入れます。
●\<script ～ src="">
　JavaScriptの外部ファイルを読みこみます。
　（\<header>で読み込んだもの以外の外部ファイル）
●\<script>
　JavaScriptを記述します。
　（\<header>で記述した以外のもの）


#HTMLの基礎知識
●タグ
　\<>で囲まれたものをタグといいます。ほとんどのタグは
　開始タグと呼ばれる<\*\*\*>で始まり、閉じタグと呼ばれる\</*\*\*>開始タグの\<の後ろに「/」を付けたもので終わります
●属性
　タグにはそのタグを補完するものとして属性というものが存在します
　例えば、上記の基本構造でいうと\<script>の後の「src」です
　scriptに「src=」を付け加えることで読み込むファイル名を記述できます
　属性について詳しくは後日

#覚えておいた方がいいタグ
●\<h1>,\<h2>,\<h3>
　見出しを付ける
●\<span>
　文字の表示
●\<img>
　画像の表示
●\<br>
　改行の表示
●\<a>
　リンクを作成し、他の画面に変移することが可能
●\<input>
　データの入力
●\<textarea>
　文字列の入力
●\<select>,\<option>
　データを選択
●\<button>
　ボタンを作成
●\<form>
　inputやselect、buttonタグと組み合わせて、他の画面にデータを渡す
●\<table>,\<th>,\<tr>,\<td>
　表の作成
●\<video>
　動画を流す
●\<div>
　とりあえずグループ化する。まとめる
●\<!-- --> 
　画面には表示したくないけど、何かのために書いておきたいものを囲む
　（通称コメントタグ）
npm installしたら「npm ERR! code ENOSELF」とか表示されたときの対処

[v10が公開 - ElectronでJS製デスクトップアプリを作ろう](https://news.mynavi.jp/article/zerojavascript-6/)に興味を持ち、Electronを使ってデスクトップアプリを作ってみたいと思いました。

Node.jsインストール後、npm installしたところ、こんなエラー文が出たときの対処方法。

```
PS C:\electron> npm install electron
npm ERR! code ENOSELF
npm ERR! Refusing to install package with name "electron" under a package
npm ERR! also called "electron". Did you name your project the same
npm ERR! as the dependency you're installing?
npm ERR!
npm ERR! For more information, see:
npm ERR!     <https://docs.npmjs.com/cli/install#limitations-of-npms-install-algorithm>

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\user\AppData\Roaming\npm-cache\_logs\2020-09-05T13_20_15_582Z-debug.log
```

# 原因
フォルダ名とパッケージ名が同じだとインストールができないとエラー分が主張していたからですね。
pakege.jsonでは`"name": "electron"`になっているので、ここを修正すれば解決できると考えられますね。

```
{
  "name": "electron", << "test"に修正した方がいい
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "start": "electron index.js"
  },
  "keywords": [],
  "dependencies": {
    "electron": "^10.1.1"
  }
}

```

# 解決策
- プロジェクト名を`test`へ修正。
- pakege.jsonには `"name": "test"`へ修正。

自分の場合、プロジェクト名を「electron」と適当に付けてしまったのでそれ以外の名前を付けないといけないので、プロジェクト名を「test」に変更。そのままインストールしてもpakege.jsonも変更されていなければできないので、そこも修正。

その結果、インストール成功しました！！

プロジェクト名を決めるときは無難に「test」つけた方がよかったですね(^^;

ではまた！

### 参考サイト
[npm install をしたら「npm ERR! code ENOSELF npm ERR! Refusing to install package with name "gulp" under a package」みたいに怒られたとき](https://obel.hatenablog.jp/entry/20171122/1511321417)
tableを使わず、縦並びの表組みを作る。ついでにレスポンシブにも対応させる

# どうも7noteです。レスポンシブ対応の縦並びテーブルの作り方

どうも7noteです。
この記事は以下へ引っ越しました。

https://naruweb.com/coding/ul-table/
rails tutorial　本番環境でアカウント有効化について

##はじめに
プログラミング初学者です。
rails tutorial 11章の本番環境でアカウント有効化できなかった際の自分の解決策を記載します。

##環境

Ubuntu 18.04 LTS
ruby 2.7.1
Rails 6.0.3

##問題点
rails tutorial 11章の本番環境でアカウント有効化ができない。
メールは届くのにリンクにアクセスできない。
届いたURLを見てみると、、、
https://XXXXXXXX-XXXXXXXXXX-XXXXX.herokuapp.com%3E.herokuapp.com/account_activations/LE2XcAU-C4szTXa7Yx4zWA/edit?email=(設定したメールアドレス).com
なぜかherokuapp.comが二回でている。。
%3Eとかでている。。。(%3EはURLエンコードでの > のこと)




##解決策
production.rbに設定した

~~~
host = '<https://XXXXXXXX-XXXXXXXXXX-XXXXX.herokuapp.com>.herokuapp.com'
~~~
の部分を

~~~
host = 'https://XXXXXXXX-XXXXXXXXXX-XXXXX.herokuapp.com'
~~~
とすることで解決しました。
【Rails MySQL】heroku上のDBをリセットする方法

#内容
Railsで作成したheroku上のアプリのDBをリセットしようと```heroku run rake db:reset```をしたらエラーが起きてリセットできませんでした。

#行った作業
ターミナルに表示されたエラー文ではこう書かれていました。

```
rake aborted!
ActiveRecord::ProtectedEnvironmentError: You are attempting to run a destructive action against your 'production' database.
If you are sure you want to continue, run the same command with the environment variable:
DISABLE_DATABASE_ENVIRONMENT_CHECK=1
```
翻訳すると、
```「本番」データベースに対して破壊的なアクションを実行しようとしています。
続行する場合は、環境変数を指定して同じコマンドを実行します。
DISABLE_DATABASE_ENVIRONMENT_CHECK = 1```
と書いてあるので

```
heroku run rake db:reset DISABLE_DATABASE_ENVIRONMENT_CHECK=1
```
というふうに記述し再度実行したら無事DBがリセットできました。
docker-compose downとstop

#前提
docker-compose down と docker-compose stop
の違いについて、ふわふわしていた為、書いていきます。

#本題

##down
downはupで作成したコンテナ・ネットワーク・ボリューム・イメージを削除する。
※デフォルトでは、コンテナとネットワークのみ削除。

```
オプション
　　--rmi hoge          イメージの削除。
                        hogeの部分は下記のいずれか。
                        'all': あらゆるサービスで使う全イメージを削除。
                        'local': imageフィールドにカスタム・タグのないイメージだけを削除。
   -v, --volumes       Compose ファイルの `volumes` セクションの名前付きボリューム削除。
                       また、コンテナがアタッチしたアノニマス・ボリュームも削除。
   --remove-orphans    Compose ファイルで定義していないサービス用のコンテナも削除。
```


##stop
stopは稼働中のコンテナを停止するが、削除はしない。
docker-compose start コマンドで、再起動。

```
オプション
-t, --timeout TIMEOUT      シャットダウンのタイムアウト秒数を指定する (デフォルトは10)。
```

#参照
https://docs.docker.com/compose/reference/down/
https://docs.docker.com/compose/reference/stop/
SwiftUIで電卓を作ろう！

 この電卓アプリで
- VStack : 垂直方向の制約
- HStack : 水平方向の制約
- Spacer() : 余白を作成
- @State :  Viewのデータを編集することでができる変数
- Text : UIKitだとUILabel
- Button : UIKitだとUIButton
- ForEach : View作成専門の繰り返し処理

上記7つの内容をアウトプットすることが目的で作成しました。

----

# 完成品
![calculator.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/595751/72f997fd-b670-1723-2720-a3b97a07336f.gif)



# 作成手順

## ボタンを押下したらテキストが変化する初歩的なプログラムから作成
```php:ContentView.swift
import SwiftUI

struct ContentView: View {
    @State var resultScreen = "Hello, World!" // Textの内容を保存する変数
    var body: some View {
        VStack {
            Text(resultScreen)
            Button(action: {
                self.resultScreen = "Button Tapped"
            }){
                Text("Button")
            }
        }

    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
```

このプログラムを動作させるとこうないります。  
![tapChangeText.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/595751/f675af11-d3f1-acba-1eee-ece752405087.gif)


## 複数のButtonを作成
Buttonを１つだけ宣言し、ForEachで合計16個に増やします。ForEachの使い方は、[こちらのサイト](https://d1v1b.com/swiftui/use_foreach_for_loop_data)がわかりやすくまとめているため、使い方がわからない人は是非参考にしてください。

```php:ContentView.swift  
// Buttonで使うTextを配列にまとめる
let inputItem = [["9","8","7","÷"],
                ["6","5","4","×"],
                ["3","2","1","-"],
                ["0","C","=","+"]]

ForEach((0...3), id: \.self) { row in
  HStack{
    ForEach((0...3), id: \.self){ col in
      Button(action: {
        // 条件分岐を加え、処理内容を変化させる
      }){
        Spacer()
        Text(self.inputItem[row][col])
        Spacer()
      }
    }
  }
  .padding(30)
}
```
このプログラムを実行したらこのようなUIになります。  

![finishUI.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/595751/260323aa-1afa-f467-004f-84ad5925aa2c.png)


あとは、actionないに条件分岐で処理内容を変更することにより電卓として動作します。  

お疲れ様でした。

# プログラムについて
今回作成したプログラムは、GitHub上で公開しています。ご自由に使ってください。
https://github.com/r0227n/SwiftUI/tree/master/calculatorApp

# 参考サイト
ForEachの使い方：https://d1v1b.com/swiftui/use_foreach_for_loop_data
Buttonの使い方：https://i-app-tec.com/swiftui/swiftui-button.html
df.plotのlegendのfontsizeを変える

#困ったこと
- df.pltの引数ではlegendの大きさが変えられない

#解決策
- plt.legendの後ろにいれる

````
df.plot()
plt.legend(fontsize = 20)
`````

- matplotlibに一回渡して，上書きしている（ぽい）
Unity初心者がFizzBuzz問題を作る

#はじめに

初めましてばきおと申します。


Unity&C#初心者の私がUnityでFizzBuzz問題を製作しましたので

アウトプットのため記事として投稿させてもらいます。


初投稿、プログラミング初心者なので至らない点があると思いますがご了承願います。

#今回作るもの

ゲームらしい演出などは私のプログラミング力じゃあ作れませんので

･public変数でInspectorウインドウのコンポーネントに入力ボックスを作る
･入力ボックスに好きな数字を入れゲームを実行する
･Consoleウインドウに入力した数字によってFizzなどと出力させる

このような内容を目指して作っていきます


#FizzBuzz問題とは?
[Wikipedia、FizzBuzz](https://ja.wikipedia.org/wiki/Fizz_Buzz)
何行以内でプログラミングを書く、のような縛りプレイをしなければ
私のようなプログラミング初心者でも製作できると思います･･･!

#製作過程
Unityバージョンは2018.4.8f1ですよろしくお願いします


まずはHierarchyウインドウのCreateより｢Create Empty｣をクリックして
空のゲームオブジェクトを作成していきます

そしてProjectウインドウのCreateよりC#スクリプトをクリックし
その後先ほど作った空のゲームオブジェクトにアタッチしておきます

今の状態がこちら
![Unity 2018.4.8f1 Personal - SampleScene.unity - FizzBuzz - PC, Mac & Linux Standalone_ _DX11_ 2020_09_05 21_11_29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/693083/7919081d-f36e-1d4a-a6f9-c4c5ff78c0dd.png)


こうして見返すと命名適当すぎますね

次回は分かりやすく命名しましょうそうしましょう･･･

そしてスクリプトを書いていきます

```
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class Test : MonoBehaviour { 
    public int Number;
    // Start is called before the first frame update
    void Start()
    {
        {
            if (Number % 3 == 0 && Number % 5 == 0)
            {
                Debug.Log("Fizz Buzz!");
            }
            else if (Number % 5 == 0)
            {
                Debug.Log("Buzz");
            }
            else if (Number % 3 == 0)
            {
                Debug.Log("Fizz");
            }
            else
            {
                Debug.Log("...");
            }




        }
    }
}
```

覚えたてのif else文で書いてみました。

そうして完成したのがこちら


![完成品１.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/693083/0fb20fc7-167a-23d1-939c-93095e7d1959.png)

好きな数字をInspectorウインドウのコンポーネント内にある入力ボックスへ入力

そしてゲームプレイをクリック!
![完成品２.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/693083/bdde576b-f52b-1721-e395-b43de9b73c04.png)

Consoleウインドウに結果が表示されました


ゲームとしてはめちゃくちゃクソゲーですがこれにて完成です!


#おわりに(製作した感想)
if文でなにかアウトプットしたいなと思い製作したのですが

いざ作ると覚えていたつもりでも忘れてることが多々あり結局3時間くらい製作してました･･･

初めての制作物だったので途中で挫折せず完成されることができてよかったです。
Puppeteerで日本語文字化けを防ぐRTA

たぶんこれが一番早いと思います

```Dockerfile
FROM buildkite/puppeteer:5.2.1

ENV LANG ja_JP.UTF-8

RUN apt-get update && \
    apt-get -y install locales fonts-ipafont fonts-ipaexfont && \
    echo "ja_JP UTF-8" > /etc/locale.gen && locale-gen
```

```shell
$ docker build . -t puppeteer_ja
```

# 実行

```javascript:qiita.js
const puppeteer = require('puppeteer');

(async () => {
    const url = 'https://qiita.com/';

    const browser = await puppeteer.launch({
        args: [
            '--no-sandbox',
            '--disable-setuid-sandbox'
        ]
    });
    const page = await browser.newPage();
    await page.goto(url);
    await page.screenshot({ path: 'image.jpg' })
    await browser.close();
})();
```

```shell
$ node qiita.js
```

- image.jpg

![image.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154711/c5b25817-e4f0-ffbe-58d8-09d699664459.jpeg)