OmniAICreator/Qiita-1.07M huggingface dataset:
iPhoneアプリ開発入門 (ドットインストール)

ドットインストールから参照。iPhoneアプリ開発入門メモ。

##### 対象者
iOS開発の基礎の基礎を学ぶ方

# 01 iOSアプリを作ってみよう
### 開発環境
Xcode
### 開発言語
Swift

* 基本的には無料で開発ができるが、 App Store に自分のアプリを登録したい場合には Apple Developer Program というプログラムに加入する必要がある。

# 02 プロジェクトを作ってみよう
### 便利な設定
Xcode のメニュー > Preferences > Text Editingのタブから > Line numbersをチェック
行番号を表示してくれる。

# 03 画面の見方を覚えよう

# 04 シミュレータを使ってみよう
`Command + R `でシミュレータを起動
`Shift + Command + H `でホームボタン

# 05 ナビゲータエリアを見てみよう
* AppDelegate.swiftは何らかの処理を書くためのファイル 
![image.png](https://qiita-image-store.s3.amazonaws.com/0/177710/a3b898cb-d40b-7b49-ed87-34937b1fa509.png)

    * アプリが立ち上がったときの処理や、
    * アプリがバックグラウンドにいったときの処理

# 06 ストーリーボードを使ってみよう
* いろいろな部品を配置してアプリの画面を作っていくためのツール
* 右下の方にあるいろいろなアイコンが、Auto Layout に関する設定アイコン
![image.png](https://qiita-image-store.s3.amazonaws.com/0/177710/f62a786b-50d1-c685-d185-0984e99e2e57.png)

# 07 Auto Layoutを使ってみよう
* さまざまな画面サイズに応じて部品を配置していくための機能
* 「Horizontally in Container」と「Vertically in Container」をクリックしてあげると、上下左右中央にくるようになる
![image.png](https://qiita-image-store.s3.amazonaws.com/0/177710/876212f8-e262-5011-b705-f3444e3d9382.png)
* 既にある部品を配置していく流れになる

# 08 プレビュー画面を使ってみよう
Assistant Editor > 上にあるメニュー > Main.storyboard (Preview)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/177710/90de7eca-4eda-fdeb-45ca-af357633e336.png)

* ストーリーボードでは右下に表示されるように配置したつもりが、 Auto Layout を使わないと赤い部品がよくわからない位置になっている
![image.png](https://qiita-image-store.s3.amazonaws.com/0/177710/229aec27-4fbb-d9bc-0049-f30b3e7344d0.png)
* プレビュー機能を使えば他の機種でどう見えるかを調べられる

# 09 セグエで画面遷移させてみよう
ボタンを押すと次の画面に行く、という簡単なアプリをつくる場合

* buttonと検索して、出てきた部品をドラッグ＆ドロップ
* 遷移先の画面は、View Controller という部品をドラッグ＆ドロップ
* ボタンと画面を接続は、Control キーを押しながらボタンをクリックして、そのままドラッグしてあげて、画面の方に伸ばす。線が伸びていくので、この画面の上で離すと、セグエの設定が可能

![image.png](https://qiita-image-store.s3.amazonaws.com/0/177710/bb6b7028-fa3d-b1b3-70fe-ecd2c7f36e2c.png)

# 10 もとの画面に戻ってみよう
unwindToTopの実装

* 画面を終了した時に実行される関数を作る
* ViewController.swift に行き、 class ViewController: UIViewController { } のあたりに関数を書く

# 11 NavigationControllerを使ってみよう
* 階層的にどんどん画面をつなげていく時に使用
「Editor」メニュー > Embed In > Navigation Controller

# 12 ラベルとボタンを追加してみよう
* 「label」を検索してドラッグ＆ドロップ

# 13 ボタンを動作させてみよう
* 画面とプログラムを直接紐付けることができる
![image.png](https://qiita-image-store.s3.amazonaws.com/0/177710/fee0a31c-8587-b4b2-8a97-32553504845f.png)
* Nameを付けて、Connect
    * そうすると、プログラムの中で変数として使えるようになる。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/177710/01bc2df7-1e40-98bc-9d60-7c5a0f61acf7.png)
PowerShellで curlを使うと意図した動きにならない

curlでインストールしたいものがあったので、PowerShellで提示されたコメントを打ち込んだところ、次のようなメッセージが表示されました。

```
コマンド パイプライン位置 1 のコマンドレット Invoke-WebRequest
```

どうやら、PowerShellでは「curl」というコマンドに別のツールが割り当てられているもよう。ただし、標準の curlも、2018 April Update以降の Windows 10であればインストールされているようです。

そのため、次のコマンドでエイリアスを削除すればOK。

```
del alias:curl
```

これで再びコマンドを打ち込めば、通常の curlが動作します。
OpenCV小ネタ：画像の回転と切り出しを同時にやる(切り出されて不要になる部分の不要な回転計算をせずに)

#動機
タイル地図を使ってなんやかんやしようとしています。進行方向を上向きにしたり、特定の土地領域にフィットさせたり、特定の道路を垂直・水平に表示したりするために回転させてから矩形切り出しの処理があります。はじめは元画像(連結タイル)全体を回転させてから必要な矩形を切り出していたのですが、不要な部分まで回転計算しているのがマジで不要なのでなんとかしようとしたらなんとかなりました。地図に限らずこういう処理はあるでしょうし、ザっとググってみても同じようなことがズバリ書いてあるようなのは見つからなかったので紹介してみます。

#pythonコード
![opencv回転切り出し説明1.png](https://qiita-image-store.s3.amazonaws.com/0/189966/f9dc424b-50c2-d278-f468-de5d4a3f1689.png)

元画像src_imgの座標(center[0],center[1])を中心とし、deg度回転させた画像からsize[0]×size[1]の大きさの矩形を切り出したい。centerとsizeはタプルに入っている等とする。

##全体を回転させてから切り出すコード
```
import cv2

#元画像全体を回転させてから切り出す
def cut_after_rot(src_img, deg, center, size):
    rot_mat = cv2.getRotationMatrix2D(center, deg, 1.0)
    src_h,src_w,_ = src_img.shape
    rot_img = cv2.warpAffine(src_img, rot_mat, (src_w,src_h))
    #スライスによって領域を切り出す
    return rot_img[center[1]-size[1]//2:center[1]+size[1]//2, \
                   center[0]-size[0]//2:center[0]+size[0]//2, :]
```

##切り出しと回転が同時なコード
```
#欲しい領域のみ回転させる。切り出しと回転が同時なイメージ。
def rot_cut(src_img, deg, center, size):
    rot_mat = cv2.getRotationMatrix2D(center, deg, 1.0)
    rot_mat[0][2] += -center[0]+size[0]/2 # -(元画像内での中心位置)+(切り抜きたいサイズの中心)
    rot_mat[1][2] += -center[1]+size[1]/2 # 同上
    return cv2.warpAffine(src_img, rot_mat, size)
```
cv2.getRotationMatrix2D()で得られるrot_matは2x3の行列です。左の2x2部はふつうのdeg°の回転行列です。右の2x1部は平行移動量です。原点中心にdeg°回転させた画像を右の2x1部の値で平行移動すると、(center[0],center[1])を中心に回転したかのようになるようです。この平行移動量を操作して、切り出したいサイズの中心に来るようにしているのが上記関数内でコメントがついている箇所です。cv2.warpAffine()の第3引数でもsizeを指定してやって余計な部分の取り出し・回転をしないようにしています。**説明不足感ありありですが、こんなもんで勘弁してください。**


##性能比
試しに640x640のカラー画像を45°回転させて切り出す処理時間を、切り出す大きさを変えて計ってみました。

|       |切り出しサイズ160x160|切り出しサイズ320x320|
|:-----------------|------------------:|:------------------:|
|全体回転させた後で切り出す　cut_after_rot()　1000回 | 3.41秒 | 3.61秒 |
|切り出しと回転が同時　rot_cut()　1000回  | 0.34秒 | 0.72秒 |


cut_after_rot()では切り出しサイズによる影響が少ないです。おそらく全体回転にほとんどの処理時間がかかっています。
rot_cut()では切り出しサイズに応じた時間を要し、cut_after_rot()に比べて高速です。160x160→320x320で処理時間が4倍になりそうなところが2倍くらいで済んでいますが、そこのところはよく分かりません…

Qiita投稿前はこんな検証してなくて「処理が速い(たぶん)」くらいに思ってましたが、計ったみたら思ったより効果があってまあよかったです。
YOLO(You Only Look Once )をざっくばらんに説明する①

###はじめに
この記事ではYOLO(You Only Look Once)のバックグラウンドをできるだけ数理的に説明することを試みる記事である．
###YOLOの目的
<img width="607" alt="IMG_0747.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/33329/dc5549c8-1835-d767-25e0-656598537256.jpeg">
YOLOは物体を個別に認識したいというのが目的である．そのようなモデルは昔からあったが計算効率が悪く，一つのモデルで最初から最後まで完結する方が良いであろうという考えのもと生まれたものである．

###YOLO仕組み

<img width="575" alt="IMG_0748.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/33329/84d20418-6e82-7ff0-d46c-76f2e6876e63.jpeg">

YOLOは与えられた画像XをS×Sに分割する．Sは任意の数字で良いと思うが論文ではS=7，つまり7×7で書かれている．（分割の数が増えれば計算量ももちろん増える．）
なぜS×Sに分割するかと言えばオブジェクトがバウンディングボックス(というよく分からない名前がついているが画像内に沢山の四角を生成してその四角ひとつひとつのこと） という,その四角にオブジェクトは含まれているのかを計算し，結論的にはどの物体がどれくらいかの割合で含まれているかを知りたいのである．

<img width="674" alt="IMG_EF5DCECE44C9-1.jpeg" src="https://qiita-image-store.s3.amazonaws.com/0/33329/9864b12a-d114-c26f-ab26-4bb8530f5f85.jpeg">


そこで，まずはキーワードを紹介したい．

$Pr(Object)$は四角にオブジェクトが含まれている確率である．
IoU(Intersection over Union)とは

```math
\frac{T \bigcap P}{T \bigcup P}
```
Tは本当の物体を含む四角である，Pは予測された物体を含む四角である．

<img width="683" alt="IMG_0749.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/33329/ac6832ef-c8eb-f4f4-2972-183a892d5e8f.jpeg">

もちろんTとPが分離してたら空集合になるので０になる。値が小さいほど離れていることを意味する。
０．５以上で良いとされる。１になると覆ってるか、完全に重なっていることを意味する。

次に$Pr(Object)・IoU$とは先ほどの”四角が物体を含む確率”×”IoU（物体が被ってる比）”であるので，これを四角が**どれくらい**物体を含んでいるかを定義することが出来た．

次に$Pr(Class_i | Object)$とは$Class_i$（つまり存在する物体の個数，この例の場合は人と車と木で3であるので（i=1,2,3)）に物体（Object)が含まれる条件付き確率である．

<img width="656" alt="IMG_0750.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/33329/89f5a2e5-5675-9197-bc43-6626ee695939.jpeg">

そして最後に$Pr(Class_i | Object)・Pr(Object)・IoU$="$Class_i$に物体（Object)が含まれているか"×"四角がどれくらい物体を含んでいるか"を計算するとどの物体をより含んでいるかの確率がでる．

<img width="496" alt="IMG_E7FEA8A3B16F-1.jpeg" src="https://qiita-image-store.s3.amazonaws.com/0/33329/2cf0b401-6bd8-e363-7257-5accfb529af0.jpeg">

次回は損失関数やネットワークについて書く予定です．最終的に実装までいけたら良いなと思っています．

####参考文献
https://arxiv.org/pdf/1506.02640.pdf
https://medium.com/@jonathan_hui/real-time-object-detection-with-yolo-yolov2-28b1b93e2088
aglioのインストールができない

注意：node.js,npm初心者かつ苦手です。同じく超初心者向けに書きます。怪しいことを書いてるかもしれません。

#### 障害

aglioはnode.jsで作られた、APIドキュメント作成ツールです。
インストールしようとしたところエラーになりました。

```
npm install -g aglio
```

結果

```
gyp ERR! build error 
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack     at ChildProcess.onExit (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:262:23)
gyp ERR! stack     at ChildProcess.emit (events.js:182:13)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:240:12)
gyp ERR! System Darwin 17.7.0
gyp ERR! command "/usr/local/Cellar/node/10.11.0/bin/node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /Users/hogehoge/fugafuga/node_modules/protagonist
gyp ERR! node -v v10.11.0
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok
```
　
#### 結論
nodeのバージョンがどうやら高いらしい
適当に8に下げたら通りました

#### 所感

知らないワードが多いと全部怪しく見えますが、ポイントはどうやらこれですね。

```
gyp ERR! node -v v10.11.0
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok
```

https://github.com/danielgtaylor/aglio
でも該当のgithub見ても、nodeのバージョンがどうとか書いてないんですね？（そこら辺の常識に疎いのでどこかに書いてるのかも） 結局nodeをいくつのバージョンにすればいいのかわかりませんでした。最終更新日から適当に下げました。

なおnodeのバージョンの下げ方に関しては書きません。

#### 応用
npmで管理された別のパッケージでもこのエラーパターンはよくあるみたいですね。苦戦しました。
何か別の原因でも似たエラーが出るようです。

### 追記
別環境で更にハマりました

参考にさせていただきました
https://sutaba-mac.site/gyp-not-accept-python3/
https://shinespark.hatenablog.com/entry/2015/10/29/012921
[Rails5]Deviseの認証メールで画像が表示されないからカスタムしてみた。

#初めに
認証メールに画像やアイコンを載せたく、試みようとしたらDeviseの認証メールをカスタマイズしないといけなかったので、その経緯を記してみます( ..)φメモメモ

#カスタマイズせずに試みたコード
view

```
<!DOCTYPE html>
<html>
  <%= stylesheet_link_tag 'mailer', media: 'all', 'data-turbolinks-track': 'reload' %>
    <p><%= @email %>　○○○へようこそ!</p>
    <p>メールアドレスの確認をした後にご利用頂けます。</p>
      <%= image_tag 'mail.png' %>
```

```config/application.rb
#ActionMailerのviewに画像を追加する為に
config.action_mailer.asset_host = 'https://'
```  
表示されない、、、
#何が原因か探る
・画像を他のviewで表示できたから画像自体に問題ない。
・受け取る側のメール設定に問題ない。
・受け取る側のデバイスに問題はない。
・バイナリーモードになっていて問題ない。
・configに問題ない。

#原因

[参考１](https://gist.github.com/pifleo/2882280)、[参考２](http://tango-ruby.hatenablog.com/entry/2015/08/20/230500)
普通にimage_tagを使っても駄目で、Devise Mailerをカスタマイズしないといけないことが原因だった。

#解決

```app/mailers/devise_custom_mailer.rb
class DeviseCustomMailer < Devise::Mailer
  before_action :add_inline_attachment!

  private

  def add_inline_attachment!
    pngs = ['mail.png']

    pngs.each do |png|
      attachments.inline[png] = File.read("#{Rails.root}/app/assets/images/mailer/" + png)
    end
  end
end
```

```config/initializers/devise.rb
#追加
config.mailer = 'DeviseCustomMailer'
```

```/app/views/devise/mailer/confirmation_instructions.html.erb
CTYPE html>
<html>
  <%= stylesheet_link_tag    'mailer', media: 'all', 'data-turbolinks-track': 'reload' %>
    <p><%= @email %>　○○○へようこそ!</p>
    <p>メールアドレスの確認をした後にご利用頂けます。</p>
     <%= image_tag attachments['mail.png'].url %>   
```

これで認証メールに画像を表示させる事ができるようになりました。
音声によるBPMSのテスト

#ELIZAをモデルにBPMS
![bpmchat.JPG](https://qiita-image-store.s3.amazonaws.com/0/37985/3a464a45-1dfa-77d7-96a9-4e070514d43c.jpeg)


#BPMSは使いかたがよくわからない　けど　便利そう
大手じゃないとつかえないのでは？とばかりなので
うーんだけど　仕事という面では　普通の技術をやっておいた方がいいかなと
需要はあまりないか　
##日々みんな日常でつかっていることですよーと
#日々やっている事でBPMSがわかるようにしていく
##サイトで音声でしゃべる　しゃべった内容を条件にフロー進行がかわる
![flow1.JPG](https://qiita-image-store.s3.amazonaws.com/0/37985/208e4398-2302-c019-0e99-42a40b327b04.jpeg)
###これだと考えやすいと思う
###人間とおなじで　その言葉によってなにをするか設定しているだけ

![voice.JPG](https://qiita-image-store.s3.amazonaws.com/0/37985/c78f8093-5a28-9f17-1be7-5360e7e2b444.jpeg)
#ケース（作業ベースで流れは管理）
![管理システム.JPG](https://qiita-image-store.s3.amazonaws.com/0/37985/516a7188-a1c2-88f5-fc8b-b41055af1aa3.jpeg)

#しゃべった内容によってフローがかわっていく
#その条件が　テキスト（音声）　おなかすいた　→　コンビニいくとか

#それだけ
#あとは随時　画像によってフローをかえるなどしていく
#BPMSに思う事
機械学習　GCP　各言語　BPMS
小さい所からやることが必要で
そこができれば　大きいものはできる
その基盤があるから　いろんな技術があわさっていく
その基盤がないと
一個一個はおもしろいけど　つながっていかない
本当はつなげたらすごいものだとおもう

一般に広がってくれるといいんだけどなと
海外みたく個人事業主が母体とかでなく　終身雇用が母体だと
知識をシステム化というのも　あまり認識がないしなと
＊）そりゃ終身雇用だったら人がいるので　

QIITAでもいろいろな技術があるけど
あー　ここにつなげたら　面白いなーとか
＊）できる出来ないは別として　繋げる可能性がわかれば　まーなんとかなる　勉強で
Next.jsのエラー

## TypeError: Cannot read property 'eslint' of undefined

```terminal:terminal
ERROR  Failed to compile with 1 errors                                                                                                                                                         03:56:22

Module build failed (from ./node_modules/eslint-loader/index.js):
TypeError: Cannot read property 'eslint' of undefined

You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.
```

```js:nuxt.config.js
// before
module.exports = {

  ...

  build: {
    /*
    ** Run ESLint on save
    */
    extend (config, { isDev, isClient }) {
      if (isDev && isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    }
  }
}


// after
module.exports = {
   ...

  build: {
    /*
    ** Run ESLint on save
    */
    extend(config) {
      if (process.server && process.browser) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    }
  }
}
Omron BY50S を Linux で使う (udev のイケてる設定編)

長年 APC の UPS を使ってきたけど、ちょっと変えてみようということで Omron の BY50S を買ってみた。

おおむね有難い先人の情報で事足りるのだけど……

* [Ubuntu 10.04 LTS - nut - omron BY50S](http://seesaawiki.jp/w/kou1okada/d/Ubuntu%2010.04%20LTS%20-%20nut%20-%20omron%20BY50S)
* [OMRON BY50SをUbuntu 11.04で使用する](http://d.sunnyone.org/2011/05/omron-by50subuntu-1104.html)

しかし、**日本語の情報はみんなudevの設定が微妙だ**。
というわけでDebian stretch での設定を記録しておく。

## UPS 監視デーモンを入れる

```
$ sudo apt install nut
```

## udev の設定

udev を設定して USB を挿した時に nut デーモンから読めるよう設定する。このパートが書きたかった事の殆ど全てである。

ポイントは2つ

 * 自分の設定ファイルは /etc の下に置こう
 * SYMLINK を使ってデバイスのパスを固定しよう

みんなが罠にはまっているけど、パッケージで用意される /lib/udev/rules.d/62-nut-usbups.rules を**直接編集するのはやめよう。アップデート時に上書きされて後日泣くことになる**。あと、分離できなくなるので自分の設定ファイルを /lib/udev 以下に置くのもやめよう。

というわけで自分のファイルは用意されている /etc/udev/rules.d 以下に置く。/etc/udev/rules.d/90-omron-ups.rules とかの名前にしておこう。
中身はこうだ

```
# Omron BY50S - blazer_usb
SUBSYSTEM=="usb", ENV{DEVTYPE}=="usb_device", \
ATTRS{idVendor}=="0590", ATTRS{idProduct}=="0081", \
MODE="0664", GROUP="nut", SYMLINK+="ups"
```

ここでもう一つのポイントとして `SYMLINK+="ups"` を使おう。これで **常に /dev/ups というパスでアクセスできる**。どこのポートに挿しても、同じクラスのデバイスの何番目に指してもOKだ。USB のバス番号を調べる必要もない。

設定が終わったらルールをリロードする。

```
$ sudo udevadm control --reload
```

この後 USB を抜き差ししてみて、/dev/ups と言う symlink が作られる事を確認しよう。

## 監視デーモン nut の設定

後は先人の情報通り設定ファイルを編集する。

#### /etc/nut/nut.conf

```
MODE=standalone
```

#### /etc/nut/ups.conf

```
[by50s]
driver = blazer_usb
port = /dev/ups
desc = "Omron UPS BY50S"
vendorid = 0590
productid = 0081
subdriver = ippon
default.battery.voltage.high = 13.5
default.battery.voltage.low = 11.5
default.battery.charge.low = 30
ondelay = 0
```

port に先程の `/dev/ups` を指定する。
default.battery.voltage の high /low に関しては情報通りの値を使わせして貰った。こちらでも上手く動いている。

#### /etc/nut/upsmon.conf

```
MONITOR by50s@localhost 1 upsmon upspass master
```

### /etc/nut/upsd.users

```
[upsmon]
password = upspass
upsmon master
```

#### 設定のチェック

ここまで設定したら以下のコマンドでチェックする。

```
$ sudo -u nut /lib/nut/blazer_usb -a by50s -DDD
```

read: の行でそれらしき値が出てくるならOK. Ctrl+C で止める。

#### 設定の適用

systemctl でやっても良いんだけど面倒くさいので init script で……

```
$ sudo /etc/init.d/nut-server restart
$ sudo /etc/init.d/nut-client restart
```

## 状態の確認

upsc で見られる

```
$ upsc by50s
Init SSL without certificate database
battery.charge: 100
battery.charge.low: 30
battery.voltage: 13.50
battery.voltage.high: 13.5
battery.voltage.low: 11
device.type: ups
driver.name: blazer_usb
driver.parameter.pollinterval: 2
driver.parameter.port: /dev/ups
driver.parameter.productid: 0081
driver.parameter.subdriver: ippon
driver.parameter.synchronous: no
driver.parameter.vendorid: 0590
driver.version: 2.7.4
driver.version.internal: 0.12
input.frequency: 49.9
input.voltage: 102.5
input.voltage.fault: 0.0
output.voltage: 102.1
ups.beeper.status: disabled
ups.delay.shutdown: 30
ups.delay.start: 180
ups.load: 13
ups.productid: 0081
ups.status: OL BYPASS
ups.temperature: 47.7
ups.type: offline / line interactive
ups.vendorid: 0590
```
[Swift]protocol extensionの罠

Swiftのプロトコルは便利なのでよく使うのですが、今になってハマったところがあったので。

# optionalの代わりにextensionを使う

SwiftのプロトコルではObjective-Cにあったoptionalが廃止されました。
まあ、Objective-Cのoptionalはコンパイラがエラー吐かなくなるだけで、呼び出す際に毎回呼び出せるかチェックが必要だったのでかなり使い勝手悪かったですけど。
でも、Swiftでoptionalのような使い方ができないわけではなく、extensionでデフォルト動作を実装することで、optionalと同じような使い方ができます。

```swift
protocol SomeProtocol{
    // required method
    func r()
    
    // optional method
    func o()
}

extension SomeProtocol {
    // optional method
    func o() {
        print("o() in SomeProtocol")
    }
}

class SomeClass: SomeProtocol {
    func r() {
        print("r() in SomeClass")
    }
}

let sc = SomeClass()
sc.r() // 出力 "r() in SomeClass"
sc.o() // 出力 "o() in SomeProtocol"
```

ここまでは問題ありません。
問題は、僕が"extensionにoptionalにしたい関数を書けばいい"と覚えていたことです。

# protocolにメソッド定義を書かない
そんなふうに覚えていた僕は下のようにプロトコルを定義したんです。

```swift
protocol SomeProtocol{
    // required method
    func r()
}

extension SomeProtocol {
    // optional method
    func o() {
        print("o() in SomeProtocol")
    }
}
```

プロトコル定義からメソッドo()の定義が抜けています。
これでもコンパイルは通ります。
けど、動作が少し違うんです。
下のコードみたいな感じで。

```swift
protocol SomeProtocol{
    // required method
    func r()
    
    // optional method
    func o()
}

extension SomeProtocol {
    // optional methods
    func o() {
        print("o() in SomeProtocol")
    }
    func p() {
        print("p() in SomeProtocol")
    }
}

class SomeClass: SomeProtocol {
    func r() {
        print("r() in SomeClass")
    }
    func o() {
        print("o() in SomeClass")
    }
    func p() {
        print("p() in SomeClass")
    }
}

let sc: SomeClass = SomeClass()
sc.r() // 出力 "r() in SomeClass"
sc.o() // 出力 "o() in SomeClass"
sc.p() // 出力 "p() in SomeClass"
let sp: SomeProtocol = sc
sp.r() // 出力 "r() in SomeClass"
sp.o() // 出力 "o() in SomeClass"
sp.p() // 出力 "p() in SomeProtocol"
```

protocolとextension両方にメソッド定義してあるo()は常にクラスのメソッドが実行されるのに対し、
extensionにしか定義してないメソッドp()は、変数の型によって呼び出されるメソッドが違います。

同名の呼び出せるメソッドが複数ある時の優先順位が変わるんですかね。
Swiftのメソッド呼び出しの仕組みをよく知らないのでわかんないですけど。
今回たまたま実行されていないのに気づいたけど、過去に同じようなことやってバグを作ってないか心配。
というわけで、みなさんもお気をつけて。
マイグレーションファイルとスキーマファイルについて（migration, schema, rake）

記事を移転させました。
[【投稿】マイグレーションファイルとスキーマファイルについて（migration, schema, rake）](https://pick-up-tech.com/blog/%E3%83%9E%E3%82%A4%E3%82%B0%E3%83%AC%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%A8%E3%82%B9%E3%82%AD%E3%83%BC%E3%83%9E%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6%EF%BC%88migration-schema-rake%EF%BC%89)
Javaでこんにちは世界（ VimとQuickrunで手早く文法を学ぶっ）

![Screen Shot 2018-10-03 at 8.11.58.png](https://qiita-image-store.s3.amazonaws.com/0/149269/65000752-2656-fc86-7073-4a67086537c0.png)



# Summary

`java`ファイルを`Vim`で`Quickrun`

## 改訂履歴

```
2018/10/03 wed
コメントで shiracamus さんよりアドバイスをいただいたクラス・変数名に関して訂正した
グローバル変数 foo_ に関しては訂正保留中
```

## ファイル構成

```
$ tree
.
└── MyProj               // project folder ( working folder )
    ├── main
    │   └── Main.java    // entry file
    └── myclass
        └── Hello.java   // your own classes


3 directories, 2 files
```

## Quickrun

```vim
\ 'java': {
\   'exec': ['javac -cp %s:p:h:h:h */*.java', 'java -cp %s:p:h:h:h:%s:p:h %s:t:r %a' ],
\   'hook/output_encode/encoding': '&termencoding',
\   'hook/sweep/files': '%S:p:r.class',
\ },
```

## Java's code

entry class

```java 
// Main.java
import MyProj.myclass.*;

public class Main {

    public static void main(String[] argv){

        Hello hello = new Hello("world!");
        hello.sayHello();

    }

}
```

your own classes

```java
// Hello.java
package MyProj.myclass;

public class Hello {

    private String str_ = "hello ";

    public Hello( String s ){
        this.str_ = this.str_ + s;
    }

    public void sayHello(){
        System.out.println( this.str_ );
    }

}
```

## Reference

[自作したクラスをimportしたい](http://www.hyuki.com/jq/jqdig0056_package.html)
[quickrun help](https://github.com/thinca/vim-quickrun/blob/master/doc/quickrun.jax)
無限ループって怖いですね

Qiita初投稿です。

備忘録を兼ねてます。2018年に何を書いてるんだろう。
少しずつ書き足していきます。ツッコミどんどんください。

先日、業務でClassicASP製のウェブページをASP.NETで書き換える必要があり、
その際にループ文でつまづいたのでまとめてました。

# 条件判定を行ってから実行する場合

VBScript

```vb
Do While hoge 比較演算子 hoge2
   WScript.Echo "Hello World!"
Loop
```

c#

```csharp
While (hoge 比較演算子 hoge2)
{
  Console.WriteLine("Hello World!");
}
```

# 実行してから条件判定をする場合

VBScript

```vb
Do 

  WScript.Echo "Hello World!"

Loop While hoge 比較演算子 hoge2
```

c#

```csharp
do{

 Console.WriteLine("Hello World!");

}while( hoge 比較演算子 hoge2)
```

# 条件式を反転させたい場合

VBScript

```vb
Do While Not hoge 比較演算子 hoge2
   WScript.Echo "Hello World!"
Loop
```

c#

```csharp

While (!(hoge 比較演算子 hoge2))
{
  Console.WriteLine("Hello World!");
}

```

後日JavaScriptについても追記しようと思います。
Pythonでクリップボードを操作するモジュール「pyperclip」をLinux(Ubuntu)にインストールした時のメモ。

Pythonでクリップボードを操作する**[pyperclip]**というモジュールをインストールしましたが、スッといかなかったのでメモしておきます。

# インストール
Python3にインストールしたかったので次のコマンドを実行しました。
`pip3 install pyperclip`

# なにやらおかしい
インポートは問題ないようです。

```python
>>> import pyperclip
```

クリップボードに”Hello”をコピーてから次のコードで変数[text]にクリップボードの内容を代入します。

```python
## 変数[text]にクリップボードの内容を代入する。
>>> text = pyperclip.paste()
```

すると、なにやらエラーのようです。

```python
pyperclip.PyperclipException: 
    Pyperclip could not find a copy/paste mechanism for your system.
    For more information, please visit https://pyperclip.readthedocs.io/en/latest/introduction.html#not-implemented-error 
```
>「コピペに必要な仕組みが見つかりません。[詳しくはこちら](https://pyperclip.readthedocs.io/en/latest/introduction.html#not-implemented-error)を見てね。」的なことだと思います。（たぶん…）

どうやらLinux版で出るエラーのようで、上記のサイトをGoogle翻訳すると以下のうち１つをインストールする必要があるみたいです。
- `sudo apt-get install xsel`
- `sudo apt-get install xclip`
- `pip install gtk to install the gtk`
- `pip install PyQt4 to install the PyQt4`

上の２つはインストールするとコマンドラインからクリップボードを操作したり、中クリックでペーストできるようになったりと便利そうなので両方共インストールしましたが、下の２つはインストールできませんでした。

# 使い方

```python
## クリップボードに”Hello”を代入する。
>>> pyperclip.copy("Hello")

## 変数[text]にクリップボードの内容を代入する。
>>> text = pyperclip.paste()

## 変数[text]の内容を表示する。
>>> text
'Hello'
```

# WindowsやMacOSやiOSの場合
このモジュールはWindowsやMacOSでも動作しますが同じようなエラーが発生することはないようです。

iOSのPythonista3には対応してないのか**OSerror**で動作しませんが、より強力な**[clipboard]**モジュールが標準でインストールされてます。
Nuxt2.0で、Storybookを使う

# 概要
Nuxt2.0でstorybook使おうと思ってたら、結構つまづいてしまったのでメモ。

## 修正の内容
Nuxt2系で、storybook3系使おうとしたら、``Module parse failed: Unexpected token. You may need an appropriate loader to handle this file type.``とかなって、VueLoaderPluginとかいろいろしてみたけど、挫折した。
そこで、webpack4系 + storybook4系を入れてる記事があったので、それを見て4系を入れた。

2018/10/23 修正 tic40さんありがとうございます！
~~結果動いたが、storybookでassetsを呼ぶ時に、「Can't resolve 'assets/**'」 とエラーが起きるようになった。~~
~~そのため、両方のconfig.jsのaliasの設定をして、「~@assets/**」とすれば、どちらもエラーが発生しなくなった。~~
~~ただ、「~@assets」という変な記述しちゃってるので、もっといい方法があったら教えてくださると嬉しいです。~~

## Version
```
  "dependencies": {
    "@nuxtjs/axios": "^5.0.0",
    "cross-env": "^5.2.0",
    "nuxt": "^2.0.0"
  },
  "devDependencies": {
    "@storybook/vue": "^4.0.0-alpha.23",
    "babel-eslint": "^8.2.1",
    "babel-preset-vue": "^2.0.2",
    "eslint": "^5.0.1",
    "eslint-config-prettier": "^3.1.0",
    "eslint-loader": "^2.0.0",
    "eslint-plugin-prettier": "2.6.2",
    "eslint-plugin-vue": "^4.0.0",
    "node-sass": "^4.9.3",
    "nodemon": "^1.11.0",
    "prettier": "1.14.3",
    "pug": "2.0.3",
    "pug-plain-loader": "^1.0.0",
    "sass-loader": "^7.1.0",
    "sass-resources-loader": "^1.3.3"
  }
```

## コード

```
$ yarn create nuxt-app nuxts
// addonを使うときもalpha版を使うこと
$ yarn add -D @storybook/vue@alpha
$ yarn add -D babel-preset-vue node-sass sass-loader pug@2.0.3 pug-plain-loader sass-resources-loader
```

```package.json
"scripts": {
  "storybook": "start-storybook -p 9001"
}
```

```.storybook/config.js
import { configure } from "@storybook/vue";

const req = require.context("../stories", true, /.story.js$/);
function loadStories() {
  req.keys().forEach(filename => req(filename));
}

configure(loadStories, module);
```

```.storybook/webpack.config.js
const path = require("path");

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        loaders: ["style-loader", "css-loader", "sass-loader"],
        {
            loader: "sass-resources-loader",
            options: {
              resources: [
                path.resolve(__dirname, '../assets/stylesheets/variables.scss')
              ]
            }
          }
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'file-loader'
      },
      {
        test: /\.pug$/,
        loader: 'pug-plain-loader'
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'assets': path.resolve('path/to/assets'),
      '~': path.resolve(__dirname, '../')
    }
  }
};
```

```components/Logo.vue
<template lang="pug">
  .background
    img(src="~assets/img.jpeg")
</template>

<style>
.background {
  background: url('~assets/img.jpeg');
}
</style>
```

```stories/index.story.js
import { storiesOf } from '@storybook/vue'
import Logo from '~/components/Logo.vue'

storiesOf('storybook', module).add('default', () => ({
  components: { Logo },
  template: '<Logo />'
}))
```

### 参考にさせて頂いたサイト
[Nuxt.jsでStorybookを使う](https://qiita.com/kokorau/items/507aca002ccc84b3ff53)
[webpack 4系、ts-loader 4系、storybook 4系にしたときに出る謎のエラーを解決](http://nakagaw.hateblo.jp/entry/2018/07/09/125520)
[Webpack4 + Vue.js + Pug + Sass](https://qiita.com/yuusuke510/items/af3adfd17af0114f4a2a)
【mac】firebaseインストールのすべて

#firebaseインストール
firebaseのインストール方法を記載します。
Macを使用した場合、高確率でエラーが発生して詰まってしまいますが、これを見れば5分でインストールが完了するでしょう。

##目次
1.Node.jsのインストール
2.firebaseCLIのインストール（第1のエラー）
3.firebase loginの実行(第2のエラー)
4.それでもエラーが消えない場合

##1.Node.jsのインストール
下記、urlからnode.jsをインストールしてください。
https://nodejs.org/ja/
※最新版、推奨版どちらでも構いません。
インストールが完了したら下記コマンドを実行してください。

```
$ npm -v
6.4.1
$ node -v
v10.11.0
```
上記のように表示されたら、node.jsのインストール完了です。

##2.firebaseCLIのインストール（第1のエラー）

まず、下記コマンドを実行してください。

```
$ npm i -g firebase-tools
```

"WARN"という表示がなければfirebase toolsのインストール完了です！

ですが、ほとんどの人がここで"WARN"というエラーが表示がされてしまうと思います。なので、グローバルのパスを変えてみましょう。
以下のコマンドを実行してみてください。

```
$mkdir ~/.npm_global
$npm config set prefix ~/.npm_global
$npm install -g firebase-tools
```
これでfirebase toolsのインストールが完了します。

##3.firebase loginの実行(第2のエラー)

以下を実行してください。

```
$firebase login
-bash: firebase: command not found
```
正常に動作が走ればいいのですが、上記のように表示されると思います。
これはnpmのPATHに問題があります。グローバルのパスを確認してみると下記のような表示になります。

```
$ npm bin -g
/Users/ユーザー名/.npm-global/bin
(not in PATH env variable)
```
これは、npmのPATHが通っていないことを意味します。
下記のコマンドでパスを通してください

```
$ export PATH=$PATH:`npm bin -g`
```
あとは、firebaseにログインするだけです。

```
$ firebase login
$ firebase init
```
これで、ログイン完了です！！
※export文はログインのたびに必要になります。


##4.それでもエラーが消えない場合
ここを読んでいる人は5分ではできなかった人ですね笑 
すみません...
以下のサイトを確認してみてください。参考になる資料があるはずです。

＜firebaseCLIがインストールできない場合＞
・https://teratail.com/questions/53320
・https://hacknote.jp/archives/26568/

＜firebase loginの実行ができない場合＞
・https://qiita.com/ebichan_88/items/e3e30461ad4ddd9368f5
・https://teratail.com/questions/137225
[Ruby on railsメモ]Herokuにデプロイしたときに、successするのにopenできなくて泣いた話と解決法２つ

# Herokuデプロイはいつも難儀だ。

きつい。からのきつい。泣く。
それが自分のデプロイに対するイメージだ。

それもこれも、それぞれの工程をメモもせず取り敢えずかたっぱしからやってしまうからいけないのだが。

やっとの思いで解決できたので、まず解決法をババっと書いとこうというかんじで。

## 1.Procfileってなんやねん。

Herokuデプロイのためには必要なファイルらしく、RailsプロジェクトのRoot直下に作成しておかないといけないらしい。

そして中身に

``` :Procfile
web: bundle exec puma -C config/puma.rb
```

と書いておく。

ここでデプロイしてみようと思い、gitコマンドでHerokuにPush！！

だがここで問題が、

```
###### WARNING:
       No Procfile detected, using the default web server.
       We recommend explicitly declaring how to boot your server process via a Procfile.
       https://devcenter.heroku.com/articles/ruby-default-web-server
-----> Discovering process types
 ~     Mis-cased procfile detected; ignoring.
 ~     Rename it to Procfile to have it honored.
       Procfile declares types     -> (none)
       Default types for buildpack -> console, rake, web, worker
```

少し「？」となったが、ログにある通りファイル名をみてみると、なるほど。
「procfile」となっていた。

どうやら「procfile」ではなく、「Procfile」。始めの「ｐ」を大文字にしないと受け付けねーぞこのやろうと言っているのだ。なんたる初見殺し。分かんねーよ。

そこで、名前を「Procfile」と直し、もう一度デプロイ。
その結果。

```
Everything up-to-date
```

いやいやいや。変更したぞ。あなたは意固地ですかHeroku先輩そうですか。

そこから悩みに悩み、３０分ほど経過したとき、
ある記事にこんなことが書いてあった。

**「gitはデフォルト仕様で、ファイルネームの大文字小文字を区別しない可能性があります。」**

git、お前もか。

またもや初見殺し。

なんですか？
僕、しょぼーんでもやってるんですか？

つまり、「Procfile」とファイル名を直してもgitには反映されず、「procfile」となるそう。

これを反映させるには、

1. gitの設定を変える。

2. 一度procfile自体を削除してgit commit を行い、その後Procfileを作り直してgit commitする。

の２つの対処法があるそう。

今回は時間がないので、２の方法を取りました。エラーが消え、無事解決。

## 2. $ heroku run rake db:migrateを忘れずに。

Procfile問題も解決したし、これでやっと見れるのか俺のwebアプリと思い、openしてみると
「We are sorly but ...」の文字が。まじかよ。

ここからネットサーフィン。１時間くらい波に乗ってると、heroku側でデータベースを作らないといけないことが判明。そういえばそんなもんあったな。（忘れんなよ）

てことで、railsプロジェクトのルート直下にて、

```
$ heroku run rake db:migrate
```

を打ち込み、データベースがmigrateされていって無事開けるように。はー疲れた。

# まとめ

メモは大事。
Bitcoinのソースコードを効率読むための参考文献

#bitcoinのソースコード理解する時の参考資料

WhitePaper
https://bitcoin.org/bitcoin.pdf

Bitcoin - C++
https://github.com/bitcoin/bitcoin

Bitcoinj - Javaの人向け
https://github.com/bitcoinj/bitcoinj

Bitcoin ClockupMemo　一部ソースコードの解説（日本語）
https://bitcoin.clock-up.jp/contents/block/struct

Bitcoin Code developer documentation
https://bitcoin.org/en/developer-documentation

Bitcoin Edge Workshops - Tutorials
https://bitcoinedge.org/tutorials

Mastering Bitcoin 2nd Edition - Programming the Open Blockchain 
https://github.com/bitcoinbook/bitcoinbook

BicoinCore P2P Currency 各クラスの繋がりが把握しやすい
https://dev.visucore.com/bitcoin/doxygen/index.html
GAE/Java8試行（その2：「Javaアプリ解説」）

# お題
[前回](https://qiita.com/sky0621/items/8437da4e96bffef69250)は、Java8のWebアプリをGAEデプロイした。
WebアプリはApp Engine用のMavenアーキタイプを使って自動生成し、結果、下記の構成となった。
https://qiita.com/sky0621/items/8437da4e96bffef69250#自動生成プロジェクトの中身
今回は、上記を元にちょっと解説。

# 解説
## Servlet
JavaでWebアプリを作る際はServletを使うのが王道。
自動生成されたServletは「src/main/java/com/example/sky0621/HelloAppEngine」

```java
// 省略

@WebServlet(name = "HelloAppEngine", value = "/hello")
public class HelloAppEngine extends HttpServlet {
  @Override
  public void doGet(HttpServletRequest request, HttpServletResponse response)
      throws IOException {
      // 省略
  }
}
```

↑のソースにより、「http://【ドメイン：ポート】/hello」にアクセスすると「```doGet```」の中身を実行してくれる。
自分の記憶の中ではServletのルーティング定義は「web.xml」に記載していたのだけど、今のServlet仕様ではアノテーションでルーティング定義するのだね。
（SpringやSeasarといったフレームワークではもともとアノテーション指定だったかな・・・）

これだけでロジックへの橋渡しは出来ているので、今後はこの中で、Datastoreにアクセスしたり、Memcache使ったり、
タスクキュー呼び出ししたりといったロジックを組んでいこうと思う。

## appengine-web.xml
App Engineへのデプロイ時に使われる設定群。
オートスケールの指定やリソースの定義なども設定可能。
【参考】
　https://cloud.google.com/appengine/docs/standard/java/config/appref?hl=ja

```xml
<?xml version="1.0" encoding="utf-8"?>
<appengine-web-app xmlns="http://appengine.google.com/ns/1.0">
    <runtime>java8</runtime>
    <threadsafe>true</threadsafe>
    <system-properties>
        <property name="java.util.logging.config.file" value="WEB-INF/logging.properties"/>
    </system-properties>
</appengine-web-app>
```

# まとめ
上記２ファイルを用途に合わせて拡張していくことで少しずつアプリの体裁を整えていくことができるはず。
opensslコマンドで共通鍵によるブルートフォースアタックに備えた暗号化を行う（復号も)


## 概要
opensslコマンドを使ってサクッとファイルを暗号化するよ（zipパスワード暗号化よりもでもできるだけ安全にしたい場合などに使えるかなと・・・）

OpenSSL 1.1.0からブルートフォースアタックに有効な`-iter`オプションが使用可能になったみたいなので、
できるだけ新しいopensslコマンドを使いたい。
しかし、暗号化する場所と復号する場所の違いによりopensslコマンドが入っていな/バージョンが違うなどの問題が出ると面倒なので、docker-hubのイメージを利用することに。

なるべくメジャーで安全そうで小さくできるだけ新しいopensslコマンドが標準で入っているイメージを探したところ [fedora](https://hub.docker.com/_/fedora/)が見つかった。オフィシャルイメージであり比較的小さい方(87MB)

## 前提条件

- `docker`コマンドが実行できる環境
- カレントディレクトリに以下のファイルを用意
  - `pass.txt`  <- パスワードを記載した(せっかくなのでファイルにできるだけ長い方パスワードを記載するのが良さそうだけどMax 1024byte)
  - `input.txt` <- 暗号化したいファイル 

## 手順

### 暗号化

パスワードファイルと暗号化したいファイルを用意したら以下のコマンドで暗号化する
以下の例では`./enc`ファイルが暗号化データが保存される

```bash
docker run -v $PWD:/work fedora:29 openssl aes-256-cbc -e -pass file:/work/pass.txt -in /work/input.txt -out /work/enc -iter 654321 -salt
```
オプションの `-iter 654321` は暗号化を繰り返す([ストレッチング](https://en.wikipedia.org/wiki/Key_stretching))回数でブルートフォースアタックに備えるため、ここでは654321回にしてみた
`-salt` で塩ふりかけも忘れずに（デフォルトぽいけど)

### 復号

復号する場合は暗号化で指定したパスワードファイルと`-iter`に回数`654321`を指定する
以下の例では`./dec`に平文が保存される

```bash
docker run -v $PWD:/work fedora:29 openssl aes-256-cbc -d -pass file:/work/pass.txt -in /work/enc -out /work/dec -iter 654321
```


## 参考

- https://courses.csail.mit.edu/6.857/2018/project/Ainane-Barrett-Johnson-Vivar-OpenSSL.pdf
- https://cpplover.blogspot.com/2013/07/gnulinuxcli.html
- https://qiita.com/ikuwow/items/1cdb057352c06fd3d727
Google ColabolatoryでGoogle Driveのファイルを読み込んでPythonで操作

参考：[google Colaboratoryでファイルを読み込む方法] (https://qiita.com/uni-3/items/201aaa2708260cc790b8)

## drive内のディレクトリをマウントする
```mount.py
from google.colab import drive
drive.mount('/content/gdrive')
```

これを実行すると認証を求められるのでURLに飛んでコピペして認証

```
Go to this URL in a browser: https://accounts.google.com/o/oauth2/auth...
  Enter your authorization code:
  ··········
Mounted at /content/gdrive
```

## マウントされていることの確認
gdriveのMy Drive以下にdriveのルートディレクトリがマウントされる

```bash
!ls ./gdrive/'My Drive'/'Colab Notebooks'
```

## マウントしたGoogle DriveのフォルダをPythonから操作

```python3
import os
  
base_dir = '/content/gdrive/My Drive/Colab Notebooks'
os.listdir(base_dir)
```

以下のようにフォルダが出力される

```
['Folder1', 'Folder2', 'File1', 'File2']
```
[メモ] JSで実装するidへのジャンプ

クリックして指定のidへ飛ぶことをanchor scrollと呼びます。ライブラリを使っていれば実装されていることが多いですが、望む動きをしてくれなかったので、JSだけで実装する方法を検証します。

### 固定ヘッダーがない場合
``` JS
const jumpTo = (id) => {
  const elem = document.getElementById(id);
  if (elem) {
    const top = elem.getBoundingClientRect().top;
    const newY = window.scrollY + top;
    console.log(newY);
    window.scrollTo(0, newY);
  }
}
```
![jump_to_heading_1.gif](https://qiita-image-store.s3.amazonaws.com/0/29935/bbab507b-bf3f-026c-d678-26f0dc747635.gif)
このサンプルのコードは[こちら](https://codepen.io/1kohei1/pen/ePpdKv)で確認できます。

### 固定ヘッダーがある場合
``` JS
const HEADER_HEIGHT = 56;
const jumpTo = (id) => {
  const elem = document.getElementById(id);
  if (elem) {
    const top = elem.getBoundingClientRect().top;
    const newY = window.scrollY + top - HEADER_HEIGHT;
    console.log(newY);
    window.scrollTo(0, newY);
  }
}
```
![jump_to_heading_2.gif](https://qiita-image-store.s3.amazonaws.com/0/29935/1dbbbffc-6d34-60bd-baaf-efe473f43963.gif)
このサンプルのコードは[こちら](https://codepen.io/1kohei1/pen/xywRKz)で確認できます。

とりあえずコードだけで。詳細なコードの説明は後ほど。
[Event] - KAIT International Symposium 2018を参加しました

これはKAIT International Symposium 2018 というエベントの記事です。

#はじめに
本記事は2018年9月4日と5日に行ったKAIT International Symposium 2018 という名前のイベントの参加者として、なんでこんなイベントを参加のか、どうだったのか、今後どう考えのか,振り返りなどについて書きます。

#背景
[KAIT International Symposium 2018](http://dolphin.mkm.ic.kanagawa-it.ac.jp/kait_intl_sympo/2018/brochure-kait-intl-sympo2018.pdf)は神奈川工科大学という大学。本学とも関連が深い海外の大学と研究者を招き、次世代のより良い社会構築に向けた有益な研究の活発化と、国内外の大学・研究者との連携、交流が一層深まることを目的としたシンポジウムを開催いたします。参加者が住んでるところとか交通費などのことを全部が備わりました。うちの大学は論文を発表する招待をもらいました。と各国のエンジニアに交流したいので、シンポジウムを参加しました。

#何がしたかったか
簡単というと、大学教師と学生が大学を代表して、リサーチしたを発表することです。
このエベントは二日間をしました。
1日目は各大学のリサーチの発表を聞きました。四つのカテゴリがあります：
- Human Media
- Health and Life Science
- Artificial Intelligence (AI)
- Environment and Next Generation Energy
２日目はEngineering and Educationのカテゴリについての発表を聞きました。その後、個別大学のエンジニア教育システム導入をしましたと学生のポースタ発表をしました。詳しく情報はこちらの[リンク](http://dolphin.mkm.ic.kanagawa-it.ac.jp/kait_intl_sympo/2018/kait-intl-symposium2018-program-20180827.pdf)でご覧してください！

#どうだったか
ある3つリサーチが興味を持った。
1. 「What Is Vection?」贈呈者：Takeharu Seno
2. 「Towards More User-friendly Systems」贈呈者：Akihiro Miyata
3. 「Realizing Artificial Intelligence Concepts」贈呈者：Kin Fun Li
リサーチの詳細については[こちら](https://qiita.com/Dina/private/d3038e8fe9c565d42816)を参考下さい

#今後について
KAIT International 2018 Symposiumを参加するとき、ちゃんと各国からの参加者をコミュニケーションしなかったので、今後は海外のエンジニアをコミュニケーションできになりたいと思っています。エンジニアと交流できるイベントとして継続していきたいと思っております。と参加者のリサーチから学んだことをちゃんと理解して、振り返りして、実生活に応用する。
「レスポンシブ」について

レスポンシブについて、聞いた内容を忘れないように備忘。
#よくあること
「え、スマホ？いい感じに見えるようにしておいて」

それが、どれだけ手間のかかることなのか、今日まで知りませんでした。

そもそも、「レスポンシブWEBデザイン」とは…

```
PC、タブレット、スマートフォンなど、異なる画面サイズの幅を基準に
Webサイト表示を柔軟に調整し、見やすく最適な表示にすること
```

とのこと。

これだけ見ると、なるほど！３種類のことを考えればレスポンシブなんだな！と、思うのだが、そんなことはない。

```
PCって、具体的な画面サイズは？
タブレットって、どの端末のこと？？
スマートフォンって、どの機種？iPhone？？Android？？？
```

いろいろ、考えることが多い。
媒体が多様化している昨今では、どれをベースに作成すればいいのか、わからないです。

画面サイズによって見え方を切り替えるポイントを`ブレイクポイント`というらしい。
上記の例で行くと、ブレイクポイントは2つあれば問題ないのかと思われるが、そんなことはない。

カードを横並びに表示する一覧画面があった時など、画面設計によっては同じ媒体だとしても、サイズが違うだけでブレイクポイントを置かざるを得なくなることもある。

要は、

```
１つの媒体でも、ある一定のサイズを超した時のことを考慮する必要がある　->
ブレイクポイントが増える　->
画面設計が増える！
```
ということになる。


そうなると頭を悩ますのが、見積もり…
そんなことまで考慮せずに受注するケースが往々にしてある。

そこまで気を走らせた上で、見積もることの大事さをひしひしと感じる。


#レスポンシブ対応する上で考えること
一言「レスポンシブ対応」という話になった時は、下記のポイント３つを考える必要がある。

1.レスポンシブ
2.リキッドデザイン
3.アダプティブデザイン

1:レスポンシブ
※上記で記載した通り。

2:リキッドデザイン
```画面サイズに応じて、要素が横幅100％相対的または可変的に調整するデザイン```

要は、スマホという媒体のなかでも画面サイズが違ったとしてもうまいこと表示を調節してくれるデザインのこと。

ふむふむ便利だなと思うのですが、大きな画面のスマホで見た時は余白が気になり、小さな画面のスマホで見た時は窮屈さが気になる。
要は、リキッドすぎるとバランスが取りづらくなる！

なので、
```大前提条件として、どの端末どの画面サイズを前提に作成するのか```
というのをはっきりさせておくことが非常に大切になる。

3:アダプティブデザイン
```要は、固定。```

PC媒体だった場合は、ある一定の画面サイズ以上になった場合は固定表示にする。この考え方がアダプティブデザイン。

この３つのバランスが大切。
最も大事なのは、

```
これから作ろうとしているWEBサイトは、
・どのシーンで
・どの端末で
・どのように見えているべきなのか
ディレクションのタイミングではっきりと要件として固めること
```

昨今はいろいろなWEBサービスを必ず毎日見ている状態になっているので、こういった一見「当たり前」に見える部分をどうディレクション段階で具体的にするのかが、そのプロジェクトが成功するかどうか明暗を分けることになる。

#余談：余白について
日本人はどうも、「余白」があると、そこを埋めたくなるらしい。
（毎日「忙しい」とアピールしたくなる心理現象と同じなのか 笑）

デザインをする上で大切なのこと下記。

```
余白（ホワイトスペース）の使い方
```

余白を「意識的な」余白として使用することが大切。

それをうまくできるようにあると、精錬されたシンプルなデザインを表現することができる。
変に日本語で説明しようと思ってしまうと、文字ばかりぐちゃぐちゃしたデザインになりがちなので、人の目を惹こうとすると、言葉ではなく精錬されたビジュアルを作成することも大切になる。

WEBデザインって、奥が深め！

※書いてあることがズレてることとか補足とかあったら連絡願います！
vscodevimで1char easymotionを設定してみた

# やったこと
vscodevimでeasymotionする記事は見つかりましたが､1charでeasymotionする方法が見つからなかったので､設定方法を調べてみました｡(色々やってみた結果､出来ました!!)

# 試した環境
Ubuntu 18.04
VSCode 1.27.2
vscodevim 0.16.5

# 設定方法

### 1. VSCodeの設定を開く｡

[ファイル] > [基本設定] > [設定]

### 2. settings.jsonを開く｡

[･･･] > [settings.jsonを開く]


### 3. ユーザー設定が開くので以下設定を追加する｡
※今回は検索するためのキーをfに設定しました｡

```sh:ユーザー設定(settings.json)
    "vim.easymotion": true                       // easymotionの有効化
    "vim.easymotionKeys": "hklasdgjf",           // easymotionで使用するキー(今回はデフォルトのまま)
    
    // 以下を追加 (ノーマルモードでfを押すとeasymotion発動)
    "vim.normalModeKeyBindingsNonRecursive": [
        {
            "before": ["f"],                     // 検索するためのキーをfから変えたい場合は､ここを変更する
            "after": ["leader", "leader", "s"]   
        }
    ],
```

### 4. 最後に設定が有効か確認する｡
あとは適当なファイルを開き､ノーマルモードの状態で[f] > [検索したい1文字(今回はe)]を入力すると以下のように対象箇所がハイライトになります｡(今回はechoの1文字目まで移動してかったため､最後に[h]をタイプしました)

![test.gif](https://qiita-image-store.s3.amazonaws.com/0/296159/69f35656-b987-e61c-c923-d4f0ce970d00.gif)

### 以上です｡お疲れ様でした!!
【TIC-80】架空のゲーム機のゲームをFantasyConsoleに移植する（その３）

上原国盗りす。
![uehara.gif](https://qiita-image-store.s3.amazonaws.com/0/284455/b7d80a41-a792-5ec9-5ca9-5bcf36ae033a.gif)

それはさておき、プログラミングの方は4度目の再走（初めから書き直し）経て、ある程度形になってきたので、色々考えたりしたことや、コーディングの方針の変遷を記録しておくことにします。

##前提

- 「**TIC-80**」上の「**Lua**」でスクリプトを書く
- 筆者は使える言語がない

**FizzBuzz**が書けるのが**Lua**と**MSX-BASIC**のみ。
学生の時に習った scheme や Pascal （TurboPascalを使っていたような？）はすっかり忘れました。C言語とJavaScript（オールドスタイル）は一応読めば処理の流れくらいはおおまかに理解できる**ことがある**程度です。

よって以降の記述は「こうすればいいよ」という解説や提言ではなく、
自分はこの環境でこのように記述している、という記録にすぎないということです。
（用語も間違いだらけだと思います）


##「国盗りす」基本の基本

![t20180925.gif](https://qiita-image-store.s3.amazonaws.com/0/284455/59f93f00-c831-fb75-2209-708ec07383b3.gif)

上のgif動画は自分の当時の脳内国盗りすを再現したものです。
以下基本的な仕様

- 「自機」（赤いの）は空を漂っている「兵糧」（白いの）をくっつけることができる
- 「兵糧」はある程度の塊で移動や接触判定がある
- 「自機」の管理下でない「兵糧」同士の接触判定はない
- 「自機」管理下の「兵糧」は「自機」を中心に「90度右回転」と「左右反転」が可能

##兵糧群のデータ構造

とりあえず、この兵糧が集まった塊をデータで表現する必要があると思いました。
そこでテトリスなどのゲームの解説を参考にしようとしたのですが、
だいたいが、（テトロミノなどの）ピース、フィールドを二次元配列で表現していました。

ただし、兵糧群の大きさは**固定ではない**ことからこの方法ではしんどいと思い、
基準位置とそこからの相対位置の組で表すことにしました。
下の図（に近いもの）は2回目のリライト時に書きました。
それまでなんとなくコードだけで書いていて混乱したので（遅いやろ）

![データ構成01.png](https://qiita-image-store.s3.amazonaws.com/0/284455/2712edd4-7b2f-9ccb-a466-da4305fd826a.png)

基本のデータ構造は当初から変わっていないのですが、
最初は基準位置表記は x と y でした。
ただ対応させるフィールドが二次元リストなので、1行目、1列目、と指定する
表として考えた方がよいと思い、行と列で表すことにしました。

x,yとしていたときは表示と合わないので マイナス1したりと
混乱していましたが、**基本的にはcol,rowで処理を進めて**いき、
表示など **x,y の座標に変換する際に** 1 を引いたり マスのサイズをかけたりと
いった**処理が必要**、ということを意識するようになり、混乱が減りました。
（ counting のリストと offset の座標は別物　）
この表記と意識変更は3回めのリライト時（だから遅いって）

もう少しデータ構造を分かりやすく書くならこんな感じですかね。
（markdownで書こうとして挫折）

![piece.png](https://qiita-image-store.s3.amazonaws.com/0/284455/a51c8c1a-266b-2048-cb36-8893e137a5cb.png)

操作関数はこのような感じに

```piece.lua
-- piece function
pce={}
pce.make=function (vec,column,row,dir,h)
	local vec=vec or {{0,0}}
	local c,r=column or 1,row or 1
	local dir,h=dir or 0,h or HEIGHT
	local p={}
	p.col,p.row=c,r
	p.dir,p.h=dir,h
	p.size=#vec
	for i,v in ipairs(vec) do
		local d={v[1],v[2]}
		table.insert(p,d)
	end
	return p
end

pce.rotate=function(p,n) -- piece rotate right 90 degree n times
	local n=n or 1
	n=n%4
	for j=1,n do
		for i,v in ipairs(p) do
			v[1],v[2]=-v[2],v[1]
		end
	end
end

pce.reverse=function(p,vertical)  --piece flip
local vtcl=vertical or false
	if vtcl then
		for i,v in ipairs(p) do
			v[1],v[2]=v[1],-v[2]
		end
	else
		for i,v in ipairs(p) do
			v[1],v[2]=-v[1],v[2]
		end
	end
end
```

他の言語を使用している方は「クラスとか定義しないのか」とか
「list と hash を混ぜて使うのか」とか感想を持たれるかも知れません。

Lua でも table にfunctionを持たせてオブジェクト指向っぽい書き方が
できるらしいのですが、オブジェクト指向自体よく理解していないため
今回は使っていません。

とりあえず、Lua の標準ライブラリの table 操作関数と同様の表記、動作を
するようなものを目指しました。（3回目のリライト時）

- 操作対象を引数で受け取る
- データを書き換える（操作後のデータを返り値で返すのではなく）
- 操作関数をテーブルにまとめる（今回は pce テーブルにまとめた）

結構表記は変更しています。たとえば pce.reverse() だと

1. hyourou_hasoteso　（1回目リライト時）
2. piece_reverse （2回目リライト時）
3. piece.reverse （3回目リライト時）
4. pce.reverse （4回目リライト時）

「国盗りす」原作にならってツッコミどころが満載です。

とりあえず今回はここまで。
【Excel備忘録】PowerQueryによる表の縦横変換

##0.はじめに

Excel（Excel for Office 365 MSO）で表Aを表Bに変換するための操作をメモしておきます。
どうも年齢のせいか、このPowerQueryを利用したこのやり方を__何度も忘れてしまう__ので、Qiitaの記事にして記録に残しておきます。ひょっとするともっとよいやり方があるかもしれません。


__表A__
![2018-10-02 (6).png](https://qiita-image-store.s3.amazonaws.com/0/184786/17095d5a-1d39-4b07-97fa-445f8f3e477f.png)

__表B__
![2018-10-02 (7).png](https://qiita-image-store.s3.amazonaws.com/0/184786/61a22e2f-b982-dbc4-fc36-d7e5e33ffc65.png)

##1.手順

1.メニュー＞データ＞テーブルまたは範囲からを選択し、表Aのテーブルを範囲指定します。
2.PowerQueryエディタが起動します。
3.表AのC,D,E列を範囲指定します。
4.メニュー＞変換＞列のピボット解除 を選択します。
![2018-10-02 (8).png](https://qiita-image-store.s3.amazonaws.com/0/184786/309acaca-50c3-a80f-41b5-3b98646e8e9a.png)

5.表Bの状態に変換されます。必要に応じてヘッダの項目名称を変更します。
![2018-10-02 (10).png](https://qiita-image-store.s3.amazonaws.com/0/184786/a7ac1cd4-58a3-c075-c43d-5110ebcc2922.png)
6.メニュー＞ホーム＞閉じて読み込む を選択します。シートにテーブルが表示されます。
![2018-10-02 (11).png](https://qiita-image-store.s3.amazonaws.com/0/184786/b8b5621d-923e-a3ad-136d-6839a93426f0.png)


ー以上ー
最短でZabbix 4.0をDockerで試す手順

## 概要

Docker で `zabbix-appliance` イメージを使い、最短で Zabbix 4.0 を試す手順を整理しました。このイメージは Zabbix チームによってメンテナンスされている GitHub 上のリポジトリが元になっているものです。

## 事前準備

[動作要件(英語)](https://www.zabbix.com/documentation/4.0/manual/installation/requirements)を確認します。2GB、2コア程度もあれば、とりあえずは十分でしょうか。

## 手順

### 1. Docker CE をインストール

CentOS 7.x の場合（[最も簡単なDockerの公式セットアップ方法(CentOS/Ubuntu) - Qiita](https://qiita.com/zembutsu/items/bedb18e1061303e217b8)）：

```
$ curl -fsSL get.docker.com -o get-docker.sh
# sh get-docker.sh
# systemctl start docker
# systemctl enable docker
```

## 2. zabbix-appliance コンテナの起動

```
docker run -p 80:80 -p 10051:10051 -e PHP_TZ=Asia/Tokyo -d \
    zabbix/zabbix-appliance:centos-latest
```

※centos以外にもalpineやubuntu版があります。詳しくは[タグ一覧](https://hub.docker.com/r/zabbix/zabbix-appliance/tags/)を参照。

## 3. ブラウザからアクセス

`http://<ip>/` にアクセスし、ID: `Admin` 、Password: `zabbix` でログインできます。パスワードは変更しておきます（右上から２つめのアイコンをクリックし、 `Change Password` をクリック）。

## あとは

いろいろ触ってみましょう。Enjoy!

![Screenshot_2018-10-02 Zabbix docker Dashboard(2).png](https://qiita-image-store.s3.amazonaws.com/0/13002/5aff3bbc-c64f-16df-b9f0-c01011250fb6.png)

## 参考

- zabbix/zabbix-appliance - Docker Hub
  - https://hub.docker.com/r/zabbix/zabbix-appliance/
anacondaからモジュール（open cv）の追加まで

# anacondaからモジュール（open cv）の追加まで
### はじめに
anacondaの導入から、モジュールの追加と保存先を調べるところまでをすぐに忘れるからメモついでに残しておく  
**windows**で実験しました。  
MacやLinuxの方法を記しておきますが、動くかわかりません…  
すみませんm(.  .)m

### もくじ  
[1.anacondaのダウンロード](#number1)    
[2.モジュール（open cv）のダウンロード](#number2)  
[3.モジュールの保存先を表示させる](#number3)
[4.参考文献](#number4)
<br>
<br>
<br>
<a name=“number1”></a>  
## 1.anacondaのダウンロード  
**まず始めに確認しとくのをおすすめします**  

anacondaのインスートーラーを開いたら  
> Add Anaconda to my PATH environment variable  

の選択肢があると思いますが、  
ドMじゃないなら**絶対にチェック**を入れた方がいいです。  
<br>
<br>
保存先もデフォルトをおすすめします
**後で設定変えるのにググった時にサイトと違うと後悔します**
<br>
<br>  
あと、初心者の方は**python3.6 version**の方をインストールする方が絶対にいいです。  
Python2.7は2020年からサポートが切れるのでアプデも無ければ寿命も短いからです。

[インスートーラーはこちら](https://www.anaconda.com/download/#macos)
### 変態の方へ  
環境構築の設定からPathを設定するのですが、
僕みたいな素人には激ムズでした(´・ω・ ｀)  
http://ac-stegral.hateblo.jp/entry/2018/04/17/005218
<br>
<br>
<br>
<a name=“number2”><a/>
## 2.モジュール（open cv）のダウンロード
とりあえず環境構築します。[参考文献はこちら](https://qiita.com/py_iK/items/a865349fa8f0c663eb25)    
画像の場所をクリックしたらコマンド入力します。
  ![M25LQi7gEaRsffaR/X2uqCI9ImpRkuzEt.jpg](https://firebasestorage.googleapis.com/v0/b/type-c1c71.appspot.com/o/M25LQi7gEaRsffaR%2FX2uqCI9ImpRkuzEt.jpg?alt=media&token=f4cf1dea-7766-44e3-b023-e3854160b8b6)

環境構築のお作法としては  
```
conda create -n [好きな名前] python=[バージョン] anaconda
```
が公式なので、
```
conda create -n test python=3.6.5 anaconda
```  
と打ちこんでおきましょう  
**Proceed([y]/n)?**は**y**です  
<br>
windowsユーザーの場合、
```
activate cv2install
```
です。  
<br>
MacやLinuxユーザーの場合
```
source activate cv2install 
```
です。
<br>
<br>
<br>
次に**anaconda navigator**を用いてopencvのインストールです。
![M25LQi7gEaRsffaR/wRN2WLNmtVIsnhWb.jpg](https://firebasestorage.googleapis.com/v0/b/type-c1c71.appspot.com/o/M25LQi7gEaRsffaR%2FwRN2WLNmtVIsnhWb.jpg?alt=media&token=9f94c39f-eccf-45d2-bac1-c31152f0a5bb)
1.Environmentsを選択  
2.制作した環境（test）を選択  
3.選択を”Not installed”にする  
4.検索ボックスに”opencv”と入力  
5.opencvのチェックボックスを入れる  
6.apllyをクリック  
<br>
<br>
最後に（3）の選択肢のところでintalledなどを見たりする事でちゃんとインストールされてるのか確認してみてください  
<br>
<br>
<br>
<a name=“number3”></a>  
## 3.モジュールの保存先を表示させる  
[]の中を打ち込んでください
```  
>[python]
  
>>>[import cv2]
>>>[cv.__file__]
(保存先のアドレスが表示される)
```
で表示されます  
<br>
<br>
これによって、drop boxにコピーをすればraspberryPIやiPhoneで流行りのpythonistaに**流用することができます。**
近々記事を書く予定なので乞うご期待！！！
<br>
<br>
<br>
<a name=“number4”></a>  
## 4.参考文献
http://ac-stegral.hateblo.jp/entry/2018/04/17/005218  

https://qiita.com/py_iK/items/a865349fa8f0c663eb25  

https://qiita.com/ajitama/items/c0166a9a0cd23292b711
salesforceで死なないためのナレッジメモ（ver.1.0)

こんにちは！こんにちは！

・・・
・・・
クラウド系プラットフォームはエンジニアの負担だけでなく、全ジョブの人間を一部分の労から解放してくれます。salesforceもそうです。でも、はまるとつらい。知らないとはまる。はまるとつらい。無知だとはまる。そして死ぬ。salesforceで死んでしまうエンジニアにはなりたくはないので、ここに今までではまりかけたsalesforceの沼を列挙していきたいと思う。随時更新をする。これは、過去の自分から未来の自分への手記である。未来の自分へ。あなたはそこにいますか？
・・・
・・・

#レコードタイプをコピーした場合の制御（hamaruTime:３時間)

##前提
オブジェクトAにレコードタイプ：Aとレコードタイプ：Bが存在する。
レコードタイプ:Aの場合は、カスタム項目のtestPick__cを制御しているものとする。
レコードタイプ:Bはレコードタイプ:Aをコピーして作成している。

##起こること

レコードタイプ:Bで、カスタム項目testPick__cの制御をしたくないのに、レコードタイプ:Aと同じ制御が走る。

##解決方法

レコードタイプを新規作成する。
（もしくはレコードタイプの制御を見直す。とはいえ、なんか設定変えられなかった気が）

#Triggerを編集時の有効化ではまる(hamaruTime:0.5時間)
##前提

下記のtriggerとhandlerクラスがあったとする。

```
trigger testsTrigger on testObject (before insert) {
   hogehogeTesttriggerHandler handler = new hogehogeTesttriggerHandler();
   handler.OnBeforeInsert(Trigger.old);
}
```

```
public with sharing class hogehogeTesttriggerHandler {
    

 public void OnBeforeInsert(testObject[] oldtestObject){
 //なんもしない
 }

}
```

ちょっとHandler呼ぶ条件変えよう、と思って、salesforceの編集画面からTriggerを編集してテスト流す。

##起こること
Triggerが機能しない。

##解決方法
Triggerを編集するとしれっと有効化が解除されるので、salesforceのトリガ編集画面からトリガを有効化する

#オブジェクト一覧にないオブジェクトを探すのにはまる（hamaruTime:３時間）
##前提


```
shiranaiObj__c shiranai = new shiranaiObj__c();
```
このように突然、知らないオブジェクトがnewされているのに出くわす。

##起こること

ひえええ、どこにあるんやああああ、とずっと迷う。

##解決方法
たいがいは、salesforce->設定->カスタム設定にある、外部サービス用のオブジェクトだったりする。ので、固有の設定を呼び出して、ふにゃふにゃしている場合はここを探すべし。


#ｈamaranaiTime
合計6.5時間、きみははまらない。
Scala 学習前の環境構築 [Windows×IntelliJ×Scala]

## 概要

ドットインストールでScalaを勉強する前のWindowsでの環境構築の手順を記載

https://dotinstall.com/lessons/basic_scala

## 前提条件

JDKの設定済みであること （JAVA_HOMEの設定済み）
IntelliJがインストール済みであること（Community版でOK）

## 手順

###  1. IntelliJを開き、Scalaのプラグインをインストールする

- Configure -> Pluginsを選択

![I1.png](https://qiita-image-store.s3.amazonaws.com/0/230829/15e41c17-e1df-d89e-a5ba-7f10ae3b31ce.png)

- PluginsでScalaを検索して Install を実行。再起動を求められるので、再起動

![I2.png](https://qiita-image-store.s3.amazonaws.com/0/230829/4d8e7eac-bc41-27bd-e9e2-825eea1eb20d.png)


###  2. Scalaのプロジェクト作成

- Create New Projectを選択。ScalaのSbtを選択

![I3.png](https://qiita-image-store.s3.amazonaws.com/0/230829/1dfc57c6-b532-6e0d-df68-f785f47286a1.png)

- Nameにプロジェクト名を入力しFinishを選択。JDKが入力されていないならダウンロードしたJDKのパスを指定する

![I4.png](https://qiita-image-store.s3.amazonaws.com/0/230829/4bbbfdc8-d194-36d5-0984-95c0b9828042.png)

###  3. Scalaのクラスファイル作成

- プロジェクト作成後、src -> main の中にあるフォルダを右クリックして New -> ScalaClassを選択。

![I5.png](https://qiita-image-store.s3.amazonaws.com/0/230829/b39a330d-d52b-3160-de0a-d31debf3f314.png)

- KindをObjectを選択して適当な名前を入力

![I6.png](https://qiita-image-store.s3.amazonaws.com/0/230829/34cd6491-b390-e3b2-d4d1-373e9e6f58c9.png)


###  4. 作成したオブジェクトにHelloWorldを記述

```scala:HelloWorld.scala
object Myapp {
  def main(args:Array[String]): Unit ={
    println("Hello World");
  }
}
```

###  5. オブジェクトを右クリックして Run を選択。HelloWorldが表示されることを確認

![I10.png](https://qiita-image-store.s3.amazonaws.com/0/230829/785b773d-e7ee-eb7b-b6a2-696f40206298.png)
CodeBuildでDocker in Dockerする

CodeBuildでPostgreSQLを使ったユニットテストを実行したくて、CodeBuild内でDockerを使おうとしてみました。
しかし、以下のようなエラーが出てしまいました。

```
Cannot connect to the Docker daemon at unix:///var/run/docker.sock. Is the docker daemon running?
```

## 原因

特権を有効にしていないだけでした。
CodeBuildのプロジェクト作成時に下記赤枠の特権を有効にすることで、無事に`docker run`が実行できました。

![codebuild.png](https://qiita-image-store.s3.amazonaws.com/0/214526/b35810e8-93a1-3eda-4c8b-5ce430d9dc9c.png)


なお、CodeBuildで指定できる実行環境のDockerfileは以下のリポジトリで公開されています。
https://github.com/aws/aws-codebuild-docker-images