作ろうと思ったきっかけ

去年リリースされたLINEオープンチャット
他の興味も含め興味があるジャンルのオプチャにあちこち入った
そのうちの一つがFXのオプチャで
たまーに覗いていた程度だった。2月3月ごろコロナの影響で為替が大きく動いた時にちょっと
真剣に覗いてみたところトレンドの解説などをかなり詳しくやってくれている人が何人かいて
参考にトレードをしたりしていた。
しかし毎日オプチャを見ていると
いくつかの不自由さに気づく。

一つのタイムライン


まず一つはさまざまな話題が一個のタイムラインに溢れかえっていること
超初心者の自分でググれよみたいな質問だったり
だれかれ構わず粗探しをしたいクレーマー気質な人とそれと戦い続ける人の無駄なやりとりだったり
ロングしました、ショートしました！と張り切って伝えてくれている人がいるのはいいものの
ぱっと見でドル円の話をしているのかユーロポンドの話をしているのかが伝わりにくいかった。
職業柄かもしれないがこの情報が整理されていない状態がすごくストレスだった。

人間しか投稿できない煩わしさ

本業ではもちろんslackをバリバリ使うので当然アプリ連携なんか普通のことで
全部人間がPOSTしなければならないオプチャがすごく不便だった。

そこで
これslackに移行できればすごく有意義な場所となるのでは？
という結論にいたり、作ってみました。

• 通貨ペアごとの部屋
• 話題ごとの部屋
• 簡単な通知bot

などを用意し
そこでオプチャで知り合った何人かに声をかけたのが始まり。

vue.jsで作った公式サイト
https://fx-labo.web.app/
FX研究所公式オープンチャット
https://line.me/ti/g2/o1ChnqwNK5JtsE9FmAfvpg

ぶち当たる壁4つの壁

壁その１　slackって何？

おそらく既存の大多数のslackユーザーは
ITリテラシーが高めでslack以外のチャットツール（チャットワークなど）
を経験しており、さらには気兼ねなく不明点を聞ける会社の同僚といろいろ試しながら
slackに触れていったと思われる。

ここの読者には信じられないかもしれないが
世間一般的にはslackの認知度なんて1割にも満たないと思われる
（コロナの影響で少しは上昇したかもだが）
その上、見ず知らずの相手に一からテキスト情報のみで
それを教えなければならないのだ
しかも、ITリテラシーが高いとはお世辞にも言えない人たちが大半だったため
グーグルで検索したり、とりあえず試してみたりという選択肢はなく
容赦無くどんどんチャット上で聞いてくる。しかもだいたい毎日同じ質問
（メンションはどうやってつけるの？スレッドって何？チャンネルって何？）

FXの上手な人たちを集めて質の高いトレードのための情報を得ようと思ったのに
最初の二週間はほとんどCS（カスタマーサポート）のようなことばかりをしていた。
そして驚いたことに大半（感覚値8割強）がスマホのみでトレードもチャットも完結しているのだ.
筆者はプロジェクトでPCでslackを使うがスマホ版では確認と緊急の返信くらいしでしか使わないので
そこにズレが生じる。FXのトレーダーだーからみんなパソコンいっぱい持っていると思ってたが
パソコンの方が圧倒的少数派だった。

壁その２　そこに性善説（優しい世界）はなかった

会社やプロジェクトでslackを使う時、最初にルールが共有されるだろう
general で雑談ばかりしていたり、チャンネル違いの投稿をするときっと誰かが指摘するだろう。
なぜなら会社プロジェクトを成功させるために効率化が必要という認識を
いつのまにか全員で共有できているからだ

しかしオンラインで集まった匿名コミュニティだと
FXで儲けたい人たちという共通項はあれど自分が損をしていなければ、
隣の人が100万円溶かしていようが関係ない話をしてようが全く関係ないのである
なので、他人のslack使い方がおかしかろうが、それを正さなければという意識が働かないのだ
慣れてきたらユーザー同士が優しく教えあう世界はそこにはなかった。

今でこそ古参メンバーが管理人の苦労を汲み取っていろいろとサポートしてくれて（ほんと助かってる）
機能するようになったが開設当初はせっかく用意したチャンネルはほとんど機能せずほとんど雑談とチャンネル違いの話題で埋め尽くされていた。

壁その３　自然流入がない

オプチャで勧誘してみたところ
開設一週間で50人以上の人が参加してくれた
しかし、そのうちアクティブに会話してくれたのは10人にも満たなかった。
オプチャだと1日に何十人もの人が検索経由で人が流入してくるが
Slackという閉ざされたコミュニティだとそれは皆無で
自分たちで外部で宣伝せざるを得ないのだが
なにせ、slackの認知度が低いため
よく分からん怪しいサイトに誘導してる奴がいるくらいの認識で終わってしまうのだ。
どうせ有料のサイトでしょ？なんか情報商材売りつけてくるんでしょ？と身構えてしまうのだ。
それに加えオプチャのルームにはそういった勧誘をを禁しているとこが大半なのだ
みんなであの手この手で勧誘していたら一番大きなFXのオプチャルームから締め出されてしまった。
その後twitterなどを駆使し別のユーザー獲得方法を確立（次回以降執筆予定）

壁その４　Slackの無料枠の件

ユーザーの大半を雑談が多いオープンチャットから獲得していたのこともあるかもしれないが
FXは土日に相場は動かないので、土日には雑談チャンネルでみんなワイワイと話している。
（顔も名前もどこに住んでるのか年齢も分からない人たちとずっと為替の話をしているのが楽しい）

