くんすとの備忘録

IT系技術メモ

移転しました。

15秒後に自動的にリダイレクトします。

安全なウォーターフォール（ドラフト）

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

特徴

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

フロー

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

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

JavaScript 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

【COBOL】Bash on Ubuntu on WindowsでCOBOL

BashOnUbuntuOnWindows COBOL Windows

ちょっとネタ記事ばかり書いてしまったので、まともな記事を書こうと思います。

このブログのアクセス解析をしたところ、ダントツのアクセス数を叩き出しているのはこの記事でした。

www.kunst1080.net

つまり、WindowsでCOBOLを動かす、ということには需要がある！！

というわけで、Bash on Ubuntu on Windows(以後「BoW」)でCOBOLを動かしてみました。 以前はMSYS2やMinGWで動かしていましたが、そのときよりも若干セットアップは簡単です。

概要

COBOLのコンパイラをインストールし、簡単なCOBOLのプログラムをコンパイル・実行できるところまでを検証します。

検証環境

Windows 10 Pro 64bit

  • バージョン 1703
  • ビルド：15063.13

※Creators Update後のWindows10です

また、BoWは既に使えるようになっている前提です。セットアップ方法はこの辺り(Bash on Ubuntu on Windowsをインストールしてみよう！ - Qiita)を参考にすればよさそう。

セットアップ手順

opensource COBOLのインストール

