くんすとの備忘録

プログラミングや環境設定の覚え書き。

Bash on Ubuntu on WindowsからConohaにDocker Machineを立てたときの手順

ConohaにdockerでRedmine鯖を立てたかったので環境を用意しました。

Bash on Ubuntu on WindowsにはDocker Engineをインストールせずに、docker関連のコマンドのみをインストールします。
かわりにConohaへDocker Machineをセットアップし、そちらでDocker Engineを動かします。

Bash on Ubuntu on Windowsへのコマンドインストール

別エントリに書きました。

www.kunst1080.net

これで、Bash on Ubuntu on Windowsで以下のコマンドが使えるようになります。

  • docker
  • docker-compose
  • docker-machine

Conohaにdocker-machineを作成

環境変数の設定

OpenStack用の環境変数を設定します。

export OS_USERNAME=[APIユーザー名]
export OS_TENANT_ID=[APIテナントID]
export OS_PASSWORD=[APIパスワード]
export OS_AUTH_URL=https://identity.tyo1.conoha.io/v2.0
export OS_REGION_NAME=tyo1

Dockerホストの作成

OpenStackのドライバを使い、 conoha-docker という名前でDocker Machineを作成します。

$ docker-machine create \
  -d openstack \
  --openstack-flavor-name g-1gb \
  --openstack-image-name vmi-ubuntu-16.04-amd64-unified \
  --openstack-sec-groups "default,gncs-ipv4-all" \
  conoha-docker

NOTE:

  • 使用できるVMイメージ名は openstack image list で確認できます。
  • 使用できるflavor名は openstack flavor list で確認できます。
  • openstack コマンドは sudo pip3 install python-openstackclient でインストールできます。

実行ログ

Creating CA: /home/kunst/.docker/machine/certs/ca.pem
Creating client certificate: /home/kunst/.docker/machine/certs/cert.pem
Running pre-create checks...
Creating machine...
(conoha-docker) Creating machine...
Waiting for machine to be running, this may take a few minutes...
Detecting operating system of created instance...
Waiting for SSH to be available...
Detecting the provisioner...
Provisioning with ubuntu(systemd)...
Installing Docker...
Copying certs to the local machine directory...
Copying certs to the remote machine...
Setting Docker configuration on the remote daemon...
Checking connection to Docker...
Docker is up and running!
To see how to connect your Docker Client to the Docker Engine running on this virtual machine, run: docker-machine env conoha-docker

環境設定

後は、起動スクリプトに以下の内容を書いておけば完了です。 docker コマンドで、Conohaに作成したDocker Machineにコンテナを作成できます。

eval "$(docker-machine env conoha-docker)"

参考URL

Bash on Ubuntu on Windowsにdocker/docker-compose/docker-machineコマンドをインストールする方法

Bash on Ubuntu on Windowsの環境に、 Docker Engineをインストールせずに 、docker関連のコマンドのみをインストールする手順を示します。

※Bash on Ubuntu on Windowsと書いていますが、Linux全般で手順は同じだと思います。

docker

リリースページにバイナリが置いてあるので、お好みのバージョンをダウンロードしてきます。

アーカイブ内の docker/dockerdocker コマンドなので、それを取り出して /usr/local/bin に入れます。

$ curl -fsSL https://get.docker.com/builds/Linux/x86_64/docker-17.05.0-ce.tgz -o /tmp/docker.tar.gz
$ tar xzvf /tmp/docker.tar.gz docker/docker
$ sudo cp docker/docker /usr/local/bin/docker
$ rm docker/docker /tmp/docker.tar.gz
$ rmdir docker

v17.05.0-ce 以降はバイナリが用意されてなくてdocker storeにあると書いてあるけどdocker storeにはバイナリだけっていうのが見当たらない……

docker-compose

リリースページにインストール方法が書いてあるので、それに従ってお好みのバージョンをインストールするだけです。

$ curl -L https://github.com/docker/compose/releases/download/1.14.0/docker-compose-`uname -s`-`uname -m` > /tmp/docker-compose
$ chmod +x /tmp/docker-compose
$ sudo cp /tmp/docker-compose /usr/local/bin/docker-compose
$ rm /tmp/docker-compose

docker-machine

