先週行われた web1week。 初開催にも関わらず50を超えるサービスが登場し、大盛況のうちに幕を閉じた。 経験者ならば理解を得られると思うが、個人開発という舞台には魔物が棲んでいる。 着手時点で思い描いた予定などペロリと喰われてしまう。 不意に削られる作業時間。 理想と妥協の狭間で揺れる要件。 技術仕様の落とし穴。 サービスの意義を自問自答し続ける日々。 リリース直後に訪れる無慈悲な障害。 これらを乗り越えローンチされた個人サービスの奥には、語られることのない物語が潜んでいる。 そんなサービスが50以上も並ぶweb1weekのボードは圧巻で、たとえHello Worldの様なサービスでも私の心を踊らせてくれる。 とても甲乙など付けられない。 しかし「敗者」は存在する。 「web1week楽しみ！」と方方で意気込みを語り、「やってみませんか？」と様々な人を勧誘した挙句、あろうことか最小限

最近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 プレレンダリ

開発している積読ハウマッチで、Googleアカウントでのログインに対応した際、 Firebase Authの認証フローをポップアップからリダイレクトに変えてみた。 ポップアップだと、どこでもログインできたけど、 ログイン画面だと元のページに戻りたく、いろいろ考えたときの備忘録。 こんな感じ どのページから来たかを覚えておけばいいかなと思ったので、 beforeRouteEnterで、前のページのパスを取得 クエリパラメタに付与しておく 認証後にクエリパラメタがあったら、そのパスに遷移 という感じにしてみた。 まずはパッケージのインストール $ npm i firebase firebaseui firebaseui-ja ソースはこんな感じ。 <template> <div class="container"> <div id="firebaseui-auth-container" />

クソアプリ2 Advent Calendar 2019の20日目の記事です。 作ったもの Barcode The Gathering https://barcode-the-gathering.appspot.com/ バーコード（QRではない、商品についてる一次元バーコード）から、ギャザのカードを生成できます。 異なるバーコード3枚スキャンするとデッキとして保存出来ます。 簡単な創作ルールでランダム対戦も行えます。 なんで？ 皆さんはMagic:TheGathering®︎1（略称 ギャザ）をご存知だろうか。 トレーディングカードゲームの元祖であり、「世界でいちばん遊ばれているTCG」を筆頭に７つのギネス記録を持つカードゲームである。 日本では遊戯王やポケモンカードゲームの認知度が高いが、それらは全てギャザが元となっている。 そんなギャザのカード情報を取得するAPIが存在することを知った

