knaka Tech-Blog

AI, IoT, DIYエレクトロニクス, データサイエンスについて投稿予定です。

更新、チャット機能のレイアウト修正しました。 #webプッシュでチャット機能 #php #Laravel #Vue.js

index:

概要

前の firebase Cloud Messagingで web push通知対応のチャット機能で
レイアウト変更の、アップデートとなります。

画面

f:id:knaka0209:20200331113054p:plain

詳細モーダル画面を、追加しました。

・各行を、クリックすると。モーダル起動
・自分の投稿は、削除の機能を追加。

f:id:knaka0209:20200401152617p:plain

更新内容

・ リストは、上から最新表示
・ 自分の投稿、背景の変更
・ 投稿者の、アイコン。名前を。表示
・ 投稿日時を、追加
・ 投稿表示部分のBot-UI ライブラリ廃止。Vue.js で新規作成
・ 入力 部分、上に、移動

参考のコード

github.com

参考のページ

knaka0209.hatenablog.com

Update

・2020/04/01
UI調整
チャット詳細画面, メンバー/一覧追加

Vue.js + Laravelで、並べ替え編集と 保存の機能 #php #Laravel #Vue.js

index:

概要:

前の Vue.js + Laravel関連で、
Vue.Draggable を使用した、ドラッグ操作の並び替え機能と、
並び替え順を、DB保存する機能の例です

・テーブルや、UL / LI タグの行を、ドラッグ操作で
 並び変更するような。UI操作を想定しています。

環境

Vue.Draggable
php7.3
Laravel 5.8
mysql
Vue.js

画面

・行を、ドラッグして。上下に移動できます。
・保存で、モデル側に。最終の並び番号を。送信し保存します

f:id:knaka0209:20200322170143p:plain

実装など

