Nuxt.jsとFirebaseで作っていたWebサービスを7月末にリリースして、はや3ヶ月。。 RDB脳なのでFirebaseを使った開発でいろいろとハマった。。そのポイントを整理してみました。 Firebaseをはじめようとしている人の一助になれば。 Nuxt.js(SPA)+Firebaseで作っています！ 以前、以下のような記事を書いたのですが、そのFirebase関連ぽいまとめです。 ・Nuxt.js(SPA)+Firebaseで積読用の読書管理サービスを作ってみたときにハマったこと... - Qiita 前回同様、内容的にはドキュメントをよく読めば書いてあることばかりですが、 実際に運用したり、機能追加したりする時に、気づくので、手戻りが多く... あらかじめ、知っていたら良かったなと思う点をまとめています。 Firebaseはとてもよいですが、RDBに慣れ親しんでいると、 思

最近Nuxt.jsでWebアプリを作ってるけど、 度重なる改修でVueコンポーネントが乱立。。 使ってないのもたくさんありそうなので、調べるスクリプトを作ってみた。 スクリプトはこんな感じ #!/bin/bash # vueコンポーネントの一覧を取得 FILES=`find components -name "*.vue"` for i in $FILES; do # 全体からコンポーネントをインクルードしている行の数を取得 NUM=`grep -r "$i" * | wc -l | sed -e "s:[^0-9]*::g"` # ファイル名と見つけた件数を表示 echo "** ${NUM}: ${i}" # grepした結果を表示(確認用) grep -r "$i" * echo "" done ** 1: components/Hero.vue pages/index.vue:im

どうも、きらぷかです。今年もあっというまに読書の秋。 読書は好きなんですが、気になる本を買って満足してしまい、 積ん読が多いのが悩みのタネ。。 特にビジネス書や技術書など、分厚くて値段も高いものだと更に。。 そんな積ん読の多い自分のために、Webサービスを作ってみました！ その名も「積読ハウマッチ」 積んでる本の総額がわかる読書管理アプリです。 積んでる本を金額で確認することで、 「こんなに積んでる!? 読まなきゃ!!」 を促すサービスとして作ったんですが、 ほかにも楽しめるなと思い、10個PickUpヽ(=´▽`=)ﾉ 積読ハウマッチの楽しみ方 1. 積読してる本を登録して、儲かった気になる 2. 読了した本を登録して、がんばったを金額で確認する 3. 積みました！読みます!を宣言して、応援してもらう 4. 読了しました！を報告して褒めてもらう 5. 積ん読ランキングを見て、安心する 6

個人開発界隈、 毎月報告ししていて、おもしろそうだなと。。 あたかさんとかnabettuさんとかTAKASHIさんとかTAKUYAさんとか。。 受託以外でもたべていけるようになりたい。。 なので、今月からやってみようかなと(´ω｀) 9月の振り返り 積読ハウマッチ 7月末にリリースした読書管理サービス。 積読を読まなきゃ！を促進したいと思って、 登録した本の総額を計算するサービスを作ってみましたヽ(=´▽`=)ﾉ だいぶユーザも登録書籍も増えてきて、 自分では見つけられない本と出会えるようになってきた♪ tsundoku.site やったこと: 11回アップデート🚀 振り返ってみると、11回もアップデートしてた(´ω｀) 2019/09/02 読書メモ機能を追加 ✨ 2019/09/08 読書メモを改善 ✨ 2019/09/09 洋書検索に対応 ✨ 2019/09/10 FAQ と更新情

puppeteer初心者がTwitterブックマークをエクスポートするツールを作りながら、使い方をまとめてみたNode.jsTwitterスクレイピング個人開発puppeteer ふと、puppeteerがおもしろそうだなと思い、前から欲しかった TwitterブックマークをJSONファイルにエクスポートするツールを題材に、 いろいろ遊んでみた時に備忘録。 puppeteerはサクッと使えるので、すてき(´ω｀) 作ったもの こんな感じで勝手に操作してエクスポートしてくれます(´ω｀) puppeteerで自動ログインして、ブクマをJOSNでエクスポートできるように(´ω｀) わかりやすいように背景色を変えたりしてる(´ω｀) pic.twitter.com/UJiGAiw5KN — 積読ハウマッチ📚きらぷか (@kira_puka) October 1, 2019 最終的なソースコード

開発しているWebサービスで、本番データの一部を開発用に使いたいと思ったときの備忘録。 firebase-adminは複数のプロジェクトで使えるらしい。 開発用だけじゃなく、UIDを変更しながらのデータ移行などにも使えそう。 ローカル環境でfirebase-adminを使うための準備 準備の部分は、以前まとめたこちらを参照ください〜 - ローカルPCからfirebase-adminを使ってFirestoreを操作する(管理ツール) - くらげになりたい。 ソースはこんな感じ。 const admin = require("firebase-admin"); // *** 移行元のプロジェクトの設定 const srcSA = require("./key/XXXXX.json"); // サービスアカウントの秘密鍵を取得 // firebase-adminの初期化 admin.initia

