きらぷか@積読ハウマッチ/SSSAPIなどの投稿 - Crieit

初のSaaSが12月で1周年なので振り返ってみた

2022-12-05T05:35:35+09:00

※これは個人開発 Advent Calendar 2022のカレンダー2/5日目の記事です。

個人開発でいろいろ作ってきたけど、
去年の12月にはじめてSaaSをリリースしました。

ちょうど1年経ったので、少し振り返ってみる。
12月はいろんな記事が出てくるので、少し触発されました(´ω｀)

GoogleスプレッドシートのJSON API化サービス

https://sssapi.app/

どんなサービス？

スプレッドシートのJSON APIをつくれるごくごくシンプルなサービス。

スプレッドシートのURLを登録すると、
中身をJSONで受け取れるAPIを作れます。

検索・絞り込み・ページングなどAPIでよくつかう機能や、
ネストオブジェクトへの変換などいくつか変換機能、
外部API呼び出しやGitHub Actionsとの連携機能などなども用意。

どうして作ったの？

β版リリース時の記事でもいろいろ書いたけど、
スプレッドシートをJSON化する方法はいくつか既存のサービスでは少し使いにくいな。。と思うことがあった。

既存のサービスでの課題

ちょっとしたJSON APIを作る方法はいくつかあるけど、
実際のサービスで利用しようとした場合、すこし気になることが。。

GAS
- レスポンスが遅い/同時実行数などの制限がある
- シートごとに準備が必要/どこで使ってるかわからなくなる
- リッチな検索の実装がめんどくさい
ヘッドレスCMS
- 個人・小規模・開発初期では手を出しにくい価格
- 機能がリッチだけど、初期ではなくていいものも多い
スプレッドシートDB関連サービス
- 必要な権限が多い
- プライベートなAPIは作れない

資金が潤沢であればヘッドレスCMSがよい選択だけど、
試作段階で、いきなり手を出すのはなかなか厳しいお値段。。

GASやスプレッドシートDB関連サービスは、
個人利用なサービスや学習用ではよいけど、
実サービスではなかなか厳しい制約。。

もう少しお手軽で実サービスでも利用できるものがほしいと思い、
このサービスを作りはじめることに。

スプレッドシートをDBにするときの懸念

多くの競合サービスは直接スプレッドシートに接続しているけど、
実際にスプレッドシートをDBにすることを考えたときに、
いくつか気になる点が。。

トランザクションがない -> データ壊れる可能性
編集中のリクエストも受け付ける -> 不正なJSONを返すの可能性
Sheets APIが必要 -> 実サービスだとつらい遅さ

作ったサービスが(万が一でも)大ヒットしたときに、
データが壊れたり、意図しないレスポンスになるのは、
かなりつらい。。

そのため、任意のタイミングのスプレッドシートでAPIを更新でき、
読み込み専用のAPIのみとする、いまの方針になりました。

1年やってみてどうだった？

予想以上に利用されてた!!
エンジニア以外の人の利用が多い!!
企業での利用が多い!!

自分と同じような個人開発者をイメージしていたので、
かなりびっくり。。うれしい悲鳴。。(*´ω｀*)
年プランの購入もあり、黒字で運営できてる。ありがたい。。(*´ω｀*)

CloudFlareの障害のときは気が気じゃなかった。。

マッチするユーザ

アンケートやインタビュー、利用データを見ていると、こんな感じに(*´ω｀*)

スプレッドシートを介したコラボレーション
- エンジニア以外がデータを操作しやすい
お知らせなどを極小のコンテンツをあとづけしたい
- 単純なものを素早く作れる
スキーマが決まってない開発初期
- データからスキーマが作成できる

特に、スプレッドシートは多くの人が見慣れているので、
データを作る人に管理画面の操作方法を説明しなくてもよく、
共有も共同編集も簡単にできるというのが強みのよう。

また、スキーマをあらかじめ用意しなくてよく、
列を追加すると自由に変更できるのでプロトも素早くできる。

マッチしないユーザ

逆にマッチしないユーザとしては、
スプレッドシートをDBとして使いたいエンジニア。

やはり、書き込みができない、すぐに反映されないのは、
かなりネックなため、刺さらない感じだった。。

とはいえ、DBとして使う懸念があるので、
妙案が出るまで少し難しいことを思っている。。

振り返り(というなの後悔＆反省)

うれしかったことも多かったけど、
「こうしとけばよかった。。」の日々(´・ω・｀)

ユーザとのコミュニケーション

機能の開発はずっとやってきたけど、
マーケティングは考えていなかった。。

リリースしたはいいものの、フィードバックを受けたり、
何かを個別に伝えたりというのが難しい状態に。。

以下のようなものが必要だと感じた。
さらにサイト上とメールなどのサイト外でやり取りできるとよい。

運営 -> 全体
- サイト内: お知らせ・更新履歴のページ
- サイト外: メーリングリスト
運営
- サイド内: フィードバックフォーム
- サイト外: お問い合わせフォーム/メール
運営 -> 個別
- サイト内: (現状なし。例:個別のお知らせ)
- サイト外: メール
運営個別
- サイト内: (現状なし。例:チャット)
- サイト外: メール

当たり前のことだけど、機能の開発が優先になってしまっていた。。
機能は最低限でもいいけど、
ユーザとやり取りできる部分はあらかじめ用意できていると良かった。。

統計データの収集

これもマーケティング関連。

リリースして終わりではなく、なにを改善すべきかを把握する必要があるが、
こんなに利用される想定ではなかったので、かなり後回しに。。

最低限でも仕込んでおけば、かなり改善を早く回せた気がする。

特に、Twitterでのコメントと、実際の利用データとはかなりの乖離があるので、
もっとはやく実データを見て判断できる基盤を用意しておけばよかった。。

個人利用の想定

想定ユーザが自分自身であったので、
複数人でがっつり利用されるのを想定しなかった。。

フタを開けてみると、企業での利用や、
エンジニア/非エンジニアとのコラボレーションが多い。

そういった場合、プロジェクトやワークスペースみたいな、
複数人で共同編集できる構成が必要。

そうしておくことで、メンバーを招待したりもできるので、
バイラル効果も期待できる。

特にSaaSの場合はマルチテナントな構成で組んでおけばよかった。。
(新機能として実装中...)

料金プラン設計

個人利用の想定も絡んでいるけど、
アカウント単位のシンプルな3プランだけにしていた。
(しかもかなり手を出しやすい価格...)

この設計の場合、なかなか収益を増やすのが難しい。。
ランニングコストがかかるリッチな機能も開発しにくい。

また、APIがたくさん作りたい人と行数をたくさん増やしたい人がいて、
ニーズにあうプランがないことも多い。

今回のサービスの場合は、ある程度、好きなプランにできるよう、
ユーザがカスタマイズできる構成で組んでおけばよかったと思う。

とはいえ、ユーザが無駄に費用をかけなくていいように、
無料で試せて、小さくはじめて、大きく伸ばせる、
みたいな仕組みにしておくと個人的にはとっつきやすい。

その他もろもろ

書きはじめるときりがないけど、ほかにもいろいろと。。

より積極的なインタビュー/事例収集
大きな更新よりも小さくても定期的な更新＆お知らせ
UIフレームワークは利用を控える/移行つらい
広告は少額だと微妙かも/ある程度の金額なら効果的
記事募集やクーポン配布は効果薄いかも

はやく小さくリリースするのも大事だけど、
こういったサービスの場合には、
マーケティング関連や共同利用の想定ももっと想定しておけばよかった。。

今後は？

まずは後悔している部分の対応と使い勝手を向上していく。

あとはNuxt3がリリースされたので、Buetfyを剥がしつつ、
すこしずつ移行している感じ。

シンプルさを保ちつつ、よりサクッと便利なサービスになるよう、
少しずつでも長く運営できるようがんばります(*´ω｀*)!!

ご興味がある方も無い方も一度はぜひぜひ〜(*´ω｀*)

GoogleスプレッドシートのJSON API化サービス
https://sssapi.app/

参考になった本

マーケティングの本が多め。どう理解してもらい、どう広めていくかの学びが多い。。

個人開発ふりかえり ver.2021年

2021-12-05T00:06:11+09:00

この記事は個人開発 Advent Calendar 2021の5日目の記事です。

今年ずっとつくってたサービスも無事正式リリースできたので、
個人開発について振り返ってみようかなと。

はじめたころからすると目的もだいぶ変わってきてるけど、
こんなに長く続けられる個人開発ってたのしい(*´ω｀*)

2021年につくったもの

振り返ってみると4つも作ってた(*´ω｀*)