一ヶ月半くらい経った時にslackのメッセージ数上限の通知がきた
(無料プランだと10000件を越えると古いものから表示されなくなる)
それは最初から知っていたし
そもそもFXの相場分析なので一週間も前の分析は必要ない、せいぜい2,3日分あれば十分なのだ
しかし10000件の容量のうち　通知系の垂れ流しbotと雑談でその大半を占めていることに気づいたのだ。
実況や即時性の情報ではなくナレッジを貯めていく系のチャンネルも用意していたのでこちらはいずれ消えるにせよ
できれば長く保存しておきたい。これらを少しでも延命させるために。
削除botを自作した。（詳しくは次回執筆予定）
雑談は300件以上増えると古いものから自動で削除
通知系垂れ流しは古い情報が不要なので10件
ドル円部屋は200件、テクニカルを教えあう部屋は500件
といった具合だ。
これにより10000件の枠をどのように分配するかある程度制御できるようになった。

三ヶ月たった現在

上記のような紆余曲折があったが、
運用開始から三ヶ月経った今は　ドル円やポンド円などメジャーな通貨ペアには常に誰かがいて
あーでもないこーでもないと相場を見守っているし、
類は友を呼ぶではないがエンジニアが多数集まってきており
最強のEA（自動トレードソフト）を開発しようという流れができてきたり。
上級者が初心者に優しく教えてあげるチャンネルが立ち上がったり。
土日には常連同士でくだらない雑談で盛り上がったりしている。

当初想定していたコミュニティに少しずつ近づきつつある印象です。

最後に

次回以降、私が様々な便利ツールも並行して開発していますのでそのツールのご紹介もしますが

現時点で興味のある方
バリバリのトレーダーさんや
FXの初心者さん
自動トレードや機械学習トレードに興味があるエンジニアの方も
どなたでも無料で利用できますので参加希望の方は
オープンチャットかTwitterにて連絡いただければ招待URLをお知らせいたします。

vue.jsで作った公式サイト
https://fx-labo.web.app/

集客用twitter
https://twitter.com/FxSlack

はじめに

こんにちは。Vuex最近微妙じゃね？って周りで騒がれて、「俺、Vuex使ってるけど、、やめたほうがいいならどうしたらいいんだろう・・・」って最近悩んでいる今日この頃。

Vueでaxiosを使って、連続でAPIをコールする際に、Promise.allやaxios.allを使ってまとめて投げて、まとめて受け取れるということを知ったときにはまった内容です。

axiosを使って、

1. 複数URL情報を格納した配列をまとめてAPI送信して、まとめて結果を受け取れる
2. まとめて投げているAPIで一つのURLのAPIコールが失敗しても処理を停止しない
3. Async/Awaitを使って同期的に処理する

を実現してくれる方法はないかと、

「どこかのAPIコールで失敗しても、処理を続けてうまくいったものとそうではないもの全部結果として受け取ってくれよ・・・」と

かなり錯綜して、見つけた方法を自分用メモとして残します。

内容

あるコンポーネントファイルから、dispatchでVuex内部にあるactionsの関数にアクセスして、そこからaxiosを使ってAPIを叩いています。

ざっくりとしたファイル構成は以下になります。（本当はもっと細かく分けています。ファイル名も適当です。）

.
┣ component.vue
┗ store
    ┣ modules
    ┃  ┗ api.js
    ┗ index.js

結論

axiosに情報を渡すまでの処理

component.vue

export default {
    methods: {
        async getMultiInfo(bundledUrls) {

            // 本来ここに複数のURLを格納した配列を作成します。
            // 何なら、引数で渡してもいいと思います。
            // const bundledUrls = [];

            await this.$store.dispatch('api/getMultiInfo', {
                url: bundledUrls
            })
                .then(response => {
                    this.infoCallingApi = this.$store.getters['api/getApiData'];
                }, error => {
                    console.log("getMultiInfo：error: ", error);
                })
        },
    },
}

axiosに情報を渡してくるものを受け取る側

・storeのルーティング

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import api from './modules/api'
Vue.use(Vuex);
const store = new Vuex.Store({
    state: {
    },
    mutations: {
    },
    actions: {
    },
    modules: {
        api
    }
})
export default store

・APIの受け渡しを管理している場所

api.js

import axios from 'axios'
const state = {
    somethingdata: "",
}
const getters = {
    getApiData(state) {
        return state.somethingdata
    }
}
const mutations = {
    getApiData(state, payload) {
        state.somethingdata = payload.data
    }
}
const actions = {
    async getMultiInfo(context, payload) {
        const payload_tmp_data = {
            data: "",
        }
        const postIds = payload.url;
        const posts = postIds.map(
            post => {
            var a = axios
                .get(post, { timeout: 60 * 1000 })
                .then(res => res)
                .catch(e => e)
                return a
            })
        await Promise.all(posts).then(response => {
            payload_tmp_data.data = response
        }).catch(error => {
            console.log(error)
        }).finally(() => {
            context.commit('getApiInfo', payload_tmp_data)
        });
    },
}

所感

「複数URL情報を格納した配列をまとめてAPI送信して、まとめて結果を受け取れる」ためにaxios.allやPromise.allを使えばいいことや
「Async/Awaitを使って同期的に処理する」を書くこと自体はすぐできたのですが、

「まとめて投げているAPIで一つのURLのAPIコールが失敗しても処理を停止しない」がPromise.allで全くできず、調べても、一つのAPIコールで失敗すると全部が失敗した判定になりますと書いてあってかなり苦戦しました。

結論の内容を使用すると、仮にどこかのAPIコールで失敗しても、その内容は無視してくれるようになります。

