「Nuxt.js」の記事 - Crieit

【個人開発】踏破した都道府県を日本地図でシェアできるWebサービス「日本踏破図🗾」を作りました

2021-12-27T23:20:34+09:00

はじめに

「日本踏破図🗾」というWebサービスをNuxt × Vuetifyで個人開発しました！

日本踏破図🗾

どんなWebサービスか

踏破した都道府県を日本地図でチェックすることができ、自分が今までに日本をどれだけ踏破したかをみんなにシェアできます👍
以下のように日本地図上で都道府県をチェックできます。これをシェアボタンでシェアすると・・・

以下のようなOGP画像でシェア可能です！地図のカラーも好きな色に変更することができます。

使用したフレームワーク・インフラなど

NuxtJS（Nuxt Bridge）
Vuetify
vuex（vuex-module-decorators）
PWA
Vercel（Serverless Functions）

主なものになります。多機能なWebサービスではないのでそんなに色々使ってはいません。
よく使うNuxtとVuetifyでフロントを構築して、NuxtのNitroエンジンを使ってVercelのServerless Functionsへデプロイしています。

当初はSSRにするつもりはなかったのですが、動的OGPを実装するために色々試行錯誤した結果SSRにしました。ただ、Nuxt3／Nuxt Bridgeから使えるようになったNitroエンジンのおかげで高速&ゼロコンフィグでVercelを利用できます。

苦労したところ

動的OGPをどう実装するか

正確に言うと「いかに簡単かつ無料で実装するか」に苦労しました。
検索するとfirebaseを使ってmetaだけSSRしたものを返してリダイレクトさせる等々、実現方法自体は色々でてきます。

ただ、正直なところこの規模・機能のWebサービスにそこまでしたくなかったんですね（できるだけシンプルな作りにするということも最初に決めていました）

最終的に実装した方法は以下です。

OGP画像を生成して画像を返すServerless Functionsを用意する
Functionsへ画像生成に必要な情報(チェック済みの都道府県、地図カラー)を渡す

必要な情報をURLパラメータに持ち、それを利用してmetaタグのog:imageのエンドポイントを作っています。
そのためサービス自体はSSRする必要がありますがVercelを使えば十分な無料枠でServerless FunctionsでSSRできます。

個人的には下手にhackyな方法をとるよりも、SSRが必要な場面ではおとなしくSSRしておいた方が良い気がします🤔
（結局のところTwitter・Facebookのクローラーのためだけにあれこれやりたくない）

ちなみにNetlifyにPrerenderingという機能があるのですが、これを有効にすることで事前レンダリングされたHTMLを返すことができます。
SPA構成にしてPrerenderingを試してみたのですが、どうもPrerenderingの対象はUserAgentを見ているだけらしくTwitterクローラーであればNetlify Functionsのエンドポイントも問答無用でPrerenderingされるみたいでした。
なのでOGP画像を返すはずのFunctionsがTwitterクローラーの時はPrerenderingされてHTMLを返すようになってしまい、OGP画像が表示されず使えませんでした。。

まぁ、NetlifyのPrerenderingはキャッシュ時間(24〜48時間)もコントロールできないし、なによりBETAなのでまだ実用的ではないですね。。

サイトデザイン

デザインというのはセンスだと思っています。つまるところ、それを磨くためには多大な時間・努力が必要ということです😉
私はデザイナーではないのでそこについて時間をかけて勉強するのは得策ではありません。
悩み・試行した結果、全体的にカードベースのデザインになりました。

また、根本のデザインはいわゆるUIフレームワークに頼るわけですが今回はよく使うVuetifyを利用しました。Vuetifyのコンポーネントを使うことで何も考えずそこそこきれいなサイトができあがります。

https://vuetifyjs.com/ja/

ただ、今回は個人的にやってみたいと思っていたGlassmorphism（グラスモーフィズム）チックなデザインを実装しました。
これが間違いで、Vuetifyはマテリアルデザインを実装するフレームワークなんですね。それに対してマテリアルデザインからかけ離れるようなものを実装すると色々と歪みが生じます🙃

importantを使ってVuetifyのcssを上書きして実装しましたが、こういうことをする場合はTailwind CSSを利用するべきでした。。

https://tailwindcss.com/

運営コストについて

現状、ドメイン代オンリーです。
上の方でも少し書いていますが個人開発においては無料で運営できることにこだわっています。

まぁ、お金はかからないに越したことはないし、お金がかかってくるとちゃんとメンテしなくちゃとか、マネタイズ考えないと！とか思ってしまうわけですが無料であればひとまず放置で問題ないですからね。

ちなみに、このWebサービスでは最初からマネタイズは一切考えていません。機能的にサービス自体がマネタイズにつながるものでもないですがアドセンス等の広告等も一切はらないと決めて開発をスタートしました。

サイトパフォーマンスについて

使っている技術からもわかるかと思いますが、パフォーマンスは問題なく良いです。
特にSSRするとやっぱり初期描画のパフォーマンスがすごいです（コールドスタート時以外）

いくら無料のインフラにこだわっているかといってパフォーマンスを犠牲にしたらお話にならないですからね😉

機能の説明

日本踏破図🗾でできることを改めて説明させていただきます。

日本地図で踏破した都道府県をチェック

日本地図上の都道府県を選択することができます。選択状況した数によって日本をどれくらい踏破したかがわかります。
また、シェアボタンから踏破した都道府県をシェアすることができます❗

日本地図のメニュー

地図メニューから、それぞれの機能を利用できます。

地図をリセットする（都道府県の選択状態・色をリセットする）
地図の色を変える（日本地図の色を変更できます）
日本を踏破する（すべての都道府県を選択状態にします）
コピー（日本地図をクリップボードへコピーします）
ダウンロード（日本地図をpng画像としてダウンロードします）

チェックボックス

日本地図上から都道府県を選択する以外に、チェックボックスでも選択することができます。チェックボックスで選択すれば連動して日本地図上の都道府県も選択状態になります。

ソースコード

日本踏破図🗾のソースコードはMITライセンスで公開しています👉

https://github.com/k-urtica/traverse-japan

さいごに

登録ログイン不要で使えるのでぜひ使ってみてください。
よろしくおねがいします！

🌐 サイト：https://traverse-japan.dev/
👀 開発：K
🚩 ソース：https://github.com/k-urtica/traverse-japan

おまけ

Web ToolBoxというブラウザで無料で使えるツール集を公開しています。
こちらもよろしくおねがいします。

https://web-toolbox.dev/

【個人開発】（Nuxt.js + Rails）OSSやプロジェクトの、ソースコードを管理するGitHubのように、web上で結合テストをチームで同時に管理・実行・記録出来るプラットフォームを開発しました！

2021-10-25T15:29:45+09:00

はじめに

今回、個人で開発したWebサービス「Itamaster」の本番稼働版をリリースすることが出来ました！
こちらのサービスを開発しようと思った経緯は、ある日会社で、統合テストの管理・実行を行っていたときに、「何故ソースコードの管理プラットフォーム（GitHub等）はあるのに、結合テストの管理プラットフォームは無いんだろう」と思った事がきっかけです。
開発期間は八ヶ月ほど、作業工数は大体700時間です。

弊社、私の所属しているチームは結合テストはExcelによって管理しており、実行記録もExcelを利用しています。
Excelでの管理・実行には、以下のような不便な点がありました。

Excelでの作業は、PCにかかる負荷が大きかったこと。
会社のPCは自宅で扱うようなハイスペックなものではないため、Excelで作業を行っていると、セルをコピーしたりした時にPCがフリーズしたり、突然Excelが落ちて、保存していないデータが復旧しなかったりと、作業中に感じるストレスがとても大きかったです。
Excelだと、複数人で一つのファイルに対する作業が出来ないこと。
共有設定にして複数人で同時に作業すると、Excelが一層重くなったりして、とても実用出来るものではありませんでした。
Excelだと、一つのファイルは同時に一人でしか作業が出来ず、待ち時間の発生するメンバーがいました。
ローカルで作業しているメンバーの作業状況が把握出来ないこと。
私は管理者経験はありませんが、毎日の定時報告会や、Slackでのメッセージを見る限り、作業状況の把握が少しアナログに感じました。
Redmine等の進捗管理ツールも利用していますが、結局は自己申告であり、「どのくらいの作業が終わっていて、残っているのか」を管理者が一目で把握することが出来れば、課題を解決できると考えました。
サマリーレポートや、結果一覧表の作成が面倒
Excelから情報を整理して、Excelに表を作って、割合を求めて、グラフ化して......
テストが追加されたり、状況が変わると、また、情報を整理して、Excelに表を作って、割合を求めて、グラフ化して......
「あ"あ"あ"あ"あ"あ"あ"あ"あ"あ"あ"あ"あ"あ"あ"あ"あ"！！！！！！！」
ってなりました。

開発告知記事を書くのは初めてで、至らない点が多々あるかと思いますが
サービスの紹介、開発時の苦労や反省、所感を統括して書きたいと思います。
最後まで読んでいただければ幸いです。

【Twitterリンク】
https://twitter.com/@itamaster_

【Itamaster】
https://itamaster.work
PC推奨です。

【Itamaster　操作ガイド】（Itamasterのヘッダーと、フッターにも操作ガイドリンクを設置しています。）
https://qiita.com/Itamaster/items/3c271181e0c9c06d1d08

使用技術

npm 7.6.3
nuxtjs 2.15.3 (SPA モード)
- サクサクと、Excelのようなもっさり感やストレスの無いUXにしたかったため、SPAによって構築しました。
@nuxtjs/storybook 4.0.2
- コンポーネントのレイアウト・動作を開発中にリアルタイムで確認出来る、コンポーネントカタログ作成ツール。
  フロントエンドの単体テストの役割も果たします。
vuetify (@nuxtjs/vuetify 1.12.1)
- MaterialDesignベースのデザインライブラリです。
  少し挙動が不安定な点が目立ちました。
ruby 2.6.8
Ruby on Rails 6.1.4 (APIモード)
Device
- ログイン周り。フロントエンドにはトークンを渡します。フロントエンドではトークンをsession storageに一時保存し、axiosのインターセプターに噛ませることで、ログイン機能付きの認証認可を実現しました。
EC2(t2.small)
S3
ALB
ACM
RDS (mysql)
Route53
nginx
Stripe
- クレジットカード決済機能をAPI利用できます。
  顧客情報や、クレジットカード情報を自サーバーで持たなくてよいため、セキュアなシステムの構築が可能です。
  また、同様に、決済機能のAPI利用はリスク管理の面からも有効です。

アプリ概要

結合テストの自動化を行わないチームや、手動でのテストを行いたい状況が対象のWebサービスです。
ユーザーをメールアドレスで招待し、チームを結成。
プロジェクトを立ち上げて、テストスイート毎にテストケースを管理・実行が出来ます。

⇓チームの情報を表示するダイアログ

⇓プロジェクト、プロジェクト内のテストスイートの管理を行う画面

⇓テストスイートの情報を表示するダイアログ

⇓テストケースの情報を表示するダイアログ

⇓テストスイート内のテストケースを実行する画面

また、テスト結果一覧表や、テストサマリーレポートも出力可能です。

こだわった箇所

全体的に、明るい色を起用すること

テストという地味な作業は、設計書作成の次に気が滅入り易くなります。
暗い気持ちになってしまわぬよう、明るい色を起用しつつ、
緑や薄めの青色をメインに使う事で、ユーザーのモチベーションを維持します。

アイコンを多用し、直感的な操作を可能にすること

画面にはアイコンを多用して、文字を読まなくても色とアイコンから、ボタンの機能を推測することが可能です。
直感的に操作することが可能で、作業の効率を向上します。

進捗バーをプロジェクトと、テストスイート毎に表示可能にし、一目で状況を確認可能に

色分けされた進捗バーは、ホバーすることでそれぞれのステータスの件数を確認可能です。

チームの管理者が、「現在プロジェクト全体で、どれだけのテストが完了しているのか」を一目で確認することが可能です。

自分独自のアイコンを設定可能にすること

Itamasterは、GitHubのように、OSSのテストをオープンに行う事の出来るプラットフォームを目指します。
アイコンを設定可能にし、画面に多用することで、今後実装するSNS的な機能が違和感なく利用できます。
（Publicなプロジェクトを表示・検索し、運営しているチームとダイレクトにメッセージをやり取りし、テストを世界中のメンバーと共同して行うような）

サービス改善告知

2021/10/17 サービスに、操作ガイドページ・Demoページを追加実装しました！

操作ガイドページでは、サービス内の全てのボタンや、項目の意味、操作方法やユースケースを記述しております。
Demoページでは、実際の画面にモックデーターを流し込んだものを使い、操作感や使用イメージを持っていただくことを目的としています。
どちらも無料でご利用いただける機能ですので、よろしければお楽しみください！

2021/10/20 トップページのレイアウトを変更しました！

旧：

新：

変更にあたって、具体的に意識した点

設計思想をメインコンセプトとして表示
注目線を意識し、印象付けたい文言を左側に配置する

アニメーションが少しだけ配置されているので、実際に見ていただければ、と存じます！

サービスのこれから

トップページのレイアウト改善

とりあえず、第一課題です。
現状注目線があっちこっちに行ってしまっており、とてもわかりにくいページになっています。
デザインを勉強しつつ、わかりやすく、「使ってみたい」と思っていただけるようなトップページにしたいと思っております。

チーム公開機能の実装

public設定のチームをいくつか表示し、興味の出たOSSのテスト等に世界中から参画希望を出せるようにします。
本来の設計思想である、「何故OSSをGitで管理するように、テストを世界中のエンジニアと管理実行するプラットフォームは無いのか」という疑問を解決する機能なので、じっくり作り込みたいと思っています。
現状は、
・Topics
・Search
・Explore
の三画面を開発して、世界中のチームを見られるようにしたいと思っています。

FirebaseとSSSAPIでプレスリリースを送ったサイトを記録できるWebサービスを作ってみた

2021-10-05T17:05:54+09:00

開発しているGoogleスプレッドシートのAPI化サービス「SSSAPI」をβ版リリースしたときに、
プレスリリースをいろんなメディアに送ってみてた。

せっかく調べてまとめたし、次も使う機会があるだろうと思ったので、
Nuxt/Firebase/SSSAPIの構成でWebサービス化してみた。

プレスリリースを受け付けてるサイトを調べるのは大変なので、
どこに送れるのかな〜と思った方は使ってみてもらえるとうれしいです(´ω｀)

作ったサービス

https://press-done.memory-lovers.com

送付するプレスリリースごとに、どのサイトへ送ったかの状態管理ができます。
それだけのシンプルなWebサービス。

システム構成

基本構成はこんな感じ。

フロントエンド: Nuxt+Buefy
認証: Firebase Authentication
ユーザデータ: Firestore
マスターデータ: SSSAPI

ユーザが更新しないマスターデータはSSSAPIを利用している感じ。