4月: ウマ育ノートをリリース
ゲーム・ウマ娘のお助けアプリ
7月: CoCoガチャをリリース
カレーのトッピングをガチャで決めるネタアプリ
Crieitのweb1weekへの投稿作
10月: PRESS-DONEをリリース
プレスリリースの送付記録サービス
12月: SSSAPIを正式リリース
GoogleスプレッドシートのAPI化サービス

あと、積読ハウマッチもちょこちょこアップデート

ほぼ、SSSAPIをがんばっていた年。
ほかの3つのアプリもSSSAPIを使ってるので、ほぼ一色に。

SSSAPIについてはこちらの記事にまとめたので、もしよければ！
・スプレッドシートをWeb APIにできるサービスを作ってみた - Qiita

目的の変化

かれこれ8年くらい個人開発をしてるけど、
目的がだいぶ変わってきた気がする。

はじめはストレス発散

いま思うと、ストレス発散だったとかも。

だんだんコードを書く機会がなくなって、
コードを書けないストレスの発散する場所だったかもしれない。

なので、「コード書ける〜たのし〜」という感じで、
コードを書くこと自体が目的だった。

新しい技術を試す場所

新しい技術とかはフィードを見ているくらいだったけど、
いろんなライブラリや言語などを個人開発で試すように。

記事を読んだり、サンプル動かすだけだと身につかないけど、
実プロジェクトで試せるので、理解も深くなる。

「個人開発で試す」→「本業で導入する」
という、このサイクルがとてもよくて、
新しめ技術でも自信を持って提案できる気がする。

「個人開発＝新しいものを試したり、訓練する場所」
という感じだったかも。

新しい領域へのチャレンジ

このサイクルにも慣れてきて、自由に作れるようになると
「あわよくば、これで暮らしていきたい。。」
という気持ちが湧くように。。ほんと、人間は欲深い。。

そうなると、広報とか営業とかQAとか
いままでの開発以外にも力を入れていくことが大事。

なので、今は開発以外も含めて、
どう運営していくのがよいかを考えることが多くなってきた感じ。

本業だと別の領域にチャレンジできる機会は、
なかなかないので、これも個人開発のいいところ。

個人開発はたのしい

なんでこんなに長く続けてるんだろう？
と考えてみると、この3つなんじゃないだろうか。

なにもかも自由
フィードバックがダイレクト
個人でもひとりじゃない

(もちろん、個人開発ドリームもあるけど(*´ω｀*))

なにもかも自由

独立してフリーランスになったときも、
自由だと感じたけれど、それ以上に自由。

作りたいものも、使いたい技術も自由に選べるのがいい。

仕事となると、作るもののテーマは大体決まっているし、
安定している枯れた技術やチームにあう言語など、
いろんな制約を考えて決めたりする。

個人開発なら、そんな制約も無いので、
「ぼくがかんがえたさいきょうの構成」
なんてのもOK。

上で書いたとおり、目的すらも自由なので、
心のままに楽しめるのがいい(*´ω｀*)

フィードバックがダイレクト

なにもかも自由である反面、
すべての責任があるのも醍醐味の一つ。

いいこともわるいこともあるけど、
ストレートにフィードバックが来るのは刺激的。

本業だとほめられることが少ないけど、
9対1くらいでいいフィードバックなのでたのしい。

わるいフィードバックも改善点の指摘なので、
どちらのフィードバックもとってもありがたい(*´ω｀*)

個人でもひとりじゃない

自分でそういう情報を追っていっているというのもあるけど、
意外と個人開発者はたくさんいて、コミュニティや勉強会/もくもく会も多くある。

ぼくも運営者ギルドというコミュニティに参加させてもらってるけど、
・リリース前のサービスにバグ出し/アイデア出しするバグバッシュや
・ 1ヶ月の活動内容を報告する月報
なんてのも開催されていて、それをみると「がんばるぞ！」って気持ちになる。

コードを書くのは一人だけど、コミュニティやTwitterを見てても、
がんばっている同志がたくさんいる感じなのが、続けられるのかも。

それと、フィードバックがダイレクトな効果なのか、
ユーザさんと一緒に作ってる感じがすごく強い。

最初のプロトくらいまでは自分だけだけど、
いろんなフィードバックを取り込んでいくうちに、
「自分だけで作ったサービスじゃない感」が出てくる。

ユーザさんが増えていくたびに、
気づかなかったことや自分にない視点が増えていくのがたのしいし、
より喜んでもらえるようにとやる気が出るからかもしれない(*´ω｀*)

おわりに

振り返ってみて思ったけど、目的すら自由な個人開発ってすごい(*´ω｀*)

【PR】SSSAPIをリリースしました！!

スプレッドシートをWeb APIにできるサービスをリリースしました🎉
・ 1件取得/フィルタリング/ページング/ソートもできるAPIを簡単作成
・ドメインやアクセストークンによるアクセス制限もOK

「お知らせとかリリースノートを作りたいけど、
毎回ビルドするのも、管理画面をつくるのもめんどくさい。。」

ってときに便利です!!　スプシが管理画面になっちゃいます!!
無料枠もあるので、ぜひぜひ遊んでみてください(´ω｀)

GoogleスプレッドシートのAPI化サービス
「SSSAPI」

＼㊗️正式リリース㊗️／#SSSAPI の正式版を公開しました🎉開発開始から9ヶ月...無事リリースを迎えられました😭β版でのご協力、ありがとうございます🙇‍♂️まだまだ不便なところもございますが、より一層便利になるよう改善がんばります💪💪💪#拡散希望RTお願いします https://t.co/znp6CJGZEs
— 【公式】SSSAPI / GoogleスプレッドシートのAPI化サービス (@sssapi_app) November 30, 2021

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

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

つくってるWebサービスのユーザ数が15倍になったときにやった5つのこと。

2021-08-29T17:21:16+09:00

先日、開発中のサービスのオープンβ版を公開したら、4日でユーザ数が15倍に。。
想像以上の反響だったので、どんなことをやってたかをまとめてみました。

リリース後のプロモーションはいつも困っているので、、
これから何かを作ろう、リリースしようとしている人の一助になれば。

※注意※
・元のユーザ数が少ないのですごく増えた感あり。運要素が強めです。
・実際のユーザ数やデータはちょっとはずかしいので有料にしてます
　(Crieitの有料記事機能を使ってみたかったって理由も)

実際にやったこと

LPや事前登録サイトを公開
運営者ギルドでバグバッシュしてもらう
PR TIMES等でプレスリリースを公開＆ツイートする
Zenn/Crieit/Qiita等で記事を公開＆ツイートする
RTされやすそうな時間帯にセルフRTなどする

実際のやったときの流れ

7/6(火): 事前登録サイトの公開&PR TIMESでプレスリリースを公開
7/10(土)-7/12(月): 運営者ギルドでバグバッシュ
8/24(火): PR TIMESでプレスリリースを公開
- → プレスを元にした記事をデジタルシフトタイムズさまから公開
- → この記事がはてなブックマークのテクノロジーでホッテントリに!!
- → ホッテントリに入ったので、Discoverで表示(Google砲)!!
- → つられて、SSSAPI自体もホッテントリに!!
8/25(水): Zennで記事を公開
- Firestore最高だけど、初期データとかマスタデータ管理がめんどくさいので、スプレッドシートをAPI化サービスを作ってみた
- → トレンド入りし、トップページに表示される!!
8/26(木): Qiitaに記事を投稿
- GASでもできるけど、スプシをAPI化するサービスを作ってみた。そして、そのときハマったこと。 - Qiita
- → トレンド入りし、トップページに表示される!!

それぞれ記事を投稿したら、朝/昼/夜くらいでセルフRTなどしてました。

(フィードバックやいいね/RTで拡散で協力してくれた方、ほんとありがとうございます!!)

1. LPや事前登録サイトを公開

まずは、トップページのみの事前登録サイトを作って公開してました。
事前登録の受付は、Googleフォームの簡易的なサイト。

事前登録のプレスリリースを打つためもありますが、
サービス名を検索するとヒットするように、あらかじめ用意していました。

ツイートへの反応や登録者数なども、ウケそうかのどうかの判断材料に。

2. 運営者ギルドでバグバッシュ

運営者ギルドは、Webサービス運営者が集まっているコミュニティ。
すごい人ばかりで、Slack内も知見がすごいですが、
その中のイベントの一つ、バグバッシュをしてもらいました。

バグバッシュは、「リリース前にみんなにさわってもらってバグを見つけよう！」
という活動なのですが、バグだけでなく、どこがわかりにくい？なども聞けることも。

みんなそれぞれ運営しているので、いろんな視点のフィードバックが集まり、
自分では気づけないポイントのコメントを多くもらえました。。！

そのフィードバックを踏まえ、改善＆ブラッシュアップ。

3. PR TIMES等でプレスリリースを投稿

PR TIMESにプレスリリースを投稿すると、
各種メディアに掲載され、露出が増えるので、活用しています。

