くらげになりたい。

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

SPAなNuxtアプリでFirebase Authのredirectでも、認証後に来たベージに戻りたい(Firebase UI)

開発している積読ハウマッチで、Googleアカウントでのログインに対応した際、 Firebase Authの認証フローをポップアップからリダイレクトに変えてみた。 ポップアップだと、どこでもログインできたけど、 ログイン画面だと元のページに戻りたく、いろいろ考…

Express+TypeScriptをはじめるときにやったこと

Expressでサーバ立てたいなと思ったので、 TypeScriptではじめるときにやったことの備忘録。 TypeScriptの設定 まずは、package.jsonから。 # package.jsonの生成 $ npm init # typescriptのインストール $ npm i -D typescript @types/node # バージョン確…

SPAなNuxtアプリをFirebase HostingからNetlifyに移行してみた

Netlifyがいいと聞いて、Firebase Hostingから移行してみたときの備忘録。 NetfilyのプレレンダリングがあるのでOGP芸が楽。 昔、こんな記事を書いたけど、Functionsで頑張らなくてもよくなった。 使ってみてよかったので、移行したときにやったことをまとめ…

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

前回同様、11月を振り返りと実績値の公開、今月の開発予定です(´ω`) www.memory-lovers.blog 積読ハウマッチ: 2回アップデート アップデートは2回。今月は少なめ。。 2019/12/02 週間/月間ランキング✨ 2019/12/09 トップページを変更✨ 本業が忙しかったのと…

アイデアのつくり方を読んだら、アイデアの正体がなんとなく分かった気がする。。

「アイデアのつくり方」の感想文。というか、気になった言葉のクリップ集。 アイデアのつくり方作者:ジェームス W.ヤング出版社/メーカー: CCCメディアハウス発売日: 1988/04/08メディア: 単行本 読んだ感想 「 60分でよめるけど、一生はあなたを離さない本…

天才はあきらめたを読んだら、努力の仕方と嫉妬への向き合い方のノウハウがいっぱいだった

南海キャンディーズ・山ちゃんの「天才はあきらめた」の感想文。というか、気になった言葉のクリップ集。 天才はあきらめた (朝日文庫)作者:山里亮太出版社/メーカー: 朝日新聞出版発売日: 2018/07/06メディア: 文庫 読んだ感想 おもしろい。。しくじり先生…

個人開発のためのWebサービス公開マニュアルを読んだら、デプロイ・リリース・運用の手順だけじゃなく、運営者の心得がたくさん詰まってた

個人開発のためのWebサービス公開マニュアルの感想文。というか、気になった言葉のクリップ集。 個人開発のための Webサービス公開マニュアル作者:難波 聖一出版社/メーカー: 秀和システム発売日: 2019/12/25メディア: 単行本 読んだ感想 Git操作からデプロ…

Nuxt+Firebaseでセッション管理: PWA(Service Worker)編

FirebaseとSSRなNuxt.jsでアプリを作っていて、 クライアント側で認証チェックするとFirebaseの初期化などでラグが... サーバ側で認証情報とかを取得してもう少しなんとかできないかなと。 まだベータっぽい?けど、公式の以下の内容を試してみたときの備忘録…

NuxtでserverMiddlewareを使ってAPIをつくってみる

Nuxt.js、SSRで実行すると外部サーバなしでAPIを簡単に追加できるらしい。 serverMiddlewareを使ってルートを追加するとAPIが作れたので、その時の備忘録。 つかってみる APIをつくる // ~/server/echo.ts import { IncomingMessage, ServerResponse } from …

Node.jsで画像/動画つきツイートをTwitterに投稿すると大変だった...

JavaScriotでツイートしたいなと思って、いろいろ試していたら、 30秒以上動画つきツイートが結構めんどくさかったので、その時の備忘録。 Node.jsでTwitter APIを使う Node.jsでTwitter APIを使うときは、desmondmorris/node-twitterを使うのが良さそう イ…

NuxtでFirebase AuthのトークンをCookieに入れたり出したりする

NuxtのSSRで認証したいなと思ったら、こんな記事を見つけたので、試してみたときの備忘録。 SSRモードのNuxtでのFirebase認証 - Qiita 結果、UIDは取得できるけど、firebase-adminで検証が必要っぽい... インストール cookieを扱うライブラリはいろいろある…

vuex-module-decoratorsでnuxtServerInitするときは、store/index.tsにactionsを追加する

公式ガイドのストアのページで紹介されていたvuex-module-decorators。 nuxtServerInitをどこに書けばいいか迷ったので、いろいろ調べたときの備忘録。 こんな感じでstore/index.tsに追加するっぽい import { ActionTree, Store } from "vuex"; import { Act…

Twitterでツイートできる文字数を正確に数える(絵文字もURLも)

Nuxt.jsでツイートするアプリを作りたいなと思い、 文字数ってどうやって計算するんだろ?って思ったら、 公式でライブラリ(twitter-text)が用意されているらしいので、使ってみたときの備忘録 Java版/Ruby版/JavaScript版/Objective-C版などいろいろあるら…

Web Communityを読んだら、CGM系Webサービス開発の知見しかなかった...

Web Communityの感想文。 というか、気になった言葉のクリップ集。 読んだ感想 CGM系のWebサービスをつくっているので、かなり良かった。。 ちょうどCGM系のサービスを作っているので、参考になるところばかり。。。 特に、1〜3章が個人的に知見が多く、かな…

やる気が尽きないように気をつけていること

どうもきらぷかです。 この記事は、Crieitのアドベントカレンダー、プログラミング・コーディング以外のノウハウ・ティプスの15日目の記事です。 Hataさんの記事を見て、なんか書いてみようかなと。 飽きやすく、なまけやすい... 自分では結構飽きやすく、す…

Nuxt+TypeScript+Firebaseのはじめるときにやること: 2019年12月版

ひさびさに新規でNuxtアプリを作ろうと思ったら、 いろいろ変わっていたので、備忘用のまとめ。 (時間がなかったので割と雑め...いつかきれいに加筆する予定...) ソースコード 自分用のスタータになるようにGitHubで公開してみた。 (この記事の執筆時よりも…

text-overflowの複数行版、line-clampを使ってみる

css

複数行でも省略できるようになるline-clamp。 使ってみたら、若干手間取ったので、その時の備忘録。 .clamp-three-lines { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; /* 上の3つを指定して、やっと使えるようになる */ -webk…

<input type="file" />で選択した画像を<img>に表示する

雑だけど、こんな感じ(´ω`) <html> <body> <input type="file" id="myImage" accept="image/*" onchange="setImage(this);" onclick="this.value = '';"> <img id="preview"> <script> function setImage(target) { var reader = new FileReader(); reader.onload = function (e) { document.getElementById("preview").setAttribute(…</body></html>

ISO 8601表記の継続時間(PT10M10Sみたいなの)をtimedeltaに変換する

"PT10M10S"みたいな時間をtimedeltaに変換したいなと思ったら、 isodateで簡単にできたので、その備忘録。 インスール $ pip install isodate 使い方 import isodate iso_time = "PT10M10S" # 10分10秒のISO 8601表記 td = isodate.parse_duration(iso_time)…

pythonのtimedeltaをHH:MM:SSで表示する

毎回調べ直すので、備忘用... timedelta、いい感じにフォーマットできないので、 自分で計算しないといけない.... def format_timedelta(timedelta): total_sec = timedelta.total_seconds() # hours hours = total_sec // 3600 # remaining seconds remain …

DjangoのrunserverをHTTPSで起動する(django-extensionsでRunServerPlus)

Djangoの開発サーバをHTTPSで起動したいなと思ったら、 django-extensionsのRunServerPlusでできるよう。 簡単にできたので、その時の備忘録。 インストール まずはインストール $ pip install django-extensions # RunServerPlusを使うためのライブラリ $ p…

【Nuxt/Vue】dynamic importに置換するsedのスクリプトで速度をちょっと改善した

開発しているWebサービス、少し初期表示が遅いので、少しずつ改善中... Vueの非同期コンポーネントを使うと改善されるよう。 とりあえず置換しただけだけど、赤だったPerformanceが オレンジになった(´ω`) こんな感じに書き換える。 import { Component, Vu…

ネストされたJavaScriptのオブジェクトをフラットにするhughsk/flatというライブラリ

ネストされたObjectをフラットにしたいなと思ってたら、いいライブラリが。 hughsk/flatを使ったらすぐできたので、その備忘録。 サンプルは、GitHubあるREADME.mdの抜粋です。 インストール $ npm install flat 使い方2: ネスト→フラット const flatten = r…

SVGなFont AwesomeをNuxt+Bulmaで使ってみた

開発しているWebサービスでFont Awesomeのお世話になってる。 ただ、Web Font版を使っていたので、読み込みが遅い。。 SVG版だとアイコンごとにimportできるようなので、 性能改善の一環でやってみたときの備忘録。 インストール まずはnpmでパッケージをイ…

TypeScriptでFirebase Admin SDKで認証ファイルを使うときは、スネークケースをキャメルケースに変換する

前の記事でも書いているけど、Firebase Adminで色々するので、 そろそろTypeScript化したくなり。。 www.memory-lovers.blog いざやってみると、すんなりできなかったのでその時の備忘録。 こんな感じ jsonファイルはスネークケースだけど、 型(admin.Servic…

ts-nodeで--max_old_space_sizeを指定するときは、-r ts-node/registerをつかう

ts-node、typescriptのまま実行できて便利。 でも、max_old_space_sizeを指定したいと思ったらめんどうだった。。 こんな感じ $ node --max_old_space_size=1024 -r ts-node/register index.ts max_old_space_sizeはnodeでしか指定できないので、 node -r ts…

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

前回同様、11月を振り返りと実績値の公開、今月の開発予定です(´ω`) www.memory-lovers.blog 振り返り 積読ハウマッチ: 5回アップデート 振り返ってみると、5回もアップデートしてた(´ω`) 2019/11/02 読書メモの最大を 1000 文字に ✨ 2019/11/03 読書メモ…

Flutterに入門して疑問に思ったことと、そのとき調べたこと

前々から気になってたFlutter。 Flutter for Webが統合されたっぽいので、そろそろはじめたいなと(´ω`) www.publickey1.jp せっかくなので、 「なにを疑問に思って、なにを参照したか」 をまとめておこうと思ったので、整理してみた(´ω`) 疑問に思ったこと…

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

前回同様、10月を振り返りと実績値の公開、今月の開発予定です(´ω`) www.memory-lovers.blog 振り返り 積読ハウマッチ: 6回アップデート 振り返ってみると、6回もアップデートしてた(´ω`) 2019/10/07 読書状況をグラフで表示 ✨ 2019/10/11 読了が追加しや…

Flutterに入門する前に集めたリンク集

結構前からFlutterしたいなと思ってたけど、そろそろはじめれそうだったので、 今まで集めたリンクを整理してみた(´ω`) Twitterリンクも多いけど、気にせずリンク集にしてみた(´ω`) 公式ドキュメント Flutter Documentation - Flutter FlutterAppの基本 | …