はてなブックマーク

# page/page_size style $ curl -s "https://api.sssapi.app/FbhGsWrdhVXR9iHzYSdMs?page=2&page_size=2" | jq [ { "id": 3, "name": "Chris", group: ["C"] }, { "id": 4, "name": "Dave", group: ["D", "A"]} ] # limit/offset style $ curl -s "https://api.sssapi.app/FbhGsWrdhVXR9iHzYSdMs?limit=2&offset=2" | jq [ { "id": 3, "name": "Chris", group: ["C"] }, { "id": 4, "name": "Dave", group: ["D", "A"]} ] # nameに"

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

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

読み込めない場合に、こんな感じで、なにも表示しないようにしたかったときの備忘録。 やり方はこんな感じ。 <img src="https://example.com/noimage.png" alt onerror="this.onerror = null; this.src='';" /> ポイントは以下の2点 altを空文字で設定 onerrorでsrcを空にして、onerrorをnullにする 1. 「altを空文字で設定」について 画像が表示されなかった場合に、代わりにalt属性のテキストが表示してくれる このalt属性がなかった場合、読み取り不可の画像が表示されてしまう。 なので、alt属性に空文字を指定しておくことで、 「画像が表示されなかった場合に、代わりに空文字を表示する」ようにしている。 2. 「onerrorでsrcを空にして」について onerror属性を設定しておくと

最近、やっとFlutterに入門。。 こんな電卓アプリを作りながら、Flutterのことを理解している最中。 その際に、悩んだ点や調べた内容の備忘録。 とりあえず、ボタンを押すと、 上の絵が変わるところまでできた(´ω｀) pic.twitter.com/Ty8npyo3eO — 積読ハウマッチ📚きらぷか (@kira_puka) November 3, 2019 以下の記事の続き的な内容。 1. Flutterに入門する前に集めたリンク集 - くらげになりたい。 2. Flutterに入門して疑問に思ったことと、そのとき調べたこと - くらげになりたい。 背景画像をつけたい Containerのdecorationを使うといける class Background extends StatelessWidget { Background({Key key}) : super(key: k

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(SPA)+FirebaseのWebアプリで初マイグレーションをしてけど、いろいろ失敗した話。。運用Vue.jsFirebaseFirestoreNuxt これはただの失敗談です。。役に立つかわからないけど、誰かの参考になるといいな。。 Nuxt.js+Firebaseで開発したWebサービスをリリースして2ヶ月目くらい。 サービス止めて、初マイグレーションしてときの失敗談です。 サービスを止めてやりたかったこと いままではちょこっとした変更が多かったため、 サービスを止める必要なく、Nuxtアプリの更新だけで十分でしたが、 新しい機能を追加する際に、Firestoreのスキーマを変える必要が出てきました。 やりたいことは、 「 今までのデータを読み取って、別の形式に再構成する 」 という感じのことで、止めないとダメかなと。 メンテンナンスのときの手順 手順はこんな感じ。 メ

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

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

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

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. <

だいたい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)で作った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 思いついた後に、ドキュメントを見つけるので、手戻りが多く... あらかじめ、知っていたら良かったなと思う点をまとめています。 作ったのはこんなサービスです！ 積んでる本の総額がわかる読書管理サービス 『積読ハウマッチ』 積んでいる本を登録する書籍管理サービスで、 すこし違うのは、積んでる本の総額がわかること。 積んでるだけの本の総額がわかるとすこしは読む気になるかなと(´ω｀) シェアしたときに金額が表