配信のタイミングは、以下の記事を参考にしていて、
火曜日の朝10時10分にしました。
・プレスリリースの配信タイミングは？曜日・時間を戦略的に決定して効果を最大化させよう

また、会社設立日から2年は無料枠がもらえる、
スタートアップチャレンジを活用しています。

・スタートアップチャレンジ｜PR TIMESプレスリリース無料配信プログラム

4. Zenn/Crieit/Qiita等で記事を投稿

なにか作ったら各種サイトに記事を書いてます。
今回はZennとCrieitとQiita。
(Zennはずっと投稿したかったけど、ネタがなかったけど、初Zennできてよかった(´ω｀))

それぞれトレンドに掲載されると露出が増えるのもあるけど、
LPやトップページには書ききれないことを記事で補足している感じ。

今回は、以下のテーマでそれぞれ書きました。
・Zenn ... なんで作ろうと思ったかの理由と経緯
・Qiita ... システム構成や技術要素
・Crieit ... PRのためになにをしたか(この記事)

特に、Crieit独自の機能である、カノニカルが設定できるのが好きで、
Zennなどに投稿するときは合わせてクロス投稿しています。

いいね等が集計時に5〜10くらいつくとトレンドに乗れるっぽいので、
記事書いて、ツイートして、RTして、たくさん祈ります🙏

Qiitaは毎日5時/17時に更新されるので、
集計対象の時間が長くなるよう、その時間くらいに投稿がよさそうです。

5. RTされやすそうな時間帯にセルフRT

プレスリリースや記事を投稿したときもそうですが、
Twitterで伸びる曜日と時間帯というツイートを見てから、
なるべくこのときに投稿するように意識しています。

【データから見るTwitterのツイートが伸びる曜日と時間帯🔥】◼︎平日・5:00、11:00、15:00、20:00◼︎休日・8:00、12:00、14:00、16:00→多くの方が通勤時間帯や夜間がユーザー数が多い為、良いと考えているが、実はタイムラインの流速が早くツイートが流れてしまう可能性が高い。#デジプロ pic.twitter.com/JHIT9Nv6QK
— デジプロ🔥＠デジタル広告のプロを育てる学習サービス (@digimapro) August 13, 2019

◼︎平日 ... 5:00、11:00、15:00、20:00
◼︎休日 ... 8:00、12:00、14:00、16:00

一日に何回かあるので、他の時間帯にセルフRTを活用。

セルフRTは結構抵抗があったけど、
昔、とあるマンガ家さんが

ツイートしただけではダメ。
何度もセルフRTしない届かないし、見てもらえないよ。

的なことをいってたツイートを見てから、
見てほしいツイートはなるべくRTするようがんばってる。
(イラスト系だと昼あげ/夜あげとかみるので同じ感じ。)

運要素多いけど、やさしいフォロワーさんが
いいね/RTで拡散してくれるので、ほんとありがたすぎる。。

まとめ

こんな感じで、なるべく露出が増えるよう、
サービスを知ってもらえるような活動をしていました。

LPや事前登録サイトを公開
運営者ギルドでバグバッシュしてもらう
PR TIMES等でプレスリリースを公開＆ツイートする
Zenn/Crieit/Qiita等で記事を公開＆ツイートする
RTされやすそうな時間帯にセルフRTなどする

トレンド→はてブのホッテントリ→Google砲、
などのコンボが決まると広く拡散しますが、
0いいねなどよくあるので、いつも運ゲー。。

地道にサービスを改善しつつ、
記事などのコンテンツを増やしつつ、
最後は天にまかせて、がんばっています！

リリース後のプロモーションはいつも困っているので、
これから何かを作ろうとしている人の参考になれたらうれしいです😊

SSSAPIでは、β版ユーザを募集中です！

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

GoogleスプレッドシートのAPI化サービス
『SSSAPI』
URL: https://sssapi.app
Twitter: @sssapi_app

記事を書く励みにもなるので、
よかったら、いいねやシェア、はてブなどもよろしくおねがいします!

はてなブックマークはこちらから

※以下、有料コンテンツです※

以下のデータを公開しています。
ちょっとはずかしいので、おもしろいと思ってくれた方は、
コーヒー一杯差し入れるくらいの気持ちで見てもらえれば〜

Google AnaliticsのPV数/流入元
PR TIMESの統計情報
SSSAPIの登録者数とAPI作成数
(おまけ) Twitter広告を試してみた結果

Firestore最高だけど、初期データとかマスタデータ管理がめんどくさいので、スプレッドシートをAPI化サービスを作ってみた

2021-08-25T05:47:03+09:00

開発しているGoogleスプレッドシートのAPI化サービス「SSSAPI」。
無事にオープンβ版を公開できたので、なんで作ろうと思ったかを書いてみた。

http://sssapi.app

なぜ作ろうと思ったか

個人開発が好きで、いろんなものをちょこちょこ作ってる。
今は、Nuxt.jsとFirebaseがお気に入りで、
小さなものを含めると20サービスくらい作ったと思う。

ちょっとしたものを作ることも多く、
「もっと楽に作ることはできないかなぁ？」
といろいろ考えたりしていた。

その時同時に考えていたのが、ゲーム攻略のサービス。
マスタデータが多く、更新も早いので、どうしようかなと。

とりあえず、初期データが必要なので、
スプレッドシートにまとめていた。

データを集め終わって、いざつくろうとしたときに、
「このままJSON APIにできれば楽なのにな〜」
というのが最初だった。

最初はJSONファイル

ゲームの攻略サービスを作っている途中だったので、
まずは、スプレッドシートAPIでJSON化して、
JSONファイルをソースに含める形で開発。

これだけでも割とよく、
とりあえずJSONファイルで開発するのは良い感じだった。

データの項目が足りなくても、
スプレッドシートなら列を追加するだけなので、
データ構造を検討している初期はスムーズに進んだ。

ただ、JSONファイルをインポートしてるので、
ビルドサイズは大きくなるし、
データを更新したいときはビルドしないといけないので、
めんどくさいな思うようになり、API化は必要だなと作りはじめた。

Firestoreで初期データをめんどくさい

今まで作ってきたものを振り返ると、
割とこういうことが多い感じだった。

過去に作ったものでも、カテゴリやお知らせなど、
こちらが用意するデータは、JSONファイルで用意していたり、
JSONファイルの内容をFirestoreに登録するスクリプトを書いていた。

Firestoreは便利なんだけど、
管理画面は自分で用意しないといけないので、
マスターデータを扱いたいときは、めんどうな部分があった。

1つ項目を追加するのにも、JSONファイル＆ビルドだったり、
追加用のスクリプトを書かないといけない。。

SSSAPIであれば、スプレッドシートを管理画面にでき、
そのままAPI化できるので、かなり楽になるな〜と。

実際、楽になって、crieitのweb1weekの企画へ
参加したときに作ったWebサービスは1~2日で開発できた。

他のじゃダメだった？

いざ作るとなると、時間が必要なので、
既存のものはないかな〜と見てみた。

見てみたのは、GAS、ヘッドレスCMS、競合サービスの3種類。

GASは？

一番よく見るのはこれかなと思う。
Google Action ScriptでWebサービスとして公開するパターン。

記事も多くコードもあるので、便利で昔使っていた。

ただ、シートごとにGASの設定が必要だったり、
どれが設定したスプレッドシートか忘れてしまうので、
一元管理ができればな〜と思ったりする。

SSSAPIであれば、毎シートにGASを設定する必要はないし、
登録してあるスプレッドシート=API化しているなので、
一元管理も簡単にできるようにした。

ヘッドレスCMSは？

次によくみるのはヘッドレスCMSかなと思う。
スキーマも柔軟に設定できて、管理画面もリッチ。

ただ、内容がリッチすぎたり、
個人開発だとお高めの価格設定なので、手が出せず。。

「多くのサービスを楽に作りたい!!」と思うと、
無料枠の制限では心もとないなと。。
また、アクセス制限などは有料プランぽいので、断念。

SSSAPIでは、機能は限定的だけど、
個人開発でも使いやすい価格帯になるようにがんばってる。
無料のプランでもドメイン制限を使えるようにしている。

競合サービスは？

今まで聞いたことがなかったけど、調べてみたら、
6つくらい競合のサービスがあった。

もちろん、ヘッドレスCMSよりも安めだけど、
Googleドライブやスプレッドシートへの全権限を許可しないといけない。。
もしくは、全員がアクセスできるように共有設定を変更する必要がある。

Googleドライブやスプレッドシートへの全権限を許可は、
割とこれが強くて、個人情報や機密情報を入れているアカウントだと使えない。

API化したいスプレッドシートのデータ自体も財産なので、
オープンにはしたくないときも多い。

SSSAPIでは、権限を共有するのではなく、
システムアカウントを共有設定に追加してもらう形にし、
共有設定されているシートのみ参照できる方法にしている。

