Month: October 2018

ローカル環境構築

なんだよこれ、ローカル構築とかいって、すげー重要やんけwww びっくりした。
いやー参ったね。。

vagrant boxとは?
– boxとは仮想マシンを作成する際に必要なOSのディスクイメージ、仮想マシンのテンプレート

あれ、boxって、vagrant fileと違うの？
まーいいか。
あ、boxをaddして、vagrant initして、vagrant upだ。initとupはわかるから、要はvagrant upね。

vagrantのboxをインストールする方法

vagrant box and [box-name] [box-url]

公式のページです。
https://www.vagrantup.com/docs/boxes.html

vagrant list of base boxes
http://www.vagrantbox.es/

centosは？　boxesを見ると、centos 7.2ってのがあって、これが一番最新のように見えるが。。
CentOS 7.2 x64 (Minimal, Puppet 4.2.3, Guest Additions 4.3.30)

centosのサイトを覗いてみる。ナニコレ、バージョンが幾つかよく分からない。
https://www.centos.org/download/

あれ、centos 7.4が最新のよう。centos6だと、6.10のようにです。つまりvagrant boxesはやや遅れ気味。
https://openstandia.jp/oss_info/centos/

これを入れたい。やってみよう。
https://github.com/CommanderK5/packer-centos-template/releases/download/0.7.2/vagrant-centos-7.2.box

$ vagrant add centos72 https://github.com/CommanderK5/packer-centos-template/releases/download/0.7.2/vagrant-centos-7.2.box

あ、なんか行けそうですね。vagrant box add は時間がかかりそうですが。
あれ？
>vagrant box list
bento/centos-6.7 (virtualbox, 2.2.7)
bento/centos-6.8 (virtualbox, 2.3.0)
centos72 (virtualbox, 0)
trusty64 (virtualbox, 0)
ubuntu/trusty64 (virtualbox, 20161207.0.0)

これで vagrant init centos72

vagrant init centos72

おおおおお、vagrant file理解した。
次はboxを作りたいですな。

IAMロールを作成する

IAMロールを作成する
ポリシーには以下二つの権限をつける。
-AWSLambdaBasicExecutionRole
-AmazonS3FullAccess

'use strict';

const aws = require('aws-sdk');
const s3 = new aws.S3();

exports.handler = function(event, context){
	console.log('Received event:', JSON.stringify(event, null, 2));

	const uploadBucket = event.Records[0].s3.bucket.name;
	const key = event.Records[0].s3.object.key;

	const params = {
		Bucket: uploadBucket,
		Key: key
	};
	s3.getObject(params, function(err, data){
		if(err){
			console.log(err, err.stack);
			context.done(err, err.stack);
		} else {
			console.log('data: ', data);

			const copyBucket = 'sample-copy-bucket';
			const params = {
				Bucket: copyBucket,
				Key: key,
				Body: data.Body
			};
			s3.putObject(params, function(err, data){
				if(err){
					console.log(err, err.stack);
					context.done(err, err.stack);
				} else {
					console.log('data: ', data);
					context.suceed('complete!');
				}
			});
		}
	});
};

amazon lambdaとは?

amazon lambdaとは？
– 事前に定義したコードを実行するサービス
– 処理のトリガは何かしらのイベント(s3にファイル配置、ストリームデータ受信など)
– node.js//javaで実装
– サーバ、ロギング、スケーリングなどインフラ設計・管理が不要
– 実行回数によって課金

aws cloudTrail -> Source Bucket -> Amazon S3 -> AWS Lambda -> Lambda Function -> Access Policy -> Topic -> Amazon SNS

s3でbucketを作成します。

iamからロールを作成します。

背景のみopacityを設定するには

background-colorとopacityを設定すると、テキストまで透過してしまう。

#judge{
	margin-top:15px;
	opacity:0.5;
	background-color:#ff6347;
	width:100%;
    padding-top:5px;
    padding-bottom:5px;
	text-align:center;
	color:#fff;
}

rgbに変える。