メディアサイトのデータをFirestoreに入れておく形もあるけど、
Firebaseコンソールで追加や編集するより、
スプレッドシートを更新するほうが楽なので、この形にしている。

スプレッドシートの中身はこんな感じ。

SSSAPIはこんなJSONを返してくれる。

[
  {
    "id": 1,
    "サイト名": "TechCrunch Japan",
    "サイトURL": "https://jp.techcrunch.com",
    "送付方法": "メール",
    "isActive": true
  },
  {
    "id": 2,
    "サイト名": "日経クロステック",
    "サイトURL": "https://xtech.nikkei.com",
    "送付方法": "メール",
    "isActive": true
  },
  {
    "id": 3,
    "サイト名": "ITmedia",
    "サイトURL": "https://www.itmedia.co.jp/",
    "送付方法": "メール",
    "isActive": true
  },
]

※「行数をIDとして追加」オプションを使ってるので、idが自動で付与されています。

このスプレッドシートは登録依頼のGoogleフォームと連動しているので、
追加依頼があったら内容を確認してisActiveをtrueにすれば反映されます。

こういった構成は割と多く、本の貸し出し管理と備品管理とかでも使える。
Webサービスからスプレッドシートを編集できないので、
管理者権限とか不要なので、その分フロント側も楽に作れた(´ω｀)

プレスリリースってどこに送れるのかな〜と思った方は、
ぜひ使ってみてもらえるとうれしいです(´ω｀)

https://press-done.memory-lovers.com

SSSAPIはβ版ユーザを募集しています!!

β期間中はプレミアムプランの内容を無料で使えるのでお得！
ぜひぜひ、この機会にお試しいただければ！

わからないところやこんなのあったらいいなぁ〜などあれば、
Twitterやお問い合わせなどからお気軽にご連絡ください〜

GoogleスプレッドシートのAPI化サービス
『SSSAPI』
Twitter: @sssapi_app

https://sssapi.app

開発の励みや記事を書くモチベにもなるので、
いいねやシェア、はてブなどしてもらえるとかなりよろこびます!!

BulmaとNuxt/Content(というかPrism.js)の相性が結構辛い

2021-01-26T20:25:54+09:00

環境

nuxt: 2.14.6
nuxt/content: 1.9.0
prism-themes: 1.5.0
nuxt-buefy: 0.4.3

デザイン大崩れ

Nuxt/Contentを使っていて、かなり苦戦した。特にNuxt/Contentが内包している、Prism.jsでコードのハイライトを出そうとしたときが辛かった。

これ、酷くない？

最初、何か設定をミスったのかと思って、prismの導入あたりのドキュメントを見ても問題ないし、じゃあ、何かのバグかっていうと、突拍子もなさすぎて訳わからん。
しばらく悩んで気がついた。
Bulmaのスタイルが当たってるんだ。
どうやらnumberというクラスが競合しているようだ。
（正直、このnumberクラス、ドキュメントにもないし、初めて見た。そして、何というか、今後使うことなさそう……）
他にもtagというクラスが競合するらしい（未確認）。

cssに関しては大の苦手なので、具体的な施策を提示する自信がないのですが、
とりあえず、Bulmaのスタイルより優先度上のセレクタで上書きする感じで無理矢理やりました。

結構いました。

調べてみたら同じ理由で困った人がちらほら。
Bulmaをやめてしまった人までいる。
みんな困ってるんだね。

他にも

Nuxt/Content側の話で、見出しがやけに右に寄るなあ、てのもあった（画像2行目）

見出しのリンク（h2 > a > span）にiconというクラスが割り当てられていて、そこにBulmaのクラスが当たって幅を持ってしまっていた。
まあ、そもそもNuxt/Contentは「こういう感じで生成するから自分でデザインしてね」なので良いのだが（自分ではなくBulmaが勝手にやってしまった、というのはあるけど）

感想

Nuxt/Contentもprismも自分の預かり知らないところでHTMLを構成するので、意図せずCSSフレームワークと競合するのはしんどいなあという感想です。
Nuxt/Contentは上記の通りなんだけど、prismは元々のデザインがあるから辛いなあと。
あと、これでBulmaを辞めるという決断になると、同時にbuefyを辞めるという事になるので、結構辛いなあ。

Nuxt/Contentで日付による範囲検索をしたい

2021-01-06T08:13:26+09:00

ハマりにハマった。

Nuxt/Content

最近、Nuxt/Contentというものをお試しで触っている。
Markdownとかでコンテンツをゴリゴリ書いていける、GitベースのヘッドレスCMSとかいうものになるらしい。「GitベースのヘッドレスCMS」とか言われてもよくわからないが、DBではなくGitで管理するということだと思う。
検索とか、なんなら全文検索もできるし結構便利そう。
ただ、公式ドキュメント以外に日本語の記事が乏しくて、ちょっと苦戦する。
ちょっと、というか、どハマりしてしまった。

ハマった環境

Nuxt: 2.14.6
nuxt/content: 1.9.0

日付でコンテンツを絞りたい

作成日でコンテンツを絞りたかったので、ドキュメントを参考にクエリを書いた。
ただ、日付の扱い方がよくわからなかったので嫌な予感はしていた。

// 例）2020/11の記事を検索したい
const monthStart = new Date("2020-11-01")
const monthEnd = new Date("2020-11-30")
const articles = await $content('articles')
    .sortBy('createdAt', 'desc')
    .limit(5)
    .where({
        createdAt: { $and: [{ $gte: monthStart }, { $lte: monthEnd }] },
    })
    .fetch()

これで11月に作成した記事の最新5件が取れるはずだった。

けど取れない

変数articlesの中身は空でした。なんで？
もしかしてDateじゃないのかなとか思って日付形式っぽい文字列にしてみてもダメ。
公式ドキュメントを探し直したけど、特に記述はなく……。
なんなら

createdAt: DateTime

とか書いてあるし、どう考えたってDateでしょ。

調べた

先述の通り、日本語の記事が乏しいうえ、公式ドキュメントに記載がないので苦戦したのだけど、調べて、見つけた。
あったよ。
ていうか、GitHubのissueだったよ！
まあ、内容としてはissueそのまんまなんだけど、

// 例）2020/11の記事を検索したい
const monthStart = new Date("2020-11-01").valueOf()
const monthEnd = new Date("2020-11-30").valueOf()
const articles = await $content('articles')
    .sortBy('createdAt', 'desc')
    .limit(5)
    .where({
        createdAt: { $and: [{ $gte: monthStart }, { $lte: monthEnd }] },
    })
    .fetch()

valueOf()なんて初めて使ったよ。てか、初めて知ったよ。
と思って調べてみたら、getTime()の方が正しい気がしてきたぞ？

このメソッドは、Date.prototype.getTime() メソッドと機能的に同等です。
このメソッドは、JavaScript によって内部的に呼ばれ、コード内で明示的に呼ばれることはありません。

// 例）2020/11の記事を検索したい
const monthStart = new Date("2020-11-01").getTime()
const monthEnd = new Date("2020-11-30").getTime()
const articles = await $content('articles')
    .sortBy('createdAt', 'desc')
    .limit(5)
    .where({
        createdAt: { $and: [{ $gte: monthStart }, { $lte: monthEnd }] },
    })
    .fetch()

うん、これでも動いた。

あー、UNIXタイムスタンプだったかー。ドキュメントに書いてて欲しいなー。

おわりに

issuesにはあったけど、日本語の記事があっても良いと思ったので書きました。
探し方が悪いだけかもしれませんが。

ハッカー専用パズルゲームを作ったので全てネタバレする

2020-09-24T10:25:23+09:00

当記事はハッカー専用パズルゲームを作ったので全てネタバレするのクロス投稿です

💰作ったもの💰

UNLOCK BANK

@銀行口座をHackしたくてウズウズしている皆さん「違法行為はしたくないけどハッキングはしたい…」そんな貴方の悩みを解決するゲームをご用意しました。このゲームでは何をやっても合法です。是非、不正ログインしてみてください💰https://t.co/LyIpYLCRrP #UNLOCK_BANK
— きんみ | ツイッター大喜利サイト🎍ついぎり🎍作りました🙄 (@_kinmi) September 21, 2020

仕様

Account Number(数字8桁) と Password(数字4桁) によるログイン認証
Account Number は全て存在する(8桁なので全口座数は1億口)
Password を3回間違えるとロック(再試行不可)される
[裏設定] 銀行口座を模している為、もちろんパスワードが流出したら他者もログイン可能

ユーザーはどんな攻撃手法を用いても良い。
最近話題の1段階認証を突破してみようというパズルゲーム。

システム構成

JSフレームワーク: Nuxt.js 2.14.5(Vue.js 2.x)
トランスパイル: TypeScript 4.0
CSSフレームワーク: TailwindCSS
ホスティング: Vercel

お馴染みの構成を選択したが、Vue.jsの使用については少し後悔している（後述）

以下ネタバレ

想定する解法

基本的には以下の2つと考えている。
- ☠️リバースブルートフォース攻撃☠️
件の金融事件で脚光を浴びた攻撃手法。
暗証番号の総当たり(ブルートフォース攻撃)は一般的なシステムだと試行回数に制限を設けているが、ユーザーIDの様な公開情報については秘匿性が低いため無制限に試行できるシステムが多い。そこを突いてパスワードは固定のままIDの方を総当たりするという攻撃。
特に当ゲームのような、認証情報に数値しか許容していないシステムだと少ない試行回数で突破できるため致命的な脆弱性となる。

😈リバースエンジニアリング😈
JavaScriptのみで構成している為、コードを解析してパスワードの取得が可能。
当初はNode.jsサーバー等を用意して認証処理を隠蔽するつもりだったがガチ攻撃された場合、サーバーか私の財布が死ぬと思い断念。
しかし「ハッカー専用」と銘打っている以上、コードを覗くだけで突破されては面白くないので悪足掻きとして難読化を施している。

仕組みについて

🔐パスワード生成

仕様として、口座番号とパスワードの紐付きを作らないといけない（パスワードが流出したら誰でもログインできるように）
最初は愚直に1億口座分のパスワードマッピングを定数で用意しようと考えた。
しかし上述のコードを隠蔽できない事情によりリテラル値で持つのは避けたかった為、下記のライブラリを採用した。
seedrandom.js
これを用いてシード値から再現性のある乱数を生成(※1)する。

下記のように口座番号をシード値とした乱数を生成した後、整形してパスワードとしている。

const seedrandom = require('seedrandom')

function authenticated(account: string, password: string): boolean {
  const rng = seedrandom(account)
  const _pass = String(Math.round(rng() * 10000)).padStart(4, '0')
  return _pass === password
}

これで口座番号とパスワードの紐付きを再現している。

seedrandom.jsの使用感

🙆‍♂️ 良かった所
- 直感的に使える
- 複数の乱数アルゴリズムに対応している
- Math.random()をラップできる為、テストにも使えそう
🙅‍♂️ 頑張って〜
- 型定義がない(2020/09現在、issueにて対応中)

個人的には「再現性のある乱数を生成する処理」というのはバーコードバトラーライクのゲームを作る際に重宝するので、有難いライブラリ。

状態管理, 認証処理

本筋と外れるが、クライアントで認証処理を行う為に口座番号と暗証番号をグローバル管理する必要があった。
Vuexはオーバースペックなので状態をInjectするプラグインを自作してstoreとして使用した。

~/plugins/auth.ts

import Vue from 'vue'
import { Plugin } from '@nuxt/types'
import { Seedrandom } from '../types/seedrandom'
const seedrandom = require('seedrandom') as Seedrandom

type InjectTypeAuth = {
  /**
   * 口座番号
   */
  accountNumber: string
  /**
   * 暗証番号
   */
  password: string
  /**
   * 認証処理
   * seedから4桁の乱数(先頭0埋め)を生成し、passwordとの比較結果を返却する
   * @param {string} seed シード値となる値
   * @param {string} password パスワード
   */
  authenticated(seed: string, password: string): boolean
}

declare module '@nuxt/types' {
  interface Context {
    $auth: InjectTypeAuth
  }
  interface NuxtAppOptions {
    $auth: InjectTypeAuth
  }
}
declare module 'vue/types/vue' {
  interface Vue {
    $auth: InjectTypeAuth
  }
}

type State = {
  accountNumber: string
  password: string
}

/**********************************************
 * 認証情報プラグイン
 * @param {Context} ctx
 * @param {(key: string, value: any) => void} inject
 */
const AuthPlugin: Plugin = (_ctx, inject) => {
  /**
   * Observable properties
   */
  const state = Vue.observable({
    accountNumber: '',
    password: '',
  } as State)

  function authenticated(seed: string, password: string): boolean {
    const rng = seedrandom(seed)
    const _pass = String(Math.round(rng() * 10000)).padStart(4, '0')
    if (_pass === password) state.password = _pass
    return _pass === password
  }

  /**
   * Injection
   */
  inject('auth', {
    get accountNumber() {
      return state.accountNumber
    },
    set accountNumber(accountNumber: string) {
      state.accountNumber = accountNumber
    },
    get password() {
      return state.password
    },
    authenticated,
  })
}
export default AuthPlugin

※ 実際の乱数生成処理はもう少しノイズを入れてるので、このまま動かしても同じパスワードは生成されません

このauthenticatedをEnterボタン押下時と、直アクセスを防ぐ目的でログイン後ページ内のvalidate()hookでも呼び出して認証処理としている。

⚠️注意
当然ですが、フロントエンドでパスワードの一致チェック等の認証処理を行ってはいけません。

Vue3のRCが外れて正式リリースとなったが、Reactivity API等を活用したVuex(ver 5)のリリースはまだ先の様なので暫く状態管理はこの手法に落ち着きそう。

攻撃方法の紹介

以上を踏まえ、解法の一つであるリバースブルートフォース攻撃の実施方法を紹介していく。
尚、当ゲームでは外部からブラウザ操作しやすいように主要な要素に対してid属性を付与している。

前提知識: JavaScript の場合

「システム構成」の節でも触れたが、Vue.jsの採用を後悔したのはここ。

システムがHTML＋PureJSの構成であれば、ブラウザの開発者コンソールから下記の様に実行して入力値を動的に与える事が可能。

const digit1 = document.getElementById('digit1')
digit1.value = "1"

これは一般的な方法だし、私も当初このやり方を想定していた。
しかしVue.jsの場合、inputイベントを検知してVueインスタンス内に保有するデータを更新する。
直接input要素のvalue値を書き換えてもイベントは発火せず、データは更新されない。
この挙動を想定しておらず、ユーザーに無駄なハードルを与えることとなってしまった。

ではどうするのか。
当ゲームには数値をカウントアップ/カウントダウンするボタンを実装している。

金融システムって誰得UI多いよな という遊び心で実装したボタンだが、Vue内のデータを書き換えるイベントに直結している。
このボタンをプログラムからクリックすることが出来れば口座番号入力の自動化が可能となる。

