OmniAICreator/Qiita-1.07M huggingface dataset:
shellスクリプトをgithubにあげ失敗した事項と成功した事項のまとめ

複数箇所からダウンロードしたファイルを利用するshellスクリプトをgithubにあげようとして失敗した事項と成功した事項のまとめ

The Template のソースをCmakeするスクリプト群を作成するにあたって(未完)
https://qiita.com/kaizen_nagoya/items/d32b6c3b5dfe1f1e7bb5

 <この項は書きかけです。順次追記します。>
# 成功事項
## 1. フォルダ名を任意にするため一方のフォルダ名を引数にした
## 2. もう一方のフォルダで実行して、途中でCDで引数のフォルダに移動した
## 3. 元のフォルダを覚えているために最初のフォルダ名を変数に代入した
## 4. 各フォルダ用のCMakeLists.txtを作成した
## 5. CMakeLists.txtファイルを各フォルダにコピーするために拡張子をつけた
## 6. shellのdoループでファイルから１行づつ処理をした
# 失敗事項
## 1. 二つのフォルダに関する変数、ファイル名をcdir, dirと似た名前にしたために、勘違いした記述を何度か繰り返した。
## 2. 絶対パスで記述する場合と相対パスで記述する場合の両方を使ったため、混在してエラーの原因を増やした

```sh:CMakeL.sh
...
./s.sh > pwd.txt
cdir=`cat pwd.txt`
cp CMakeLis.sh $1
...
./CMakeLis.sh ${cdir} dir
...
```
上記スクリプトの起動時の指定＄１はFull path。pwdで取得したcdirもFull path。

```MakeLis.sh
...
done < ./$1
...
```
受けて動くコマンドで相対パス指定として処理。結果としてのエラー

```shell-session
line 6: .//Users/ok/Downloads/cpp-compile-test-master/dir: No such file or directory
```

## 3. コマンドを実行する場所にファイルをコピーしていなかった
## 4. 同一のファイルが２つ別のフォルダに存在していてCMakeだとうまくコンパイルさせる方法を知らずエラーになった
## 5. 手元で修正した内容をgithubに上げ忘れていた
## 6. 別のフォルダのスクリプトを修正して、アップロードするフォルダに反映させていなかった

## 7. githubにアップロードしたファイルが、ダウンロードすると最新ではない。（原因不明）

 ＜この記事は個人の過去の経験に基づく個人の感想です。現在所属する組織、業務とは関係がありません。＞
#文献履歴(document history)
ver.0.10 初稿　20180512
ver.0.11 見出し項目書式変更 20180513
### 最後までおよみいただきありがとうございました。
いいね　💚、フォローをお願いします。
#### Thank you very much for reading to the last sentence.
Please press the like icon 💚　and follow me for your happy life.
svg の外部ファイルを読み込む　(img src と jQuery load)

svg の　外部ファイルを、 img src と  jQuery load で読み込んでみました。

実行結果

