OmniAICreator/Qiita-1.07M huggingface dataset:
TypeScript地獄の地図と幻の型たち

# 地獄の管理人、その名はTypeScript

※前回の記事 [地獄からの使者、その名はTypeScript ～ 固かった型の形 ～ 2](https://qiita.com/SoraKumo/items/67a967bff996c3efb091)

## 1. 気が付くとそこは迷宮

##　地獄の地図
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267629/81336805-0458-e469-891e-293aa3b3022c.png)

　初学者がTypeScriptを始めようとするのなら、おそらくはどこかしらの解説記事をみることになるだろう。ところがTypeScriptは迷宮の入り口なのである。知らずに進めば、GPSもコンパスも役に立たない永劫の樹海を彷徨うことになるだろう。

　まずは入り口でこう問われることになる

『おぬしの進むべき道は、前か後ろか？』

　大抵の人間はこう答えるだろう。

「もちろん前に進む、そのために来たのだ！」

　その答えに対して、再び問われる。

『ふむ、まあ良いだろう。では次の問いだ。おぬしは環境を重んじるか？』

　大半の人間にはその意味が分からない。しかし分からないままこう答える。

「環境は良い方がいいなぁ」

　気がついたらフロントエンドでエコシステムをぶん回して、わけも分からずWebPackを設定する結果となる。この時点で、TypeScriptをまともに動かすための設定地獄が始まるのだ。


###　初学者がTypeScriptの真の地獄を回避するために必要なこと

　まずは用途を明確にする。ターゲットはフロントエンドなのかバックエンドなのか？
　大抵の場合は、フロントエンドにTypeScriptを使おうとする人が多いと思われる。逆にバックエンドでTypeScriptを使うのはそれほど苦労しない。フロントエンドでTypeScriptを使おうとする者が地獄に填まりやすいのである。

　そもそものTypeScriptを地獄とせしめているのは何か？それはnode_modulesに潜んでいる魑魅魍魎である。こいつらとの接触しなければ、新月の闇夜も安心して越せる。地獄からの誘いを回避できるのだ。

　しかし基本文法を脱した先にあるTypeScriptの解説記事は、気軽にimportというキーワードが書いてある。これがある時点で.tsから.jsに変換される際に、面倒なお約束ごとが生成されるのだ。

　フロントエンドでTypeScriptを扱おうと思ったら、まずはimportとは一切関わらずにプログラムを組んだ方が良い。地獄へ踏み込むのは、ある程度慣れた後だ。ノーマルモードを選択せず、いきなりヘルモードで始めて叩きのめされるのはCXな課長のお約束とするだけで十分だろう。まあ、ノーマルモードに戻っても、結局叩きのめされるのだが。

## 2. TypeScriptの真の力、それは幻を生み出す力

###　幻の混入した図
　
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267629/b4cc3309-9a63-fa7c-b3b1-d3eedc94d4b9.png)

　TypeScriptには二種類の挙動がある。トランスコンパイル時に、古いターゲット環境に合わせて互換コードが出力する挙動と、書いたものが蜃気楼のように消える挙動である。

　互換コード出力機能は大変便利な機能である反面、TypeScriptの本懐の機能では無い。では、TypeScriptの真の機能は何か、それは幻を生み出す力なのだ。

　幻の力とは何なのか。その片鱗を見いだすためのコードはこれだ。

```.ts
const value = "今日は世界"
const typeName = typeof value
type typeName2 = typeof value
console.log(typeName) //'string'
//console.log(typeName2) //error
```

　TypeScriptではtypeofの扱いがJavaScriptと違う。typeNameはJavaScriptの挙動として文字列の"string"という実態を持つが、typeName2はTypeScriptの挙動で実態を持たない。ただの幻なのだ。何をどうやってもtypeName2を出力する方法は存在しない。この実体を持つtypeofと、持たないtypeofの違いをきちんと理解しておかないと、TypeScriptでの転生無双どころか六道輪廻の宿業が終わらない。

　出力できないものをわざわざ作るのは何故か？それがTypeScriptの型定義なのである。ただし、ここで勘違いしてはならないのは、JavaScriptの型とTypeScriptの型は根本的に別物だと言うことだ。JavaScriptの型は実行時に実体を持ち、TypeScriptの型定義はただの蜃気楼である。たどり着いてみると、何も存在しないのだ。

```.ts
const value2:number = "あいうえお" as any as number
console.log(typeof value2) //string
```

 型に何を指定しようと、TypeScriptの型はコンパイル時のエラーチェックまででその寿命を終える。そして型に何が指定されていようと、出力コードには一切の影響を与えない。実行時にエラーを発生させることも無い。コンパイルが終わった時点で、幻を作り出していた霧は、綺麗さっぱり消え去るのだ。

　その他に幻の代表格、interfaceがある。このinterfaceは実行時に、その型の内容を取り出すことは出来ない。変数の中に、たまたま定義したとおりの実態が入っていれば話は別だが、結局のところ自分で実態を用意しない限り、触れることはかなわないのである。


## 4. 幻、それはヘブンへの誘いの光

　地獄、そう、そこはヘルなのだ。ヘルであっても腹は減る。しかし幻の力の使い道を知っていれば話は別だ。幻の導く先にこそ、ユートピアでありヘブンであり、真の極楽が広がっているのだ。必要なのは、幻と侮ること無く信じて付いていくことなのだ。

　終着点、そこにあるものはきっと・・・

　**成仏**
普段使うサービス(Twitter, Slack, Google Calendar, Toggle, Trello)をCLIで利用して捗る

CLIで操作できると捗ります。

<img width="654" alt="スクリーンショット 2019-05-26 14.34.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48549/3afcf55b-73b7-ffd1-9e77-72cdec8f8c81.png">


## CLIとは

CLIのススメ - Qiita
https://qiita.com/Happa8/items/17957168c3440b55a0cb


## Twitterが捗る

sferik/t: A command-line power tool for Twitter.
https://github.com/sferik/t

```console
> ruby -v
ruby 2.5.0p0 (2017-12-25 revision 61468) [x86_64-darwin18]

> gem install t

# Twitterアプリの登録をしてキーを取得する
> open https://apps.twitter.com/app/new

# アプリキーとか設定
> t authorize

> t update "捗る"

> t search timeline "捗る"
```


## Slackが捗る

slack-cli · PyPI
https://pypi.org/project/slack-cli/

```console
> pip --version
pip 19.1.1 from /Users/xxx/.anyenv/envs/pyenv/versions/3.6.6/lib/python3.6/site-packages/pip (python 3.6)

> pip install slack-cli

# Slackのトークン取得
> open https://api.slack.com/custom-integrations/legacy-tokens

> slack-cli -d [チャンネル or ユーザー名] "捗る"

> slack-cli -s [チャンネル or ユーザー名] -l 5
```


## Google Calendarが捗る

insanum/gcalcli: Google Calendar Command Line Interface
https://github.com/insanum/gcalcli

```console
> pip --version
pip 19.1.1 from /Users/xxx/.anyenv/envs/pyenv/versions/3.6.6/lib/python3.6/site-packages/pip (python 3.6)

> pip install gcalcli

> gcal add --title 捗る --when today --where "" --allday --duration 1 --description "" --reminder "1"

> gcal agenda
```


## Togglが捗る

AuHau/toggl-cli: A simple command-line interface for toggl.com
https://github.com/AuHau/toggl-cli

時間管理が苦手な人にもおすすめ！「Toggl」の使い方まとめ。チームの状況把握にも活用！ - ウェブ企画ラボ
https://webkikaku.co.jp/blog/webservices/toggl/


```console
> pip --version
pip 19.1.1 from /Users/xxx/.anyenv/envs/pyenv/versions/3.6.6/lib/python3.6/site-packages/pip (python 3.6)

> pip install togglCli

> toggl add 12:00 13:00 "捗る"

> toggl ls
```


## Trelloが捗る

qcam/3llo: 3llo - Trello interactive CLI on terminal
https://github.com/qcam/3llo

Trello
https://trello.com/ja


```console
> ruby -v
ruby 2.5.0p0 (2017-12-25 revision 61468) [x86_64-darwin18]

> gem install 3llo

# APIキーを取得する
> open https://trello.com/app-key


> export TRELLO_USER=your_username
> export TRELLO_KEY=your_key
> export TRELLO_TOKEN=your_token

> 3llo

3llo > board select
3llo > card add
```
convnet.jsで自動運転 その２

#概要

convnet.jsで自動運転、やってみた。
ハンドル表示してみた。

#写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/f12076d3-01a0-b20a-72ac-65b99f53f1a1.png)


#成果物

http://jsdo.it/ohisama1/IYCB

以上。
save2pdf

https://github.com/hnagashima/save2pdf/blob/master/README.md

# save2pdf
save2pdf saves MATLAB Figure as a pdf, as same as shown in the Window.

Background color is deleted.
save2pdf_transparent deletes the background in the axes.

