[Mackerel] AWS EC2でのhost設定

EC2のMackerel導入手順。取り敢えず確認しておきます。

1. Amazon Linux 2 AMI (HVM), SSD Volume Typeでインスタンスをlaunch

2. mackerelの管理画面から新規ホストの登録を行います。

– Amazon Linux 2 LTS

curl -fsSL https://mackerel.io/file/script/amznlinux/setup-all-yum-v2.sh | MACKEREL_APIKEY='hoge' sh

3. sshログイン
$ ssh ec2-user@${ip} -i ~/.ssh/aws-dev.pem

4. 先ほどのyum setupを実行する

curl -fsSL https://mackerel.io/file/script/amznlinux/setup-all-yum-v2.sh | MACKEREL_APIKEY='hoge' sh

$ sudo /sbin/service mackerel-agent start
$ sudo journalctl -u mackerel-agent.service

mackerelの管理画面のHostsで確認します。

大丈夫そうですね。
テスト用なので、退役にして、ec2はterminateします。

よっしゃああああああああああああああ

[Laravel8.x] SendGridでメール送信する

$ composer require sendgrid/sendgrid

.env

SENDGRID_API_KEY=""
FROM_EMAIL=test@gmail.com
FROM_NAME=HPSCRIPT

controller

public function test(){
    	$this->sendMail();
    	return view('index');
    }

public function sendMail(){
    	$email = new \SendGrid\Mail\Mail();
    	$email->setFrom(getenv('FROM_EMAIL'), getenv('FROM_NAME'));
    	$email->setSubject("test");
    	$email->addTo('***');

    	$sendGrid = new \SendGrid(getenv('SENDGRID_API_KEY'));
    	$email->addContent(
            "text/plain",
            strval(
                view(
                    'index'
                )
            )
        );
    	$email->addContent(
    		"text/html",
    		strval(
    			view(
    				'index'
    			)
    		)
    	);
    	
    	try {
    		$sendGrid->send($email);
    		return true;
    	} catch (Exception $e) {
    		echo $e;
            // Log::debug($e->getMessage());
            return false;
        }
    }

メール配信を無料ではなくてちゃんと月額課金の契約して行くと、ステージ変わった感があるな。
感慨深いものがある。

[AWS S3] 静的ファイルをホスティングする

S3に静的ファイルをホスティングできるらしい。
S3でホームページやサービスを運営してるってあまり聞かないような印象だが試しにやってみたい。

### bucketの作成
適当にバケットを作成します。
– static-s3-test

バケットにtest.htmlを配置し、make publicとします。

アクセスできるようになりました。

ルーティングはわからんが。。
一通りできると安心するね。

[video] modalで動画を表示したい

modal-video.jsを使う場合

	<link rel="stylesheet" type="text/css" href="/css/modal-video.min.css">
	
</head>
<body>
	<div class="container">
		<div class="video-container">
			<button class="js-modal-btn" data-video-id="${youtube ID}">Videoを開く</button>
			<div class="video-sidebar">
				<h1>Video Test</h1>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
			</div>
		</div>
		<h1>H1</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
		<img src="img/img1.jpg" class="object-fit" width="400px" height="200px"><br><br>
	</div>
	<script src="http://code.jquery.com/jquery-2.2.4.min.js"></script>
	<script src="/js/jquery-modal-video.min.js"></script>
	<script>
  		$(".js-modal-btn").modalVideo();
	</script>

jqueryを使っている場合、modal-video.min.jsでは反応しない。jquery-modal-video.min.jsにする必要がある。

### fancyboxのモーダルを使う場合

	<link rel="stylesheet" href="/css/jquery.fancybox.css" type="text/css" media="screen" />
	<style>
		#video {
			display: none;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="video-container">
			<button class="modal" href="#video">Videoを開く</button>
			<div id="video">
				<video id="player" controls width="640" height="360">
					<source src="/video/hoge.mp4">
				</video>
			</div>
			<div class="video-sidebar">
				<h1>Video Test</h1>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
			</div>
		</div>
		<h1>H1</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
		<img src="img/img1.jpg" class="object-fit" width="400px" height="200px"><br><br>
	</div>
	<script src="http://code.jquery.com/jquery-2.2.4.min.js"></script>
	<script type="text/javascript" src="js/jquery.fancybox.js"></script>
	<script>
  		$(function(){
  			$(".modal").fancybox({
  				'onComplete':function(){
  					vidplay();
  				}
  			});
  			function vidplay(){
  				var video = document.getElementById("player");
  				if(video.paused){
  					video.play();
  				} else {
  					video.paused();
  				}
  			}
  		});
	</script>

display noneとして、ボタン押下時にmodalで表示する。
modal-videoでもfancyboxでも、どっちも使えそう。

[video] Webページ背景に動画を表示する方法