ここから先の解説は、既にUNLOCK成功された@yoneappさんが記事を書かれている為、そちらに任せることとする。
リバースブルートフォース攻撃を使ってUNLOCK BANKの口座に不正ログインして優勝する(Zenn)
（改めて解説記事の執筆ありがとうございます🙇‍♂️）

前提知識: Vue.js の場合

Vue.jsには vue-devtools というデバッグ用のブラウザ拡張が存在する。
これを使えばコンポーネント構成を覗きつつ、各種データの書き換えやイベント発火が可能となるが通常はProduction環境で開けない。
しかし、開発者ツールを使いこれをこじ開ける方法がある。

本番公開されているサイトで Vue devtools を使う裏技(Qiita)

厳密にはソースの難読化を施してるのため上記記事と全く同じではないが、ソースを検索すればdevtoolというキーワードは見つかるはず。
あとはその後ろにブレークポイントを張り、_0x1bd719.devtools = true を実行すれば開発者ツールを開けることが可能。

図の状態(Devtoolsでコンポーネントを選択した状態)だと、開発者コンソール上で$vm0というオブジェクトが使用出来る。これは選択したコンポーネントのVueインスタンスであり、コンポーネント内に存在するデータやメソッドが全て内包されている。
あとはそこからアタリを付けて、自動化プログラムを組めば良い。
実際には下記をイジれば入力操作の自動化が可能となる。

$vm0.accountNumbers // 口座番号(1桁ずつ格納した配列)
$vm0.password // パスワード
$vm0.enter() // Enterボタン押下時の処理を実行

⚠️注意
初めてこれ(Productionでdevtoolsが使えること)を知った方はセキュリティ面に不安を覚えるかもしれませんが、それはお門違いです。
フロントエンドで保持するデータはユーザーから自由に改ざんされる前提であるべきです。

前提知識: Nuxt.js の場合

Nuxt.jsで作られたアプリケーションはwindow直下に$nuxtというオブジェクトが作られる。
そこには全ての情報が含まれており、上記のようにDevtoolsを開かずとも開発者コンソールからデータの書き換えやメソッドの実行が可能。
しかし内包する情報量が膨大な為、開発者ではない第三者が操作したい対象を探すのは一苦労かもしれない。
ちなみに当ゲームでは下記が自動化に必要な対象となる。

window.$nuxt.$children[1].$children[0].$children[0].accountNumbers
window.$nuxt.$children[1].$children[0].$children[0].password
window.$nuxt.$children[1].$children[0].$children[0].enter()

その他の手法

Selenium や Puppeteer 等を用いたブラウザ操作の自動化があげられる。
今のところ、これらを使ってUNLOCKしたという報告は観測していない。ブラウザの開発者ツールが万能すぎる。

⚠️注意
悪意が無くともサーバーに高負荷をかける行為は法律により罰せられる可能性があります。
しかし、当ゲームで行う分には問題ありません。存分に攻撃してください。

更にネタバレ

もしproduction環境でログイン後のページを確認する必要が出た場合を考慮して、
- Account Number: 1145-1419
- Password: 1919

と入力したら開発コンソールに上記口座のパスワードが出力されるようになっている。
攻撃するのは面倒くさいけどログインしてみたい、という方はどうぞ。

確率について

数値4桁のパスワードというのは 0000 ~ 9999 の1万パターンしかない。
パスワードを固定にして、口座番号を総当たりした場合の確率は下記で求められる。

1 - ( 9999 / 10000 )^x
x=試行回数

(間違ってたらご指摘ください)
確率を表にするとこうなる。

試行回数	HITする確率
3回	0.03%未満
10回	約0.1%
100回	約1%
1,000回	約10%
10,000回	約63%
100,000回	約99%

つまり、口座番号8桁(1億パターン)全て試行せずとも、10万回程度で1口座はUNLOCKできてしまう。
下5桁総当たりすればいい計算で、実際にTwitterでUNLOCKされた方の反応も「思ったより早かった」という声が多かった。
当ゲームはパスワードを乱数によって生成しているが、これが本当の銀行口座の場合、パスワードの偏りが生じるはずなので更にUNLOCKは容易となるだろう。

おわり

ネタのつもりで作ったんですが思いのほか反響があって、解説記事を書いて頂いたり、難読化をデコードしてリバースエンジニアリングまでやって下さってる方もいて、個人開発冥利に尽きるなと思いました。
他にも「こんなやり方あるよ」という方がいましたらご連絡ください。

注釈

※1: JavaScriptにはシード値から乱数を生成する機能が備わっていない

週末の時間を使って「みんなのきょうしつ」をアップデートしました。

2020-06-07T19:47:07+09:00

promitsuです。

今週の土日の空いた時間を使って、先日リリースした「みんなのきょうしつ」というウェブサービスのアップデート作業を行いました。

http://class-room.fun/

このアプリは、リアルタイム同期な共同編集機能により、オンライン上の別々の場所やデバイスから、友達と一緒に好き勝手に教室（という名の座席表）を作成し、その画像をシェアできるサービスです。

開発の経緯などについては下記の記事を参照ください。

https://crieit.net/posts/620b85ee075fd93545b20ccfb92d3491

アップデート

先日のリリースは、複数人でリアルタイムに「教室」（座席表）を作成できるという目的のもとに、最低限の機能のみに絞った仕様になっていました。その後、友人などに使ってもらい、フィードバックをもらった内容について、以下のような機能追加や修正などを行いました。

※ 前提としてこのサービスはNuxtjs（Vuejs）とFirebaseを使って開発・運用されています。

主な内容

ステータスのタイプライター表示

黒板に表示される生徒のつぶやきをタイプライター風に１文字ずつ表示するようにしました。
普通に文字列を配列化して、一定間隔おきにv-modelの配列にpushする感じでJavascriptで実装しました。

教室ページのデザイン・レイアウト修正

VuejsもFirebase(firestore)もまともに使ったことがなかった３月ぐらいに一日間の突貫作業で作った時のままだったので、HTML/CSSの構造から、Vueコンポーネントの構成などもリファクタリングしました。

いいね機能

現状ユーザー認証がないので、SessionStorageに自分がいいねした教室の情報を保持し、多重いいねを防ぐようにしました。
実装にはvuex-persistedstateを使っています。
これ以外のデータの読み込みなどはvuexfireを使って、vuexのstoreとfirestoreをシームレスにつないでいるので、moduleとして分けてindex.jsから読み込む構成にしています。

```jsx
store/
  |
  +-- index.js
  |
  +-- like.js

```

store/index.js

import like from './like'
import localStorage from 'vuex-persistedstate'

...

export const plugins = [
  localStorage({
    key: 'like',
    paths: ['like'],
    storage: window.sessionStorage
  })
]

vuex-persistedstate
https://github.com/robinvdvleuten/vuex-persistedstate
vuex-persistedstate
https://github.com/posva/vuexfire

公開教室のトップページでのリスト表示

これがないと他にどんな教室があるかわからんし、アクセスもできないという指摘。ごもっともですね😓

座席削除

作成・編集ができるのに、削除できないとは何事か！？というご指摘。さーせん。

公開・非公開設定

トップページにリストが表示される様になったので、他の人にアクセスしてほしくない人は非公開設定にできるようにしました。秘密の言葉による簡易認証を入れようかとも思ったのですが、ユーザーから見た複雑度が増す気がしたので一旦ペンディングにしました。

教室背景変更機能

だだっ白い無味乾燥な背景が寂しかったので、教室の背景画像を変更できるようにしました。アップロード時の画像リサイズ・クロップなどはまだ実装できていないのでIssue積んどきました。

ドラッグ&ドロップ編集機能

vue-draggableを使って実装しました。（Vuejsは便利なコンポーネント・ライブラリが充実してるので、個人開発者にはとても嬉しい😭）
もちろん編集結果はリアルタイムに他のデバイスに反映されるようになっています。（挙動をもうちょっとかっこよくしたい😓）

動作ムービー

https://www.youtube.com/watch?v=2RCYmpFSae8

vue-draggable
https://github.com/SortableJS/Vue.Draggable

その他の修正（レイアウト変更、バグフィックス等）

背面黒板を廃止して、全面の黒板につぶやきを表示するようにしたり、その他微妙なデザイン・レイアウト調整、及びバグ修正を行いました。

まだまだバグも多いし、実装したい機能や修正したいUX、インタラクションなどもたくさんありますが、地道に少しずつ良いプロダクトにしていこうと思います。

ではまた。

自分の理想の教室を、友達とリアルタイムで一緒に作れるウェブサービス「みんなのきょうしつ」をリリースしました。

2020-06-05T22:29:21+09:00

さっき投稿した記事で、4日前に「musico」というウェブアプリをリリースしたことについて書きましたが、

好きな楽曲について語り合うウェブサービス「musico」を作ってみました。
https://crieit.net/posts/musico
musico | find track you like and talk about it

実は昨日、もう一つウェブアプリをリリースしましたｗ
その名も「みんなのきょうしつ」。

みんなのきょうしつ

開発の動機

このアプリは、もともと３月のコロナ禍による一斉休校をきっかけに、いきなり会えなくなった友達とオンラインで再開して貰い、小中高生のみなさんに、社会の混乱からのストレスを一時的にでも忘れてもらえたら良いなという思いで、二日間ぐらいでガッと基本的な機能を作って公開しようとしていたものでした。ですが、その後なかなか着手する時間が取れず、限定的な公開にとどめて、ほぼ動いていない状態が続いていました。

開発頓挫、からの突貫リリースへ

そんななか、先日の「musico」の開発と公開をきっかけに、テンションとモチベーションがひさびさに爆上がりしたので、この機を逃す手はないと思い、一念発起して昨日・一昨日をかけて最低限の機能を実装し、公開していみました。

どんなアプリ？

このアプリでは、教室を模した座席表的なものに、自分の好きな人やモノの名前と写真を登録していき、自分の理想の教室が作れます。

さらに、URLを共有することで、別の場所にいる友だちとオンラインでリアルタイムで共同編集することが出来ます。（動画は開発中に撮影したものです）

動作ムービー

また、「記念撮影」機能で作った教室の画像を作成・ダウンロードしたり、各種SNSに手軽にシェアすることが出来ます。（写真は友人が作った「あつまれどうぶつの森」のキャラクターが集まる教室です）

https://class-room.fun/classrooms/8jVBr7suU0In1vbE3Ze8

地味にインスタ映えしたりしますｗ

技術的なこと

技術スタック的には「musico」と同じくFirebase+Vuejs（Nuxtjs）という、構成です。「musico」はUniversalモード（SSR）で作りましたが、こっちはSPAとして開発し、OGP取得部分のみCloud Functionsで作りました。

しかし、Firebaseめっちゃ便利ですね〜。

こっちもあんまり凝ったことはしていないのですが、OGPの動的生成あたりとか、記念写真機能あたりについて、あとで技術的なことを書こうかなと思っています。

それではまた。

@nuxt/contentで画像を最適化する

2020-06-01T21:52:34+09:00

先日導入した@nuxt/content で画像をどうやって最適化するか模索して、nuxt-optimized-images が良さそうだったので紹介します。

今回使用した主な環境

@aceforth/nuxt-optimized-images: 1.0.1
@nuxt/content: 1.2.0
nuxt: 2.12.2

nuxt-optimized-images のインストール

こちらは公式ドキュメントに従って、インストールしました。

今回は png 画像だけできれば良かったので、最適化に使うパッケージは 1 つだけにしています。

yarn add -D @aceforth/nuxt-optimized-images imagemin-pngquant

もし他の種類も最適化したい場合は、追加でインストールします。

詳細は公式ドキュメントで確認してください。

nuxt の設定に追加する

次に nuxt.config.ts にモジュールを追加します。

{
  buildModules: [
    '@aceforth/nuxt-optimized-images',
  ],
  optimizedImages: {
    // モジュールのオプション
    optimizeImages: true
  }
}

マークダウンで画像を表示する

一般的なマークダウン記法であれば![画像](/images/sample.png)のようにすれば表示することができます。

しかし、今回のパッケージで最適化するには別の方法で行います。

components に画像読み込み用のコンポーネントを追加

props で使用する画像ファイル名を指定するようにしました。

このように、require('画像パス')とすることで画像の最適化が自動的に行われるようになります。

マークダウンを呼び出すコンポーネントを修正

マークダウンを処理するコンポーネントに先ほど作成した、ImageLoader.vue を追加しておきます。

マークダウンファイルで使う

---
title: '画像を表示する`
---

## ここに画像を表示します

これでnuxt generateすることでハッシュ化された、ファイルが出力されるようになります。

画像のリサイズ

画像のリサイズはさらにパッケージの追加が必要です。

yarn add -D responsive-loader sharp

sharp は jimp でもいいようですが、jimp は遅いみたいです。

ImageLoader.vue を変更

リサイズのアクションは require するときに、サイズを決めなくてはいけません。

size を動的にしたくて props を追加してやってみたのですが、うまくいかなかったので決め打ちで設定することにしました。

以下のように ImageLoader.vue を変更します。

マークダウンで画像のサイズを指定する

---
title: '画像を表示する`
---

## ここに画像を表示します

これで任意のサイズ、今回はwidth: 400pxにリサイズされた画像を出力できるようになりました。

終わりに

マークダウンに vue コンポーネントが混じってしまうのが気持ち悪いですが、これで画像も自由なサイズで表示できました。

次回はレスポンシブの表示にも対応していきたいです。

@nuxt/contentでブログを構築してみました

2020-05-31T20:37:48+09:00

これまで nuxt と microCMS を組み合わせて JAMStack なブログを Netlify で公開していましたが、コンテンツ自体も一緒に管理できたほうが効率的かつ外部サービスに依存したくないと考え、作り直しのため markdown-it を採用つもりでした。

しかし@nuxt/content が公開されたことを知り、早速導入をしてみました。

@nuxt/content の機能について

ホットリロード
Markdown の Vue コンポーネント
全文検索
nuxt generateで静的サイトの生成
MongoDB のような QueryBuilder
PrismJS によるマークダウンファイルのコードブロックをスタイリングする
目次の生成
Markdown、CSV、YAML、JSON を処理する
hooks による拡張
types による Typescript のサポート (v1.0.1)

インストール時の環境

MacOS Catalina 10.15.4
yarn 1.22.4
NuxtJS 2.12.2 (TypeScript)
@nuxt/content v1.2.0

インストール

まずはパッケージをインストールします。

yarn add @nuxt/content

次に nuxt.config.ts に以下を追加します。

# nuxt.config.ts
{
  modules: [
      '@nuxt/content',
  ],
  content: {
    // デフォルト以外の設定
  }
}

TypeScript の対応

tsconfig.jsonに以下を追加します。

{
  "compilerOptions": {
    "types": ["@nuxt/types", "@nuxt/content"]
  }
}

これを追加することで Context を拡張して、後に出てくる$contentの参照が行われるようにします。

コンテンツの管理

コンテンツの管理はデフォルトでは~/content以下で行います。

それぞれのファイルはサブディレクトリでも管理することができます。

今回は~/content/articles/sample.mdとして作成してみます。