#judge{
	margin-top:15px;
	background:rgb(255,99,71,0.5);
	width:100%;
    padding-top:5px;
    padding-bottom:5px;
	text-align:center;
	color:#fff;
}

ぬ、colorが#fffだから変更が目立たないorz

エンジニアの聖地 渋谷Freeman cafe

エンジニアの聖地、Freeman cafeに行ってきた。隣との席が近いね。
エージェントの営業っぽい人が、フリーランスのメリットを力説してエンジニアを口説いて笑えた。
見た感じ、IT系の客が3～4割ってところか。コーディングするのはルノアールとかより心地よいかも。

ただ、客が多いから、本当に集中するなら、潰れそうなガラガラのカフェの方が集中できる。

複数チェックボックスを操作

<input type="checkbox" name="category_01" id="category_01" value="01" class="hokkaido">
      <label for="category_all"><b>北海道</b></label><br><br>

    <input type="checkbox" id="area_tohoku" name="category_all">
    <label for="category_all"><b>東北</b></label>
    <div id="pref_tohoku">
      <input type="checkbox" name="category_01" id="category_01" value="01" class="tohoku">
      <label for="category_01">青森</label>
      <input type="checkbox" name="category_02" id="category_02" value="01" class="tohoku">
      <label for="category_02">岩手</label>
      <input type="checkbox" name="category_03" id="category_03" value="01" class="tohoku">
      <label for="category_03">宮城</label>
      <input type="checkbox" name="category_04" id="category_04" value="01" class="tohoku">
      <label for="category_04">山形</label>
      <input type="checkbox" name="category_05" id="category_05" value="01" class="tohoku">
      <label for="category_05">福島</label>
    </div>
    <br>
    <input type="checkbox" id="area_kanto" name="category_all">
    <label for="category_all"><b>関東</b></label>
    <div id="pref_kanto">
      <input type="checkbox" name="category_01" id="category_01" value="01" class="kanto">
      <label for="category_01">茨城</label>
      <input type="checkbox" name="category_02" id="category_02" value="01" class="kanto">
      <label for="category_02">栃木</label>
      <input type="checkbox" name="category_03" id="category_03" value="01" class="kanto">
      <label for="category_03">群馬</label>
      <input type="checkbox" name="category_04" id="category_04" value="01" class="kanto">
      <label for="category_04">埼玉</label>
      <input type="checkbox" name="category_05" id="category_05" value="01" class="kanto">
      <label for="category_05">千葉</label>
      <input type="checkbox" name="category_05" id="category_05" value="01" class="kanto">
      <label for="category_06">東京</label>
      <input type="checkbox" name="category_05" id="category_05" value="01" class="kanto">
      <label for="category_07">神奈川</label>
    </div>
    <br>

    <input type="checkbox" id="area_chubu" name="category_all">
    <label for="category_all"><b>中部</b></label>
    <div id="pref_chubu">
      <input type="checkbox" name="category_01" id="category_01" value="01" class="chubu">
      <label for="category_01">新潟</label>
      <input type="checkbox" name="category_02" id="category_02" value="01" class="chubu">
      <label for="category_02">富山</label>
      <input type="checkbox" name="category_03" id="category_03" value="01" class="chubu">
      <label for="category_03">石川</label>
      <input type="checkbox" name="category_04" id="category_04" value="01" class="chubu">
      <label for="category_04">福井</label>
      <input type="checkbox" name="category_05" id="category_05" value="01" class="chubu">
      <label for="category_05">山梨</label>
      <input type="checkbox" name="category_05" id="category_05" value="01" class="chubu">
      <label for="category_05">長野</label>
      <input type="checkbox" name="category_05" id="category_05" value="01" class="chubu">
      <label for="category_05">岐阜</label>
      <input type="checkbox" name="category_05" id="category_05" value="01" class="chubu">
      <label for="category_05">静岡</label>
      <input type="checkbox" name="category_05" id="category_05" value="01" class="chubu">
      <label for="category_05">愛知</label>
    </div>
    <br>

    <input type="checkbox" id="area_kinki" name="category_all">
    <label for="category_all"><b>近畿</b></label>
    <div id="pref_kinki">
      <input type="checkbox" name="category_01" id="category_01" value="01" class="kinki">
      <label for="category_01">三重</label>
      <input type="checkbox" name="category_02" id="category_02" value="01" class="kinki">
      <label for="category_02">滋賀</label>
      <input type="checkbox" name="category_03" id="category_03" value="01" class="kinki">
      <label for="category_03">京都</label>
      <input type="checkbox" name="category_04" id="category_04" value="01" class="kinki">
      <label for="category_04">大阪</label>
      <input type="checkbox" name="category_05" id="category_05" value="01" class="kinki">
      <label for="category_05">兵庫</label>
      <input type="checkbox" name="category_05" id="category_05" value="01" class="kinki">
      <label for="category_05">奈良</label>
      <input type="checkbox" name="category_05" id="category_05" value="01" class="kinki">
      <label for="category_05">和歌山</label>
    </div>
    <br>

    <input type="checkbox" id="area_chugoku" name="category_all">
    <label for="category_all"><b>中国</b></label>
    <div id="pref_chugoku">
      <input type="checkbox" name="category_01" id="category_01" value="01" class="chugoku">
      <label for="category_01">鳥取</label>
      <input type="checkbox" name="category_02" id="category_02" value="01" class="chugoku">
      <label for="category_02">島根</label>
      <input type="checkbox" name="category_03" id="category_03" value="01" class="chugoku">
      <label for="category_03">岡山</label>
      <input type="checkbox" name="category_04" id="category_04" value="01" class="chugoku">
      <label for="category_04">広島</label>
      <input type="checkbox" name="category_05" id="category_05" value="01" class="chugoku">
      <label for="category_05">山口</label>
    </div>
    <br>

    <input type="checkbox" id="area_shikoku" name="category_all">
    <label for="category_all"><b>四国</b></label>
    <div id="pref_shikoku">
      <input type="checkbox" name="category_01" id="category_01" value="01" class="shikoku">
      <label for="category_01">徳島</label>
      <input type="checkbox" name="category_02" id="category_02" value="01" class="shikoku">
      <label for="category_02">香川</label>
      <input type="checkbox" name="category_03" id="category_03" value="01" class="shikoku">
      <label for="category_03">愛媛</label>
      <input type="checkbox" name="category_04" id="category_04" value="01" class="shikoku">
      <label for="category_04">高知</label>
    </div>
    <br>

    <input type="checkbox" id="area_kyushu" name="category_all">
    <label for="category_all"><b>九州・沖縄地方</b></label>
    <div id="pref_kyushu">
      <input type="checkbox" name="category_01" id="category_01" value="01" class="kyushu">
      <label for="category_01">福岡</label>
      <input type="checkbox" name="category_02" id="category_02" value="01" class="kyushu">
      <label for="category_02">佐賀</label>
      <input type="checkbox" name="category_03" id="category_03" value="01" class="kyushu">
      <label for="category_03">長崎</label>
      <input type="checkbox" name="category_04" id="category_04" value="01" class="kyushu">
      <label for="category_04">熊本</label>
      <input type="checkbox" name="category_05" id="category_05" value="01" class="kyushu">
      <label for="category_05">大分</label>
      <input type="checkbox" name="category_05" id="category_05" value="01" class="kyushu">
      <label for="category_05">宮崎</label>
      <input type="checkbox" name="category_05" id="category_05" value="01" class="kyushu">
      <label for="category_05">鹿児島</label>
      <input type="checkbox" name="category_05" id="category_05" value="01" class="kyushu">
      <label for="category_05">沖縄</label>
    </div>