ちなみに、以下の記事を参考にしました。本当に有難いです。

参考：https://dev.to/jhalvorson/how-do-i-use-async-await-with-array-map-1h3f

Vue.jsについて必要な知識をまとめました。
自身の備忘録として記載します。

render_タグの属性

renderプロパティの第２引数に属性の値を設定するオブジェクトを用意することができます。
例えば下記のように設定を行うと、”Hello World”のフォントサイズが10px、フォントカラーが青になります。

var data = {
    message: 'Hello World'
};

var app = new Vue({
    el: '#app',
    data: data,
    render: (element)=>{
        return element("p", 
            {'style':'font-size:10pt; color:blue;'}, 
            data.message);
    }
})

子ノードの組み込み

HTMLのタグを複数表示する際には第３引数（表示内容）をVNodeオブジェクトの配列にします。

関数（タグ名、{属性},[VNode,VNode,・・・・]）

以下、サンプルコードです。
<ol>と<li>を組み合わせてリストを表示させます。

var app = new Vue({
   el: '#app',
   data: data,
   render: (element)=>{
       return element("ol", 
       [
           element("li","test 1"),
           element("li","test 2"),
           element("li","test 3") 
        ]);
   }
})

複雑なVNodeの作り方

リストの内容を操作するためには、リストに表示するコンテンツのテキストもVueでバインドしないといけないのでさらに複雑になります。

例えば下記のようなタグの構造にする場合

<div>
　<p>テスト</p>
　<ol>
　　<li>項目</li>
　　・・・・略・・・・
　</ol>
</div>

div,p,ol,liと４種類のタグのVNodeを作成し、それらを階層的に組み込みながら作成しないといけません。

考え方としては下記のように構成していきます。

１.<li>タグのVNodeを作る
２.それを子ノードに設定して、<ol>のVNodeを作る
3.<p>のVNodeと、<ol>のVNodeを子ノードに設定して、<div>のVNodeを作る。

コード上だとこのようになります。

render: (element)=>{
 var p = element("p", 
   {style:'font-size:20pt;'}, 
   data.message);
 var li = data.items.map(item=> element('li', test));
 var ol = element("ol", li);
 var div = element("div", [p, ol]);
 return div;
}

はじめに

前回、Vue.jsプロジェクト開発を始める準備という記事を書きました。
こちらではプロジェクトの作成とブラウザでの実行確認を行いました。
今回はその続きです。

目標

• トップページをvue-cliクイックスタートのデフォルトから自作ページに変更する。
• ルーティング処理を実装する。

やったこと

公式から学ぶ

まずはVue.jsの公式ガイドを一通り読んでみました。

• ディレクティブ
• コンポーネント
• Vueインスタンス
• 算出プロパティ

など理解するための丁寧な解説が載っています。

しかし、今回実現したいルーティングの設定については

ほとんどのシングルページアプリケーション (SPA: single page application) を作成する場合、
公式にサポートされている vue-router ライブラリ を使うことをお勧めします。
さらに詳しい内容は vue-router のドキュメントを参照してください。

とのこと。

vue-router ライブラリを学ぶ

vue-router公式サイト

Introductionで紹介されている
Watch a free video course about Vue Router on Vue School
こちらを見てみました。

本来の目的とは異なりますが

• vue ui というコマンドを使った機能を知る
• VeturというVSCodeの拡張機能がオススメということを知る

などのメリットもありました。

クイックスタートのソースコードを編集してみる

package.json に "vue-router": "^3.0.1"が含まれていたのでプロジェクト作成時にインストールも行われていたようです。
このまま設定を追加していきます。

まずはクイックスタートの構成から

要点は以下３つ

