OmniAICreator/Qiita-1.07M huggingface dataset:
Djangoでcsvをモデルに入れるにはどのライブラリが良いのか

# 比較対象のライブラリ

https://kurozumi.github.io/django-import-export/
https://pypi.org/project/django-csvimport/



# 今回の観点

- admin画面から、csvがアップロードできること。
- csvのheaderからmodelのプロパティを指定できる。
- 型の判定をある程度やってくれる。
- 重複するデータがあったら弾きたいので、モデル(データベースに)には制約がついて欲しい。

# マイグレーション機能
- django-csvimportにはmigration用のコマンドがある。

ここで自問自答
本当に、migratioコマンドって必要？modelを一回定義してほぼ変わらないのならそれでいいんじゃない?
csvからmodelを作ることってある？
geodjangoのloaderは確かによく使うし便利だなと思う。
loaderはどこまで共通化されているんだろう。
微妙なのがあったら自前で作る?


# 管理画面からGUI
結論を言うとdjango-csvimportはcsvの読み込みで、「,,,,,」のように連続して値がないcsvは読み込めないバグがありました。
django-import-exportの方が圧倒的にメンテナンスされてて使いやすかったです。


# 参考


"window","url","title","hostname"
"django_csv_import_ex","http://www.soumu.go.jp/denshijiti/code.html","総務省｜電子自治体｜全国地方公共団体コード","soumu.go.jp"
"django_csv_import_ex","http://jusyo.jp/tsv/new.php","住所データTSV【住所.jp】","jusyo.jp"
"django_csv_import_ex","https://photo-tea.com/p/aws-ec2-to-rds-csv/","AWSのRDSのmySQLにCSVを一括入力する(EC2経由)|おちゃカメラ。","photo-tea.com"
"django_csv_import_ex","https://messytables.readthedocs.io/en/latest/","messytables: all your rows are belong to us — messytables 0.3 documentation","messytables.readthedocs.io"
"django_csv_import_ex","https://github.com/edcrewe/django-csvimport","edcrewe/django-csvimport: A generic CSV import tool for django models, imports run via admin upload logging model or custom command","github.com"
"django_csv_import_ex","https://djangosnippets.org/snippets/633/","djangosnippets: CSVImport","djangosnippets.org"
"django_csv_import_ex","http://osksn2.hep.sci.osaka-u.ac.jp/~taku/osx/python/encoding.html","Python でUTF-8, shift_jis, euc_jpなど日本語を使う方法","osksn2.hep.sci.osaka-u.ac.jp"
"django_csv_import_ex","https://qiita.com/okadate/items/c36f4eb9506b358fb608","PythonでCSVの読み書き - Qiita","qiita.com"
"django_csv_import_ex","chrome://newtab/","新しいタブ","newtab"
"django_csv_import_ex","https://qiita.com/ysdyt/items/9ccca82fc5b504e7913a","データ分析で頻出のPandas基本操作 - Qiita","qiita.com"
"django_csv_import_ex","https://qiita.com/redAlgae/items/5a7973ed3338d2a100b2","【Python】pandasで日本語のcsvを文字化けせずに読み込む（さらに日本語で書かれた列を抽出する） - Qiita","qiita.com"
"django_csv_import_ex","https://qiita.com/drafts/e590f918fde1324f55bd/edit","「Djangoでcsvをモデルに入れるにはどのライブラリが良いのか」を編集 - Qiita","qiita.com"
"django_csv_import_ex","https://blog.daisukekonishi.com/post/django-import-export-csv/","django-import-exportで管理画面からCSVをインポートできるようにした · PengNote - 勉強した事や行った場所の感想を書くブログ","blog.daisukekonishi.com"
"django_csv_import_ex","https://django-import-export.readthedocs.io/en/latest/api_resources.html","Resources — django-import-export 1.2.1.dev0 documentation","django-import-export.readthedocs.io"
"django_csv_import_ex","https://django-import-export.readthedocs.io/en/latest/import_workflow.html","Import data workflow — django-import-export 1.2.1.dev0 documentation","django-import-export.readthedocs.io"
"django_csv_import_ex","https://qiita.com/myzkyy/items/25cff9374aa8f6565b50","pgloaderでMySQLからPostgreSQLに移行する - Qiita","qiita.com"
備忘

Salesforce認定アドミニストレーター試験対策
https://matomenai.info/sfadmin/

セールスフォース（salesforce）認定アドミニストレーター資格取得までの道のりと学んだこと
https://qiita.com/hayate5931/items/49b3274296f8cdc354af

認定上級Platform デベロッパー攻略

認定上級Platform デベロッパー
https://esp-labo.com/category/sf/highdev/
http://sfdcbuddy.com/certification-questions/platform-developer-2/

問題集
https://quizlet.com/cn/281534714/salesforce-developer-flash-cards/

スーパーバッジ（Super Badge）
https://github.com/anilsomasundaran/Lightning-Component-Framework-Specialist
[メモ] カラースキーマ管理 on Vim

初投稿失礼します、みえぼりといいます。
主に``Python``を使っており、また同言語や``Linux``のシステムについてなどを``Windows 10 Home``上の``Ubuntu on WSL``を活用しつつ学んでます。
どれも概ね今年度初頭ごろから学びはじめたばかりの新米です。

# この投稿の動機

つい先週に友人の影響で``WSL``上のターミナルで使うデフォルトシェルを ``bash -> zsh``に乗り換え(環境管理は ``prezto``を利用)、またつい昨日、別の友人の勧めで軽量エディタとして``Vim``を使い始めました。

``Vim``を自分好みにカスタマイズすべくいろいろな記事やサイトをみつつ``.vimrc``をカキカキしていたところ、カラースキーマ(``colorscheme``)管理の方法について思うところがあったので、これを機にメモを残してみようと思った次第です。

# Vim におけるカラースキーマの管理/利用方法

一般に、ユーザ毎の Vim のカラースキーマの管理は次のようなディレクトリツリーで管理されているようです。

```terminal
$HOME/
  ├ .vim/
  ｜   ├ colors/
  ｜        ├ scheme_1.vim
  ｜        ︙
  ├ .vimrc #各環境設定を記述する
```

また、``.vimrc``内でのカラースキーマの指定方法は次のようになります。

```vimscript:~/.vimrc

"カラースキーマスクリプトのファイル名(拡張子を除く)を指定する
colorscheme scheme_1
```

ここで僕が引っかかったのは、カラースキーマスクリプトは往々にして**gitリポジトリから導入する場合がある**という点です(昨日実際に初めて導入したカラースキーマ[molokai][1]もそうでした)。

実際にgitリポジトリから``scheme_2``を導入するとすると

```terminal
$ cd ~
# 仮想のリポジトリをクローン
$ git clone https://github.com/alice/scheme_2.git
$ tree .
$HOME/
  ├ .vim/
  丨   ├ colors/
  ｜        ├ scheme_1.vim
  ｜        ︙
  ├ .vimrc
  ︙
  ├ scheme_2/
       ├ .git/
       ︙
       └ colors/
            └ scheme_2.vim #カラースキーマスクリプト本体
```

しかしこのままでは``Vim``は新たに導入したカラースキーマを読み込むことができません(``~/.vim/colors/``以下にスクリプト``scheme_2.vim``がないため)。

しかし、クローンしたリポジトリから直接スクリプトを``~/.vim/colors/``以下に移動するとリポジトリの更新に対応できないほか、また何よりも新たなカラースキーマを導入する毎に移動を行うのは非常に煩雑に感じます。

# 本題

このため、自身はこういった方法をとりました。

 1. カラースキーマのリポジトリを``~/.vim/colors/``以下に直接クローン
 2. ``~/.vim/colors/``から見たカラースキーマスクリプトの相対パス(拡張子は除く)を``.vimrc``内で指定

実行例を記すとこんな感じです。

```terminal
$ cd ~/.vim/colors
$ git clone https://github.com/alice/scheme_2.git
$ cd ~ ; vim .vimrc
```
```vimscript:~/.vimrc
~
"colorscheme scheme_2
colorscheme scheme_2/colors/scheme_2
~
"この形式で実際に動作しています
```

``~/.vimrc``のコマンド``colorscheme``は、実際には``~/.vim/colors/``以下の相対パスを指定していたのですね。

ということで、カラースキーマのリポジトリのもつディレクトリ構造に合わせてではありますが、比較的かんたんな操作で導入が行えるようになったと思います。

とはいえ、更にスマートな方法がありそうな気もします。そういったご指摘であったり、あとは『こういった設定を使うと快適よ〜』といったアドバイス等ありましたら、コメントいただければと思います。

[1]:https://github.com/tomasr/molokai&ved=2ahUKEwjrzMiC9_TjAhXlNKYKHTHaCiYQFjABegQIAxAB&usg=AOvVaw0IQz8yIqPqvsEwqvs42ixs&cshid=1565324196685 "tomasr/molokai: Molokai color scheme for Vim - GitHub"
ASP.NET MVCの基本

# ASP.NET MVCの基本

## Controllerの基本

コントローラークラウスとは個々のリクエストに応じた処理を担うクラス。
ビジネスロジック（Model)を呼び出すのも、その結果を出力（View)に引き渡すのも、コントローラークラスの役割。
コントローラークラストは、リクエストの受信からレスポンスの送信までを一気に担うアプリケーションの司令塔のような存在。

### Controllerクラスを作成する
Controllerクラスは

#### Controllerクラスを継承する

#### 具体的な処理を記載するのはアクションメソッド
アクションメソッドの条件は以下の通り
- パブリックドメインであること
- staticメソッドでないこと
- 非バインド型パラメータを持たないこと
- 引数だけが異なるオーバーロード不可

#### アクションメソッドの戻り値はActionResultオブジェクト

### ルーティングを理解する
ルーティングはリクエストURLに応じて処理の受け渡し先を決定すること、またその仕組みのこと。
ASP.NET MVCではクライアントからの要求を受け取るとまずはルーティングを利用して呼び出すべきコントローラー/アクションを決定しています。

