くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

Day.jsで相対時間を表示する(n日前/n秒前とか)

開発してるWebアプリでコメント機能をつけてみた。 コメントされた時間を何日前とか相対的な時間で表示したいと思ったときの備忘録。 Day.jsにプラグインが用意されているので、簡単だった(´ω`) 使い方 こちらの記事を参考にした。 import dayjs from "dayj…

VercelでOGP画像を生成して、Storageの保存量を節約する

開発しているWebサービスでかかった費用を見ていると、 シェア用のOGP画像の保存量が結構占めていた。。(882円中の492円分で55%) www.memory-lovers.blog ランニングコストを減らしたいなと思っていたら、節約術があったので試してみた。 ・Nowのエッジキャ…

Android: 画面サイズよりも大きいViewを縦/横/斜めでスクロールする

Androidで画像など、画面よりも大きいサイズのViewをドラッグでぐりぐりしたくて、 いろいろ調べてみたときの備忘録。 いくつか方法があるけど、 基本はScrollViewとHorizontalScrollViewを両方使う感じ。 XML XMLはこんな感じ。 ScrollViewwカスタマイズし…

FlutterでカスタムフォントをTextウィジェットとThemeで利用する

Flutterでカスタムフォントを利用したいなと思ったので、その時調べた備忘録。 フォントファイルを配置するフォルダの作成 まずは、ディレクトリを作成する。 $ mkdir -p assets/fonts/ assets/fonts/に表示したいフォントファイルを配置しておく。 pubspec.…

FlutterでSVGを利用する(flutter_svg)

FlutterでSVGを利用したいなと思ったので、その時調べた備忘録。 flutter_svgパッケージを使うといいらしい。 画像ファイルを配置するフォルダの作成 まずは、ディレクトリを作成する。 $ mkdir -p assets/images/ assets/images/に表示したいsvgファイルを…

xlsx-populateを使ってテンプレートからExcelファイルを生成する(Nuxt+JavaScript)

以前、SheetJS(xlsx)でExcelファイルの生成を試してみたけど、 スタイルのコピーや設定ができない課題の解決のため、調べたときの備忘録。 xlsx-populateだと、スタイルの操作もできるっぽい。 インストール $ npm i xlsx-populate xlsx-populateの使い方 外…

【Flutter】Riverpodを使って状態を管理する

Flutterの状態管理について悩んでいたけど、monoさんの記事を読んで、 Riverpodが良さそうだったので、試してみたときの備忘録。 登場人物 進化が早いのと積み重ねが多いので、登場人物が多い。 それぞれ、雑に説明。こんな感じ。 状態の保持 アプリの状態(=…

個人開発報告: 月例振り返り&開発予定 (2020年9月)

9月を振り返りと実績値の公開、今月の開発予定です(´ω`) www.memory-lovers.blog やったこと 積読ハウマッチ: サーバを移動しました アップデートは1回!! NuxtをSPAからSSRにする大物のみ。。 やっとSSR化できたので、すこしずつ機能追加や改善にシフトして…

Vue.js+Chart.jsにカラースキーマを適用する(chartjs-plugin-colorschemes)

vue-chartjsを使ってグラフを書いていて、 サクッと色をいい感じしたいなと思ったときの備忘録。 chartjs-plugin-colorschemesというカラーパレットプラグインがあるようなので、 Nuxt/Vueで使ってみた。 インストール $ npm i vue-chartjs chart.js chartjs…

Flutterのコマンドメモ(upgrade/channel)

Flutterをはじめてみたので、忘れないように使ったコマンドをメモ。 アップグレードやチャネルの変更関係 # Flutterのアップグレード $ flutter upgrade # チャネルの確認 $ flutter channel # チャネルの変更 $ flutter channel beta # パッケージのアップ…

OpenWeatherMap APIで天気情報を取得する

頭痛仲間というアプリを作るときに、 気圧とかの天気情報を取得したいなと思い、 OpenWeatherMap APIを調べたときの備忘録。 シンプルだし、無料枠もあるのでよい感じだった。 OpenWeatherMapについて 現在の天候や予測履歴を含む各種気象データのAPIを提供…

Nuxt(SSR)をGAEに自動デプロイ(GitHub連携)とハマったポイント

Clund Runを試したので、次はGAE。 Cloud Runでの課題 試してみた結果、コールドスタートがよく出るっぽい。。 Cloud Schedulerを使って、定期的にリクエストを送って、 インスタンスが停止しないようにする or 停止してたら起こす、ようにするればよいが気…

Nuxt(SSR)をCloud Runに自動デプロイする(GitHub連携)

開発している積読ハウマッチ、Netlify+Nuxt(SPA)で作ってるけど、 SPAはやっぱり遅い感じが... SSRにできて、リージョンも東京を選べるCloud Runを試してみたときの備忘録 Cloud Runについて Google Cloud Runは、コンテナ化されたアプリをデプロイできるフ…

NuxtでCookieを扱うならuniversal-cookieがよさそう

Cookieを扱うライブラリはいろいろあるけど、 サーバでもクライアントでも使えるuniversal-cookieが良さそうだった。 使い方もシンプルでいい感じ。 インストール $ npm i universal-cookie 使い方はこんな感じ import { IncomingMessage } from "http"; imp…

GASを使ってGmailの内容をサーバに送る

受け取ったメールをサーバに送信してゴニョゴニョしたいなと思ったので、 調べてみたら、GAS(Google Apps Script)+Gmailで簡単にできたのでその備忘録。 流れとしてはこんな感じ。 定期的にGASを起動して、メールをチェック 未処理のメールがあったら、サー…