---
title: '日本語タイトルを使えます'
date: 2020-05-23
tags: [Markdown, NuxtJS]
---

# 記事タイトル

コンテンツの内容

@nuxt/contentで slug は、ファイル名の拡張子を除く部分となっています。

YAML Front Matte の機能として記事のメタデータを管理することができ、tagsのように配列で記述できます。

これらのメタデータはクエリを使って絞り込みに利用できます。

注意点としてtitleをtitle: 1のように文字列以外を入力すると、文字列の関数がないことでエラーが発生します。この場合はシングルクォートで括るようにすれば回避できます。

コンテンツの表示

asyncDataを使ってサーバーサイドで記事を取得します。

$content('articles/sample')とすると、content/articles/sampleを記事として取得します。

複数の記事をまとめて取得するには$content('articles')として、content/articles以下にある全ての記事を配列で取得することができます。

サーバーサイドで取得後、page変数には記事ファイルのメタデータとコンテンツが読み込まれ、
で HTML にマークアップされた状態で表示されます。

コードブロックのテーマを変更する

@nuxt/contentでコードブロックのハイライトはprismjsで行われているので、prism-themesをインストールすれば好きなテーマへ変更することができます。

yarn add prism-themes

nuxt.config.ts でテーマの変更を設定します。

# nuxt.config.ts
{
  modules: [
      '@nuxt/content',
  ],
  content: {
    markdown: {
      prism: {
        // ここに使いたいcssのテーマを設定します
        theme: 'prism-themes/themes/prism-vsc-dark-plus.css'
      }
    }
  }
}

タグの検索をする

メタデータが配列の場合は、単純な where では取得できません。

@nuxt/contentのクエリはLokiJSを使っているので、公式マニュアルを参照して$containsを使えばいいことがわかりました。

具体的には以下の方法で、特定のタグを持つ記事を取得することができます。

await $content('articles')
  .where({ tags: { $contains: 'Markdown' } })
  .fetch()

サブディレクトリの記事も取得するには

v1.3.0で実装されました。TypeScriptを使っている場合は$contentの引数に問題があるので、v1.3.1を使いましょう。

これでフラットな記事管理から解放されます。

const articles = $content('articles', { deep: true })

終わりに

開発速度が速く、どんどん機能追加がされていて、シンプルで使いやすい印象です。

実際に導入までの作業も簡単で、公式ドキュメントを見ながら行うことができました。

目的としていた記事の一元管理を短時間で構築することができました。今後ますます注目されそうな気がします。

Nuxt+Firebase Cloud Messaging(FCM)でWebプッシュ通知を送る

2020-05-24T17:18:35+09:00

WebでもFCMが使えるようになったので、試してみたときの備忘録。
これでSafari以外には、通知が送れるようになる(´ω｀)

使い方

構成は、@nuxtjs/pwaでPWA化している感じ。

コンソール側

Settingsでウェブプッシュ証明書を作成して、鍵ペアを取得する。

これを、PUBLIC_VAPID_KEYという環境変数に設定しておく。

クライアント側

firebaseの初期化

~/plugins/firebase.tsというファイルを用意し、firebaseを初期化

// ~/plugins/firebase.ts
import * as firebase from "firebase/app";
import "firebase/auth";
import "firebase/firestore";
import "firebase/messaging";


if (!firebase.apps.length) {
  // まずは、firebaseの初期化
  firebase.initializeApp({
    apiKey: process.env.API_KEY,
    authDomain: process.env.AUTH_DOMAIN,
    databaseURL: process.env.DATABASE_URL,
    projectId: process.env.PROJECT_ID,
    storageBucket: process.env.STORAGE_BUCKET,
    messagingSenderId: process.env.MESSAGING_SENDER_ID,
    appId: process.env.APP_ID,
    measurementId: process.env.MEASUREMENT_ID
  });

  // Push通知をサポートしているかをチェック
  // サポートしていないと、firebase.messaging()を呼んだときに例外が発生
  const isSupported = firebase.messaging.isSupported();

  // コンソールで発行した、ウェブプッシュ証明書の鍵ペアを取得
  const publicVapidKey = process.env.PUBLIC_VAPID_KEY;
  if (!!publicVapidKey && process.client && !!isSupported) {
    // FCMの初期化。鍵ペアを設定する
    const messaging = firebase.messaging();
    messaging.usePublicVapidKey(publicVapidKey);

    // @nuxtjs/pwaが生成するsw.jsと、
    // 後で作成するFCM受信処理用のsw-firebase-messaging.jsを統合するための設定
    navigator.serviceWorker
      .register("/sw.js")
      .then(registration => messaging.useServiceWorker(registration))
      .catch(err => console.error(err));
  }
}

export default firebase;

トークンの取得

Push通知を送る際の宛先として、トークンを指定しないといけないので取得。
トークンは端末ごとに取得する必要があるので、注意が必要。
※PCとスマホだとそれぞれトークンが違う

import firebase from "~/plugins/firebase";

// トークンの取得
public async getToken(user: User) {
  const isSupported = firebase.messaging.isSupported();
  if (!isSupported) return;
  const token = await firebase.messaging().getToken();

  // firestoreにトークンを保存しておく処理(中身は略)
  await saveToken(user, token);
}

Firestoreなどへユーザごとにトークンを保存しておく。

firebase.messaging().getToken();を呼んだ際に、
通知の設定が「確認」だと、許可を求めるダイアログが表示される。

これが許可されていないと、トークンも取得できない。

メッセージを受け取ったときの処理

メッセージを受信したときに受け取る関数は2つあり、

フォアグラウンド(画面を見ている時) ... onMessage
バックグラウンド(画面を見ていない時) ... setBackgroundMessageHandler

・【参考】JavaScript クライアントでメッセージを受信する | Firebase

今回はバックグラウンドのときに通知を送りたいので、
setBackgroundMessageHandlerを設定していく。

こんな感じ。

ドキュメントを見ると、『firebase-messaging-sw.jsというファイル名で作成』と書かれているけど、
その名前にすると、自動で読み込まれてしまう。。

開発用と本番用で切り替えたいときなどもあるので、@nuxtjs/pwaが生成するsw.jsと統合できるように、
sw-firebase-messaging.jsという名前でファイルを作成しておく。

ファイル名を変更したので、上で書いている「firebaseの初期化」の部分で、
messaging.useServiceWorker(registration)を呼んでいる形。

// ~/static/sw-firebase-messaging.js
importScripts("https://www.gstatic.com/firebasejs/7.14.2/firebase-app.js");
importScripts("https://www.gstatic.com/firebasejs/7.14.2/firebase-messaging.js");

// Firebaseの初期化
firebase.initializeApp({
  apiKey: "...",
  authDomain: "...",
  databaseURL: "...",
  projectId: "...",
  storageBucket: "...",
  messagingSenderId: "...",
  appId: "...",
  measurementId: "...",
});

// [START background_handler]
const isSupported = firebase.messaging.isSupported();
if (!!isSupported) {
  const messaging = firebase.messaging();
  // バックグラウンド時の処理
  messaging.setBackgroundMessageHandler(function(payload) {
  　// 受け取ったFCMの内容を取得
    const notificationTitle = payload.notification.title;
    const notificationOptions = {
      body: payload.notification.body,
      icon: payload.notification.icon,
    };

    // 通知を作成する
    return self.registration.showNotification(notificationTitle, notificationOptions);
  });
}
// [END background_handler]

nuxt.config.tsでPWA関連の設定をする

作成したsw-firebase-messaging.jsを取り込む設定と、
@nuxtjs/pwaが生成するmanifest.jsonに、gcm_sender_idを追加する設定を追加

import { Configuration } from "@nuxt/types";

const config: Configuration = {
  // 略
  modules: [
    "@nuxtjs/pwa",
  ],

  workbox: {
    // sw-firebase-messaging.jsをimportするように追加
    importScripts: [
      "sw-firebase-messaging.js"
    ]
  },

  pwa: {
    manifest: {
      // manifest.jsonにgcm_sender_idを追加
      gcm_sender_id: process.env.MESSAGING_SENDER_ID || ""
    }
  },
};

export default config;

これでクライアント側はOK！

サーバ側: メッセージを送信する

メッセージの送信は、firebase-adminでできる。
・アプリサーバーからの送信リクエストを作成する | Firebase

firestoreを利用しているので、Cloud Functionsのfirestoreトリガーを使い、
ドキュメントが追加されたら通知するようにしている例。

import * as functions from "firebase-functions";
import admin from "../common/firebaseAdmin"; // 初期化済みのfirebase-admin

export default functions
  .firestore.document("ドキュメントのパス")
  .onCreate(async (snap, context) => {
    // getTokenで保存しておいたトークンを取得(中身は略)
    const token = getToken();

    // 通知の送信
    const title = "通知するタイトル";
    const body = "通知する本文";
    const icon = "通知で表示するアイコン画像のURL"
    const link = "通知をタップしたときに開くURL"
    await admin.messaging().send({
        // 送信先の端末のトークン
        token: token,
        // 通知する内容
        notification: {
          title: title,
          body: body
        },
        // Web Push向けの通知内容
        webpush: {
          notification: {
            icon: icon
          },
          fcmOptions: {
            link: link
          }
        }
    });
  });

送信はこれだけ！

ほかの小ネタ

トークンを削除する

firebase.messaging().deleteToken();でトークンを無効化できる。

// トークンの削除
public async deleteToken(user: User) {
  const isSupported = firebase.messaging.isSupported();
  if (isSupported) {
    const token = await firebase.messaging().getToken();
    await firebase.messaging().deleteToken(token);
  }
}

フォアグラウンドで通知を受け取ったときになにかする

onMessageを使うと、通知を受け取ったときに呼び出してくれる。

firebase.messaging().onMessage(async (payload) => {
  // 受け取ったときの処理
});

トークンが変更されたときになにかする

onTokenRefreshを使うと、トークンが更新されたときに呼び出してくれる。
新しいトークンは再度getToken()を呼ばないといけない。

firebase.messaging().onTokenRefresh(async () => {
  // トークンが更新されたときの処理
});

通知の許可状態を確認する

通知の状態は、Notification.permissionで確認できるらしい。
・Notification.permission - Web API | MDN

if (Notification.permission === "default") {
  // 確認(デフォルト)
} else if (Notification.permission === "granted") {
  // 許可
} else if (Notification.permission === "denied") {
  // 拒否
}

以上!!

【PR】これをつかって、こんなのつくりました！

こんな通知を受け取れます！

１週間でWebサービスを作るイベント web1weekへの投稿作品です！
よかったら、遊んでみてください(´ω｀)

■エアで投げ銭できるWebサービス「エア銭」
URL: https://air-money.netlify.app/

参考にしたサイトさま

Canvasのライブラリ「Konva.js」でOGP生成(Nuxtアプリ)

2020-05-06T15:52:28+09:00

Nuxt.jsとFirebaseで作っていたWebサービスを7月末にリリースして、はや10ヶ月。。
登録総額1億円を突破したので、記念企画として積読レビュー機能をリリースしました!!

そこでKonva.jsというライブラリを使ってOGP画像を生成したので、
その時に調べたことをまとめてみました。

積読・読書前でも書ける『積読レビュー』

読書のレビューというと、読書後の感想を書くものですが、
積ん読が多いとなかなか書く機会がないです。。

「感想は読書後だけではないのでは？」
ということで、読書前でも書けるレビューを2つ用意してみました。

妄想で書く『妄想レビュー』

まだ読んでないけど、本の表紙や帯の印象から妄想で書いてみる『妄想レビュー』

「中身じゃなく外観だけで、読書後のレビューを書いてみるとどうだろう。。？」
というネタ的なレビューです。

いかに読んでる醸し出せるかをチャレンジしてみるとおもしろいかも(´ω｀)

他の使い方としては、読む前に書いておいて、読んだ後との感想を比較してみるのもたのしいかも？
読書前後で感想が同じになっても違っていても、新たな発見があるかもです。

きっかけを書く『きっかけレビュー』

買ったときのきっかけや意気込み・ワクワク感を書いてみる『きっかけレビュー』

「『なぜ買うのか、どうして買いたいのか』という気持ちを残しておくのもどうだろう。。？」
と思いつきつくってみました。

買ったときの気持ちも大事で、
* 技術書やビジネス書なら「こうなりたい！ここを強くしたい！」
* 小説やマンガなら「ひさびさの新刊！たのしみ！」
という思いがあるはず・・

それを記録として残しておくと、いつか見返したときにたのしいかもしれません。

なぜKonva.js？

この企画では、本を選んで、レビューを書いていくのですが、
本の表紙など画像を埋め込む必要があります。

以前、別のサービスで、SVGでOGP用の画像を生成してみたのですが、端末によってはうまくいかなかったりと、画像を埋め込むのがかなり大変でした。。

なので、SVGではなく、Canvasで試してみようと調べたところ、
Konva.jsとFabric.jsが見つけ、
文字の折返しなどのガイドがあったKonva.jsを選んでみました。

Konvaで画像生成

ここからが本題。やっと本題。。

準備

インストール

$ npm install vue-konva konva --save

今回は、Nuxt/Vueで使うので、KonvaのVueライブラリ(vue-konva)もインストール

プラグインの作成

vue-konvaを使えるようプラグインを作成。

// ~/plugins/vue-konva.ts
import Vue from "vue";
import VueKonva from "vue-konva";

Vue.use(VueKonva);

そして、作ったプラグインをnuxt.config.tsに追加。

// nuxt.config.js
import { Configuration } from "@nuxt/types";

const config: Configuration = {
  mode: "spa",
  // 略

  plugins: [
    { src: "~/plugins/vue-konva", ssr: false },
    // 略
  ],

  // 略
};

これで準備はOK

KonvaでCanvasを描いてみる

画像を表示する(v-image)

まずは、フレームとなる以下の背景画像を表示してみます。

こんな感じ。

基本的な構成

基本的な構成は、こんな感じで、
v-stage > v-layer > その他諸々
で配置していく。

必ずrootがv-stageで、その直下がv-layer。
v-layerはいくつも作れるけど、3〜4までがよいっぽい。(waringがでた)

位置やサイズ、表示する画像は:configを介して、Kanva.js自体の設定値を付与していく。

どんな設定値があるかは、ApiDocを見ていく感じで、
Imageだとここ(Class: Image)をみる

チュートリアルもあるので、それを見つつ、
具体的な設定値はApiDoc参照という流れで進めた。

画像の表示には読み込みが必要

画像の表示は少しめんどくさくて、

HTMLImageElementをつくって
HTMLImageElementで画像をロードして
ロード後のHTMLImageElementをconfigに設定

という流れ。。

それをしているのがこのあたり。
画像読み込みは何度も使うけど、Promiseじゃないので、
ロードが終わったらHTMLImageElementを返す処理を共通化

async mounted() {
  // マウントされたら、背景画像を読み込んで設定する
  this.setupBg().then();
}

