OmniAICreator/Qiita-1.07M huggingface dataset:
マウスをのせた時にツールチップを表示する～jQuery無し～

#マウスをのせた時にツールチップを表示する～jQuery無し～

指定の要素にマウスをのせた時に、ツールチップを表示するJavaScriptを作成しました。

動作のイメージは、次の図のような感じです。「こちらが２個目です」の文字に

マウスを乗せると、赤い背景の「2個目です。」が表示されます。

※「2個目」と「です」で改行されています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1556817/4efe2e35-8576-e843-0cfd-471f13920ca1.png)

```js:javascript
const att_elem_id = 'msg_elem_id';
const att_msg = 'msg';
class tooltips {
    constructor(elm, msg) {
        elm.onmouseover = function () { showPopup(this, event); }
        elm.onmouseout = function () { hidePopup(this, event); }
        elm.setAttribute(att_elem_id, elm.id);
        elm.setAttribute(att_msg, msg);
    }
}
function showPopup(e, event) {
    let id = e.getAttribute(att_elem_id);
    let el = document.getElementById(id);
    if (el != null && id != null && id != '') {
        let msg = el.getAttribute(att_msg);
        if (msg != null && msg != '') {
            el = document.getElementById('tooltip');
            el.innerHTML = msg;
            el.style.display = 'inline-block';

            let x = event.clientX + window.scrollX + 8;
            let y = event.clientY + window.scrollY + 8;
            el.style.left = x + 'px';
            el.style.top = y + 'px';
        }
    }
    el = null;
}
function hidePopup(e) {
    let el = document.getElementById('tooltip');
    if (el != null) { el.style.display = 'none'; }
    el = null;
}
function windowScroll() { hidePopup(null); }

window.onload = function () {
  new tooltips(document.getElementById('inp01'), '1個目');
  new tooltips(document.getElementById('inp02'), '2個目<br>です。');
}
```


また、要素自体は次のように指定して下さい。

```html:html

<div id="tooltip" style="background-color: red; color: white; display: none; position: absolute; z-index: 88888; width: fit-content;"></div>

<a id="inp01">こちらが１個目です</a>

<br /><br /><br />

<a id="inp02">こちらが２個目です</a>
```

javascriptのonloadイベントの中で、

new tooltips([[要素名]] , [[表示するメッセージ]]);

と指定するだけです。

ツールチップの書式は、自分のお好みに合わせて下さい。

jQuery無しでも簡単にできますし、ベースを自分で作った方がカスタマイズが非常に楽です。
AIX Tips: PV名の変更、及びlspvコマンド実行時の表示順序の修正

備忘

# PV名の変更及びlspvコマンド出力の並び順制御
対象rootvg以外
rootvgの場合には、一旦別ディスクに退避させてから変更するなどの対応が必要。


## 名前変更

### 0. 元の状態

```
# lspv
hdisk0     00cc18a03b0f6c81          None             
hdisk1     00cc18a03b12e61f          None             
hdisk2     00cc1b80a6ce1572          vg00             
hdisk3     00cc18a03b12e670          None             
hdisk4     00fa00d6b552f41b          rootvg     active
```

ここで、vg00が構成されているpv名をhdisk2からhdisk3に変更したい


### 1. そのままだと重複してしまう為、現hdisk3デバイスを一旦削除


```
# rmdev -dl hdisk3 
hdisk3 deleted
```

### 2. 現hdisk2デバイスの名前をhdisk3に修正


```
# rendev -l hdisk2 -n hdisk3
hdisk3
```
注: どこかのバージョンから-nが必要となった。

### 3. 一旦削除した旧hdisk3デバイスを自動認識させる


```
# cfgmgr
```


### 4. 結果

```
# lspv
hdisk0     00cc18a03b0f6c81          None             
hdisk1     00cc18a03b12e61f          None             
hdisk3     00cc1b80a6ce1572          vg00             
hdisk2     00cc18a03b12e670          None             
hdisk4     00fa00d6b552f41b          rootvg     active
```

vg00のPV名はhdisk2からhdisk3になり、旧hdisk3は空いたもっとも若い番号であるhdisk2として再認識された。
ただ、lspvコマンドでの表示順はそのままなので、表示順も更新する。

## lspvコマンドにおける並び順変更

CuDv ODMに定義されている順序を変更することで、lspvコマンドの出力順を制御可能。

### 1. 現在のhdisk2, hdisk3に関する定義を一旦退避させる。

```
# odmget -q name=hdisk2 CuDv > ./CuDv.hdisk2.odm
# odmget -q name=hdisk3 CuDv > ./CuDv.hdisk3.odm
```

内容はテキスト。

### 2. CuDvからhdisk2, hdisk3の情報を除去する。

```
# cp -p $ODMDIR/CuDv /tmp/CuDv
# odmdelete -q name=hdisk2 -o CuDv
0518-307 odmdelete: 1 objects deleted.
# odmdelete -q name=hdisk3 -o CuDv
0518-307 odmdelete: 1 objects deleted.
```
念の為にCuDv ODMファイルをバックアップしてから作業

### 3. 退避させておいた情報を、hdisk2, hdisk3の順序で追加する。

```
# odmadd ./CuDv.hdisk2.odm
# odmadd ./CuDv.hdisk3.odm
```

### 4. 表示順も変更された。

```
# lspv
hdisk0     00cc18a03b0f6c81          None             
hdisk1     00cc18a03b12e61f          None             
hdisk2     00cc18a03b12e670          None             
hdisk3     00cc1b80a6ce1572          vg00             
hdisk4     00fa00d6b552f41b          rootvg     active
```
while文とdo-whileについて

# while文とdo-whileについて

## 繰り返し文とは
Javaには制御文として、**繰り返し文**があります。繰り返し文は**ループ**とも呼ばれます。

今回、繰り返し文の一つとして、while文を紹介します。

## while文
while文は、指定された条件が成立する間は、繰り返し処理を行います。
コードは以下のようです。

```
num = 0;
while(num < 5){
    System.out.print(num + " ");
    num++;
}

```

()内に条件式を記述し、条件式を満たしている間(true)は{}内の処理が実行されるという構文です。

()内の条件式が満たされない場合(false)の場合は処理が実行されないという内容になります。

## 無限ループ

while文の注意点として、処理が半永久的に実行されてしまう**無限ループ**には注意が必要です。

```
num = 0;
while(num < 5){
    System.out.print(num + " ");
}

```

num++が記述されないと条件式が常にtrueの状態になってしまうため、無限ループが発生しまうため
注意が必要です。

## do-while文

以下のコードを観てみましょう。

```
int num = 0;
do{
    System.out.print(num + " ");
    num++;
}while(num < 5)

```

while文は条件式を判定してから処理が実行されるのに対し、do-while文は処理が実行されてから条件式を判定するという
違いがあります。

まとめ
・javaには繰り返し構文としてwhile文とdo-while文が存在する。
・while文は条件式を判定してから処理を実行。
・do-while文は処理を実行してから条件式を判定。
EntityFramework エンティティのナビゲーションプロパティをすべてnull にするような拡張メソッド

エンティティのナビゲーションプロパティが何か設定されていると都合が悪い場面があるとか何とかで、いっそすべて null クリアしてしまえ、って感じの拡張。
ようこそExpression 沼へ。

```csharp
using System;
using System.Collections.Generic;
using System.Reflection;
using System.Linq;
using System.Linq.Expressions;

    class Program
    {

        static void Main(string[] args)
        {
            var buzz = new Buzz();
            buzz.ClearReference();

            Console.WriteLine("process end.");
            Console.ReadLine();
        }
    }

    static class ClearReferencesExtension
    {
        static Dictionary<Type, ClearReferenceActions> ClearEntityReferences = new Dictionary<Type, ClearReferenceActions>();

        public static void ClearReference<TEntity>(this TEntity entity)
        {
            if (!ClearEntityReferences.ContainsKey(typeof(TEntity)))
            {
                CreateClearReference<TEntity>();
            }
            var clearActions = ClearEntityReferences[typeof(TEntity)];
            foreach(var action in clearActions.Actions)
            {
                action.Invoke(entity);
            }
        }
        static void CreateClearReference<TEntity>()
        {
            var clear = new ClearReferenceActions();
            var entityType = typeof(TEntity);
            var parameter = Expression.Parameter(typeof(object), "$entity");

            var properties = typeof(Buzz).GetProperties(BindingFlags.Public | BindingFlags.Instance | BindingFlags.SetProperty);
            foreach (var property in properties)
            {
                if (property.PropertyType.IsValueType)
                {
                    continue;
                }
                if (property.PropertyType == typeof(string))
                {
                    continue;
                }
                var nullable = property.PropertyType.IsGenericType && property.PropertyType.GetGenericTypeDefinition() == typeof(Nullable<>);
                if (nullable)
                {
                    var baseType = Nullable.GetUnderlyingType(property.PropertyType);
                    if (baseType.IsValueType)
                    {
                        continue;
                    }
                    if (baseType == typeof(string))
                    {
                        continue;
                    }
                }
                var propertyAccess = Expression.Property(Expression.Convert(parameter, entityType), property);
                var assign = Expression.Assign(propertyAccess, Expression.Constant(null, property.PropertyType));
                Expression<Action<object>> lambda = Expression.Lambda<Action<object>>(assign, parameter);
                var action = lambda.Compile();
                clear.Actions.Add(action);
            }

            ClearEntityReferences.Add(entityType, clear);
        }
        class ClearReferenceActions
        {
            public List<Action<object>> Actions = new List<Action<object>>();

        }
    }

```