ルーティング設定は下記の様に定義されており、アプリケーション開始のタイミングで呼び出されます。
まずはMapRouteというメソッドが呼び出され実行されます。

App_Start/RouteConfig.cs

```
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;

namespace MvcBasic
{
	public class RouteConfig
	{
		public static void RegisterRoutes(RouteCollection routes)
		{
			routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

			routes.MapRoute(
				name: "Default",
				url: "{controller}/{action}/{id}",
				defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
			);
		}
	}
}

```

```
"{controller}/{action}/{id}"
```

Controllerはコントローラー名を、Actionはアクションメソッドの名前、IDはアクションメソッドに渡される任意のパラメータ（ユーザパラメータ）をそれぞれ表す。
これらのパラメータのデフォルト値の設定が

```
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional 
```

の部分。

### App_Startディレクトリ

|||
|--|--|
|ファイル|概要|
|BundleController.cs|Javascript、CSSのバンドル情報|
|FilterConfig.cs|グローバルフィルター|
|RouteController|ルート情報|
|IdentifyConfig.cs/Startpu.Auth.vs|認証情報|

#### Global.asax
Global.asaxはグローバルアプリケーションファイルと呼ばれ、アプリケーションレベルで発生する各種イベント（アプリケーションイベント）を処理するための役割を担う。

## Virwの基本
ビューの最終的な表示はRazorテンプレートに委ねられる。
RazorはHTMLにC#,Visual Basicのコードを埋め込むためのしくみ（ビューエンジン）です。
以下の様な特徴がある。

- C#/Visual Basicの標準的な構文で、条件分岐や繰り返しの処理ができる
- ビューヘルパーで、フォーム要素やリンクなど簡潔に表現できる
- 共通的なデザインを再利用する機能を備える

### View変数の設定

View変数をControllerクラスで定義しておくことでViewから＠アノテーションを利用してその値を呼び出して利用することが出来る

View変数の設定

```
ViewBag.変数名 = Value
```

ビュー変数とは、ビュースクリプトに埋め込むべき値のことで、アクションメソッド（コントローラー）とビューとでデータを受け渡しするための橋渡し役となる。プログラム側で表示に必要なデータを用意しておき、ビュースクリプトではデータを埋め込む場所や表示方法などを定義する、という役割分担がView-Controllerの基本的な関係である。

#### Viewメソッドでビュースクリプトを呼び出す

Viewメソッドは、Contentメソッドと同じく、ActionResult派生オブジェクトを取得するためのヘルパーメソッドです。
引数なしで呼び出した場合には、

```
/View/Controller名/アクション名.cshtml
```

を呼び出そうとする。

1. 式の値を表示するには「＠...」
2. コードブロックは「＠{...}」」

ヘッダー、フッターなどは Views/Shared/_Layout.cshtml で定義されているものが呼び出されレンダリングされたものが最終的に表示されている。
レイアウトを利用することでヘッダー、フッター、サイドメニューなどのサイト共通デザインを一か所にまとめられるので以下の様なメリットがある。

- 個々のビュースクリプトでは、ページ固有のコンテンツに集中できる
- サイトデザインを変更する際にはレイアウトだけ変更すればよい
- 一貫したサイト構成を提供できるので使いがったも向上する
- 開発生産性、保守性、ユーザビリティのいずれも共通でデザインをレイアウトとして外部化することはメリットである

## Modelの基本
Modelとは、ビジネスロジック全般を担当するコンポーネントのこと。もっとも、ASP.NET MVCではモデルに相当する機能は含まれていない。

> モデルとは、特定のアプリケーションやインターフェースではなく、クラスがモデルの一部となるかどうかは、そのクラスが特定のインターフェースを実装するかどうか、または特定の基本クラスから派生するかどうかではなく、ASP.NET MVCアプリケーションにおいて果たす役割、アプリケーションのディレクトリ攻勢で決まる。
>
[自由研究]contenteditable属性のテキストをJavaSctiptで取得してみた

８月になり自由研究の季節がやってきましたね。
小学生・中学生の頃は貯金箱やら万華鏡やらありふれたものを作っていました。

#研究テーマ

ところで皆さんはHTML5のcontenteditable属性をご存じでしょうか？

一言で言えば、「テキスト文を編集できるようにするもの」です。

<img width="750" alt="スクリーンショット 2019-08-09 11.16.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/360790/5c67bee6-2c52-a208-895e-daede350a6f4.png">

そして今回、contenteditable属性で編集したテキストをJavaScriptでテキストを取得した時、ブラウザごとに挙動がどうなるかを調べたのでそれを自由研究としたいと思います。

# 用意したもの（検証ブラウザ）
Chrome：75.0.3770.142
Safari：12.1.2 (14607.3.9)
Firefox：68.0.1 (64 ビット)

# 実験内容
ブラウザごとに下記のようにしてHTML要素のテキストを取得してみる。
（１）テキストを消して空にした場合
（２）空にしたあとテキストを入力した場合
（３）テキストをコピーしてペーストした場合

# 方法
JSでのテキスト取得には下記の３パターンを用いました。

・`innerHTML`
・`innerText`
・`textContent`

いずれもテキスト内容を取得するものですがそれぞれ挙動が少し異なります。

・`innerHTML`
オブジェクト内のHTML要素を取得する

・`innerText`
オブジェクト内の文字列を取得して見やすいように変換してくれる

・`textContent`
オブジェクト内の文字列をHTMLに書かれている通りに取得する



```sample.html
<div id="text1" contenteditable="true">こんにちは</div>
<button onclick="checkText()">ボタン</button>
```

```sample.js

function checkText(){
  var text1 = document.querySelector("#text1");

  console.log(text1.innerHTML);
  console.log(text1.innerText);
  console.log(text1.textContent);
}

```

# 結果

上記のコードで（１）〜（３）をブラウザごとに実行した結果が以下になります。

（１）空にした場合

```
[Chrome]
""
""
""
[Safari]
"<br>"
"
" // 改行
""
[Firefox]
"<br>"
"
" // 改行
""
```
（２）空にしたあとテキストを入力した場合

```
[Chrome]
"こんにちは"
"こんにちは"
"こんにちは"
[Safari]
"こんにちは"
"こんにちは"
"こんにちは"
[Firefox]
"こんにちは<br>"
"こんにちは
"
"こんにちは"
```
（３）テキストをコピペした場合

```
[Chrome]
"こんにちは"
"こんにちは"
"こんにちは"
[Safari]
"こんにちは<br>"
"こんにちは
"
"こんにちは"
[Firefox]
"こんにちは"
"こんにちは"
"こんにちは"
```

# 考察
Chromeではテキストの取得方法に関わらず全て同じでした。
一方、SafariとFirefoxでは取得方法によって内容が異なることがわかりました。

もし、contenteditable属性を使ってテキスト内容をチェックする際は注意が必要ですね
（テキストが空かどうかの条件分岐など。ブラウザによって結果が異なってしまう。）