// 背景画像の設定
private async setupBg() {
  const image = await this.getImage("/img/review_paple.png");
  this.configBg.image = image;
}

// 共通処理: 画像の読み込み
private async getImage(src: string): Promise {
  return new Promise((resolve, reject) => {
    const image = new window.Image();
    image.onload = () => resolve(image);
    image.src = src;
  });
}

これでできるのがこんな感じ。

でかい。。
CanvasのサイズをOGP画像のサイズ(1200x630)にしているもんね。。

画像を画面サイズにあわせる

ほんとはこんな感じにしたい。。

ので、Windowサイズの変更を検知して、CSSのscaleで調整してみる。

こんな感じ。

これでOK。Konva.jsの話に戻る

画像を加工する(サイズ変更)

次は書影を読み込んで、配置する部分。
書影は本ごとにサイズが違うので、加工が必要。。

こんな感じ。切り取りは、v-imageのcropを指定すればOK。

ここで若干ハマった。。

【ハマり1】cropとscaleを同時に指定するとうまくいかない。。

サイズを調整しようと、いろいろしていたときに、
スケールを変化させるscaleと切り取り処理のcropを同時に指定してみたけど、
あまりうまくいかず、cropのみで対応した。。

【ハマり2】computedだとうまくいかない。。

最初は、以下のような感じで、computedにしてたけど、
cropなど、配下のobjectが変わっても変更が反映されなかったので、
dataのconfigBookImgを用意する形にしてみた。

get configBookImg() {
  // 画像の読み込み
  const imageBook = await this.getImage("/img/notfound_paple.png");

  // v-imageのconfig
  const scale = BOOK_IMAGE_WIDTH / imageBook.width;
  return {
    image: imageBook,
    x: 48,  // 左上からの位置(x)
    y: 112, // 左上からの位置(y)
    width: BOOK_IMAGE_WIDTH,   // 画像のサイズ(横)
    height: BOOK_IMAGE_HEIGHT, // 画像のサイズ(縦)
    crop: {  // 切り取り処理
      x: 0,  // 切り取り位置(x)
      y: 0,　// 切り取り位置(y)
      width: imageBook.width,           // 切り取りサイズ(横)
      height: BOOK_IMAGE_HEIGHT / scale // 切り取りサイズ(縦)
    }
  };
}

画像を加工する(丸く切り取る)

次はこれ。ユーザのアイコン画像。

もともとは、こんな四角い画像だけど、アイコンっぽく丸く切り取りたい。

チュートリアルを見てみると、v-groupを使うとできるっぽい。

v-groupのclipFuncを使うと、Canvaを操作できるようで、
CanvasRenderingContext2Dのarcを使って、丸く切り取り。

注意点は、原点がCanvas(v-stage)の左上であること。
画像の左上が原点だと思っていたので、全然切り取られなかった。。

1行の文字を表示する(省略あり)

画像はここまで。次は文字。本のタイトルを表示したい。

文字を表示するには、v-textを使えばOK

CSSのtext-overflowと同じ感じで、折返しをnoneにすれば、省略記号の表示もできる。

複数行の文字を表示する(省略不可)

次はレビューの文字を表示。

同じくv-textを使う感じ。
wrapを指定しなければ、そのまま複数行に。

改行文字を入れれば改行もしてくれて、widthを指定すれば折返しも自動。

ただ、残念ながら、-webkit-line-clampみたいに複数行の省略はないみたい。。

Canvasを画像にエクスポート

最後に作った画像をエクスポート!!

こんな感じ。Konvaでエクスポートするときには、v-stageから取得する。
DataURL以外にJSONとかでもエクスポートできるので、保存したりもOK

HTML5 Canvas Stage Data URL Tutorial | Konva - JavaScript 2d canvas library

開発しているサービスでは、FirebaseのCloud Storageに保存しているので、DataURL形式でOK。

ハマリポイントは、外部URLの画像を使っているとき。。エクスポートに失敗する。。
Cavans自体の仕様で外部URLの画像がある場合、汚染されたとみなされエラーになるとのこと。。

対処法は以下に書かれている感じで、CORS対応をすればOK
・Resolving "Tainted canvases may not be exported" with Konva | Konva - JavaScript 2d canvas library

おわり

SVGでも外部URLは問題があったけど、Konva.jsでも。。
でも、サクサクできたのと、ドラッグで位置を変えれるみたいなので、いろいろできそう(´ω｀)