Chrome
>![chrome_may13.png](https://qiita-image-store.s3.amazonaws.com/0/179446/dd3cc163-8dff-9d90-5b5f-f9da74153eee.png)

Firefox
>![firefox_may13.png](https://qiita-image-store.s3.amazonaws.com/0/179446/ad8b82dc-5341-4a5a-4b46-4d479cb396d7.png)

```html:index.html
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=utf-8" />
<script src="/js/jquery-3.2.1.min.js"></script>
<script src="signal.js"></script>
<title>Read SVG</title>
</head>
<body>
<h2>Read SVG</h2>
<span><img src="./circle_red.svg"></span>
<span><img src="./circle_yellow.svg"></span>
<span><img src="./circle_green.svg"></span>
<p />

<span id="area_red"></span>
<span id="area_yellow"></span>
<span id="area_green"></span>
<p />
<hr />
<div id="outarea_aa">outarea_aa</div>
<div id="outarea_bb">outarea_bb</div>
<div id="outarea_cc">outarea_cc</div>
<div id="outarea_dd">outarea_dd</div>
<div id="outarea_ee">outarea_ee</div>
<div id="outarea_ff">outarea_ff</div>
<div id="outarea_gg">outarea_gg</div>
<div id="outarea_hh">outarea_hh</div>
<hr />

<hr />
Version May/12/2018 PM 19:11<p />
</body>
</html>
```

```js:signal.js
// -------------------------------------------------------------------------
//	signal.js
//
//						May/12/2018
// -------------------------------------------------------------------------
jQuery  (function ()
{
	jQuery("#outarea_aa").text("*** signal.js *** start ***")

	const colors = ["green","yellow","red"]

	colors.forEach(function (color)
		{
		const area = "#area_" + color
		const file_svg = "circle_" + color + ".svg"
		jQuery(area).load(file_svg, function()
			{
			jQuery("#outarea_bb").text("*** done ***")
			})
		})

	jQuery("#outarea_hh").text("*** end ***")
})
 
// -------------------------------------------------------------------------
```

```text:circle_red.svg
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
<circle cx="50" cy="50" r="50" fill="red" />
</svg>
```

```text:circle_yellow.svg
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
<circle cx="50" cy="50" r="50" fill="yellow" />
</svg>
```

```text:circle_green.svg
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
<circle cx="50" cy="50" r="50" fill="green" />
</svg>
```
Windows 10 Education にして感じた2つのメリット

# はじめに

こんにちは、@29Takuyaです。（[プロフィールページ](https://29takuya.github.io/)）

つい最近、[Microsoft Imagine](https://www.microsoft.com/ja-jp/business/education/imagine-students.aspx) の一環で Windows 10 Education のライセンスが無料で一つもらえることを発見しました。
今までは、Windows 10 Home を使っていたのですが、アップグレードすると色々便利な機能がついてくるみたいだったので、今回はそれについてお話しようと思います。


# 今回のお話
1. [Microsoft Imagine](https://www.microsoft.com/ja-jp/business/education/imagine-students.aspx) とは？
2. Windows 10 Home と Windows 10 Education の違い
3. Windows 10 Education へのアップグレード方法

## 1. [Microsoft Imagine](https://www.microsoft.com/ja-jp/business/education/imagine-students.aspx)とは？

簡単に言うと、学生ならばMicrosoftのソフトウェア（有料のものも含む）を無料で利用できちゃうというサービスです。

利用できるサービスの例は[こちら](https://imagine.microsoft.com/ja-jp/Catalog)に書かれていますが、主なものを挙げると、  

- Visual Studio Community
- Windows Server
- SQL Server
- Microsoft Azure

などです。

さらに、これとは別に、所属している機関（大学など）専用のストアがある場合があります。
今回利用した Windows 10 Education はこちらからダウンロードしました。
大学のメールアドレスがあれば認証はすぐにできるので、学生の方は是非試してみて下さい。

## 2. Windows 10 Home と Windows 10 Education の違い
Windows 10 のエディションの違いは、[こちら](https://blogs.windows.com/japan/2015/05/18/httpblogs-windows-combloggingwindows20150513introducing-windows-10-editions/)のページがまとまっていて分かりやすかったです。

今回僕が紹介したい、Home版からEducation版にアップグレードするメリットは次の二つです。

1. Hyper-V
2. リモートデスクトップ

### 2.1 Hyper-V
おそらく多くの人は見慣れない単語でしょうが、簡単に言うとこれは仮想マシンを管理するシステムの一つです。
Virtual Box や VM Ware を使ったことがある方はその類のものだと考えて下さい。
（厳密には多少違いがあるらしく、[こちら](http://www.itstaffing.jp/engineer/entry/20170726_1)のサイトに示されています。）

じゃあ Hyper-V を使うメリットは？と思うでしょうが、僕が感じる最大のメリットは [Docker for Windows](https://www.docker.com/docker-windows) が使えることです。

今までも Virtual Box と Docker Toolbox を使えば、Windows で Docker 環境を構築することは可能でしたが、
標準搭載のシステムを利用することで、より操作がシンプルかつ高速になるのではと期待しています。

Dockerに関しては最近勉強を始めたばかりなので、おいおいメリットなどを具体的に書いていこうと思っています。

### 2.2 リモートデスクトップ
Windows 標準搭載のリモートデスクトップ機能を使用したことがある人はいるでしょうか？
実はこの機能を利用する際は、ホスト側のPCはPro版、もしくはEnterprise版（もしくはEducation版）でなければいけないのです。

できることは単純にリモートデスクトップですが、標準搭載の機能だけあって、UIが使いやすいです。
画面のサイズの違いなどにもうまく対応してくれます。（Chromeのリモートデスクトップだと画面がそのまま縮小される）

外出先などからアクセスするためには、ホスト側がパブリックIPを持つようにしなければいけないので、
ルーターの設定などが少し面倒です。

ただ、僕の場合は、リビングなどから自分の部屋にあるデスクトップPCにアクセスできさえすればよかったので、IPはあまり問題になりませんでした。

セットアップなどの手順は、[こちら](https://pc-karuma.net/windows-10-enable-remote-desktop-services/)のサイトが詳しく解説してくれています。

## 3. Windows 10 Education へのアップグレード方法
前述のMicrosoft Imagine を利用してEducation版をダウンロードした場合、プロダクトキーが発行されます。

プロダクトキーが手元にある状態でHome版からEducation版にアップグレードする方法はとても簡単でした。
まず、「Windowsの設定」から「更新とセキュリティ」画面を開きます。
左側のメニューから「ライセンス認証」を選び、「プロダクトキーを変更します」を押します。
Education版のプロダクトキーを入力すると、アップグレードが開始され、15分ほどで完了しました。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/170782/8791f313-ce06-779b-16a2-5b9f18f757aa.png)

# おわりに
今回は、Windows 10 HomeからWindows 10 Educationにアップグレードするメリットとして、

1. Hyper-V
2. リモートデスクトップ

をご紹介しました。
もしかしたら、それだけの理由でアップグレードはしないという方もいらっしゃるかもしれません。
僕の場合はどうしても Docker for Windows を使ってみたかったので、今回試してみました。

Microsoft Imagine にはこの他にも便利なソフトウェアが多く提供されているので、学生もしくは教育機関に所属している方はぜひ一度チェックしてみて下さい。

ここまで読んで頂き、ありがとうございました。
主な Ethereum ネットワークの Network ID および Chain ID 一覧

* Ethereum は Mainnet (本番環境) と、いくつかある Testnet (テスト環境) で使用している ID が異なります。
* それぞれの環境に固有の Network ID と Chain ID の組み合わせによって、接続する P2P ノードや、トランザクションへの署名結果が変わります。
* なお、Chain ID は Ethereum がハードフォークし、Ethereum Classic と分裂する際に、リプレイアタックを防ぐために導入されたようです。
  * 詳細: https://github.com/ethereum/EIPs/blob/master/EIPS/eip-155.md

# 主な Ethereum ネットワークの Network ID および Chain ID 一覧

| network_id|network_name|chain_id|note|
|---|---|---|---|
|1|Mainnet|1|Ethereum 本番環境ネットワーク|
|3|Ropsten|3|Ethereum テストネットワーク (PoW)|
|4|Rinkeby|4|Ethereum テストネットワーク (PoA)|
|42|Kovan|42|Ethereum テストネットワーク (PoA)|
|1|Geth private chain (default)|1337|Geth の初期値|
|1|Ethereum Classic Mainnet|61|Ethereum Classic 本番ネットワーク|
|2|Morden|62|Ethereum Classic テストネットワーク|

# 参考
* https://ethereum.stackexchange.com/questions/17051/how-to-select-a-network-id-or-is-there-a-list-of-network-ids
* https://github.com/ethereum/EIPs/blob/master/EIPS/eip-155.md

# Note
- Ethereum 関連の情報は https://scrapbox.io/sushiether/ に集約することにしました。
- この記事の内容に変更・更新がある場合は、以下の URL を更新します。
- https://scrapbox.io/sushiether/主な_Ethereum_ネットワークの_Network_ID_および_Chain_ID_一覧
pythonで「coding: utf-8」と書いたのにSyntaxErrorになる理由

# 結論：ファイルのエンコード（名前付けて保存するときに出るあれ）がおかしいんですよ。
コメント欄に

```
　# -*- coding: utf-8 -*-
```
て書いてるのに

```
SyntaxError: (unicode error) 'utf-8' codec can't decode byte 0x8a in position 0:
 invalid start byte
```
と出る。

そもそも自分の書いたファイルのエンコードがutf-8形式になっていないのが原因で他人のプログラムのコピペーで作ったらそりゃ動かないわなと言う反省。

そこで下記の通り変更した。

```
 # -*- coding: Shift-JIS -*-
```

動いたよ～。

そこでもう一つ。うちは、長年統合開発環境を使わずにEditor（「秀丸エディタ」）で開発しているので、utf-8で実行したい場合は、やはり「名前を付けて保存」で「エンコードの種類」を「Unicode(UTF-8)」を選択し直し「保存」する。
もしくは、「ファイル」→「エンコードの種類」→「Unicode(UTF-8)」にして保存しておけばＯＫ。
Windows10にubuntu16.04をデュアルブートする方法

## 準備
- windows10がインストールされたPC<br>
　
- 8GBUSB

## 1. USBの準備
- usbのフォーマット<br>
usbのフォーマットをFAT32にしておく。
- windowsにubuntu16.04をダウンロード<br>
Ubuntu16.04のisoファイルを以下のURLからダウンロードする。<br>
https://www.ubuntulinux.jp/download/ja-remix<br>
ubuntu16.04(isoファイル)を選択する。
　
- usbにisoファイルを書き込む<br>
http://mogi2fruits.net/blog/os-software/windows/36/

  上記のサイトからUNetbootinをダウンロードして先ほど、windowsにダウンロードした
　isoファイルをUSBにLiveCDとして書き込む。

##2. windowsの準備
- 高速スタートアップを無効化
　コントロールパネル -> ハードウェアとサウンド-> 電源オプション -> 電源ボタンの動作を選択する（システム設定） -> 電源ボタンの定義とパスワード保護の有効化の[現在利用可能でない設定を変更します]をクリック -> シャットダウン設定の[高速スタートアップを有効にする（推奨）]のチェックを外す -> 変更の保存
 
- ubuntu用領域確保
　［コンピュータ］アイコンを右クリック［管理］を選択する　->［コンピュータの管理］－［記憶域］－［ディスクの管理］ -> Cドライブを右クリックし、［ボリュームの縮小］を選択する - > しばらくしたら、縮小可能な領域が計算されるので、縮小容量を選択して、縮小
ここで縮小した容量がUbuntuのディスク容量になるため、8000MB以上縮小しておきましょう。
 
##3. ubuntu起動
- bios起動
 - usbを繋いだまま、Shiftキーを押しながらシャットダウンしてF2キーを押しながら
 - 電源ボタンで起動させる。
 
- bios設定
 - Windows Managerよりもusbの起動するときの優先度をあげる。
 - Secure Boot - > disabled
 - CSM　- > enabled(どちらでもいいかもしれない)
 
- ubuntu起動
 - 再起動をしてTry Ubuntu without installingを選択する。
 
- ubuntuインストール
 デスクトップにあるインストールアイコンを開いて、進めていけば終了。
 
##4. おまけ
- osを選択する画面のレイアウト方法(grub-customizer)<br>
端末で下記を打ち込むとgrub-customizerのダウンロードやインストールを行う。<br>
`sudo add-apt-repository ppa:danielrichter2007/grub-customizer`<br>
`sudo apt-get update`<br>
`sudo apt-get install grub-customizer`<br>
検索からgrub-customizerを開くとos選択画面の設定変更ができる。


##参考
https://qiita.com/medalotte/items/4bb5cfa709e93d044f1c
http://ubuntuhandbook.org/index.php/2016/04/install-grub-customizer-ubuntu-16-04-lts/
Scrapboxで使えるTeX記法まとめ(記号)

#はじめに
このページは
[Scrapboxで使えるTeX記法まとめ(T～Z)](https://qiita.com/yuki_shipcat/items/946721d752dd1c1d04f0)
の続きです。
**これで最後です。**

目次:[こちら](https://qiita.com/yuki_shipcat/items/10648019edaddc7a5b3c)

#更新履歴
2019/3/26 仕様変更により大括弧の書き方に追記

#記号
## シャープ
`[$ \#]`
$ \#$
##百分率
`[$ \%]`
$ \%$
##アンパサンド
`[$ \&]`
$ \&$
##アンダーバー
`[$ \_]`
$\_$
##感嘆符
幅を狭めてくれます。
`[$ a\!b,ab]`
![image.png](https://qiita-image-store.s3.amazonaws.com/0/256240/cc0697e0-f251-507a-c2c2-59690fcd4844.png)
`[$ !]`
$!$
##疑問符
`[$ ?]`
$?$
##スラッシュ
`[$ /]`
$ /$
##チルダ
`[$ ~]`
$~$ ←何も表示されない。
##ダラー
`[$ \$]`
$\$$
##コロン
`[$ a\:b,:]`
![image.png](https://qiita-image-store.s3.amazonaws.com/0/256240/88bd2a07-20b5-681f-9561-ad0f9a4a2319.png)
##セミコロン
`[$ a\;b,;]`
$ a\;b,;$
##小なり大なり
`[$ >,<]`
$ >,<$
##中括弧
`[$ \{\}]`
$\{\}$
##括弧
`[$ ()]`
$()$
##大括弧(左のみ)
~~Scrapboxの仕様上、`]`は使えない。~~
仕様変更により、`]`の前に半角スペースを入れることで記述できるようになった。
`[$ [] ]`
$[] $


##パイプ
`[$ |,\|]`
![image.png](https://qiita-image-store.s3.amazonaws.com/0/256240/cd03f8f3-b37d-8176-e6b2-ce7120e9670c.png)
##ピリオド
`[$ .]`
$.$
##プラス
`[$ +]`
$+$
##マイナス
`[$ -]`
$-$
##イコール
`[$ =]`
$=$
##ダッシュ
`[$ ']`
$'$
##ダブルダッシュ
`[$ "]`
$"$
##アスタリスク
`[$ *]`
$*$
##アットマーク
`[$ @]`
$@$

##上下付き文字
`[$ a_bc, a^{bc}]`
$ a_bc, a^{bc}$

#さいごに
お疲れ様でした。これで以上となります。
自分はTeXをそんなに書いたことがないので、抜けている箇所があるかもしれません。ご了承ください。

何か変更点があったり、気が向いたら更新していこうかと思います。
とりあえず次は**カテゴリ別**ですね。
気長にお待ちください。
目次:[こちら](https://qiita.com/yuki_shipcat/items/10648019edaddc7a5b3c)
クソゲーのキャラクターシート登録所みたいなものを作成する4

# おさらい
- [クソゲーのキャラクターシート登録所みたいなものを作成する - Qiita](https://qiita.com/ragingalpaca/items/288869bcf22590783e8c)
- [クソゲーのキャラクターシート登録所みたいなものを作成する2 - Qiita](https://qiita.com/ragingalpaca/items/5bfb457d3fe28abc1f0d)
- [クソゲーのキャラクターシート登録所みたいなものを作成する3 - Qiita](https://qiita.com/ragingalpaca/items/cd6d46ed0429016365f7)

もう誰も横浜の果てで涙という名の同窓会だけ見えないRPGのキャラシ保管庫を作成しています。

# 一旦デプロイ。
デプロイは過去のQiitaを見つつやってました。
ありがとう自分用メモ！

- [Laravel5.5（Homestead）をXSERVERにGitでデプロイする努力の過程 - Qiita](https://qiita.com/ragingalpaca/items/d6bab7b8d989de46f53e)
- [XSERVERにgit pushしようとしたらPermission deniedとか言われた対策 - Qiita](https://qiita.com/ragingalpaca/items/89d4d740d6dba8d92807)

以前に作成したプロジェクトとほぼ同じ仕組みにしました。
こんな感じです。

パス|目的
:--|:--
~/PROJ/|リモートリポジトリ
~/USER.xsrv.jp/git/PROJ.git/|ベアリポジトリ
~/USER.xsrv.jp/public_html/PROJ|リモートリポジトリのpublicへのエイリアス

ベアリポジトリをローカルのgit remoteの指定先にしつつ、`/home/USER/USER.xsrv.jp/git/PROJ.git/hooks/posts-receive`みたいなやつを作成して公開用リモートリポジトリにもpushされるようにしています。


# 画像をどうにかする。
キャラクターシートを登録したり表示したりというのはできてます。
あとは画像をどうにかするだけ。

微妙に苦手意識があるのですが……頑張ります。

## プレビュー
- [JavaScriptでローカル画像を表示する方法](https://lab.syncer.jp/Web/JavaScript/Snippet/17/)

ローカルの画像を取得して一時的にURLを作成し、imgのsrcを書き換えればとりあえずプレビューのようなことはできるみたいです。
リロードで飛ぶらしいですがまあリロードさせない制御は入れているので（別にどうでも）いいかなと思っています。

こんな感じでできました。

```javascript:
    // 画像プレビュー
    function photoKazaru(file)
    {
        document.f.photo.src = window.URL.createObjectURL(file);
    }

```

input type="file"のonchangeでphotoKazaruを呼び出してます。


## アップロード
なんかいろいろ見たんですが……めんどくせええええ！！１！
ってなりました。

そんなときに知ったのがDataURI。

プレビューのところで参照したサイトで紹介されていて、要するに画像データを文字列で表現するらしいです。

これをDBにぶち込めばいいのでは？と考えて、まあ実装もさくっとできたんですが。

**データベースのレコードに何十KBとかってテキストを放り込むのはどうかなとやってから思いました。**

LONGTEXTは最大4GBまで行けるらしいから容量的な問題はないでしょうけど……。

そもそもそれなら画像のバイナリ突っ込むのと変わらないですよね。
で、バイナリ取得できるならファイルに書き込む


### 別の方法を試す
- [アップロードした画像をPHPで保存するメモ│.dotown lab](http://dot-town-lab.com/laboratory/item/60)

いろいろ調べてたらアップロードする方法も理解できてきたので、地道な感じで実現しました。
Validate？　なにそれおいしいの？

**バイナリファイルの中身をそっくりサーバーに移し替える作業をアップロードと言っていいのかどうか**は若干気になるところです。


```php:CharacterController.php
        // 画像を保存
        // 画像が選択されていれば保存する
        foreach ($_FILES as $file)
        {
            // 各種情報の取得
            $tmp_name = $file['tmp_name'];
            $size = $file['size'];
            $ext = pathinfo($file['name'], PATHINFO_EXTENSION);

            if (exif_imagetype($tmp_name) && $size < 120000)
            {
                $f = fopen($tmp_name, 'rb');
                $b = fread($f, $size);
                $imgpath = '/img/upload/' . $id_rand . '.' . $ext;
                $savepath = $_SERVER['DOCUMENT_ROOT'] . $imgpath;
                file_put_contents($savepath, $b);
            }
        }
```

ファイル名はどうせ一意になるので識別IDとして利用しているid_randにしました。
すでにある場合は上書きします。
OUTPUT"May 13 days"


<h2 id="Rubyの開発者を目指し基礎を学んでいる:relaxed:">Rubyの開発者を目指し基礎を学んでいる:relaxed:初心者の私がつまづいたところを簡単にまとめてみました。</h2>


<p>つまづいたところ:runner_tone3:(May 13 days)</p>
<ul>
<li>ハッシュ</li>
<li>配列オブジェクト</li>
<li>while</li>
</ul>

<h2>
<span id="code---コードの挿入" class="fragment"></span><a href="#code---%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AE%E6%8C%BF%E5%85%A5"><i class="fa fa-link"></i></a>ハッシュ</h2>
<p><strong>こ</strong>のスクリプトでのつまづきポイントは「post = {}」。なにこれ。。。いままでは「hash = {hoge:  "huga"}, puts hash[:hoge]」みたいなのを勉強してきて、これは少し違うみたいです。変数としてpostを定義してそこに要素「key,value」を入れていくみたいです。（違かったらすみません。）
</p>


```ruby:sample.rb
  post = {} # ハッシュの宣言

  #要素の追加
  post[:hoge] = "huga"
  post[:hoga] = "hugo"
  puts post # => {:hoge=>"huga",:hoga=>"hugo"}
```

<h2>
<span id="code---コードの挿入" class="fragment"></span><a href="#code---%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AE%E6%8C%BF%E5%85%A5"><i class="fa fa-link"></i></a>配列オブジェクト</h2>
<p><strong>こ</strong>のスクリプトでのつまづきポイントは二つ。「posts = []」と「posts << post」。[]を使って宣言とか定義するのがどうも腑に落ちません。そこにデータを詰め込むのが目的みたいです。例えばループで回す時とか、データ消えてしまうので配列を宣言してそこにpushしていくらしい。最終行の「posts << post」でpost[:hoge]とかpost[:huga]を(配列オブジェクトと呼ばれるらしい。。。)追加しましょうというやつ。正直難しいです。
</p>


```ruby:sample.rb
  posts = [] # 配列の宣言

  #要素の追加
  post[:hoge] = "huga"
  post[:hoga] = "hugo"
  posts << post

```


<h2>
<span id="code---コードの挿入" class="fragment"></span><a href="#code---%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AE%E6%8C%BF%E5%85%A5"><i class="fa fa-link"></i></a>while文</h2>

<p><strong>こ</strong>のスクリプトでのつまづきポイントは「number += 1」。何に使うのかわからず試しにコメントアウトしたところ無限ループに。。。「number」が永遠に1なんで1+1にひたすら足される結果になりました。スクリプトの目的を知ることが大切みたいです。:pensive:</p>

```ruby:sample.rb
  sum = 0
  number = 1
  while number <= 10 do
    sum += number
    puts sum
    #number += 1
  end
```

<h2>
<span id="code---コードの挿入" class="fragment"></span><a href="#code---%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AE%E6%8C%BF%E5%85%A5"><i class="fa fa-link"></i></a>さいごに</h2>
<li id="fn2">
<p>記事自体が読みにくいと思いますが。勉強するにあたり重要なことは"サンプルプログラムの目的抑えてあとは写経する"でした。:zipper_mouth:頭を動かすのは泥沼にハマりそうというのと手を動かすことを仕事として行きたいわけで、体が動けば自然と頭もついてくるような気がします。 <a href="#fnref2">↩</a></p>
</li>
Heroku-16でpuppeteerを使う

Heroku-18のstackも出てきて(まだbetaですが)、いよいよCedar-14もあと1年ほどでEoLなので重い腰を上げてとりあえずHeroku-16にアップデートしました。

puppeteerでいろいろするアプリを動かしていたのですが、良い機会なのでまずパッケージを最新にしました。

## HTTPS警告

Cedar-14のままパッケージを最新にしたらHTTPSの警告で`page.goto()`が例外を吐きました。
puppeteerに同梱されるChromeがバージョンアップされたのでその影響でしょう。
これはlaunchオプションの `ignoreHTTPSErrors` をtrueにする事で回避できました。

ここまでで動作に問題なかったのでStackをHeroku-16に上げました。

## Puppeteer起動しない

Cedar-14に比べるとHeroku-16はDockerイメージのサイズがかなり小さくなっていろいろとライブラリが入らなくなったみたいなのでbuild-pack https://github.com/CoffeeAndCode/puppeteer-heroku-buildpack を追加しました。

でテストしてみるとpuppeteerが起動しない。

```
libatk-bridge-2.0.so.0 cannot be found.
```

まだライブラリが足りないみたいです。調べてみるとgtk+3.0を入れると入るやつみたいなので `Aptfile` (https://github.com/heroku/heroku-buildpack-apt.git を利用)に追加してみたところ現時点最新のpuppeteer@1.4.0でも動作しました。

が、slug sizeが200MB程増えてしまい流石にでかすぎるので、どうにかならないかと調べたところ公式のトラブルシューティングにalpineのDockerで動作させる例がありました。

https://github.com/GoogleChrome/puppeteer/blob/master/docs/troubleshooting.md#running-on-alpine

どうやらChrome64だとgtk+3.0を入れなくても良さそうです。
Chrome64が同梱されている中で最新のpuppeteerは0.13.0なので0.13.0にダウングレードしたところgtk+3.0無しでも動作しました。

もしかすると1.0.0〜1.3.0でもgtk+3.0が不要なバージョンがあるかも知れません。
Railsチュートリアル第一章のメモ

#railsチュートリアルによるトップページの出し方

topページでHello Worldの出し方まで個人的にメモしていきます。

- まずrailsをインストールする。そのためにターミナルに次のコードをコピペする。

`gem install rails -v 5.1.4`

- 次に、hello-appというアプリケーションを作成する。

`cd ~/environment
 rails _5.1.4_ new hello_app`

- 次にgemをインストールする。
 
まずhello-appフォルダのGemfileを開いてデフォルトのコードを削除し、以下のコードに置き換える。

<pre><code>source 'https://rubygems.org'

gem 'rails',        '5.1.4'
gem 'puma',         '3.9.1'
gem 'sass-rails',   '5.0.6'
gem 'uglifier',     '3.2.0'
gem 'coffee-rails', '4.2.2'
gem 'jquery-rails', '4.3.1'
gem 'turbolinks',   '5.0.1'
gem 'jbuilder',     '2.6.4'

group :development, :test do
  gem 'sqlite3',      '1.3.13'
  gem 'byebug', '9.0.6', platform: :mri
end

group :development do
  gem 'web-console',           '3.5.1'
  gem 'listen',                '3.1.5'
  gem 'spring',                '2.0.2'
  gem 'spring-watcher-listen', '2.0.1'
end

# Windows環境ではtzinfo-dataというgemを含める必要があります
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]</code></pre>


このファイルでインストールするgemを指定した。
次にgemをインストールする。ターミナルに以下のコードをコピペする。

`cd hello_app/`
`bundle install`

- 別のターミナルタブでサーバーを立ち上げる。

` cd ~/environment/hello_app/`
`rails server`

PreviewしてYay! You’re on Rails!をブラウザに出す。

- application-controllerにhelloアクションを作る。

<pre><code>def hello
    render html: "hello, world!"
  end</pre></code>

- rootを作る。

`root 'application#hello'`

- Runを♂とhello worldが表示される。
MFCの部品をWindows.Forms.Formに埋め込む

Winformsは[Form#Handle](https://msdn.microsoft.com/library/system.windows.forms.iwin32window.handle(v=vs.110).aspx)でふつうにHWNDが取り出せるので、[`CWnd::Attach`](https://msdn.microsoft.com/library/cc368430.aspx)と[`CWnd::Detach`](https://msdn.microsoft.com/library/cc368495.aspx)でMFCの部品をWindows.Forms.Formに貼り付けることができます。

C++/CLIを使うともっとスムーズにいくのかもしれませんが、[なんかうまくいかなかった](https://www.google.co.jp/search?q=CWin32Window)ので次のようにしました。

# 手順

## 1. DLLを作る

MFCのDLLで、以下のような初期化と解放用の関数を作ります。

```cpp:attach.cpp
/** WinFormsのhwndにattachし、newしたcwndを返す */
extern "C" __declspec(dllexport) CWnd* PASCAL attach(HWND hwnd) {
    auto w = std::make_unique<CWnd>();

    if (!w->Attach(hwnd)) { return nullptr; }

    // ... wに好きな部品を置く ...

    return w.release();
}

/** attachで作ったcwndをdetachとdeleteする */
extern "C" __declspec(dllexport) void PASCAL detach(Pair *p) {
    auto w = std::unique_ptr<CWnd>(cwnd);
    w->Detach();
}
```

## 2. ControlでHandleを渡して呼ぶ

作ったDLLの関数をコントロールで呼び出します。

```cs:SomeMFCControl.cs
public class GuestControl : Control
{
    /// <summary>アタッチしたMFCのCWnd</summary>
    private IntPtr CWnd { get; }

    [DllImport("attach")]
    private static extern IntPtr attach(IntPtr hwnd);
    [DllImport("attach")]
    private static extern void detach(IntPtr hwnd);

    public GuestControl()
    {
        CWnd = attach(Handle);
    }
    
    protected override void Dispose(bool disposing)
    {
       if (disposing)
       {
          detach(CWnd);
       }

       base.Dispose(disposing);
    }
}
```

あとはこのControlをフォームに貼り付ければ動きます。

# 参考リンク

* [サンプル](https://github.com/snipsnipsnip/mfc-on-winforms-example)
* [Bart's Software Cookbook: Making MFC controls available for WinForms through MFC subclassing](http://bartjolling.blogspot.jp/2008/11/developing-windows-forms-control-using.html) (`Attach`でなく`SubclassWindow`を使う方法)
* [Developing Windows Forms Control using MFC and Managed C++ - CodeProject](https://www.codeproject.com/Articles/1935/Developing-Windows-Forms-Control-using-MFC-and-Man) (同上)
Slack Code Syntax Highlighter

Slackでコードとかjsonとか貼り付けても萎えちゃうんです。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/13541/01cabe42-0296-a077-a897-eea5aa5bcfe8.png)

でもこうなったら気分が上がりませんか？

![image.png](https://qiita-image-store.s3.amazonaws.com/0/13541/667cf9cf-171e-d68e-ad93-d2c95a35aa4c.png)

というわけで、作っちゃいました。
クリックしたらコードをSyntax Highlightしてくれます。

https://gist.github.com/ishikawam/6a57599a70471b7fabfa4d37e95d112f

```javascript
// ==UserScript==
// @name         Slack Code Syntax Highlighter
// @namespace    M_Ishikawa
// @version      0.1
// @description  Click code block, highlight it.
// @author       Masayuki Ishikawa
// @match        https://*.slack.com/*
// @grant        none
// ==/UserScript==

/**
 * Thanks for highlight.js.
 */
(function() {
    'use strict';

    // 'monokai-sublime', 'xcode', 'darcula', 'solarized-dark', 'solarized-light', 'github', 'github-gist', 'xcode', 'androidstudio', ... and more.
    // @see https://highlightjs.org/static/demo/
    let theme = 'monokai';

    $('body').prepend(`<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>`);
    $('body').prepend($('<style/>').load('https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/' + theme + '.min.css'));

    $(window).on('click', function(e) {
        if ($(e.target).prop('tagName') !== 'PRE' || ! $(e.target).hasClass('c-mrkdwn__pre') || $(e.target).attr('data-highlighted')) {
            return;
        }

        $(e.target).wrapInner('<code/>');
        $(e.target).attr('data-highlighted', true);
        hljs.highlightBlock(e.target);
    });
})();
```

highlight.jsさまさま。
UserScriptなのでTampermonkeyとかで使って下さい。

なお、デフォルトでテーマをmonokaiにしています（ぼくの好み）が、 https://highlightjs.org/static/demo/ にあるテーマに変更できます。

↓こんな感じ。（動画でクリックしてテーマ変わるのはデモ用に改変したやつで、実際はテーマ固定。）
https://www.youtube.com/watch?v=8_jRCozJMLg&feature=youtu.be

incoming-webhookではコードスニペット使えないし、ちょっとした内容ならコードスニペット使わないことがあったりすると思うので作っちゃいました。
Mirage Soloで「プレイエリアの外」を解除する方法

#1 概要
Mirage Soloはスタンドアロンで6DoFとなっています。ポジショントラッキングがついているため買ってすぐ「よし！歩きまわってみよう！」となると思いますが、そこには大きな壁があります。
そうです。私たちを危険から守ってくれるSafety areaがあります。

Safety areaは円形の領域となっており、その領域から出ようとすると画面が徐々に暗くなっていき、
「安全のためプレイエリアに戻ってください」
という警告がされます。

この記事ではこの警告を非表示にし、いわゆる「プレイエリアの外」を歩けるように設定する方法を記載します。

**※この方法は開発者向けの設定となっており、安全性が著しく低下します。この記事の方法によって警告を非表示にし起こった事故、ケガ等について筆者は一切の責任を負いません。予めご了承ください。あくまで自己責任でお願いします。**

#2 方法
１．コントローラーのDaydream ボタンを押下し、"Daydreamダッシュボード"を開きます。
２．"Daydreamダッシュボード"右上の設定を押下し設定ボタンを開きます。

![Screenshot_20180513_020229.jpg](https://qiita-image-store.s3.amazonaws.com/0/162880/88407be5-a97b-d453-1207-c531da2ed841.jpeg)

３．設定を開いたら、全ての設定 -> Daydream -> VR Setting ->デベロッパー向けの設定を開きます。
※このとき、”デベロッパー向けの設定”が表示されていない場合、開発者モードが有効になっていません。開発者モードを有効にするには写真の赤い四角で囲ってあるビルドバージョンを7回押下してください。

![Screenshot_20180513_015950.jpg](https://qiita-image-store.s3.amazonaws.com/0/162880/5eec3816-4847-c3c6-5a64-da28af33e541.jpeg)

４．デベロッパー向けの設定を開いたら、下に少しスクロールし、"Enable safety graphics"という設定を押下し無効にします。
![Screenshot_20180513_014152.jpg](https://qiita-image-store.s3.amazonaws.com/0/162880/c01e1b95-b560-238b-8836-368ef15b58cb.jpeg)
この設定は無効にしようとすると次のような警告がでます。

![Screenshot_20180513_021318 (1).jpg](https://qiita-image-store.s3.amazonaws.com/0/162880/3d4752b0-3ce6-4988-0990-68c764901da6.jpeg)

>Clicking OK will disable the graphical portion of the safety system.
Users of this device will no longer receive visual warnings when they move araound.
Only use this option in controlled environments where you can ensure suser safety.
[OK]をクリックすると、安全システムのグラフィカル部分が無効になります。
このデバイスのユーザーは、アラウンドを動かすと視覚的な警告を受け取らなくなります。
安全性を確保できる管理された環境でのみ、このオプションを使用してください。


**内容をよく読んだうえで判断し選択してください。**

５．本体の電源ボタンを長押しし、再起動をしてください。
以上の手順でSafety areaは無効となります。
Python3のDebuggingServerログの変換（バイナリ⇨UTF8）

# 前提
Pythonでメール送信の開発時のチェックとして

```Bash
python -m smtpd -n -c DebuggingServer localhost:1025
```
（ローカルホスト、ポート1025）
を利用しているが、バイナリ表記でコンソールに表示される
修正方法が見つからなかったので、対応した内容を投稿しておきます。

# 対応方法

以下のファイルを適当な場所に[smtp.py]というファイル名で作成

```Python:smtp.py

# coding: utf-8

import smtpd


class DebuggingServer(smtpd.DebuggingServer):
    def _print_message_content(self, peer, data):
        inheaders = 1
        lines = data.splitlines()
        for line in lines:
            # headers first
            if inheaders and not line:
                peerheader = 'X-Peer: ' + peer[0]
                if not isinstance(data, str):
                    # decoded_data=false; make header match other binary output
                    peerheader = repr(peerheader.encode('utf-8'))
                print(peerheader)
                inheaders = 0
            if not isinstance(data, str):
                # Avoid spurious 'str on bytes instance' warning.
                line = repr(line.decode('utf-8'))
            print(line)
```

```Bash
python -m smtpd -n -c smtp.DebuggingServer localhost:1025
```

で起動することでUTF-8の形式で出力される。

# 補足
元の実装から

```python
line = repr(line)
```
↓
以下にオーバライドしている

```python
line = repr(line.decode('utf-8'))
```
絵文字😄で物理演算がしたい👌

皆さんは絵文字😄で物理演算💨がしたくなったことはありますか？
私はあります。😉
ということで作ってみました。

![emoji.gif](https://qiita-image-store.s3.amazonaws.com/0/42193/b0287f66-2928-8312-fe29-0012df810cc9.gif)


[デモページ](https://yaegaki.github.io/emoji-physics/)  
[Github](https://github.com/yaegaki/emoji-physics)


## 解説

絵文字で物理演算するためには大きく分けて二つのポイントがあります。
一つ目は 絵文字の当たり判定 、二つ目は 物理演算のエンジンについてです。

### 絵文字の当たり判定

物理演算には当たり判定が必ず必要です。
四角にしてしまってもいいのですが、せっかく絵文字を使うのだからちゃんといい感じの当たり判定にする必要があります。
今回は当たり判定を作成するために `OpenCV` を使用することにしました。
`OpenCV` には `findContours` という画像から輪郭を抽出する関数が存在しているのでそれを利用します。
(`OpenCV`は`Emscripten`を使用することでブラウザ上でも使用できます。ただし、ビルド済みのものが配布されていないので頑張って自分でビルドしましょう。)

当たり判定作成の流れは以下の通りです。

1. 絵文字をcanvasに描画する
2. canvasに描画した画像を使って輪郭を抽出する

それほど難しくないですね。

### 物理演算のエンジン

物理演算をする以上それようのエンジンが必要です。
自分で書いてもいいですがあまりにも面倒なので既存のものを使います。
今回のデモでは[Matter.js](http://brm.io/matter-js/)を使用しました。
これを選んだ理由は特になく、ググったら出てきたものを使用しています。

`Matter.js`には頂点座標(二次元座標)からオブジェクト(`Matter.js`では`Body`)を作成する関数が存在します。
この関数に`OpenCV`で作成した輪郭を入れてやれば終わりです。
と言いたいところですが`Matter.js`特有の注意事項があります。
それは凸状(Convex)でないとうまく扱えないということ、作成したオブジェクトにテクスチャを張ることです。
一応凸状でななくても、`poly-decomp.js`を入れれば扱えないこともないのですが挙動が微妙だったので諦めました。
凸状に変換する方法はいくつかあるのですが、今回はなんとなく`OpenCV`の`convexHull`を使って凸状に変換しました。
テクスチャについては`Matter.js`のソースを見ながら調整しました。

当たり判定、物理演算のエンジンがそろえばあとは普通に追加するだけで完成です。

## 最後に

やってること自体は単純ですが、`OpenCV`や`Matter.js`の使い方が分かるまでに苦労しました。
もっと何か面白そうなことができそうな気もしますがめんどくさくなってきたのでこれ以上はやりません。
`OpenCV`を使って輪郭を抽出するというものは以下のツイートで行われているものを参考にさせていただきました。

(二番煎じですがブラウザ上で動かすこと、絵文字を使うということやってみたかったのです。)

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">文字列で物理演算してみた <a href="https://twitter.com/hashtag/OpenSiv3D?src=hash&amp;ref_src=twsrc%5Etfw">#OpenSiv3D</a> <a href="https://t.co/HIMneK10da">pic.twitter.com/HIMneK10da</a></p>&mdash; Ryo Suzuki (@Reputeless) <a href="https://twitter.com/Reputeless/status/990580128613777408?ref_src=twsrc%5Etfw">2018年4月29日</a></blockquote>
シンプルにbootstrap(sass)を適用させる Rails

#概要
開発とかで
（既存の）railsプロジェクトに手早くbootstrapのCSS（デフォルト状態）を適用させる

#手順
gem の`sass-rails`と**`bootstrap-sass`**が**Gemfile**に記述されているか確認

```rb:Gemfile
gem 'sass-rails',
gem 'bootstrap-sass'
```
`※ sass-railsは最初から記入されている場合もある`

```zsh
#gemをインストール
bundle
```
スタイルシート（sass）を（無ければ）作成

```zsh
vim app/assets/stylesheets/custom.css.scss
```
インポート記述を書いて完了

```sass:app/assets/stylesheets/custom.css.scss
# ファイルの先頭に書く
@import "bootstrap-sprockets";
@import "bootstrap";
```

ブラウザで確認して見て反映されてなかったら
ローカルサーバーを再起動してみて、CSSが適用されたか確認する。

```zsh
#起動中であれば ctrl + c で切断してから
bundle exec rails s
```
http://localhost:3000


#もっとシンプルにベースのCSSを適用したい（開発環境とかで）
[Skelton](https://github.com/dhg/Skeleton)というやつがありまして
取り急ぎの場合、`application.html.erb`に1行記述すればCSS適用されます。

```rb:app/views/layouts/application.html.erb
<html>
  <head>
    <title>プロジェクト名</title>
(省略)

      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">

(省略)
  </head>
(省略)

</html>
```

>[小ネタ - デモ用途向きの超軽量CSSフレームワーク Skeletonを触ってみた](https://qiita.com/ishida330/items/66076797d4812874dbd2)
[必要な分だけの構成。CSSフレームワークは軽量でミニマルなものが良い。](http://www.mdesign-works.com/blog/web/css-framework-skeleton/)

#ほか
bootstrap関連の記述参考
>[Horizontal Form の記述例メモ](http://teematsu.hatenablog.jp/entry/2017/05/07/223359)
[Bootstrapでフォームを利用する方法](https://qiita.com/AquaMeria/items/fe3fd9ebeb4c7171da3b)
openFrameworksのテストをローカルで osx(macOS)編

意外と情報が無かったので自分のメモも兼ねて

## 前提

* gitでcloneしたoF (releaseには `tests/` が入ってない)
* brew
* Xcode
    * Command Line Tools

## 前準備（coreutils入れてない場合）

```bash
$ brew install coreutils
```

何故か後述の `install.sh` で coreutils だけupgradeになってるので入れておく.

## 環境のインストール

```bash
$ cd path/to/oF
$ ./scripts/ci/osx/intall.sh
```

gdb と ccache をインストールする. 2回目からは要らない. というかこれくらい coreutils と一緒にやってもok.

## テスト実行

```bash
$ ./scripts/ci/osx/build.sh
$ ./scripts/ci/osx/run_tests.sh
```

## run_tests.sh 実行時に makeで怒られたら

```
examples/templates/emptyExample
examples/templates/allAddonsExample
tests/**/**
```

上記フォルダ以下にある `obj/` (ビルド結果) を消したりすると幸せになれるかも. （2時間くらいはまった）

## 終わりに

osx以外でも上のスクリプトが各環境毎に準備されてるのでよしなに実行すればよしなに終わるはず.
Vagrant CommandList

# Vagrant

## Commands

| コマンド                                 | 概要                         |
| :--------------------------------------- | :--------------------------- |
| $ vagrant box add [NAME] [URL]           | BOXの追加を行う              |
| $ vagrant box list                       | BOXリストを表示              |
| $ vagrant box remove [Name] [Provider]   | BOXの削除を行う              |
| $ vagrant box repacage [Name] [Provider] | BOXのパッケージ化を行う      |
| $ vagrant init [BoxName] [BoxURL]        | 初期化を行う、起動準備込み   |
| $ vagrant up                             | 仮想マシンの起動             |
| $ vagrant halt                           | 仮想マシンのシャットダウン   |
| $ vagrant reload                         | 仮想マシンの再起動           |
| $ vagrant status                         | 仮想マシンのステータスの確認 |
| $ vagrant destroy                        | 仮想マシンの削除を行う       |
| $ vagrant ssh                            | 仮想マシンへのSSH接続を行う  |

# 起動方法

## VagrantFileを編集してBoxを追加する

最も一般的な方法かと思います。

```console
# ...addboxは後日追記...

# 仮想環境を構築したいディレクトリ直下まで移動する。
# example
$ cd /work/CentOS/dev

# Vagrantfileの生成
$ vagrant init

# 内容を書き換える
$ vim ./Vagrantfil
```

自分で追加したボックスを指定する。{}は省略
(自分の初期化ファイルの中身は15行付近にありました。）
`15 |   config.vm.box = "{hoge-os}"`

## Setup文章を区切らず改行
1. 環境構築したいカレントディレクトリに移動し `$ vagrant box add [fugabox] [各OSのURL]`を実行する。 //しばらく待たされると思う。
2. `$ vagrant init [fugaBox]`を実行して追加したboxの環境で初期化する。
3. `$ vagrant up`で、仮想マシンを立ち上げる。
4. `$ vagrant ssh`を実行し、起動した仮想マシンに接続する。
 
## ブリッジモードへの変更 Vagrantfileの編集

コメントアウトされているものを修正します
`35|  # config.vm.network "private_network", ip: "192.168.33.10"`
↓
`35|  config.vm.network "private_network", ip: "192.168.33.10"`

`ip:"192.168.33.10"`この`""`でくくらている値を変えるとIPの変更が行えます。

## public networkへの接続
外部へ公開したい場合もあると思います。

自分の使用例であれば
同一Wifiに接続し、webページを作成するときiPadなんかに画面自体を写しながら作業していていたりします。

例のごとくコメントアウトを削除するだけで動作します。
`40|  # config.vm.network "public_network"`
`40|  config.vm.network "public_network"`
Dockerコンテナコマンドメモ

dockerコマンドメモです
随時更新予定です

### 状態チェック系
|コマンド  |意味|
|:------|:----------|
|docker container top [CONTAINER ID] |コンテナ内で実行中のプロセスを確認|
|docker container inspect [CONTAINER ID]|コンテナ設定の確認|
|docker container stats [CONTAINER ID]|コンテナのリソース使用状況の確認|


### ネットワーク系
|コマンド  |意味|
|:------|:----------|
|docker container run -p |コンテナのportをホストに割り当てる|
|docker container port [CONTAINER]|ポートの確認|
|docker container inspect --format '{{ .NetworkSettings.IPAddress  }}' [CONTAINER]|IP確認|
|docker network ls|ネットワークリスト確認|
|docker network inspect|ネットワーク詳細確認|
|docker network create --driver|ネットワーク作成|
OpenCV 3.4 + Visual Studio 2017でstaticlibを作る

OpenCV2 で staticlibを作る方法はいろいろ書いてあったけど、OpenCV 3のstatic libを最近の環境で作る方法があまりなかったのでメモ。

OpenCVを静的リンクするためにはstatic libを使う必要があるけど、OpenCV 3.1 以降は公式が配布していないので、自前でビルドする必要がある。

公式のSourceをCMakeでビルドする。この時、BUILD_SHARED_LIBSのチェックをOFFにすれば、dllじゃなくて静的用のstaticlibが生成される。また、BUILD_opencv_worldを有効化して、まとまったlibを生成する。

静的リンクでopencv_worldを生成したら、サイズがとても大きくなるが、Cudaを無効化した状態で実際に生成されたサイズは86MBだったので、最近の富豪的なPCならば問題ないだろう。
  
  
ビルドが成功すると、installフォルダができる。
Visual StudioのVC++ディレクトリ設定で、インクルードディレクトリに「install\includes」、ライブラリディレクトリに「install\x64\vc15\staticlib」を、リンカの追加の依存ファイルにopencv_world341d.lib / opencv_world341.lib を指定する。

さて、コレで実行できるかと思ったら、
『LNK2001	外部シンボル ~~~ は未解決です。』エラーが起きる。

試行錯誤した結果、必要な追加の依存ファイルが足りなかった。
「install\x64\vc15\staticlib」に生成されたすべてのlibを登録する必要があった。(opencv_worldの意味…)
というわけで、「IlmImf.lib;ippicvmt.lib;ippiw.lib;ittnotify.lib;libjasper.lib;libjpeg.lib;libpng.lib;libprotobuf.lib;libtiff.lib;libwebp.lib;zlib.lib;opencv_world341.lib;」を追加して、無事、静的リンクができました！
自分用 macbook インストール おすすめ

#インストールするもの一覧
注意点
あらかじめ秘密鍵等は移しておく
##一般
- chrome
- karabiner　（USキーボード用キーバインド設定ツール）
- magnet (購入)
- LINE
- slack

##プログラミング用アプリケーション
- Sublime Text 3
    - [設定項目](https://qiita.com/TaArakawa/items/dc307a0402272644c1f4)
- Xcode
- docker for mac　(必要に応じて)

##プログラミング
- Homebrew (パッケージ管理、下記「Ruby on Rails」リンク参照)
- Rails on Rails
    - [参考URL](https://qiita.com/narikei/items/cd029911597cdc71c516)
- PostgreSQL (データベース)
- git (インストール確認)
プリンシプル オブ プログラミング　1章を読んで

#前提
これは私の学習用なのでメモ程度の内容でしかありません。ご了承ください。

##プログラミングに銀の弾丸はない
プログラミングに特効薬はない
ソフトウェアは本質的に困難である4つの性質
- 複雑性
- 同調性
- 可変性
- 不可視性

##コードは設計書である
コードの設計とは、「コーディング」「デバック」「テスト」などを経て洗練されていく為プログラミングは創造的な行為である。
大事なのは、コードが設計書ならばコーディングをできるだけ早く始め不明確な所を洗い出し洗練し良いコードを書くことに専念する。

##コードは必ず変更される
本質的に複雑であるソフトウェアは完璧にならない為、「コードが変更される」や「機能の拡張をする」事を前提にし「コードが読みやすい」(参照透過性が高い)事を重視する事が大切である。
コードはコーディングしている時よりも読んでいる時間の方が長くなりやすい為、例え記述に時間を要しても読む時間を短縮できるならそうするべきである。

##まとめ
学生のプログラマーは拡張性や参照透過なコーディングは授業などでは取り扱うことが少ないためこういった概念的なものをもっと学習する必要があると思いました。
Scrapboxで使えるTeX記法まとめ(O～Q)

#はじめに
このページは
[Scrapboxで使えるTeX記法まとめ(M～N)](https://qiita.com/yuki_shipcat/items/26ad63b16eb2d630ca6f)
の続きです。

目次:[こちら](https://qiita.com/yuki_shipcat/items/10648019edaddc7a5b3c)
#O
##\o(dot,minus,plus etc...)
円の中にいろいろ入れます。
`[$ \odot,\ominus,\oplus,\oslash,\otimes]`
$ \odot,\ominus,\oplus,\oslash,\otimes$
##\oint
周回積分？かなんかの記号だったような。
`[$ \oint]`
![image.png](https://qiita-image-store.s3.amazonaws.com/0/256240/fffdbee7-2aa0-e005-9063-020efd138b02.png)
##\Omega \omega
オメガ。角速度。
`[$ \Omega,\omega]`
$ \Omega,\omega$
##\omicron
オミクロン。
イタリック体の`o`と変わりない。
`[$ \omicron]`
$ \omicron$
##\over
分数になる。
`[$ a \over b]`
$ \displaystyle{a \over b}$

##\overline
集合の否定の記号っぽいが、文字数に合わせてくれる。
`[$ \overline{apple},\bar{apple}]`
$ \overline{apple},\bar{apple}$

##\owns
所有しているの記号っぽい。
`[$ \owns]`
$ \owns$
#P
##\parallel
二重縦棒
`[$ \parallel]`
$ \parallel$
##\partial
重積分の記号。
`[$ \partial]`
$ \partial$
##\perp
垂直の記号。
`[$ \perp]`
$ \perp$
##\phantom
指定した語の大きさだけ空白を作る。
`[$ \phantom{\therefore}x+y+z=1]
[$ \phantom{\therefore}x\phantom{+y}+z=1]
[$ \therefore\phantom{x+}y\phantom{+z}=0]`
```math
\phantom{\therefore}x+y+z=1
\phantom{\therefore}x\phantom{+y}+z=1
\therefore\phantom{x+}y\phantom{+z}=0
```
##\phi \Phi
ファイ。
`[$ \phi,\Phi]`
$ \phi,\Phi$

##\pi \Pi
パイ。円周率。
`[$ \pi,\Pi]`
$ \pi,\Pi$

##\pitchfork
フォーク。
`[$ \pitchfork]`
$ \pitchfork$
##pmatrix
`\begin`～`\end`の引数として使える。
行列が作成できる。
`[$  \begin{pmatrix} 1 & 0 & 0 \\\ 0 & 1 & 0 \\\ 0 & 0 & 1 \end{pmatrix}]`
$  \begin{pmatrix} 1 & 0 & 0 \\\ 0 & 1 & 0 \\\ 0 & 0 & 1 \end{pmatrix}$

##\pm
プラスマイナス。二次方程式ではよく使われます。
`[$ \pm]`
$ \pm$
##\pmod
使用例が特殊すぎる。
`[$ 3\equiv 8\pmod{5}]`
$ 3\equiv 8\pmod{5}$

##\pod
何の略だろうか
`[$ \pod{y=ax}]`
$ \pod{y=ax}$
##\Pr
なにに使われるの？
`[$ \Pr]`
$ \Pr$

##\prec(approx,napprox etc...)
左から生えてくる草が色々アレンジされている。
そもそも何の記号？
`[$ \prec,\precapprox,\precnapprox,\preccurlyeq,\preceq,\precneqq,\precsim,\precnsim]`
$ \prec,\precapprox,\precnapprox,\preccurlyeq,\preceq,\precneqq,\precsim,\precnsim$
##\prime
これプライムって呼ぶんですかね
`[$ \prime]`
$ \prime$
##\prod
和系統だと思うんですが、何の和？
`[$ \prod_{k=1}^{n}f(k)]`
$ \displaystyle{\prod_{k=1}^{n}f(k)}$
##\propto
比例するの記号。
`[$ \propto]`
$ \propto$
## \psi \Psi
プサイって読むのかな。
`[$ \psi,\Psi]`
$ \psi,\Psi$
#Q
##\quad \qquad
一定量の空白を作る
`[$ |\quad|\qquad|]`
$ |\quad|\qquad|$

#次
R～S:[Scrapboxで使えるTeX記法まとめ(R～S)](https://qiita.com/yuki_shipcat/items/a497aa41e4c260f31899)
目次:[こちら](https://qiita.com/yuki_shipcat/items/10648019edaddc7a5b3c#_reference-c0dbd56e10e2e72b39f1)
GCIデータサイエンティスト育成講座の演習問題を解く Chapter1

#GCIデータサイエンティスト育成講座
「[GCIデータサイエンティスト育成講座](http://weblab.t.u-tokyo.ac.jp/gci_contents/)」は、東京大学(松尾研究室)が開講している"*<u>実践型のデータサイエンティスト育成講座およびDeep Learning講座</u>*"で、演習パートのコンテンツがJupyterNoteBook形式で公開(CC-BY-NC-ND)されています。
演習コンテンツは全15Chapterあり、"<u>Pythonの基礎から統計的数値計算や機械学習に関する技術、SQLやMongoDB、分散処理のフレームワークであるSparkなど、ビッグデータ解析に関する技術も学べるように設計されている</u>"、"<u>データのセットアップから解析、可視化やモデルのアウトプットまでを一気通貫で学習できる</u>"とのこと。
Chapter1は「**データサイエンティスト講座概要とPythonの基礎**」で、講座の内容および流れを理解し、JupyterNoteBookの使い方とPythonの基礎を学習していきます。
日本語で学べる貴重で素晴らしい教材を公開いただいていることへの「いいね！」ボタンの代わりに、解いてみた解答を載せてみます。間違っているところがあったらご指摘ください。


#Chapter1 データサイエンティスト講座概要とPythonの基礎
##1.2.1

>**[やってみよう]**

>上の＋を押して（もしくは非編集状態で、「b」を押して）セルを追加し、何かのリストを作成して、要素数を出力してみましょう。

```py3
[1,2,3]
```
```
> [1, 2, 3]
```
　

>**[やってみよう]**

>上では、melonを表示させましたが、orangeの値を表示させてみましょう。また、キーがappleとorangeの値を足してみましょう。

```py3
print(sample_dic_data["orange"])
print(sample_dic_data["apple"] + sample_dic_data["orange"])
```
```
> 300
> 400
```
　

>**[やってみよう]**

>出力が変わるように、数字の設定（ここでは、sample_int）を変更して、実行してみましょう。また、条件文や、出力結果等を変えてみたりしてください。

```py3
# 数字の設定
sample_int = 100

if sample_int in sample_data_list:
    #　" " の中に、扱っている変数を表示させたい場合は、以下のように %dと%を組み合わせる
    print("%d は入っています。" % (sample_int))
else:
    print("%d は入っていません。" % (sample_int))
```
```
> 100 は入っていません。
```
　

>#### <練習問題 1>

>ある文字列(Data Scienceなど)を変数として、それを1文字ずつ表示させるプログラムを書いてください。

```py3
str = "Data Science"

for c in str:
    print(c)
```
```
> D
> a
> t
> a
>  
> S
> c
> i
> e
> n
> c
> e
```
　

>#### <練習問題 2>

>1から50までの自然数の和を計算するプログラムを書いて、最後の計算結果を表示させるプログラムを書いてください。

```py3
total = 0

for i in range(1, 50+1):
    total += i

print(total)
```
```
> 1275
```
　

##1.2.2
>**[やってみよう]**

>上のクラス（MyCalcClass）を使って、新しくインスタンスを生成させて(instance_3など）、何か出力等してみましょう。さらにできれば、異なるメソッド（2つの引数の差分など）をこのクラスに追加して、呼び出して使ってみましょう。

```py3
class MyCalcClass2(MyCalcClass):
    
    def calc_sub(self, a, b):
        return a - b
    
    def calc_sub2(self):
        return self.x - self.y

instance_3 = MyCalcClass2(100,10)
print(instance_3.calc_add2())
print(instance_3.calc_sub2())
```
```
> 110
> 90
```
　

##1.3 総合演習
>### 1.3.1 素数判定

>（１）10までの素数を表示させるプログラムを書いてください。なお、素数とは、1とそれ自身の数以外は約数をもたない正の整数のことをいいます。

>（２）上記をさらに一般化して、Nを自然数として、Nまでの素数を表示する関数を書いてください。

```py3
# (1)
for i in range(2, 10+1):
    flag = 1
    for j in range(2, i-1):
        if ((i) % (j)) == 0:
            flag = 0
            break
    #print(i, flag)
    if flag == 1:
        print(i)
```
```
> 2
> 3
> 5
> 7
```
```py3
# (2)
def printPrimeNum(n):
    for i in range(2, n+1):
        flag = 1
        for j in range(2, i-1):
            if ((i) % (j)) == 0:
                flag = 0
                break
        #print(i, flag)
        if flag == 1:
            print(i)
            
printPrimeNum(100)
```
```
> 2
> ...
> 89
> 97
```
propertyと__getattr__を共に定義する場合の注意


`property`と`__getattr__`を共に定義したクラスで、`property`内で`AttributeError`が発生すると、`__getattr__`にfallbackしてしまいます。

下記の例で、`badprop`プロパティ内で、定義されていない`self.not_defined`を参照して、`__getattr__`が呼ばれていますが、`AttributionError` は、`not_defined`に関してではなく、`badprop`に関して起きています。

```python
class Foo:

    @property
    def badprop(self):
        return self.not_defined

    def __getattr__(self, item):
        raise AttributeError("I am %s" % item)

foo = Foo()
foo.badprop  # 'I am badprop' が出力される。
```
これをエラーにする方法として、下記の参考にあるように、`badprop`内で`AttributeError`を捕獲して別のエラーに変換する方法があります。

参考:
* https://groups.google.com/forum/#!topic/comp.lang.python/BZf-d0rLP8U
* https://stackoverflow.com/questions/25115366/property-and-getattr-compatibility-issue-with-attributeerror
* https://github.com/encode/django-rest-framework/issues/2108
Gemini PDA の root 化

# Gemini PDA の root 化
ついうっかり出資した [Gemini PDA](https://www.indiegogo.com/projects/gemini-pda-android-linux-keyboard-mobile-device--2) が第二ロットで到着したので、使い始める前に root を取ってみよう。
と言っても公式に公開されている内容をおさらいする。

## はじめに
公式ページ [Android Support - Planet Computers](http://support.planetcom.co.uk/index.php/Android_Support) をしっかり読みましょう。Android の設定はリセットされるし、文鎮化するかもしれません。
[Flashing Guide - Planet Computers](http://support.planetcom.co.uk/index.php/Flashing_Guide)　に書いてある手順でバックアップを取りましょう。

## 参考にしたページ
- [Android Support - Planet Computers](http://support.planetcom.co.uk/index.php/Android_Support)
- [Flashing Guide - Planet Computers](http://support.planetcom.co.uk/index.php/Flashing_Guide)　

## 準備
Windows 10 のパソコンを準備。

[Android Support - Planet Computers](http://support.planetcom.co.uk/index.php/Android_Support) にあるリンクから、以下のものをダウンロードする。

- FlashTool drivers
- Flashing tool
- Android firmware v1.0 (見るときによってバージョンが違うかも)
- rooted boot image

直リンクはしていないので、Android Support ページの中で検索してリンクをたどろう。

たぶんこの 4 つのファイルがダウンロードされるはず

- FlashTool.zip (Flashing tool)
- FlashToolDrivers.zip (FlashTool drivers)
- Gemini_Android_1_1_0.zip (Android firmware v1.0)
- boot-verified.img (rooted boot image)

## 作業
### Flash Tool Drivers をインストール
zip を展開してそれっぽい exe をクリックするだけ

### Gemini_Android_1_1_0 の準備
Gemini_Android_1_1_0.zip を展開して、別途ダウンロードした boot-verified.img を上書きするだけ

### Flashing Tool を起動
といっても、[Flashing Guide - Planet Computers](http://support.planetcom.co.uk/index.php/Flashing_Guide)　の通りにやって、rooted な boot-verified.img をおいた Gemini_Android_1_1_0 を指定するだけなんだけど・・・。

flash_tool.exe を起動して、ダウンロードタブを選択。
Scatter-loading File に rooted イメージを置いた Gemini_Android_1_1_0 ディレクトリの Gemini_Android_1_1_0_Scatter.txt を選択して、Download Only になっているプルダウンから Firmware Upgrade を選択。
Download・Stop と並んだボタンの Download の方をクリック。

<img width="862" alt="geminipda_root.png" src="https://qiita-image-store.s3.amazonaws.com/0/50565/15fa0df7-b510-38a3-78b2-ed89fd97b7aa.png">

その後 Gemini PDA を再起動すると rooted のイメージがインストールされていく。

### root 化
再起動が終わると root が取れる状態になっているので、公式どおり、Magisk Manager で su コマンドをインストールする。
[Download Magisk Manager](https://magiskmanager.com/) のページの中央部 Download Magisk Manager リンクから、MagiskManager-v5.7.0.apk をダウンロード。
adb が使えるパソコンから、普通にインストールするだけ。

```
% adb install MagiskManager-v5.7.0.apk
```

### 確認
アプリケーションランチャーにある Magisk Manager アプリを起動して、root を取ってみようとすると、許可するかどうかきかれるはず。

```
% adb shell
* daemon not running; starting now at tcp:5037
* daemon started successfully
Planet:/ $ su
### ここで Magisk Manager アプリで許可するかどうかきかれる
Planet:/ #
```
Windows2003でPHPを構築しなければいけない時

#はじめに
Windows2003でPHPを構築するというレアイベントに遭遇してしまった人向けに。
・・・いるのか？

細かい部分は再確認が出来ないのでかなり雑な感じになってしまいますがご了承下さい。参考程度に。
#環境
OS：Windows2003Server
Webサーバー：Apache2.2
**PHPバージョン：5.3.29**
###ポイントその１
PHPのバージョンは大事です。
最新は7とか出ていますが**そんなものとんでもない。**
5.6すら不可能です。
てことで実際確認したなかで一番新しいバージョンは5.3だったので、その中でも一番新しい5.3.29を使用します。
こちらからダウンロードしましょう。
https://windows.php.net/downloads/releases/archives/
#手順
WindowsサーバーへPHPの構築はネットで調べれば沢山出てきます。
例えば自分はこちらのサイト等を参考にしました。
https://webkaru.net/php/windows-php-instal/
###ポイントその２
PHPファイルのインストール方法はzip版の使用がよく紹介されていますが、サーバーの環境によっては必要ファイルが足りないと怒られてしまうこともあるので、その場合はmsi版を使用し、インストールしましょう。
今回の例ですとApacheを使用しているのでThread Safe版です。
なのでファイルは「php-5.3.29-win32-VC9-x86.msi」です。
#まとめ
・PHPのバージョン
・インストール方法（zipまたはmsi）
ポイントにした２点がわかれば何とかなるのではないかなーと思います。
上記のバージョンでもダメだったら、もっと古いバージョンに変えてみたりすると出来るかもしれないです。
js 単語の頭を大文字にして返す

##題
与えられた単語の頭を大文字にして返してください。
*与えられる文字はアルファベット

```javascript
String.prototype.toJadenCase = function () {
  //...
};
var str = "How can mirrors be real if our eyes aren't real";
str.toJadenCase();
```

##使ったもの
split();
map();
charAt();
toUpperCase();
slice();
concat()
join();

##コード

```javascript
String.prototype.toJadenCase = function () {
  let array = this.split(' ');
  let newArray = [];
  newArray = array.map((e,i)=>{
    let head = e.charAt(0).toUpperCase();
    let body = e.slice(1);
	return head.concat(body);
  });
  return newArray.join(' ');
};
```

## その他コード

```javascript
String.prototype.toJadenCase = function () { 
  return this.split(" ").map(function(e){
    return e.charAt(0).toUpperCase() + e.slice(1);
  }).join(" ");
}
```

他にもコードが浮かんだ方、
コードゴルフが浮かんだ方、コメントにお願いします。
強制アンラップしても落ちないmapオペレータを作った（けど…）

https://qiita.com/ukitaka/items/875829ef0e9a5339dfb8

Fortifyを使ってcompactMap的なのを作ったら、便利なのではと思って書いてみた。

# SafeMap

https://github.com/noppefoxwolf/SafeMap

# 使う前

```swift
let paths = ["https://image.com", "", "あああ", "http://image.jp/"]
let medias = paths.compactMap({ (path) -> Media? in
  guard let url = URL(string: $0) else { return nil }
  return Media(url: url)
})
print(medias)
```

# 使うと

```swift
let paths = ["https://image.com", "", "あああ", "http://image.jp/"]
let medias = paths.safeMap({ Media(url: URL(string: $0)!) })
print(medias)
```

こんな感じでsafeMapオペレータ内であれば、強制アンラップに失敗すると自動でmapの対象から外してくれる。

# 問題点

<blockquote class="twitter-tweet" lang="ja"><a href="https://twitter.com/noppefoxwolf/status/995307888267509763"></a></blockquote>

<blockquote class="twitter-tweet" lang="ja"><a href="https://twitter.com/ukitaka_/status/995308701878648834"></a></blockquote>

ということで、debug executableをオフにしないと実行時にちゃんとデバッガーが拾ってしまうのでした…。
デバッガー殺しながら開発するわけにも行かないし、あんまり実用的じゃないな :cry:
xmlファイル内をsedで置換するメモ


```
~ vagrant@localhost
❯ cat foo
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string-array name="colors">
        <item>amber</item>
        <item>blue</item>
        <item>blue grey</item>
        <item>brown</item>
        <item>cyan</item>
        <item>deep orange</item>
        <item>deep purple</item>
        <item>green</item>
        <item>grey</item>
        <item>indigo</item>
        <item>light blue</item>
        <item>light green</item>
        <item>lime</item>
        <item>orange</item>
        <item>pink</item>
        <item>purple</item>
        <item>red</item>
        <item>teal</item>
        <item>yellow</item>
    </string-array>
</resources>
```


`<item></item>`　で囲まれた値を大文字に置換する


```
~ vagrant@localhost
❯ sed -i -E 's/(<item>)(\w+\s*\w*)(<\/item>)/\1\U\2\E\3/' foo
```

`\U`と`\E`で囲まれた文字が大文字になる。
`\L`と`\E`の場合は小文字になる

```
~ vagrant@localhost
❯ cat foo
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string-array name="colors">
        <item>AMBER</item>
        <item>BLUE</item>
        <item>BLUE GREY</item>
        <item>BROWN</item>
        <item>CYAN</item>
        <item>DEEP ORANGE</item>
        <item>DEEP PURPLE</item>
        <item>GREEN</item>
        <item>GREY</item>
        <item>INDIGO</item>
        <item>LIGHT BLUE</item>
        <item>LIGHT GREEN</item>
        <item>LIME</item>
        <item>ORANGE</item>
        <item>PINK</item>
        <item>PURPLE</item>
        <item>RED</item>
        <item>TEAL</item>
        <item>YELLOW</item>
    </string-array>
</resources>

```
safariでcontactform7が動かなくなった時（ローダーが回り続ける）の対処法

なぜなるのかは不明なのですが、
safariのみcontactform7の送信ボタンを押すと
ローダーが回り続けて送信出来ないエラーが発生したのでその解決方法。

公式で回答されてました。
https://wordpress.org/support/topic/contact-form-7-not-working-on-safari-browser/

functions.phpに以下を追記

```php
add_filter( 'wpcf7_load_js', '__return_false' );
add_filter( 'wpcf7_support_html5_fallback', '__return_true' );
```