knaka Tech-Blog

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

BBS 機能を追加する #Laravel

index:

概要

掲示板で、
会員メンバー間での、QA, ナレッジ、雑談等の共有ができるような
使い方を想定しています。

・PWA対応
Googleログイン可能

参考のコード

github.com

デモのページ

https://knaka0209.net/bbs


.

画面

・ bbs/ スレッド詳細
 返信入力、返信済の一覧表示

f:id:knaka0209:20200528153058p:plain

・ bbs/index 一覧
 スレッド一覧

f:id:knaka0209:20200528153124p:plain

・ 返信の自動受信、通知表示
投稿に、返信が追加された場合
 メッセージを開いている場合、BBS返信の新着を通知する機能
 JSの通知APIで通知バーに。新着を表示します。

f:id:knaka0209:20200528153137p:plain




.

メッセージ送受信の機能追加。 #Laravel #PWA

index:

概要

メンバー間で、メッセージを送受信できる機能を
Laravelで、追加しました。
PWA対応の、構成となります。

参考のコード

github.com

画面

・index
f:id:knaka0209:20200519113644p:plain

・create
 送信先メール入力、検索
 タイトル、本文を入力して。送信します

f:id:knaka0209:20200519113753p:plain


・home画面等に、通知
 メッセージ画面 以外でも、通知メニューで。
 受信通知を表示できるようにしました。
f:id:knaka0209:20200519114327p:plain

デモのページ

https://knaka0209.net/messages

.

Update

・update 2020/05/21, 返信機能や、index/自動更新
通知APIで、新着の着信ダイアログ

・着信ダイアログ, 10分間隔(600秒) ですが。自動更新チェック、
 通知APIで、デスクトップ通知を表示
f:id:knaka0209:20200521134953p:plain

・返信
 一覧>詳細に、reply( 返信)ボタンを、追加
 送信元に、返信できて。
 この場合。送付先メール検索は不要になりました。
f:id:knaka0209:20200521135414p:plain

Update ファイル添付

・Update : 2020/05/22
 ファイル添付を、追加しました。
・create
ファイルの添付を追加し、マルチパートで送信します
f:id:knaka0209:20200522175536p:plain

・show:
 受信一覧>詳細で
 下側の、attach fileで、添付ファイル取得可能にしました。
f:id:knaka0209:20200522175717p:plain

Update 検索の追加

・2020/05/23 index/受信で、検索機能を追加しました。
タイトル等を、検索可能になりました。

f:id:knaka0209:20200523095708p:plain

Update ファイルのエクスポート

・UPDATE 2020/05/24
受信>詳細で、[export] ボタン追加
 (タイトルの右側あたり)

 メッセージ内容を、テキストファイルに
 ダウロードできるように。しました
f:id:knaka0209:20200524124758p:plain



.

チャット機能、設定の手順を追記しました #Laravel #Vue.js

index:

概要

前の web push通知対応のチャット機能の。
設定の関連となります。

.envの設定

.env.local の内容を 参考に、
Laravel の .env に修正します

DB/ mysql接続設定等は、事前に完了しているのが。前提となります

https://github.com/kuc-arc-f/lara58a_6chat/blob/master/.env.local

Cloud Messaging の設定となります。
firebase (firebase.google.com )
にログインし、作成したプロジェクトを開く

・Project Pverview >設定(歯車アイコン)>プロジェクトの設定
> Cloud Messaging を開く

FCM_messagingSenderId=
FCM_PublicVapidKey=
FCM_SERVER_KEY=

・送信者 ID
FCM_messagingSenderId=
プロジェクト認証情報>送信者ID

f:id:knaka0209:20200501120827p:plain

・サーバーキー
FCM_SERVER_KEY=
プロジェクト認証情報>サーバーキー

・鍵ペア(公開鍵)
FCM_PublicVapidKey=

ウエブプッシュ証明書 > 鍵ペア

f:id:knaka0209:20200501121151p:plain

・firebase-messaging-sw.js
 に、送信者ID を、設定
https://github.com/kuc-arc-f/lara58a_6chat/blob/master/public/firebase-messaging-sw.js