すこし手間ではあるけど、安心・安全のため。

ドメイン制限やアクセストークンによる認証も用意しているので、
APIのURLがわかっていても、アクセスできない仕組みを用意している。

使ってみてどうだったか？

利便性・価格・セキュリティの面から、
作ったほうがいいなぁと思って、開発を進めてみた。

使っているのが、マスターデータが多いものに偏っているけど、

スプシが管理画面になる
ビルドしないで更新できる
ドメイン制限できるので守れる

と、かなり便利に。

他のサービスのお知らせやリリースノートなども、
順次、SSSAPIに置き換えている。

ユーザが作成するデータは、今までどおりFirestoreを使っている感じだけど、
プロトタイプ開発のときやテストデータ作成なんかでも活躍してるので、
最初に思っていた「ちょっとしたものを早く楽に作れる」ようになった気がする。

スプレッドシートで管理するのつらいな。。という規模になってきたら、
JSON APIの結果をFirestoreに突っ込めばよいのもいい。

β版なので、まだまだ足りないところはあるけど、
ユーザさんからのフィードバックとドックフーディングをして、
よりよいものにしていければと思う。

SSSAPIでは、β版ユーザを募集中です！

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

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

🌟🌟オープンβ版の公開開始🌟🌟フィルタリングやページングなど機能を強化し、より便利になりました😊β版はプレミアムプランの内容を無料で利用できます🙌ぜひ、この機会にお試しください‼️‼️GoogleスプレッドシートのAPI化サービスhttps://t.co/fKUGVFeQR7 #拡散希望RT協力お願い致します pic.twitter.com/O2rjs35BZD
— 【公式】SSSAPI / GoogleスプレッドシートのAPI化サービス (@sssapi_app) August 24, 2021

http://sssapi.app

2020年の個人開発を振り返ってみた

2020-12-04T07:00:09+09:00

どうもきらぷかです。
この記事は、Crieitのアドベントカレンダー、なんでもの4日目の記事です。

今年はなんかいろいろ作ったなぁ〜と思い、振り返ってみた。
切りが悪いので、2019年12月からの1年分を見てみる。

新作を6つも作ってた

エア銭、FIND TWOは#web1weekのなので毛色が違うけど、
新作作りたい意欲が刺激されて新作作ってるのがよくわかる(´ω｀)

思いつくのがCGM系のアイデアが多く、いろいろ作ってみてるけど、
やっぱり難しい。。でも思いついたから作りたい。。を繰り返してる感じ。

この中だと、ツール系のカブれこが一番がんばっているのがおもしろい。
もうすこし稼働をかけてもいいかもしれない。

積読ハウマッチは31回アップデート

	更新回数	新作
12月	2	1
1月	4
2月	4
3月	8
4月	2
5月	3	2
6月	3
7月	2
8月	1
9月	0	3
10月	2
11月	0

更新内容の大小はあれど、前半はがんばってたっぽい。
4月頃から新作とか本業とかで稼働が少なくなってるのが顕著に。

とはいえ、結構継続的に開発できているのでよい。

積読ハウマッチの数字を見てみる

今までためてた数字をまとめてみた。
上下はあるけど、横ばい or ちょっと成長という感じ。

	MAU	PV	ユーザ数	書籍数	収支	更新回数	新作
12月	1,244	7,526	91	2,779	1,087	2	1
1月	1,348	11,081	92	2,375	1,568	4
2月	1,393	10,125	102	2,820	2,653	4
3月	1,655	12,385	90	3,190	437	8
4月	1,422	11,780	92	2,645	371	2
5月	1,389	10,770	70	1,947	847	3	2
6月	1,888	13,486	137	3,399	323	3
7月	1,778	18,104	104	9,367	567	2
8月	1,667	14,304	85	3,919	2,278	1
9月	1,886	18,827	104	10,769	1,601	0	3
10月	1,432	15,569	70	10,152	2,873	2
11月	1,086	10,845	57	2,111	1,215	0

PVと更新回数

ここからPVといろんな数字を比較してみる。

更新が少ないので、PVも少ないのかなと思ったら、そんなことなかった。

7月は新機能を追加したりプレスリリースを出したりしてPVが上がってるのと、
9月はバズったツイートで宣伝してもらえたり、Vtuberの方に遊んでもらったりで上がってる感じ。

知ってくれた人が増えたので、全体的に少しずつPVが上がってる状態。

PVと書籍増加数

そのまんま比例している感じ。登録するからPV増えるので予想通り。

PVと収支

更新回数と同じで、あまり関係なかった。
アフィリエイト型なので、Amazonで買わないと売上にならないので、たしかに。

買うまでの動線をなんとかしないといけないなと思いつつ、まだあまり整備できてない。。

作ったアプリの技術要素の移り変わり

なにをつくるかも変わってきたけど、どう作るかも結構変わった気がする。

Nuxt+TypeScript+Firebaseの基本セットは確定だけど、
どこにデプロイするかは試行錯誤中。

作ってきたWebアプリのデプロイ先はこんな感じ。上から新しい順。

アプリ名	Cloud Run	GAE	Vercel	Netlify	Heroku	Firebase
積読ハウマッチ(新)	○
頭痛仲間		○
仲間カウント			○
FIND TWO			○
カブれこ				○
エア銭				○
へんあいマップ					○
積読ハウマッチ(旧)				○
便利サイト			○
トランスノート						○

2年前くらいはFirebase Hostingを使っていたけど、
Netlify→Vercel→GAE or Cloud Runという感じで移り変わってる。

というより、今までSPAだったけどSSRしたい、というのが主な理由。
それぞれの構成はこんな感じ。

アプリ名	デプロイ先	SSR	SSG	SPA
積読ハウマッチ(新)	Cloud Run	○
頭痛仲間	GAE	○
仲間カウント	Vercel	○
FIND TWO	Vercel	○
カブれこ	Netlify			○
エア銭	Netlify			○
へんあいマップ	Heroku	○
積読ハウマッチ(旧)	Netlify			○
便利サイト	Vercel		○
トランスノート	Firebase			○

Netlify最高だけど、SPAの初期ロードがやっぱりおそい。。
Vercelが簡単にSSRできるようになってよくなってきた
- デプロイしたらメールで通知してくれるので楽
- でも東京リージョンじゃないし、リクエストごとに起動なので遅い
- 規模が大きくなると、ファイルサイズの制限でデプロイできない
Cloud RunやGAEだと、ファイル制限やリージョンの設定もできる
- デプロイ時のメール通知やSlack通知も自分で設定可能

という経緯を経て、今はCloud RunやGAEかなという気持ち。
いろんなWebサービスを触ってみて、初期表示の速さをなんとかしたい感が強まってる。

いろいろ作ってみて

今年は割といろいろ作ってみたけど、至らなさを痛感する。

雛形のプロジェクトを作ったことで立ち上げ早くなったけど、
「最低限の機能を作って出す」というところ考え直すのがよいと感じがしてる。

たとえ、最低限の機能がある動くものがあっても、
　遅い / バグが多い / さわり心地が悪い
など、残念な部分が目立つと一瞬来てくるけど、継続しない。

また、お知らせや通知などの部分も初期では外しがちだけど、
継続に繋がる部分なので、『最低限の機能』に含めるべきだったと思う。

リリース時やアップデート時は、最初のピークなので、
来てもらった人にまた来てもらえる部分は最初に掴んでおけばよかったなと思う。

一発ネタならいいけど、そうじゃないのはちゃんと抑えておきたいところ。

来年はどうしようか

積読ハウマッチは引き続き、がんばるとして、
たくさん作りすぎて、よくわからなくなるので、
開発や管理を楽にするのを作りたいなぁとか思ってる。

なんだかんだ昔作ったAndroidアプリは着実に伸びてるので、
PUSH通知もできるFlutterにも手を出していきたい。

振り返ってみて、いろいろ思うところはあるけれど、
やっぱり、作りたい欲が高まるとなにか作っちゃうよね(´ω｀)

来年もゆるゆるがんばろう(´ω｀)

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でも。。
でも、サクサクできたのと、ドラッグで位置を変えれるみたいなので、いろいろできそう(´ω｀)

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

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で開発してます!

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

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

Flutterで画面遷移するときのいろいろ(Navigator / PageRouteBuilder)

2020-03-16T14:04:14+09:00

FlutterでWebアプリを作ってみたときに調べたときの備忘録。
画面遷移まわりをまとめてみた。

複数画面をルーティングする

Navigate with named routes - Flutter

ルーティングは、こんな感じででAppに設定する。

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      // デフォルトのルーティング
      initialRoute: '/',
      // ルーティングの一覧を設定
      routes: {
        '/': (context) => TopPage(title: "TopPage"),
        '/second': (context) => SecondPage(title: "SecondPage"),
      },
    );
  }
}