別の記事を書く前に、いろいろ試したことの備忘録。 Firestoreのデータをいろいろ見たかったけど、 別プロジェクトの移動してみることにした経緯のまとめ。 試したのは以下の3つ エクスポートデータをBigQueryにインポートしてBigQuery上で確認 node-firestore-import-exportを使ってローカルのJSONファイルとしてエクスポートして確認 別プロジェクトにデータを移行して、別プロジェクト上で確認(この記事) それぞれの方法と注意点は以下の通り。 1. BigQueryにインポートして確認 公式ドキュメントなどで紹介されている通り、 FirestoreのデータをBigQueryにインポートできるらしい。 これが一番いい方法だが、後述するカラム10000制約に引っかかったので、諦める形に。。 流れとしては、こんな感じ。 バックファイルファイルを配置できるようC

Firestoreのデータをガリガリ見ていきたいなと思っていたら、 別のプロジェクトに移行できそうだったので、いろいろ調べたときの備忘録。 分析目的だけど、BigQueryは1000カラム制約で使えなかったので代替案... 別プロジェクトなら無料枠でいろいろできそう。 いろいろ試したけど、ダメだった経緯はこちらにまとめました。。 - Firestoreのデータを分析するための3つの方法とその注意点 - Qiita 注意 Firestoreのエクスポート/インポートについて、いくつか注意。 Firestoreのエクスポート/インポートはBlazeプランが必要(無料枠では不可) ドキュメントの読み取りと書き込み時にCloud Firestoreの料金が課金される さらに、 エクスポート / インポート オペレーションのコストは、費用制限の対象にはなりません。 オペレーションが完了するまで、エク

Nuxt.jsで開発しているWebサービスで、 棒グラフとか線グラフを使いたいなと思い、いろいろ調べた備忘録。 vue-chartjsを使うと、いい感じのグラフが簡単にできた(´ω｀) こんな感じで使ってます!! 登録されている本の総額と総冊数の推移を棒グラフと線グラフで表示!! 色も文字も変えられて、いい感じに(´ω｀) vue-chartjsの使い方 全体の流れはこんな感じ。 1. インストール 2. コンポーネントを作る 3. コンポーネントを配置する 1. インストール まずはインストール <!-- Template Tag can not be merged... --> <script lang="ts"> import { Component, Vue, Prop, Watch, mixins } from "nuxt-property-decorator"; import

Nuxt.jsでバーコードリーダを作ったら、いろいろハマった上にiOSのPWAでカメラにアクセスできなかった話Vue.jsWebサービスバーコード個人開発Nuxt Nuxt.jsで開発しているWebサービスにバーコードリーダ機能をつけようとしたら、 いろいろハマったので、そのときの備忘録。 利用したのはQuaggaJS。簡単に使えて便利(´ω｀) はまったポイントは、以下の4点... 1. httpsじゃないとカメラを取得できない 2. QuaggaJSで表示されてないHTML要素を指定するとエラー 3. size/width/heightを指定してもいい感じにならない 4. iOSのPWAではカメラにアクセスできない いろいろハマったけど、QuaggaJS自体がすごく良いので、サクッとできた♪ 作ったのはこんな感じ バーコードリーダ、できてきた♪ いい感じな気がする(´ω｀) pic.t

ノンデザイナーズ・デザインブックの感想文。 というか、気になった言葉のクリップ集。 好きな部分...(´ω｀) デザインには、そして人生にも、全般的に通用する方針がもう一つあります。 それは、臆病になるな、ということです。 これもすき(´ω｀) しかし、ルールを破るためのルールを覚えておいてください。 それは、ルールを破るためには、まずルールを知らなければならないということです これも〜(´ω｀) 活字はけっしてコミュニケーションを妨げてはならないのです。 デザイン(と言っても幅広いですが)に関して、まとめて理解できるのでよかった(´ω｀) p.13　4つの基本原則 コントラスト ... はっきり異ならせること 反復 ... 視覚的要素をくり返すこと 整列 ... 他の要素と視覚的な関連をもつこと 近接 ... 関連する項目は、近づけてグループ化すること p.15　近接の原則 近接の原則と

Nuxt.jsで開発しているけど、スワイプで画面遷移とかしたいなと思い、 いろいろ調べたときの備忘録。 vue-touch-eventsというのが良さそう(´ω｀) hammer.jsというライブラリのラッパーらしい。 hammer.jsではスワイプだけでなく、 Pan / Pinch / Press / Rotate / Tapも検知できるよう。すごい。。 インストール

NOWでデプロイできるGoogleフォームみたいに追記できるAPIを作ったので、GitHubに公開してみたGitHubgoogleapiFirebaseNOWNuxt Spread Sheet APIを見てたら、Googleフォームみたいに空いている行に追記できるらしい... 便利そうなので、汎用的に使えるようにNOW APIとしてデプロイできるようにしてみた＆GitHubにも公開してみた。 作ったもの GitHub: Append Row API using ZEINT NOW and Spread Sheet API こんな感じで、API叩くとスプレッドシートに追記できる。 使い方: デプロイする 1. git clone まずはgit clone 2. サービスアカウントのキーファイルの配置 credential.jsonというファイル名で、認証情報のキーファイルを配置 3. 追記し