前から噂されていた便利クエリarray-contains-anyおよびwhere-inがついにJSのSDK等に入ったので早速使ってみます！ SDK入りたてでできたてホヤホヤのため、まだ公式ドキュメントには影も形もありません笑（2019/10/30現在） ※ 11/3追記 : 更に同じくwhereでのInクエリも発行できるようになっていたので、それについても追記しました！ array-contains-any ってどんなの 今までwhereにarray-containsを指定すると、arrayに特定の値が入っているdocumentを検索できました。 実際のコードはこんな感じで、blogsコレクションの中で「tagsフィールドの中に"tech"が入っているドキュメント」を検索できます。 firebase .firestore() .collection("blogs") .where("tag

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

これはなに？ SPAのキャッシュコントロールは難しい問題だけど、ちゃんと仕組みを理解してただしい戦略を使えばそんなに難しくないよという話。 Disclaimer この記事は2019年10月くらいにおける筆者の経験と見解に基づくものです。だいたい間違ってないとは思いますが内容の正確性は保証しませんし、2ヶ月くらいするとFirebaseないしNuxt.jsの進歩によりココに書かれていることが嘘になる可能性はあります。また、特定の記事や個人を中傷する意図はありません。筆者の所属する組織やその類とは関係がありません。 なんで難しい(と思われている)の？ そもそもの前提としてちゃんとやらないとアプリケーションのリリースがままならないというプレッシャーがあります。 そのうえで... (1) SPAの構成ファイルをキャッシュしようとする輩がたくさんいる Hostingサービス（ブラウザキャッシュ） CD

SPAはとてもすてきだけど、Hostingにアップロードしてもすぐに更新されない。。 たとえば、メンテナンス画面に変更しても、キャッシュが残っててメンテナンスモードにならないとか。。 この記事をみると、Reactで強制的にリビジョンアップする方法が載っていたので、 Nuxt.jsでもできないかやってみたときの備忘録。 追記 2018/10/17 @hecateballさんの記事によると、あまりよくない方法のよう。。 PWAでキャッシュ戦略を設定するか、Remote Configがよさそう(´ω｀) - Nuxt.js(SPA)とFirebaseで強制リビジョン（バージョン）アップするならPWAモジュールを使おう - Qiita ざっくりとした流れ 流れとしては、こんな感じ。 staticディレクトリにJSONファイルでバージョン番号を用意 環境変数にリビジョン番号を保持するように設定 JS

こんなサービスを作りました 『みんなの感想文』というWebアプリをリリースしました！ 『みんなの感想文』 インターネット上で読書感想文を書けるサービスをリリースしました！ 紙とペンがなくても感想文を書ける、そしてアーカイブとして残す世界を実現したくて作りました。400文字か200文字の原稿用紙で書くことができるので、みんなも書いてみてください📖https://t.co/DkCThMPpPl — フジワラユウタ@みんなの感想文 (@Fujiyama_Yuta) October 9, 2019 この記事について 今月から個人でサービスを開発・運営をしている人たちの組織「運営者ギルド」のOrganizationの一員として所属することになりました。 所属してから初めてのサービスローンチなので、忘れないうちに作った開発技術などを備忘録として残しておきます。合わせて個人開発の運用にかかっている費用

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

こんなサービス作りました 【#拡散希望】 🙌🎉🎊サービス開始🎊🎉🙌 ボケをツイートして 「いいね❤️」「リツイート🔁」 の数でランキング！ Twitter連動型 大喜利サイト 「ついぎり」 サービス開始しました‼️#ついぎりhttps://t.co/bkXfzHyVSs — ついぎり@公式アカウント (@twigiri_app) August 14, 2019 Twitterで大喜利するサービスです。 ８月中頃にローンチしたのですが、有難いことに半月で約2.5万PVいきました。 開発に至ったポエム記事はCrieitに投稿しています。 なぜ大喜利サービスを作ったのか この記事について やっぱり公開直後は怖かったです。 そう、クラウド破産。 Firebaseの設定を間違えて72時間で300万円以上請求されてしまったウェブサービス BigQueryで150万円溶かした人の顔 上記以

お笑いは人並み程度の「好き」です。 劇場へ足を運んだことは無いし、常にチェックしているお笑いコンテンツがあるわけでもありません。 タイムラインで目に留まれば見ますし、笑います。 「ボケる」文化はどちらかと言えば苦手です。 「ここはボケるところやろ！なんで！？」 「スベってもえーからボケたろゆう姿勢は見せてーや！」 とか言う人、ちょっと苦手です。 マナーの強要というか。 「会話転がしてこ！？」とか知ったこっちゃねーです。 キャッチボールで勝手にカーブ投げてくるなって話です。 すみません、脱線しました。 こんな僕ですが、個人開発でこんなサービス作りました。 【#拡散希望】🙌🎉🎊サービス開始🎊🎉🙌ボケをツイートして「いいね❤️」「リツイート🔁」の数でランキング！Twitter連動型 大喜利サイト「ついぎり」サービス開始しました‼️#ついぎりhttps://t.co/bkXfzHyV

開発している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

Gincoのバックエンドを担当している鷲見(@soichisumi)です。 2018年10月4日にヒカラボで開催した【Ginco Engineer Meetup】Firebaseを使ったモダンなブロックチェーンアプリ開発の裏側で話した内容の解説記事です。 発表では Ginco における Cloud Functions for Firebase (以下 Cloud Functions と書きます)の利用事例と、Production で Cloud Functions を利用するにあたって行った高速化について話しました。 発表資料はこちらです。 GincoにおけるCloud Functionsの利用とその高速化 Cloud Functionsとは Google が提供するフルマネージドな関数の実行環境です。トリガーと実行する関数を記述して、APIを実装することができます。 トリガーとは、Clo

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

この記事は、Vue.jsとFirebaseでログイン認証を実装した際、ログインしていないと見れない画面を設定したい場合のサンプルコードと解説です。 サンプルコードは、サーバーはFirebaseで、Vue-Routerを使っている前提で説明しています。 1.Vue-routerのログイン認証判定のポイントは「meta」と「requiresAuth」 2.「router.beforeEach」を設定することで画面遷移する前にログイン判定 3.実際のサンプルコード 1.Vue-routerのログイン認証判定のポイントは「meta」と「requiresAuth」 ログイン判定が必要なパスだと設定するには「ルートメタフィールド（要するにmeta情報）」を利用します。 ルートメタフィールド | Vue Router 「router.js」にVue-routerのコードを記述していますが、そのroute