Google認証を使う場合

firebase.initializeApp で使用する、 firebase 設定を追記する必要が。あります
下記の、Google認証ページ等を。参考頂ければと思います。

GOOGLE_AUTH_apiKey=
GOOGLE_AUTH_authDomain=
GOOGLE_AUTH_projectId=
GOOGLE_AUTH_appId=

参考のGit

github.com

更新、チャット一覧に、検索機能追加等 #webプッシュでチャット機能 #php #Laravel #Vue.js

index:

概要

前の firebase Cloud Messaging, Notification API 等で
web push通知対応のチャット機能の。チャット機能の更新内容となります

更新の内容

・チャット一覧の、検索機能追加
・チャット共有URLから、チャット参加機能
Googleログイン追加
Progressive Web Apps / PWA対応

画面

・チャット一覧の、検索機能追加
 チャット名で、検索可能です
 チャット脱退するボタンも追加

f:id:knaka0209:20200430083334p:plain

・メンバーからの。チャット共有URLから、チャット参加機能
 メール等で、共有URLを、開いたときに
 チャット参加画面を、追加。

f:id:knaka0209:20200430083451p:plain

参考のコード

github.com

デモのページ

https://knaka0209.net/chats

参考のページ

knaka0209.hatenablog.com

Laravel 5.8で、Google認証の追加 javascript編 #php #Laravel #Vue.js

index:

概要

前の firebase Google認証 で、Vue CLI / node.js版
の関係になりますが。JS版の実装となります

実装など

・上記の参考等で、
 firebaseログインし、
 プロジェクトの概要>設定>全般の
 マイアプリ>Firebase SDK snippet あたりの関連key
 をコピーしておきます

・外部に設置する場合、ドメイン追加が。必要でした
 Authentication > ログイン方法 >承認済みドメイン
 で「ドメインの追加」を開き、 対象ドメインの追加する。


・外部CDN読込
https://github.com/kuc-arc-f/lara58a/blob/master/resources/views/users/test.blade.php

https://gist.github.com/kuc-arc-f/fac786eff9dca4e6716e967466ad7fcb

<script src="https://www.gstatic.com/firebasejs/7.14.2/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.14.2/firebase-auth.js"></script>

・認証の処理
  signInWithPopup() コールバック内で、認証データを取得できました。

// Initialize Firebase
var config = {
  apiKey: "YOUR-PROJECT",
  authDomain: "YOUR-PROJECT.firebaseapp.com",
  databaseURL: "https://YOUR-PROJECT.firebaseio.com",
  projectId: "YOUR-PROJECT",
  storageBucket: "YOUR-PROJECT.appspot.com",
  messagingSenderId: "123"
}
// Initialize Firebase
firebase.initializeApp(firebaseConfig);

//vue
new Vue({
	el: '#app',
	data: {
		message: '',
	},
	created:function(){
//console.log("create");
		this.provider = new firebase.auth.GoogleAuthProvider();
        this.popup_open();
	},
	methods: {
		update() {
			this.message = '';
		},
		popup_open: function(){
			firebase.auth().signInWithPopup(this.provider).then(function(result) {
				var token = result.credential.accessToken;
				console.log(token)
				var user = result.user;
				console.log(user.uid)
				console.log(user.email)
				console.log(user.displayName)
			}).catch(function(error) {
				var errorCode = error.code;
				var errorMessage = error.message;
				console.log(errorCode)
				console.log(errorMessage)
			});			
		}
	}
});

参考のページ

knaka0209.hatenablog.com

Progressive Web Apps / PWAデスクトップ、Laravel SSLサービスに組込む例

index:

概要

前の Progressive Web Apps 関係で、
Laravel のSSL化したサービスに、PWA設定を追加して
デプロイ、PWAインストール等の内容になります。

環境

chrome 81
javascript
aws
Laravel 5.8

画面

PWAインストールは、前の記事と同様で。
起動した、PWA画面
ブラウザを起動せずに、webサービスを使用できるので便利な気がしました

f:id:knaka0209:20200422154344p:plain