## Requirements: 
This function requires [export_fig](https://jp.mathworks.com/matlabcentral/fileexchange/23629-export_fig).


## Syntax
```matlab
save2pdf;
save2pdf(figure_handle);
save2pdf(___,filename);
save2pdf_transparent(___);
set(0, 'defaultFigureCreateFcn',@save2pdf_menu);
```
## Example: 

save current Figure as shown in the display.
```matlab
save2pdf;
```
save Figure1 as 'Fig1.pdf'
```matlab
f = figure(1);
save2pdf(f, 'fig1.pdf');
```



### setup UI

Following function adds UI menu in the default figure. Add following script to the startup.m .

```Matlab
set(0, defaultFigureCreatedFcn, @save2pdf_menu);
```



----------

# See also

[export_fig - Matlab central](https://jp.mathworks.com/matlabcentral/fileexchange/23629-export_fig)
５

・SplashWnd.h

```
#pragma once

////////////////////////////////////////////////////////////////////////
// 定数
////////////////////////////////////////////////////////////////////////

//----------------------------------------------------------------------
// 終了用タイマ ID
//----------------------------------------------------------------------

#define BOOTUP_END_TIMER_ID		1

////////////////////////////////////////////////////////////////////////
// スプラッシュウィンドウ
////////////////////////////////////////////////////////////////////////

class CSplashWnd : public CWnd
{
	DECLARE_DYNAMIC(CSplashWnd)

private:
	// リソースを解放する
	void FreeResource();

protected:
	// メッセージマップを定義することを宣言する
	DECLARE_MESSAGE_MAP()

public:
	// WM_CREATE ハンドラ
	afx_msg int OnCreate(LPCREATESTRUCT lpCreateStruct);
	// WM_PAINT ハンドラ
	afx_msg void OnPaint();
	// WM_TIMER ハンドラ
	afx_msg void OnTimer(UINT_PTR nIDEvent);
	// WM_LBUTTONDOWN ハンドラ
	afx_msg void OnLButtonDown(UINT nFlags, CPoint point);
	// WM_CLOSE ハンドラ
	afx_msg void OnClose();
	// WM_ENDSESSION ハンドラ
	afx_msg void OnEndSession(BOOL bEnding);
};
3

先週末は、遅くまで作業に時間がかかり、
ご迷惑をお掛けして申し訳ございませんでした。
残業時間に比例し、思考力が奪われ能率が下がる感覚がありました。
あくまでも、与えられた時間内で作業を終える計画で進めていけたら、と思います。

◼️反省点

一度コードレビューを依頼すると、コードレビュー待ちの間のコード修正は、
(再度レビューを要するため)二度手間になってしまうと思います。

先々週から、段階を分けてレビューをいただいておりましたが、
レビュー回答いただくまでの時間を見越し、
検査書に則った検査(仮)を実施、バグを徹底的に潰した上で
コードレビューをお願いすべきだっと反省しております。
検査を最終工程として捉えず、
場合によって、もっと小さなサイクルで行うべきと思いました。




・プロジェクト名.h

```
#pragma once

#ifndef __AFXWIN_H__
	#error "PCH に対してこのファイルをインクルードする前に 'stdafx.h' をインクルードしてください"
#endif

#include "resource.h"		// メイン シンボル
#include "SplashWnd.h"
#include "BootupProfile.h"

////////////////////////////////////////////////////////////////////////
// 定数
////////////////////////////////////////////////////////////////////////

//----------------------------------------------------------------------
// 設定ファイル名
//----------------------------------------------------------------------

#define PROFILE_FILENAME	_T("Bootup.ini")

//----------------------------------------------------------------------
// デフォルトのウィンドウサイズ
//----------------------------------------------------------------------

#define DEF_WND_WIDHT	485
#define DEF_WND_HEIGHT	300

////////////////////////////////////////////////////////////////////////
// 表示リソース
////////////////////////////////////////////////////////////////////////

class SplashResource {
public:
	// デストラクタ
	virtual ~SplashResource();

public:
	// 表示オブジェクトを作成する
	void Create(BootupProfile* profile);

public:
	// ビットマップ
	CBitmap BackgraoundBitmap;
};

////////////////////////////////////////////////////////////////////////
// スプラッシュウィンドウを表示して、アプリケーションを起動する
////////////////////////////////////////////////////////////////////////

class CBootupApp : public CWinApp
{
public:
	// コンストラクタ
	CBootupApp();

public:
	// 設定情報を得る
	BootupProfile* GetProfile();
	// 表示リソースを得る
	SplashResource* GetSplashResource();

public:
	// 初期化を行う
	virtual BOOL InitInstance();
	// 終了処理を行う
	virtual int ExitInstance();

private:
	// 設定情報
	BootupProfile m_profile;
	// スプラッシュウィンドウ
	CSplashWnd* m_pSplashWnd;
	// 表示リソース
	SplashResource m_splashResource;

public:
	// メッセージマップを定義することを宣言する
	DECLARE_MESSAGE_MAP()
};

//----------------------------------------------------------------------
// CBootupApp オブジェクトの宣言
//----------------------------------------------------------------------

extern CBootupApp theApp;
Ubuntu18.04にRuby、Rails、Postgresqlを簡単にインストールする手順とコマンド

Ubuntu18にRuby周り一式をスムーズに入れる手順。

```
# インストールする環境
Ubuntu 18.04
Ruby 2.5.1
Rails 5.2.3
PostgreSQL 9.5.16
git version 2.17.1
```
をスムーズにインストールします。
所要時間は30分ぐらい。
ひたすら(今は意味は考えず)このままコマンドを打つ。


# インストール手順コマンド
## Rubyをインストール
```
$ curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
$ curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
$ echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list

$ sudo apt-get update
$ sudo apt-get install git-core curl zlib1g-dev build-essential libssl-dev libreadline-dev libyaml-dev libsqlite3-dev sqlite3 libxml2-dev libxslt1-dev libcurl4-openssl-dev software-properties-common libffi-dev nodejs yarn
```

## rbenv インストール
```
$ cd
$ git clone https://github.com/rbenv/rbenv.git ~/.rbenv
$ echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bashrc
$ echo 'eval "$(rbenv init -)"' >> ~/.bashrc
$ exec $SHELL

$ git clone https://github.com/rbenv/ruby-build.git ~/.rbenv/plugins/ruby-build
$ echo 'export PATH="$HOME/.rbenv/plugins/ruby-build/bin:$PATH"' >> ~/.bashrc
$ exec $SHELL

$ rbenv install 2.5.1
$ rbenv global 2.5.1
$ ruby -v
ruby 2.5.1
```

## Gemインストール
```
$ gem install bundler
```

## Railsインストール
```
$ curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
$ sudo apt-get install -y nodejs
$ gem install rails -v 5.2.3
$ rbenv rehash
$ rails -v
Rails 5.2.3
```

## Postgresqlインストール
```
$ sudo sh -c "echo 'deb http://apt.postgresql.org/pub/repos/apt/ xenial-pgdg main' > /etc/apt/sources.list.d/pgdg.list"
$ wget --quiet -O - http://apt.postgresql.org/pub/repos/apt/ACCC4CF8.asc | sudo apt-key add -
$ sudo apt-get update
$ sudo apt-get install postgresql-common
$ sudo apt-get install postgresql-9.5 libpq-dev
```

## Postgresqlのユーザー作成
```
$ sudo -u postgres createuser vagrant -s
```

この時パスワードは設定しませんでした。
パスワードを設定したい場合は、

```
$ sudo -u postgres psql
$ postgres=# \password vagrant
```

この様にします。


## Git設定(飛ばしても良い)
```
$ git config --global color.ui true
$ git config --global user.name "YOUR NAME"
$ git config --global user.email "YOUR@EMAIL.com"
$ ssh-keygen -t rsa -b 4096 -C "YOUR@EMAIL.com"
```


#ここまでインストールされたか確認
```

$ ruby -v
ruby 2.5.1p57 (2018-03-29 revision 63029) [x86_64-linux-gnu]
$ rails -v
Rails 5.2.3
$ psql --version
psql (PostgreSQL) 9.5.16
$ git --version
git version 2.17.1
```


#最後にアプリ作成できるかチェック
```
$ rails new testapp -d postgresql
$ cd testapp
$ rails db:create
$ rails g controller home index
$ rails db:migrate
$ rails s -b 192.168.xx.xx
# xxはあなたのサーバー番号
```
１

◆スプラッシュウィンドウとしての絶対条件
・メインウィンドウより先に表示されること。
→Mainクラスで実行する

・画面中央に表示されること。
・タスクバーにアイコンを表示しないこと。
・ウィンドウにはタイトルバーや枠が無いこと。
・メインウィンドウより手前に表示させないこと。
・メインウィンドウと重ねて表示させないこと。
・アプリケーションの準備ができたところで、自動的に閉じること。
→「アプリケーションがアイドル状態になった時」をどう判断するか。基準とは。
→いつまでたってもアプリがアイドル状態ににならない場合はどうするか。




◆ダイアログベースプリにスプラッシュウィンドウを挿入する手順

１．適当な、SDI（MDI）ベースのプログラムを作り、
     そのプログラムに、 スプラッシュスクリーンを挿入する

２．上のプロジェクトフォルダから、Splash.cppとSplash.hのファイルを
     ダイアログ・ベースのプロジェクトフォルダにコピーする

３．プロジェクト→プロジェクトの追加→ファイルで
     Splash.cppとSplash.hのファイルのファイルをプロジェクトに追加する

４．C**APPクラスをクラスウイザードでPreTranslateMessageを追加して
以下のように書き換える
BOOL C**App::PreTranslateMessage(MSG* pMsg)
{
 // CG: 以下のブロックはスプラッシュ スクリーン コンポーネントによって追加さ
れました
 if (CSplashWnd::PreTranslateAppMessage(pMsg))
  return TRUE;
 return CWinApp::PreTranslateMessage(pMsg);
}

５． C**(★CMyAppなど)App クラスの初期化の場所で以下の文(表示)を追加
BOOL C**App::InitInstance()
{
 // CG: 以下のブロックはスプラッシュ スクリーン コンポーネントによって追加さ
れました
 {
  CCommandLineInfo cmdInfo;
  ParseCommandLine(cmdInfo);
  CSplashWnd::EnableSplashScreen(cmdInfo.m_bShowSplash);

/*
    Enable3dControls();
    LoadStdProfileSettings();

    CMainDlg dlg;
    m_pMainWnd = &dlg;

    CSplashWnd::ShowSplashScreen(FALSE);
    Sleep(2000);
*/
 }
 

・・・省略・・
]
この下に
// CG: 以下のブロックはスプラッシュ スクリーン コンポーネントによって追加さ
れました
 CSplashWnd::ShowSplashScreen((class CWnd *)this);
とかけば、ここでスプラッシュ スクリーン が起動しますが、
出方が変なときがありますので、
APPクラス内で呼び出さずにDlgクラス内で呼びだしたほうがいいかもしれません。



1. ダイアログ CPP ファイルの tp 上追加
・しゃーぷinclude "スプラッシュ・ h"

2. OnInitDialog () 関数の最後に次のコード行を追加します。
CSplashWnd:: EnableSplashScREEN (真);     
CSplashWnd:: ShowSplashScreen (this);

3. リソースエディタを使用して、BMP ファイル (スプラッシュスクリーンの視覚的な解釈) をプロジェクトに追加する。
名前を IDB_SPLASH (ウィザードによって生成された名前) に設定。

3.画面の表示が遅い場合は、CMainFrame::OnCreate()で自動挿入されたコードをCMainFrame::OnCreate()内のCFrameWnd::OnCreate()の直後へ移動する。
dein.vimを導入したけど理解不足すぎるからとりま箇条書き的な？

#dein.vimについて箇条書き？
どうもまちゃです！
とりあえずvimいじって開発環境よくしようと思ったからdein.vimを導入したけど理解不足すぎるからとりあえず自分なりの解釈で箇条書き！
間違ってたり他にもこんなやり方があるよとか教えていただけると嬉しいです！

##deinでプラグインを導入するとき
dein.vimはvimのプラグインを管理するためのものです！
プラグインがどういうものかは割愛します...。ごめんね
プラグインを導入するときに大体Git Hubから取ってくるからGit使えるとちょっといいかも！！
プラグインの導入の仕方は

```dein.toml
[[plugins]]
repo = '[導入したいプラグイン]'
```
導入したいプラグインはGit Hubのリポジトリ名を直接入れるだけ！！
この形で書いてあげるとプラグインの導入自体は終了！
その後に設定とかを書いてあげないと真価を発揮してくれなくて、その設定の読み込みに種類があるからちょっと解説！！

##読み込みの種類とファイル
さっき言った通りdeinには読み込みの種類があってその種類によって書くべきファイルが変わってくるので解説！！

###ファイル
とりあえずファイルについて解説！
ファイルには2種類あってvimを起動するときにプラグインも一緒に起動させるファイル（dein.toml）とプラグインを遅延させて起動させるファイルの2種類があるよ！！
使い分けはこのあと説明！
（ファイルを分けなくても大丈夫！！でもプラグインを増やしていくと見づらくなるから分けるのをおすすめ！！）

###hook_add
プラグインを読み込ませるのに使うやつの1つ目がhook_add！
これはdeinにプラグインが認識されたときにhook_add内に書いてあることを実行してくれるもの！
あとで説明する遅延読み込みを行わないもの！

この子を使うときは、プラグインを起動させるのにキーマッピングをしたり、プラグイン用の変数を設定したりするときに使う！
例としては

```dein.toml
[[plugins]]
repo = 'scrooloose/nerdtree'
hook_add = '''
nnoremap <silent><C-e> :NERDTreeToggle<CR>
'''
```
これはNerdTreeっていうプラグインで（このプラグインについては割愛）これを起動するのに`:NERDTreeToggle`って打たなきゃいけないんだけど、こんな感じで書いといてあげると`<C-e>`（コントロール+e）で起動することができる！！
`<C-e>`じゃなくても`<C-n>`とか`E`みたいに何でも大丈夫！ただ、割り当てたら元々当てられてたやつは使えなくなるから要注意！！

###hook_source
2つ目がhook_source！！
これはプラグインを読み込ませる直前に実行してくれるもの！！
さっき説明したhook_addと対して変わらないけど、こうなるまで何もしないで欲しいときに使う！
これの何がいいかというと、特定の動きをする以外は実行しないから、環境を汚さなくてすむ！！

これを使うときは、deopete.nvim（このプラグインについては割愛）を使うのに`let g:deoplete#enable_at_startup = 1`っていうのを書いとかなきゃいけないんだけど、insertに入るまでは一切使わないからそれまで遅延させてあげるとinsertに入らないときは実行しないから無駄がない！！
書くときは

```dein_lazy.toml
[[plugins]]
repo = 'Shougo/deoplete.nvim'
hook_source = '''
let g:deoplete#enable_at_startup = 1
'''
on_i = 1
```

`on_i = 1`はinsertモードに入ったら1を返してってことで、これでinsertに入ったらhook_sourceが実行される！！

###hook_post_source
3つ目がhook_post_source！！
これはhook_sourceの反対でプラグインを読み込んだあとに実行してくれるもの！！
これよりあとに紹介するのは今回は実装しなかったので、いいプラグインを見つけ次第書きたいと思いまっす！

###hook_post_update
4つ目がhook_post_update！！
これはプラグインのインストール後にコンパイルや関連ツールをインストールするのに`build`オプションが使える！！

###hook_done_update
最後がhook_done_update！！
さっき紹介したのはプラグイン毎に実行されてたけど、これは全部のプラグインをインストールしたあとに実行される！！

紹介した読み込みの種類とファイル関係を表にするとこんな感じ！！

|hookの種類| dein.toml |dein_lazy.toml|
|:-------:|:---------:|:------------:|
|hook_add|OK|OK|
|hook_source|NO|OK|
|hook_posr_source|NO|OK|
|hook_post_update|NO|OK|
|hook_done_update|NO|OK|

簡単にまとめると遅延させるときはlazyへ！！

##dein.vimを導入してみて
今回導入して思ったことはプラグイン最高！！！！
プラグイン入れたら色々とモチベが上がってきていい感じになった気がする！！
今回自分が入れたプラグイン一覧と簡単な説明は [ここ](https://qiita.com/maachan_9692/items/8afe183a1beb5adb9875) に載せてあるのでよかったら見てみてください！！

それじゃこんなところで！
以上まちゃでした！！
初学者がRubyでクイズをつくってみた

プログラミングを学習し始めて数日の超初心者が、遊びでつくったものを投稿してみたいと思います。
どなたかの役に立つかどうかは、謎ですが、とりあえず書いてみます。
#学んだこと
####条件分岐
if文を使います。クイズに正解の(条件式を満たす)場合、不正解の場合と分けて別の内容を出力させられます。
####ループ
while文を使います。不正解だと、延々と回答させられ続ける事ができます。
#クイズつくってみた
以上のことを勉強しましたので、クイズをつくってみました。

```Ruby:q1.rb
while true do
  puts "The second Rome?"
  input = gets.chomp
  answer = "Constantinople"
  if input == answer then
    puts "正解です。"
    exit
  else
    puts "ばーか"
  end
end
```
問題文「The second Rome?」がまず出力され(putsメソッド)、次の行のgetsメソッドは実行時に入力する内容を文字列として返すので、

1. ここで正解を入力すると「正解です」
2. それ以外だと「ばーか」

と返されます。ここでgetsメソッドは、入力した内容の最後に改行を入れてたものを返り値とするので、改行を外すためgets.chompとします。chompメソッドがないと、何をしても「ばーか」と言われます。

###数値が答えになる問題
上は文字列(Constantinople)が等しいかどうかを比較していたわけですが、数値を回答するクイズもやってみました。

```Ruby:q2.rb
while true do
  puts "Fall-of-Constantinople year?"
  input = gets.to_i
  answer = 1453
  if input == answer then
    puts "正解です。"
    exit
  else
    puts "ばーかばーか"
  end
end
```

getsメソッドは文字列を返すので、to_iメソッドで数値に直します。これがないと、やはり、自分で書いたプログラムに、何を入力しても罵倒されることになります。

#わかったこと
**<font color="Red">プログラムに罵倒されると楽しい</font>**
gh-pagesで存在しないブランチを指定しているのに存在していると言われる時

[gh-pages](https://www.npmjs.com/package/gh-pages)の話です。

### 見本

```sh
gh-pages --branh test ...
```

とかで絞り込んで`test`にプッシュしてくれるモジュールです。

### 問題

ふとしたタイミングで、

```sh
gh-pages --branh test ...
# A branch named 'test' already exists
```

のようなエラーが起こるようになりました。`git branch`や`git fetch && git branch -a`でも`test`は無いのを確認してもです。

### 憶測

一度gh-pagesでプッシュ後に自分で`git branch -D`で消すと起こるのかもしれません。

### 解決

gh-pagesが持ってるキャッシュディレクトリを削除すると治る模様。

```sh
rm -rf node_modules/gh-pages/.cache
```
解読 : ARkit2 – Apple Development

ARKit 2
---
https://developer.apple.com/jp/arkit/

(特徴)
複数ユーザーがAR を同時に体験できる
---
複数のユーザーが、それぞれのiOSデバイスでARコンテンツを同時に表示したり、マルチプレイヤーゲームを楽しんだりすることができる。複数のプレイヤーがARゲームをプレイしている様子を、それ以外の人が観戦することも可能。

一旦終了した後、後で同じ状態から再開できる
---
（例）

・テーブルで始めたARのパズルを一旦中断しても、その後同じ状態から再開できる。

・インテリアデザインのプロジェクトの数日間にわたって取り組むことができる。

！毎回一からやり直す必要がない！

現実世界のオブジェクトをARに組み込み、より臨場感のある体験ができる
---
・オブジェクトの検出とトラッキング
ARKit 1.5で追加された2D画像の検出機能によって、ポスター、アートワーク、看板などの2D画像を基盤にしてAR体験を開始することができるようになった。

ARKit 2では、さらに2D画像のフルトラッキング機能が追加されたため、デベロッパは製品の箱や雑誌などのオブジェクトが動く場合であってもAR体験を組み込むことができる。

また、ARKit 2では、彫刻、おもちゃ、家具といった既知の3Dオブジェクトを検出する機能も追加された。

3DおよびARのQuick Lookオブジェクト
---
オープンソースのUniversal Scene Description（ユニバーサルシーンディスクリプション、USD）によって構築された新しいファイル形式であるusdzは、ストレージや共有のために最適化されており、iOS上で3Dコンテンツをネイティブに表示および共有することができる。

iOS 12では、Safari、メッセージ、メール、News、メモなどの内蔵Appで、3DやARの仮想オブジェクトのusdzファイルをQuick Lookでネイティブに表示することができる。

また、デベロッパはQuick LookビューをAppに組み込むこともできる。キラキラした仮想オブジェクトに現実世界の周囲の景色が映り込むなど、極めてきめ細かくレンダリングされた画像がユーザーに表示される。

リソースとドキュメント
---
Xcodeの最新バージョンをダウンロードし、以下のリソースを活用して、ARKitを使用したAppやゲームを開発しよう。

SDKとベータ版

ドキュメント

セッションビデオ

ディスカッションフォーラム
AtCoder ABC128 B - Guidebook(200点)

#問題概要
[問題](https://atcoder.jp/contests/abc128/tasks/abc128_b)

$N$個のレストランがある。レストランは$S$市に所属し、$P$点がついている。
$S$で辞書順に、辞書順で同じ場合は$P$の大きい順で並び替えて、レストランの番号を出力せよ。

#制約条件
- $1≤N≤100$
- $S$ は英小文字のみからなる長さ 
- $1$ 以上 $10$ 以下の文字列
- $0≤P_i≤100$
- $P_i$ は整数
- $P_i≠P_j (1≤i<j≤N)$

#考えたこと

`pair` を作ってうまく並び替えたい。 `first` は降順で、 `second` は昇順で並び替える必要があるので単純に `sort` は不可能。

なのでまず `sort` をして辞書順にした後、 `first` で比較して同じだった場合 `second` を昇順に比較する `sort` をする。以下の記事を参考にして実装した。
[【C++】pairのsecondを基準にソート（abc103_d）](http://perogram.hateblo.jp/entry/2018/12/17/045943)

```.cpp
bool compare_by_b(pair<string, int> a, pair<string, int> b) {
    if(a.first == b.first){
        return a.second > b.second;
    }else{
        return a.first < b.first;
    }
}
```

これをもとの `pair` と比較してindexを取得して1を足せば答え。
時間計算量は$O(N^2)$。

#解答

```b.cpp
#include <bits/stdc++.h>
using namespace std;
typedef pair<string, int> p;
bool compare_by_b(pair<string, int> a, pair<string, int> b) {
    if(a.first == b.first){
        return a.second > b.second;
    }else{
        return a.first < b.first;
    }
}

int main() {
    int n;cin >> n;
    vector<p> sp(n);
    vector<p> index(n);
    for(int i = 0; i < n; i ++) {
        string s; int p; cin >> s >> p;
        sp[i] = make_pair(s,p);
        index[i] = make_pair(s,p);
    }
    sort(sp.begin(), sp.end());
    sort(sp.begin(), sp.end(), compare_by_b);
    for(int i = 0; i < n; i ++) {
        for(int j = 0; j < n; j ++) {
            if(sp[i].first == index[j].first && sp[i].second == index[j].second) cout << j+1 << endl;
        }
    }
    return 0;
}
```
Tilt Brush Unity SDKを使って、Tilt Brushで作成したスケッチをUnityに取り込む

GitHub
https://github.com/googlevr/tilt-brush-toolkit
ダウンロード　the latest version of the Tilt Brush Unity SDK v.16.0.0
https://github.com/googlevr/tilt-brush-toolkit/releases

Tilt Brush Unity SDKは、Unity内でTilt Brushスケッチを使用するように設計されたツールのセットです。アーティストがまったく新しい方法で自分の作品を拡張できるようにするための使いやすい機能があります。

Tilt Brush Unity SDKには以下が含まれます。
・Tilt Brush独自の素材とスクリプトをインポートしたスケッチに自動的に割り当てるので、Tilt Brushの中にいるかのように見えます。
・ブラシを音楽に反応させるTilt Brushのオーディオ反応性機能・対話性を追加したり、インポートしたスケッチでアニメーションを作成するための再利用可能なサンプルスクリプト
・Tilt Brushのおもしろい使い方のサンプル

重要！Tilt Brush Unity SDKは現在ベータ版です。 最新版を使用しながらこれらのガイドラインに従ってください。
Unity 5.4.2f2以降のバージョンが必要
Tilt Brushv7.0以上が必要です（v15.0 +推奨）
Tilt Brush v11 +およびToolkit v11 +では、すべてのブラシがサポートされています

Tilt Brush Unity SDKインポートの方法
---
参考　Tilt Brush Unity SDK: Using Tilt Brush with Unity
https://docs.google.com/document/d/1YID89te9oDjinCkJ9R65bLZ3PpJk1W4S1SM2Ccc6-9w/edit#
SDKはUnityのパッケージで提供されます。
1.　Unityを開く
2.　新規プロジェクトを作成、若しくは既存のファイルを開ける
3.　プロジェクトを開いたままダウンロードしたファイル「.unitypackage file」をダブルクリックする、若しくはAssetのタブから「Assets > Import Package > Custom Package」を開く
4. パッケージをインポートする

Tilt Brushのスケッチを「.FBX」で書き出し、Unity に取り込む
---
Tilt BrushのスケッチをUnity内で使用するためには、スケッチを「.FBX」のフォーマットで書き出し、それをUnityのプロジェクトにコピーする必要があります。

このツールキットは、代わりに独自のTilt Brush素材を使用します。

エクスポート時についてくる「.png」ファイルは必要ありません。

Tilt Brushスケッチを使用するには、それをエクスポートして、エクスポートした.FBXファイルをプロジェクトにコピーする必要があります。エクスポートに付属の.pngファイルは必要ありません。このツールキットは、代わりに独自のTilt Brush素材を使用します。

Tilt Brush SDKはインポート時にファイルを処理し、適切な素材を割り当てます。

スケッチをエクスポートするには：
---
1. Tilt Brushを開き、スケッチを読み込む
2. ハンドメニューの設定領域にある[...]アイコンをクリック
3. Labsアイコンをクリック
4. ポップアップ表示されるウィンドウで[Export]をクリック

シーンにスケッチをインポートするには：
---
1. Unityプロジェクトフォルダの中にあるアセットフォルダに「.FBX」ファイルをコピーします(「.FBX」ファイルの場所は、Windows:  My Documents/Tilt Brush/Exports on Windows 若しくは Mac: Documents/Tilt Brush/Exports)
2. ファイルをプロジェクトウィンドウ（下のウィンドウ）からHierarchyにドラッグします。

メモ: 
- Tilt Brush Unity SDKは.tiltファイルを読み込みません。
- .FBXに含まれているテクスチャをプロジェクトにコピーする必要はありません。

ヒント：初期設定では付属のTilt Brush標準環境「standard」を使用しましょう。
「TiltBrushExamples / Environments / Standard」にあります。

///////Read me

![readme-768x657.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397861/c4bb687f-0576-0e67-847a-3c11557b72a3.png)
awscliのプロファイルを簡単に切り替えるスクリプトを書いてみた

## awscliのプロファイル(profile)

awscliを使いこなしている方々には常識と思いますが、複数のAWSアカウントやIAMロールを使い分けている場合にはプロファイルを使うと切り替えが便利になりますね。

プロファイル機能については以下の記事の他、Qiitaにもいろいろ記事があるようです。

- [AWS CLIで複数アカウントのアクセスキーを管理して扱う設定](https://qiita.com/kwsmkn/items/ce72d8e4cc35f1fc01b5)
- [awscliの設定切り替え](https://qiita.com/ryuzee/items/e3ce493f132f1981f57a)

Qiita以外にも `--profile` オプションの使い方はいろいろ記事があります。

ところで、デフォルト以外のプロファイルを使うときに

- 毎回 `--profile` オプションを打つのがめんどう(諸般の事情でcompletionもきかない)
- 環境変数に書き出すために `Shift` キーを押し続けたり `CapsLock` を使うのがめんどう
- `config` じゃなくて `configure` なのを忘れ、打ち間違えてめんどう
- そもそもprofile名を忘れたり、打ち間違えたりする

というわがままな私は `awscli` の機能だけでは不満だったので自分でツールを作ることにしました。

なお、私ほど怠惰な理由ではなく別の観点から運用方法を検討されている方もいるようです。(この記事を書くに当たって改めて検索しました)

- [環境変数による AWS CLI のプロファイル切り替えをうまいこと](https://qiita.com/mohi_teak/items/adc36a37013d42604cb9)
    - 昔の記事であるせいかもしれませんが `export` せずに `--profile` オプションでいい気がします。
    - 私のように怠けるためでなく、運用上の安全性が念頭にあるようです。

## 実現したかったこと

- credentialsに登録されているプロファイル名の一覧を出力
- プロファイルを環境変数 `AWS_PROFILE` に設定
    - これは個人的な事情があって、 `eksctl` も使うのですが、このツールが `AWS_PROFILE` も見てくれるため、便利だったからです。他のツールを使うと別の環境変数が良いのかも。
- `AWS_PROFILE` 環境変数を見ないツールからも使いやすいように現在のプロファイル名だけを出力するコマンドも付ける
    - このコマンドが一番簡単に打ちたい
- credentialsに登録されているプロファイル名以外は拒否する(綴りチェック)

## 他用件(環境など)

- Bashしか使わないのでshell環境はbash向け.

## できたもの

GitHubに公開しています。

- [aws-profile](https://github.com/10hin/aws-profile)

使い方なども怪しい英語で記載しています。
解読 : ARKit2-最初のステップ 3/3 - ARConfiguration

ARConfiguration
---
ARセッション構成のための抽象基底クラス。
The abstract base class for AR session configurations.

Declarationclass 
----
ARConfiguration : NSObject

Overview
---
ARConfiguration is an abstract class; you do not create or work with instances of this class.

To run an AR session, create an instance of the concrete ARConfiguration subclass that provides the kind of augmented reality experience you want to use in your app or game. Then, set up the configuration object's properties and pass the configuration to your session's run(_:options:) method. ARKit includes the following concrete configuration classes:

ARWorldTrackingConfiguration

Provides high-quality AR experiences that use the back-facing camera to precisely track a device's position and orientation and allow plane detection, hit testing, environment-based lighting, and image and object detection.

AROrientationTrackingConfiguration

Provides basic AR experiences that use the back-facing camera and track only a device's orientation.

ARImageTrackingConfiguration

Provides basic AR experiences that use the back-facing camera and track visible images regardless of the user's environment.

ARFaceTrackingConfiguration

Provides AR experiences that use the front-facing camera and track the movement and expressions of the user's face.

ARObjectScanningConfiguration

Provides for using the back-facing camera to collect high-fidelity spatial data, creating reference objects for detection in other AR experiences.

Topics : Verifying Device Support
---
class var isSupported: BoolA Boolean value indicating whether the current device supports this session configuration class.

Configuring the AR Session
---
var isLightEstimationEnabled: Bool

A Boolean value specifying whether ARKit analyzes scene lighting in captured camera images.

var worldAlignment: ARConfiguration.WorldAlignment

A value specifying how the session maps real-world device motion into a 3D scene coordinate system.

enum ARConfiguration.WorldAlignment

Options for how ARKit constructs a scene coordinate system based on real-world device motion.

Managing Video Capture Options
---
var videoFormat: ARConfiguration.VideoFormat

The video capture size and frame rate to be used for sessions running this configuration.

class var supportedVideoFormats: [ARConfiguration.VideoFormat]

The set of video capture formats available on the current device.

class ARConfiguration.VideoFormat

A video size and frame rate specification for use with an AR session.

Recording Audio
---
var providesAudioData: BoolA Boolean value that specifies whether to capture audio during the AR session.

Relationships
---
Inherits From
NSObject
Conforms To
CVarArg
Equatable
Hashable
NSCopying
ContentEditable な caret の位置（座標）を取得する

ブラウザで動くエディタを開発していると避けては通れない contenteditable な caret の位置（座標）。いろいろなアプローチがありますが、一部のケース（縦書き）でうまく動かないことがあったので回避策をメモしておきます。

## ダミーの DOM を挿入する

わりと古典的でよく使われている方法です。caret のある位置にダミーの DOM を挿入して `getBoundingClientRect` で位置を取得するというもの。どんな場面でもほぼ確実に caret の位置が取得できます。ただ、大きな弱点があり DOM を挿入するので対象 DOM の TextNode が分割されてしまいます。contenteditable を使ってゴリゴリ開発をする場合、むやみに Node が変わるとつらすぎるので、あまり使うメリットはありません。

```html
<p contenteditable="true">click me</p>
<script>
  document.onselectionchange = () => {
    const range = window.getSelection().getRangeAt(0)
    const anchor = document.createElement('span')
    anchor.innerHTML = '&#8203;'
    range.insertNode(anchor)
    const pos = anchor.getBoundingClientRect()
    anchor.parentElement.removeChild(anchor)
    console.log(pos)
  }
</script>
```

## Range オブジェクトの座標を取得する

caret 位置は Range オブジェクトで知ることができます。つまり単純に Range にたいして `getBoundingClientRect` を取得すれば caret の位置は取得できちゃいます。非常に簡単。通常はこちらを利用するのが良いと思います。

```html
<p contenteditable="true">click me</p>
<script>
  document.onselectionchange = () => {
    const pos = window.getSelection().getRangeAt(0).getBoundingClientRect()
    console.log(pos)
  }
</script>
```

### `writing-mode: vertical-lr` では機能しない

しかし、冒頭に書いた一部のケースでうまく動かないというのが縦書きです。CSS で `writing-mode: vertical-lr` にしている要素に対しては Chrome / Safari では上記の Range オブジェクトで `getBoundingClientRect` が正常に取得できません。すべての値が `0` で返ってきます。Firefox は正常に返ってくるので…バグのような気がしなくもないです。

```html
<style>
  p{ writing-mode: vertical-lr; }
</style>
<p contenteditable="true">click me</p>
<script>
  document.onselectionchange = () => {
    const pos = window.getSelection().getRangeAt(0).getBoundingClientRect()
    console.log(pos) // すべて 0 になる…
  }
</script>
```

そこで回避策として以下のように Range オブジェクトを clone して選択範囲を指定し直すと、なぜか取得できるようになります。こちらでは正常に取得できる理由は分かりませんが…とりあえずこれで縦書きでも caret 位置を取得することができるようになりました。

```html
<style>
  p{ writing-mode: vertical-lr; }
</style>
<p contenteditable="true">click me</p>
<script>
  document.onselectionchange = () => {
    const range = window.getSelection().getRangeAt(0)
    const clone = range.cloneRange()
    const fixedPosition = range.endOffset
    // 末尾の文字列を選択した時はダミーテキストを追加して選択範囲を拡大する
    if (fixedPosition + 1 > range.endContainer.length) {
      const dummy = document.createTextNode('&#8203;')
      clone.insertNode(dummy)
      clone.selectNode(dummy)
      const rect = clone.getBoundingClientRect();
      console.log(rect);
      dummy.parentNode.removeChild(dummy)
    } else {
      clone.setStart(range.endContainer, fixedPosition);
      clone.setEnd(range.endContainer, fixedPosition + 1);
      const rect = clone.getBoundingClientRect();
      console.log(rect);
    }
    clone.detach()
  }
</script>
```
任意の桁数で0詰め2進数

10進数 -> 2進数の表記変換は`to_s`メソッドを用いれば簡単にできるが、同時にフォーマットもしたい場合は`format`を利用するのがよい。

```ruby
irb(main):028:0> ("%04b" % 2)
=> "0010"
```


## 参考
http://rurema.clear-code.com/2.6.0/method/Kernel/m/format.html
Twitterで自分用TODOツイートしたらTrelloに自動登録するようにしたって話

# Twitterで自分用TODOツイートしたらTrelloに自動登録するようにしたって話【C#】

休日はやることリスト作らないと一日中寝て終わってしまうので、TwitterにTODOを書き込むようにしています。

ツイートしたからといって誰が進捗確認してくれるわけでもないのですが「なんかやらねーとなー」感が出るので気に入ってます。


さて、このTODOツイート。自分のツイート見に行かないとそもそも見れないのが手間です。

プライベートのタスクはTerlloを使っているので一元管理したいのですが、Trelloに書いてからツイートするの面倒なんですよね。Trelloにだけ書いた場合、結局誰にも見られてないし後でいいかな～状態になってしまうのがダメ。宣言大事。


ので、自分用のフォーマットでTODOツイートをしたときに、Trelloに自動でカードを追加するプログラムをのんびり自作しました。


TwitterでツイートしたらIFTTTからAuzure Functionsの自作APIへデータ送信して、任意のツイートフォーマットだったらTrelloにカードを登録するという構成です。

## 完成イメージ

下記のようなツイートをすると

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">TODO<br>- 布団干す<br>- シーツ洗濯<br>- デスク掃除<br>- ちまちま検証</p>&mdash; コケいろ (@kokeiro0_00) <a href="https://twitter.com/kokeiro0_00/status/1132484385297428480?ref_src=twsrc%5Etfw">2019年5月26日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">TODO<br>- プロメア<br>- 寿司<br>- Unity/OculusGoの細々とした気になってること調査<br>- 洗濯<br>- ウォーターサーバーの水受け取る<br>- プチ部屋掃除</p>&mdash; コケいろ (@kokeiro0_00) <a href="https://twitter.com/kokeiro0_00/status/1132152302922416128?ref_src=twsrc%5Etfw">2019年5月25日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

こんな感じにTrelloに追加されます。

![Twitterで自分用TODOツイートしたらTrelloに自動で登録するようにしたって話【C#】_1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93212/b305d240-22ef-bb26-a9f2-a00b4d28ef7d.png)


## API Key、User Tokenの取得

下記ページから開発者向けAPIキーと、ローカルテストで使用できるトークンを生成・取得します。

https://trello.com/1/appKey/generate

今回は自分用のため最後までローカルテスト用のUser Tokenを利用して開発します。この雑な開発が趣味プログラミングの醍醐味です。


## Azure FunctionにTrelloのカードを登録する処理を書く

今回は[Manatee.Trello](https://github.com/gregsdennis/Manatee.Trello)を使わせてもらいました。

https://github.com/gregsdennis/Manatee.Trello


TrelloのC#APIラッパー。とりあえず今回は使いたかった機能は全て持ってました。感謝。

とりあえず認証してカードを追加するには下記コードで実現できます。

```c#
TrelloAuthorization.Default.AppKey = "[your application key]";
TrelloAuthorization.Default.UserToken = "[your user token]";

var  trelloFactory = new TrelloFactory();
var me = await trelloFactory.Me();
var board = me.Boards.Where(x => x.Name == "TodoBoard").Single();
await board.Refresh();
var list = board.List.Where(x => x.Name == "Progress").Single();
await list.Cards.Add("やること1");
```

簡単。短い。素敵。ありがとうManatee.Trello


で、実際にTweetのパース、Trelloのカード追加してるコードはこのへん。

https://github.com/kokeiro001/KokeiroLifeLogger/blob/2413860b0e5a29a0fc94d59440acee69465a4cf0/KokeiroLifeLogger/Services/MyTweetService.cs#L30-L156



## IFTTTにAppletを登録する

TweetしたらWebRequestするAppletを登録します。

![Twitterで自分用TODOツイートしたらTrelloに自動で登録するようにしたって話【C#】_0.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93212/e3a8a630-7f0a-351b-9a26-7b900e2b620f.png)

今回はツイート内容(Text)のみを取得しました。

IFTTTは素直にWebRequest作れるのが良いですね。簡単に自作サービスと繋げられます。


## まとめ

これまでもIFTTTとTwitterの連携はやってたのですが、Trelloとの連携は初めてでした。

ライブラリのおかげでサクッと実装できました。感謝。

開発者用トークンを使い続けるのも不格好なので、気が向いたら清書したいですね。
VBAで10桁のユニークナンバーを発行する


初投稿なので、手探りで書いていきます。

## 元ネタの質問
> 「10桁のランダムな数字をそれまでに発生していない数字で」
http://www.excel.studio-kazu.jp/kw/20190522114232.html

質問の内容は10桁の乱数を発行するマクロが欲しいというもの。
それに対する回答は概ねすべて「乱数を作って被ったら作り直す」というもの。
10桁なのでそれでいいかなと思いつつも、
作り直すループをせずとも生成できないものかと思い調べたらすぐ見つかった。

>「重複のない10桁の数字をIDとして採番するアルゴリズムを教えて下さい。」
http://q.hatena.ne.jp/1377468971

PHPかぁ。やり方を調べてVBAに作り変えてみよう
> コンピュータの扱う自然数（2のべき乗を位数とする巡回群）のそれぞれの元は奇数定数をかけると必ず相異なる結果になる

んん？この話、どこかで聞いたことがある。どこかで…
数学ガールだ！これ数学ガールで見た！！
時計盤の数字を等間隔で線で結ぶと、特定の物は全部の数字を経由するってやつだ。

> 位数nの巡回群の元p(p<n, pとnは互いに素)には逆数が存在する

互いに素！！知ってる！数学ガールで見た！(しつこい)
フェルマーの最終定理の巻だったかしら。そうかこうやって使うんだ。
本の内容を実際に使えるとなんか嬉しい。

## 相違なる結果とやら
とりあえずやってみよう。
互いに素ということなので2と5で割り切れなければいいのよね。

```
Sub RndTest1()
    For i = 1 To 100
        x = (i * 777) Mod 100
        Cells(i, 1) = x
    Next
End Sub
```

あら、簡単。
なるほど、シャッフルができた。だがこれでは明らかに法則がモロ見えしている。
ここでビット逆順とかいうものをして3回繰り返せばいいわけだ。

ここで問題が2つ。

 - 桁を増やすとすぐオーバーフローする
 - ビット逆順？なにそれ？

## オーバーフロー大好きなExcelさん
オーバーフローは10桁くらいどうにかなると思ったが、ちょっとした掛け算ですぐエラーになる。
doubleとか使えばいいかと思ったけど、そもそもmodなんかは **型宣言無視してオーバーフローする**
あかん(あかん)

2つに分けてみよう。それで桁が溢れたら上の桁に足そう。

```
Sub RndTest2()
    For i = 1 To 10
        x1 = Int(i / 1000) + 1
        x2 = i Mod 1000
        For j = 1 To 3
            x3 = (Int(x2 * 1.123) + x1 * 7789) Mod 1000
            x2 = (x2 * 1123) Mod 1000
            x1 = x3
        Next
        Cells(i, 1) = x1 * 1000 + x2
    Next
End Sub
```
ちょっとややこしくなったけどうまく行った。ちなみに1123と7789は自分の好きな素数だ。

## ビット逆順とは
要は2進数にして順番を逆にすればいいわけね。オーケーオーケー。
でもそんなVBA聞いたことがない。
(EXCEL2019にはビットなんちゃらとかいう数式が増えたらしいけど)

小一時間後、よく考えたら2進数にする必要ないね、と気づく。
そうだ！123456が654321になれば逆順なのでは！(暴論)
よし、こうしよう。

```
  x3 = (Int(x2 * 1.123) + x1 * 7789) Mod 1000
  x2 = (x2 * 1123) Mod 1000
 　↓
  x3 = (x2 * 1123) Mod 1000
  x2 = (Int(x2 * 1.123) + x1 * 7789) Mod 1000
```
計算するついでに上3桁と下3桁を入れ替えよう。つまり123456を456123にしたわけだ。
こういうのをビット回転というの？言わない？あっそう…
まぁなんかビット逆順を使わなくとも、2種類のシャッフルを何度かワチャワチャすれば
予想しづらい並び順に混ざりそうな気がしなくもなくなくない。

## 最終
こうなった。

```
Sub RndTest3()
    For i = 1 To 100
        x1 = Int(i / 1000) + 1
        x2 = i Mod 1000
        For j = 1 To 7
            x3 = 1000 - (x2 * 1123) Mod 1000
            x2 = (Int(x2 * 1.123) + x1 * 7789) Mod 1000
            x1 = x3
        Next
        Cells(i, 1) = x1 * 1000 + x2
    Next
End Sub
```
jのループ回数は、3では微妙に予想できる混ざり方したので7に増やした。
x3で1000から引いてみたのは、なんか混ざるかなぁと思い気分で追加した。
結局10桁と言いつつ6桁だけど、xを増やせば何桁にでもなると思う。
このへんで満足したので終わりにしようと思う。

### 枠外コメ
ちなみに枠外のコメに以下のようなものがあったが、こちらはビックリするほどわからなかった。
~~見なかったことにしよう。~~
> M系列の疑似乱数なら同じ値の繰り返しになるので、適当なシード値とXORマスクを用意して
> 乱数生成　→　1億未満または１１桁以上なら乱数生成に戻る　→　乱数取出し　→　生成した乱数をシードにして先頭に戻る
FLASK routineを使ってテンプレート作成【Windows.ver】

１．新規フォルダ(templetes)を作成
保存名はtemplates 複数形！（templateの単数形ではないので注意）

２．templates フォルダの中に
index.htmlファイルを作成
<img width="178" alt="2019-05-27 (8).png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355304/903d9fb4-1b3c-3bc3-9c42-49556c40beb5.png">

３．index.htmlのコードは下記のように記述する
<img width="483" alt="2019-05-27 (9).png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355304/12ba8253-b3ce-29a5-f35d-4d16bb0090dc.png">



３．下記のようにrender_templateと一行目に追記することでtemplateが呼び出せる。
<img width="638" alt="2019-05-27 (7).png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355304/e43e2001-673c-9dc2-94db-add362cc4928.png">

　　nameを指定する
　　return のところで"index.html"の後にname_value=nameを追記

４．ブラウザを開くとテンプレートが表示される
<img width="590" alt="2019-05-27 (11).png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355304/9194d182-6876-aa78-ec4b-c313a8d9399e.png">


さらに**Step up！**
index.htmlファイルの中に
｛% if文 %}でpythonコードを記述できる

書き方見本<img width="579" alt="2019-06-20 (2).png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355304/6e098dbe-c029-d0b4-fc88-8dd35ab114bc.png">



{%if name_value %}
hello.pyファイルの中で
nameが指定されていたら、nameが表示される
⇒この場合はHello Flaskが表示される

{% else %}
hello.pyファイルの中で
nameが指定されていなかったら
Hi, This is a penと表示される

{% endif %}
if文を終了させるための命令
駄目、全然駄目

 # リモートリポジトリへプッシュ出来ない
- 前日の疲れがとれず寝てしまった、等のいつもの言い訳があり今日はリモートリポジトリへプッシュ出来ない件を引き続き対応するも出来なかった
- 検索したら`git`じゃなくて`https`にプロトコルを切り替えればOKと書いてあったブログを見たのでやってみるもやはりNG。都度都度ファイル書き換えるのは流石にメンドくさくなってきたのでリポジトリで管理対応したい
- なんやかんや言ってもしょうがないのでまた明日

# 今日の気持ち
- 素直な自分の気持ちを綴るので一先ずは「今日の気持ち」にしておこう
- 前日の寝不足なりで疲れがある場合、なかなか疲れが取れなくなってきた。そんなこんなですぐ寝てしまう。寝ればある程度回復するのでいいといえばいいがやはり体の衰えを感じる今日この頃
- 我が町のサッカーチーム川崎フロンターレが強い。チームの勢いを少しでも自分のエネルギーに変えられればと思う
解読 : ARKit2-最初のステップ 1/3- デバイスのサポートとユーザーの許可の確認

https://developer.apple.com/jp/documentation/arkit/verifying_device_support_and_user_permission/

AppがARKitを利用可能であること、ユーザーのプライバシーに配慮していることを確認する。

ARKit 2に対応しているのは、iOS 11.0以降と、A9以降のプロセッサを搭載したiOSデバイス対応機種〜
iPhone〜5s, SE, 6, 6 Plus, 6s, 6s Plus, 7, 7 Plus, 8, 8 Plus, X, XR, XS, XS Max〜
iPad〜mini 2, mini 3, mini 4, Air, Air 2, 第5世代, 第6世代, 9.7インチPro, 10.5インチPro, 12.9インチPro(第1世代), 12.9インチPro(第2世代)〜iPod〜touch (第6世代)

ARKitはデバイスのカメラを使うので、iOSのプライバシー管理を設定し、ユーザーがAppのカメラアクセスを許可できるようにする必要がある。AppがARFaceTrackingConfiguration（英語）を使う場合は、ARKitがAppにユーザーの顔の情報を提供する。ARKitのフェイストラッキング機能を使う場合は、フェイストラッキングおよび顔のデータをどのように使うかをユーザーに説明するプライバシーポリシーを、Appに含める必要がある。

参照: Apple Developer Program使用許諾契約（英語）
Git rebaseをする時、強制Pushをする理由

# rebaseの手順

```
git checkout [branch]
git rebase master
```

最新のbranchにPullした後、作業中のbranchにCheckoutします。
その後、master branchにrebaseします。
問題がないと、rebaseできます。
でも、人生は甘くないので、conflictや色んなエラーメッセージが出ます。

# conflictが発生する時、解決方法

```
git status         　　　    //conflictされたファイルを確認

git add [修正したファイル]    //修正したファイルをaddする
git rebase --continue       //もう一度、rebaseする

git status         　　　   //conflictされたファイルを確認
git push                   //問題がないとpushする
```

こんな流れで、conflictされたファイルを修正しながら、rebaseします。
ファイルを修正して、問題がないとpushします。

# pushしてエラーが発生した時、解決方法

```
git push
! [rejected]          branch -> branch (non-fast-forward)
```
問題がないはずなのに[non-fast-forward]という理由でrejecteされました。
そういう時は、強制Pushをすると解決できます。

```
git push -f [branch]
```

# なぜ、強制Pushをしますか？

```
master   C0--C1--C2--C3--C6--C4(1)--C5(1)   
                      \  
branch                 C4--C5
```

簡単に言うと、普通の状態なら、作業branchとmaster branchの共通コミットとmaster branchのコミットまで全部コピーするので、エラーが出ます。
【GitHub】公開鍵を登録しているのにssh接続できない問題

## 状況
- `git clone git@github.com:username/repo_name.git`をしようとしたら以下のエラーが出る。 

```
git@github.com: Permission denied (publickey).
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.
```

- リポジトリは絶対にある。
- 公開鍵も登録した。
- なぜ...

## 解決策
こちらのサイトに助けていただきました。

- [Githubに接続できない時の対処法](https://qiita.com/nyanchu/items/32d65c4c36315b876d38)

>SSHで接続する際にデフォルトで読みにいく秘密鍵のパスは「~/.ssh/id_rsa」「~/.ssh/id_dsa」「~/.ssh/identity」のいずれかです。それ以外のパスで置いても読み込まれません。

公開鍵に名前を付けていたので、鍵を読みに行ってくれていなかったということでした。`.ssh/config`のファイルを作成して以下をファイル内に記述。

```
Host github github.com
  HostName github.com
  IdentityFile ~/.ssh/#秘密鍵のファイル名
  User git
  Port 22
```
### これでいけるか...!
ssh接続テストをしてみた。
`ssh -T git@github.com`

```
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@         WARNING: UNPROTECTED PRIVATE KEY FILE!          @
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
Permissions for '秘密鍵のpath' are too open.
It is required that your private key files are NOT accessible by others.
This private key will be ignored.
Load key "秘密鍵のpath": bad permissions
git@github.com: Permission denied (publickey).
```

残念。
秘密鍵のパーミッションがヤバイとのことなので、ファイルのプロパティーから変更。(書き込みをできないようにした)

これで接続成功しました。
ちなみにコマンドラインからパーミッションを変更したい場合、windowsだとchmodがなくてicaclsというコマンドらしい。
google拡張でhelloworld

#hello world
チュートリアルのコードは以下からダウンロードできます。
https://developer.chrome.com/extensions/samples#search:hello

まずは、manifest.jsonがなくてはなりません。
これがないと、拡張として読み込まれません。
popupで表示されるiconとそのhtmlはmanifest.jsonのbrowser_actionで定義します。
page_actionにすると、特定のページ（これはbackgroound.jsで指定します）だけで動作し、browser_actionにすると、全てのページでで動作します。
hello_extensions.pngのアイコンがクリックされると、拡張子はhello.html表示します

commandsではショートカットを作成できます。（必須ではないです）

```manifest.json
{
  "name": "Hello Extensions",
  "description" : "Base Level Extension",
  "version": "1.0",
  "browser_action": {
    "default_popup": "hello.html",
    "default_icon": "hello_extensions.png"
  },
  "manifest_version": 2,
  "commands": {
    "_execute_browser_action": {
      "suggested_key": {
        "default": "Ctrl+Shift+F",
        "mac": "MacCtrl+Shift+F"
      },
      "description": "Opens hello.html"
    }
  }
}

```

そしたら
ブラウザでchrome://extensionsを開き、「パッケージ化されていない拡張機能を読み込む」を開き、フォルダを読み込むと、hello_extensions.pngがアドレスバーの右に表示され
「アイコンをクリックする」もしくは、「Ctrl+Shift+F」を押すと、hello.htmlが表示されます。


#コンポーネントで構成される
google拡張はコンポーネントで構成されます。
・background scripts
・content scripts,
・options page
・UI elements
・・・などなど
から構成されます。


###background scripts
background scriptsは必要になったときだけ呼び出されるようです。
(A background page is loaded when it is needed, and unloaded when it goes idle.)

また、manifest.jsonで定義する際は"persistent": falseにしておくべきだそうです。
(Trueにするのは、chrome.webRequest APIを使用してネットワーク要求をブロックまたは変更する場合のみ)


```manifest.json
{
 ...
  "name": "Hello Extensions",
  "description" : "Base Level Extension",
    "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
 ...
}
```
FLASK ~Hello Python!~と表示する【Window.Ver】

1．visual studio code に新しいフォルダ（myappという名前で保存）を作成　

２．myappフォルダの中に新しいファイルを作成する（hello.pyという名前で保存）

３．下記のコードを書く
<img width="316" alt="hello.py _hello python と表示させる.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355304/7c380c31-f5eb-b213-024f-a025c6d541e9.png">

４．ターミナルに行き

Windowsの場合は

$env:FLASK＿APP="hello.py"

Flask run
<img width="477" alt="2019-05-25 (4).png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355304/cb4ad028-f680-00c4-7a30-34f6910f45e9.png">

５．ctrlキーを押しながら、http://127.0.0.1:5000/ を押すと
   下記のようにブラウザが開きHello Python!と表示される
<img width="624" alt="2019-05-25 (6).png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355304/0c6b4c9c-b44a-0b92-9d70-a84b19aa9c94.png">
「null」ってなんだ？

#はじめに
私は、大学４回生です。
現在、未来電子テクノロジーでプログラミング開発コースでもうプログラミングを勉強しています。
今回は、データ構造について勉強していた時に調べたことを、初心者目線でお伝えします。

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

#「null」とは
「null」は、簡単に言うと、「何も示さない」や「何も登録されていない」という意味を持ちます。
勘違いしやすい意味は、「何も入っていない」です。
正確に言うと、データ構造の中で、何も登録されていない項目の初期値に「null」が入っています。
感覚として理解し難いですが、「null」は、「必要ならば、値を入れてね」と行っているような気がします。

#「null」の問題点
何も示さないことを言う「null」は、便利な気がしますが、現代では問題視されています。
それは、「null」を使っているのか、「null」がミスで残ってしまい、エラーが起きるのかわからないという問題です。
また、「null」によって、ソースコードを破壊してしまう可能性もあるそうです。

#まとめ
今回は、詳しい内容まではお話ししませんでしたが、「null」の使用説明書の前書きほどの説明を行いました。
これから「null」を使う頻度を増やし、理解を深めていきます。
【2分でイメージをつかむ】テンプレートエンジン・EJS（1/2）

## あらすじ
- 別記事で、「HTMLファイルを読み込んで表示させる」 ということをESオブジェクトでやりました
- ただ、HTMLの中身（変数とか）を変更したりするのが面倒でした
- もっと簡単に変数とか埋め込みたい！と思っていたらテンプレートエンジンに出会いました。
- 色々使えそうなので、記事は２つにしようかと思います。
- 今回は基本編です

## 準備するもの
- npm で EJSをダウンロードしておいてください
- もしここでnpmって何だろうかと思った方は、この記事を読む前にnpmについての記事を読んでおくことをおススメします。
- うるせぇ！ さっさとEJSダウンロードさせろ！という方は、下記コマンドでインストールできます
　

```console
npm install ejs
```


## 結局・・・EJSって何よ

### <%= 値 %>

↑です。


### HTMLファイルに変数渡すことができます！


```html:hello.ejs
<html>
<body>
    <header>
        <h1 id="h1"><%= 値 %></h1>
    </header>
</body>
</html>
 
```
↑こんな感じ

　

### EJSは、

- HTMLファイルの中で「動的に値を変えたい」時に使えます
- ファイルは「.ejs」という拡張子になります
- このファイルは、「テンプレートファイル」と呼ばれます
- テンプレートファイル内にある、「<%- %>」タグなどの特殊なタグが実際に出力されるテキストに変換されます


### サンプル

- hello.ejs
- ejs.js

　

```html:hello.ejs

<html lang="ja">
<body>
    <header>
        <h1 id="h1"><%=title %></h1>
    </header>
    <div role="main">
        <p><%-content %></p>
    </div>
</body>
</html>

```

```javascript:ejs.js
var http = require('http');
// ファイルの読み込み(は、fsオブジェクトが担当する)
var fs = require('fs');
// テンプレートデータのレンダリング(は、ejsが担当する)
var ejs = require('ejs');
 
// ここは同期処理で読み込みます！
var hello = fs.readFileSync('./hello.ejs', 'utf8');
 
var server = http.createServer();
server.on('request', doRequest);
server.listen(1234);
console.log('Server running!');
 
// リクエストの処理
function doRequest(req, res) {

    // ここでejsオブジェクトが働きます
    var hello2 = ejs.render(hello, {
        title:"title",
        content:"This is made by sample",
    });
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.write(hello2);
    res.end();
}
```

　

### 結果(ちょっとCSSとかで飾りつけしてます)

<img width="353" alt="スクリーンショット 2019-05-26 23.39.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/247053/3e2de8d6-8718-bc3f-ad58-2f9570646743.png">


　

### ポイント!


```javascript

var hello2 = ejs.render(hello, {
    title:"タイトルです",
    content:"これはサンプルで作成したテンプレートです。",
});
```

```javascript

ejs.render( テンプレートデータ , オプション );
```

- 第１引数――レンダリングする対象データ（＝読み込んだテンプレートの文字列）を指定します。
- 第２引数――テンプレートに渡す変数などの情報を連想配列にまとめたものを指定します。

第2引数を連想配列（ここではオブジェクト）で渡してやることで、テンプレートファイルに変数を渡すことができます。


##まとめ

### EJSは、サーバサイド（js）からテンプレートファイル（html）に変数を渡すことができる！

次回に続く
[CircleCI]Gitリポジトリのトップ以外をワーキングディレクトリにする記述

リポジトリの直下にchildという子フォルダがあるとする。
CircleCIでビルドする際に、childフォルダをワーキングディレクトリ(コマンドが実行されるディレクトリ)にする記述方法を示す。

```yaml
version: 2
jobs:
  build:
    working_directory: ~/code/child
    ...
    steps:
    - checkout:
        path: ~/code
    ...
```

checkoutのpathに"~/code"を指定しているので、"~/code" = "リポジトリのトップフォルダ"。
なので、working_directoryに"~/code/child"と書くと、リポジトリのトップの直下のchildフォルダを指定していることになるという寸法。
ジャイロで視差効果 (uGUI、2D)

# できること

- Unityの2Dプロジェクト、または、3Dプロジェクトでも、常に最前面に張り付くタイプ(Screen Space - Overlay)のuGUIで、スクリプトなしで簡易的な視差効果を実現します。

# アセットの入手 (GitHub)
ダウンロード ⇒ [ParallaxEffect.unitypackage](https://github.com/tetr4lab/ParallaxEffect/raw/master/ParallaxEffect.unitypackage)
[ソースはこちらです。](https://github.com/tetr4lab/ParallaxEffect)

# 挙動と例

デバイスを傾けると、向きと傾きに応じて、オブジェクトがスライドします。
同時に、複数のオブジェクトに対して、個別の設定で効果を付与できます。
![ScreenRecord-_10_46午後_-5月-26_-2019__2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/365845/c18929c0-b029-7144-91bf-ccb3114282c3.gif) 　 ![inspecter.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/365845/13918234-99c7-65c5-0903-d59d619c1ee5.png)


#### 解説

この例では、大きさの異なる4枚の矩形を中心を合わせて配置し、それぞれにコンポーネントをアタッチして、大きいものから順に「Deepness=1～4」で設定しています。(他のパラメーターはデフォルトのままです。)
※この例のシーンがアセットに付属しています。

# 使い方

- プロジェクトにアセットをインポートしてください。
- 対象のオブジェクト(Imageやスプライト)に、"ParallaxEffect"スクリプトをアタッチしてください。
- インスペクタでパラメーターを調整してください。
- 通常、Editor上ではジャイロが機能しないので、動作の確認には実機が必要です。

|パラメータ|意味|
|:---|:---|
|ShiftRatio	|傾きに反応する感度です。逆向きにスライドさせる場合は負数を指定します。	|
|Deepness	|感度に乗じられます。	|
|Movable Radius	|スライドを制限する距離を指定します。0を指定すると制限されません。	|
|Return Ratio	|中点に復帰する速度を指定します。0を指定すると自動復帰しなくなります。	|
|Horizontal	|水平方向のスライドについて有効/無効を切り替えます。	|
|Vertical	|垂直方向のスライドについて有効/無効を切り替えます。	|

ParallaxEffect.Reactable = ture; // or false … 全体の有効/無効を切り替えます。