代表的な属性
– width
– height
– src
– autoplay
– controls
– muted
– poster(埋め込む動画の変わりに表示する画像ファイルのURLを指定)
– playsinline(全画面のビデオプレイヤーを起動させずにページ内で動画を再生)

### 普通の動画再生

<video src="video/flower.mp4" controls width="320" height="240"></video>

### 背景

<style>
.video-container {
  position: relative;
}

.video-sidebar {
  position: absolute;
  top: 0;
  left: 0;
  width: 30%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8); 
}

video {
  width: 100%;
}
</style>

<div class="video-container">
  <video src="video/test.mp4" autoplay playsinline muted loop></video>
  <div class="video-sidebar">
    <h1>Title</h1>
    <p>text</p>
  </div>
</div>

モーダルで表示させたいね。

[JavaScript] object-fit-images

githubからDLします。
https://github.com/fregante/object-fit-images

ofi.jsを配置します。

	<style>
	.object-fit{
		  object-fit: contain;
		  font-family: 'object-fit: contain;'
		}
	</style>
</head>
<body>
	<div class="container">
		<img src="img/img1.jpg" class="object-fit" width="400px" height="200px"><br><br>
	</div>
	<script src="js/ofi.js"></script>
	<script>
  		objectFitImages('img.object-fit-img');
	</script>
</body>

ほう

[img] 画像をbase64にエンコードして書く方法

http://192.168.33.10:8000/img/img1.jpg

“copy image as data URL”でbase64のパスを取得できる。
data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAUDBAQEAwUEBAQFBQUGBwwIBwcHBw8LCwkMEQ8SEhEPERETFhwXExQaFRERGCEYGh0dHx8fExciJ…

なるほど、こういう方法があるのか。。

[JavaScript] Lazy Loadで画像読み込みを高速化させる

	<div class="container">
		<img data-src="img/img1.jpg" class="lazyload"><br><br>
		<img data-src="img/img2.jpg" class="lazyload"><br><br>
		<img data-src="img/img3.jpg" class="lazyload"><br><br>

	</div>
	<script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.js"></script>
	<script>
    lazyload();
</script>

画像のソースをsrcではなく、data-srcと書く。

なるほど、勉強になります。

[HTML] OGPとapple-touch-icon

ogpタグの設定

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
<meta property="og:title" content="">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image" />
<meta property="og:image" content="">
<meta property="og:site_name" content="">
<meta property="og:description" content="" />
<meta property="og:url" content="[url]">
<meta property="og:phone_number" content="[telnum]" />
<meta property="og:locality" content="" />

TOPページの場合は「website」、WEBサイト上の記事ページなど、TOPページ以外には「article」を指定
og:imageはシェアされたい写真

apple-touch-iconは、iphone, ipadに追加されたときに表示されるアイコン

[JavaScript] 検索で正規表現を使いたい

やりたいこと: googleみたいに、検索結果に検索ワードの前後の文字列を表示させたい

		var pattern = /^\d{3}-?\d{4}$/g;
		var postcode = '100-0001';
		var result = postcode.match(pattern);
		console.log(result);

1. matchメソッド
パターンにマッチした文字列を配列で返す
gはグローバルサーチ、iは大文字小文字を区別しない

		var str = "ABCDEFG"
		var result = str.match(/[a-c]/gi);
		console.log(result);

2.execメソッド

		var result = /(.+)cde(f)/.exec("abcdefg");
		console.log(result);

3.testメソッド
true or false

		var result = /[0-9]{3}/.test(999);
		console.log(result);

4. searchメソッド
定された正規表現で最初にマッチした文字位置を返す

		var result = str.search(/DEF/);
		console.log(result);

replace, splitもある。

searchを使う

var str = "私わたくしはその人を常に先生と呼んでいた。だからここでもただ先生と書くだけで本名は打ち明けない。これは世間を憚はばかる遠慮というよりも、その方が私にとって自然だからである。私はその人の記憶を呼び起すごとに、すぐ「先生」といいたくなる。筆を執とっても心持は同じ事である。よそよそしい頭文字かしらもじなどはとても使う気にならない。"
		var result = str.search(/先生/);

-> 12

		var str = "私わたくしはその人を常に先生と呼んでいた。だからここでもただ先生と書くだけで本名は打ち明けない。これは世間を憚はばかる遠慮というよりも、その方が私にとって自然だからである。私はその人の記憶を呼び起すごとに、すぐ「先生」といいたくなる。筆を執とっても心持は同じ事である。よそよそしい頭文字かしらもじなどはとても使う気にならない。"
		var result = str.search(/先生/);
		if(result > 10){
			var start = result - 5;
			console.log(str.substr(start,20) + '...');
		} else {
			var start = 0;
			console.log(str.substr(start,20) + '...');
		}

あ、これ、queryをbタグで囲うように置換すればいいだけじゃん。
簡単だなwww ワロタ。