<script
      src="https://code.jquery.com/jquery-3.3.1.min.js"
      integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
      crossorigin="anonymous"></script>
<script>
$(function(){
  $('#area_tohoku').on('click', function(){
    $('.tohoku').prop('checked', this.checked);
  });

  $('.category').on('click', function(){
    if($('#pref_tohoku :checked').length == $('#pref_tohoku: input').length){
      $('#area_tohoku').prop('checked', 'checked');
    } else {
        $('#area_tohoku').prop('checked', false);
    }
  });
  $('#area_kanto').on('click', function(){
    $('.kanto').prop('checked', this.checked);
  });

  $('.category').on('click', function(){
    if($('#pref_kanto :checked').length == $('#pref_kanto: input').length){
      $('#area_kanto').prop('checked', 'checked');
    } else {
        $('#area_kanto').prop('checked', false);
    }
  });
  $('#area_chubu').on('click', function(){
    $('.chubu').prop('checked', this.checked);
  });

  $('.category').on('click', function(){
    if($('#pref_chubu :checked').length == $('#pref_chubu: input').length){
      $('#area_chubu').prop('checked', 'checked');
    } else {
        $('#area_chubu').prop('checked', false);
    }
  });
  $('#area_kinki').on('click', function(){
    $('.kinki').prop('checked', this.checked);
  });

  $('.category').on('click', function(){
    if($('#pref_kinki :checked').length == $('#pref_kinki: input').length){
      $('#area_kinki').prop('checked', 'checked');
    } else {
        $('#area_kinki').prop('checked', false);
    }
  });
  $('#area_chugoku').on('click', function(){
    $('.chugoku').prop('checked', this.checked);
  });

  $('.category').on('click', function(){
    if($('#pref_chugoku :checked').length == $('#pref_chugoku: input').length){
      $('#area_chugoku').prop('checked', 'checked');
    } else {
        $('#area_chugoku').prop('checked', false);
    }
  });
  $('#area_shikoku').on('click', function(){
    $('.shikoku').prop('checked', this.checked);
  });

  $('.category').on('click', function(){
    if($('#pref_shikoku :checked').length == $('#pref_shikoku: input').length){
      $('#area_shikoku').prop('checked', 'checked');
    } else {
        $('#area_shikoku').prop('checked', false);
    }
  });
  $('#area_kyushu').on('click', function(){
    $('.kyushu').prop('checked', this.checked);
  });

  $('.category').on('click', function(){
    if($('#pref_kyushu :checked').length == $('#pref_kyushu: input').length){
      $('#area_kyushu').prop('checked', 'checked');
    } else {
        $('#area_kyushu').prop('checked', false);
    }
  });
});
</script>