Nuxt.jsでMarkdownファイルからFAQページなどを作れるようしてみた(.mdファイル内でコンポーネントも使える)MarkdownVue.jsWebサービスwebpackNuxt ほそぼそと作っているWebサービスの積読ハウマッチ、 Gigazineさんに紹介されました🎉🎉🎉 おかげさまでユーザやアクセスが増えたのですが、 問い合わせやコメントも急増したので、FAQを用意したほうがいいなと... Nuxt.jsのページのうち、FAQのような静的なページだけ、 Markdownで作成できないかを調査したときの備忘録。 環境はnuxt(2.8.1) / typescript(3.6.2) ちょっと長めですが... Markdownだけのシンプルな方法と Markdown内でVueコンポーネントを使う凝った方法 の2パターンをまとめています。 これを使うと一部のページをマークダウ

Nuxt.js製のWebサービスにmarked+highlightjsでMarkdownで書いた読書メモを表示できるようにしてみたCSSJavaScriptMarkdownVue.jsNuxt 先日、開発中の積読用の書籍管理アプリの新機能として、 Markdownで書ける読書メモを追加したので、その時の備忘録。 ✅読書中のメモが残せる読書メモ機能✨ 読書メモを残せる機能を追加しました‼️ マークダウンで書けて、全メモをクリップボードにコピーできちゃいます😊 はてなブログなどマークダウンが使えるなら、コピペで記事も書くことも😍 (続く pic.twitter.com/K3pjr4noVo — めもらば@公式 (@MemoryLoverz) September 1, 2019 全体の流れ やりかたとしては、こんな感じ 1. Markdownの文字列をmarkedを使ってHTML化 2. <

どうもきらぷかです。 最近、積んでる本の総額がわかる読書管理サービスをリリースしました!! リリース後のプロモーションはいつも困っているんですが、 いろいろ試していることをまとめてみました。 これから何かを作ろう、リリースしようとしている人の一助になれば。 やったこと/やっていることまとめ ざっくりとリリースしてからこんなことをしています! 登録サイトに投稿/依頼 いろんなとこで記事書く 進捗をつぶやく / 使い方とかTipsをつぶやく 1. 登録サイトに投稿/依頼 まずは、いろいろあるWebサービスを登録できるサイトに投稿!! このあたりに投稿や掲載依頼をしています♪ 全部で21サイト...大変なので、すこしずつ... サイト名 URL 開発会議 https://devtalk.jp/ Service Safari http://www.service-safari.com/ NewAp

だいたい5段階になってるっぽい。上限や下限がそれぞれ違うのがおもしろい(´ω｀) ちなみに単位はpx。収まらなかったので省略... 調べたのはこの7つ Bulma ... Responsiveness | Bulma Bootstrap ... Overview · Bootstrap Material Design ... Responsive layout grid - Material Design Vuetify ... Breakpoints — Vuetify.js Material-UI ... Breakpoints - Material-UI Element ... Component | Element Tailwind CSS ... Breakpoints - Tailwind CSS Material DesingはCSSフレームワークではないけど参考として。

総額を知れば積ん読も減らせる？総額を知れば解消する気が起きるかも! ランキングや書評・レビューを残せる読書メモ機能も。「積読ハウマッチ」は積んである本の総額がわかる書籍管理サービスです。積読消化の手助けに。

Nuxt.js(SPA)+Firebaseで積読用の読書管理サービスを作ってみたときにハマったこと... Nuxt.jsとFirebaseで作っていたWebサービスを7月末にリリースしました!! 開発中にいろいろとハマったので、そのポイントを整理してみました。 内容的にはドキュメントをよく読めば書いてあることばかりですが、 作った or 思いついた後に、ドキュメントを見つけるので、手戻りが多く... あらかじめ、知っていたら良かったなと思う点をまとめています。 作ったのはこんなサービスです！ 積んでる本の総額がわかる読書管理サービス 『積読ハウマッチ』 積んでいる本を登録する書籍管理サービスで、 すこし違うのは、積んでる本の総額がわかること。 積んでるだけの本の総額がわかるとすこしは読む気になるかなと(´ω｀) シェアしたときに金額が表示されるOGP画像も用意していて、 どれくらい積んだか

Nuxt.jsでプロジェクトをはじめるときにいつもやることが整理してみた。 モジュールが多いので、いろいろ設定が必要だけど、ヌケモレあったりするので。。 Nuxt.jsのバージョンは、2.5.1です。 いつもやることの概要 作成したいプロジェクトは以下な感じ TypeScript/Sassを使う、UIはBuefy/Bulma Firebase Hosting / Cloud Functionsを使ってSSR 英語版/日本語版と国際化したいので、nuxt-i18nも入れる SEOも気にするので、各種設定&各ページで個別にタイトルとかを設定 Google Analyticsやsitemapなどももちろん Firebaseへのデプロイは、CircleCIで自動化したい 最終的な例は、GitHubにおいています。 Nuxt.js Template using TypeScript, Sass an