積ん読レビューはできたての機能なので、ぜひぜひさわってみてくださいヽ(=´▽`=)ﾉ
■どっちでレビューする？妄想レビュ・きっかけレビュー

Vercel（元ZeitのNow）でNuxt.jsアプリをデプロイ 2020年最新版

2020-04-27T23:20:13+09:00

now というコマンドを使わないVercel（元ZeitのNow）へのデプロイ方法を解説します。今回の手順ではNuxt.jsを使います。

背景

now というコマンドで簡単にデプロイできるということで一世を風靡したZeitのNowですが、先日Vercelというサービス名に変更されました。その前からちょこちょこ新たな機能をリリースしており、nowというコマンドを使わなくてもGitHub連携によってpushするだけでデプロイできるようになったり、環境変数も独自のsecretsという設定を使わず、管理画面で設定できるようになったりと、かなり手軽になってきているので実際にそれらを使ったデプロイ方法を説明します。

Nuxt.jsアプリを作成

まずはNuxt.jsのアプリケーションを作成します。

npx create-nuxt-app nuxt-vercel-sample
# or
yarn create nuxt-app nuxt-vercel-sample

いくつか設定項目が現れるため下記のように設定しました。適当です。

✨  Generating Nuxt.js project in nuxt-vercel-sample
? Project name nuxt-vercel-sample
? Project description My astonishing Nuxt.js project
? Author name dala00
? Choose programming language TypeScript
? Choose the package manager Yarn
? Choose UI framework Buefy
? Choose custom server framework None (Recommended)
? Choose the runtime for TypeScript Default
? Choose Nuxt.js modules Axios, Progressive Web App (PWA) Support, DotEnv
? Choose linting tools (Press  to select,  to toggle all,  to invert selection)
? Choose test framework Jest
? Choose rendering mode Universal (SSR)
? Choose development tools (Press  to select,  to toggle all,  to invert selection)

あとは出力されるメッセージの通り、下記のようにして実行できます。

cd nuxt-vercel-sample yarn dev

見た目は利用しているUIフレームワークによって変わります。

GitHubへ登録

今回はnowコマンドは一切使わずGitHub連携でデプロイを行います。ですのでまずはいま作成したアプリケーションをGitHubに登録します。その前にとりあえずcommitしておきます。git initだけは勝手にやってくれています。

git add . git commit -m "Initial commit"

VSCode等でやってもよいでしょう。

まずは適当にGitHubでリポジトリを作成します。

表示されているとおりに設定してpushします（SSHキーの登録などは事前に行っておいてください）。

Vercelにデプロイする

続いてVercel側に今pushしたものをデプロイします。……がその前に、Nuxt.jsをVercelで使うための @nuxtjs/now-builder というものがNuxt.js公式から用意されていますので、それをnow.jsonに設定します。

{ "version": 2, "builds": [ { "src": "nuxt.config.js", "use": "@nuxtjs/now-builder", "config": {} } ] }

これをcommit & pushしておきましょう。

続いてVercelのダッシュボードにImport Projectボタンがあるためそちらをクリックします。

From Git Repositoryを選択します。

Importボタンをクリックします。

プロジェクトの選択画面が開きますので適宜選択します。僕の場合は個別に権限を与えたものだけ選択できるようにしているため、同様の場合は下記のようにEdit your repository access settings on GitHub.を実行してGitHub側で権限を与えてから選択します。

選択できたらSelectしてImportを実行です。プロジェクト名の入力画面が開くので入力してContinueします。

引き続きROOT DIRECTORYやBUILD COMMANDの設定画面なども開きますが、Nuxt.jsアプリケーションの場合は一切何も設定しなくてもデプロイが可能のためひたすらContinueして最後のDeployボタンを押せば完了です（さきほどのnow.jsonの設定が抜けているとビルドに失敗します）。

Buildingステータスになっているのでしばし待ちます。

Readyとなったらデプロイ完了です。

URLがいくつかありますが、どれでも閲覧できます。DEPLOYMENTというURLは一意なデプロイURLです。DOMAINSはそのプロジェクトのURLで、いつも使えるURLです。どれでも良いので開くとローカルで実行したアプリケーションと同じ画面が表示されます。これでデプロイは完了です！

ちなみに下記は今回作ったサンプルです。

https://nuxt-vercel-sample.now.sh/
https://github.com/dala00/nuxt-vercel-sample

更新したい時

プログラムを調整して更新したいときは、GitHubにpushするだけで勝手にデプロイされます。

ちなみに先ほどの画面はProduction Deploymentで、masterブランチのものがProductionとしてデプロイされます。別のブランチを作ってそちらでpushしておくと、その製品版のURLは利用されず、別ブランチ用のURLが作成されるため安全にステージング環境として利用することが可能です。下記のようにDeploymentsメニューで全てのブランチのデプロイを確認できます。

それをクリックすると下記のようにテスト用のURLを利用することが出来ます。

プルリクエストを作るとブランチのマージもGitHub上だけで行えます。

ちなみにGitHub連携しているとこんな感じでnowちゃんが甲斐甲斐しくコメントをしてくれます（そういやこちらはまだ名前が変わってないですね）。これで一人ぼっちで友達がいなくても寂しくありません。

環境変数を設定する

Nowではずっとsecretsという機能を利用してプライベートな値を利用できるようにしていましたが、最近Vercelになったのと同じくらいの時期に管理画面で直接環境変数を設定できるようになりました。下記のように設定ができます。

ちなみにProductionは本番、つまり独自ドメインを設定していればそちらのURLや、プロジェクト名.now.sh というシンプルなエイリアスのものなどです。Previewは別のブランチでpushした時に作成されるURLです。DevelopmentはローカルPCにて、now devを実行した時のものです。

設定後は見えなくなります。

Nuxt.js上では、nuxt.config.jsにて例えば下記のように設定します。ローカルでの環境変数は直接指定するか、dotenv等を利用しましょう。

// require('dotenv').config() export default { mode: "universal", env: { TEST_TEXT: process.env.TEST_TEXT },

index.vueにてscript側に値を取得処理を作成し、

methods: { getText() { return process.env.TEST_TEXT } }

表示側でそれを使います。

{{ getText() }}

問題なければ下記のように表示されます。

nowコマンドは？

こちらも使えます。今回のパターンだと不要でしたが、複数のbuildersを使う場合などはローカルで now dev コマンドで開発ができます。この場合は事前に now コマンドを実行してVercel側のプロジェクトと紐付けておく必要があります。

まとめ

ということで2020年に入り、Vercelは進化を遂げ続けており非常に使いやすくなりました。GitHubや自動デプロイに慣れている方はGitHub連携で、GitHubを使ったことがなくてちょっと怖い、という方は今まで通りnowコマンドを使って、柔軟に利用できます。非常に便利ですので使い倒していきましょう。

敗者のweb1week

2020-03-22T17:10:52+09:00

先週行われた web1week。
初開催にも関わらず50を超えるサービスが登場し、大盛況のうちに幕を閉じた。

経験者ならば理解を得られると思うが、個人開発という舞台には魔物が棲んでいる。
着手時点で思い描いた予定などペロリと喰われてしまう。

不意に削られる作業時間。
理想と妥協の狭間で揺れる要件。
技術仕様の落とし穴。
サービスの意義を自問自答し続ける日々。
リリース直後に訪れる無慈悲な障害。

これらを乗り越えローンチされた個人サービスの奥には、語られることのない物語が潜んでいる。
そんなサービスが50以上も並ぶweb1weekのボードは圧巻で、たとえHello Worldの様なサービスでも私の心を踊らせてくれる。
とても甲乙など付けられない。

しかし「敗者」は存在する。
「web1week楽しみ！」と方方で意気込みを語り、「やってみませんか？」と様々な人を勧誘した挙句、あろうことか最小限の機能でさえ1weekに間に合わず、最終的には要件すら満たせなかった。
紛うことなき「敗者」だ。
個人開発界隈ではよく「リリースすることが大事」と言われている。その通りだ。リリースさえすれば勝ちなのだ。

これは、そんな勝負に敗北を喫した男の記録である。

立案

月曜の午前0時、お題「Home」が発表された。
こじつけでも何でも「Home」を絡ませたWebサービスならクリアとのこと。
初学者でも参加し易いうえに、CGMやIoTを絡めたサービスも構想でき、かつ疫病の脅威に怯える時勢に寄り添った素晴らしいお題だと思った。
それと同時に頭を抱えた。
１週間で作り上げるとなると出来る事は限られている。ピンと来るアイディアが何も思い浮かばない。

「自分が実装してみたい機能」というアプローチで考えてみる。
我が家にはGoogle Nest Hubというガジェットが存在する。ディスプレイ付きスマートスピーカーというイロモノだ。
スマート家電のような贅沢品は存在しない我が家だが、昨年の私の誕生日に妻から贈ってもらっていた。しかし、動画を見るにはタブレットやテレビに転送で事足りるし、BGMをかける風習も無い。なかなか使う場面が訪れなかった。
これを何とか活用できないか。

玄関や冷蔵庫に貼ってるホワイトボード。これをNest Hubで代用できないかと考えた。
「いってらっしゃい」「おやつにわらび餅を冷蔵庫に入れてます」の様な、家族間のメッセージは手書きの方が嬉しかったりする。
しかし、ホワイトボードのデメリットはホワイトボードの場所へ行かないと書けないことだ。
仕事中に「冷蔵庫にわらび餅入れてるの忘れてた！」となった場合、LINEに頼るしかない。
スマホから手書きでメッセージを書き、玄関やリビングに置かれたNest Hubに表示されたらエモいのでは。

Nest Hubで表示するWebアプリについて調べてみる。
どうやらInteractive Canvasというフレームワークで実装するらしい。
しかし、基本的にVUI（音声ユーザーインターフェース）が前提となる作りで、ストアへ並べるにはGoogleの承認も必要となる。
今回の要件・納期では厳しい、、

方針を変える。
Nest HubにはGoogle Photosにあるアルバムを選択して、フォトフレームとして表示する機能がある。
Nest Hub側でメッセージ画像を入れたアルバムを選択して、Webサービス側ではそのメッセージ画像を更新すれば良いのはないだろうか。
調べてみた。さすがGoogle様。ちゃんとGoogle PhotosのAPIも存在する。

これでいこう。

WebサービスにGoogleアカウントでログイン

手書きUIのCanvasでメッセージを書く。

Nest Hub表示用のアルバムをGoogle Photosに作成

Canvasを画像化して3.のアルバムにアップロード

既にメッセージ画像が存在する場合は削除（アルバム内の画像は1枚のみとする）

Nest Hubで表示

OAuth2認証をクライアントで完結できれば、DBすら不要。
この程度なら1週間でいける。

市場調査もしてみた。

スマートディスプレイ（ディスプレイ付きスマートスピーカー）がどれぐらい普及してるのか気になるのでアンケお願いします！持ってるか持ってないか。押し入れで眠っててもOKです！
— きんみ | ツイッター大喜利サイト🎍ついぎり🎍作りました🙄 (@_kinmi) March 9, 2020

うん、Nest Hub専用サービスは良い感じのスキマ産業のようだ（強がり）

Nuxt.jsでプロジェクトを作成して今日の作業は終了。
この時点で月曜の夜。順調だ。

裏の目的

常々思っていたのが「もっと手軽に画像アップロード機能を作れないか」という事だった。
画像アップロードというのは、ストレージを用意して、アップされる画像の最適化処理を組み、著作権の侵害等を考慮して規約や同意UIの設計をしなければならない。
リリース後は不適切な画像が上がってないかウォッチする義務が発生するし、ストレージの残容量も気にしなければならない。
更に、増え続ける画像の管理方法（一定期間で削除するか、お金で解決するか）も検討しなければならない。
個人開発において、割とコストが高めの機能だ。

この課題はGoogle Photos等のユーザーが保有するクラウドストレージに公開状態で保存すれば解決するのではないかと考えた。
このご時世、Googleアカウントは誰でも持っている。アカウント登録時に自動で付与されるGoogle Photosの容量は高画質モードなら無制限だし、あくまで「画像を公開しているのはユーザー」という体裁を繕えるので著作権問題もグレーゾーンとなる（漫画村方式）
サービス側で保有するのは画像の静的URLのみだ。

今回、Google PhotosのAPIを使いこなせる様になれば今後の個人開発に幅を持たせることが出来るかもしれない。

ハマる

コロナ自粛の影響により勤務時間が削減され、個人開発の時間は比較的多めに取れた。
それでも間に合わなかったのは全てにハマったからだ。
全てだ。
時系列でハマりポイントを紹介していく。

JS ClientSDKが使いづらい

Google APIをWebで利用する場合、Google API Client Library for JavaScript（GAPI）というライブラリを利用する。
Initial Commitは2011年。それなりに年季の入ったライブラリだ。

NPMには登録されていない。

scriptタグで読み込む必要がある。
Nuxt.jsで外部スクリプトを使用する場合、$nextTicks()を用いてもスクリプトのロードが完了していない場合がある。
ロード状態を監視する必要があるので少し手間だ。

DiscoveryDocs

GAPIのスクリプトを読み込んだ時点ではinit()等、最低限の機能しか保有していない。
Getting Startedに記載されているが、API Key等を設定して初期化する際にDiscoveryDocsというURLを設定する。
DiscoveryDocsはAPI単位で用意されており、URLの先にあるJSONをGAPIでロードすれば機能として利用できる。
Google Photos APIのDiscoveryDocsは下記となる。
https://content.googleapis.com/discovery/v1/apis/photoslibrary/v1/rest
スクリプトの肥大化を防ぐための機構だろう。
ここまではまだ良い。手間を感じるがまだ許せる。

同期処理

ドキュメントのサンプルはthenチェーンで記載されている。
じゃあ・・・と思ってasync / awaitで書き直してみる。動かない。
そう、返却値はES6 Promiseじゃない。
goog.Thenableという独自インターフェースを継承したオブジェクトだ。
init().then(()=>{ }) の中でしかGAPIは動かない。同期的にいくつものAPIを使いたければthenのネストを深め続けるしかない。F*ck。

ES6が標準化されたのが2015年。このライブラリの開発当初ならスマートな仕様だったのだろう。
しかし、こちとら去年からJSを学び始めた身。
終始、この仕様に慣れず生産性が低下した。

認証で躓く

ユーザー管理にはFirebase Authenticationを採用した。
手軽に導入でき、「特定のユーザーには使わせない」といったセキュリティ対策も出来る。
Twitter API等、他社のAPIと連携する場合はトークンの保管といった一手間が必要になってくるが、今回はGoogle Platform内で連携するだけ。
簡単だろうと思った。

🙅 Firebase → Google API

以下の記事を参考に、Firebase UIでログイン→GAPIのイニシャライズを試みる。
Using Google APIs with Firebase Auth and Firebase UI on the Web

できない。
この記事ではFirebaseでログインした時点で GAPIの認証状態 : gapi.auth2.getAuthInstance().isSignedIn.get()が true になる想定だが false だ。
GAPIでもログインする必要があるのか？と思って試したがFirebaseとGAPIで二重ログインされてしまった。

記事のコメント欄に記載がされているが、現在はFirebaseでログインしてもGAPIでログイン状態を検知しない。
下記のissueにもその事が記載されており、ステータスはopenのままだ。
https://github.com/google/google-api-javascript-client/issues/561

🙆 Google API → Firebase

つまり現状、FirebaseとGAPIを連携するには認証順を逆にしないといけない。
GoogleAPIのサインイン : gapi.auth2.signIn()でログインした後、認証情報を取得して Firebaseの認証情報を使用したサインイン : firebase.auth().signInWithCredential()でもログインするフローとなる。
下記の記事を参考に実装した。
How to Use Google APIs on the Web

進捗：だめです

この時点で既に平日は終わっていた。残すところは土日のみ。
対応が長期化した要因は「出来ると書いてあったから」。
Firebase→GAPIの認証は不可能という可能性を考慮していなかった。
この考慮漏れが発生するとプログラマーの思考はどうなるか。
ひたすらタイポを探し続けるのである。

画像アップロードが用意されてない

まだ間に合う。
土曜にアップロード機能を実装。
日曜にデザインを微修正＆実機で動作確認。
ここまで盛大に躓いて尚、根拠なく「出来る」と盲信する。
進捗が遅れてるプログラマーにありがちな逆算スケジュールである。

🙅 GAPIで画像アップロード

ガイドラインを読んでみる。
https://developers.google.com/photos/library/guides/upload-media
どうやら画像をアップロードするには、二段階の手順を踏まないといけないようだ。

画像のバイナリデータをGoogleにアップロードする

上記返却値に含まれるアップロードトークンを用いてアルバムに追加する。

Google PhotosのDiscoveryDocsから該当のメソッドを探してみる。
無い。
何度検索しても「uploads」という処理は無い。
「なぜ無いのか」なんて考える余裕も無い。
（現在、不安になって再度探してみたがやっぱり無い）

GAPIじゃGoogleに画像をアップロード出来ない・・・？

🙅 axiosでリクエスト

悩んでいる暇は無い。もうクライアントSDKは捨てる。
ドキュメントにはエンドポイントが記載されているので、そこに対してaxiosでPOSTリクエストを投げてみる。

Network Error.

・・・久し振りに見たぜ。
has been blocked by CORS policy: No 'Access-Control-Allow-Origin'
CORSエラーだ。
おいおい、嘘だろ。CORSだと？
浅学だが、基本的にはAPI側での対応が必須だったと記憶している。詰んだか？

🙅 XMLHttpRequestでリクエスト

ドキュメントには「CORSもサポートしているよ」と書かれている。
How to use CORS to access Google APIs
クライアントSDKを用いれば回避できるよ。と。
使えねぇんだよチクショウが。
記事の最後にXMLHttpRequestを用いた例も記載されている。
存在は知っていたが初めて使うなこれ。
愚直に書いてある通り組んでみる。

has been blocked by CORS policy: No 'Access-Control-Allow-Origin'

泣く。

🙅 gapi.client.request()

まだだ。諦めない。
俺は長男だから我慢できたけど次男だったら我慢できなかった。

ドキュメントを漁り、もう１つの可能性を見つける。
クライアントSDKには標準で APIを叩く為のメソッド : gapi.client.request()が備わっている。
GoogleAPIのエンドポイントをベタ書きして引数に渡せば叩けるらしい。
クライアントSDKならCORSを回避できるんだろ？信じるぞ？
叩いてみる。

404

？？？
タイポ探しフェーズ（数時間）に入るも、やっぱり問題は無い。
リクエスト内容を確認した。POST先のURLが変わっている。
画像アップロードのエンドポイントはhttps://photoslibrary.googleapis.com/v1/uploadsだが、ドメイン部がcontent.googleapis.comに変わってる。
なんだこれは。
恐らく、クライアントSDKが書き換えていると推測。M*ther F*cker。

諦めた。

クライアントで完結することを。

🙆 Netlify Functions

ホスト先にNetlifyを利用している。
そこでクラウド関数を作れるNetlify Functionsを使ってみようと思い立った。
使った経験が無い機能だ。下記の記事を参考にHello Worldから始めてみる。
【入門】Netlify Functionsコトハジメ
そして「Googleに画像をアップロードしてアップロードトークン返すクラウド関数」を立ててみた。
うまくいった。
初めて使う機能なのに、ハマらず動く。ローカル環境もすぐ出来た。
感動した。モダン最高。

進捗：納期は昨日なので大丈夫です

この時点で日曜の夜。
軸となる機能は一通り完成したものの、「同名アルバムが存在していた場合」などのシチュエーションに応じた分岐は作れてないし、要件として「既にメッセージ画像が存在していた場合は更新する」といった機能も存在するが未実装だ。実機確認もやれてない。

「ごめんなさい」しつつ、月曜に出そう。
そう決めて床についた。

画像の削除/更新はできない

ベットに入った直後、悪寒がした。

見覚えがない。

散々GoogleAPIのドキュメントと格闘し続けたが、Google Photos内の写真を削除/更新するエンドポイントは見た記憶がない。
スマホを取り出し確認してみるも、やはり無い。

冗談だろ？クラウドストレージを操作するAPIのくせに削除/更新は出来ない？そんな馬鹿な話があるか。
調べてみる。
https://issuetracker.google.com/issues/109759781
結論：出来ないらしい

詰みです。お疲れ様でした。

過去画像を含めてランダム表示されるなんてホワイトボードじゃない。

「お手数ですがGoogle Photosを開いて、ご自身で過去の画像を削除してください。」
しょーもな。
サービスとして成立していない。

・・・いや、まだだ。

よし、譲ろう。

百歩譲ろう。

Google Driveなら削除/更新もAPIで可能じゃなかろうか。
Photosなんかより歴史あるクラウドストレージだ。
Google Driveへアップした写真をNest Hubで表示できれば問題無い。

Can I connect my Google Drive to my Google home hub?
結論：出来ないらしい

こうして私は、web1weekの敗者となった。

Safari対応（おまけ）

負け犬でも遠吠えぐらいは出来る。
「手書き画像をGoogle Photosへアップするサービス」としてローンチしよう。
そう決めて実機確認に入った。

CORSぞ

MacのChrome、Android Chromeは問題なく動作完了。
妻に「iPhoneでこれ使えるか確認してほしい」と依頼する。
返信は「画面が驚きの白さ」。
ここで初めてMacのSafariでも動作確認してみる。

has been blocked by CORS policy: No 'Access-Control-Allow-Origin'

CORSぞ。

何度立ちはだかれば気が済むのだCORSよ。
まぁ思い当たる節はあった。
GAPIが使い辛いので、下記のようにクラアントSDKを動的に読み込んでplugin化していたのだ。

export default async ({ $axios, store }, inject) => { // GAPIの読み込み const gapiScript = document.createElement('script') const src = await $axios.$get('https://apis.google.com/js/api.js') gapiScript.appendChild(document.createTextNode(src)) document.head.appendChild(gapiScript) const gapi = window.gapi // ロード処理(Promise化) const clientLoad = new Promise((resolve, reject) => { gapi.load('client:auth2', () => { resolve() }) }) // GAPI初期化処理 const init = () => { return clientLoad.then(() => { return gapi.client.init({ apiKey: authConfig.Google.apiKey, clientId: authConfig.Google.clientId, discoveryDocs: authConfig.Google.discoveryDocs, scope: authConfig.Google.scopes.join(' ') }) }) } inject('gapi', gapi) inject('gapiInit', init) }

不安はあったが、動いたのでそのままにしていた。
外部スクリプトを動的に読み込む場合、普通はCORSの問題が発生する。
素直にscriptタグで読み込むように変更した。

というか、なぜChromeでは読み込めたのか分からない。
同じGoogle製品だから？
プラットフォーマー恐るべし。

クロスサイトトラッキング

さて、初期表示までは問題なくSafariで動作した。
しかしGoogleへログインしても認証状態を検知しない。
プログラムが「ログイン中」と判断しないのだ。
こればっかりは思い当たる節も無い。

issueが上がっていた。
gapi auth2 issue on safari
同様の事象、かつオープンのままだ。
Safariの場合、Cookieを全削除するか、プライベートブラウズなら問題無いらしい。
マジかよ・・・
頑張れば何か対策できるのかもしれないが、負け犬にそんな根性は無い。
UserAgentから「Safari、もしくはiPhone/iPad」を判定して、該当する場合は長ったらしい注意文言を表示するようにした。

敗因

次回以降のweb1weekで勝つための敗因分析を行う。

PoC（概念実証）不足

一番の原因はこれ。
事前に「画像の削除/更新は出来ない」と知っていれば別案を採用していた。
とはいえ、1週間という過密スケジュールで検証工程を取れるかは疑問が残る。
少なくとも、

機能の洗い出し

実装に必要な外部インターフェースのドキュメントはちゃんと読む

まぁ、、当たり前のことはちゃんとしよう。ということ。

「出来ない」の判断が遅い

認証や画像アップロード等、ハマった際に「出来ない」という判断が出来ていない。
昨今の潤沢な開発環境に甘え、「出来ない事は無い」と思い込んでいる節がある。
確かに大抵の場合、ハマる原因は外部インターフェースの仕様変更、もしくはタイポが多い。
塩梅が難しいが、もっと早いタイミングでissueを探そう。

Google Photosを利用した画像アップローダーは作れるのか

冒頭に記した「裏の目的」について。
そもそもGoogle Photos APIの利用規約には「ホスティングサービスとして使うならCloud Storageを使え」と明記してある。
開発するサービスを「Google Photosへアップした写真の共有ギャラリー」という位置付けにするならグレーかな？と思ったが、
結論から言うと「多分、不可」だ。
少なくとも、そう言うサービスを作れるだけのAPIが提供されていない。

まず前述の通り、API経由での画像の削除/更新は出来ない。
あくまで画像のアップロードのみで、アルバム間の移動すら出来ない。

そして、更に致命的なことに静的なURLは取得できない。
写真のURLを取得するAPIは存在するが、一定期間が過ぎると無効化されるらしい。
これはGoogle Photosの「URLで共有する」と同じURLなのだろう。
URL先には静的な画像が埋め込まれているらしいが、それを取得するAPIは存在しない。
スクレイピングを駆使すれば取得できるかもしれないが、実用的では無いだろう。

「ユーザーのプライベートストレージを用いた画像アップローダー」は別サービスを検討した方が良さそうだ。

ゴミを公開する

これはweb1weekじゃない。
私が作りたかったものでもない。
ゴミだ。

Nest Board
https://nest-board.netlify.com/

Google APIは申請無しで使用できるが、Googleから承認されていない場合、ログイン時に警告画面が出る。
利用する際は注意文言を読んで頂きたい。

需要あるか分からないが、Nest Hub側で表示する際の手順も明記しておく。

1. スマホ（iPhone/Android）でGoogle Homeアプリを開く
Nest Hubの初期設定に必要なアプリなのでインストールされているはず。

2. 表示したいNest Hub > フォトフレームを編集 > Google フォトの順で選択

3. Nest Boardで作成したアルバムを選択する
初期値は「Nest Board」

4. 「フォトフレーム」画面の下部にある「個人的な写真の整理」を「リアルタイム共有アルバムのみ」にする
これを設定しないとNest Hubがフォトフレームに不向きな写真と判定して表示されない。
ハマりポイント。

以上の手順を踏めば、Nest Hubに手書きのメッセージ画像が表示される。

普段はソースコードを公開したりしないのだが、今回はリポジトリをpublicにした。
なぜなら敗者だからだ。
https://github.com/kin-mi/nest-board

おわり

次は勝つ。

Nuxtアプリを無料で公開するときに試した5つの環境まとめ(Firebase/GAE/Netlify/Heroku)

2020-03-20T13:51:56+09:00

最近Nuxtでいろいろ作っているけど、無料で使える環境をいろいろ試してる。
いろいろメリデメあるけど、SPAならNetlify/SSRならHerokuがよさそう。
いままで試したものをまとめてみた。

ほしかったもの

主に開発してるのがCGM系のWebサービスなので、

動的なOGP画像などが設定できる(OGP芸)

カスタムドメインが使える

日次のランキング集計などの定期実行ができる

が、無料でできて、なるべく実装が楽で、そこまで遅くないのがうれしい。

試した5つのパターン

試したのは以下の5パターン。試してみた順で記載。

Nuxt(SSR) + Cloud Function
起動がかなり遅かった。。実装も大変なのでNG

Nuxt(SPA) + Firebase Hosting
構築はかなり楽。ただ、OGP芸が大変でFunctionsが必要

Nuxt(SPA) + Netlify
プレレンダリングでOGP芸が楽。定期実行はFunctionsでできる

Nuxt(SSR) + GAE(f1:256M)
メモリの制限きつく、たまに落ちる。。定期実行はcron.yamlでできる

Nuxt(SSR) + Heroku(free:512M) + Cloudflare
メモリ多くてよい。SSLはないのでCloudflareを併用。定期実行はHeroku Scheduler

SPAで十分であれば、「3.Nuxt(SPA) + Netlify」が構築も簡単で良かった。
積読ハウマッチは、現在この構成。

SSRの場合、「5. Nuxt(SSR) + Heroku(free:512M) + CloudFlare」が良い感じ。
へんあいマップがこの構成。

各パターンについて

1. Nuxt(SSR) + Cloud Function

一番はじめに積読ハウマッチでやろうとした構成。

細かいやり方は、以下の記事の「Firebase Cloud Functionsの設定してSSRできるようにする」あたりに。
・Nuxt.jsではじめるときのやることリスト(SSRも国際化も自動デプロイも) - くらげになりたい。

当時は動的ページのSEO対応するには、この方法が多く検索に出ていたので試したけど、
Cloud Functionのコールドスタートがつらすぎてお蔵入り。。SPAでいくことに。。

2. Nuxt(SPA) + Firebase Hosting

積読ハウマッチをリリースしたときの構成。

課題だった動的ページのSEOは、Cloud Functionsを経由して返す方法で対応。
こちらも当時よく検索に出てたけど、実装が大変そうだったので2番手に。

細かいやり方は、以下の記事に。（2020/03/22追記: OGP画像生成系の記事を追加）
・Nuxt(SPA)+FirebaseでSEO！OGP！: 特定のパスだけheadだけ返すやつ - くらげになりたい。
・Nuxt.js(SPA)+Firebaseで積読用の読書管理サービスを作ってみたときにハマったこと - Qiita
・Cloud Functions + ImageMagickでOPG画像の動的生成してCloud Storageにアップロードする - くらげになりたい。
・Cloud FunctionとSVGでOGP画像生成を試行錯誤したまとめ - くらげになりたい。

カスタムドメインについては、Firebase HostingでSSLと合わせて無料で設定可能。

定期実行は、Cloud Functionsでできるのでそれを利用した。
・関数のスケジュール設定 | Firebase
・Cloud Functions for Firebaseのcronみたいな定期実行を試したら簡単だった - Qiita

ただ、Cloud Functionsの定期実行は、
「Googleアカウントごとに3つのジョブを無料で使用できる」
なので、注意が必要。プロジェクトごとじゃない。。

3. Nuxt(SPA) + Netlify

積読ハウマッチの現在の構成。

NetlifyのPrerenderingが無料化されて使えるようになり、よいという話を聞くように。。

実装が複雑で、変更もしにくかったので、この方法に。
Netlify自体がCDNも提供していているので、すこしはやくなった(気がする)

カスタムドメインも、NetlifyのDNSを設定して無料で対応できる。

定期実行は、2.と同じ感じで、Cloud Functionsのまま。

コード量も減って変更もしやすくなったので、OGP画像の改善とかが楽にできるように。。(´ω｀)

4. Nuxt(SSR) + GAE(f1:256M)

SPAの課題として、初期表示が遅いのでなんとかしたいなと、SSRの環境を模索しはじめ。。
公開していないけど、1つ作ってみた。

試してみたところ、起動するだけでメモリ上限すれすれで、複数アクセスがあったりすると、落ちる場合も。。
(ts-nodeで動かしているのも悪い気がしている。。)

ただ、定期実行はcron.yamlを用意すればURLに送信でき、無料範囲も広い。
料金も「その他のリソース」をみるとcronは無料のよう。
・cron.yaml を使用したジョブのスケジューリング

カスタムドメインやSSLも無料で利用できる感じ。(試してないので未確認)

5. Nuxt(SSR) + Heroku(free:512M) + Cloudflare

GAEでうまくいかなかったので、無料でメモリも多いHerokuを利用。
へんあいマップがこの構成で稼働中。

定期実行は無料のアドオン(Heroku Scheduler)が利用できる。
Nuxt側でserverMiddlewareを用意すればOK。

ただ、メモリは多く定期実行もが、Herokuの無料枠だと制限も多い。

SSLは非対応

30分アクセスがないとスリープする

クレジットカードの登録で1000時間/月xアカウント
(未認証だと550時間/月xアカウント)

1. SSLは非対応

単体だけだとSSLに対応していないので、Cloudflareを併用。
CloudflareがCDNも提供してくれるので良い感じに。

2. 30分アクセスがないとスリープする

これは、Heroku Schedulerを使えばOK。
任意のURLを叩けるため、15分毎などスリープしないようにしておく。

3. 無料枠は1000時間/月xアカウント

1000時間あれば、24時間x31日でも744時間なので、大丈夫な感じ。
ただ、アカウント単位での無料枠なので、複数アプリを無料で稼働はできない。。

実際のやりかたとかは、

以下の記事に。
・Heroku+CloudflareなNuxtでSSRしてみる - くらげになりたい。

まとめ

いろいろ試してみたけど、Nuxt.jsを無料で公開するときは、

SPAならNetlify

prerenderingで動的ページのSEOも対応

カスタムドメインやSSLもNetlifyでOK

定期実行はCloud Functionsで。

ただし、定期実行は1アカウントにつき、3ジョブまで

SSRならHeroku

SSRで動的ページのSEOも対応

定期実行はHeroku Schedulerで

Cloudflareを併用し、SSL対応

無料枠は1アカウントにつき、1アプリが限界かも

SSRの方は他にCloud RunやZEIT nowがある。
Cloud Runは立ち上げがGAEより遅いときので後手だけど、
ZEIT nowは気になってるので試してみたい(´ω｀)

以上!!

こんなのつくってます!!

積読用の読書管理アプリ『積読ハウマッチ』をリリースしました！
積読ハウマッチは、Nuxt.js+Firebaseで開発してます!

もしよかったら、遊んでみてくださいヽ(=´▽`=)ﾉ