・おまけですが。前のチャット機能 の画面
f:id:knaka0209:20200422154637p:plain

android / スマホ

・前回同様、ホームに追加
f:id:knaka0209:20200422155048j:plain

・pwaインストーラ起動して、追加おす
 と、起動アイコンが追加されて
 アプリ内で、PWAのwebサービスが使用できました

f:id:knaka0209:20200422155222j:plain

実装など

・TOP画面の Bladeに
 PWA処理を、追加


・ views/welcome.blade.php
https://github.com/kuc-arc-f/lara58a/blob/master/resources/views/welcome.blade.php

manifest.jsonですが、firebaseのmanifestと、パスが重複する為、
/pwa/manifest.json に変更しました

    <link rel="manifest" href="/pwa/manifest.json">

・ Service Worker の処理、

<script>
"use strict";
registSW();
function registSW() {
    if ('serviceWorker' in navigator) {
        window.addEventListener('load', function () {
        navigator.serviceWorker.register('/sw.js', { scope: './' }).then(function (registration) {
            console.log('ServiceWorker registration successful with scope: ', registration.scope);
        }, function (err) {
            console.log('ServiceWorker registration failed: ', err);
        });
        });
    }
}
</script>

・/pwa/manifest.json
https://github.com/kuc-arc-f/lara58a/blob/master/public/pwa/manifest.json

 name等は、適宣修正ください
 start_url は、ルートに変更

{
"short_name": "PWA-sample",
"name": "PWA sample app-1",
"display": "standalone",
"orientation": "portrait",
"start_url": "/",
"icons": [
	{
		"src": "images/icon.png",
		"sizes": "192x192",
		"type": "image/png"
	}
]
}

・/sw.js
https://github.com/kuc-arc-f/lara58a/blob/master/public/sw.js

 前と、ほぼ同じ


// Service Worker のバージョンとキャッシュする App Shell を定義する
const NAME = 'pwa-sample-v1-';
const VERSION = '002';
const CACHE_NAME = NAME + VERSION;
const urlsToCache = [
];

// Service Worker へファイルをインストール
self.addEventListener('install', function (event) {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function (cache) {
        console.log('Opened cache');
        return cache.addAll(urlsToCache);
      })
  );
});

// リクエストされたファイルが Service Worker にキャッシュされている場合
// キャッシュからレスポンスを返す
self.addEventListener('fetch', function (event) {
  if (event.request.cache === 'only-if-cached' && event.request.mode !== 'same-origin')
    return;
  event.respondWith(
    caches.match(event.request)
      .then(function (response) {
        if (response) {
          return response;
        }
        return fetch(event.request);
      })
  );
});

// Cache Storage にキャッシュされているサービスワーカーのkeyに変更があった場合
// 新バージョンをインストール後、旧バージョンのキャッシュを削除する
// (このファイルでは CACHE_NAME をkeyの値とみなし、変更を検知している)
self.addEventListener('activate', event => {
  event.waitUntil(
    caches.keys().then(keys => Promise.all(
      keys.map(key => {
        if (!CACHE_NAME.includes(key)) {
          return caches.delete(key);
        }
      })
    )).then(() => {
      console.log(CACHE_NAME + "activated");
    })
  );
});

デモのページ

https://knaka0209.net

参考の記事

knaka0209.hatenablog.com

PWA / Progressive Web Apps の初級編、PC デスクトップ版

index:

概要

PWA / Progressive Web Apps で
PC デスクトップ版のインストール、PWA起動
あたりまでの、実装となります

・PCデスクトップ版、スマホ/android等の
 マルチデバイス環境に対応しているようですので
 試してみました
 iOS/ safariは、push通知に対応してないようです。

環境

chrome 81
javascript
netlify.com / ホスティングサービス
SSL必須のようです

参考のコード

github.com

実装など

・ 今回は、netlifyに設置して。テストしました
 SSL対応であれば、動作するようです

・manifest.json
https://github.com/kuc-arc-f/pwa_sample_pwa3/blob/master/manifest.json