Vue+SVGでプログレスバーをつくる

こんな感じのプログレスバーを作りたいなと思ったら、 SVGでできたのでその備忘録。 ソースはこんな感じ <circle>を使うと円がかけるので、2つ重ねて、 1つをstroke-dasharrayとstrokeDashoffsetを使って円弧にしている感じ。 <template> <svg height="100%" width="100%" :viewBox="viewbox"> </svg></template></circle>

JavaScriptでExcelを操作する

Excelでデータのエクスポートしたいなと思い、いろいろ調べてみたら、 SheetJS(xlsx)を使うとできるらしいので、試してみたときの備忘録。 追記: 2020/10/04 SheetJS(xlsx)の無料版だと、スタイルのコピーや設定ができないので、 xlsx-populateの方が良さそ…

個人開発報告: 月例振り返り&開発予定 (2020年8月)

8月を振り返りと実績値の公開、今月の開発予定です(´ω`) www.memory-lovers.blog 積読ハウマッチ: 1回アップデート アップデートは1回!! 全然アップデートできてませんでした( ゚д゚)! 2020/08/21 ちょっとだけはやくなりました✨ 速度改善や内部の改善をちょ…

TypeScriptのデコレータで関数の実行時間を計測する

作っているWebサービスの性能改善のため、 どれくらい時間がかかるかを計測したいと思ったときの備忘録。 この記事をみると、デコレータでできる感じだったのでためしてみた。 こんな感じで時間を測りたい関数に@measureLogをつけるだけでログに表示してくれ…

BuefyのDatePickerをModal内で使うと一部隠れてしまう

Buefyを使って開発をしているけど、 BulmaのModal内でDatePickerを使うとモーダル内に隠れてしまって、うまく表示されないことがあるので、その時の備忘録。 GitHubのIssue(#292)で書かれていて、こんな感じのCSSを追加するとよいらしい。 overflowがautoに…

個人開発報告: 月例振り返り&開発予定 (2020年7月)

前回同様、7月を振り返りと実績値の公開、今月の開発予定です(´ω`) 無事に一周年を迎えました(´ω`)!! www.memory-lovers.blog 積読ハウマッチ: 2回アップデート アップデートは2回。大物2つ(´ω`) 2020/07/12 ユーザをフォローできるように✨ 2020/07/26 「…

TwitterとGoogleフォームでアイデアの仮説検証ができるかを試してみた

最近、スタートアップ系の本を読んで、 「作るものが正しいかの検証する」ということを考えるように。 「意見」も「いいね」も「リツイート」も価値がない 「Google×スタンフォード NO FLOP! 失敗できない人の失敗しない技術」のp218の一文だが…

作りたい欲とアイデア検証のはざまのモヤモヤ

いくつかスタートアップ向けの本を読んで思ったことをつらつら。 チラ裏的だけど、多分忘れると思うので、備忘用の雑記。 読んだ本はこちら 起業の科学作者:田所 雅之発売日: 2017/11/07メディア: Kindle版 Google×スタンフォード NO FLOP! 失…

NuxtアプリをPWAでGoogle Storeにリリースする

以前作ったNuxtアプリをPWAでリリースしてみたときの備忘録。 play.google.com コード量自体は少ないけど、いろいろ迷ったのでメモ。 PWA? TWA? プッシュ通知などができるようになるPWA(Progressive Web App)でWebサービスを作ることが増えてきた。 Android…

個人開発報告: 月例振り返り&開発予定 (2020年6月)

前回同様、6月を振り返りと実績値の公開、今月の開発予定です(´ω`) www.memory-lovers.blog 積読ハウマッチ: 3回アップデート アップデートは3回。細かいのもあるけど。。 2020/06/08 バグ修正と広告表示に✨ 2020/06/10 My積読から詳細がわかりやすく✨ 2020…

Nuxt+Firebase+Algoliaで検索機能をつくってみた

開発しているWebサービスでユーザ検索機能を作ってみたときの備忘録。 Algoliaつかうとすぐできた(´ω`) 流れ 大まかな流れはこんな感じ。 Algoliaのアカウント作成 Algoliaのコンソールでインデックスを作成 検索したい初期データを登録する Algoliaのコン…

Nuxtで共通的に利用するSCSSの変数をグローバルでインポートする

Nuxt+SCSSで開発をしていると、変数やmixinなど共通的に使うファイルでも、 コンポーネントごとに@import文を書かないといけない。。 めんどくさいなと思っていたら、グローバルで登録ができるのがあったので、 試してみたときの備忘録。 ・nuxt-community/s…

NuxtでAdSense広告を表示するためにやったこと

開発しているWebサービスで、ついに広告を導入してみた。 審査が通ったのですぐできるかと思ったら以外に大変だったので、その時の備忘録。 サイトを登録するときにやったこと アカウント登録とか利用規約とか以外はこんな感じ。 robots.txtを配置 ads.txtを…

Vueでドラッグスクロール

Nuxtで開発をしてて、ドラッグスクロールしたいなと思ったら、 便利なライブラリがあったので、試したときの備忘録。 ドラッグスクロールは、スクロールするのをマウスホイールじゃなくて、 左クリックを押してドラッグしながら、スクロールするやつ。 デモ…

個人開発報告: 月例振り返り&開発予定 (2020年5月)

前回同様、4月を振り返りと実績値の公開、今月の開発予定です(´ω`) www.memory-lovers.blog 5月は積読以外もいろいろやった(´ω`) 積読ハウマッチ: 3回アップデート アップデートは3回。細かいのもあるけど。。 2020/05/02 スマホでのメニューがスリムに✨ 2…