Navigator.pushNamedを使うと、パスで遷移できる

// Within the `FirstScreen` widget
onPressed: () {
  // Navigate to the second screen using a named route.
  Navigator.pushNamed(context, '/second');
}

戻るときは、popでできる。

// Within the SecondScreen widget
onPressed: () {
  // Navigate back to the first screen by popping the current route off the stack.
  Navigator.pop(context);
}

named routeでパラメタを渡す

Pass arguments to a named route - Flutter

オブジェクトで渡すことができるよう。
まずは、引数のクラスを作成。

class ScreenArguments {
  final String title;
  final String message;

  ScreenArguments(this.title, this.message);
}

引数を受け取るクラスはこんな感じ。
ModalRoute.of(context).settings.arguments;で取得する。

class ExtractArgumentsScreen extends StatelessWidget {
  static const routeName = '/extractArguments';

  @override
  Widget build(BuildContext context) {
    // 引数の受け取り
    final ScreenArguments args = ModalRoute.of(context).settings.arguments;

    return Scaffold(/* 略 */);
  }
}

引数ありで画面を呼び出すのはこんな感じ。

onPressed: () {                                               
  // argumentsに渡したい引数オブジェクトを設定する      
  Navigator.pushNamed(                                        
    context,                                                  
    ExtractArgumentsScreen.routeName,                         
    arguments: ScreenArguments(                               
      'Extract Arguments Screen',                              
      'This message is extracted in the build method.',       
    ),                                                                                                                 
  );                                                          
},

画面遷移の操作いろいろ

画面遷移のヒストリを操作する処理はいろいろある。

進む(push)
- push / pushNamed ... 進む
戻る(pop)
- pop ... 戻る
- popUntil .. 指定Routeまで戻る
組み合わせ
- popAndPushNamed ... popしてpushする
置き換え系(replace)
- replace ... 指定したRouteを置き換え
- replaceRouteBelow .. 指定したRouteの一つ前を置き換え
- pushReplacement / pushReplacementNamed ... 現在のRouteを置き換え
削除系(remove)
- removeRoute ... 指定したRouteを削除
- removeRouteBelow ... 指定したRouteの一つ前を削除
- pushAndRemoveUntil / pushNamedAndRemoveUntil ... pushしつつ、指定条件を満たすRouteを削除

一気に戻ったり、置き換えたりするときに使うことがある。

画面遷移時のアニメーション

画面遷移するときは、こんな感じだけど、

Navigator.pushNamed(
  context, 
  '/second', 
  arguments=ScreenArguments("title", "message"),
);

MaterialAppを使ってる場合はMaterialPageRouteを使ってこんな感じになってる。

Navigator.push(
  context,
  MaterialPageRoute(
    settings: RouteSettings(
      name: '/second',
      arguments: ScreenArguments("title", "message"),
    ),
    builder: (context) => SecondPage(),
  ),
);

画面遷移だけ、iOSっぽくしたい場合は、CupertinoPageRouteに変えればOK

Navigator.push(
  context,
  CupertinoPageRoute(
    settings: RouteSettings(
      name: '/second',
      arguments: ScreenArguments("title", "message"),
    ),
    builder: (context) => SecondPage(),
  ),
);

このPageRouteをカスタマイズすれば、画面遷移のアニメーションを変えられる。
PageRouteBuilderを継承すると作成できるらしい。

この記事で紹介されているスライドで遷移する例はこんな感じ。

class SlidePageRoute extends PageRouteBuilder {
  final Widget page;
  final RouteSettings settings;
  SlidePageRoute({this.page, this.settings})
      : super(
    pageBuilder: (
        BuildContext context,
        Animation animation,
        Animation secondaryAnimation,
        ) {
      return page;
    },
    transitionsBuilder: (
        BuildContext context,
        Animation animation,
        Animation secondaryAnimation,
        Widget page,
        ) {
      return SlideTransition(
        position: Tween(
          begin: const Offset(1, 0),
          end: Offset.zero,
        ).animate(animation),
        child: page,
      );
    },
  );
}

呼び出すときはこんな感じに。builderからpageに変わるので注意。

Navigator.push(
  context,
  SlidePageRoute(
    page: SecondPage()
    settings: RouteSettings(
      name: '/second',
      arguments: ScreenArguments("title", "message"),
    ),
  ),
);

以下のサイトにいろんなアニメーション/トランジションの例があるので、
参考にPageRouteBuilderを作っていけば、いろいろできる。

以上!!

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

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

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

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

参考にしたサイト様

Flutterで画面サイズや向きを取得する(MediaQuery/OrientationBuilder)

2020-03-16T12:26:54+09:00

画面のサイズ(MediaQuery/Size)

Flutterで画面サイズを取得するときは、MediaQueryを使うらしい。
Sizeを取得できるので、そこからいろいろする感じ。

@override
Widget build(BuildContext context) {
  // 画面サイズの取得
  final Size size = MediaQuery.of(context).size;
  // 横幅
  double width = size.width;
  // 高さ
  double height = size.height;
  // アスペクト比
  double aspectRatio = size.aspectRatio;
  // 長い方
  double longestSide  = size.longestSide;
  // 短い方
  double shortestSide = size.shortestSide;

  return new Container();
}

画面の向き(OrientationBuilder/Orientation)

画面の向きによってレイアウトとかを変えたい場合は、OrientationBuilderをつかうよう。

公式CookbookのUpdate the UI based on orientationに書いてあった。

@override
Widget build(BuildContext context) {
  return OrientationBuilder(
    builder: (context, orientation) {
      return GridView.count(
        // 縦長の場合は2列、横長の場合は3列のGridView
        crossAxisCount: orientation == Orientation.portrait ? 2 : 3,
        children: [/*...*/]),
      );
    },
  );
}

以上！！

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

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

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

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

参考にしたサイト様

初めてFlutterでWebアプリをつくってみたときに思ったこと

2020-03-16T11:29:49+09:00

はじめてFlutterをつかったみたときの備忘録というか所感。
Crieitの1週間でWebサービスをつくる企画 web1weekがあったので、
なかなかやる機会がなかったFlutterに手を付けてみた(´ω｀)

#web1week 間に合った...(*´ω｀*)たし算ゲーム「たすたすたしざん」をつくりました！！ - （3/9～3/15）１週間でWebサービスを作るイベント - お題「Home」 - Boards - Crieit https://t.co/9EhCCepYsm
— 積読ハウマッチ📚きらぷか (@kira_puka) March 14, 2020

やってみるといろいろ気になるところが出てきたので、整理がてらメモ。

はじめるときやったこと

ここの書き方とかは個別に記事にする予定なので、ここはざっくり全体のことだけ。
シンプルなFlutter WebをGitHub Pageで公開した感じ。

Flutter自体やAndroidStudioのインストールは済んでいたので、その後から。

構成を考える

とりあえず、どういうパッケージ構成が良いのかなと、ざっくりいろいろ見てみた。

参考にしたサイト
- mono0926/flutter_navigation_example
- https://twitter.com/ampersand000/status/1225344767115976705
- flutter/samples: A collection of Flutter examples and demos.
- 管理しやすい(と思う)Flutterプロジェクトのディレクトリ構造 - Qiita

シンプルなのだったので、とりあえず、以下の感じ。

- configs   ... 定数とか設定関連
- models    ... モデルとかコアの処理とか
- pages     ... ページなどUI関連
  - widgets ... ページ内で使うWidget群
- main.dart ... メイン。テーマのカスタムやルーティングも。

処理も少なく、DBもFirebaseもないので、最小構成な感じ。

Flutter Webを有効化する

まずはFlutter Webはベータ版なので、
公式サイトみながら有効化する。

$ flutter channel beta
$ flutter upgrade
$ flutter config --enable-web

プロジェクトを作る

Android Studioから。「Start a new Flutter project」を選んで、
ポチポチしていけばOK。アプリと変わらない。

実行

エミュレータの選択する部分で「Chrome(web)」とかが増えているので、
「Chrome(web)」を選んで実行すると、Chromeの新しいウィンドウで起動してくれる。

もちろん、HotReloadも効くけど、ガラッと変えるとリロードが必要になる。

Web向けの変更

Android/iOSごとの設定と同様に、Web版も個別設定ができる。
web/配下のファイルを修正すればOK。

今回のでは主に、以下を変更。

メタタグの変更: index.htmlにdescriptionやOGタグを変更
ファビコンなどの配置: icons配下にfavicon.icoなどを配置
マニフェストの修正: PWAとして公開されるっぽいので、アプリ名などを設定

ビルド

リリース用にビルドする方法は以下の感じ。

# Web版のビルド
$ flutter build web

実行すると、build/web/配下にファイルが生成される。