{
"short_name": "PWA-3",
"name": "PWA sample app-3",
"display": "standalone",
"orientation": "portrait",
"start_url": "index.html",
"icons": [
	{
		"src": "images/icon.png",
		"sizes": "192x192",
		"type": "image/png"
	}
]
}

・index.html
https://github.com/kuc-arc-f/pwa_sample_pwa3/blob/master/index.html

<!DOCTYPE HTML>
<html lang="ja">
<head>
	<meta charset="utf-8" />
	<title>PWA-3</title>
	<link rel="stylesheet" href="./bootstrap.min.css">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="manifest" href="./manifest.json">
	<!-- vue.js -->
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>  
</head>
<body>
	<div class="container">
		<h1>PWA-3 : ver 4</h1>
		<hr />
		<div id="app">
			<p>{{ message }}</p>
			<button v-on:click="proc_click">Count</button>
		</div>
	</div>
<!-- --->
<script>
"use strict";
registSW();
function registSW() {
	if ('serviceWorker' in navigator) {
		window.addEventListener('load', function () {
		navigator.serviceWorker.register('./sw.js', { scope: './' }).then(function (registration) {
			console.log('ServiceWorker registration successful with scope: ', registration.scope);
		}, function (err) {
			console.log('ServiceWorker registration failed: ', err);
		});
		});
	}
}
// vue.jsの設定関係
var app = new Vue({
	el: '#app',
	data: {
		message: 'Hello!!',
		count : 0
	},
	methods: {
		proc_click: function () {
			this.count = this.count +1;
			this.message = "count : " + this.count;
		}
	}
});
</script>
</body>
</html>

・sw.js
https://github.com/kuc-arc-f/pwa_sample_pwa3/blob/master/sw.js

// Service Worker のバージョンとキャッシュする App Shell を定義する
const NAME = 'pwa-test-app-v3-';
const VERSION = '003';
const CACHE_NAME = NAME + VERSION;
const urlsToCache = [
  './index.html',
  './bootstrap.min.css',
];

// Service Worker へファイルをインストール
self.addEventListener('install', function (event) {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function (cache) {
        console.log('Opened cache');
        return cache.addAll(urlsToCache);
      })
  );
});

// キャッシュからレスポンスを返す
self.addEventListener('fetch', function (event) {
  if (event.request.cache === 'only-if-cached' && event.request.mode !== 'same-origin')
    return;
  event.respondWith(
    caches.match(event.request)
      .then(function (response) {
        if (response) {
          return response;
        }
        return fetch(event.request);
      })
  );
});

//
self.addEventListener('activate', event => {
  event.waitUntil(
    caches.keys().then(keys => Promise.all(
      keys.map(key => {
        if (!CACHE_NAME.includes(key)) {
          return caches.delete(key);
        }
      })
    )).then(() => {
      console.log(CACHE_NAME + "activated");
    })
  );
});

画面など

 作成した、PWAアプリの画面、インストール手順となります

・index.html を、SSLサイトにデプロイし
 ブラウザで開きます
・インストール
 PC 版chromeの場合、URL部分の、右側のお気に入りの
 左側に 丸い「+」ボタンのような。アイコン出ます

f:id:knaka0209:20200419124920p:plain

・上記の+を、押す。
 インストールの、ポップアップみたいな画面で。
 「インストール」押します
f:id:knaka0209:20200419125208p:plain

windows デスクトップに、移動アイコンが
 追加され。
 PWAアプリが、起動されました。
 中身は、vue.js で書いた、試しのwebアプリ です。

f:id:knaka0209:20200419125556p:plain

android / スマホ

・インストール URLから、
 chromeの、メニュー、で
 「ホーム画面に追加」 を実行

f:id:knaka0209:20200419130739j:plain

・インストール画面で、
 追加を、押すと。PWAアプリが追加されました

f:id:knaka0209:20200419130812j:plain

・画面の、追加された起動アイコンを押し
 アプリ画面が、起動されました。中身はwebアプリですが
 スマホchromeブラウザとは異なり。
 URL入力が無かったり。ネイティブっぽい画面ですね

f:id:knaka0209:20200419130906j:plain