OSSコンソーシアムのサイト(https://www.osscons.jp/osscobol/)から、opensource COBOL1をダウンロードします。

wget "https://www.osscons.jp/osscobol/files/?action=cabinet_action_main_download&block_id=414&room_id=21&cabinet_id=11&file_id=380&upload_id=759" -O opensource-cobol-1.5.1J.tar.gz

ビルドに必要なライブラリをインストールします。
(何が必要か、ということは README に書いてありました)

$ sudo apt-get install build-essential libgmp-dev libdb-dev libncurses5-dev

解凍

$ tar -xvf opensource-cobol-1.5.1J.tar.gz

ビルドとインストール

$ cd opensource-cobol-1.5.1J
$ ./configure
$ make
$ sudo make install
$ sudo ldconfig

※ldconfig しないと、libcob.so.1が見つからない旨のエラーが発生してしまいます

確認

$ cobc

cobc: No input files

と表示されればインストールが成功しています。

作業フォルダの作成

BoWとWindowsで連携しながら開発を行うため、Windowsのエクスプローラから作業フォルダを作成します。

作業フォルダを C:\work\cobol に作成した場合、BoWからは /mnt/c/work/cobol のパスで参照できます。

BoWを作成した作業フォルダまで移動します。

$ cd /mnt/c/work/cobol

検証用ソースの作成

検証用のソースを適当なエディタで作成します。 文字コードはShiftJISにしてください。改行コードはLFでもCRLFでもどちらでも大丈夫です。

C:\work\cobol\test1.cbl

       IDENTIFICATION DIVISION.
       PROGRAM-ID. test1.
       ENVIRONMENT DIVISION.
      *
       DATA DIVISION.
      *
       WORKING-STORAGE SECTION.
       01  FILLER.
            03 TEST-X.
             10 VAR         PIC X(14).
             10 END-POINT   PIC X(01) VALUES '/'.
            03 TEST-9.
             10 VAR         PIC 9(08).
             10 END-POINT   PIC X(01) VALUES '/'.
            03 TEST-S.
             10 VAR         PIC S9(07).
             10 END-POINT   PIC X(01) VALUES '/'.
            03 TEST-COMP3.
             10 VAR         PIC S9(09)V9(2) COMP-3.
             10 END-POINT   PIC X(01) VALUES '/'.
            03 TEST-N.
             10 VAR         PIC N(09).
             10 END-POINT   PIC X(01) VALUES '/'.
            03 TEST-B.
             10 VAR         PIC S9(4) COMP.
             10 END-POINT   PIC X(01) VALUES '/'.
      *
       PROCEDURE DIVISION.
       MAIN-RTN.
           PERFORM EDIT-RTN.
           PERFORM OUTPUT-RTN.
           MOVE 9 TO RETURN-CODE.
       EXIT.
       STOP RUN.
      *
       EDIT-RTN SECTION.
           MOVE 'This is X Type'        TO VAR OF TEST-X.
           MOVE 12345678                TO VAR OF TEST-9.
           MOVE -12345                  TO VAR OF TEST-S.
           MOVE 123456789.12            TO VAR OF TEST-COMP3.
           MOVE 'こんにちは、世界！'    TO VAR OF TEST-N.
           MOVE 38533                   TO VAR OF TEST-B. *> 38533 = 0x9685 = '妹'
       EXIT.
      *
       OUTPUT-RTN SECTION.
           DISPLAY 'TEST-X    :'    TEST-X.
           DISPLAY 'TEST-9    :'    TEST-9.
           DISPLAY 'TEST-S9   :'    TEST-S.
           DISPLAY 'TEST-COMP3:'    TEST-COMP3.
           DISPLAY 'TEST-N    :'    TEST-N.
           DISPLAY 'TEST-BYTE :'    TEST-B.
       EXIT.
      *

実行準備

COBOLソースやファイルにはShiftJISのファイルを扱うことを想定していますが、BoWの文字コードはUTF-8です。なので、そのままプログラムを実行すると出力が文字化けしてしまいます。 文字化けを解消するためのツールとして nkf をインストールしておおきます。

$ sudo apt-get install nkf

コンパイルと実行

検証用のソースをコンパイルします。

$ cobc test1.cbl

→ test1 というファイルができます。

ひとまず、そのまま実行してみます。

$ ./test1

実行結果

TEST-X    :This is X Type/
TEST-9    :12345678/
TEST-S9   :001234u 
TEST-COMP3:4Vx,/  
TEST-N    :ɂ́AEI/
TEST-BYTE :/

このように、日本語の部分が文字化けしてしまっています。

出力結果に nkf を通すことで文字化けを解消できます。 もう一度実行してみましょう。

$ ./test1 | nkf

実行結果

TEST-X    :This is X Type/  
TEST-9    :12345678/  
TEST-S9   :001234u/  
TEST-COMP3:4Vx/  
TEST-N    :こんにちは、世界！/  
TEST-BYTE :妹/

日本語の文字化けが解消されました。 (pack項目はそもそもバイナリなのでこのままです。)

参考URL

  1. 執筆時のバージョンは v1.5.1J↩

Bash on Ubuntu on WindowsでMastodonを動かす方法

BashOnUbuntuOnWindows Mastodon Windows

Bash on Ubuntu on WindowsでMastodonを動かします。

Mastodonを動かすついでにRedisとPostgreSQLも動かすので、興味のある方は是非読んでみて下さい。

セットアップ

セットアップの手順については、公式のドキュメント(Production guide)1を参考にします。

必要なパッケージのインストール

$ sudo apt-get install imagemagick ffmpeg libpq-dev libxml2-dev libxslt1-dev file git curl

Node.jsのインストール

$ wget https://deb.nodesource.com/setup_7.x
$ sudo bash setup_7.x
$ sudo apt-get install nodejs
$ sudo npm install -g yarn

Redisのインストール

$ sudo apt-get install redis-server redis-tools

PostgreSQLのインストールとDBの設定

パッケージのインストール

$ sudo apt-get install postgresql postgresql-contrib

設定のためにサービスを起動

$ sudo service postgresql start

データベースの設定

$ sudo su - postgres
$ psql

$ CREATE USER mastodon CREATEDB;
$ \q

(このタイミングで一度、適当なSQLクライアントで接続確認をしておくと安心です)

サービスの停止

$ sudo service postgresql stop

Rbenv

mastodon ユーザになって、rbenvと ruby 2.4.1 をインストールします。

ユーザーの作成

$ useradd -m mastodon
$ sudo su - mastodon
$ echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bash_profile
$ echo 'eval "$(rbenv init -)"' >> ~/.bash_profile

mastodonユーザでrbenvのインストール

$ git clone https://github.com/rbenv/rbenv.git ~/.rbenv
$ git clone https://github.com/rbenv/ruby-build.git ~/.rbenv/plugins/ruby-build
$ source ~/.bash_profile
$ rbenv install 2.4.1

mastodonユーザでmastodonリポジトリの取得

$ git clone https://github.com/tootsuite/mastodon.git live
$ cd live
$ git checkout $(git tag | tail -n 1)

依存パッケージのインストール

$ gem install bundler
$ bundle install --deployment --without development test
$ yarn install --pure-lockfile

設定ファイルの編集

設定用シークレットキーの生成

$ rake secret
$ rake secret
$ rake secret

設定ファイルの書き換え

$ cp .env.production.sample .env.production
$ vim .env.production

書き換えた項目は以下の分だけです。 (今回は手元で動かすだけなので、メールの設定などは省略)

REDIS_HOST=localhost
DB_HOST=localhost
LOCAL_DOMAIN=localhost
LOCAL_HTTPS=false
PAPERCLIP_SECRET=＜rake secretで生成したシークレットキーの値＞
SECRET_KEY_BASE=＜rake secretで生成したシークレットキーの値＞
OTP_SECRET=＜rake secretで生成したシークレットキーの値＞

データベースの初期化

$ RAILS_ENV=production bundle exec rails db:setup

アセットのプリコンパイル

$ RAILS_ENV=production bundle exec rails assets:precompile

サービス起動スクリプトの作成

公式ドキュメントではmastodonの各種サービスは systemd を使って動かすようになっています。しかしながら、BoWでは systemd が使用できません。
(おそらく、systemdで利用しているudevが、devtmpfs未実装のために動かないため？)
systemd が使えないので、代わりに普通の起動スクリプトを作成します。

mastodon-web.sh

#!/bin/bash

user="mastodon"
working_directory="/home/mastodon/live"
environment="RAILS_ENV=production PORT=3000"
exec_start="/home/mastodon/.rbenv/shims/bundle exec puma -C config/puma.rb"

sudo -i -u $user sh -c "cd $working_directory && $environment $exec_start"

mastodon-sidekiq.sh

#!/bin/bash

user=mastodon
working_directory=/home/mastodon/live
environment="RAILS_ENV=production DB_POOL=5"
exec_start="/home/mastodon/.rbenv/shims/bundle exec sidekiq -c 5 -q default -q mailers -q pull -q push"

sudo -i -u $user sh -c "cd $working_directory && $environment $exec_start"

mastodon-streaming.sh

#!/bin/bash

user=mastodon
working_directory="/home/mastodon/live"
environment="NODE_ENV=production PORT=4000"
exec_start="/usr/bin/npm run start"

sudo -i -u $user sh -c "cd $working_directory && $environment $exec_start"

アカウントを承認するコマンドの準備

今回はメールの設定をしないため、アカウントを承認するためにコマンドを実行する必要があります。ユーザーを切り替えたりすると面倒なので、起動スクリプトと同様、シェルスクリプトにまとめておきます。

confirm.sh

#!/bin/bash

user="mastodon"
working_directory="/home/mastodon/live"
environment="RAILS_ENV=production"
exec_start="/home/mastodon/.rbenv/shims/bundle exec rails mastodon:confirm_email USER_EMAIL=$1"

sudo -i -u $user sh -c "cd $working_directory && $environment $exec_start"

mastodonの起動

準備ができたので、サービスを順番に立ち上げていきます。

Redis

$ sudo service redis-server start

PostgreSQL

$ sudo service postgresql start

Mastodon (ターミナルを3枚開き、それぞれで起動すると挙動が見えて面白いです)

$ sudo ./mastodon-web.sh &
$ sudo ./mastodon-streaming.sh &
$ sudo ./mastodon-sidekiq.sh &

注意: ターミナルを全て閉じるとサービスが停止してしまうため、最低1枚はBoWの画面を開いておいて下さい

表示確認

http://localhost:3000 へアクセスすると、おなじみのmastodonのサインアップ画面が表示されます。

f:id:kunst1080:20170526211146p:plain

アカウント登録の後、アカウントを承認するコマンドで承認します。(インスタンスは立ち上げたままで大丈夫)

$ sudo ./confirm.sh ＜登録したメールアドレス＞

これでログインできるようになりました。
ログイン後、サムネイル画像を設定したりトゥート！してみた後の画像はこちらです。

f:id:kunst1080:20170526211204p:plain

以上、こんな感じでした。

参考URL

  1. https://github.com/tootsuite/documentation/blob/master/Running-Mastodon/Production-guide.md↩

Bash on Ubuntu on WindowsでUbuntuのchrootコンテナを作成する方法

BashOnUbuntuOnWindows Windows

概要

Creators Updateによって、Bash on Ubuntu on Windows (BoW) へ chroot を使ってUbuntuのコンテナを作成できるようになりました。ここでは、その手順を説明します。

※この記事の内容は、過去のエントリ(Bash on Ubuntu on Windowsのchrootを試してみた - くんすとの備忘録)の一部を切り出し一部修正を加えたものです

セットアップ手順

手順は1～5まであります。

1. 必要なパッケージのインストール

# apt install debootstrap

2. debootstrapを使ったUbuntu環境のダウンロード

違いがわかりやすいように、XenialではなくVividを入れます。

# debootstrap vivid /srv/chroot/vivid http://ftp.riken.go.jp/Linux/ubuntu/

3. resolv.confのコピー

# cp -L /etc/resolv.conf /srv/chroot/vivid/etc

4. デバイスのマウント

bashの全ての窓を閉じると設定し直しになるので注意

# cd /srv/chroot
# mount -t proc none vivid/proc
# mount -t sysfs none vivid/sys
# mount -o bind /dev vivid/dev

5. ログイン

# chroot /srv/chroot/vivid /bin/bash

確認・検証

uname

コンテナの外側

# uname -a
# cat /etc/lsb-release

f:id:kunst1080:20170525233527p:plain

コンテナの内側

# uname -a
# cat /etc/lsb-release

f:id:kunst1080:20170525233543p:plain

ということで、Ubuntu(Vivid)のコンテナ環境が作成されたことがわかります。

アプリケーションを入れてみる

リポジトリの追加

# sed -i.BK 's/$/ restricted universe multiverse/' /etc/apt/sources.list
# apt update

Gitのインストール

# apt install git

軽く動作検証

git clone https://github.com/vuejs/vue.git

f:id:kunst1080:20170525233613p:plain

OK

Rubyのインストール

# apt install ruby

軽く動作検証

# ruby -e 'open("/etc/lsb-release").readlines.collect{|l| puts l.downcase}'

f:id:kunst1080:20170525233626p:plain

OK

Node.jsのインストール

# apt install nodejs

軽く動作検証

# nodejs -e 'var fs = require("fs"); fs.readFile("/etc/lsb-release", "utf8", function(err, text) { 
  console.log(text.toLowerCase())
})'

f:id:kunst1080:20170525233637p:plain

参考URL

BATファイルにシェルスクリプトを埋め込む方法

BashOnUbuntuOnWindows BAT シェルスクリプト Windows

Bash on Ubuntu on Windowsによって、Windowsでカジュアルにbashを利用することが出来るようになりましたよね。 しかしながらシェルスクリプトを直接実行することはできないようです。(パスの形式が違うので関連付けで実行できない)

ということで、BATファイルに埋め込めるようにしてみました。

# ---------- SHELL ---------- # 以降に実行したいシェルスクリプトを記述します。

ShellScript in Windows BAT

※改行コードはLFにしておく必要があります。

実行結果

f:id:kunst1080:20170424234845p:plain

こんな感じで引数も渡せます。

参考

Bash on Ubuntu on Windowsで簡単にフォルダを開くためのショートカットスクリプト

BashOnUbuntuOnWindows Windows

を書きました。

macのopenコマンドのように、ターミナルから今いる場所や引数で指定したファイルをエクスプローラで開くことができます。

※Windowsの管理しているフォルダにいるときのみ
※そうでないときは %USERPROFILE% が開く

open explorer in Bash on Ubuntu on Windows (BoW)