2020-12-31

Advent Calender Rankingを作ってみた

rails heroku

近年qiitaのAdvent Calendarほとんど見てなかったのですが、久しぶりに見ていたら、少しfilterかけて見たいなぁと思い、scrapeしてhatena bookmarkの数を調べて、一覧で出してみました。

Advent Calender Ranking
https://advent-ranking.rochefort.dev/

技術的なお話

いつものようにscrapeはrubyで。凝った画面にするつもりもなかったので、バックエンドはRailsで。

css

cssは、毎回違う物を使いたくなってしまい、今回は Ink という物をなんとなく使ってみました。
簡易的なresponsive作るには、それなりに便利で良いのですが、少し凝ったことしようとするとはまります。ハンバーガーメニュー実装するだけで無駄に時間食いました（中途半端に用意されているものがあるのですが、タグの構成など、いろいろ暗黙的な制約があり結構ハマっちゃいました。ハンバーガーメニューぐらいドキュメント化しておいて欲しい。）。

pagy

あと、Railsのpaginationにいつもの kaminariじゃなく、 ddnexus/pagy というものを使ってみました。どうもこいつはすごいらしく、kaminariの40倍早く、36倍軽量で、35倍オブジェクトの生成数が少なく、メモリ使用量も相当する少なくなってるものらしいです。主要なcss フレームワークのpaginationにも対応していて良さそうです。（今回Inkを使ってしまったが故に、ここの恩恵は受けれませんでした。）使いやすいし、特に困らなかったので、今後も使っていきたいと思いました。

heroku

久しぶりに使いましたが、いろいろ便利でした。local dbをdumpとってs3経由でimportもできたのは結構感動しました。進化してる。が、postgresの無料枠超えてて、1週間で停止されるらしいので、数日後にこのままサイト閉めるか、vpsへ移行するかもしれません。OSやDBのことを何も考えなくても良いのはすごいメリットなんですが、いろいろ組み合わせるとお高くなっちゃうのが残念。小さく始めるには、コミコミで月額$10未満ぐらいにしてくれないときついかなぁ。

残念ポイント

postgresql無料枠が1万件一番安くて $9。
カスタムドメインのSSL化が有料一番安くて $7。カスタムドメイン用の証明書も作ってくれて便利なのですが、全サーバーへの反映に時間が掛かる？のか、アクセスできたりできなかったりという現象に少し悩んでしまってました。

それでは

良いお年を！

2020-12-28

Railsでの定数定義

rails

これまでは、config/initializers 以下に定数用moduleを置いていました。 config/initializers ってアプリの初期化するためのが目的なので、微妙だなとはずっと思っていたのですが、惰性でずっとこのようにしていました。

ご参考

Rubyで定数を扱う場合はfreezeするべき - Qiita

2020-12-22

nuxtjsで日付を扱う（@nuxtjs/date-fns）

nuxtjs vue

日付のformatをちょろっと変えたいと思ったのに、それなりに嵌ってしまったのでメモ。

version

nuxt@2.14.9
vue@2.6.12

ライブラリ（@nuxtjs/date-fns）

jsって日付の扱いが微妙で、ライブラリ使うのが無難なんですが、ググるとmomentの例がいくつかありました。しかし、momentはもうメンテナンスモードという扱いで、新しいプロジェクトで利用するには推奨されていません。 Moment.js | Docs

いくつか代替ライブラリはあるのですが、nuxtjsで利用するには、下記が便利そうでした。

nuxt-community/date-fns-module: Modern JavaScript date utility library - date-fns for Nuxt.js https://github.com/nuxt-community/date-fns-module/

利用方法

現在のnuxtjsでは、vueは2系であるため modules に設定します。

# nuxt.config.js
   modules: [
+    '@nuxtjs/date-fns',

基本これで、 $dateFns が利用できるようになります。
templateで以下のようにすれば利用できます。

{{$dateFns.format(new Date(), 'yyyy-MM-dd')}}

jsで利用したければ、以下のようにすれば良いです。

  asyncData({ $dateFns }) {
    return {
      dateFormatted: $dateFns.format(new Date())
    }
  }

はまったところ

こういうのって、共通化（global filter化）したいんですが、$dateFns は asyncData であり、vueのfilterはasyncDataが扱えない？ようです。（この辺り正しく理解はできてないですが）

ではどうするか？

date-fns/format を直接使うで、とりあえずしのぎました。なんかこの辺り他に良い方法がありそうなんですが、、、

# plugins/filter.js
import Vue from 'vue'
import format from 'date-fns/format'

Vue.filter('formatDate', (date) => {
  return format(date, 'yyyy-MM-dd')
})

# nuxt.config.js
   plugins: [
+    '~/plugins/filter.js'
   ],

そうすると、こんな感じで利用できます。

{{article.date | formatDate}}

rochefort's blog