• App.vueが基点となる
• 初期表示時（/)ではHelloWorldのcomponentが呼ばれる
• HelloWordl.vueの中で`{{msg}}のデータバインドを行なっている

App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png"> //←Vueのロゴ
    <router-view/> //←ここにルーティング結果がレンダリングされる
  </div>
</template>

router/index.js

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

components/HelloWordl.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li>
        <a
          href="https://vuejs.org"
          target="_blank"
        >
          Core Docs
        </a>
      </li>
      <li>
...
</template>
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

変更してみる

テンプレート作成

src/views以下に新規ファイルを作成

Top.vue

<template>
    <div>
        <h2>Top Page</h2>
    </div>
</template>

Sub.vue

<template>
    <div>
        <h2>Sub Page</h2>
    </div>
</template>

router/index.jsのファイルを修正

• path
• name
• conponent

の設定が必要になります。

index.js

import Vue from 'vue'
import Router from 'vue-router'
import Top from '@/views/Top'
import Sub from '@/views/Sub'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Top',
      component: Top
    },
    {
      path: '/sub',
      name: 'Sub',
      component: Sub
    }
  ]
})

App.vueにリンクを作成

App.vue

<template>
  <div id="app">
    <router-link to="/">Top</router-link>
    <router-link to="/sub">Sub</router-link>
    <router-view/>
  </div>
</template>

さいごに

ルーティングの設定自体は簡単に実装できました。
パラメーターの設定などはまた別の記事で。

コピペだけで作れるマテリアルデザインを１０１個ご紹介します。

box-shadow, filter, transform,などをふんだんに使っており、transitionで滑らかな動きが表されています

コードには説明もわかりやすく書いてあるのでかなり参考になります

Webデザイン初心者の方はもちろんですが、バックエンドエンジニアの方にもとても助かる内容になっています

CSSボタンアニメーション１０１選

１. シンプルなスライダーマテリアルデザイン３選

そのまま使えるスライダーアニメーションのマテリアルデザインとなっています

transition-durationを使っていてわかりやすく説明もされているのでかなり重宝します

↓参考記事は下の記事です↓

２. filterとopacityを使いこなすスライダーマテリアルデザイン３選

filterとopacityを使ったそのまま使えるスライダーアニメーションのマテリアルデザインとなっています

transition-durationを使っていてわかりやすく説明もされているのでかなり重宝します

↓参考記事は下の記事です↓

３. transformを使用したスライダーアニメーション3選

translateやrotate、box-shadowも適宜使用することで様々な場面（Web制作やWebアプリケーションなど）で利用できるデザインになっています

↓参考記事は下の記事です↓

４. transform:scaleを使用したスライダーアニメーション3選

scaleでスライダー画像やナビゲーションボタンの拡大縮小を行いそれに対してアニメーションを使用しており幅広く使えるものになっています

↓参考記事は下の記事です↓

５. clip path polygonを応用して2枚の画像を半々で表示するアニメーション3選

clip path polygonを応用して2枚の画像を半々(三角形)で表示するCSSアニメーション

それぞれに違った実務で使えるエフェクトがついています

↓参考記事は下の記事です↓

６. hoverするとドロップダウン表示するナビゲーションメニュー３つ

hover(マウスオーバー)するとドロップダウン表示するナビゲーションメニューが３つ紹介されています

それぞれに違ったアニメーションがついていて面白いです

↓参考記事は下の記事です↓

７. 絶対失敗しないナビゲーションメニューサンプル３選

ナビゲーションメニューにいろいろなエフェクトがついていて使い勝手がいいです

カスタマイズもしやすいのでありがたいデザインです

↓参考記事は下の記事です↓

８. 絶対失敗しないヘッダーデザインにコピペで使えるナビゲーションメニュー４選

ヘッダーデザインにコピペで使えるナビゲーションメニュー４選が紹介されていて、そのまま使えるマテリアルデザインなのでかなり重宝します

↓参考記事は下の記事です↓

９. 【まとめ】CSSだけで動きのあるナビゲーションバーデザイン３選

CSSだけで動きのあるナビゲーションバーデザイン３選が紹介されています

かなりシンプルなデザインですがシンプルだからこそ使える場所が多いと思います

↓参考記事は下の記事です↓

１０. filterエフェクトを使いこなすhoverアニメーション３選

filterエフェクトを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

↓参考記事は下の記事です↓

１１. overflow: hiddenを使いこなす美しいCSSアニメーション３選

overflow: hiddenを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

美しい画像アニメーションとなっています

↓参考記事は下の記事です↓

１２. position:absoluteとfilterを使いこなし鏡みたいに反射するアニメーション３選

position:absoluteとfilterを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

鏡みたいに反射する見ているだけで面白いアニメーションです

↓参考記事は下の記事です↓

１３. filter: hue-rotateとtransitionを使いこなし色が暴れ出すアニメーション３選

filter: hue-rotateとtransitionを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

色が暴れ出すかなり美しいデザインになっています

↓参考記事は下の記事です↓

１４. filter:blurとtransitionを使いこなしぼかし画像が動き出すアニメーション３選

filter:blurとtransitionを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

↓参考記事は下の記事です↓

１５. transitionとfilterを使いこなし美しく変化するCSS画像エフェクト５選

transitionとfilterを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

美しく変化するのを見るだけでも面白いです

↓参考記事は下の記事です↓

１６. margin-leftとscaleを使いこなすスライドアニメーション１６選

margin-leftとscaleを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

transform:scaleを使っていてわかりやすく説明もされているのでかなり重宝します

↓参考記事は下の記事です↓

１７. hoverとfilter:brightnessを使いこなし明るさ調節するCSS画像エフェクト３選

hoverとfilter:brightnessを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

filterを使いこなすためにはまずひとつひとつ丁寧にい理解していきましょう

↓参考記事は下の記事です↓

１８. transformを使いこなすボタンアニメーション１６選

transformを使ってボタンを変形し、WebサイトやWebアプリケーションで使えるボタンエフェクトとなっています

transformを全種類使っていてわかりやすく説明もされているのでかなり重宝します

↓参考記事は下の記事です↓

１９. transitionを使いこなすボタンアニメーション9選

transitionを使ってボタンにアニメーションを効かせおり、WebサイトやWebアプリケーションで使えるボタンエフェクトとなっています

box-shadowやborder-radiusをエフェクトで使用して見た目のデザインもいい感じです

↓参考記事は下の記事です↓

２０. transformを使いこなすマテリアルデザイン5選

transformを使ってボタンにアニメーションを効かせおり、WebサイトやWebアプリケーションでそのまま使えるマテリアルデザインとなっています

マテリアルデザインなのでそのまますぐにでもコピペして使用できます

↓参考記事は下の記事です↓

２１. filterが網羅できるCSSボタンアニメーション15選

filterを使ってボタンにエフェクトを効かせおり、特にデザインの見た目をカッコよくしたい場合に非常に使えます

filterエフェクトを全種類使っているので永久保存版としても重宝できそうなまとめ記事になっています

勉強にもフロント開発でも役立つと思います

↓参考記事は下の記事です↓

２２. scaleでオシャレなCSSボタンアニメーション3選

transform:scaleを使ってボタンにエフェクトを効かせおり、オシャレでかっこいいボタンになっています

ボタンの背景が滑らかにスライドしたり、フワッと出てきたりするのでみているだけで面白いです

↓参考記事は下の記事です↓

２３. ボタンでつくる回転アニメーション9選

transitionを使ってボタンが自然に回転します

ボタンが回転するって純粋に興味ありませんか？

回転扉みたいに動くんです

↓参考記事は下の記事です↓

コピペだけで作れるマテリアルデザインを１０１個ご紹介します。

box-shadow, filter, transform,などをふんだんに使っており、transitionで滑らかな動きが表されています

コードには説明もわかりやすく書いてあるのでかなり参考になります

Webデザイン初心者の方はもちろんですが、バックエンドエンジニアの方にもとても助かる内容になっています

CSSボタンアニメーション１０１選

１. シンプルなスライダーマテリアルデザイン３選

そのまま使えるスライダーアニメーションのマテリアルデザインとなっています

transition-durationを使っていてわかりやすく説明もされているのでかなり重宝します

↓参考記事は下の記事です↓

２. filterとopacityを使いこなすスライダーマテリアルデザイン３選

filterとopacityを使ったそのまま使えるスライダーアニメーションのマテリアルデザインとなっています

transition-durationを使っていてわかりやすく説明もされているのでかなり重宝します

↓参考記事は下の記事です↓

３. transformを使用したスライダーアニメーション3選

translateやrotate、box-shadowも適宜使用することで様々な場面（Web制作やWebアプリケーションなど）で利用できるデザインになっています

↓参考記事は下の記事です↓

４. transform:scaleを使用したスライダーアニメーション3選

scaleでスライダー画像やナビゲーションボタンの拡大縮小を行いそれに対してアニメーションを使用しており幅広く使えるものになっています

↓参考記事は下の記事です↓

５. clip path polygonを応用して2枚の画像を半々で表示するアニメーション3選

clip path polygonを応用して2枚の画像を半々(三角形)で表示するCSSアニメーション

それぞれに違った実務で使えるエフェクトがついています

↓参考記事は下の記事です↓

６. hoverするとドロップダウン表示するナビゲーションメニュー３つ

hover(マウスオーバー)するとドロップダウン表示するナビゲーションメニューが３つ紹介されています

それぞれに違ったアニメーションがついていて面白いです

↓参考記事は下の記事です↓

７. 絶対失敗しないナビゲーションメニューサンプル３選

ナビゲーションメニューにいろいろなエフェクトがついていて使い勝手がいいです

カスタマイズもしやすいのでありがたいデザインです

↓参考記事は下の記事です↓

８. 絶対失敗しないヘッダーデザインにコピペで使えるナビゲーションメニュー４選

ヘッダーデザインにコピペで使えるナビゲーションメニュー４選が紹介されていて、そのまま使えるマテリアルデザインなのでかなり重宝します

↓参考記事は下の記事です↓

９. 【まとめ】CSSだけで動きのあるナビゲーションバーデザイン３選

CSSだけで動きのあるナビゲーションバーデザイン３選が紹介されています

かなりシンプルなデザインですがシンプルだからこそ使える場所が多いと思います

↓参考記事は下の記事です↓

１０. filterエフェクトを使いこなすhoverアニメーション３選

filterエフェクトを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

↓参考記事は下の記事です↓

１１. overflow: hiddenを使いこなす美しいCSSアニメーション３選

overflow: hiddenを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

美しい画像アニメーションとなっています

↓参考記事は下の記事です↓

１２. position:absoluteとfilterを使いこなし鏡みたいに反射するアニメーション３選

position:absoluteとfilterを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

鏡みたいに反射する見ているだけで面白いアニメーションです

↓参考記事は下の記事です↓

１３. filter: hue-rotateとtransitionを使いこなし色が暴れ出すアニメーション３選

filter: hue-rotateとtransitionを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

色が暴れ出すかなり美しいデザインになっています

↓参考記事は下の記事です↓

１４. filter:blurとtransitionを使いこなしぼかし画像が動き出すアニメーション３選

filter:blurとtransitionを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

↓参考記事は下の記事です↓

１５. transitionとfilterを使いこなし美しく変化するCSS画像エフェクト５選

transitionとfilterを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

美しく変化するのを見るだけでも面白いです

↓参考記事は下の記事です↓

１６. margin-leftとscaleを使いこなすスライドアニメーション１６選

margin-leftとscaleを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

transform:scaleを使っていてわかりやすく説明もされているのでかなり重宝します

↓参考記事は下の記事です↓

１７. hoverとfilter:brightnessを使いこなし明るさ調節するCSS画像エフェクト３選

hoverとfilter:brightnessを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

filterを使いこなすためにはまずひとつひとつ丁寧にい理解していきましょう

↓参考記事は下の記事です↓

１８. transformを使いこなすボタンアニメーション１６選

transformを使ってボタンを変形し、WebサイトやWebアプリケーションで使えるボタンエフェクトとなっています

transformを全種類使っていてわかりやすく説明もされているのでかなり重宝します

↓参考記事は下の記事です↓

１９. transitionを使いこなすボタンアニメーション9選

transitionを使ってボタンにアニメーションを効かせおり、WebサイトやWebアプリケーションで使えるボタンエフェクトとなっています

box-shadowやborder-radiusをエフェクトで使用して見た目のデザインもいい感じです

↓参考記事は下の記事です↓

２０. transformを使いこなすマテリアルデザイン5選

transformを使ってボタンにアニメーションを効かせおり、WebサイトやWebアプリケーションでそのまま使えるマテリアルデザインとなっています

マテリアルデザインなのでそのまますぐにでもコピペして使用できます

↓参考記事は下の記事です↓

２１. filterが網羅できるCSSボタンアニメーション15選

filterを使ってボタンにエフェクトを効かせおり、特にデザインの見た目をカッコよくしたい場合に非常に使えます

filterエフェクトを全種類使っているので永久保存版としても重宝できそうなまとめ記事になっています

勉強にもフロント開発でも役立つと思います

↓参考記事は下の記事です↓

２２. scaleでオシャレなCSSボタンアニメーション3選

transform:scaleを使ってボタンにエフェクトを効かせおり、オシャレでかっこいいボタンになっています

ボタンの背景が滑らかにスライドしたり、フワッと出てきたりするのでみているだけで面白いです

↓参考記事は下の記事です↓

２３. ボタンでつくる回転アニメーション9選

transitionを使ってボタンが自然に回転します

ボタンが回転するって純粋に興味ありませんか？

回転扉みたいに動くんです

↓参考記事は下の記事です↓

コピペだけで作れるマテリアルデザインを１０１個ご紹介します。

box-shadow, filter, transform,などをふんだんに使っており、transitionで滑らかな動きが表されています

コードには説明もわかりやすく書いてあるのでかなり参考になります

Webデザイン初心者の方はもちろんですが、バックエンドエンジニアの方にもとても助かる内容になっています

CSSボタンアニメーション１０１選

１. シンプルなスライダーマテリアルデザイン３選

そのまま使えるスライダーアニメーションのマテリアルデザインとなっています

transition-durationを使っていてわかりやすく説明もされているのでかなり重宝します

↓参考記事は下の記事です↓

２. filterとopacityを使いこなすスライダーマテリアルデザイン３選

filterとopacityを使ったそのまま使えるスライダーアニメーションのマテリアルデザインとなっています

transition-durationを使っていてわかりやすく説明もされているのでかなり重宝します

↓参考記事は下の記事です↓

３. transformを使用したスライダーアニメーション3選

translateやrotate、box-shadowも適宜使用することで様々な場面（Web制作やWebアプリケーションなど）で利用できるデザインになっています

↓参考記事は下の記事です↓

４. transform:scaleを使用したスライダーアニメーション3選

scaleでスライダー画像やナビゲーションボタンの拡大縮小を行いそれに対してアニメーションを使用しており幅広く使えるものになっています

↓参考記事は下の記事です↓

５. clip path polygonを応用して2枚の画像を半々で表示するアニメーション3選

clip path polygonを応用して2枚の画像を半々(三角形)で表示するCSSアニメーション

それぞれに違った実務で使えるエフェクトがついています

↓参考記事は下の記事です↓

６. hoverするとドロップダウン表示するナビゲーションメニュー３つ

hover(マウスオーバー)するとドロップダウン表示するナビゲーションメニューが３つ紹介されています

それぞれに違ったアニメーションがついていて面白いです

↓参考記事は下の記事です↓

７. 絶対失敗しないナビゲーションメニューサンプル３選

ナビゲーションメニューにいろいろなエフェクトがついていて使い勝手がいいです

カスタマイズもしやすいのでありがたいデザインです

↓参考記事は下の記事です↓

８. 絶対失敗しないヘッダーデザインにコピペで使えるナビゲーションメニュー４選

ヘッダーデザインにコピペで使えるナビゲーションメニュー４選が紹介されていて、そのまま使えるマテリアルデザインなのでかなり重宝します

↓参考記事は下の記事です↓

９. 【まとめ】CSSだけで動きのあるナビゲーションバーデザイン３選

CSSだけで動きのあるナビゲーションバーデザイン３選が紹介されています

かなりシンプルなデザインですがシンプルだからこそ使える場所が多いと思います

↓参考記事は下の記事です↓

１０. filterエフェクトを使いこなすhoverアニメーション３選

filterエフェクトを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

↓参考記事は下の記事です↓

１１. overflow: hiddenを使いこなす美しいCSSアニメーション３選

overflow: hiddenを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

美しい画像アニメーションとなっています

↓参考記事は下の記事です↓

１２. position:absoluteとfilterを使いこなし鏡みたいに反射するアニメーション３選

position:absoluteとfilterを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

鏡みたいに反射する見ているだけで面白いアニメーションです

↓参考記事は下の記事です↓

１３. filter: hue-rotateとtransitionを使いこなし色が暴れ出すアニメーション３選

filter: hue-rotateとtransitionを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

色が暴れ出すかなり美しいデザインになっています

↓参考記事は下の記事です↓

１４. filter:blurとtransitionを使いこなしぼかし画像が動き出すアニメーション３選

filter:blurとtransitionを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

↓参考記事は下の記事です↓

１５. transitionとfilterを使いこなし美しく変化するCSS画像エフェクト５選

transitionとfilterを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

美しく変化するのを見るだけでも面白いです

↓参考記事は下の記事です↓

１６. margin-leftとscaleを使いこなすスライドアニメーション１６選

margin-leftとscaleを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

transform:scaleを使っていてわかりやすく説明もされているのでかなり重宝します

↓参考記事は下の記事です↓

１７. hoverとfilter:brightnessを使いこなし明るさ調節するCSS画像エフェクト３選

hoverとfilter:brightnessを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

filterを使いこなすためにはまずひとつひとつ丁寧にい理解していきましょう

↓参考記事は下の記事です↓

１８. transformを使いこなすボタンアニメーション１６選

transformを使ってボタンを変形し、WebサイトやWebアプリケーションで使えるボタンエフェクトとなっています

transformを全種類使っていてわかりやすく説明もされているのでかなり重宝します

↓参考記事は下の記事です↓

１９. transitionを使いこなすボタンアニメーション9選

transitionを使ってボタンにアニメーションを効かせおり、WebサイトやWebアプリケーションで使えるボタンエフェクトとなっています

box-shadowやborder-radiusをエフェクトで使用して見た目のデザインもいい感じです

↓参考記事は下の記事です↓

２０. transformを使いこなすマテリアルデザイン5選

transformを使ってボタンにアニメーションを効かせおり、WebサイトやWebアプリケーションでそのまま使えるマテリアルデザインとなっています

マテリアルデザインなのでそのまますぐにでもコピペして使用できます

↓参考記事は下の記事です↓

２１. filterが網羅できるCSSボタンアニメーション15選

filterを使ってボタンにエフェクトを効かせおり、特にデザインの見た目をカッコよくしたい場合に非常に使えます

filterエフェクトを全種類使っているので永久保存版としても重宝できそうなまとめ記事になっています

勉強にもフロント開発でも役立つと思います

↓参考記事は下の記事です↓

２２. scaleでオシャレなCSSボタンアニメーション3選

transform:scaleを使ってボタンにエフェクトを効かせおり、オシャレでかっこいいボタンになっています

ボタンの背景が滑らかにスライドしたり、フワッと出てきたりするのでみているだけで面白いです

↓参考記事は下の記事です↓

２３. ボタンでつくる回転アニメーション9選

transitionを使ってボタンが自然に回転します

ボタンが回転するって純粋に興味ありませんか？

回転扉みたいに動くんです

↓参考記事は下の記事です↓

はじめに

業務で FCM（Firebase Cloud Messaging）を使ったWeb Push通知をSPAで実装する機会がありました。
この記事では、いくつかポイントを設けながら段階的に実装できるように書きたいと思います。
またLaravelと記載していますが、HTTPクライアントライブラリのGuzzleを使ってリクエストを投げるだけです。

この記事で説明する範囲

今回VueやLaravel、その他のライブラリなどの詳細な説明は省きます。あくまでもFCMを使ったフォアグラウンド・バックグラウンドへのPush通知がメインです。

FCM（Firebase Cloud Messaging）とは

公式ページには

Firebase Cloud Messaging（FCM）は、メッセージを無料で確実に送信するためのクロスプラットフォーム メッセージング ソリューションです。

と記載されています。
今回はWebを対象としますが仕組みは共通で、通知を受信する端末が一意なトークンをFCM側に発行してもらい、送信時に対象のトークンを用いてFCMを経由し、Push通知を送るという仕組みで、Firebaseが提供しているサービスの一つです。

手順

1. Firebaseでのプロジェクト作成・アプリ登録
2. Voluntary Application Server Identification鍵（VAPID鍵）の取得
3. 通知に対するPermissionの実装
4. フォアグラウンド・バックグラウンドでの通知の受信
5. Guzzleでリクエストを投げる

1. Firebaseでのプロジェクト作成・アプリ登録

Firebase を JavaScript プロジェクトに追加する
上記のリンクを確認しながら進めていけば問題ないかなと思います。
Laravelであれば Firebase SDK を追加して Firebase を初期化するという部分に関しては、Vueインスタンスを表示するbladeでFirebase SDKを追加しましょう。

index.blade.php

<head>
    <script src="https://www.gstatic.com/firebasejs/6.5.0/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/6.5.0/firebase-messaging.js"></script>

また初期化に関しては、私の場合resource/js/plugins/firebase.jsなどのようにディレクトリを構成し、

firebase.js

if (!firebase.apps.length) {
    firebase.initializeApp({
        apiKey: process.env.MIX_FIREBASE_API_KEY,
        authDomain: process.env.MIX_FIREBASE_AUTH_DOMAIN,
        databaseURL: process.env.MIX_FIREBASE_DATABASE_URL,
        projectId: process.env.MIX_FIREBASE_PROJECT_ID,
        storageBucket: process.env.MIX_FIREBASE_STORAGE_BUCKET,
        messagingSenderId: process.env.MIX_FIREBASE_MESSAGING_SENDER_ID,
        appId: process.env.MIX_FIREBASE_APP_ID,
    })
}

export default firebase

exportしてオブジェクトを各ファイルで参照できるようにしていますが、オブジェクトを使用したいファイルで直接初期化を行っても問題ありません。

2. Voluntary Application Server Identification鍵（VAPID鍵）の取得・設定

Web Push通知をWebアプリケーションに飛ばす際FirebaseプロジェクトとWebアプリケーションを紐づける必要があります。Firebaseコンソールから新しく生成する方法、既存のリソースをインポートする方法の両方用意されています。

VAPID鍵を生成・インポートしたらresource/js/App.vueに早速コードを書いていきます。
最初に私の場合はresource/js/plugins/firebase.jsでFirebaseの初期化を行ったので、そちらのファイルをimportし、ライフサイクルの中でfirebase.messagingを呼び出します。
これでメッセージングサービスを使用する事ができます。

App.vue

import Firebase from './plugins/firebase'

export default {
    created() {
        const messaging = Firebase.messaging()

上記のようにメッセージオブジェクトを呼び出した後に、Voluntary Application Server Identification鍵（VAPID鍵）の取得を行った際に生成・インポートしたVAPID鍵をコードに追加します。

App.vue

export default {
    created() {
        const messaging = Firebase.messaging()
        messaging.usePublicVapidKey(process.env.MIX_FIREBASE_APP_VAPPI_KEY)

こちらのusePublicVapidKeyメソッドを使用するとFCMで各種プッシュサービスにメッセージリクエストを送信するときにVAPID鍵の認証情報を使用できます。

3. 通知に対するPermissionの実装

実際にPush通知を送信する為に、ユーザーからの許可を要請する必要があります。
そのためにはrequestPermissionメソッドを使用してユーザーに対する要請の結果をPromissで取得します。

App.vue

        const messaging = Firebase.messaging()
        messaging.usePublicVapidKey(process.env.MIX_FIREBASE_APP_VAPPI_KEY)

        Notification.requestPermission()
            .then(permission => {
                console.log('Have permission')
            })
            .catch(err => {
                console.log('Error Occured')
            })

この段階でローカル環境の画面にアクセスすると

このような形で通知を表示のダイアログが確認できると思います。
またこの段階で許可をタップすると、ブラウザのコンソールにHave permissionと表示されることも確認できるでしょう。

次のステップに移る前にサービスワーカーファイルを作成しておきましょう。
ここではfirebase-messaging-sw.jsというファイル名で作成することが決まっているので、そのファイル名でファイルを作成したらドメインのルートに置きます。Laravelであれば、public/配下にファイルを設置します。今は作ったファイルは空でも構いません。

4. フォアグラウンド・バックグラウンドでの通知の受信

まず始めにFCMから発行されるトークンを取得します。先ほど書いたユーザーへの許可を要請した処理で、成功した時にトークンを取得するメソッドを呼び出すだけです。

App.vue

        Notification.requestPermission()
            .then(permission => {
                console.log('Have permission')
                return messaging.getToken()
            })
            .then(token => {
                console.log(`firebase cloud messaging token: ${token}`)
            })
            .catch(err => {
                console.log('Error Occured')
            })

ここまで書いて画面にアクセスするとトークンの取得が出来ていれば

このように表示されていると思います。
前述しましたが、こちらのFCMから発行されたトークンを使用して、対象の端末に通知を表示させます。

ここでPush通知が表示される際に2つのパターンがある事を認識しておく必要があります。

• 1つ目はWebブラウザが閉じられていたり、ブラウザが閉じられていたりした場合は、3の通知に対するPermissionの実装の最後で作成したサービスワーカーファイル内でメッセージが受け取られます。
• 2つ目はユーザーがWebページを表示している時です。この場合は実際のWebページ内でメッセージを受け取ります。なのでメッセージを受け取った際に何かのイベント（ラベルやマーカーの表示）を考えている場合は、メッセージを受け取るイベントで処理を書く必要があります。

それではメッセージを受け取るために、空で作成したサービスワーカーファイルにFirebaseメッセージングService Worker定義しましょう。

firebase-messaging-sw.js

importScripts('https://www.gstatic.com/firebasejs/6.3.4/firebase-app.js')
importScripts('https://www.gstatic.com/firebasejs/6.3.4/firebase-messaging.js')

firebase.initializeApp({
    messagingSenderId: 'hogehogehoge'
})

const messaging = firebase.messaging()

ここでも特に変わった事はなく、Firebaseの初期化の後にmessagingを呼び出すだけです。

フォアグラウンドでの受信

次にこの章の目的でもあるフォアグランドでの通知の取得をonMessageイベントを呼び出して確認してみましょう。

App.vue

        Notification.requestPermission()
            .then(permission => {
                console.log('Have permission')
                return messaging.getToken()
            })
            .then(token => {
                console.log(`firebase cloud messaging token: ${token}`)
            })
            .catch(err => {
                console.log('Error Occured')
            })

        messaging.onMessage(function(payload) {
            console.log('onMessage: ', payload)
        })

ここまで出来たらFCMのAPIにcurlでリクエストを投げて挙動を確認してみましょう。

curl -X POST \
-H "Authorization: key={MIX_FIREBASE_SERVER_KEY}" \
-H "Content-Type: application/json" \
-d '{
    "notification": {
        "title": "Hello",
        "body": "World",
        "icon": ""
    },
    "to": "{firebase return token}"
}'  \
"https://fcm.googleapis.com/fcm/send"

上記を実行すると

こちらのように表示されていて、通知をWebページ内で受信している事が確認できると思います。

バックグラウンドでの受信

バックグラウンドで受信する際には、通知を受信するWebページにフォーカスがない状態をブラウザで作る（別タブで他のページを閲覧している）か、他のアプリにフォーカスが当たっている状態に先ほどのリクエストを投げると挙動が確認できると思います。

確認できましたね。

今回は対象としませんが、通知オプションを設定したい場合（データペイロードを使用する場合など）はこちらを参照してください
基本的には、サービスワーカーファイルにメソッドを一つ追加して、データオプションに設定するだけです。

Guzzleでリクエストを投げる

ほぼおまけの内容ですが、先ほどのcurlで投げたリクエストを、Guzzleで投げる際のサンプルコードぐらいにみていただけると嬉しいです。

public static function handle($token, $content, $link)
    {
        $client = new Client();

        $server_key = env('MIX_FIREBASE_SERVER_KEY');

        $url = env('APP_URL');

        $fcm_endpoint = 'https://fcm.googleapis.com/fcm/send';

        $headers = [
            'Authorization' => 'key=' . $server_key,
            'Content-Type' => 'application/json'
        ];

        $fields = [
            'notification' => [
                'title' => 'Sample-Notification',
                'body' => $content,
                'icon' => asset('img/icon/logo-main.png'),
                'click_action' => $url . $link
            ],
            'to' => $token
        ];

        $client->post($fcm_endpoint, [
            'headers' => $headers,
            'json' => $fields
        ]);
    }

最後に

今回FCMを触るきっかけとなった実装では、フォアグラウンドでの処理にvue-notificationを使用して、ユーザーになんらかのアクションを行う導線を実装したりしました。
無料で始められ手軽に実装できるので使う際の利点は多そうです。