リリースページにインストール方法が書いてあるので、それに従ってお好みのバージョンをインストールするだけです。

$ curl -L https://github.com/docker/machine/releases/download/v0.12.2/docker-machine-`uname -s`-`uname -m` >/tmp/docker-machine
$ chmod +x /tmp/docker-machine
$ sudo cp /tmp/docker-machine /usr/local/bin/docker-machine
$ rm /tmp/docker-machine

参考URL

QA系

マニュアル

Gitリポジトリ

「O/Rマッパー勉強会 in 大都会」「座駆動LT大会20170708」で発表してきました

2017-07-08(土)の「O/Rマッパー勉強会 in 大都会」と「座駆動LT大会20170708」で発表してきました。

公式リンク

募集ページ

okajug.doorkeeper.jp

gbdaitokai.connpass.com

当日の写真

DSC_1420

togetterまとめ

自分の発表まとめ

O/Rマッパー勉強会 in 大都会

www.slideshare.net

『Ebeanのご紹介』というタイトルで発表しました。

「Ebean」はここ3年くらいずっと使っていますが、設計がシンプルで使いやすいです。 (ハマりポイントはいくつかありますが……)

いかんせん日本のユーザーが少ないので、名前くらいは知ってほしいし、遊びでもちょろって触ってみてほしいなぁ……という気持ちで発表しました。

短めの発表でしたが、シンプルさは伝えられたかと思います。 日本語の情報が少ない件については、まずは自分が持ってる分を放出していかないとなぁ……と思っています。

座駆動LT大会20170708

『僕らとラブライブ!』というタイトルでLT1しました。個人的にはこちらが本編。

※アニメのスクショだらけなのでスライドはアップできません。

伝えたかったのは以下の点ですが、結構伝わったかなと思っています。

  • 自分の仕事のタイミングとラブライブ!・ラブライブ!サンシャイン!!のタイミングがマッチした
  • ラブライブ!はブルー・オーシャン戦略、ラブライブ!サンシャイン!!はレッド・オーシャン戦略
  • ラブライブ!サンシャイン!!は社会派アニメ(マネジメント、ワークライフバランス・イノベーション)
  • 南ことりちゃんかわいい ← ※重要

今回のようなエモいスライドは初めて作ったので、かなり難航しました。完成したのは当日です。 初めてだったのでいい経験になりました。

年末にも座駆動LT大会あるらしいので、そのときはまたLTしたいと思います。 今度は2ndライブのレポートかサンシャイン!!2期の話かな。

他の方の発表を聞いてメモ

軽く箇条書きで。

  • JPAはやっぱり複雑だったし採用を見送って正解だった。
  • MyBatis 調べてみる。
  • 今度ASP.NETで開発する予定なので、そっちでは今回紹介されていた「Dapper」とかも検討してみる。
    • .NET FrameworkのORMライブラリは他にも色々あるみたいなので調べてみる。
  • DBFlute、欲しいと思った機能がありすぎてヤバイ。あと、めっちゃ親切。
  • ORMを選定するとき、重要視する箇所をDB・SQL文・アプリケーションのどれにするのかを意識したほうが良さそう。。

以上、お疲れ様でした。

P.S @zephiransasさん、今回は誘ってくださってありがとうございましたm( )m


  1. ラブライブ!トーク

【Ubuntu】CLIでWi-Fi接続する手順

ノートPCが余っていたのでなんとなくUbuntu Serverを入れてみました。

デスクトップ環境のない中、Wi-Fiに繋げたかったのでCLIで頑張りました。 手順を忘れがちなのでメモしておきます。

手順の概要

  1. wpa_passphraseで認証情報ファイルを作成
  2. wpa_suppliucantでデバイスをセットアップ
  3. DHCPでネットワーク接続(dhcpclient)

手順の詳細

1. wpa_passphraseで認証情報ファイルを作成

SSIDとパスフレーズを引数にして wpa_passphrase コマンドを実行します。

$ sudo wpa_passphrase MYSSID passphrase > /etc/wpa_supplicant/example.conf

するとこんな感じのファイルができます。

network={
    ssid="MYSSID"
    #psk="passphrase"
    psk=59e0d07fa4c7741797a4e394f38a5c321e3bed51d54ad5fcbd3f84bc7415d73d
}