要望・感想・アドバイスなどあれば、
公式アカウント(@MemoryLoverz)や開発者(@kira_puka)まで！

へんあいマップもリリースしました！

「偏愛マップ」を簡単に作れるWebアプリです!
へんあいマップも、Nuxt.js+Firebaseで開発してます!

偏愛マップは人見知りや口下手な人にも優しいコミュニケーションツールで、
勉強会、懇親会、オフ会などの余興・アイスブレイクや自分のプロフィールにも！

よかったら遊んでみてください(´ω｀)

nuxt.jsプロジェクトをnetlifyで公開してredirectを使うときの罠

2020-03-06T09:34:49+09:00

3/6 11:15追記

サブディレクトリにあるときだけ発生する問題ぽい。問題をまとめてサポートに報告しました https://community.netlify.com/t/subdirectory-and-publish-directory-redirection/10120

netlifyにはnetlity.tomlという設定ファイルを書くといろいろ設定ができることになっていて、従来nginxでやっていたような各種リダイレクトも、ここに書くことで実行してくれることになっている。
Syntax for the Netlify configuration file

これと、nuxt.jsみたいにビルド結果をサブディレクトリに出力するツールが組み合わさるとちょっと予想しない対応が必要になる話。

ルートディレクトリに配置したnetlify.tomlにビルドとリダイレクトの設定を書く。

[build] base = "front/" publish = "dist/" command = "npm run generate" [[redirects]] from = "https://gisyohub.netlify.com/" to = "https://gisyohub.com/" status = 301 force = true

結果、ビルドはしてくれるのだけれど、リダイレクトは動かない。

ぼくの実験結果だと、同じファイルをコピーして、staticディレクトリにもnetlify.tomlを配置してあげると、ビルドする時dist/にコピーされて、その結果redirectが動作するようになる。

おそらくnetlifyは、ビルド時はルートディレクトリにあるnetlify.tomlを見るけど、リダイレクトのときはpublishディレクトリにあるnetlify.tomlを見ているらしい。実装の都合は何となく分かるんだけど、せめてドキュメントに明示してほしい感じ。

こことかここで話題に上がってるんだけど、バグとしては認めてもらえなかったぽい。
https://community.netlify.com/t/redirects-within-netlify-toml-not-working/1731
https://community.netlify.com/t/netlify-toml-folder-with-nuxtjs-and-netlify-cli/4659/3

シンプル再現環境を作ればバグだと認めてもらえそうな気がするんだけど、この問題のミニマム環境って何で作るのがいいのだろう。nuxtとかの開発環境なしに、index.htmlだけをnetlifyで公開するような構成って作れるのかな？

Vue/Nuxtのアニメーションするときに参考にしたところ

2020-02-19T19:58:48+09:00

VueとNuxtでアニメーションをするときに調べたところのまとめ。
公式サイトを読みながら、関連するとこをまとめた感じの備忘録。

トランジションクラスってのがあるらしい

参考: Enter/Leave とトランジション一覧 — Vue.js

で囲むと、いくつかのクラスを生成してくれるらしい。
そのクラスに対して、

CSSトランジションやアニメーションをつけたり、

Animate.css のようなサードパーティの CSS アニメーションライブラリと連携

することで、アニメーションをつけていくぽい。

hello

v-enter-active ... 表示/挿入のトランジション

v-enter ... 表示/挿入のトランジションの開始

v-enter-to ... 表示/挿入のトランジションの終了

v-leave-active ... 非表示/削除のトランジション

v-leave ... 非表示/削除のトランジションの開始

v-leave-to ... 非表示/削除のトランジションの終了

refs: トランジションクラス｜ Enter/Leave とトランジション一覧 — Vue.js

にすると、v-の部分がfade-のように指定したクラス名にできる。

CSSトランジション/CSSアニメーション

フェード

.fade-enter-active, .fade-leave-active { transition: opacity .5s; } .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ { opacity: 0; }

フェードしながらスライド

/* enter、 leave アニメーションで異なる間隔やタイミング関数を利用することができます */ .slide-fade-enter-active { transition: all .3s ease; } .slide-fade-leave-active { transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0); } .slide-fade-enter, .slide-fade-leave-to /* .slide-fade-leave-active below version 2.1.8 */ { transform: translateX(10px); opacity: 0; }

バウンスしてイン

.bounce-enter-active { animation: bounce-in .5s; } .bounce-leave-active { animation: bounce-in .5s reverse; } @keyframes bounce-in { 0% { transform: scale(0); } 50% { transform: scale(1.5); } 100% { transform: scale(1); } }

カスタムトランジションクラスでAnimate.cssと連携する

参考: カスタムトランジションクラス | Enter/Leave とトランジション一覧 — Vue.js

enter-active-classやleave-active-classなどを利用すると、
該当するクラスを指定したものに置き換えることができるらしい。

Animate.cssのクラスを指定すれば、該当のアニメーションを設定できる。

[email protected]" rel="stylesheet" type="text/css"> hello

コンポーネント間のトランジション

参考: コンポーネント間のトランジション — Vue.js

リストのトランジション

参考: リストトランジション — Vue.js

状態のトランジション

参考: 状態のトランジション — Vue.js

以上!!

こんなのつくってます!!

積読用の読書管理アプリ『積読ハウマッチ』をリリースしました！
積読ハウマッチは、Nuxt.js+Firebaseで開発してます!