あとは、生成されたファイルをアップロードすればOK。

GitHub Pageで公開するときの注意点

GitHub Pageに公開するときにちょっとハマった。。

web/配下のindex.htmlやmanifest.jsonを修正した際、
/manifest.jsonとしていたが、

リポジトリ名もパスにいれないとだめだった。。

Flutter Webを使ってみた所感など

調べて制限事項だったり、迷ったり、こうすればよかったかもという所感とか。
初Flutterなので、解消していきたい疑問とかを列挙してみた。

【制限】動的にメタ情報を変更できない

上記で修正したように、Flutter上でメタ情報を設定できず、
web/index.htmlを修正しなければならない。

以下のissueにも上がっている。
・Server-side rendering for Flutter web · Issue #47600 · flutter/flutter

なので、CGM系サービスで投稿ごとにOGP画像を変えたりすることは現状難しいっぽい。

(以下のIssue #33245にあるようなdart:htmlをつかってゴリゴリ書き換えればいけるかも？だけど未確認。。)

【制限】URLに`#`がつく

namedRouteでパスを設定できるがURLに#がつく。

以下のissueにワークアラウンドが紹介されているが、まだっぽい。。？
・Flutter_web navigation should provide a way to remove hash symbol(#) · Issue #33245 · flutter/flutter

【反省】UIを全部Dartで書くので意識しないとカオスになる。。

Webみたいに、構造/装飾/動作がHTML/CSS/JavaScriptのように分かれていないため、
すべてがごちゃまぜになったFatなdartファイルが簡単に作れてしまう。。

VueのSFCのようにひとまとまりのコンポーネントにするのが良いのか？

役割ごとにかき分けるのが良いのか、単一ファイルコンポーネントが良いのかを含め、
どう書き分けるのがよいかなども気になるので、いろいろ見ていきたい。。

【反省】最初はStatelessだけでモックアップをつくるのがよいかも？

とりあえず、StatefulWidgetをつかって、部分的にStatelessWidgetにしていたけど、
いくつか本を読みながら、学びながらやっていたこともあり、ぐちゃぐちゃに。。

まずはUIを作って、あとから状態が必要な箇所をStatefulにしていくほうがよかったかもしれない。
BLoCパターンなどはまだ試せていないので、そのあたりも見ていきたい。

【疑問】パラメタに応じてリダイレクトするみたいな処理はどう書く？

「ログインが必要な画面で未ログインだと、ログインページに飛ばす」
みたいな処理を書きたかったけど、conextがないとNavigatorを呼べない。。

今回はそこまで重要じゃない＆時間がないので省略したけど、
どうするのがいいか気になる。。

【疑問】デプロイの自動化とかどうするんだろう？

Flutterをインストールしないとビルドできないので、
現状ローカルでビルドしている感じ。

今後CIサービスでFlutterのビルドができるようになっていくのだろうか？

まとめ

簡単にWebアプリを作れてHotReloadもいい感じだけど、
まだまだissueがあり、思ってるWebサービスとはギャップがある感じ。

個別の処理とかはよく見るけど、全体的な方法論とか気になるところがまだまだあるので、
いろいろ見ながら、サクサク作れるようになりたい( ﾟдﾟ)!

以上!!

作ったアプリはこちら

たすたすたしざん

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

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

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

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

PAAPI v5に移行してみた: Node.js版

2020-03-07T17:25:02+09:00

積読ハウマッチでAmazonのPAAPIを使っているけど、
v4が2020年3月9日に利用できなくなるため、移行してみたときの備忘録。

以前は、node-apacを使ってたけど、対応はなさそう。

Amazon側の移行手順

公式の移行手順を参考に進める感じ。

ステップ1：新しい認証情報を取得する

認証情報の形式が古いと払い出しが必要らしい
いままで使っていたアクセスキーとシークレットキーでOKだったのでスキップ

ステップ2： PA-API 5.0を試してみる

以前と同様、Scratchpadが用意されている。
アクセスキーがOKだったかも、ここで確認した。
・Product Advertising API 5.0 Scratchpad

ステップ3：必要な知識を得る

公式ドキュメントにも書いてあるとおり、レスポンスがXMLからJSONになったらしい。

変更点は、ここにまとまっている。
主には、セキュリティ強化、レスポンス速度の改善、新しいAPIの追加など。

また、レスポンスに関してv4からv5へのマッピングも用意されてる。
・PA-API 4.0 to 5.0 Mapping · Product Advertising API 5.0

ステップ4： PA-API 5.0を導入する

従来どおり、Web APIを直接叩けるけど、SDKも提供されている。
言語は、Java / Node.js / PHP / Pythonの4つ。サンプルもある。
・Using SDK · Product Advertising API 5.0

ただ、残念なことに、Node.jsのSDKは、zipで公開されている...

ソース側の移行手順

SDKを配置

zipをダウンロードして展開するとこんな感じになってる。

src配下がAPIなので、自分のソースに配置。

dependencyがあるので、それもコピペして、npm iする

"dependencies": {
  "superagent": "3.5.2",
  "crypto-js": "^3.1.9-1"
},

APIの呼び出し

解答したzipにサンプルがあるので、それを見ながら実装していく。
使っているのは検索なので、sampleSearchItemsApi.jsを参照。

以下は、サンプルの抜粋

// ** API Clientの準備
var ProductAdvertisingAPIv1 = require('./src/index');
var defaultClient = ProductAdvertisingAPIv1.ApiClient.instance;

// アクセスキーなどを設定。ホストとかリージョンは、以下を参照
// https://webservices.amazon.com/paapi5/documentation/common-request-parameters.html#host-and-region
defaultClient.accessKey = '';
defaultClient.secretKey = '';
defaultClient.host = 'webservices.amazon.co.jp';
defaultClient.region = 'us-west-2';


// ** リクエストの生成
var searchItemsRequest = new ProductAdvertisingAPIv1.SearchItemsRequest();

// アソシエイトタグを設定
searchItemsRequest['PartnerTag'] = '';
searchItemsRequest['PartnerType'] = 'Associates';

// 検索リクエストを設定。SearchIndexは以下を参照
// https://webservices.amazon.com/paapi5/documentation/use-cases/organization-of-items-on-amazon/search-index.html
searchItemsRequest['Keywords'] = 'Harry Potter';
searchItemsRequest['SearchIndex'] = 'Books';
searchItemsRequest['ItemCount'] = 2;

// 取得するレスポンスの指定
// https://webservices.amazon.com/paapi5/documentation/search-items.html#resources-parameter
searchItemsRequest['Resources'] = ['Images.Primary.Medium', 'ItemInfo.Title', 'Offers.Listings.Price'];

// ** コールバックの設定
var callback = function (error, data, response) {
  if (error) {
    // エラーの場合
    console.log('Status Code: ' + error['status']);
  } else {
    // レスポンスを取得
    var searchItemsResponse = ProductAdvertisingAPIv1.SearchItemsResponse.constructFromObject(data);
    if (searchItemsResponse['SearchResult'] !== undefined) {
      // 1件目の結果を取得
      var item_0 = searchItemsResponse['SearchResult']['Items'][0];
      if (item_0 !== undefined && item_0['ASIN'] !== undefined) {
        console.log('ASIN: ' + item_0['ASIN']);
      }
    }
    // エラーが返ってきた場合
    if (searchItemsResponse['Errors'] !== undefined) {
      var error_0 = searchItemsResponse['Errors'][0];
      console.log('Error Code: ' + error_0['Code']);
      console.log('Error Message: ' + error_0['Message']);
    }
  }
};

// ** APIの実行
var api = new ProductAdvertisingAPIv1.DefaultApi();
try {
  api.searchItems(searchItemsRequest, callback);
} catch (ex) {
  console.log('Exception: ' + ex);
}

対応が必要だった点

基本的にパラメタがわかったため、一致してるものを探していけばOK。
変更自体はそこまでだけど、できることが変わっているので注意...

リクエスト関連

MerchantIdがMerchantになっていた。設定値は変わらず
SortがSortyByになり、設定値も変更
PowerSearchが廃止に...つまり、除外や期間指定ができない

レスポンス関連

全体的に変更。XMLからJSONになっており、構成も変わっている
発売日がUTCになり、時刻まで記載
エラーメッセージも全体的に変わっているので対応が必要
バリエーションが除外され、GetVariations APIが新設(リクエスト数が増...)
ただ、電子書籍の価格が取得できるようになった

よく参照したURL

とにかく、以下を読みまくった。。

Operations関連: リクエストパラメタとか。指定できるレスポンスもここ
- SearchItems ... 検索
- GetItems ... ASINから商品情報取得
- GetVariations ... ASINからバリエーション情報取得
Resource関連: レスポンスの内容
- ItemInfo ... 商品情報
- Images ... 画像関連
- Offers ... 価格関連
共通のリクエストパラメタ関連
- 日本のMarketplaceとかの情報
- 共通のリクエストパラメタ ... HostやRegionもここ
共通のレスポンス関連
- エラーメッセージ
マイグレーション関連

以上!!

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

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

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

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

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

以上!!

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

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

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

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

参考にしたサイト様

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アプリです!

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

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

参考にしたサイト様

Retrofit2で自己証明書のサーバへのアクセスできるようにする

2020-02-19T19:55:15+09:00

Retrofit2でオレオレ証明書なサーバにアクセスすると、
こんなエラーが出る。その時の対処方法の備忘録。

java.security.cert.CertPathValidatorException: Trust anchor for certification path not found.
    javax.net.ssl.SSLHandshakeException: java.security.cert.CertPathValidatorException: Trust anchor for certification path not found.
        at com.android.org.conscrypt.OpenSSLSocketImpl.startHandshake(OpenSSLSocketImpl.java:361)

ソース

こんな感じ。Retrofit2の内部で利用しているOkHttpClientのカスタマイズし、
安全でない証明書でも許可するように変更する。

開発中など一時的な感じで使う。

import com.google.gson.FieldNamingPolicy;
import com.google.gson.Gson;
import com.google.gson.GsonBuilder;

import java.security.cert.CertificateException;
import java.util.concurrent.TimeUnit;

import javax.net.ssl.HostnameVerifier;
import javax.net.ssl.SSLContext;
import javax.net.ssl.SSLSession;
import javax.net.ssl.SSLSocketFactory;
import javax.net.ssl.TrustManager;
import javax.net.ssl.X509TrustManager;

import okhttp3.OkHttpClient;
import okhttp3.logging.HttpLoggingInterceptor;
import retrofit2.Retrofit;

public class ApiClientFactory {

    // ApiClientを生成する処理
    public ApiClient getApiClient(String baseUrl) {
        return new Retrofit.Builder()
                .baseUrl(baseUrl)
                .client(getHttpClient())
                .build()
                .create(ApiClient.class);
    }

    private OkHttpClient getHttpClient() {
        HttpLoggingInterceptor interceptor = new HttpLoggingInterceptor();
        interceptor.setLevel(HttpLoggingInterceptor.Level.BODY);

        // return new OkHttpClient.Builder()
        // 通常のBuilderの代わりに、カスタマイズしたBuilderを使う
        return getUnsafeOkHttpClient()
                .readTimeout((15 * 1000), TimeUnit.MILLISECONDS)
                .writeTimeout((20 * 1000), TimeUnit.MILLISECONDS)
                .connectTimeout((20 * 1000), TimeUnit.MILLISECONDS)
                .addInterceptor(interceptor)
                .build();
    }

    private static OkHttpClient.Builder getUnsafeOkHttpClient() {
        try {
            // Create a trust manager that does not validate certificate chains
            final TrustManager[] trustAllCerts = new TrustManager[]{
                    new X509TrustManager() {
                        @Override
                        public void checkClientTrusted(java.security.cert.X509Certificate[] chain, String authType) throws CertificateException {
                        }

                        @Override
                        public void checkServerTrusted(java.security.cert.X509Certificate[] chain, String authType) throws CertificateException {
                        }

                        @Override
                        public java.security.cert.X509Certificate[] getAcceptedIssuers() {
                            return new java.security.cert.X509Certificate[]{};
                        }
                    }
            };

            // Install the all-trusting trust manager
            final SSLContext sslContext = SSLContext.getInstance("SSL");
            sslContext.init(null, trustAllCerts, new java.security.SecureRandom());

            // Create an ssl socket factory with our all-trusting manager
            final SSLSocketFactory sslSocketFactory = sslContext.getSocketFactory();

            OkHttpClient.Builder builder = new OkHttpClient.Builder();
            builder.sslSocketFactory(sslSocketFactory, (X509TrustManager) trustAllCerts[0]);
            builder.hostnameVerifier(new HostnameVerifier() {
                @Override
                public boolean verify(String hostname, SSLSession session) {
                    return true;
                }
            });
            return builder;
        } catch (Exception e) {
            throw new RuntimeException(e);
        }
    }
}

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

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

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

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

参考にしたサイト様

Cloud FunctionとSVGでOGP画像生成を試行錯誤したまとめ

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

Nuxt+Firebaseで開発してるサービスのOGP画像を改善しようと、
いろいろ試してみたときの備忘録。

OGP画像の生成はクライアント側とサーバ側かがあるが、
Firestoreの変更に合わせて生成したいので、
Cloud Function上で利用できる方法を考えてた。

結果的に、

sharpで画像を合成してベースをつくり
ImageMagickで文字を追記していく

という構成になった。その試行錯誤の備忘録です。

やりたかったこと

背景画像+本の画像+文字みたいなOGP画像にしたい。

あと、座標の指定はめんどくさいので、楽な方法を探してみた。
SVGだとCSSも使えて、ブラウザ上で書くにできるので良さそう。
(と思ったけど、結果、だめだった...)

ためした方法とまとめ

試したのは以下の4パターン。
SVG+sharpで試した感じ。
node-canvasはおまけな感じ程度。

sharp+SVG(style+foreginObject)
- SVGですべて構成する方法。
- フォントとか位置、サイズはstyleで設定
- 外部URLの画像が取得できずにNG
sharp+SVG+画像は別で合成
- 1.の画像部分を別で合成するパターン
- カスタムフォントが設定できずNG
sharp+SVG+ImageMagick
- 画像の合成部分のみsharpをつかい
- 枠線をSVG、文字はImageMagickで書き出し
- これを採用
node-canvas+SVG
- node-canvasもSVGを入力にできるようなので試した
- 1.や2.と同様の理由でNG

内部で利用しているSVGライブラリ自体で未対応っぽいので、
SVGのstyleや外部URLの画像、カスタムフォントなどは、
ブラウザ上以外の画像生成ではまだ未対応っぽい。

ほかにも、CloudFunction上でpuppeteerを使えるようだけど、
メモリをすごい使うっぽい記事を見てしまい、まだためしてない。。

以下試したコード。

SVG(style+foreginObject)

sharpが、foreignObject+sytleに未対応...のためNG
imageに外部URLを使っているとダメっぽい...

import sharp from "sharp";

await sharp("./input.svg")
  .png()
  .toFile("./output.png");

SVG+外部URLの画像

SVGには文字とかだけにして、画像はファイル読み込みで対応
カスタムフォントが使えない...のNG
GAEかlamdaだと、fontconfigに関する環境変数を設定できるが、Cloud Functionでは無理そう
fonts.confを設定してもダメだった...

import axios from "axios";
import sharp from "sharp";

// 埋め込む画像のURL
const bookURL = "https://.../thumbnail.png";
const bookBuffer = await axios.get(bookURL, { responseType: "arraybuffer" });

// URLから取得した画像を加工(リサイズ)
const bookImage = await sharp(bookBuffer.data)
  .resize(520, 454, { position: "top" })
  .toBuffer();

// sharpで結合
await sharp("./background.png") // 背景画像を読み込み
  .composite([
    { input: bookImage, gravity: "south" }, 本の画像を書き出し
    { input: "./input.svg" } // SVGの書き出し
  ])
  .png()
  .toFile(tempFile);

SVG+ImageMagick

画像の加工や合成はsharpを使い、文字の書き出しだけImageMagickを使う
画像の加工・合成部分は、上の「SVG+外部URLの画像」と同じ感じ
ImageMagickで文字を書くのは以下の記事を参照
- Cloud Functions + ImageMagickでOPG画像の動的生成してCloud Storageにアップロードする - くらげになりたい。

node-canvas+SVG

同じくダメ。imageタグの外部URLがNG+foreignObject未対応...
Automattic/node-canvas: Node canvas is a Cairo backed Canvas implementation for NodeJS.

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

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

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

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

参考にしたサイト様

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)まで♪

参考にしたサイト様

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されてしまう...

参考

カスタムドメインの設定

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)まで♪