2. wpa_suppliucantでデバイスをセットアップ

まずはWi-Fiのデバイスを ip link で調べます。

$ ip link
1: lo: <LOOPBACK,UP,LOWER_UP> mtu 65536 qdisc noqueue state UNKNOWN mode DEFAULT group default qlen 1000
    link/loopback 00:00:00:00:00:00 brd 00:00:00:00:00:00
2: enp0s25: <BROADCAST,MULTICAST> mtu 1500 qdisc noop state DOWN mode DEFAULT group default qlen 1000
    link/ether e8:9d:87:c9:f1:23 brd ff:ff:ff:ff:ff:ff
3: wlp2s0: <BROADCAST,MULTICAST> mtu 1500 qdisc noop state DOWN mode DEFAULT group default qlen 1000
    link/ether 00:26:b6:f7:c5:0a brd ff:ff:ff:ff:ff:ff

Wi-Fiのデバイス名が wlp2s0 ということがわかりました。「1.」で作成したファイルとともに wpa_supplicant コマンドを実行します。

$ sudo wpa_supplicant -B -i wlp2s0 -c /etc/wpa_supplicant/example.conf
Successfully initialized wpa_supplicant

3. DHCPでネットワーク接続(dhcpclient)

dhcpclient コマンドを使ってDHCPサーバからIPアドレスを自動取得します。

$ sudo dhcpclient wlp2s0

これでネットワークに繋がりました。

参考URL

「第29回シェル芸勉強会 大阪サテライト」レポート

07/01(土)に東京で行われた「jus共催 第29回激しいシェル芸勉強会」について、今回も大阪でサテライトしました!

イベント情報

東京(本家)

usptomo.doorkeeper.jp

今回も、大阪(私達)と、福岡でサテライト会場がありました。

大阪サテライト

atnd.org

福岡サテライト

atnd.org

ぱぴろん(@papiron)さんによるまとめ

papiro.hatenablog.jp

大阪サテライトレポート

参加者

今回の参加者は、私も含めて17人、うち、初参加は8名くらいでした。
初参加の人も増えてきて、とても良い感じです。また今回は東京から、ぐれさんがプリティストアへ行くついでに大阪サテライトに参加してくださいました。

会場のようす

午前

鳥海秀一さん(@hid_tori)「Perlワンライナー入門」


Perlワンライナーの書き方や代表的なオプションなどの説明でした。ちなみに次回は「Perl正規表現入門」だそうです。
https://umidori.github.io/shellgei-29th-am/index.html



おひる

3人のキュアシェル芸人が集結していました!

午後

今回は最近で一番むずかしいというかゴリゴリな感じでした。(毎回難しくなっていっている気がする)

今回はじめて使った「datamash」コマンド、なかなか使いやすそうです。データに対してSQLのようにsum,max,count等の集計ができます。

LTのようす

東京

大阪

今回はYoutubeで配信していただけました! 録画もあります!

いとす(@itosue) さん 「sortのマルチコア対応状況について」

コアやOSなどの条件を変えてみて、sortコマンドの実行速度を計測した結果の発表でした。

たいちょー(@xztaityozx_001) さん 「みんなで! 日本語base63難読化シェル芸」

スライド:


base64コマンドを使った、難読化シェル芸の話です。わかりやすくて面白い発表でした!

たいちょー(@xztaityozx_001) さん 「シェル芸で使いたくてLINQが使えるコマンド作ったらawkでよかった話」

スライド:


(2つ発表して頂きました) シェルでLINQが書けるツール「ShelLINQ」(https://github.com/xztaityozx/shellinq)を作った話と、awkとの速度比較でした。 awkの方が早いという結果が出ましたが、慣れたツールを使って書けるというのは重要なので需要はありそうです。

ぐれさん(@grethlen) 「狂気! 端末細胞分裂!」

スライド:
tmux-xpanes(http://qiita.com/greymd/items/8744d1c4b0b2b3004147)を使って再帰的にウィンドウを分割し、細胞分裂みたいにして遊ぼう!という発表でした。うにょうにょしてた。

so(@3socha) さん 「AWS Windows のパスワード」

スライド: https://horo17.github.io/aws-windows-password/#/
AWS Windowsのパスワードは通常、マネジメントコンソールのブラウザ上で複合する手順なのですが、不安なので手元で復号化しよう -> CLIでやろう -> シェル芸だ! という流れの発表です。AWSをシェル芸で使い倒している感じがします。

小原 一哉(KoharaKazuya) さん 「画像シェル芸入門」

スライド:


iTerm2のimgcatを使って、imagemagickなどで作成した画像をターミナルに表示するシェル芸の紹介でした。中間ファイルがいらなくなるので、画像処理の各種パラメータ値の確認とかで意外と使えそうです。

日柳 光久(@mikkun_jp) さん 「帰ってきたバナー芸+手書きSVG」

コマンド: 東京からぐれさんがいらっしゃるということで、歓迎のため、端末にうんこを流すという発表でした。本日一番の大盛り上がりだったと思います!!


今回も濃ゆい発表をありがとうございましたm( )m 今回は初参加の方も多く、初参加で発表してくださる方もいて非常によかったです。数回ぶりの方もありがとうございました。また都合がつけばお気軽にご参加くださいー

まとめ

上田会長、東京・福岡・大阪の皆様、お疲れ様でした。
フェンリル様、いつも会場を使わせていただきましてありがとうございます!

次回もまたよろしくお願いします!!

ちなみに、次は会場をさくらさんにお願いするのもアリかも? みたいな話もしています。ただいま検討中です。

追記

二次会のようす

安全なウォーターフォール(ドラフト)

なんとなくこんな形なら安全かもって思うよ、というメモ。

特徴

  • 基本設計の前に「試作」工程がある
  • 単体テストの前に結合テストがある

フロー

  • 要件定義
  • 試作設計
  • 試作開発
  • 要件再定義
  • 基本設計
  • 詳細設計
  • 開発1
  • 結合テスト1
  • 性能テスト
  • 開発2
  • 単体テスト
  • 結合テスト2
  • システムテスト
  • 本番

【Vue.js】コンポーネント間でデータを連携する方法

Vue.jsでコンポーネント間でデータを連携する方法について、理解するのに若干時間がかかったのでまとめておきます。

連携は、公式サイトで「props down, events up」と呼ばれている方式を使います。 f:id:kunst1080:20170612211404p:plain (https://jp.vuejs.org/v2/guide/components.html より引用)


親コンポーネント・子コンポーネント1・子コンポーネント2があるとき、子コンポーネント1と子コンポーネント2の間の連携は以下のようになります。

  • 子コンポーネント1でデータ更新時、親コンポーネントのイベントを発火する ($emit(eventName)による発火)
  • 親コンポーネントのイベントから、子コンポーネント2のデータを更新する (propsを使ったデータ連携)

これらの流れをサンプルを買いて試しながら確認します。

子コンポーネント1でデータ更新時、親コンポーネントのイベントを発火する ($emit(eventName)による発火)

子コンポーネント1のデータ更新を親コンポーネントで受け取るために、以下の設計でサンプルを作成します。

  • 親コンポーネントは、子コンポーネント1に発生する on-child-updated イベントを待ち受ける
    • イベントを受け取ると、 childUpdated メソッドを実行し、プロパティ parentValue を書き換える
  • 子コンポーネント1はプロパティ myValue が更新されたとき、 updated メソッドを実行する
    • updated メソッドの中で、 $emit(eventName) を使ってon-child-updated イベントを発生させる
      • このとき、プロパティ myValue を引数に渡す

サンプルコード

<html>
  <head><title>test</title></head>
  <body>
    <div id="app">
      <p>this is parent</p>
      a: {{parentValue}}
      <hr>
      <child1 v-on:on-child-updated="childUpdated"></child1>
    </div>
    <script type="text/x-template" id="child1">
      <div>
        <p>this is child1</p>
        b: <input type="text" v-model="myValue" v-on:input="updated">
      </div>
    </script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.min.js"></script>
    <script>
    var component1 = {
      template: "#child1",
      data: function() {
        return {
          myValue: ""
        }
      },
      methods: {
        updated: function() {
          this.$emit('on-child-updated', this.myValue);
        }
      }
    }
    var v = new Vue({
      el: "#app",
      data: function() {
        return {
          parentValue: ""
        }
      },
      components: {
        'child1': component1
      },
      methods: {
        childUpdated: function(v) {
          this.parentValue = v;
        }
      }
    });
    </script>
  </body>
</html>

実行し、子コンポーネント1の入力欄(「b:」)に “test” と入力したのが以下の図です。

f:id:kunst1080:20170612211428p:plain

親コンポーネントの {{parentValue}} の箇所が “test” に書き換わっているのがわかります。

親コンポーネントのイベントから、子コンポーネント2のデータを更新する (propsを使ったデータ連携)

次に、子コンポーネント2を作成し、親コンポーネントの値を子コンポーネント2へ渡すようにします。 親コンポーネントから子コンポーネントへのデータ連携には props を使い、プロパティとして連携します。

親コンポーネントの値を子コンポーネント2に渡すため、以下の設計を追加します。

  • 親コンポーネントは、プロパティ parentValue を子コンポーネント2のプロパティ myValue (DOMで指定するときは my-value ) に連携する

サンプルコード

<html>
  <head><title>test</title></head>
  <body>
    <div id="app">
      <p>this is parent</p>
      a: {{parentValue}}
      <hr>
      <child1 v-on:on-child-updated="childUpdated"></child1>
      <child2 v-bind:my-value="parentValue"></child2>
    </div>
    <script type="text/x-template" id="child1">
      <div>
        <p>this is child1</p>
        b: <input type="text" v-model="myValue" v-on:input="updated">
      </div>
    </script>
    <script type="text/x-template" id="child2">
      <div>
        <p>this is child2</p>
        c: <input type="text" v-model="myValue">
      </div>
    </script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.min.js"></script>
    <script>
    var component1 = {
      template: "#child1",
      data: function() {
        return {
          myValue: ""
        }
      },
      methods: {
        updated: function() {
          this.$emit('on-child-updated', this.myValue);
        }
      }
    }
    var component2 = {
      template: "#child2",
      props: ["myValue"]
    }
    var v = new Vue({
      el: "#app",
      data: function() {
        return {
          parentValue: ""
        }
      },
      components: {
        'child1': component1,
        'child2': component2
      },
      methods: {
        childUpdated: function(v) {
          this.parentValue = v;
        }
      }
    });
    </script>
  </body>
</html>

実行し、子コンポーネント1の入力欄(「b:」)に “testaaa” と入力したのが以下の図です。

f:id:kunst1080:20170612211454p:plain

親コンポーネントの {{parentValue}} の箇所と、子コンポーネント2の入力欄(「c:」)が “testaaa” に書き換わっているのがわかります。

以上で、子コンポーネント1から子コンポーネント2へデータ連携できました。

ちなみにこれは無理

親コンポーネントのプロパティを共有する場合、子コンポーネントの更新が親コンポーネントに連携されませんでした、という例です。。

親コンポーネントに parentValue を定義し、2つの子コンポーネントにprops経由で連携してみます。

サンプルコード

<html>
  <head><title>test</title></head>
  <body>
    <div id="app">
      <p>this is parent</p>
      a: <input type="text" v-model="parentValue">
      <hr>
      <child1 v-bind:my-value="parentValue"></child1>
      <child2 v-bind:my-value="parentValue"></child2>
    </div>
    <script type="text/x-template" id="child1">
      <div>
        <p>this is child1 -> {{myValue}}</p>
        b: <input type="text" v-model="myValue">
      </div>
    </script>
    <script type="text/x-template" id="child2">
      <div>
        <p>this is child2 -> {{myValue}}</p>
        c: <input type="text" v-model="myValue">
      </div>
    </script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.min.js"></script>
    <script>
    var component1 = {
      template: "#child1",
      props: ["myValue"]
    }
    var component2 = {
      template: "#child2",
      props: ["myValue"]
    }
    var v = new Vue({
      el: "#app",
      data: function() {
        return {
          parentValue: ""
        }
      },
      components: {
        'child1': component1,
        'child2': component2
      }
    });
    </script>
  </body>
</html>

図のように、子コンポーネントの変更は親コンポーネントに連携されませんでした。 (「a]」に"aaa"を入力した後、「b:」に"CCC"を追加入力した図)

f:id:kunst1080:20170612211634p:plain

参考URL

広告