関東にチェックを入れると、関東の都道府県すべてにチェックが入ります。

jsは長いので、保守性を考慮して、別ファイルにしましょう。

これを実装

いい感じ♪

checkbox全てにチェックを入れる

<!Doctype html>
<html>
<head>
    <meta charset="UTF-8">
<style>

</style>

</head>
<body>
    <input type="checkbox" id="category_all" name="category_all">
    <label for="category_all">全て</label>
    <div id="categories">
      <input type="checkbox" name="category_01" id="category_01" value="01" class="category">
      <label for="category_01">とんこつ</label>
      <input type="checkbox" name="category_02" id="category_02" value="01" class="category">
      <label for="category_02">味噌</label>
      <input type="checkbox" name="category_03" id="category_03" value="01" class="category">
      <label for="category_03">醤油</label>
      <input type="checkbox" name="category_04" id="category_04" value="01" class="category">
      <label for="category_04">塩</label>
      <input type="checkbox" name="category_05" id="category_05" value="01" class="category">
      <label for="category_05">その他</label>
    </div>

<script
      src="https://code.jquery.com/jquery-3.3.1.min.js"
      integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
      crossorigin="anonymous"></script>
<script>
$(function(){
  $('#category_all').on('click', function(){
    $('.category').prop('checked', this.checked);
  });

  $('.category').on('click', function(){
    if($('#categories :checked').length == $('#categories: input').length){
      $('#cateogry_all').prop('checked', 'checked');
    } else {
        $('#category_all').prop('checked', false);
    }
  });
});
</script>
</body>
</html>

vue.jsではなく、jqueryでいけましたね。これを都道府県でやりたい。

チェックボックスにvue.jsを使いたい

html