参考にしたサイト

Nuxt+Firebaseでセッション管理: PWA(Service Worker)編

2019-12-29T19:07:03+09:00

FirebaseとSSRなNuxt.jsでアプリを作っていて、
クライアント側で認証チェックするとFirebaseの初期化などでラグが...
サーバ側で認証情報とかを取得してもう少しなんとかできないかなと。

まだベータっぽい?けど、公式の以下の内容を試してみたときの備忘録。

Service Worker によるセッション管理 | Firebase

よく出てくる言葉

単語はよく聞くけど、ちゃんと見てなかったので、ざっくりとしたまとめ

PWA: ネイティブアプリみたいなUXを提供するWebアプリ
- Progressive Web Apps | Google Developers
Service Worker: PWAを実現するための基盤技術。独自のライフサイクルを持ってる
- Service Worker の紹介 | Web Fundamentals | Google Developers
Workbox: PWAでよく使うコード(ボイラープレート)やベストプラクティスを提供するライブラリ
- Workbox | Google Developers
Nuxt PWA: NuxtでPWAするときに使うプラグイン。workboxを使ったService Worker(sw.js)とかを生成してくれる
- ⚡ Nuxt PWA

Nuxt PWAを使ってみる

インストール

$ npm install @nuxtjs/pwa

設定