もしよかったら、遊んでみてくださいヽ(=´▽`=)ﾉ

要望・感想・アドバイスなどあれば、
公式アカウント(@MemoryLoverz)や開発者(@kira_puka)まで♪

参考にしたサイト様

Enter/Leave とトランジション一覧 — Vue.js

API: transition プロパティ - Nuxt.js

VueでイケてるTransition! fade, slide編 - Qiita

CSS transitionで頑張らないVue.js transition - Qiita

Vue.jsのtransitionアニメーションとSassの導入

Vue.jsのトランジションとCSSで作るアニメーションの基本をサンプルでわかりやすく解説

VueでイケてるTransition! fade, slide編 - Qiita

Nuxt.jsで編集中に、ページ移動やページを閉じるときに警告を出すやつ

2020-02-19T19:57:45+09:00

よくある編集中に、ページを離れると、
「編集中のデータが消えちゃうよ」
と教えてしてくれるやつを調べたときの備忘録。

ページを閉じるときに出るこんなのや

戻るや別のページに移動しようとするときに出るこんなの

ソースコード

中身はこんな感じ。Mixinで実装してるけど、pageでもOK。

ページを閉じるときと、ページを移動するときとで処理が異なり、

ページを閉じるとき ... windowのbeforeunloadイベントでハンドリング

ページを移動するとき ... vue-routerのbeforeRouteLeaveでハンドリング

という感じになる。

なにも編集してないときに出るのが嫌なので、
isBlockUnloadというフラグを使って制御できるようにしてる。

import Vue from "vue"; import Component from "vue-class-component"; @Component export default class BlockUnloadMixin extends Vue { // 表示するメッセージ protected blockUnloadMessage = "編集した内容が消えちゃうけど、移動する？"; // アラートを出すかのフラグ protected isBlockUnload: boolean = false; // **************************** // * ページを閉じるときの処理: beforeunloadイベント // **************************** created() { if (process.client) { // 作成時にイベントリスナーに登録 window.addEventListener("beforeunload", this.checkWindow); } } beforeDestroy() { // 破棄される前にイベントリスナーから削除 window.removeEventListener("beforeunload", this.checkWindow); } // 実際の処理 protected checkWindow(event: BeforeUnloadEvent) { if (!!this.isBlockUnload) { // unloadをキャンセルして、メッセージを表示 event.preventDefault(); event.returnValue = this.blockUnloadMessage; } } // **************************** // * ページを移動するときの処理: v-router // **************************** beforeRouteLeave(to, from, next) { if (!!this.isBlockUnload) { // アラートダイアログを表示して、結果に応じて遷移 const msg = this.blockUnloadMessage; const answer = window.confirm(msg); next(answer); } else { // next()は必ず呼び出さないといけない next(); } } }

Mixinsを使う例

使うときはこんな感じ。

以上!!

へんあいマップをリリースしました！

「偏愛マップ」を簡単に作れるWebアプリです!

偏愛マップは人見知りや口下手な人にも優しいコミュニケーションツールで、
勉強会、懇親会、オフ会などの余興・アイスブレイクや自分のプロフィールにも！

よかったら遊んでみてください(´ω｀)

好きを集めた自己紹介マップ｜へんあいマップ

参考にしたサイト様

Vue.jsでbeforeunloadを正しく実装する | blog.fukata.org

vue.jsでフォームを離脱するときに警告をだすやつを実装する - Qiita

nuxtjs_memo.md

[Javascript] Webページからの離脱時に確認メッセージを表示する方法 │ Web備忘録

Window: beforeunload イベント - Web API | MDN

SVGでOGP用のPNG画像を生成してみる(折り返し文字、画像埋め込み、PNG化)

2020-01-24T15:25:45+09:00

SVGでOGP画像を作りたいなと思い、いろいろ調べたときの備忘録。

SVGはまるのも多いけど、いろいろできるので、
SVGからOGP画像をつくるのいいかもしれない。

とりあえず、SVGを書いてみる

ちょろっとなるなら、HTMLでベタ書きしてみるのもいい。
動作確認とか楽ちん。

こんな感じ。

で四角を書いて、で丸を書いてる。

上から順に描画されるので、下にある方が前面にくる感じ。
なので、四角の上に丸が描画されてる。

の座標(x,y)は左上の場所なので、
横幅と縦幅分の半分だけ、全体の中心からずらしてる。

画像化する

最終的にOGPで使うPNG画像にしたい。

画像化する方法について、ローカルとブラウザ上の2つを試した。

1. ローカルで画像化する

いろんな画像フォーマットに対応しているsharpがよさそう。
・sharp - High performance Node.js image processing

.svgファイルを.pngに簡単にできる。

sharpでsvgをpngに変換してみる

まずは、.svgとして扱えるように、
xmlnsとかをちゃんとつけたsample.svgを用意する。

パッケージをインストール

$ npm i sharp

変換するコードはこんな感じ。

// generate.js const sharp = require("sharp"); async function main() { await sharp("sample.svg") .png() .toFile("output.png"); } main().then();

そして、実行。

$ node generate.js

すると、output.pngというPNGファイルを作成してくれる。

ただ、svgのstyleは反映してくれないので注意。

// generate.js const sharp = require("sharp"); async function main() { await sharp("sample.svg") .png() .toFile("output.png"); } main().then();

背景色をつける場合は、sharp側で設定すればOK

// generate.js const sharp = require("sharp"); async function main() { await sharp("sample.svg") .flatten({ background: "lightgray" }) // 背景色 .png() .toFile("output.png"); } main().then();

2. ブラウザ上のSVGを画像化する

ユーザに情報を入力してもらった内容をSVGで表示して、
OGP画像にするという感じが多いので、こっちがメイン。

保存先のFirebase StorageがData URL形式に対応しているので、
PNGのData URLが取得できればOK。

大まかな流れは、こんな感じ。

Canvasを用意する

SVGを読み込むを用意する

を文字列に変換

作成したにDataURL形式でSVGをセットして、読み込み開始

読み込みが完了したら、Canvasに書き出して

CanvasからDataURLを取得する

// svg2DataURL.ts /** * svgをpngに変換 * @param svgElement

あとは、好きなタイミングで呼び出せばOK。

Nuxt.jsでの例はこんな感じ。

これでSVGがCloud Storage for FirebaseにPNG画像で保存できる(´ω｀)

ハマったポイント

1. 画像化するときにhtml2canvasを使うといいかんじにならない

画像化する方法でhtml2canvasもあるけど、うまくいかなかった。。

スクロール位置や画面サイズによって、
うまく撮れるときと撮れない時があって、この方法に。。

2. ブラウザ上と保存した画像が違う

この後出てくる小ネタ集でスタイルで装飾する方法を使ったところ、
うまくいかない感じに。。

svg内にsytleをもたせたらうまくいった(´ω｀)

ブラウザ上 = 全体のCSSが適用
保存画像 = SVG配下のCSSのみ適用

なので、SVGだけで完結しないといけない...

フォントとかも指定しないと、見た目が変わってしまう。。

3. 背景画像など外部リンクがあるとうまく保存できない...

Canvasの仕様っぽく、外部リンクでCORSで引っかかると画像が表示されないよう...

SVGで完結するように、読み込んだ画像をDataURL形式で指定するようにしたらうまくいった(´ω｀)

「SVGで完結」が大事らしい。。

小ネタ集

svg内でstyleが使える

折り返し文字を表示してみる(foreignObject)

SVGにもがあるけど、自動折り返しに対応していない。
文字数を計算して自分で分割すればできるけど、めんどくさい。。

文字の折り返ししたい場合、という
HTMLを追加できるのがあるので、それを使うといいらしい。

styleでfont-sizeとかも設定できるのでいろいろできそう(´ω｀)

こんな感じ

ただ、foreignObjectはサイズを自動計算してくれるわけではないので、
widthとheightを設定しないといけない。

画像を表示する(image)

SVGで画像を使うときは、を使う。
とは違う。

こんな感じ。

ハマったポイントにも書いたとおり、このままCanvasに書き出すと、
保存時に画像が表示されないので、動的にDataURLを取得してセットするといい感じ。

URLからDataURLに変換するのは、こんな感じ。

// svg2DataURL.ts /** * URLをDataURLに変換 * @param 変換したい画像のURL */ export default function url2DataURL( url: string ): Promise { return new Promise((resolve, reject) => { // 1. Canvasを用意する const canvas = document.createElement("canvas"); canvas.width = 1200; canvas.height = 630; const ctx = canvas.getContext("2d"); if (!ctx) { reject(Error("Create Canvas Error...")); return; } // 2. SVGを読み込むを用意する const image = new Image(); image.decoding = "async"; image.onload = () => { // 4. 読み込みが完了したら、Canvasに書き出して、 ctx.drawImage(image, 0, 0, 1200, 630); // 5. CanvasからDataURLを取得する resolve(canvas.toDataURL()); }; image.onerror = e => reject(e); // 3. 作成したにURLでセットして、読み込み開始 image.src = url; }); }

画面サイズに合うように表示する(resize対応)

OGP画像としていい感じのサイズで保存したいけど、
表示するときは画面サイズにあった感じにしたい。。

svgにstyleが使えるので、リサイズ時にスケールを計算して、
transform: scale();で縮小する感じにしてみた。

ただ、このまま保存すると縮小されたままになるので、
deepコピーでクローンして、transformをクリアしてから書き出すようにする。

// svg2DataURL.ts /** * svgをpngに変換 * @param svgElement

以上!!

こんなのつくってます!!

積読用の読書管理アプリ『積読ハウマッチ』をリリースしました！
積読ハウマッチは、Nuxt.js+Firebaseで開発してます!

もしよかったら、遊んでみてくださいヽ(=´▽`=)ﾉ

要望・感想・アドバイスなどあれば、
公式アカウント(@MemoryLoverz)や開発者(@kira_puka)まで♪

参考にしたサイト様

- SVG: Scalable Vector Graphics | MDN

画像とキャンバスをオリジン間で利用できるようにする - HTML: HyperText Markup Language | MDN

- SVG: Scalable Vector Graphics | MDN

Node.js向け画像編集ライブラリSharp - kamoqq.info

sharp - High performance Node.js image processing

Does vue 2.0 break SVG foreignObject? - Get Help - Vue Forum

Vueでsvgファイルをいい感じに扱う - じまろぐ

svgにhtmlを組み込んで、テキストを折り返したりcanvasを使ったり - cocuh's note

文字レイヤーを支える技術 - pixiv inside

VueコンポーネントでWindowサイズ変更検知＆値取得 - Qiita

一発芸！SVGでHTMLを画像化する - Qiita

SVG Fonts - SVG: Scalable Vector Graphics | MDN

CSSの@font-faceでGoogle Fontsのwebフォントを利用する方法 | Free Style

window.onresize - Web API | MDN

CSSだけでアスペクト比を固定するテク - Qiita

Vue.jsとFirebaseでOGP画像生成系のサービスを爆速で作ろう - Qiita

画像生成してOGPに設定する - Qiita

【CSS】テキストを折り返す方法！自動で改行・レスポンシブにも対応 | creive【クリーブ】

SPAなNuxtアプリをFirebase HostingからNetlifyに移行してみた

2020-01-07T21:31:01+09:00

Netlifyがいいと聞いて、Firebase Hostingから移行してみたときの備忘録。

NetfilyのプレレンダリングがあるのでOGP芸が楽。
昔、こんな記事を書いたけど、Functionsで頑張らなくてもよくなった。

使ってみてよかったので、移行したときにやったことをまとめてみる。

移行するときにやったこと

nuxt.config.tsなどの変更

1. Nuxtなどの公式サイトを見て設定

Firebase Hostingで設定したのとかぶっているところもあり、nuxt.config.tsは変更なし。

参考: Netlify へデプロイするには？ - NuxtJS

2. _redirectsファイルの作成

Netlifyでは、index.html以外は404になるので、
SPAの場合はstatic/_redirecsというファイルを作成して、
以下の内容を記載しておく。

/* /index.html 200

参考] Rewrites and proxies | Netlify Docs

3. Netlify側の設定

あとは、Netlifyにアクセスして、「SPA モードで生成されたサイトの場合」にも書いてあるとおりの内容をNetlifyの設定に入力すればOK。

迷わなければ、5分くらいでできて、masterにpushと更新される(´ω｀)

プレレンダリング

ベータ版だけど、Netlifyでプレレンダリングしてくれる機能がある。

この記事に書いてある感じで、
「FunctionsでheadだけのHTMLを生成→リダイレクト」
としていたのが不要になる感じ。

Netlifyの画面で設定

設定は簡単で、Netlify上で設定画面で有効化すればOK。
参考: Prerendering | Netlify Docs

その他の修正点

あとは、以下の修正。

OPGのためにrouterでリダイレクトしていた設定を削除

各ページでメタ情報を適切になるように変更

また、上で書いたとおり、static/_redirecsで

/* /index.html 200

これを設定しておかないとボットがアクセスしたときに404になってOGPがでない。。

(これに気づかずかなりハマった。。)

小ネタ: プレレンダリングの結果を確認する

プレレンダリングするかどうかは、UAを見て判断しているらしく、

UAを指定してすると、プレレンダリングされた結果を確認でき、

UAを指定してないと、プレレンダリングなしの結果になる

curlだとこんな感じで、-A twitterbotを指定するとよい。

$ curl -A twitterbot https://example.com/hoge/fuga -o fuga.html

参考: [Common Issue] Understanding and debugging prerendering

毎回、Twitter Card Validatorで確認するのはめんどくさいので、この方法だと便利。

ページが存在しないURLの対応

積読ハウマッチでは、少し特殊なことをしていて、
一部のURLはheadだけのHTMLしか存在しないページがいくつかある。

なので、その部分を修正していく。方法としては以下の感じ。

nuxt.config.tsでrouterに、クエリパラメタ付きでリダイレクトを追加する

リダイレクトとエイリアス | Vue Router

asyncData()でクエリパラメタを受け取り、created()で削除

this.$router.push({ query: {} });

Vuejs vue-router クエリパラメータの一部だけを取り除く - SIerだけど技術やりたいブログ

動的なサイトマップの対応

書籍やユーザのページなどは日々増えていくので、
サイトマップも動的に生成するようにしている。

Hostingの場合はFunctionsを呼び出せたけれど、
Netlifyに移行すると、それができないので対応が必要。

netlifyの_redirectsを使って直接Functionsへリダイレクトする方法で対応した。

こんな感じで各URLを該当のFunctionsにリダイレクトさせておく。

/sitemap https://us-central1-.cloudfunctions.net/sitemap /* /index.html 200

sitemap-moduleだとダメだった...

sitemap-moduleで動的なページの対応方法も乗っているが、
SPAなのでgenerateされてしまう...

参考

nuxt-community/sitemap-module: Sitemap Module for Nuxt.js

Nuxt.jsで静的ファイル生成時にサイトマップも自動生成する方法 - Qiita

Nuxt.js + Firestore で動的サイトマップ - Qiita

Nuxt.jsでサイトマップを動的に設定する方法 - Qiita

カスタムドメインの設定

Netlifyの設定画面に従い、カスタムドメインを設定していく。

ALIASを設定するようにいわれるが、
お名前ドットコムはALIASを設定できないらしいので、
NetlifyのDNSを使う形で対応

参考にした記事でも書いてあるとおり、
Aレコードでもできるが、CDNを活用できないらしいので同様の対応

あとは、設定画面にも書いてあるとおり、
*.netlify.comから設定したドメインへリダイレクトを追加しておく。

[https://tsundoku.netlify.com/*](https://tsundoku.netlify.com/*) https://tsundoku.site/:splat 301! /sitemap https://us-central1-.cloudfunctions.net/sitemap /* /index.html 200

これでリダイレクトされるようになるので、あとはDNSの反映を待てばOK！

以上!!

こんなのつくってます!!

積読用の読書管理アプリ『積読ハウマッチ』をリリースしました！
積読ハウマッチは、Nuxt.js+Firebaseで開発してます!

もしよかったら、遊んでみてくださいヽ(=´▽`=)ﾉ

要望・感想・アドバイスなどあれば、
公式アカウント(@MemoryLoverz)や開発者(@kira_puka)まで♪

参考にしたサイト

Netlifyを使ってたらルートパス以外が404になった話とその解決方法 - Crieit

Rewrites and proxies | Netlify Docs

Prerender - Dynamic Rendering for JavaScript Website SEO

[Common Issue] Understanding and debugging prerendering - Support / Common Issues - Netlify Community

【Netlify】カスタムドメインを設定する - Qiita

Netlifyにお名前.comで取得した独自ドメインを設定する - Qiita