はてなブックマーク

開発しているGoogleスプレッドシートのAPI化サービス「SSSAPI」。 無事にオープンβ版を公開できたので、利用技術や開発時にハマった点をまとめてみました。 なにかの参考になれば。 主な利用技術は、Nuxt/Firebase/Cloud Run/Cloudflareの4つです。 SSSAPIとは？ GoogleスプレッドシートのURLを登録すると、 JSONを返してくれるAPIを作成してくれるWebサービスです。 たとえば、こんなスプレッドシートだったら、 こんな感じの結果を返してくれます。 1行目がフィールド名になり、同じフィールド名がある場合は配列で返します。 $ curl -s "https://api.sssapi.app/FbhGsWrdhVXR9iHzYSdMs" | jq [ { "id": 1, "name": "Alice", group: ["A", "B"] }

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 最近Nuxtでいろいろ作っているけど、無料で使える環境をいろいろ試してる。 いろいろメリデメあるけど、SPAならNetlify/SSRならHerokuがよさそう。 いままで試したものをまとめてみた。 ほしかったもの 主に開発してるのがCGM系のWebサービスなので、 動的なOGP画像などが設定できる(OGP芸) カスタムドメインが使える 日次のランキング集計などの定期実行ができる が、無料でできて、なるべく実装が楽で、そこまで遅くないのがうれしい。 試した5つのパターン 試したのは以下の5パターン。試してみた順で記載。 Nuxt(SSR

Oracle Cloudで常時無料サービスが開始されたので使ってみた。 構成は、Django+nginx+uWSGI+Oracle Database+Oracle Linux 以下の3つの環境を作ってみたので、その時の備忘録。 ローカルの開発環境 ローカルでDockerを使った開発環境 コンピュート・インスタンスでの本番環境 とりあえず、Djangoの雛形アプリにアクセスできるまでの簡易なので、 SSL対応などは省いてます。 Oracle Cloudの常時無料サービス(無料ティア)について 新しく常時無料で利用できるようになったサービスたち。 ・Oracle Cloud無償ティア | オラクル | Oracle 日本 利用できるのは、以下のようなもの。 データベース ... 20GBを2つまで コンピュート ... 仮想マシン。1/8 OCPU・1GBを2つまで ストレージ ... 合計1

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Firestore、とっても便利ですが、Firebaseのコンソールがイケてないので、 ローカルで動かせる簡易の簡易ツールを作ってみました。Nuxt.js製です。 Firebase Admin SDKを使ってるので、秘密鍵を配置すればOK。 セキュリティルールの変更も不要です。 動いているところはこんな感じ。 GitHubで公開してます。ただ書きなぐりなので、ソースはイケてないです。。 まだα版くらいなので、機能は限定的です。。 memory-lovers/simple-firestore-admin: Simple Firestore Admin なんで作ったか Firestoreを使ったWebサービスを作ってみたところ、 ちょこっとしたDBの変更にもデータが多かったり、1ドキュメントのサイズが大きいと、 Firebaseコンソールだと重い感じに。。 いろいろ見ていると、Webサービスな

これはただの失敗談です。。役に立つかわからないけど、誰かの参考になるといいな。。 Nuxt.js+Firebaseで開発したWebサービスをリリースして2ヶ月目くらい。 サービス止めて、初マイグレーションしてときの失敗談です。 サービスを止めてやりたかったこと いままではちょこっとした変更が多かったため、 サービスを止める必要なく、Nuxtアプリの更新だけで十分でしたが、 新しい機能を追加する際に、Firestoreのスキーマを変える必要が出てきました。 やりたいことは、 「 今までのデータを読み取って、別の形式に再構成する 」 という感じのことで、止めないとダメかなと。 メンテンナンスのときの手順 手順はこんな感じ。 メンテナンス画面に遷移するようにmiddlewareを変更 firestoreのルールを全部ブロックするように変更 スキーマ変更処理を実行 メンテナンス画面を解除し、hos

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

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

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

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

const admin = require("firebase-admin"); // *** 移行元のプロジェクトの設定 const srcSA = require("./key/XXXXX.json"); // サービスアカウントの秘密鍵を取得 // firebase-adminの初期化 admin.initializeApp({ credential: admin.credential.cert(srcSA) }); const srcDB = admin.firestore(); // firestoreのインスタンスを取得 // ** 移行先のプロジェクトの設定 const destSA = require("./key/XXXXX.json"); // サービスアカウントの秘密鍵を取得 // ※同じadminを使って、別のAppを作成しないといけない※ // ※2つ目を初期化す

別の記事を書く前に、いろいろ試したことの備忘録。 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の料金が課金される さらに、 エクスポート / インポート オペレーションのコストは、費用制限の対象にはなりません。 オペレーションが完了するまで、エクスポ

<!-- Template Tag can not be merged... --> <script lang="ts"> import { Component, Vue, Prop, Watch, mixins } from "nuxt-property-decorator"; import Chart from "chart.js"; import VueChart from "vue-chartjs"; const Line = VueChart.Line; const reactiveProp = VueChart.mixins.reactiveProp; @Component export default class ChartLine extends mixins(Line, reactiveProp) { @Prop({ default: {} }) chartData: C

Nuxt.jsで開発しているWebサービスにバーコードリーダ機能をつけようとしたら、 いろいろハマったので、そのときの備忘録。 利用したのはQuaggaJS。簡単に使えて便利(´ω｀) はまったポイントは、以下の4点... httpsじゃないとカメラを取得できない QuaggaJSで表示されてないHTML要素を指定するとエラー size/width/heightを指定してもいい感じにならない iOSのPWAではカメラにアクセスできない いろいろハマったけど、QuaggaJS自体がすごく良いので、サクッとできた♪ 作ったのはこんな感じ バーコードリーダ、できてきた♪ いい感じな気がする(*´ω｀*) pic.twitter.com/eDJH4P57pZ — 積読ハウマッチ📚きらぷか (@kira_puka) September 17, 2019 動きとしては、こんな感じでシンプル。 ボタン

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

先日、開発中の積読用の書籍管理アプリの新機能として、 Markdownで書ける読書メモを追加したので、その時の備忘録。 ✅読書中のメモが残せる読書メモ機能✨ 読書メモを残せる機能を追加しました‼️ マークダウンで書けて、全メモをクリップボードにコピーできちゃいます😊 はてなブログなどマークダウンが使えるなら、コピペで記事も書くことも😍 (続く pic.twitter.com/K3pjr4noVo — めもらば@公式 (@MemoryLoverz) September 1, 2019 全体の流れ やりかたとしては、こんな感じ Markdownの文字列をmarkedを使ってHTML化 <pre>の部分は、markedでhighlightjsを使うように設定 Markdown用のCSSを追加して見た目を調整 VueのSFCで書くとこんな感じ <template> <div class="ma

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

開発中の積読ハウマッチ、ホームに追加できるんです(´ω｀) といっても、Nuxt.js(SPA)で作ったWebサービスにmanifest.jsonを置いておくだけ。 manifest.jsonについてちょっと調べたので、その備忘録。 #積読ハウマッチ ...ホームに追加できるんです(´ω｀) アイコンも用意したんです(´ω｀) ステータスバーの色も変わるんです(´ω｀) pic.twitter.com/czRfFqk8S7 — めもらば@公式 (@MemoryLoverz) August 17, 2019 ホームに追加できるようにするためにやったこと やったのはこんな感じ。 Nuxt.jsでSPAのWebサービスを作る ファビコンなどをfavicon generatorで一括生成 一括生成したファイルをstatic配下に配置 一括生成したファイルに含まれるmanifest.jsonをちょっ

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