設定は簡単。modulesに@nuxtjs/pwaを追加するだけ。

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

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

export default config;

Firebase Authと組み合わせる

このあたりを見つつ、Firebase Authの情報を扱えるようにする。
- Service Worker によるセッション管理 | Firebase
- Firebase (Hosting × Functions) × Nuxt.js (universal) でユーザ認証のベストプラクティスを探る旅その２ - Qiita

流れ的には、以下の通り。

Firebase Auth用のService Workerの作成して、リクエストにIDトークンを付与するように変更
作成したService Workerを使うよう、nuxt.config.tsに設定を追加

Firebase Auth用のService Workerの作成

長めだけど、ほぼ公式ドキュメントのまま。

// ~/static/sw-firebase-auth.js

// firebaseを初期化
firebase.initializeApp({
  apiKey: /* API_KEY */,
  authDomain: /* AUTH_DOMAIN */,
  databaseURL: /* DATABASE_URL */,
  projectId: /* PROJECT_ID */,
  storageBucket: /* STORAGE_BUCKET */,
  messagingSenderId: /* MESSAGING_SENDER_ID */,
  appId: /* APP_ID */,
  measurementId: /* AUTH_DOMAIN */
});

// onAuthStateChanged()で現在のuserからidTokenを取得
const getIdToken = () => {
  return new Promise((resolve, reject) => {
    const unsubscribe = firebase.auth().onAuthStateChanged(user => {
      unsubscribe();
      if (user) {
        user.getIdToken().then(
          idToken => resolve(idToken),
          error => resolve(null)
        );
      } else {
        resolve(null);
      }
    });
  });
};

// URLからルートのURLを取得する処理
const getOriginFromUrl = url => {
  // https://stackoverflow.com/questions/1420881/how-to-extract-base-url-from-a-string-in-javascript
  const pathArray = url.split("/");
  const protocol = pathArray[0];
  const host = pathArray[2];
  return protocol + "//" + host;
};

/**
 *  Service Workderのライフサイクルでfetchしたときの処理
 */
self.addEventListener("fetch", event => {

  // リクエストをラップして、ヘッダにFirebase AuthのIdTokenを追加する処理
  const requestProcessor = idToken => {
    let req = event.request;
    // URLを取得して、httpsもしくはlocalhostかなどをチェック
    if (self.location.origin == getOriginFromUrl(event.request.url) &&
      (self.location.protocol == "https:" || self.location.hostname == "localhost") &&
      idToken
    ) {
      // ヘッダ情報をクローンする
      const headers = new Headers();
      for (let entry of req.headers.entries()) {
        headers.append(entry[0], entry[1]);
      }
      // クローンしたヘッダにFirebase AuthのIdTokenを追加
      headers.append("Authorization", "Bearer " + idToken);
      try {
        req = new Request(req.url, {
          method: req.method,
          headers: headers,
          mode: "same-origin",
          credentials: req.credentials,
          cache: req.cache,
          redirect: req.redirect,
          referrer: req.referrer,
          body: req.body,
          bodyUsed: req.bodyUsed,
          context: req.context
        });
      } catch (e) {
        console.error(e);
      }
    }
    return fetch(req);
  };

  // 上の関数を使って、全リクエストでIdTokenの取得し、Firebase AuthのIdTokenを追加ようにする
  event.respondWith(getIdToken().then(requestProcessor, requestProcessor));
});

/**
 *  Service Workderのライフサイクルでactivateしたときの処理
 */
self.addEventListener("activate", event => {
  event.waitUntil(clients.claim());
});

やっていることは、以下のような感じ。

リクエストするときに、
現在のユーザからIDトークンを取得して
IDトークンをリクエストヘッダーに追加する

ヘッダーにIDトークンが付与されているので、
サーバ側でそれを見て、認証済みかをチェックする。

nuxt.config.tsへの取り込み

作成したサービスワーカを使うように、nuxt.config.tsに設定を追加する。
ドキュメントだとこのあたりを参照。

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

const config: Configuration = {
  // ...略
  modules: [
    // ... 略
    "@nuxtjs/pwa",
  ],
  workbox: {
    // 追加するスクリプトを指定。
    // バンドルされないので、CDNのfirebase-appを追加しておく。
    importScripts: [
      "https://www.gstatic.com/firebasejs/7.6.1/firebase-app.js",
      "https://www.gstatic.com/firebasejs/7.6.1/firebase-auth.js",
      "sw-firebase-auth.js"
    ],
    // 開発中でもsw.jsが生成されるように設定。
    dev: process.env.MODE != "production",
  },
  // ...略
};

export default config;

nuxtServerInitなどで認証状態をチェックする

IDトークンもJWTデコードすると、UIDを取得できるけれど、
有効かどうかをfirebase-adminでチェックする必要がある。

なので、まずは、firebase-adminのインスタンスを初期化するファイルを用意。

// ~/utils/firebaseAdmin.ts
let admin;

if (process.server) {
  admin = require("firebase-admin");
  if (!admin.apps.length) {
    const serviceAccount = require("./path/to/your/key.json");
    admin.initializeApp({
      credential: admin.credential.cert(serviceAccount),
      databaseURL: "https://your-database-url.firebaseio.com"
    });
  }
}

export default admin;

次にこれを使って、以下をしていく。

リクエストヘッダからIDトークンを取得し、
firebase-adminを使ってIDトークンの有効性を確認

以下は、vuex-module-decoratorsを使ったnuxtServerInitでチェックするサンプル。

// ~/store/index.ts

import { Context } from "@nuxt/types";
import { ActionContext } from "vuex/types";
import { ActionTree, Store } from "vuex";
import { initialiseStores } from "~/utils/store-accessor";

export const state = () => ({});
export type RootState = ReturnType;

const initializer = (store: Store) => initialiseStores(store);
export const plugins = [initializer];

export const actions: ActionTree = {
  async nuxtServerInit(
    context: ActionContext,
    server: Context
  ) {
    // requestのAuthorizationからIDトークンを取得
    const authorizationHeader = req.headers.authorization || "";
    const components = authorizationHeader.split(" ");
    const token = components.length > 1 ? components[1] : "";
    if (!token) return;

    // firebase-adminの初期化
    const admin = require("~/utils/firebaseAdmin").default;
    if (!admin) return;

    // IDトークンの検証: 有効期限などをFirebaseでチェック
    const decodedClaims = await admin.auth().verifyIdToken(token);

    // 検証結果からUIDを取得
    const uid = decodedClaims.uid;

    // TODO: 認証状態に応じてなにかする
  }
};

export * from "~/utils/store-accessor";

firebase-adminを取得する部分を

const admin = require("firebase-admin");

としていたり、if (process.server)やif (!admin.apps.length)などのチェックをせずにいたら、
クライアント側でもバンドルされていて、うまく動かいない状態に...

注意点

これで認証が必要なページでもいい感じSSRできた気がする(´ω｀)

ただ、課題が残っていて、スーパーリロード/ハードリロードすると、
Service Workderを介して、リクエストされないので、ヘッダに認証情報が付与されない...

ログを見ていると、スーパーリロード時には、描画されたあとに、Service Workderの登録されているよう。

そういった場合でも、利用したい場合には、従来のセッションCookieを利用する方法がよいかも？

セッション Cookie を管理する | Firebase

(もし良い方法があれば、教えてほしいです...)

おまけ: Service Workerのライフサイクル

ここに書いてあった。
- Service Worker の紹介 | Web Fundamentals | Google Developers

以上!!

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

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

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

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

きらぷか@積読ハウマッチ/SSSAPIなどの投稿 - Crieit

初のSaaSが12月で1周年なので振り返ってみた

個人開発ふりかえり ver.2021年

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

つくってるWebサービスのユーザ数が15倍になったときにやった5つのこと。

Firestore最高だけど、初期データとかマスタデータ管理がめんどくさいので、スプレッドシートをAPI化サービスを作ってみた

2020年の個人開発を振り返ってみた

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

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

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

Flutterで画面遷移するときのいろいろ(Navigator / PageRouteBuilder)

Flutterで画面サイズや向きを取得する(MediaQuery/OrientationBuilder)

初めてFlutterでWebアプリをつくってみたときに思ったこと

【制限】URLに#がつく

PAAPI v5に移行してみた: Node.js版

【制限】URLに`#`がつく