## 注意

EF がマッピングしそうなプロパティを除外しようとしているけど、 DateTimeOffset とかHieralkeyId とかその他ValueObject的なものは一切考慮してないのでそういうプロパティを使っている場合はクリア対象にするしないを注意深く設定する必要がある。
C++での2重配列（降順にデータを並べる方法）


C++の2重配列でnum2の大きい順番にデータを並び替える方法です

```C++
#include <iostream>
#include <vector>
#include <algorithm>
using namespace std;

int main() {
    int N;
    cin >> N;

    vector<vector<int>> data(N, vector<int>(2));
    for (int i = 0; i < N; i++) {
        int num1,num2;
        cin >> num1;
        cin >> num2;
        //num2の大きいほうから順に並べるのでnum2とnum1を入れ替えて配列に入れる。
        data[i][0] = num2;
        data[i][1] = num1;
    }
    
　　//num2の大きいほうから並び替える。
    sort(data.begin(), data.end(), greater<vector<int>>());

    for (int i = 0; i < N; i++) {
　　　　 //num1,num2の順番で出力する。
        cout << data[i][1] << " " << data[i][0] << endl;
    }
}
```

小さいほうから順番に並び替える場合は

```C++
sort(data.begin(), data.end(), greater<vector<int>>());
```
を

```C++
sort(data.begin(), data.end(), less<vector<int>>());
```

に変えます。
vue-chartjsでグラフ（チャート）を実装する

五芒星のグラフをVue.jsで作りたかったので、作り方をメモる。

##インストール

以下のnpm、yarn、CDNのいづれかを使ってvue-chartjsをインストールします。

npm 

```
npm install vue-chartjs chart.js --sa
```

yarn

```
yarn add vue-chartjs chart.js
```

CDN

```
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<script src="https://unpkg.com/vue-chartjs/dist/vue-chartjs.min.js"></script>
```

##　コードをかく

1　scriptタグの中に、コンポーネントの作成

```
Vue.component('radar-chart', {
    extends: VueChartJs.Radar,
    mounted () {
      this.renderChart({
        labels: ['ルックス', 'トーク力', '企画力', '頭脳・知識', '笑い・ユーモア', '人間性','カリスマ性','好感度'],
        datasets: [{
            label: '# of Votes',
            data: [1
            , 2, 3, 4, 5, 6, 7, 8],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 3
        }]
      }, {responsive: true, maintainAspectRatio: false})
    }
  })

```


2　html（またはtemplate）の中で、コンポーネントを利用


```
<radar-chart></radar-chart>
```

五芒星のグラフは
レーダーグラフというらしいです。
ほかにいろんなグラフ使えます。
公式サイトをのぞきたいとおもいます.

次は入力した値は反映されるグラフを作ります。

参考
https://www.kabanoki.net/4118/
PyCharmにNetmikoをインストールしようとするとエラーになる

# 概要
PyCharmにNetmikoをインストールしようとすると「error: can't find Rust compiler」エラーになる。
![netmiko_install_error_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698027/dea10643-9abf-bb8f-f93d-a76176fde56d.png)

# 対象
pipを21.xにアップグレードしてからnetmikoをインストールする。

# 手順
1. プロジェクトのSettingsを開き、Project Interpreterを選択してインストールされているパッケージを表示。表示されているパッケージからpipを選択してアップグレードアイコンを押下。<br/>![netmiko_install_error_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698027/353ad9bf-d7a2-09e5-de54-119dc74ffa4c.png)
1. pipがアップグレードされたことを確認。<br/>![netmiko_install_error_3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698027/9b4feeb7-6771-2137-611b-16069fa4fe45.png)
1. netmikoをインストール。無事にインストールされることを確認。<br/>![netmiko_install_error_4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698027/5b523e9b-60c5-2dc6-17cb-53e38a1ba174.png)

以上
即席コマンド｜クレジットカードの過去15ヶ月の支払先を確認した

## はじめに（コメント）

三井住友カード（クレジットカード）を切り替えるにあたって、過去の支払先を確認しようとおもい、使い捨てコマンドを書いたので記録。

- とくにネット系の支払い先（Amazon等）で、「あそういえば」というのを見つけたかった
- 目視確認ができる程度に、コマンドはさくっと書く（凝らない）


## 環境

ここで書いていることは、下記のバージョンで実施しました。

- terminal 2.11 (440)
- macOS BigSur 11.3.1

## やったこと

### CSVファイルのダウンロード

三井住友カードのページにログインして、明細CSVをDL。

過去15ヶ月の明細DLに対応している。

```bash
$ ls
202003.csv 202006.csv 202009.csv 202012.csv 202103.csv 
202004.csv 202007.csv 202010.csv 202101.csv 202104.csv
202005.csv 202008.csv 202011.csv 202102.csv 202105.csv
```

### コマンドライン

```bash
$ tail -n +2 202*.csv | iconv -f SJIS -t UTF8 > concat.csv
$ cat concat.csv | sort -k 2 -t ',' > sorted.csv
```

#### 1行目：文字コード変換

```bash
tail -n +2 20*.csv
```

`-n 2`だと「最後の2行」という指示だが、
`-n +2`とプラス記号をつけると、「2行目以降最後まで」の指示となる。

```bash
iconv -f SJIS -t UTF8
```

`-f`で入力元の文字コード指定、`-t`で出力先の文字コード指定

#### 2行目：ソート

```bash
sort -k 2 -t ','
```

`-k 2`で、2カラム目でソートせよという指示。
`t ','`で、区切り文字を指定。CSVファイルなので`,`を指定。

### こんなかんじ

ざっくりこんな感じで、過去15ヶ月の`支払先`がわかって助かった。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184128/8a6d8bc8-3e7b-b258-ca9c-2189676be2f9.png" width=45%>


## リソース