# コードの詳細
[CodePenにもまとめました](https://codepen.io/juno1140-the-vuer/pen/MNXbxZ)
【気体分子運動論】マクスウェルの速度分布を描画してみた！

#概要
気体分子運動論から導かれる分布にマクスウェルの速度分布があります．

今回はその温度依存性および，質量依存性を確かめるグラフを描画してみました．

#動作環境
- Windows10(64bit)
- Python 3.7.2

# マクスウェルの速度分布
マクスウェルの速度分布は以下の式で表されます．

```math
P(v) = 4\pi v^2(\frac{m}{2\pi kT})^\frac{3}{2}\exp{-\frac{mv^2}{2kT}}
```

これより以下の様々な量が計算できます．

- 最確速さ

```math
v_{mp} = \sqrt{\frac{2kT}{m}}
```

- 平均速度

```math
<v> = \sqrt{\frac{8kT}{\pi m}} = \frac{2}{\sqrt{\pi}}v_{mp}
```

- 根二乗平均速度

```math
v_{rms} = \sqrt{<v^2>} = \sqrt{\frac{3kT}{m}} = \sqrt{\frac{3}{2}}v_{mp}
```

#温度依存性

```py:MVF_temperature.py
"""マクスウェルの速度分布の温度依存性を描画するプログラム"""
import numpy as np
import matplotlib.pyplot as plt
import matplotlib.cm as cm

m = 1.67 * 10**-27  # 中性子の質量 [kg]
k = 1.38 * 10**-23  # ボルツマン定数 [J/K]

def Maxwell(a):
    return (2/np.pi)**(1/2) * (v**2*np.exp(-v**2/(2*a**2))/a**3)

fig, ax = plt.subplots()

T = np.array([100*i for i in range(0,11)]) #温度Tの設定
T = T.reshape(1, T.size) #一次元配列はreshape()してから
T = T.T                 #転置する
v = np.linspace(0, 10000, 10000)
a_ = (k*T/m)**(1/2)
p = Maxwell(a_)

ax.set_xlabel(r'$v$')
ax.set_ylabel(r'$p(v)$')
ax.set_title('Maxwell velocity distribution')
ax.grid()
for i in range(0,T.size):
    l = str(T[i])       #T[i]はnumpy.ndarray型なので文字列型に変換
    l = l[1:-1] + "K"   #T[i]は[hoge]となっているのでhogeだけ取り出す
    ax.plot(v, p[i], color=cm.jet(i/T.size), label=l) #jet()の引数は0から1の実数
ax.legend(loc=0)
fig.tight_layout()
plt.show()
```

実行結果は以下のようになります．温度が高い方が，分子はエネルギーをたくさん持っており，元気に飛び回っているので，速度分布も速度方向に広がりが大きくなることがわかりますね．

![temperature_dependency.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/433790/966ef97c-3ebc-fccd-485f-c6a8863574b3.png)


# 質量依存性

```py:MVF_mass.py
"""マクスウェルの速度分布の温度依存性を描画するプログラム"""
import numpy as np
import matplotlib.pyplot as plt
import matplotlib.cm as cm

m_p = 1.67 * 10**-27      # 中性子の質量 [kg]
k = 1.38 * 10**-23        # ボルツマン定数 [J/K]
T = 300                   # 温度[K]

def Maxwell(a):
    return (2/np.pi)**(1/2) * (v**2*np.exp(-v**2/(2*a**2))/a**3)

fig, ax = plt.subplots()

m = np.array([i*m_p for i in range(1,11)]) #温度Tの設定
m = m.reshape(1, m.size) #一次元配列はreshape()してから
m = m.T                 #転置する
v = np.linspace(0, 5000, 10000)
a_ = (k*T/m)**(1/2)
p = Maxwell(a_)

ax.set_xlabel(r'$v$')
ax.set_ylabel(r'$p(v)$')
ax.set_title('Maxwell velocity distribution')
ax.grid()
for i in range(0,m.size):
    l = str(int(m[i]/m_p))
    l = l + r'$m_p$' +'kg'
    ax.plot(v, p[i], color=cm.jet(i/m.size), label=l) #jet()の引数は0から1の実数
ax.legend(loc=0)
fig.tight_layout()
plt.show()
```

実行結果は以下のようになります．質量が小さい方が，分子は身軽なので運動しやすく，速度分布も速度方向に広がりが大きくなることがわかりますね．

![mass_dependency.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/433790/7725f183-95ec-004f-538a-be0fb06ac1ae.png)

#まとめ
いかがだったでしょうか？今回は，マクスウェルの速度分布の温度依存性と質量依存性を描画して確認してみました．
式を追うだけでなく，実際にグラフを書いてみることで発見することや理解が深まることもありますよね．
コードに関して何か建設的なフィードバックなどあればコメントいただけると助かります．
Parcel + Vue.js で素早く環境を作る。

# はじめに
Vue.jsで素早くLPを作らなければならなくなった。
ビルドするのにwebpackやgulpなどがあるが、もっと手っ取り早くできる方法はないかと調べたところ、parcelを発見した。

Parcel公式サイト
https://ja.parceljs.org/

## 準備
簡単に動作確認できるように最低限の準備

### ディレクトリを作って`npm init`

```
$ mkdir hoge
$ cd hoge
$ npm init
```

### 最低限のファイルを作る

```
hoge
├── src
│   ├── index.html
│   ├── index.js
│   └── App.vue
└── package.json
```

``` html:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  
  <div id="app"></div>
  <script src="index.js"></script>

</body>
</html>
```

``` javascript:index.js
import Vue from 'vue';
import App from './App.vue';

new Vue({
    el: '#app',
    render:h => h(App)
});
```

``` vue:App.vue
<template>
  <p>{{ message }}</p>
</template>

<script>
  module.exports = {
    data: function () {
      return {
        message: 'Hello'
      }
    }
  }
</script>

<style lang="scss">
p {
  font-size: 2em;
  text-align: center;
}
</style>
```
scssの必要はないけど、ちゃんと認識されるよってわかるようにつけてみた

## npm install

`vue`と`parcel`をインストール

```
$ npm install --save-dev parcel-bundler vue
```

## buildする
```
$ npx parcel build src/index.html
```
`--out-dir`で出力場所を指定できる（指定しないと`dist`に出力される）

これだけで、ビルドができた。

## serverを立ち上げてみる

```
$ npx parcel start src/index.html
```
2020/02/28 修正
@saba_uni_toro_ さんありがとうございます

`start`はサーバーが立ち上がってリアルタイムで変更を反映してくれる優れもの。
開発中はとりあえずstartしとけばおk

### scriptに追記する
使いやすいように`package.json`の`script`に追記

``` json:package.json
{
  "name": "test-parcel",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "parcel build src/index.html --out-dir public", // 追加
    "start": "parcel src/index.html", // 追加
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "parcel": "^1.12.3",
    "vue": "^2.6.10"
  },
  "devDependencies": {
    "@vue/component-compiler-utils": "^3.0.0",
    "sass": "^1.22.9",
    "vue-template-compiler": "^2.6.10"
  }
}
```

この設定をいれておけば`npm run start`、`npm run build`で完結するので良き。

# 便利なプラグイン
* parcel-plugin-static-files-copy  
プロジェクト直下（package.jsonがあるとこ）にstaticディレクトリを作って、  
ファイルを放り込むと、buildするときにstatic内のものをコピーしてくれる。  
`cp static/* public`みたいな感じ。  

# まとめ
実質、parcelインストールしてbuildすれば終わり。
めちゃめちゃ楽だった。

## 懸念点
* buildするたびにファイルが増える現象がある。  
下記のコマンドを`package.json`のbuildの先頭に書いて一度全削除してbuildし直してもらうことで対応はできる。

```
ls -ad public/* | grep -v -E '^\\.$|^\\.\\.$' | xargs rm -rf
```

* 出力されたpublicを見ると全て展開されてごちゃごちゃになっていた。  
まとめる方法ないかなぁ...
time型で日付またぐ場合も考慮したスコープを追加する

## やりたいこと

指定した時間内に存在する `Hoge`  （`hoges`テーブル） モデルの一覧を取得したい。 

カラム名は以下の通りでいずれも time型である

-  開始時間（`start_time`）
-  終了時間（`end_time`） 


ただし、 end_time < start_time の場合もあり、その場合は日付をまたいでいるとして扱いたい。


## やったこと

[日付をまたぐ場合も考慮した時間内判定](https://qiita.com/amoO_O/items/9fc9c940d78f4f3758a9) のロジック持つスコープを用意した。

```ruby
scope :open_at -> (datetime: Time.current) do
   where("
      CASE WHEN (hoges.start_time <= events.end_time)
      THEN (hoges.start_time <= :time AND :time < hoges.end_time)
      ELSE (:time < hoges.end_time OR hoges.start_time <= :time)
      END",
      time: datetime.to_s(:time))
end
```
3重化システムは2重化冗長より稼働率が低くなることがある

# 概要

zookeeperなどの3重化システムの稼働率を計算すると、2重化冗長より悪くなることがあります。
その理由を解説いたします。

# 前置き

Kafka(Confluent)を取り扱うようになりました。
KafkaやHadoopで利用されているzookeeperの冗長は3重化ですよって言うと、最近は2重化ではシステム停止になることがから3重化でより稼働率を上げるのが普通なのですねって言われました。でも、実はzookeeperなどえ利用されている3重化システムの稼働率は、2重化より悪くなるんです。そして、その理由などを納得していただくことは非常に難しかったので、3重化について詳しく解説したいと思います。

# 3重化の考え方

## 3重化されたzookeeperの障害時の動作について

3重化されたzookeeperは、障害時に以下のような動作をします。

|稼働中サーバ|故障中サーバ|サービス影響|
|---|---|---|
|3台|0台|正常運用|
|2台|1台|運用継続(縮退運用)|
|1台|2台|運用停止(復旧停止)|
|0台|3台|全停止|

注意すべきは、2台故障時に運用が止まることです。

# 稼働率の計算

分かりやすく比べるために、稼働率0.9のサーバで2重化と3重化の状態を以下の通り記しました。

* 2重化の場合

||サーバA|サーバB|この状態になる確率|
|---|---|---|---|
|①|正常|正常|$0.9\times 0.9=0.81$|
|②|正常|故障|$0.9\times (1-0.9)=0.9$|
|③|故障|正常|$(1-0.9)\times 0.9=0.9$|
|④|故障|故障|$(1-0.9)\times (1-0.9)=0.01$|

システム稼働率は、①+②+③=0.99
計算式: $ (1-x)^2 $

* 3重化の場合

||サーバA|サーバB|サーバC|この状態になる確率|
|---|---|---|---|---|
|①|正常|正常|正常|$0.9\times 0.9\times 0.9=0.729$|
|②|正常|正常|故障|$0.9\times 0.9\times (1-0.9)=0.081$|
|③|正常|故障|正常|$0.9\times (1-0.9)\times 0.9=0.081$|
|④|故障|正常|正常|$(1-0.9)\times 0.9\times 0.9=0.081$|
|⑤|正常|故障|故障|$0.9\times (1-0.9)\times (1-0.9)=0.009$|
|⑥|故障|正常|故障|$(1-0.9) \times  0.9 \times  (1-0.9)=0.009$|
|⑦|故障|故障|正常|$(1-0.9)\times (1-0.9)\times 0.9=0.009$|
|⑧|故障|故障|故障|$(1-0.9) \times  (1-0.9) \times  (1-0.9)=0.001$|

zookeeperの場合、2台正常でなければならないので、①～④が稼働中のため
稼働率は　①＋②＋③＋④ = 0.972
計算式: $ x^3 + 3(1-x)x^2 = (3-2x)x^2 $

# 稼働率の比較

上記の通り2重化では99%の稼働率があるのに3重化すると97.2%に下がることが分かります。
この通り、必ずしも3重化システムが稼働率が高くならないこなります。
（注意）
3重化システムでも、全てが1台でも正常であれば稼働中となれば、稼働率は99.9%となり2重化より高いくなります。

# 3重化システムの目的

zookeeperの場合、HadoopやKafkaなどから現状を常に更新しており常に正しいデータを保持しており
正しいデータがあれば、それほど苦にならず復旧を行うことができますが、データ破損するとシステム復旧が困難になるだけではなく
大事な顧客のデータなどが消失してしまいます。
困難な復旧作業になるぐらいなら、1時的にシステムを止めて復旧を楽にする考えがあるので、2台故障時はデータ保護（動作を止めてデータの更新をさせなくする）ことでより大きな障害になることを防いでいるのです。
これは、万が一の障害時が起きても2次被害3次被害を出さないため最善の策です。

# まとめ

3重化システムの場合の2台故障を稼働中とすると2重化冗長より稼働率が悪くなります。
ただし、3重化は2次被害、3次被害を起こさせず正常リカバリ化するための必要な方法です。

（補足）
全ての3重化システムがこの稼働率計算に当てはまるわけではありません。必ず、2台故障時の動作を確認するようにお願いします。
「gulp-sftp-up4」を使って、gulpからSFTPアップをする

## 目的
gulpで、ファイルのSFTPアップがしたい。
Gitで、コミット履歴からパスコピーしたものを元に、指定したファイルだけアップをしたい・

## やったこと
`gulp-sftp`は、知っていたので使ってみたが、gulp4で使えなかった。
[gulp-sftp-up4](https://www.npmjs.com/package/gulp-sftp-up4)があった。

```
npm install gulp-sftp-up4 --save-dev
```

## gulpfile.js

```js
var fs = require('fs');
//設定ファイル
var ftp = JSON.parse(fs.readFileSync('config/ftp.json', 'utf8'));

var gulp = require('gulp');
var sftp = require('gulp-sftp-up4');

// パス指定アップ
// 「upload」の後に「--」つけて「,」で区切る（スペースは入れない）
// npx gulp upload --aa/bb/ccc.html,aaaa.html
gulp.task('upload', function (done) {
  var npm_script_arg = process.argv.slice(3);
  var pathList = npm_script_arg[0].replace('--', '').split(',').map(function(v){
    let arrPath =  v.split('/');
    if(arrPath[0] === '') {
      arrPath.shift();
    }
    if(arrPath[0] === 'src') {
      arrPath.shift();
    }
    // 階層を保持してアップするため「**」つける
    arrPath.unshift('**');
    arrPath.unshift('src');

    // src/**/〜〜
    return arrPath.join('/');
  });

  gulp.src(pathList)
    .pipe(sftp(ftp));
  return done();
});

// srcフォルダの中身をごっそりアップ
gulp.task('upload-all', function (done) {
  gulp.src([
    'src/**/*'
  ])
  .pipe(sftp(ftp));
  return done();
});
```

### 備考
FTP情報は`config/ftp.json`で管理。
CSSで隣接する兄弟要素 「+」 はめちゃ便利

#なぜ兄弟要素 + は便利なのか？

私は仕事でWEBシステム作っています。
なので基本的にデータは可変だし、
タグについてもシステム側からはき出されたりするので、色々想定して作らないといけない。

そういう時に僕は隣接する兄弟要素を指し示してくれる「+」をよく使います。

CSSを始めたばっかりの時は、
「なんやこれ！使い道なくね？」とか思ってたけど、
今はこれがないと生きていけない体になっちゃいました。

正味、可変じゃなくて固定されたレイアウトだとあんま「+」使う意味ない。

でも仕事していると、よくこんなことがあるのよ。

・ユーザがタイトルを入力しないとそのタグごと無くなる
・チェック入れたら、どこかに新たにタグが表示される
・何かの拍子にモードチェンジし、その時は親wrapperにそれ用のclassがつく

そんなフレキシブルMAXなシステムに対応するために、この「+」を使います。

例えば

```
　<div>
　　　<h1>タイトル</h1>
　　　<h2>サブタイトル</h1>
　　　<p>これは文章じゃ</h1>
　</div>
```

みたいなタグがあったとします。

当然margin入れるときはこう書きます。
※他にも書き方はあります。

##兄弟要素 + を使わない場合
```
　h2 { margin-top: 8px;}
　h3 { margin-top: 15px;}
```

でもこれじゃ、システム側でh1のタイトルの入力がなかった場合、
h1のタグ自体なくなっちゃったら...
h2の上に不要なmargin-topがでる。

いやいや！それじゃh1にmargin-bottom入れればいんじゃね？って思うけど、
h2もh3も入力がなかった場合に、h2もh3も無くなるから
またまたh1の下に余分なmargin-bottomができちゃうでしょ？

なので、そういう時に「+」使うんですよ。こうします。

##兄弟要素 + を使う場合

```
　h1 + h2 { margin-top: 8px;}
　h1 + h3 { margin-top: 15px;}
　h2 + h3 { margin-top: 15px;}
```

「h1の次の兄弟要素のh2にマージン入れましょ。」
「h1の次の兄弟要素のh3にマージン入れましょ。」
「h2の次の兄弟要素のh3にマージン入れましょ。」

だからこういうことよね、、、基本的にみんなmarginなし！
そうなる場合だけCSSを入れることができる。便利！


##応用編
####スイッチの切り替え

「+」を使うとこんなこともできちゃう。

チェックボックスをスイッチをにして、
要素の表示・非表示の切り替えをCSSのみで作れます。


```
　<input type="checkbox">
　<div class="area">表示・非表示切り替えエリア</div>
```

```
　.area { display: none;}
　[type="checkbox"]:checked + .area {
　　display: block;
　}
```

めっちゃ簡単にかいたけど、
表示・非表示切り替えエリアのclassを.areaとしてまずは非表示にします。

その次の記述がミソで
[type="checkbox"]:checked + .area
↑チェックが入ったチェックボックスの次にある要素、
この場合.areaですね。

これで.areaのdisplayが上書きされて、block要素となり、表示されます。
チェックボタンを非表示にして、仮でボタンを作ることもできます。


```
　<label for="showButton">ボタン</label>
　<input type="checkbox" id="showButton">
　<div class="area">表示・非表示切り替えエリア</div>
```

```
　.area { display: none;}
　[type="checkbox"] {display: none;}
　[type="checkbox"]:checked + .area {
　　display: block;
　}
```

要はlabelタグのfor=""とcheckboxのid=""をつなげればいい。
後はcheckboxのdisplayを消せばいい。
labelがcheckboxの代わりをしてくれるわけです。

あとは好きにボタン装飾するなり、area内になんかの要素をいれたりすれば
アコーディオンとかできちゃうわけ。

ということで、小技にはもってこいの隣接要素「+」でした。
階層型データ構造の長所と短所まとめ

# 階層型データ構造

一つの親を持ち、一つ以上の子を持つような階層型データはよくあると思います。
しかし、あまり深く考えずに設計してしまうと、あとあとうまくSQLが書けなくて困ったりします ( 自分は困りました )。
「SQLアンチパターン」の第2章にこのような階層型データの格納について詳しく載っていたので、簡単にまとめてみました。
「SQLアンチパターン」にはそれぞれの長所と短所についてより詳しく解説してありますので、もっと知りたい方は読んでみることをお勧めします。

## 案その1: 隣接リスト
`parent_id` などの名前で、同じテーブル内の別の行を参照する方法です。
私自身も目にしたことがある、よくある方法だと思います。
実際の業務で行うかは別にして、下記のように外部キー制約をつけることもできます。

```sql
CREATE TABLE Users (
 id        SERIAL PRIMARY KRY,
 parent_id BIGINT UNSIGNED,
 name      VARCHAR(255),
 FOREIGN KEY (parent_id) REFERENCES Users(id),
);
```

### 長所
- 直近の子供の取得が簡単
- 子供の追加が簡単
- 親の変更が簡単
- 参照整合性を維持できる
- 再帰クエリがサポートされているデータベース製品なら無問題

### 短所
- すべての子孫、先祖を取得するクエリを書くのが困難 ( どう頑張っても非効率 )
- すべての子孫の削除が困難 ( 外部キー制約時に ON DELETE CASCADE を付ければできる )
- 子供の削除の際にそのさらに子供を昇格させるのが面倒

## 案その2: 経路列挙 (Path Enumeration, Materialized Path)
UNIX のパス /usr/local/lib/ は、ファイルシステムの経路列挙です。 usr が local の親、ということですね。
これを先ほどの `Users` テーブルに当てはめるには、 `parent_id` 列の代わりに `path` という列を大きめの VARCHAR として定義します。

### 長所
- すべての子孫や先祖の取得や削除が容易
- 子供の追加も行える ( 案その1の方が楽 )

### 短所
- 無効なパスをデータベースが検出できない ( アプリケーションコード頼みになる )
- パスの長さに制限がある。

## 案その3: 入れ子集合 ( Nested Set )
直近の親ではなく、子孫の集合に関する情報を `nsleft`, `nsright` という数値で管理する方法です。
`nsleft` にはそのすべての子孫の値よりも小さな値が、 `nsright` にはそのすべての子孫の値より大きな値が入ります。この値は `id` とは関係ありません。

正直個人的にこの方法はかなり頭を捻らないとクエリを書くことが難しいと感じました。慣れるまで大変だと思います。

### 長所
- とある子供を削除すると、そのまた子供が削除された親の子供だと自動的にみなされる ( 長所となるかは仕様によります。ある意味要注意です。)

### 短所
- 直近の親子へのクエリ実行が煩雑
- 子供の追加や親の変更が複雑
- 削除が難しい

## 案その4: 閉包テーブル ( Closure Table )
閉包テーブルは、直接の親子関係だけではなく、階層全体のパスを格納します。
先ほど例に挙げた `Users` テーブルに加えて、`TreePaths` テーブルを新たに定義します。
下記のように、外部キー制約をつけることもできます ( 実際の業務で行うかは別として ) 。
このテーブルの各行には先祖、子孫関係の組み合わせをすべて格納します。
また、自分自身を参照する行も追加します。


```sql
CREATE TABLE Users (
 id        SERIAL PRIMARY KRY,
 name      VARCHAR(255),
);
```

```sql
CREATE TABLE TreePaths (
 ancestor    BIGINT UNSIGNED NOT NULL,
 descendant  BIGINT UNSIGNED NOT NULL,
 PRIMARY KEY (ancestor, descendant),
 FOREIGN KEY (ancestor) REFERENCES Users(id),
 FOREIGN KEY (descendant) REFERENCES Users(id)
);
```

また、この方法に関しては、下記のサイトで詳しく述べられていたので参考になるかと思います。
https://enomotodev.hatenablog.com/entry/2015/11/19/235300

### 長所
- 先祖や子孫の取得が容易
- 新しい行の挿入が容易
- 一行の削除が容易
- ツリー全体の削除が容易
- 構造を削除してもデータそのものは消えない ( 要注意 )
- 参照整合性の維持が可能

### 短所
- 構造を削除してもデータそのものは消えない ( 要注意 )
- テーブルが二つになる ( ロックなど注意が必要 )
- 階層が深くなると多くの行数が必要になる

## 個人的な所感
直接の子供と親だけを取得できれば十分な場合は、「隣接リスト」がもっともわかりやすく、馴染みがあるため採用されやすいと思います。
しかし、すべての子孫や先祖など、「ツリーへのクエリの実行」が必要なのであれば、「閉包テーブル」がもっとも優れているのではないでしょうか。「経路列挙」でもツリーへのクエリの実行は可能ですが、上で記した短所のことを考えると「閉包テーブル」に軍配が上がりそうです。
ただ、どの方法をとったとしても階層関係を表現するのは簡単ではないと感じました。先ほど優れていると述べた閉包テーブルに関しても、デメリットがないわけではないですし、親子の循環関係などをデータベース制約で防ぐことはできません。
割とよくある階層型データの格納ですが、かなりの覚悟を持って挑む必要がありそうです。
VScodeを完全にアンインストールする方法(windows10)「拡張機能のホストが予期せずに終了しました。」を改善するために

# はじめに

しがない地方大学院生をしています、Sotaです。
プログラミング初心者であるため、内容に誤りがあるかもしれません。
もし、誤りがあれば修正するのでどんどん指摘してください。  

今回は研究室のVScodeが「拡張機能のホストが予期せずに終了しました。」と吐き，
拡張機能が死んでデバッグできなくなったので，その対処法としてVScodeを一度完全にアンインストールしました．
結果は，改善されませんでしたが，アンインストールする方法を記録しておきます．

#windows10でVScodeを完全にアンインストールする方法

まずは，コントロールパネルからVScodeをアンインストールします．
しかし，これだけだと拡張機能や各種設定は残ったままです．
そのため，再インストールしても改善されませんでした．

そこで，保存されている設定や拡張機能を削除します．

ユーザー設定（settings.jsonファイル）や表示言語設定（locale.jsonファイル）などを削除するには
C:\Users\<ユーザー名>\AppData\Roaming\Code
をフォルダごと削除してください．

拡張機能は次にC:\Users\<ユーザー名>\.vscode
をフォルダごと削除してください．

#さいごに
ネットで調べていると，まれにこの症状に出くわす方がいるみたいです．
この方法で改善された方もいれば，改善されずしばらくたってからアップデートすると改善された方もいるみたいです．
自分は5分ほど直りましたが、結局クラッシュし，涙を流している最中で，しばらくはspyderに移行しようと思います．

#追記（直りました）

VSCodeのバージョンを1.37.1にアップグレードしたら直りました．
【SQLServer】sqlcmdで使えるスクリプト変数について（setvar コマンド）

# overview

batでsqlを実行する場合はsqlcmdを使うことが多いかと思います。
サーバ名やユーザ情報の指定の仕方は知っていましたが、
setvar コマンドなるものを今回初めて知ったので備忘録として残します。


↓よく使用する変数

| 変数       |    パラメータ    |
|:-----------------|:------------------:|
| SQLCMDUSER|        -U|
| SQLCMDPASSWORD|       -P|
| SQLCMDSERVER|        -S|
| SQLCMDDBNAME|         -d|


[sqlcmd - スクリプト変数の使用](https://docs.microsoft.com/ja-jp/sql/ssms/scripting/sqlcmd-use-with-scripting-variables?view=sql-server-2017)


# setvar コマンドについて

$()の表記でSQL構文の中に埋め込むことができます。

```sql:
SELECT x.$(ColumnName)
FROM Person.Person x
WHERE x.BusinessEntityID < 5;
```
```sql:
SELECT x.$(ColumnName)
FROM $(TableName)
WHERE x.BusinessEntityID < 5;
```

t-sqlでは変数としてはdecraleがありますが、
あくまで値やテーブルの格納となるため、
スクリプト変数のようにカラム名やテーブル名として使うことはできません。

# 値の渡し方

引数（-v）として渡すことができます。

```sql:
sqlcmd -v ColumnName ="FirstName" -i c:\testscript.sql
```

また、ファイル内での宣言もできます。

```sql:
:setvar DataBaseName "db1"
:setvar ColumnName "col1"
:setvar TableName "table1"

use $(DataBaseName)

SELECT x.$(ColumnName)
FROM $(TableName)
WHERE x.BusinessEntityID < 5;
```
　
外からパラメータを渡せるというメリットと、
今までこういうことをやろうと思うと、
文字列結合して exec等で実行という感じでしたが、
別の手法があるというのを知れました。

# ssmsでsetvalコマンドを使う方法

setvalコマンドはsqlcmdで使えるスクリプト変数のため、
t-sqlを書くssmsでは一見使えなさそうに思えます。

が、sqlcmdモードに切り替えることで使えるようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/124594/2101320c-b3f0-12db-b7fe-0ba0730c3a34.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/124594/80872b07-5708-15dc-5caf-b8c4fab84397.png)
Python + Jinja2 でデータを HTML に埋め込んで JavaScript 側から利用する

[HTML に JSON データを埋め込んで JavaScript から利用する - Qiita](https://qiita.com/hoto17296/items/197bdf91f97a33a69dfc)

> サーバのデータをクライアントサイドの JavaScript で扱いたいとき、API を用意して取得する方法が一般的だが、もっと簡易的な方法として HTML に JSON データを埋め込むという方法がある。

これを Python + Jinja2 でやる、という話。

まず、こういう Jinja2 カスタムフィルタを作る。

``` python
import json

def jinja2_embed_as_json_filter(data, name: str) -> str:
    """データを HTML に埋め込んで JavaScript から利用できるようにする Jinja2 フィルタ"""
    json_str = json.dumps(data).replace('<', r'\u003C').replace('>', r'\u003E')
    return f'<script type="application/json" id="{name}">{json_str}</script>'
```

例えば aiohttp を使っている場合はこんな感じでカスタムフィルタを追加する。

``` python
import aiohttp_jinja2

aiohttp_jinja2.setup(
    app,
    # その他の引数は省略
    filters={'embed_as_json': jinja2_embed_as_json_filter}
)
```

Jinja2 テンプレート内ではこんな感じで使う。
ここでは変数 `week` には `['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']` がセットされているものとする。

```
{{ week | embed_as_json('week') | safe }}
```

これは以下のように変換される。

``` html
<script type="application/json" id="week">["Sun","Mon","Tue","Wed","Thu","Fri","Sat"]</script>
```

ブラウザ側 JavaScript ではこんな感じで利用できる。

``` javascript
var week = JSON.parse(document.getElementById('week').textContent);

console.log(week); //=> ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]
```
Python/ProofreadingAPIとTalkAPIで校閲+雑談LINEbot

##はじめに

A3RTの便利なAPIを使わせて頂き、HerokuとPythonで
LINEで文章を送ると校閲をして返してくれるBotを作りました

学習中の身ですので変な部分や間違い等あるかもしれません
よろしければご指摘頂けると幸いです

## 環境
Windows 10
Python　3.7.3
Flask 0.12.2
line-bot-sdk 1.6.0

##前提
Line developers登録済
Heroku連携でオウム返しが出来る状態

##コード
イベント部分のみです

```main.py
import json
import requests

@handler.add(MessageEvent, message=TextMessage)

def handle_message(event):
    talk_key = "" # TalkAPIのAPIKEY
    proof_key = ""　#ProofreadingのAPIKEY
    push_text = event.message.text

    if u"校閲して" in push_text:#校閲する場合の処理
        proof_push =  push_text.replace('校閲して', '')
        proof_endpoint = "https://api.a3rt.recruit-tech.co.jp/proofreading/v2/typo"
        params = {'apikey': proof_key,'sentence':proof_push}
        r = requests.get(proof_endpoint,params)
        data = json.loads(r.text)
        reply_text = data["checkedSentence"]
    else:#校閲しない場合（雑談）の処理
     　 endpoint = "https://api.a3rt.recruit-tech.co.jp/talk/v1/smalltalk"
        params = {'apikey': talk_key,'query':push_text}
        r = requests.get(endpoint,params)
        data = json.loads(r.text)
        reply_text = data['results'][0]['reply']

    line_bot_api.reply_message(event.reply_token,TextSendMessage(text=reply_text))

```
TalkAPIは雑談用、ProofreadingAPIは校閲用で
どちらもA3RTのプロダクトですが別のAPIKEYが必要です
https://a3rt.recruit-tech.co.jp/product/
こちらでメールアドレスのみで取得できます

受け取った文字列を校閲か雑談で分岐後、
校閲の場合はその旨のみ文字列から削除し、APIへリクエストします
戻ってきたデータから必要なもの(checkedSentenceやreply)を
取り出してreply_textとしてLINEbotへ返します

デプロイやオウム返しBOTの作成についてはいい記事が
沢山ありますのでそちらをご参照ください

以下、私が参考にした記事です

##参考記事
https://miyabi-lab.space/blog/21
https://qiita.com/kro/items/67f7510b36945eb9689b
https://qiita.com/suigin/items/0deb9451f45e351acf92
ARCoreのAugmentedImageを実行時に登録する

GoogleARCoreの `AugmentedImage` で使用するマーカー画像をプログラム実行時に登録する必要があったので、リファレンスを読んでみたところ簡単にできるようなので、やってみた備忘録。
やってることは[リファレンス](https://developers.google.com/ar/reference/unity/class/GoogleARCore/AugmentedImageDatabase#classGoogleARCore_1_1AugmentedImageDatabase_1a9841d6950bc04d118b767a0a10dcccd3)そのままなのですが日本語記事がなかったのでメモしておきます

## 概要

GoogleARCore には `AugmentedImages` という機能があり、予め登録しておいた画像をARアプリから読み取ってARマーカーとして利用することができます。

以下のページのように現実風景の画像を拡張してトリックアートのように見せたりするような応用ができます。

> [Recognize and Augment Images](https://developers.google.com/ar/develop/java/augmented-images/)

`AugmentedImages` はサンプルを参考にすれば簡単に`Unity`などで利用できますが、サンプルプログラムは予め使用するイメージを登録してからビルドするものでしたが、公式リファレンスを読むとプログラム実行時に画像を登録できるようなので、備忘録を兼ねて紹介します。

なおここでは `Unity` への `ARCore` の導入などの方法については紹介しません。以下のQuickStartや記事が参考になると思います。

- [Quickstart for Android](https://developers.google.com/ar/develop/unity/quickstart-android)
- [ARCoreを簡単にUnityで始める](https://qiita.com/norihirosunada/items/4fad091c152249fe53f1)

### 今回作ったもの

`Firebase` を使って `AugmentedImage` のマーカー画像をオンラインで管理し、マーカーを動的に登録できるようにして、現実空間の風景や看板をマーカーとして利用し、ARで道案内するアプリを作成しました。
ソースコードや解説記事は時間がないのでまた後日書きます。。

## やり方

### 準備

Unityプロジェクトを立ち上げて、ビルドする Scene に `ARCore Device` プレハブと `Enviromental Light` プレハブを追加しておきます。
次に`ARCore Device` のインスペクタに任意の `Session Config` がアタッチされ、さらにその `Session Config` のインスペクタに `AugmentedImageDatabase` がアタッチされているのを確認します。ここにアタッチする `SessionConfig` や `AugmentedImageDatabase` はデフォルトのものでも何でもいいです。 `AugmentedImageDatabase` にあらかじめ画像が登録されている場合、その画像も実行時に読み取り可能になります。また、コンパイル時にAugmentedImageDatabaseに一枚も画像が登録されていない場合、エラーになるようです。

### 画像を登録

`ARCoreDevice` にアタッチされている `ARCoreSessionConfig` に対して
`SessionConfig.AugmentedImageDatabase.AddImage(name, texture2d, width)` で登録できます。

- `name` はその画像の名前を示す`string`型
- `texture2d` は画像の`Texture2D`
- `width`はその画像の実空間での横幅[m]を表す`float` 型

戻り値は登録した画像の `AugmentedImageDatabase` 上でのインデックス(`int`)で、後述するようにその画像の品質(読み取りやすさのスコア)などの情報を取得する際に使用します。

### 画像のクオリティを確認する

登録した画像のARマーカーとしての読み取りやすさを示すスコア(0~100)を以下のようにして確認することができます。
(Qualityが`string`型なのに注意してください。)
Googleの公式ページによればスコア75以上が推奨されています。

`string score = SessionConfig.AugmentedImageDatabase[index].Quality;`

## まとめ

公式リファレンス通りにやれば簡単にできますが、意外とやっているひとが少ないようなので今回記事にしてみました。
動的に画像を登録できることでやれることが結構増えると思うので、色々試して記事にしてみてください:thumbsup:
Express.js で charset を UTF-8 以外にする方法

Express.js はデフォルトの charset として UTF-8 が設定されます。
ほとんどのケースではこの振る舞いで問題はないのですが、クライアント側が UTF-8 を認識／取り扱いできないようなケース（IoT クライアントなど）で問題が発生します。

Express.js でレスポンスを返す場合、以下のようにすると思います。

```js
router.get('/foo/var/baz', (req, res) => {
  res.status(200)
  res.set('Content-Type: text/csv; charset=us-ascii')
  res.send('key,value\r\nhoge,fuga\r\npiyo,puyo')
})
```

このサーバに対して curl でリクエストを送ると、以下のようになります。

```shell-session
$ curl -i localhost:3000/foo/bar/baz
HTTP/1.1 200 OK
X-Powered-By: Express
Content-Type: text/csv; charset=utf-8
Content-Length: 31
ETag: W/"1f-l8FL4++qBiqYIj/prv0x2jtd7e8"
Date: Fri, 09 Aug 2019 03:05:26 GMT
Connection: keep-alive

key,value
hoge,fuga
piyo,puyo
```

Content-Type が勝手に UTF-8 に書き換わっています。

これは [Charset UTF-8 appended to Content-Type when using res.json · Issue #2921 · expressjs/express](https://github.com/expressjs/express/issues/2921) によるとどうやら仕様のようで、要約すると：

> If you leave it up to us to choose UTF-8, we're going to modify your Content-Type header, that's just how it is.
>
> UTF-8 を選択するのであれば、私達の方でで Content-Type ヘッダを変更するのでお任せください。
```

ということです。

任意の charset を指定したい場合は、以下のように行います。

### Buffer を使用する

```js
router.get('/foo/var/baz', (req, res) => {
  res.status(200)
  res.set('Content-Type: text/csv; charset=us-ascii')
  res.set('Content-Type', 'text/csv; charset=us-ascii')
  res.send(Buffer.from('key,value\r\nhoge,fuga\r\npiyo,puyo'))
})
```

```shell-session
$ curl -i localhost:3000/foo/bar/baz
HTTP/1.1 200 OK
X-Powered-By: Express
Content-Type: text/csv; charset=us-ascii
Content-Length: 31
ETag: W/"1f-l8FL4++qBiqYIj/prv0x2jtd7e8"
Date: Fri, 09 Aug 2019 03:09:53 GMT
Connection: keep-alive

key,value
hoge,fuga
piyo,puyo
```

これが最も簡単な対応方法だと思います。

### write/end を使用する

```js
router.get('/foo/var/baz', (req, res) => {
  res.status(200)
  res.set('Content-Type: text/csv; charset=us-ascii')
  res.write('key,value\r\nhoge,fuga\r\npiyo,puyo')
  res.end()
})
```

```shell-session
$ curl -i localhost:3000/foo/bar/baz
HTTP/1.1 200 OK
X-Powered-By: Express
Content-Type: text/csv; charset=us-ascii
Date: Fri, 09 Aug 2019 03:06:47 GMT
Connection: keep-alive
Transfer-Encoding: chunked

key,value
hoge,fuga
piyo,puyo
```

この方法は Buffer を使用する方法と異なり新たにオブジェクトを生成しないのですが、Transfer-Encoding が chunked になり、Content-Length ヘッダがなくなってしまいます。
Railsでカラムのデフォルト値を変更する方法

## Migrationファイルの作成

railsでデータベースに変更を加える場合はまずはマイグレーションファイルを作成することになります。

```shell
rails generate migration [マイグレーションファイル名]
```

コマンドでマイグレーションファイルを作成する。マイグレーションファイルのファイル名は変更するテーブル名やカラム名をどう変更するのかなどを書くと良いです。

仮に今回はuserテーブルのis_flagカラムをfalseからtrueに変更することにするので、マイグレーションファイル名はchange_is_flag_default_on_usersとします。特にファイル名などを書いておくと、マイグレーションの数が増えた時にファイルを見つけやすくなったりするので大事です。

## change_column_defaultメソッドでカラムのデフォルト値を変更する

change_column_defaultメソッド使うとマイグレーションファイルのchangeメソッドは以下のようになります。usersテーブルのデフォルト値をfalseからtrueに変更するので、

```ruby
def change
  change_column_default :users, :is_flag, from: false, to: true
end
```

以前はchange_column_defaultメソッドの存在を知らなかったので、

```ruby
def up
  change_column :users, :is_flag,:boolean, default: true
end

def down
  change_column :users, :is_flag,:boolean, default: false
end
```

のように冗長な書き方をしてしまっていました。

change_column_defaultメソッド使う利点として、デフォルト値をシンプルに設定出来るだけでなく、rails db:rollbackコマンドでデータベースをロールバックさせる際に特に有効でupメソッドとdownメソッドの２つのメソッドを用意することなくrails db:rollbackを実行出来ることも利点の１つになります。

以上の理由からRailsのマイグレーション機能でカラムのデフォルト値を変更する場合にはchange_column_defaultメソッドを積極的に使用するようにすると良いと思います。
react-native-web でカスタムフォントを設定する

## まえがき

font family を指定するのにすこし手こずったのでメモ。

## まとめ

```html
<style>
    body * {
        font-family: Helvetica, Arial, sans-serif !important;
    }
</style>
```

を HTML に指定する。

単に body に対して font-family をあててても、react-native か react-native-web が内部で指定しているっぽい sans-serif に負けてしまうので、もっと厳密に要素に対してあてる必要があった。
`*` を使いたくなければ、 `div, span, a, input, textarea, h1, h2, h3, h4, h5, h6 { ... }` って感じで使いそうな要素に対して使えばいいのではないでしょうか。たぶん。

私はグローバルなスタイルは HTML に書くか CSS ファイル用意してそこに書くかで良いんじゃないか派なのでこうしました。CSS in JS 的な書き方は知りません。
Vuzix Bladeでできること（Alexa正式対応とはなんなのか）

![blade.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15074/c3e707aa-bae7-34e5-774d-c11f38129bc3.jpeg)

## Vuzix Bladeとは

Vuzixのスマートグラス。
2019/2にコンシューマ向けモデルが10万円ほどで発売されました。
2019/7にAlexa正式対応とのことで、試してみました。

## できること

Vuzix App Storeから利用できるアプリをインストールできます。
https://www.vuzix.com/appstore?appIsPaid=false&deviceFilter=blade

Bladeでフィルタリングすると、現在68個のアプリがあります。

![スクリーンショット 2019-08-09 10.31.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15074/bacf52d1-2ffe-4e75-4ffa-573e461fcb53.png)

個人的には、DJIのドローンアプリも気になるところですが、Amazon Alexaアプリの使い勝手について書きたいと思います。

## Bladeの操作方法

Bladeでは右目のレンズの一部がディスプレイになっていて、右目の外のフレームをタッチしたり、スワイプしたりして操作ができます。

操作コマンド
https://support.vuzix.jp/s/article/Interaction-Methods-for-the-Blade

ホーム画面にはインストールしたアプリが表示され、アルファベット順に並んでいます。

## Amazon Alexaアプリについて

Alexaアプリを開き、Echo Dotなどのスマートスピーカーと同じような感じで、Alexaアカウントと連携をします。（ログイン認証するだけです）

あとは「Tap for Alexa」という選択肢をタップすると、Alexaの聞き取りモードになっているので、
有効になっているカスタムスキル「[回想新聞](https://www.amazon.co.jp/Headwaters-%E5%9B%9E%E6%83%B3%E6%96%B0%E8%81%9E-for-Alexa/dp/B07S91M88Y)を開く」や「天気教えて」というと、Alexaが反応してくれます。

ちなみに、Bladeはスピーカーがついてないので、付属のBluetoothイヤホンと接続するか、
付属のType-B to Type-B + イヤホンジャックのコードにイヤホンをさして、聞くことができます。

Bluetoothイヤホンのほうが見た目はいいですが、スマホとBladeを同時に接続はできなさそうだったので（これはやり方あるかも）、試すのはイヤホン接続がいい気がします。

BladeのスキルはAlexa的に画面なしのデバイス扱いのようなので、画面付きデバイスのみの対応スキルは使えません。いつかアップデートされるかもです。

## 音声操作について

Bladeの設定に音声認識という項目があり、それを有効にすると、音声コマンドが使えるようになります。

使えるコマンドは、スマホアプリで「音声コマンドリスト」を確認することをお勧めします。

言語設定を日本語にしていても、コマンドリストは英語です。コマンドはネイティブっぽく発話しないと聞き取り辛い気がします。

で、ここからは僕が試した感じです。

音声操作をするには「hello vuzix」と言って、音声操作可能な状態にしてから、コマンドを喋ります。

### ディスプレイに画面が表示されている場合（スリープモードじゃない）
「hello vuzix」コマンドは結構反応してくれます。これ自体は音声認識開始のコマンドっぽいので左下に丸いマイクっぽいのが表示されるだけです。
続けて、「hey alexa」コマンドは結構反応してくれます。

### ディスプレイに何も表示されていない場合（スリープモード）
「hey alexa」コマンドをいきなり使うことができます。ただ、なかなか聞き取らないことがあります。
Alexaの反応音が「ピコン」となったら、続けて「回想新聞を開いて」とか言います。
（スキル起動に時間がかかって不安になりますが、反応音までなったら大体成功しています）

ディスプレイには何も表示されず、イヤホンからはスキルの音声が流れてきます。

## 感想

Vuzix Blade自体は、まんまAndroidです（アプリはapkをインストールします）

Alexa対応というのはAVSを組み込んだAndroidアプリをBlade向けに開発したから、
BladeでAlexaが使えるという話のようです。
https://developer.amazon.com/ja/alexa-voice-service/sdk

手での操作は、ちょっと触ればすぐ慣れると思います。かけ心地もVRゴーグルと比べると全然いいですし、疲れません。

音声操作はかなり慣れが必要だと思いました。正直、手で操作したほうが全然ストレスレスです。

次は、Bladeのお勧めスキルやイケてないところなどについて書こうかと。
Gitで２つのcommitをまとめる方法

# Gitのcommitをまとめる必要性

業務でGitやGithubを使用してチーム開発を行う際は特に、プルリクエストを作成する前にcommitをまとめる必要になる場合がある。

理由としては自分以外の人がブランチやコミットからコードの変更内容を確認する際にコミットがバラバラになっていたりすると、内容を追いづらいためです。例えば....

> "ユーザー登録機能の作成"

というコミットの後に連続して

> "ユーザー登録画面のレイアウトの修正"

というコミットを実行する場合、主な修正としては「ユーザー登録機能の作成」の方になり、その後コミットした「レイアウトを少し修正した」というコミットは「ユーザー登録機能の作成」コミットに付随する軽い修正ということになるので、自分以外の人から見た場合にあまり重要ではありません。

このような状況ではコミットメッセージをまとめた方が良い場合があります。

>"ユーザー登録画面のレイアウトの修正"

というコミットを行わず、その直前のコミットにまとめたいので、

```shell
git commit --amend
```

コマンドを実行するとviエディタでコミットメッセージを編集する画面が立ち上がるので、今回はそのまま変更せずに:wqコマンドなどで終了します。

```shell
git log
```

コマンドでコミット履歴を確認すると、"ユーザー登録画面のレイアウトの修正"というコミットメッセージが消えて、"ユーザー登録機能の作成"のコミットメッセージが残って、かつ"ユーザー登録画面のレイアウトの修正"で変更したレイアウトの変更も反映されている状態になります。

注意点として今回の方法は直前のコミットにまとめる方法であり、３つ以上のコミットを同時に１つのコミットにまとめたい場合は

```
git rebase -i HEAD
```

コマンドを使用することになります。

```
git commit --amend
```

を実行する際には現在のブランチをgit branchコマンドなどでしっかり確認した方が安全で誤って他のブランチで実行したりすると他のブランチのコミットが壊れるので要注意です。その場合は

```shell
git reset --soft HEAD@{1}
```

コマンドを実行すればgit commit --amendを取り消すことが出来ます。

もしくはgit commit --amendでviエディタが立ち上がっている時であれば、viエディタで編集するコミットメッセージを全て削除すればgit commit --amendを中止出来ます。

しかしいずれにしろ、git commit --amendのように他の他のコミットにも影響を与えるGitコマンドを実行する際には細心の注意を払うべきであり、最悪、ブランチを切り直して作業のやり直しになる可能性もあるので、コマンド実行前にはgit diffやgit statusで変更内容をしっかり確認することが重要になります。
Pythonのバージョンの確認・表示

Pythonのバージョン取得方法は複数存在します。
その中で、個人的に一番使っている取得方法を複数個まとめてみました！

###コマンドラインでPython のバージョン確認
python系

```
$ python --version
Python 2.7.10

$ python -V
Python 2.7.10
```
python3系

```
$ python3 --version
Python 3.7.3

$ python3 -V
Python 3.7.3

$ python3 -VV
Python 3.7.3 (v3.7.3:ef4ec6ed12, Mar 25 2019, 16:52:21) 
[Clang 6.0 (clang-600.0.57)]

```
Python3.6から`-VV`オプションが追加され、`-V`よりも詳しい情報が表示されるようになりました。

バージョン確認の仕方は複数ありますが、個人的にはこれらの方法が、一番簡単な確認方法です。
YAMAHAルーターで自前でDaaSしてみる


# tl;dr
- 家のYAMAHAのルーターに設定を入れて、会社（固定IP)から家のPCに（比較的安全に）リモートデスクトップ接続ができるようにする。

# 機器
- ルーター：YAMAHA RTX810。ヤフオクで5000円でした。NVRシリーズ系でもRT/RTAシリーズでもできそう。
- パソコン(192.168.100.2)。

# 設定方針
リモートデスクトップのポートは 3389。標準のポートは使わないのが望ましい。
[Windowsのターミナルサービス／リモートデスクトップ接続のポート番号を変更する](https://www.atmarkit.co.jp/ait/articles/0309/27/news003.html) によるとRDPのポートも変えられるらしいけど、今回はルーターで変換することにする。今回外側のポートは 9091 にした。（適当）

- ルーターの 9091 に着た通信をLAN側の 192.168.100.2:3389 に転送する。
- リモートデスクトップの接続先は example.auto.netvolante.jp:9091 を指定する。

# ルータの設定

- pp 1が接続に使っているppと仮定。
- フィルタのポートはNAT変換後のポートを指定するらしい。（9091じゃなくて3389）

```
nat descriptor type 1 masquerade ←たぶん既に入ってる
nat descriptor masquerade static 1 1 192.168.100.2 tcp 9091=3389
ip filter 300001 pass 接続元固定IPアドレス 192.168.100.2 tcp * 3389
pp select 1
  ip pp secure filter in ~既存の設定~ 300001

```

## DDNS（Netvolante DNS）
Netvolante DNSのホスト名を決めるのにいつも困る・・・と思っていたら、ホスト名を勝手に決めてくれる__auto__というのを最近知ったので使ってみる

```
pp select 1
netvolante-dns auto hostname pp server=1 on
netvolante-dns go pp 1
```
- この場合configにホスト名が表示されないので __show status netvolante-dns pp 1__ コマンドで確認する。

# 課題・その他
- 接続元のIPアドレスが固定できない場合はL2TP/IPSEC VPNで接続してからRDPで接続しよう。
- 家側でVLAN設定してDaaS用のPCだけVLAN分けるとさらに安全かな。
- 社内ネットワーク管理者様に叱られないようにお願いします;)
- __http revision-up go__ コマンドでリビジョンアップできるのすごく簡単。
- ポートを変えていてもリモートデスクトップを狙ったログイン試行（攻撃）がかなりある。UTMで検知されるまで気づきませんでした。
    - パスワードは強固なものにする。
    - できれば接続元のIPアドレスを絞る。
    - UTMはantangleという、家庭用年5000円くらいのを使っているが、Sophos UTM Home Editionなど無償のものもあるので余裕があれば入れるのおすすめです。
Hamlとは

Hamlとは、HTMLよりも簡単に書くためのビューテンプレートエンジンです。公式サイトによると「マークアップは美しくあるべき」という原則に基づいて開発されました。Hamlを使用することで、「綺麗に」、「読みやすく」、「生産的に」ビューを作成することができます。
Hamlの記法に従って書くと、より少ない労力でHTMLを書くことができる。
S3への画像アップロード権限をRoleを用いて付与し、セキュアに保つ。

# IAMからロールを作成しアタッチする
ユーザーのsecretキー、IDキーを作成する方法の場合キーが漏洩した際にインシデントになり得る。

なので極力ロールを作成して、それをインスタンスや、ECSのタスクにアタッチしていく。


## ロールの作成方法
### ロールは複数のポリシーが紐づいて構成されるのでまずポリシーを作る

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/69647/95b637e5-2efe-16e6-0ad3-ee1f27a4fec5.png)


### サービスはS3を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/69647/e4118147-e17c-0136-dd85-0a23ccc384f2.png)

### アクションは権限を指定する、必要最低限にするべき。

画像アップロードに必要な権限は２つなのでこれだけ付与する

* PutObject
* PutObjectAcl

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/69647/ffcf18fa-cf0c-4667-6d07-4a257292cc2a.png)


## リソースを選択

ARNの追加をクリックするとダイアログが出るので、この権限で操作したいバケットを指定する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/69647/4528df39-9af3-4acd-91a1-f8c999ad89d4.png)

バケット名はS3のバケット名をそのまま入れれば良い、この場合は `hoge-fuga-piyo`

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/69647/4012771d-0e3d-2d55-fc1a-0c632cc497cf.png)

リクエスト条件は空で良いがIP制限はかけても良いかもしれない。


## ロールを作成する
### EC2に画像アップロード権限を付与するならこちらをそのまま選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/69647/e281d4dc-f76e-cd80-f9a2-652451c83fa3.png)

### ECSのタスクに紐づけたい場合
実は選択肢にないので、一旦EC2を選択で良い（あとで変更する）

### Attachアクセス権限ポリシー
ここで、先ほど作成したポリシーを付与する。


タグはなくても良い、任意。

### ECSのタスクに紐づけるばあいは、信頼関係の編集
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/69647/be549164-98d9-a18a-49a5-d9300fa66913.png)

このページの編集ボタンを押す。

```json:ECSに紐づける設定を追記する
{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Principal": {
        "Service": "ecs-tasks.amazonaws.com"
      },
      "Action": "sts:AssumeRole"
    }
  ]
}
```

そしたらあとは簡単

## ECSのタスク定義から対象のタスクを選択し、新しいリビジョンを作成
タスクロールの場所に先ほど追加したロールがあれば成功

ない場合は再度ECSに紐づける設定を追記する工程を見直す。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/69647/b061f821-efe3-bee3-9936-500084e36bfd.png)


## アプリケーションコードをちょっと修正する
AWSのキーを用いて画像をアップロードする仕組みになっていると思うので、使わない実装にする

例えばLaravelなら null に設定するなど（ライブラリ使ってます。

```
        's3' => [
            'driver' => 's3',
            'key' => null,
            'secret' => null,
            'region' => env('AWS_DEFAULT_REGION'),
            'bucket' => env('AWS_BUCKET'),
            'url' => env('AWS_URL'),
        ],
```

## 完了
これで終わり。
4日間の体験を振り返って　

####インターンシップで神戸デジタルラボに参加した理由
これからはインターネットが中心の生活になったり、人工知能のものが増えていくと思ったからです。そして、そういうものはどういう風にアイデアを出しているのかやどういう作業をして進めていっているのかということが気になったので参加しようと思いました。

########スケジュール
#####１日目

| 　　午前    　 | 　午後　　　　　 |   
|:-----------------|------------------:|
|     オフィス案内  |     パソコンの接続　　 |
|  　質問、雑談　   | Qiita.nuxtについて 　|
| 　KDLの紹介     　| コマンドプロンプト 　|
| 　お昼休憩   |        １日の振り返り　　 |

１日目は、慣れるために担当者の方とたくさん話をしました。
そして、午後からはアプリ作りに必要なものをパソコンにダウンロードし、コマンドプロンプトを使用してアプリのページを作っていきました。

#####２日目

| 　　午前    　 | 　　午後　　　　　 |   
|:-----------------|------------------:|
|       Vuetifyの使用|初心者向けHTML入門　|
|  　画像の表示   |Javascript初心者向け入門|
| 　   お昼休憩  　| コマンドプロンプト 　|
| 　 |        １日の振り返り　　 |

画像の表示はHTMLのimageタグ、表の作成はVuetifyを使用しました。
また、サルワカの初心者向けHTML入門の基本の説明を見ながらVisual Studio Codeでページを作りました。
・<font color="Salmon">HTML</font>…ウェブページを作成するために開発された言語。
・<font color="Salmon">コマンドプロンプト</font>…コンピューターに対する命令を打ち込むことによって、直接パソコンと意思疎通できる画面。
・<font color="Salmon">Javascript</font>…プロトタイプベースのオブジェクト指向スクリプト言語。

#####３日目

| 　　　　午前  | 　　午後　　　 |   
|:-----------------|------------------:|
| Javascript初心者向け|アプリ作り　|
| 　　　お昼休憩|１日の振り返り|

Javascriptは2日目の続きをしました。
アプリ作りは、二人とも作る内容が違うのでそれぞれ自分で作り方を調べて進めていき、タイトルや文字の色も変えました。

4日目

| 　　　午前  | 　　午後　　　 |   
|:-----------------|------------------:|
| 　アプリ作り|アプリ作り　|
| 　　お昼休憩|Qiita作成　　|

アプリ作りでは、画面の切り替え方を教えてもらいました。
設定したボタンを押すとホーム画面から違う画面へ、また切り替えた画面から元の画面に戻ることができるように作りました。
そして最後にQiitaにインターンシップの流れと感想などをMarkdown法式でまとめました。


##アプリ
私が作ったアプリは、定期テストの結果をスマホなどで簡単に見ることができるというものです。各クラスのページに入って自分の名前のところをタップすると点数、平均点、最高点、順位を見ることができるようにしました。
##動機
毎回細長い紙で配られて違う紙と混ざってわからなくなったり、1回1回紙を切って配るよりも管理ができるし少しでも便利になるかなと思い作りました。

##感想
ITの会社にいる人はみんなエンジニアだと思っていましたが、色々な部署があるということを初めて知りました。また、最初に理系や専門学校だけでなく文系の人もいると聞き驚きました。
IT企業は色々な会社や人と関わりながら開発を進め、これからの社会にもっと役立つことができるものなんだと今回のインターンシップで感じることができました。
短い間でしたが、忙しい中インターンシップを引き受けてくださってありがとうございました。
4日間の体験

###神戸デジタルラボに参加した理由
　情報にとても興味があり、授業で学んでる以上に様々な事を学びたいと思ったからです。
また、これから人工知能などがどんどん発達していくなかで、時代に乗り遅れないようにAIなどについて様々な事を知れたらいいなと思い参加しました。

###1日目
|  　　A.M.      |  P.M. 　　|    
|:-----------------|------------------:|:------------------:|
| オフィス案内           |              Qiitaについて　 |               
| 質問、雑談           |            nuxtについて　 |              
| KDLについて            |         アプリ作り　 |              
|お昼休憩               |                １日の振り返り |  

- アプリ作り(コマンドプロンプトを使って、アプリのページを作りました。)


###2日目
| 　　　A.M.      |       P.M.　　 |
|:-----------------|------------------:|
| アプリ作り             |              HTMLの入門　 |
| お昼休憩          |            JavaScriptの基本 |
|　　　　　　　　　　|1日の振り返り
- アプリ作り(Vuetifyを使って表を作る。HTMLのimageタグを使って画像の貼り付け。)
- HTMLの入門(自分たちでサルワカというページの説明を見ながら、Visual studio Codeを使ってページを作り、学びました。)
- JavaScriptの基本(説明を見ながら、繰り返し処理などをしました。)
- <font color="Tomato">HTML</font>‥‥ウェブページを作成するために開発された言語。
- <font color="Tomato">JavaScript</font>‥‥プロトタイプベースのオブジェクト指向スクリプト言語。
- <font color="Tomato">コマンドプロンプト</font>‥‥コンピューターに対する命令を打ち込むことによって、直接パソコンと意思疎通できる画面。


###3日目
| 　　A.M.       |    　　P.M.　　
|:-----------------|------------------:|
|    JavaScriptの基本        |              アプリ作り　 |
| 　　お昼休憩        |   1日の振り返り       

- JavaScriptの基本(2日目の続き。オブジェクト、メソッド、関数など。)
- アプリ作り(自分が作りたいアプリを作るために色々調べて、作業しました。タイトルを変えたり、文字の色を変えてみたりしました。)


###4日目
| 　 A.M.      |   P.M.　　  |
|:-----------------|------------------:|
| アプリ作り            |              アプリ作り　 |
| お昼休憩         |       Qiitaにまとめる      |
- アプリ作り(ページの切り替え方を教えてもらい、ホームから違う画面へ、また切り替えた画面からホームに戻れるようにしました。)
- Qiita(4日間の体験をMarkdown記法を使ってまとめた。)



##アプリ
私は、スクールバスがどこにいるか、後何分でバスが来るのかを分かるようなアプリを作りました。
####動機
雨の日や渋滞している日にバスが遅れることが多々あるので、スクールバス利用者がバスの居場所や残り何分で来るのかが知れたら、便利だなと思ったので作ろうと思いました。
####仕組み
- ホーム画面は、地図を貼り付けてその下にバスのコースがA~Eまであるのでどれかを選択すると選択されたコースの時刻表に飛びます。
- 各コースの時刻表のページからホームに戻れるようにしました。

##4日間を通しての感想
　会社の中を初めて見て、エンジニアの人たちの机には必ず１台は大きいモニターがあることに驚きました。
　アプリを作り始めて、説明を聞いていても分からない事やとても難しい事がたくさんありましたが、教えてもらったり自分で調べたりしながら作っているうちに分かる事が少し増え楽しく作業をすることができました。
学んだことをこれからの情報の授業や将来に活かしていきます。
短い間でしたが、貴重な体験をさせて頂きありがとうございました。
webarenaでubuntu その5

#概要

webarenaでubuntu18.04やってみた。
ddnsやってみた。

#登録する。

ieserverに、登録した。

#ipアドレスを更新する。

```
wget 'http://ieserver.net/cgi-bin/dip.cgi?username=サブドメイン&domain=ドメイン&password=パスワード&updatehost=1'

```

#４時間待つ。


以上。