Vue.Draggable 読込

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<!-- CDNJS :: Sortable (https://cdnjs.com/) -->
<script src="//cdn.jsdelivr.net/npm/sortablejs@1.8.4/Sortable.min.js"></script>
<!-- CDNJS :: Vue.Draggable (https://cdnjs.com/) -->
<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.20.0/vuedraggable.umd.min.js"></script>

JS部分
watch で、ドラッグ完了後の配列が取得できるようです。

new Vue({
	el: '#app',
	beforeMount: function(){
		this.getTasks()
	},	   
	data: {
		tasks : [],
		drag_items : [],
		json_items : "",
	},
	methods: {
		getTasks () {
			axios.get('/api/api_sort_items/get_items')
				.then(res =>  {
					this.tasks = res.data
//console.log(res.data )
			})            
		},
	},
	computed:{
		getTasks: {
			get: function(){
				return this.tasks;
			},
			set: function(value) {
				this.tasks = value;
			}
		}
	},		
	watch: {
			tasks: function(value){
				this.drag_items = value;
				var i = 1;
				var new_items = [];
				value.forEach(function(item){
					var data = item;
					data.order_no = i;
					i = i+1;
					//console.log(data.id);
					new_items.push(data)
				});
console.log(new_items)
				this.json_items= JSON.stringify(new_items);				
			}
	},
});

・Blade
index.blade.php
https://github.com/kuc-arc-f/lara58b_vue3_form/blob/master/resources/views/vue/sort_items/index.blade.php

<div id="app">
	<div class="panel panel-default">
		<div class="panel-heading">
			<h1>並べ替えサンプル</h1>
			<hr />
		</div>
		<div class="panel-body">
			<draggable tag="ul" v-model="tasks">
				<li v-for="task in tasks" :key="task.id"
					class="li_body">@{{ task.id }} / @{{ task.title }}
				</li>
			</draggable>				
		</div>
	</div>
	<hr />
	{!! Form::model(null , [
		'route' => 'vue_sort_items.update_number', 'method' => 'post', 'class' => 'form-horizontal'
	]) !!}	
	<div class="sorted_list_wrap" style="display : none;">
		<h3>sorted - List</h3>
		<ul>
			<li v-for="drag_item in drag_items" :key="drag_item.id"
			class="">
				ID: @{{ drag_item.id }} / order_no: @{{ drag_item.id }} / title: @{{ drag_item.title }}
			</li>		
		</ul>
		<input type="text" name="json_items" v-model="json_items" /><br /><br />
	</div>
	{!! Form::button('<i class="fa fa-save"></i> 並び替え順を保存する', 
		['type' => 'submit', 'class' => 'btn btn-primary']) !!}	
	{!! Form::close() !!}
	<hr />
	<br />
	<br />
</div>

・保存時に、JS配列を JSON変換し。POST送信しています。

参考のコード

github.com

Vue.js で、form種類の対応 select/ratio/check/date等 #php #Laravel #Vue.js

index:

概要:

前の Vue.js + Laravel関連で、
form種類 select/ratio/check/date等 の対応となります。

環境

php7.3
Laravel 5.8
mysql
Vue.js

画面

f:id:knaka0209:20200321190632p:plain

実装など

・blade
v-model 等使用しました。

create.blade.php
https://github.com/kuc-arc-f/lara58b_vue3_form/blob/master/resources/views/vue/books/create.blade.php

<div id="app">
	<div class="panel panel-default">
		<br />
		<div class="panel-heading">
			<h1>新規作成</h1>
		</div>
		<hr />
		@if (count($errors) > 0)
			<div class="alert alert-danger">
			<ul>
			@foreach ($errors->all() as $error)
				<li>{{ $error }}</li>
			@endforeach
			</ul>
			</div>
		@endif
		<div class="panel-body">
			{!! Form::model($book, [
				'route' => 'books.store', 'method' => 'post', 'class' => 'form-horizontal'
			]) !!}
			{!! Form::close() !!}			
			<div class="form-group">
				{!! Form::label('title', 'title', ['class' => 'col-sm-3 control-label']) !!}
				<div class="col-sm-6">
					<input type="text" class="form-control" id="title"
					 v-model="title" required="required" placeholder="タイトル入力下さい">
				</div>
			</div>
			<div class="form-group">
				{!! Form::label('content', 'content:', ['class' => 'col-sm-3 control-label']) !!}
				<div class="col-sm-6">
					<input type="text" class="form-control" id="content" v-model="content">
				</div>
			</div>
			<div class="form-group">
				{!! Form::label('type', 'type:', ['class' => 'col-sm-3 control-label']) !!}
				<div class="col-sm-6">
					<select v-model="type" id="type" required="required" name="type" class="form-control">
						<option value="">選択下さい</option>
						<option v-for="select_item in select_items" v-bind:key="select_item.id"
							v-bind:value="select_item.id">@{{select_item.value}}
						</option>
					</select>
				</div>
			</div>   
			<!--date -->
			<div class="form-group">
				{!! Form::label('date_1', '日付_1', ['class' => 'col-sm-3 control-label']) !!}
				<div class="col-sm-6">
					<input type="date" name="date_1" class="form-control"
					v-model="date_1"  />
				</div>
			</div>
			<div class="form-group">
				{!! Form::label('radio_1', 'ラジオ_1:', ['class' => 'col-sm-3 control-label']) !!}
				<div class="col-sm-4">
					<div class="radio_wrap" v-for="radio_item in radio_items" v-bind:key="radio_item.id">
						<input type="radio" name="radio_1" v-model="radio_1" v-bind:value="radio_item.id" />						
						@{{radio_item.value}}<br />
					</div>
				</div>
				<!--
				<span>radio_1: @{{ radio_1 }}</span>
				-->
			</div>    
			<div class="form-group">
				{!! Form::label('check_1', 'チェクボックス:', ['class' => 'col-sm-3 control-label']) !!}
				<div class="col-sm-4">
					<input type="checkbox" id="checkbox" v-model="check_1">CH_1  <br />
					<input type="checkbox" id="checkbox" v-model="check_2">CH_2  <br />
				</div>
			</div>   
	
			<br />
			<div class="form-group">
				<div class="col-sm-offset-3 col-sm-6">
					<button class="btn btn-outline-primary" v-on:click="send_post">投稿
					</button>
				</div>
			</div>
		</div>
		<hr />
		<br />
		<div class="panel-footer">
			{{ link_to_route('vue_books.index', '戻る' ,null, ['class' => 'btn btn-primary'] ) }}
		</div>
	</div>
</div>

参考のコード

github.com

Letsencrypt SSL証明書の更新、aws LightSail 版 #php #Laravel #aws

index:

概要:

前の HTTPS化のインフラ関連で、
aws LightSail で、LetsencryptによるSSL更新となります。

・SSL証明書の有効期限が 90日程で、更新作業が必要になりましたので
 追加作業の内容です

環境

aws LightSail
Ubuntu 16
nginx
AWS Route53

certbot-auto 追加

sudo curl https://dl.eff.org/certbot-auto -o /usr/bin/certbot-auto
sudo chmod 700 /usr/bin/certbot-auto

検証など

・検証コマンド

sudo /usr/bin/certbot-auto renew --dry-run

問題なければ、次に進みます。

sudo /usr/bin/certbot-auto certonly --webroot -w /home/ubuntu/work/docker_nginx_Light/ssl -d example.com --agree-tos --force-renewal -n

・-d は、ドメイン指定

SSLファイルの、コピー

sudo cp /etc/letsencrypt/live/example.com/fullchain.pem /home/ubuntu/work/docker_lara58/ssl/server.crt
sudo cp /etc/letsencrypt/live/example.com/privkey.pem /home/ubuntu/work/docker_lara58/ssl/server.key

fullchain.pem , privkey.pem 更新します。

・nginx再起動すると、更新が。反映されます

HTTPクライアントから、firebase Cloud Messaging 経由で、web プッシュ通知する。python3編

index:

概要:

前の firebase Cloud Messaging関連で、
チャット機能で、ブラウザ間の通信を
今回は、送信側はブラウザ無しで。python3 のPOST通信で
Cloud Messaging 送信するデモとなります

・raspberryPi からも、送信可能でした。
クラウドからのBot機能や、デバイスからセンサー値送信など
 応用面は、検討したいと思います。

環境

Laravel 5.8
aws
firebase Cloud Messaging
python3

参考のコード

前のチャット機能に、API等を追加しました。

github.com

画面

・push通知受信
f:id:knaka0209:20200220195132p:plain

・チャット画面
f:id:knaka0209:20200220201058p:plain

実装など

・fcm_send_post.py --python3. requests ライブラリを使用
https://github.com/kuc-arc-f/lara58a_6chat/blob/master/fcm_send_post.py

#
# fcm転送
# date : 2020/02/19
# python requests
#
import requests
import json
import pprint
import datetime
import threading
import time
import sys
import traceback

mNG_CODE=0
mOK_CODE=1
FCM_SERVER_KEY = " "

#
def fcm_send_push(  token, body ):
    try:
        response = requests.post(
            'https://fcm.googleapis.com/fcm/send',
            json.dumps({
                "notification":{
                    "title": "title-1",
                    "body": body,
                    "icon": "firebase-logo.png",
                    "click_action": "http://localhost:8081"						
                },
                "to": token
            }),
            headers={
                "Content-Type": "application/json",
                "Authorization": "key=" +FCM_SERVER_KEY
            }				
        )
        print(response.status_code)
        sText= response.text
        print( sText)
    except:
        print( "Error, send_push")
        raise
    finally:
        print( "End , send_push")
    return

#
def get_chat_members():
    chat_id ="1"
    mail = "aaa@hoge.com"
    #body = "body-0220a4"
    body = "10時になりました。お茶の時間です!!!"
    try:
        response = requests.post(
            'http://localhost:8000/api/apichats/get_send_members',
            {
                "chat_id": chat_id,
                "mail": mail
            }
        )
        print(response.status_code)
#        sText= response.text
#        print( sText)
        dec = json.loads(response.text)
        if(dec["member"]):
            fcm_send_push( dec["member"]["token"] , body )
#            print("token: " + dec["member"]["token"])
    except:
        print( "Error, get_chat_members")
        raise
    finally:
        print( "End , get_chat_members")
    return

#
if __name__ == "__main__":
    get_chat_members()
    quit()

・laravel のチャット機能から、API経由でFCM 送信先を取得
(チャットID, 送信先mail 等を指定)

・firebase サーバキー、上記の送信先を指定して
 HTTP - POST送信

・コントローラ/ web API
https://github.com/kuc-arc-f/lara58a_6chat/blob/master/app/Http/Controllers/ApiChatsController.php

aws LightSail + ubuntu +docker SSL/HTTPS 設定 #php #Laravel #aws

index:

概要:

前の HTTPS化のインフラ関連で、
aws LightSail で、LetsencryptによるSSL
Ubuntu 16+ docker + Laravel 5.8 構成となります。

環境

amazon aws LightSail
Ubuntu 16
nginx
docker
docker-compose
AWS Route53
Letsencrypt

前提 、使用しない部分

・ロードバランサ使用しない、
AWS Certificate Manager 使用しない
Amazon CloudFront 使用しない

前提、事前の準備等

ドメイン取得済、今回は Route53でドメイン取得
・Laravel 追加済
・docker, docker-compose の追加済
aws LightSail の固定IPを、Route53で
 取得したドメインに。割り当てておく

参考の設定

github.com


手順

・LightSail は、Ubuntu 16のみ
 wordpress等 アプリ無
HTTPS は、初期で通信できない為
 LightSail>ネットワーキング>静的IP >
 ファイアウォールで、
HTTPS 443を、追加しておく。

f:id:knaka0209:20200209193327p:plain

Letsencrypt で、SSL

・nginx等のHTTPサーバを、立ち上げておきます。
外部からLetsencryptが、ドメインを確認するらしく。通信に失敗すると
 処理が、進まなかった為。

・例で、example.com は、設定ドメイン
・仮に、HTTPを、docker nginxで立ち上げたフォルダ
 /home/ubuntu/work/docker_nginx_Light
・途中で、メールアドレス等の入力あり
・成功すると、  /etc/letsencrypt/live
 あたりに、SSL証明書が発行される

cd /tmp
git clone https://github.com/letsencrypt/letsencrypt
cd letsencrypt
./letsencrypt-auto
./letsencrypt-auto certonly --webroot -w /home/ubuntu/work/docker_nginx_Light -d example.com
sudo cp /etc/letsencrypt/live/example.com/fullchain.pem /home/ubuntu/work/docker_nginx_Light/ssl/server.crt
sudo cp /etc/letsencrypt/live/example.com/privkey.pem /home/ubuntu/work/docker_nginx_Light/ssl/server.key

docker-compose.yml

https://github.com/kuc-arc-f/docker_Light_SSL/blob/master/docker-compose.yml

version: '3'

services:
 web:
    build: ./docker-nginx
    ports:
        - 80:80
        - 443:443
    depends_on:
        - app
    volumes:
        - ./:/var/www/html
        - ./docker-nginx/default.conf:/etc/nginx/conf.d/default.conf
        - ./ssl:/etc/nginx/ssl
    links:
        - app
 app:
    build: ./docker-php
    depends_on:
        - db
    links:
        - db
    volumes:
        - ./:/var/www/html
 db:
    image: mysql:5.7.19
    volumes:
        - ./db/mysql_data:/var/lib/mysql    
    ports:
        - 3306:3306
    environment:
      MYSQL_ROOT_PASSWORD: root         #
      MYSQL_DATABASE: laravel         #
      MYSQL_USER: db_user           #ユーザ名
      MYSQL_PASSWORD: password   #ユーザ用パスワード

コンテナ起動

・LEMP (nginx)構成 + Laravel の、SSL対応コンテナを起動


./ssl に、Letsencrypt のSSL関連ファイルを配置

docker-compose up -d

https://設定したドメイン 、でSSL化できました。

chrome で、設置ページを開くと
 Letsencrypt証明書の情報が見れました
 有効期間は、90日らしいですね。


f:id:knaka0209:20200209195314p:plain

docker + nginx で、HTTPS/SSL化 の設定

index:

概要:

前の HTTPS化のインフラ関連で、
Ubuntu 16 の例となります。

環境

Ubuntu 16
docker
nginx
docker-compose

参考の設定

github.com

手順

・dokcer のインストールは、省略しますが。
 前の参考記事は、下記です。
knaka0209.hatenablog.com


・nginxのSSL は、前の記事を参考にしています
knaka0209.hatenablog.com

SSL関連ファイル、秘密鍵など は
 ./ssl フォルダに配置しておきます。

docker-compose.yml

https://github.com/kuc-arc-f/docker_nginx_SSL/blob/master/docker-compose.yml

version: '3'

services:
 web:
    build: ./docker-nginx
    ports:
        - 80:80
        - 443:443
    volumes:
        - ./:/var/www/html
        - ./docker-nginx/default.conf:/etc/nginx/conf.d/default.conf
        - ./ssl:/etc/nginx/ssl

・nginx設定
 default.conf
https://github.com/kuc-arc-f/docker_nginx_SSL/blob/master/docker-nginx/default.conf

コンテナ起動

docker-compose up -d

https://設置ドメイン
で、HTTPS ページ開けました