- [CSVをコマンドラインだけで扱えないものか](https://scrapbox.io/hannsolo-lab/CSVをコマンドラインだけで扱えないものか)

- [「CSV」をTerminalで眺めたい](https://news.mynavi.jp/article/osxhack-246/)

- [【 sort 】コマンド――テキストファイルを行単位で並べ替える](https://www.atmarkit.co.jp/ait/articles/1611/09/news020.html)
【Rails】検索機能の導入

# 目的
Railsで作成したアプリに検索機能を導入する。

# 開発環境
macOS: *Big Sur*
Rubyバージョン: *2.6.5*
Railsバージョン: *6.0.0*

# 前提
- アプリ`test-app`が作成されている。
[【Rails】簡単な投稿アプリの作成](https://qiita.com/oak1331/items/18a4f3a3386aab0fa354)

# 手順

1. [ルーティングの設定](#ルーティングの設定)
1. [検索フォームの表示](#検索フォームの表示)
1. [メソッドの定義](#メソッドの定義)
1. [アクションの定義](#アクションの定義)
1. [検索結果ページの作成](#検索結果ページの作成)

# ルーティングの設定

まず、ルーティングを設定していきます。

```ruby:config/routes.rb
Rails.application.routes.draw do
#省略
  resources :posts do
    collection do
      get 'search'
    end
  end
#省略
end
```

ルーティングの記載で、`collection`とありますが、これを使用すると生成されるルーティングのURLと実行されるコントローラーを任意にカスタムできます。

また他にも`member`があり、
`collection`はルーティングに:idがつかない、`member`は:idがつくという違いがあります。

今回の検索機能の場合は`:id`を指定して特定のページにいく必要がないため、`collection`を使用してルーティングを設定しました。

# 検索フォームの表示

まず、検索する際に必要なビューファイルを編集していきます!

```:app/views/posts/index.html.erb
<%= form_with url: search_posts_path, local: true, method: :get do |form| %>
  <%= form.text_field :keyword, placeholder: "投稿を検索する" %>
  <%= form.submit "検索" %>
<% end %>
```

これで検索に必要な検索窓と検索ボタンを作成できました!

# メソッドの定義

次に検索のメソッドを定義します。
テーブルとのやりとりに関するメソッドなので、モデルに置きます。
コントローラーはあくまでモデルの機能を利用し処理を呼ぶだけで、複雑な処理は組まないことを意識します！

```ruby:app/models/post.rb
class Post < ApplicationRecord
#省略
  def self.search(search)
    if search != ""
      Post.where('title LIKE(?)', "%#{search}%")
    else
      Post.includes(:user)
    end
  end
end
```

`if search != ""`で検索フォームに何か入力があった場合のみ検索結果が表示されるように条件を付けています。
もし入力がない場合はすべての投稿を表示させます。
また`Post.where('title LIKE(?)', "%#{search}%")`という記述で、`Postモデルのtitle`を検索するようにしています。

# アクションの定義

```ruby:app/controllers/posts_controller.rb
class PostsController < ApplicationController
#省略
  def search
    @posts = Post.search(params[:keyword])
  end
end
```
Postモデルに書いた`searchメソッド`を呼び出しています。
searchメソッドの引数に`params[:keyword]`と記述して、検索結果を渡しています。

このとき`privateメソッド`を指定している場合は、必要に応じて忘れずに記載しましょう！

# 検索結果ページの作成

検索結果を表示するビューファイルを作成します。

```:app/views/posts/search.html.erb
<% @posts.each do |post| %>
    <%= post.title %>
    <%= post.user.name %>
<% end %>
```

ここまで実装できたら実際に検索をしてみましょう！
検索結果が表示されれば成功です！

# 最後に

以上で検索機能の導入は完了です。
CSSを実装していないため、簡素な見た目となっています。
必要に応じて各自、実装してください。
では。
【Javascript】for of ー 学習ノート

# 初めに
ES6に導入されたfor of文について学習した内容のoutput用記事です。

※内容に間違いなどがある場合はご指摘をよろしくお願いします。
※こちらの記事はあくまでも個人で学習した内容のoutputとしての記事になります。

前回の関連記事：
https://qiita.com/redrabbit1104/items/40f3e2aa6cd4361150ee
https://qiita.com/redrabbit1104/items/374fc9cc0c0408f51e66

# for of文の練習
まず、bagsというobjectを用意します。

```javascript
"use strict";

const bags = {
  fruits: ["apple", "orange", "grape", "mango", "banana"],
  stationery: ["pencil", "eraser", "marker", "ruler", "ballpoint pen"],
};
```
スプレッド構文を使ってbagsのfruitsとstationeryプロパティーの中身をitemsに代入します。

```javascript
const items = [...bags.fruits, ...bags.stationery];
```
コンソールで中身を確認してみます。

```javascript
console.log(items);
```
配列という形でオブジェクトの中身を取得できました。
![スクリーンショット 2021-05-28 7.17.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/966135/c698ba13-b20f-dd10-7c99-635dabd35c45.png)
itemsをfor of文を使って、配列の中身を出力してみます。itemの型はstringになっていることが分かります。

```javascript
for (const item of items) {
  console.log(item, typeof item);
}
```
しかし、このままだとindexが表示されず、配列の中身だけ出力されてしまいます。この問題を解決するため、MDNの公式ドキュメントを参考にentriesメソッドを使ってみることに。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/entries

```javascript
for (const item of items.entries()) {
  console.log(item);
}
```
entriesメソッドを使うと、itemsのindexとvalueという形で出力されました。
![スクリーンショット 2021-05-28 7.30.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/966135/187e5465-4819-9d00-b488-148984565f99.png)

entriesメソッドについて調べてみたいと思ったので、items.entriesをコンソルーで表示してみました。

```javascript
console.log(items.entries());
```
配列の反復子(iterator)と出ました。
![スクリーンショット 2021-05-28 7.37.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/966135/abff2798-bb69-f14f-e8cf-1380b59cc7a4.png)

配列であることが分かったので、スプレッド構文を使って展開してみます。

```javascript
console.log([...items.entries()]);
```
items.entriesが一つの配列であり、その中にそれぞれのitemが配列の形でindexとvalueとして格納されていることが分かります。
![スクリーンショット 2021-05-28 7.45.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/966135/2ef4df74-64f4-0183-91f2-d6bac6c18d50.png)

このそれぞれの配列の0番目にはindexが入っていて、1番目にはvalueが格納されているので、次のように0番目のindexに+1を足し、1から始まるようにし、1番目の中身を出力してみました。

```javascript
for (const item of items.entries()) {
  console.log(`${item[0] + 1}: ${item[1]}`);
}
```
entriesの中身が1番から表示されました。
![スクリーンショット 2021-05-28 7.57.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/966135/734ae156-2f2a-b859-1a8c-ec11f4f94f9d.png)
このやり方は古いので、分割代入を使って書き替えてみました。menu.entries()が配列構造なので有効な方法です。

```javascript
for (const [i, element] of items.entries()) {
    console.log(`${i + 1}: ${element}`);
  }
```
結果は先と同じです。
![スクリーンショット 2021-05-28 7.57.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/966135/734ae156-2f2a-b859-1a8c-ec11f4f94f9d.png)

これでentries()メソッドを使うと中身は添字と値が入っている配列であることが分かりました。

# 参考サイト
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Iterators_and_Generators
NestJS+Sequelizeで一括upsertする方法

`bulkCreate`でできます！

bulkCreateは一括insert用なのですが、`updateOnDuplicate`を指定することでPrimaryKeyが重複した場合に、指定したカラムのみを更新することが可能です。

[bulkCreate - sequelize](https://sequelize.org/master/class/lib/model.js~Model.html#static-method-bulkCreate)

```
this.repo.bulkCreate(records, {
    updateOnDuplicate: [
        name,
        updated_by,
    ],
});
```
elm327の研究 その3

# 概要

elm327を調べてみた。

# 写真

上から、usb,bluetooth,wifi

![DSCN0536.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/37f24f7e-958f-81c8-faff-110dcda2acba.jpeg)

# usb

driver: cp210x

# bluetooth

name: OBDII
pass: 1234

# wifi

ssid: WiFi OBD
ip: 192.168.0.10
port: 35000

以上。
Superset on DockerからAthenaに接続する方法

# 概要
業務でサポートしているチームがSupersetを試してみる（データソースは、Athenaにある）ことになったが、接続方法の情報があまりなかったので、備忘録の意味でまとめる。

Superset自体の説明は必要に応じて別途記載するかも。

## 参考）公式のSuperset Docker・・・ただし、これを直接は使わない

URL
https://hub.docker.com/r/apache/superset

## インストール手順

### 公式のGitHubから、一式Cloneする。
URL
https://github.com/apache/superset

```bash
$ git clone https://github.com/apache/superset.git
```

### AthenaのドライバーをDockerBuild時にインストールするように仕込む

参考URL:
https://superset.apache.org/docs/databases/dockeradddrivers

↑この記事は、MySQL Driverを例にしているが、これをAthenaに置き換えれば良い。（PyAthenaを使う）

```bash
# git clone したルートディレクトリで行う
$ touch ./docker/requirements-local.txt
$ echo "PyAthena" >> ./docker/requirements-local.txt
$ sudo docker-compose -f docker-compose-non-dev.yml up
```

### Databaseの接続設定

SupersetのGUIで行う（sample_dwhというDatabaseにつなぐ前提で記載）

* メニューのDaba＞Databasesで、Database一覧画面に遷移する

* 右上の「+ DATABASE」 というボタンを押す
* Connect a databaseというダイアログ画面が出るので、以下の入力をする。
  * DISPLAY NAME (任意の分かりやすい名前で良い)
  * SQLALCHEMY URLは、下記の書式で入れる

```
awsathena+rest://＜AWSのアクセスキー＞:＜シークレットキー＞@athena.ap-northeast-1.amazonaws.com/sample_dwh?s3_staging_dir=s3%3A//sample-dwh-sandbox-123456789012-ap-northeast-1/
```

書式の説明サイトは、ここ（分かりづらいけど）<br/>
https://superset.apache.org/docs/databases/athena
初恋。。。

プログラミングに一目惚れ初恋。
あの黒い画面で文字をカタカタ打つのがなんと言ってもカッコいい。
だが、自分とはかけ離れている別世界に思い覗き見しかできなかった。

日本とミャンマーを行き来しているビジネスマンだが、ミャンマークーデターという災厄で最高の出来事に出会い、ビジネスは全て休眠、仕方なく電気とネット遮断の中プログラミングに挑戦した。人間が作ってきた技術なんだから人間である俺にも出来ないわけがないと。。いう勢いで独学開始。左も右もわからない世界に足を入れてみたら、どんどん向こうの世界に引きずられて、やればできるじゃないかという気分。（笑）

ミャンマー人である俺にタダでさえ英語と日本語で難しいのにまたさらに向こうの世界の専門用語が出まくり。頭中のメモリ容量のせいか？赤いランプが点滅警告。覚えている側から忘れる。プログラミングを英語と日本語を介して独学するのも悪くはないじゃないか？こういう向こうの世界の業界のエンジニアの人たちと日本語で交流し、俺のつまらないブログアウトプットも日本語力向上に繋がるじゃないか？一石二鳥のところかおまけがついてきそう。

しかし、ある程度独学で勢いよく進めていくところ、初めての挫折！。。。ちょっと待った。プログラミング俺とは向いてないかも。これは天才の人たちだけが出来る世界かも。でも世の天才の人っていないだろう！誰しもが同じ時間とチャンスを供給され、ある分野で10,000時間を投入するば誰しも天才になれる。必要なのは努力のキープのみ。お前頭ではわかってるじゃないかと。実際独学してるそばからだんだんつまらなくなる。

ある分野でプロになるためにはそのプロ達に真似ればいいんじゃないか？じゃ、マネまくろうと。とにかく最新のM1搭載のマックをゲット。マックでプログラミングを極めようとしている俺が、気づいたらマックでYouTubeをみているのみ。だってまだこれしかできないだもの。とにかくプロというプログラマー達が交流するサイトにアクセス訪問、中身覗くと宇宙言語らしくなんに言ってるかわからない。今分からなくてもだんだんわかるようになるだろうと。

Javascript　までなんとかたどり着いたらなんか自分と関係ある世界にも見えてきた。ちょっと楽しくワクワクしてきた。いざ、自分で何にか作ろうとするとまた、挫折！ある日せお丸氏のYouTubeに出会い、見れば見るほど専門知識が広がり、シナプス小胞がまたつながる。ある動画で彼は本一冊でプログラミング独学をし、ここまできたと。これは俺にとって最高のヒント。俺でもやれる。だって今いろんな学習チャンネルが豊富じゃないか？

必要なのは確実に毎日少しずつ前進すること。YouTubeは俺の大学！
plunkerでcssフレームワーク その13

#概要

plunkerでcssフレームワークやってみた。
tachyons使ってみた。

#サンプルコード

```
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/tachyons/4.11.1/tachyons.min.css'>
```

#成果物

https://embed.plnkr.co/plunk/S6BBYVeD0GVTqYNa

以上。
駆け出しエンジニアのAWS クラウドプラクティショナー学習記録1日目

## そもそもクラウドとは？

コンピューターやデータベース、ストレージなどを使いたいときに使いたいぶんだけ使えるサービス

### 　オンプレミス

クラウドが導入される前のコンピュター環境の手法。
サーバーやネットワークなどの設備をハードで用意する(=固定費)

### オンプレミスの欠点

ハードを用意する必要があるので交換が効きにくい
→予想されるトラフィック量などに応じて事前にキャパシティを予測してから設備投資しないといけない。
→予想がはずれれば余剰リソースや過剰なトラフィックによるキャパシティアウトが起こる

### クラウドのメリット

使いたいときに使いたい分だけ使えるので

- キャパシティの予測が不要
- スタートアップ企業からすれば小さく始められ理
- サービスの状況に応じて柔軟にリソースを調整できる→コスパがいい
- モノを設置しなくてもいいので世界中に一瞬でデプロイ可能
- オンプレミスの際に発生していた電気代、ネットワーク代などを一括で管理できる

## サーバーアーキテクチャの設計原理

### Design for Failure…障害が起こる前提で設計する

いわゆるリスク分散

**単一障害点** をなくす→一つのデータセンター、インスタンスに依存しない

### コンポーネントの分離…各アプリケーションの機能を分離する

機能とは…webサーバー、アプリサーバ、DBなど

### SQS

1つのリクエストに対して、キューと呼ばれるところにデータを保持させることで1箇所で処理が止まっても別の箇所で処理が動くようにする

### マイクロサービスアーキテクチャ

システムを複数の小規模なサービスの集合体として構成すること

## 弾力性

インフラリソースを柔軟にスケールアウト/スケールインするための仕組み

3種類紹介されてた

- 巡回…定期的に行う
- イベントベース…ビジネス上のイベント・キャンペーンに応じて行う。たとえば夜の時間帯だけ利用トラフィックが増加することが予想されるオンラインゲームなど
- オンデマンド…事前に決めた監視項目に従って自動で行う

## 並列化

サーバー全体でリクエストを分散させること。ロードバランサーが担っている

## サーバーの理想的な配置

- 静的コンテンツ…エンドユーザーの近くに
- 動的コンテンツ…コンピューターの近くに
Chrome拡張などで文書校正のtextlintをもっと簡単に使う - textlint editor

https://efcl.info/2021/05/27/textlint-12-editor/

https://gigazine.net/news/20210625-textlint-12/


textlintの Chrome拡張 を入れてみましたという話 (ベータリリース)。


## 手順

https://github.com/textlint/editor

にて、以下に従う。

> Install Web Extensions
> - Chrome: https://chrome.google.com/webstore/detail/textlint-editor/gfhlfpnpjokocfohicmfbgjneiipfeil
> - Firefox: https://addons.mozilla.org/ja/firefox/addon/textlint-editor/

Chrome/Firefox の別に合わせて、拡張をインストール。

> Install your favorites textlint worker scripts
> Example textlint worker scripts:
> - https://azu.github.io/textlintrc/
> - https://textlint-ja.github.io/textlint-rule-preset-japanese/
> - https://textlint-ja.github.io/textlint-rule-preset-ja-technical-writing/

で、ルールをセットしたところ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93824/9c17c9f3-f820-69f0-b4fb-bb7297344f4a.png)


## 動作

`執筆を行う` は `執筆する` に直すなどの冗長表現への指摘。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93824/032ec6c4-3959-c882-ef4f-a6706110b7d6.png)

である調・ですます調の混在への指摘。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93824/eba6cd43-978c-9d3a-ac95-b9b5027d0441.png)

等。やはり開発者はもとより開発者以外も含めいかに簡単に使ってもらえるかが大事だなあと実感する。



## その他

https://gecko655.hatenablog.com/entry/proofreading-tool

https://qiita.com/takasp/items/22f7f72b691fda30aea2

https://qiita.com/e99h2121/items/9024b2dbe5741b44f137


基本的なお話含め、textlintについて参考になればさいわいです。
2021年以降の日本のレンタルサーバに求めること

# １．日本にはNode.jsが動くレンタルサーバがない

　これほどJavascript、Typescriptが注目をあつめるWebのビジネスのなかでNode.jsが動くレンタルサーバがないというのは驚きです。

https://tomato-code.com/4128/

　Verel、Netlifyなどはもとより、海外ではNode.jsが稼働するホスティングサービスは結構あります。

https://www.websitebuilderexpert.com/web-hosting/node-js/

 別の記事でも今後の予想を書きましたが、フロントのみならずバックエンドもNode.jsが使われるケースは想定されます。

https://qiita.com/SFITB/items/e212baf0b243b84a1918

 おおよそレンタルサーバで作るシステムは比較的小さめでパフォーマンスもそこまで必要ではなく、Node.jsで作っても十分なものが多いと思います。

 たとえば、レンタルサーバで最も使われているのはPHPだと思いますが、速度やメモリの消費とか考えてもそれほど劣るものではなく、比較するポイントによってはNode.jsが優れていることさえあります。

https://medium.com/@yuiltripathee/node-js-vs-php-comparison-get-the-job-done-purpose-d3d63351ea8a


　共有ということで、負荷のかかることがあるから導入されていないのかもしれませんが、海外でサービスを行っているので、やはり日本でもNode.jsを導入することはできるのではないかと思います。

# ２．場所だけ提供して設置はユーザー任せの時代ではない

　Vercelが人気ですが、その理由として、React+Next.jsのデプロイの手軽さがあります。
　サーバレスが流行っていますが、サーバレスというのは構築や運用の手間を省いてサーバを利用することです。

　現在、日本のレンタルサーバは、Vercelようなものは、強いて言えばWordpressなどいくつかのアプリケーションのインストールができるぐらいですが、原則は、ユーザーがいろいろとアプリの設置をしないといけません。

　サーバレスが流行っている今、ただサーバスペースを提供するだけにとどまらず、いろいろなアプリをインストール、または、デプロイして楽に公開・運用ができる仕組みがあればいいのにと思います。


# ３．個人開発は無料でできるサービスが沢山ある

　昔は、個人で開発するために安いレンタルサーバを契約するというのもありましたが、最近は、Herokuのように無料で使える環境があります。
　またサーバレスサービスについても、個人ユースなら無料というのがあります。

https://jp.heroku.com/free


　少なくともこうしたニーズはレンタルサーバからは減っていくと思います。

# ４．レンタルサーバのメリットはあれどサービス運用を考えると楽ではない

　レンタルサーバのメリットとしては以下が思いつきます。

- メールサーバの設置の手間が省ける
- 最低限のセキュリティ対策
- 定額制料金

　おそらくレンタルサーバで運用する目的の大半が、Wordpressの利用かと思いますが、それもセキュリティ対策は各自でしないといけないことが多く、中途半端な対応だと思っています。

　最近は、上記だけでは開発や運用のメリットとしては弱く、Vercelなど海外のサーバレスサービスかホスティングを使うか、VPS、EC2のようなクラウドコンピューティングを使うという選択肢になると思います。

　ただ、VPS、EC2なども構築、メンテが大変なので、サーバレスかSaaSが今後は採用が増えると思います。


# ５．今後はサーバレス、SaaSの利用が一般化。レンタルサーバも対応してほしい

　中小企業やフリーランスとしてはレンタルサーバを使うことがこれまではとても多かったと思います。
　ただ新興テック企業を始め徐々に、レンタルサーバではなく、EC2のようなクラウドインフラ、サーバレス、SaaSへとユーザーはシフトしてきています。
　
　それはその方がデプロイや管理が楽だからだと思います。
　
　もう一昔前のように、「オンライン上のスペースを貸すだけ」という時代は終わったのだと思います。

　Webサイトの運用などもGithubPages、Netlify、CloudFlarePagesをつかった方がGithubとの連携、デプロイのしやすさから便利だったりします。

https://kazyblog.com/how-to-publish-static-site-by-github-pages


　また、WixなどのGUIでサイトが作れて、SEOやメル配信、クレジットカード決済がついたものもあります。

https://hitori-koho.com/wix-seo

　
　サーバレス、SaaSが普及してくると、プログラムは自分でつくって載せる場所を貸すだけのレンタルサーバを利用するメリットはすごく低くなってきているように思います。

　月額費用がすごく安いことは一つメリットかもしれませんが、初回の設置、アップデートなど運用などを考えると果たして便利なのだろうかという気もします。

　レンタルサーバはなくなることはないと思いますが、今の仕様だと使い続けるのは結構厳しいのではないかと思ったりします。せいぜい、メールサーバを使うぐらいがいいのかなと思ったりもします。

　時代にあわせて便利になれば引き続き使いたいなとも思います。

　大手サーバ会社の売上が来年、再来年とどう推移するのかすごく興味をもってみています。


#補足：PHPを使うことが減ってきた

　個人的に会社のWebサイトなどはJAMStackで十分なのでWordpressなども使わずに済んでいます。

　お客さんのサービスを構築するにしても、SaaSをカスタマイズするかサーバレス環境を使い、サーバ側の処理もほとんどTypescriptやJavascriptです。

　正直、PHPを使うことがなく、レンタルサーバを使う一つのメリットを感じなくなっています。

　これからはReact + Vercel + AppSync + Storageサービスという感じでの開発が増えそうなので、ますますレンタルサーバを使うことが減りそうです。

　かろうじて、メールという旧文化がまだのこているのでメールサーバとして使うことは引き続きあると思います。
これもチャットが一般化してくればいらないのですが。

　Wordpressについては、単純に情報発信とお問合せ受付なら、GoogleSite、Wixなどを使えば同じようなことができますし、設置の手間がないのでわざわざWordpressにする必要はないです。

　Wordpressをカスタマイズしてシステムつくるというのは、メンテを考えると好ましいことではなく、今は、サーバレスサービスを上手く活用して、属人化しないシステム構成をするほうがよいと思います。
　
　PHPに加えて、Wordpressというのもセキュリティホールへの対応とか考えると結構めんどくさいのでそこまで便利だとも思えないです。
NYU(講師：Yann LeCunら）のDEEP LEARNINGの講座をながめてみる。

# NYU(講師：Yann LeCunら）のDEEP LEARNINGの講座をながめてみる。
以下。
https://atcold.github.io/pytorch-Deep-Learning/
完全かどうかは不明だが、日本語にも対応している。

とりあえず、ざっと、1回みて、その後、少し丁寧にもう一度みる予定。
気づいたことなどをメモする。

# まずは一巡目
## Description
https://atcold.github.io/pytorch-Deep-Learning/
短文なので、引用する
>This course concerns the latest techniques in deep learning and representation learning, focusing on supervised and unsupervised deep learning, embedding methods, metric learning, convolutional and recurrent nets, with applications to computer vision, natural language understanding, and speech recognition. The prerequisites include: DS-GA 1001 Intro to Data Science or a graduate-level machine learning course.

⇒　この講座は、比較的、最近の技術（the latest techniques）が含まれる。

### representation learning
「representation learning」という言葉が出ている。このあたりを理解したいと考えていた。

Wikiによると、
https://en.wikipedia.org/wiki/Feature_learning

>In machine learning, feature learning or **representation learning** is a set of techniques that allows a system to automatically discover the representations needed for feature detection or classification from raw data. This replaces manual feature engineering and allows a machine to both learn the features and use them to perform a specific task.

⇒　このあたりのことを、「representation learning」ということを理解した。

## Motivation of Deep Learning, and Its History and Inspiration
以下などは、わりと最近の技術だと思う。

* Energy-based models
* Self-supervised learning and beyond


# 補足
https://ai-de-seikei.hatenablog.com/entry/2022/01/26/090649?_ga=2.40758880.374040184.1643155092-149886064.1642674423
『SimCLRって、Energy-Based Modelsというわけではないんですね。』
↑　この記事、参考になる。。。（なった）。


# まとめ
特にありません。
まだ、入り口です。
[Python] 自分のIPアドレスを確認する(個人的なメモ)

自分のIPアドレスを確認する際に使ったものをメモとして残しておきます。
お使いの環境によりうまくいかないかもしれません。

```ip_ad.py
import socket

def get_host():
        return socket.gethostbyname(socket.gethostname())

print(get_host())
```
Compile Error: Declaration of EntityManager_xxxxxxx::getProxyInitializer() が出た時の対応

プロキシの生成でコケてたらsymfonyのコンパイルエラーに遭遇した

```bash
Compile Error: Declaration of EntityManager_9a5be93::getProxyInitializer()   
must be compatible with ProxyManager\Proxy\LazyLoadingInterface::getProxyIn  
itializer(): ?Closure 
```
今回はその対応。

## 手動でキャッシュクリア

`var/cache/`配下とかにキャッシュがあるので、手動で削除する。

```shell
$ rm -Rf ./var/cache/*
```

## composerのautoloaderを修正

```shell
$ composer dump-autoload
$ composer install  --optimize-autoloader
```
【Vue Storefront】ことはじめ

#はじめに
業務で Vue StoreFront を使うかもしれないから、と使えるようになることを指示されました。日本語のドキュメントが少なくて苦労したので、この記事の作成に至りました。基本的に公式ドキュメントの日本語訳です。

__※誤った情報を記載している、訳が間違っている、可能性がございます。予めご了承ください。__


##参考
公式ドキュメント：https://docs.vuestorefront.io/v2/
公式 Github：https://github.com/vuestorefront/vue-storefront


##Vue Storefront とは
EC向けのPWAフロントエンドフレームワーク

EC：electronic commerce（電子商取引）の略称で、ネット上でのモノやサービスの売買の総称
PWA：Progressive Web Apps の略称で、ネイティブアプリ（スマホにインストールするようなアプリ）のような見た目や動きを持つWEBサイトのこと
フレームワーク：雛形のこと


##重要な概念

###Progressive technology（革新的技術）
Vue Storefront の多くが Vue 関連の技術をもとに作られている。いちばん重要なのは、Vue.js 上に構築された Nuxt.jsである。Vue.js は UI やテンプレート作成ツールを提供し、Nuxt.js はサーバーサイドレンダリング、ルーティング、i18n（国際化）を処理する。

###Reusability（再利用性）
拡張性と保守性を高めるために、Vue Storefront は Composables を提供している。Composables は多くの場合、唯一の主要な公開APIであり、アプリケーションのほとんどのビジネスロジックを実装するマイクロアプリケーションとして扱われる。

###Extendability and custom integrations（拡張性とカスタムインテグレーション）
Server Middleware を拡張することによって、どんなバックエンドのプラットフォームとも統合できる。

###Easy configuration（簡単な設定）
できるだけシンプルで直感的な設定となっているため、以下の2つのファイルだけで設定ができる。
`nuxt.config.js`Nuxt App とフロントエンド関連の設定に使われる。
`middleware.config.js`：Server Middleware の追加、設定、拡張するために使われる。

###Backend-agnostic（バックエンドに依存しない）
バックエンドにどんなサービスを使っていても常に同じ Getters と Composables を使うことができる。使うプラットフォームによって少し違うところがあるみたいなのですが、その違いについては理解ができませんでした。


##インストール手順
公式に載っている手順では解決でいそうにないエラーが出力されたので、[公式のGithub](https://github.com/vuestorefront/vue-storefront)からRepositoryを直接インストールしました。（こういう時は Fork を使うのかな、、？）

```bash
$ git clone https://github.com/vuestorefront/vue-storefront.git
$ cd vue-storefront
$ yarn install
$ yarn build:ct:tools
$ yarn dev:ct
```
この手順通りにやると、最後にパスが通っていないとお叱りを受けます。
`package.json > scripts > build:core > cd -` ➜ `cd ..`に書き換えて、セーブ。もう一度コマンドを実行すると、通るようになると思います。


##まとめ
公式の記事は回りくどく、難しく書かれている印象がずっとあり、敬遠していました。しかし今回、必要に迫られて呼んでみたところ、なんとわかりやすいことか。まだまだ公式ドキュメントを読む習慣がないので、なにか困った時は積極的に公式の力をお借りしようと思います。


##？？次回予告？？
次回は Vue Storefront の具体的な使い方についての記事を書くつもりをしております。


##お願い
冒頭にも記載しましたが、誤った情報を記載している、訳が間違っている、可能性がございます。なにか間違いにお気づきの方がいらっしゃいましたらコメントで教えていただけましたらと思います。

よろしくお願いします。
AWS ECS Fargate × Rails でアプリケーションを指定した日時に固定する方法

# 概要

期間指定のある処理をデバッグするためにサーバー側のアプリケーションの日時を任意の日時に固定したいときがあります。

現時点での実現方法を共有します。

他に良いやり方があれば教えてもらえれば幸いです。

# 結論

`Fargate` の制約でサーバーマシンの日時を固定することができなかったので `Rails` のアプリケーションコードで固定するしかありませんでした。

タスク定義でデバッグ用の環境変数を設定してサービスをそのタスクに切り替えるという方法です。

```ruby:config/initializer/datetime_debug_mode.rb
# DATETIME_DEBUG_MODE には "2021-01-01 10:00:00" のような Time.zone.parse でパースできる日時の文字列が入る
if ENV['DATETIME_DEBUG_MODE'].present?
  require 'active_support/testing/time_helpers'
  include ActiveSupport::Testing::TimeHelpers
  travel_to(Time.zone.parse(ENV['DATETIME_DEBUG_MODE']))
end
```

# 試した他のやり方

## date コマンドでマシンの日時を固定する

`Fargate` で動くコンテナに対して `docker exec` が最近できるようになりました。
参考: [Amazon ECS Exec による AWS Fargate, Amazon EC2 上のコンテナへのアクセス](https://aws.amazon.com/jp/blogs/news/new-using-amazon-ecs-exec-access-your-containers-fargate-ec2/)

そこでコンテナに対して `date` コマンドを実行し、任意の日時を指定しようとしましたが

`aws ecs execute-command --command "date 053018002021"`

エラーになり上手くいきません。

`date: can’t set date: Operation not permitted`

`docker` で `date` コマンドを使うためには `privileged ` オプションを true にしなければいけないようです。
参考: [Dockerコンテナの日付を変更する](https://hacknote.jp/archives/47573/)

しかし、`Fargate` では `privileged ` オプションは有効にできませんでした。
https://docs.aws.amazon.com/AmazonECS/latest/developerguide/AWS_Fargate.html#fargate-task-defs

そのため、`date` コマンドによる日時設定は諦めました。


## 環境変数の設定をコマンドで行う

`結論` で記載した環境変数による日時指定をタスク切り替えではなく、`DATETIME_DEBUG_MODE=2021-01-01 10:00:00 rails server` のように `rails server` の起動時に環境変数を付ければわざわざタスク切り替えで数分待つことなく即時に指定日時が反映されるのではと考えました。

そのためにはコンテナで起動している `rails server` のプロセスを終了させ、環境変数をつけて再起動させなければなりません。

そこで試しに `kill` コマンドで終了させようとしました。

`aws ecs execute-command --command "kill 9999"`

しかし、`aws ecs execute-command` から応答が返って来ず上手くいきませんでした。

また仮に `kill` が成功しても `aws ecs execute-command` はシェルのパイプが使えないので操作が難しそうです。


# 結論（再）
ということで

- 環境変数で渡した日時の文字列を `travel_to` する
- 環境変数の設定はタスク定義で行い、そのタスクに切り替える

という方法に行きつきました。
TeraTermで使用するLinuxコマンドの使い方

#よく使うコマンド

##①cd ディレクトリ
ディレクトリを移動する。

```
cd /etc/app/logs
```

下記から始めた場合ルートディレクトリへ移動。

```
cd /
```

##②pwd
自分がどこのディレクトリに居るかを確認する。

```
pwd
```

##③ls
ファイルの一覧を見る。

```
ls
```

##④ls -altr
上記③のオプション付きバージョン。
更新時間順にファイルを並べ替えて一覧表示。

```
ls -altr
```

##⑤find
特定のファイルを探す。

```
find tracelog
```

##⑥less
ファイルを開く。

```
less tracelog
```

##⑦tail ファイル名
ログが長過ぎるときファイルの後方を表示。

```
tail server.log
```

##⑧tail -F ファイル名
上記⑦のオプション付きバージョン。
ログを監視するときに使用。
追記された分を表示してくれる。

```
tail -F server.log
```

##⑨tail -F ファイル名 | grep 検索するもの
上記に更にオプションを付けたもので、
grepの後に検索したい内容を記載すれば
その内容で絞って表示をしてくれる。

```
tail -F server.log | grep osakana
```

#おまけ

##cal
カレンダーを見る。

```
cal
```

##Enter連打
ログがどんどん流れていってしまう時は、
Enterを押してスペースをたくさん空けておき、
そこを目印にしたりする。

##［Alt］＋［C］
コピーする。

##［Ctrl］＋［C］
終了。




このほかにも沢山コマンドはありますが、
主に使用したコマンドをまとめてみました！
誰かのお役に立てると嬉しいです。。
Pycharm-CEを再インストールしたら起動しなくなった


# 現象
BrewからPycharm[^1]をアップグレードしたら起動時に下記のエラーが発生

```diff_Java
java.lang.VerifyError: Expecting a stack map frame
Exception Details:
  Location:
    com/intellij/openapi/util/text/StringUtil.pluralize(Ljava/lang/String;)Ljava/lang/String; @24: athrow
  Reason:
    Error exists in the bytecode
　：
　中略
　：
/Applications/PyCharm CE.app/Contents/jbr/Contents/Home
```
java.lang.NoClassDefFoundErrorも発生するが、元凶は java.lang.VerifyError

```diff_Java
java.lang.NoClassDefFoundError: Could not initialize class com.intellij.openapi.util.SystemInfo
　：
　中略
　：
/Applications/PyCharm CE.app/Contents/jbr/Contents/Home
```

# 対処
以前に [Pleiades プラグイン](https://mergedoc.osdn.jp/)を入れていたら、同プラグインで再日本語化すればOK

または、下記ディレクトリを削除してからPycharmをインストールやれば良いと思われる[^2]
/Users/ユーザ名/Library/Application Support/setup-pleiades

[^1]: PyCharm 2021.1.1 (Community Edition)
[^2]: 試してないので自己責任でお願いします
create-react-appの際にnpm、typescriptをデフォルトで設定する（だけ）

一回 yarn を使ってしまってなぜか次回以降も create-react-app のデフォルトが yarn になってしまう方に伝えたい。

CRA 時にこれを実行せよ

```
$ npx create-react-app my-app --use-npm --template typescript 
```

たったこれだけ

以上
Salesforce Sandboxにログインできない

## SalesforceでSandbox（開発環境）にログインできない
Sandbox（開発環境）を作成した後に、正しいID/Passを試してもログイン出来ない状態でした。。
会社や組織でSalesforceのSandBox（開発環境）を用いる場合は、
ほとんどこのログイン方法となるのではないかと思い、備忘録として残しておこうと思います。

### 問題点
#### 本番環境と同じID/PassでもSandbox（開発環境）にログインできない。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1520342/2208e87a-8e73-be88-8c02-f4e45b5151e9.png)

### 原因
<H4> 「設定」→「私のドメイン」が設定されていることで、
ログインがブロックされる状態となっている。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1520342/2dd6571e-afb5-479e-4f6d-afbfef37ac45.png)


### 解決方法
組織のセキュリティを変更（緩く）することは出来ないので、別の方法を探していたところ
↓の方法でログインすることができました！

Sandbox組織が「私のドメイン」を有効にしていてログインポリシーが
「https//login.salesforce.comからのログインを防止」に設定されている場合は

__*`私のドメインURLをhttps//[MyDomain]--[SandboxName].cx[x].my.salesforce.com`*__

に設定（[]内の情報を入力する）することでログインできるようになりました。
Gitで草を1年間毎日生やすという挑戦をしていたが序盤でPushし忘れた話。と対処法について

# はじめに
みなさんはプライベートでもコードを書いているでしょうか。
私は新卒で入社して今年で2年目ですが、1年目の時は本を読んだり、機械学習のアルゴリズムを勉強するほうを優先していたため、実際にコードを書く機会は少なかったです。

機械学習の理論を勉強するなら、書かなくてもよいとは思いますが、いざ実践でやろうと思うとコードを書いていないことからできないことというのが多くなってしまいます。
また、実践(コードを書いて)で勉強していったほうが技術力は格段に上がると思います。

私は実装力というのがまだまだでやりたいことができないと度々痛感し、とりあえずの目標としてGitの今トリビュートカウント(通称:草)を毎日更新しよう掲げました。

「Twitterなどをみていると1年間更新しました」というのが回ってくることがちらほらあって始めることにしました。とりあえず毎日コードを書く習慣をつけていきたいと思ってです。

![20171130052142.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/954312b5-c7f4-8c34-3938-015f41fec3a9.png)

(こういうのを目指しています)

そして、この記事を書いているのが28日目に事件は起きました。

# 問題

28日目はデータ分析コンペに取り組んでいました。
特徴量を作成して、訓練してを繰り返して気づいたら5時間程度作業をしていました。

そして時間をみると次の日の00:12分。

もちろんGitのコントリビュートは行っておらず、草が生えていません。

毎日頑張ってきたのに自分のミスで草を生やし損ねてしまったのです。
1年頑張ろうとしたのにまさかの序盤の自分のミスで失敗するとは思いませんでした。コード書いてるので余計に悔しい！

そこで今回はそのような状況になったので、普段なら調べることのない「過去の日付でPushして草を生やす方法」について調べてみましたのでまとめます。

# 解決方法

```
git add .
git commit --allow-empty -m "コミットメッセージ" --date="May 27 23:59:59 2021 +0900"
```

このように`commit`に引数を渡すことで過去のコミットとして扱うことが可能でした。
これで、過去の日付でも草を生やすことが可能です。

![bandicam 2021-05-28 00-40-14-505.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/90b78d9a-7b2a-2ec4-b1f8-7a246db1629d.jpeg)

無事草が生えました！
これでこの先も続けて行けそうです！

ちなみに、調べた[サイト](https://tomatoaiu.hatenablog.com/entry/2018/12/11/125302)によると

```
24時間以内にgithubへpushする必要はない。1日以内にローカルかどこかでデフォルトブランチへコミットして
おけば、あとからpushしても草が生える。なので、「昨日pushするの忘れた！」と思っても、昨日の内にデフォ
ルトブランチへコミットしておけば、気づいたときにpushすることで草が生える。
```
とのこと。こまめなPushが大切だということを実感しました。

# おわりに

この方法をすることで過去でも大丈夫であることがわかりましたが、これに頼って不正してしまわないようにしたいです。今回のようなことが起きないように注意して、なるべくこの方法は使わないようにします。

そして、この事件で学んだのはコミットの単位についてです。
コミット単位をいままで考えず、その日の作業が終わったらとしていましたが、どの単位でしていくのかを決めていきたいです。そうすれば、過去にコミットしたものをPushすることで日付をまたいでしまって記録が続かなかったというのは防止できるかと思います。

モチベーションを上げるために、草を生やすことを目標にするのはいいことだと思いますのでぜひ試してみてください。

# 参考サイト
[過去日付でGithubの草を生やす](https://zatoima.github.io/blog-github-contributions-before-date.html) 
[1年間githubに草を生やそうと思ったが251日で途絶えた話 | 草をはやすメリットデメリット](https://tomatoaiu.hatenablog.com/entry/2018/12/11/125302)
論文のPDFにTimes New Romanが埋め込まれていない旨のエラーでIEEE PDF eXpressを蹴られた時の対処法(Linux)

# 症状

LaTeXで作成した論文をIEEE PDF eXpressに送信すると、以下のエラーが出て受け付けてくれなかった。

```
Errors were found on pages XX-XX:
    Font Times New Roman, TimesNewRomanPS-BoldMT, TimesNewRomanPSMT is not embedded
```

### 検証環境

- Ubuntu 20.04 (on WSL 1)
- TeX Live 2019/Debian (`sudo apt install texlive-full`で入れたもの)
    - pdfの作成には`platex`→`dvipdfmx`を使用
- Ghostscript 9.50

# 対処法

Ghostscript(gsコマンド)を使用して、既存のpdfに対してすべてのフォントを埋め込むことで解決した。

```bash
$ gs -dNOPAUSE -dBATCH -sDEVICE=pdfwrite -dEmbedAllFonts=true -sOutputFile=OUTPUT.pdf -f INPUT.pdf
```
※上記コマンド内の`INPUT.pdf`と`OUTPUT.pdf`は、読み込むpdfファイルと書き出すpdfファイルの名前に適宜書き換えること
※オプションの順番は入れ替えないこと

`dvipdfmx`コマンド等で最終的に生成したpdfファイルに対してこれを実行し、書き出されたpdfファイルを提出すれば、特に問題なく提出できる。

# ちゃんと埋め込まれたかどうかの確認

`pdffonts`コマンドで確認できる。

```bash
$ pdffonts filename.pdf
```

### 埋め込み前(※一部抜粋):

```
name                                 type              encoding         emb sub uni
------------------------------------ ----------------- ---------------- --- --- ---
Times New Roman                      TrueType          WinAnsi          no  no  no
TimesNewRomanPSMT                    TrueType          WinAnsi          no  no  no
TimesNewRomanPS-BoldMT               TrueType          WinAnsi          no  no  no
```

### 埋め込み後(※一部抜粋):

```
name                                 type              encoding         emb sub uni
------------------------------------ ----------------- ---------------- --- --- ---
VVOOJQ+Times-Roman                   Type 1C           WinAnsi          yes yes no
XAVMFS+Times-Bold                    Type 1C           WinAnsi          yes yes no
```

操作を実行することで、フォントが埋め込まれているかを表す`emb`がすべて「`yes`」になったことがわかる。

うちの環境では、操作によって「Times New Roman」と「TimesNewRomanPSMT」が「Times-Roman」、「TimesNewRomanPS-BoldMT」が「Times-Bold」のフォントによって代用されたらしいが、見た目上特に変わらなかった。

# 補足

- 参考記事では`gs_pdfwr.ps`内の`/.standardfonts`の中身をコメントアウトした上でpdfを書き出し直す方法も紹介されていたが、うちの環境では特に効果がなかった
    - `platex`→`dvips`→`ps2pdf`など、ps形式を経由してGhostscriptでpdf形式に変換する方法の場合は効くかも知れない(未検証)

- PDFビューワの印刷機能を使ってpdfを書き出す(フォントの埋め込みにチェックを入れる)という方法もあり、その方法でもエラーの回避は可能
    - ただ、私は印刷時の確認不足で文書のサイズがUS LetterサイズからA4サイズに変わってしまい、エラーは回避できたものの提出後に学会から再提出を求められた
    - この方法でやる場合は印刷サイズの設定に十分注意すること

# 参考記事

- TeX で作った pdf にフォントを埋め込む - iwiwiの日記
    - http://iwiwi.hatenablog.com/entry/20120125/1327473584
Rails ヒアドキュメントの改行を反映させる方法

#はじめに
Rails での改行を反映させる方法について、フォームやテキストエリアでの記事は見かけますが、ヒアドキュメントでの記事はあまり見かけないので、簡単に書いてみました。
やり方としては他と変わりません。

##実行までの大まかな流れ
1. userインスタンスの生成
2. user.introduce を実行し、ヒアドキュメントを＠msgに代入
3. 受け取ったデータをビューで表示

```ruby
#controller
class HomesController << ApplicationController
  def index
    user = User.new
    @msg = user.introduce
  end

```


```ruby
#model
class User
  def introduce

  end

  def introduce
    <<~EOS

    テキスト
    テキスト
    テキスト
    
    EOS
  end
```

```ruby
#views
<%= @msg %>
```

```ruby
#実行結果
 #=> テキストテキストテキスト
```
実はこれだとヒアドキュメントの改行は反映されません。
どうすれば改行まで反映されるのか。

##simple_format メソッド

出力したいものに `simple_format` を使うだけです。
これでヒアドキュメントの改行が反映されます。

```ruby
#views
<%= simple_format(@msg) %>
```

```ruby
#実行結果
  #=>  テキスト
  #    テキスト
  #    テキスト
```
##結果
`simple_format` を使うと`\n` などの改行を `<br />` タグに変換してくれる。
【React】孫コンポーネントや子コンポーネントに値や関数を渡していく【バケツリレー地獄の終焉】

<h2>コンポーネントのバケツリレー地獄を過去にしたい</h2>

下記のように何度もpropを渡していく。。。
そんなのもう、やめにしませんか？

```react
import React, {Fragment} from "react";

//親
export const Hoge= () => {
  const prop= "NEKO";
return (
  <Fragment>
     <Fuga prop={porp} />
  <Fragment>
)
}
//子供
export const Fuga =(prop) => {
    return(
     <Fragment>
         <Piyo prop={porp} />
      <Fragment>
    )
}
//孫
export const Piyo = (prop) => {
    return(
     <Fragment>
         <Puyo prop={porp} />
      <Fragment>
)
}
 ```

<h2>バケツリレーからの解放</h2>
下記のように親と孫でコードを加えて、その間のコンポーネントでpropの受け渡しを書かないようにしていきましょう。

```react:reacr
import React, {Fragment,createContext,} from "react";

//親
export const Hoge= () => {
  //createContextで渡したい値の設定をします
  const state = createContext("NEKO");
  const dispatch = createContext("DISPATCHNEKO");

return (
  <Fragment>
　　　//ここで先ほど代入した変数のProviderで渡したい下のコンポーネントを囲みます
　　　<dispatch.Provider value={dispatch}>
        <state.Provider value={state}> 
           <Fuga />
          </state.Provider>
       </cispatch.Provider>
  <Fragment>
)
}
//子供(なにもしない)
export const Fuga =() => {
    return(
     <Fragment>
         <Piyo />
      <Fragment>
    )
}

//孫
export const Piyo = () => {
//使用したいコンポーネントでuseContextを使って値を受け取ります
const cescriptionState = useContext(state);
const cescriptionDispatch = useContext(cispatch);
    return(
     <Fragment>
         <Puyo />
         {state}
         {dispacth}
      <Fragment>
)
}
```

<h2>参考</h2>
https://qiita.com/ryokkkke/items/dc25111fcf52ea579d58
LookingGlassPortraitに付属するBring 2D images to 3D life.について

#LookingGlassPortraitに2D写真を3D化するライセンス付いてなかったっけ
出荷メールにライセンスコードとBring 2D images to 3D life.ページへのアドレスがありました。このメールに書いてあるよと師匠から教えてもらいました。
忘れてる人もいると思うので2D→3D変換の仕方について。

※ライセンス付きプランにバックした人向け

##1.アカウント作成
https://lookingglassfactory.com/
に登録しましょう。SDKとかコアシステム落とすときにしてるとは思います。

##2.出荷メールを探す
LookingGlassPortraitを出荷しましたメール（件名：Your Looking Glass Portrait Shipment Is On Its Way!）に
『Your complementary 2D → 3D conversion codes』って言う見出しの直後に
アドレスとライセンスコードが記載してあります。

##3.アクティベート
Bring 2D images to 3D life.にアクセスしてサインインすると
Redeem（引き換え）的な入力するところがあるのでライセンスコードを入力します。

##4.変換
ここにファイルをドロップしてね的な窓があるので
自分が使える写真やイラストをドロップして変換を押すとクラウドで変換が始まります。
確か1分ぐらい。終わると左に元画像、右にグレイのdepthな画像が表示されるので
ダウンロードします。

※くれぐれもTerms of Service and Privacy Policy.を読んで了承したうえで。

##5.HoloPlaySTUDIOからポートレートに同期する
HoloPlaySTUDIOのAdd Hologram-RGBD Photo and Videoに
ダウンロードした画像をインポートしてポトレを見ながら値を調整してください。
インポート直後は焦点がズレててがっかりしますが値を調整するとすごいです。
・Focus：奥行きの焦点（基準）をどこにするか。
・Depthiness：奥行きの強さ（？）弄ればわかりますw　小さめがお勧め。
調整したらSync playlistでポトレに同期させます。

補足：同期をかけると一枚絵のmp4化されます。
　　　lookingglassportraitスタンドアローンは動画スライドショーなので

##その他
・24時間で変換したものはクラウドページから消えます。
・ライセンスによって変換できる枚数が異なります。
・くれぐれもTerms of Service and Privacy Policy.を読んでください
・イラストでも写真でも割といけます。クラウド側でデプス推定を行っている、はず。
・クラウドで処理しているので世界のどこかにデータが上がっていることを忘れずに。
セレクトタグの選択に合わせてインプットの初期値を変更する方法

RailsでのWEBアプリを開発する際、jQueryを使ってセレクトタグに連動してインプットの初期値を変更する方法を調べました。
自分用のメモとして学んだことをまとめます。

# RailsにjQueryを導入
jQueryの導入方法についてはこの記事では割愛しますが、以前書いた以下の記事が参考になると思います。

https://qiita.com/siromofu3/items/9c17d98b7554fa2c279f

# セレクトタグの内容を取得

まずはセレクトタグの内容を取得するために、jsファイルにこのように記入します。

```js:jsファイル
$('select[name="対象のセレクトタグのname属性"]').change(function() {
　var val = $(this).val();

　ここに処理を書いていく

});
```

# セレクトタグの選択に応じて処理を指定

次に、対象のセレクトタグの値が変わった場合の処理を先程のコードに追記していきます。
やることとしては、セレクトタグの値に応じてinnerhtmlで値を指定します。

```js:jsファイル
$('select[name="対象のセレクトタグのname属性"]').change(function() {
  var val = $(this).val();
  if (val == "セレクトタグのvalue1") {
    $('input[name="対象のインプットのname属性"]').val("入力したい初期値1");
  } else if (val == "セレクトタグのvalue2") {
    $('input[name="対象のインプットのname属性"]').val("入力したい初期値2");
  } else if (val == "セレクトタグのvalue3") {
    $('input[name="対象のインプットのname属性"]').val("入力したい初期値3");
  }
});
````

ちなみに初期値を変えたいのがインプットではなくテキストエリアの場合は次のような記載になります。

```js:jsファイル
$('select[name="対象のセレクトタグのname属性"]').change(function() {
  var val = $(this).val();
  if (val == "セレクトタグのvalue1") {
    $('input[name="対象のテキストエリアのname属性"]').html("入力したい初期値1");
  } else if (val == "セレクトタグのvalue2") {
    $('input[name="対象のテキストエリアのname属性"]').html("入力したい初期値2");
  } else if (val == "セレクトタグのvalue3") {
    $('input[name="対象のテキストエリアのname属性"]').html("入力したい初期値3");
  }
});
````

これでセレクトタグに応じてインプットやテキストエリアの初期値が変わるはずです！
【PHP】ハイ&ローゲーム

# 解説

・コンピュータが決めた数字をプレイヤーの入力した数値が大きいか小さいか予想するゲーム。

１・プレイヤーは1～9のどれかの数字を入力
２・１から９までの中からランダムに数値を一つ取得
３・入力した数字が、コンピュータの数字より大きければハイ
４・入力した数字が、コンピュータの数字より小さければロー
５・入力した数字が、コンピュータの数字と同じならドロー

# コード
```PHP
<?php
$input = fgets(STDIN);
$number = mt_rand(1, 9);
echo '入力値:',$input," 相手",$number,PHP_EOL;
if($number < $input){
    echo 'ハイ';
}else if($number > $input){
    echo 'ロー';
} else {
    echo 'ドロー';
}
```

# 結果
```
入力値:5 相手5
ドロー
```









```PHP
<?php
 
$number = mt_rand(1, 9);
$result = '';
 
if($_SERVER['REQUEST_METHOD'] === 'POST'){
  $choice = '';
  if(isset($_POST['choice']) === true){
    $choice = $_POST['choice'];
  }
 
  $previous = '';
  if(isset($_POST['previous']) === true){
    $previous = $_POST['previous'];
  }
 
  if($previous < $number){
    $answer = 'ハイ';
  } else if ( $previous > $number ){
    $answer = 'ロー';
  } else {
    $answer = 'ドロー';
  }
 
  if($answer === 'ドロー'){
    $result = '引き分け';
  } else if ($answer === $choice){
    $result = '勝ち!';
  } else {
    $result = '負け...';
  }
}
 
?>
<!DOCTYPE html>
<html lang="ja">
<head>
  <title>ハイアンドローゲーム</title>
</head>
<body>
  <h1>ハイアンドローゲーム</h1>
  <?php if($_SERVER['REQUEST_METHOD'] === 'POST'){ ?>
    <p>対象の数値: <?php echo $previous; ?>
    <p>選択: <?php echo $choice; ?></p>
    <p>出た数字: <?php echo  $number; ?>
    <p>判定: <?php echo $answer; ?> 今回の勝負は<?php echo $result; ?></p>
 
    <p><a href="high_and_low.php">次の勝負へ</a></p>
  <?php } else { ?>
 
    <p>現在の数値: <?php echo $number; ?></p>
 
    <!-- method="post"でフォームを作成 -->
    <form method="post">
      <div>
        <label>ハイ: <input type="radio" name="choice" value="ハイ" required></label>
        <label>ロー: <input type="radio" name="choice" value="ロー" required></label>
      </div>
      <!-- 現在の数値を送信 -->
      <input type="hidden" name="previous" value="<?php echo $number; ?>">
      <input type="submit" value="勝負">
    </form>
  <?php } ?>
</body>
</html>
```