<tr>
          <th>地域</th><td>
            <input type="checkbox" name="pref" size="40"  value=""><b>北海道</b><br><br>
            <input type="checkbox" name="pref" size="40"  value=""><b>東北</b><br>
            <input type="checkbox" name="pref" size="40"  value="">青森
            <input type="checkbox" name="pref" size="40"  value="">岩手
            <input type="checkbox" name="pref" size="40"  value="">宮城
            <input type="checkbox" name="pref" size="40"  value="">秋田
            <input type="checkbox" name="pref" size="40"  value="">山形
            <input type="checkbox" name="pref" size="40"  value="">福島<br><br>
            <input type="checkbox" name="pref" size="40"  value=""><b>関東</b><br>
            <input type="checkbox" name="pref" size="40"  value="">茨城
            <input type="checkbox" name="pref" size="40"  value="">栃木
            <input type="checkbox" name="pref" size="40"  value="">群馬
            <input type="checkbox" name="pref" size="40"  value="">埼玉
            <input type="checkbox" name="pref" size="40"  value="">千葉
            <input type="checkbox" name="pref" size="40"  value="">東京
            <input type="checkbox" name="pref" size="40"  value="">神奈川<br><br>
            <input type="checkbox" name="pref" size="40"  value=""><b>中部</b><br>
            <input type="checkbox" name="pref" size="40"  value="">新潟
            <input type="checkbox" name="pref" size="40"  value="">富山
            <input type="checkbox" name="pref" size="40"  value="">石川
            <input type="checkbox" name="pref" size="40"  value="">福井
            <input type="checkbox" name="pref" size="40"  value="">山梨
            <input type="checkbox" name="pref" size="40"  value="">長野
            <input type="checkbox" name="pref" size="40"  value="">岐阜
            <input type="checkbox" name="pref" size="40"  value="">静岡
            <input type="checkbox" name="pref" size="40"  value="">愛知<br><br>
            <input type="checkbox" name="pref" size="40"  value=""><b>近畿</b><br>
            <input type="checkbox" name="pref" size="40"  value="">三重
            <input type="checkbox" name="pref" size="40"  value="">滋賀
            <input type="checkbox" name="pref" size="40"  value="">京都
            <input type="checkbox" name="pref" size="40"  value="">大阪
            <input type="checkbox" name="pref" size="40"  value="">兵庫
            <input type="checkbox" name="pref" size="40"  value="">奈良
            <input type="checkbox" name="pref" size="40"  value="">和歌山<br><br>
            <input type="checkbox" name="pref" size="40"  value=""><b>中国</b><br>
            <input type="checkbox" name="pref" size="40"  value="">鳥取
            <input type="checkbox" name="pref" size="40"  value="">島根
            <input type="checkbox" name="pref" size="40"  value="">岡山
            <input type="checkbox" name="pref" size="40"  value="">広島
            <input type="checkbox" name="pref" size="40"  value="">山口<br><br>
            <input type="checkbox" name="pref" size="40"  value=""><b>四国</b><br>
            <input type="checkbox" name="pref" size="40"  value="">徳島
            <input type="checkbox" name="pref" size="40"  value="">香川
            <input type="checkbox" name="pref" size="40"  value="">愛媛
            <input type="checkbox" name="pref" size="40"  value="">高知<br><br>
            <input type="checkbox" name="pref" size="40"  value=""><b>九州・沖縄地方</b><br>
            <input type="checkbox" name="pref" size="40"  value="">福岡
            <input type="checkbox" name="pref" size="40"  value="">佐賀
            <input type="checkbox" name="pref" size="40"  value="">長崎
            <input type="checkbox" name="pref" size="40"  value="">熊本
            <input type="checkbox" name="pref" size="40"  value="">大分
            <input type="checkbox" name="pref" size="40"  value="">宮崎
            <input type="checkbox" name="pref" size="40"  value="">鹿児島
            <input type="checkbox" name="pref" size="40"  value="">沖縄
          </td>
        </tr>

東北をチェックすると、東北地方のチェックボックスをcheckedにしたい。vue.jsでできる？