Rochefort.dev

New RelicをRailsアプリにinstallしてみる

Sat, 18 Dec 2021 07:00:00 +0900

New Relic といえば、 Application Performance Management (APM) の代表ツール。
無料でそこそこ使えますし、見た目もかっこよくなっていたので、久しぶりにinstallしてみました。

Installation

sing inして、「add data」ボタンを押せば、入力画面が表示されるので
それに従って操作するだけです。

1. Give your application a name
任意のapplication名入れればok
2. Are you using Bundler
bundler使ってるので、gem指定して、bundle installでok
3. Download your custom configuration
Railsだとconfig以下に`newrelic.yml`が必要ですが、これもdownloadして配置するだけ。
（license_keyの記載があるので、git repositoryには含まないようにしています）
4. Restart your application
deployすればok
5. Check for data
あとは見るだけ

と、まぁ簡単でした。

冒頭の画像のようになります。
ぱっと見PostgreSQLのところが遅いのでなんとかしようかと検討中。

[Rails便利機能]ActiveSupport::OrderedOptions

Fri, 26 Nov 2021 22:00:00 +0900

Hashの要素をメソッドっぽく取得できるやつです。ググってソースを見ていたら、改めて発見があったのでメモしておきます。

ActiveSupport::OrderedOptions

実装も非常にsimpleです。

`#[]=` と `#[]`

rails/ordered_options.rb

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


 class OrderedOptions < Hash
alias_method :_get, :[] # preserve the original #[] method
protected :_get # make it protected
def []=(key, value)
super(key.to_sym, value)
end
def [](key)
super(key.to_sym)
end

Hashを継承し、#[]= と #[] でsymbolを使って値のセットと取得を行うようにしています。ちなみに、_get はパフォーマンス面で優位な元のHashの方を残しているようです。

method_missing

method_missingを利用して、.でアクセスできるようにしています。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


 def method_missing(name, *args)
name_string = +name.to_s
if name_string.chomp!("=")
self[name_string] = args.first
else
bangs = name_string.chomp!("!")
if bangs
self[name_string].presence || raise(KeyError.new(":#{name_string} is blank"))
else
self[name_string]
end
end
end

=のロジックはsimpleですが、!のロジックが一瞬分からなかったので、履歴を見て見ると !付きでアクセスした場合、KeyError を発生させたい（そうすることで短くかけるケースがある）ための実装のようでした。 Add bang version to OrderedOptions · rails/rails@e768c51

まぁ、分からんでもないが、この存在に気づいている人は少ないかもしれません。

`String#+`

もうひとつ、よく分からない実装がありました。

1

name_string = +name.to_s

この+は一体なんだろうと調べてみると、以下に記載がありました。
String#+@ (Ruby 3.0.0 リファレンスマニュアル)

frozen textを考慮した実装のようで、frozen（immutable）な文字列が渡ってきても、chomp! するためにunfrozenな文字列として処理しているようです。

ActiveSupport::InheritableOptions

もう一つ便利な機能としては、同じファイルに記載されている、既存のhashをOrderedOptionsに変換するクラス。

1

h = ActiveSupport::InheritableOptions.new({ girl: 'Mary', boy: 'John' })

という感じで利用できます。便利。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


 class InheritableOptions < OrderedOptions
def initialize(parent = nil)
if parent.kind_of?(OrderedOptions)
# use the faster _get when dealing with OrderedOptions
super() { |h, k| parent._get(k) }
elsif parent
super() { |h, k| parent[k] }
else
super()
end
end

ここで先述の、_getが利用されています。

simplecovでbranch coverageを有効にする方法

Sat, 20 Nov 2021 17:00:00 +0900

今年に入って3回ぐらい、simplecovでbranch coverage取れるよという話をしていて、意外とみんな知らないのでは？と思ったので、こちらでも記しておきます。

設定

Branch coverage (ruby “~> 2.5”) こちらに記載されていますが、ruby2.5以降は、enable_coverage :branch 1行入れるだけで有効になります。
railsだと以下のようになります。

1
2
3


SimpleCov.start 'rails' do
enable_coverage :branch
end

詳細はこんな感じ

line coverageとしては満たしていますが、elseのcaseが満たされていないというのが分かります。

注意事項

githubのREADMEにも記載されていますが、branch coverage便利なので、これだけ見れば良いと思う人がいるかもしれませんが、 branch coverageはあくまで条件が実行されているかを見るものですので、line coverageと合わせてみる必要があります。

Rails7(alpha2)ではransackの更新が必要

Sun, 07 Nov 2021 17:55:00 +0900

そろそろRails7 alpha2を試そうと思って、bundle update rails した後に、rails app:update したらエラーになりました。

$ rails app:update
rails aborted!
LoadError: cannot load such file -- polyamorous/activerecord_7.0_ruby_2/join_association
/rochefort/rails7/config/application.rb:20:in `<main>'
/rochefort/rails7/Rakefile:4:in `<main>'
/rochefort/rails7/bin/rails:5:in `<top (required)>'
/rochefort/rails7/bin/spring:10:in `require'
/rochefort/rails7/bin/spring:10:in `block in <top (required)>'
<internal:kernel>:90:in `tap'
/rochefort/rails7/bin/spring:7:in `<top (required)>'
bin/rails:2:in `load'
bin/rails:2:in `<main>'
(See full trace by running task with --trace)

どうやら

file名にactiverecordのversionがついている感じで何とも微妙なエラーメッセージですが、 ransack起因のものでした。

Bump the Rails version to 7 by yahonda · Pull Request #1205 · activerecord-hackery/ransack

rails の version間の差異を吸収するために、このような実装になってるかと思います。

対応

すでにrails contributorのyahondaさんが対応PR作成してくれていますが、 Rails自体がalpha版のためリリースはまだです。そのため、Gemfileに以下を設定して、bundle update ransackすれば良いです。

1

gem "ransack", git: "https://github.com/activerecord-hackery/ransack", ref: "81910c238dd4452bbe90541f13abb6e85b3bbfea"

ご参考

Bump the Rails version to 7 by yahonda · Pull Request #1205 · activerecord-hackery/ransack

dribbbleのようなモーダル兼詳細ページをRailsで作る（後半）

Sat, 18 Sep 2021 04:00:00 +0900

dribbbleのようなモーダル兼詳細ページをRailsで作る（前半）

こちらの続きです。

残りのタスク

前回記事の後半にも書きましたが、改めておさらいです。

Hugo Theme Gallery では、一応モーダルで表示するのと、別タブで表示するというのは実装できましたが、モーダル表示の際にURLの変更がされていない状態でした。

これは、HTML5のHistory APIを利用することで対応することができます。
History API - Web API | MDN

URLの変更（参照の履歴の追加）と、元の画面に戻る（参照履歴の削除）方法についてそれぞれ説明していきます。

URLの変更（参照の履歴の追加）

モーダルを開いたときにURLをセットする方法です。

1
2
3
4
5
6
7


const MODAL_STATE = "modal";
document.querySelector("body").addEventListener("click", (outerEvent) => {
if (outerEvent.target.className === "shot-img shadow-sm") {
const link = outerEvent.target.parentNode;
window.history.pushState(MODAL_STATE, link.getAttribute("data-modal-title"), link.getAttribute("href"));
}
});

window.history.pushState を利用します。ポイントは、第一引数なのですが、ここはブラウザの戻るボタンを押したときの対応として必要なものとなります。こちらについては、後述しますので、今は気にしなくて良いです。（addEventListenerは、jQueryでいうところのdelegateをさせるためにbodyに仕込んでいます。）

元の画面に戻る（参照履歴の削除）方法

こちらは、モーダルを閉じる場合と、ブラウザの戻るボタンを押した場合の2種類のケースを考慮する必要があります。

1.モーダルを閉じる場合

モーダル右上のxボタンや、モーダルの外をクリックした時に自動でモーダルが閉じられます。この閉じる機能に history.back() を追加すれば良いです。

1
2
3
4
5
6


const detailModalEl = document.getElementById("js-detail-modal");
detailModalEl.addEventListener("hide.bs.modal", () => {
if (window.history.state === MODAL_STATE) {
window.history.back();
}
});

具体的には、Modal (モーダル) · Bootstrap v5.0 に記載されている、 hide.bs.modal を利用します。（hidden.bs.modal も用意されていますが、こちらはモーダルが非表示になるのを待つので、ワンテンポ遅くなります。）

ここで、 history.state が出てきますが、後述のため一旦説明は省きます。

2.ブラウザの戻るボタンを押した場合

ブラウザの戻るボタンを押すと、history.back() が実行されるため、URLは正しく戻りますが、モーダルは残ったままです。

ですので、このモーダルを消せば良さそうです。

1
2
3
4
5
6


window.addEventListener("popstate", () => {
const detailModal = bootstrap.Modal.getInstance(detailModalEl);
if (detailModal && detailModal._isShown) {
detailModal.hide();
}
});

ここで登場するのが popstate です。これは、history.back() が呼び出された時にトリガーされます。ですので、ブラウザが開いている時だけ、モーダルを閉じる処理を入れます。
（Modal (モーダル) · Bootstrap v5.0）

stateについて

この detailModal.hide() によって、モーダルを閉じると、
「1.モーダルを閉じる場合」で説明した、hide.bs.modal のイベントが再び実行されてしまいます。

そうすると、 history.back() が実行されてしまい、2つ前のURLに戻ってしまいます。

これを避けるために、 pushState の第一引数にモーダル表示の際に追加したことを明示する情報をセットしていました。
この第一引数であるstateは、 popstate 時に history.state にて参照することができます。つまり、「1.モーダルを閉じる場合」にこの情報を見て、history.back() を実行するということができます。

（以下のifのところ）

1

 if (window.history.state === MODAL_STATE) {

ということで

stateを適切に扱うことで、モーダルを閉じた場合と、ブラウザの戻るボタンを押した場合の判断を行なうことができました。

これにて完成です。

dribbbleのようなモーダル兼詳細ページをRailsで作る（前半）

Thu, 16 Sep 2021 23:00:00 +0900

先日 Hugoのテーマ一覧を参照できるWebアプリを作成したのですが、この時に参考にしたサイトがあります。

Dribbble

言わずと知れた Dribbble です。このサイト、画像をクリックするとmodalっぽく開く実装なのですが、リンクを別タブで開いても表示されます。

これをRailsアプリで実装したくなってきました。

やり方ざっくり

モーダルで表示する部分のデータをクライアント側（HTML or JS）に持たせても良いのですが、一覧ページの画像は結構な数があるので、このデータの取得をAjaxで都度取得する実装とすることにしました。
あと、UIはBootstrap使っているので、モーダルの操作はこちらのAPIを利用しています。
　

もう少し詳しく

空のモーダルを用意する（HTML）
以下、slimの例。ここは、まぁ公式ドキュメントを元に空のモーダルを1つ作っておくだけです。

1
2
3
4
5
6


#js-detail-modal.modal.fade aria-hidden="true" style="display: none;" tabindex="-1"
.modal-dialog.modal-xl
.d-flex.justify-content-end
button.btn-close.btn-close-white aria-label="Close" data-bs-dismiss="modal" type="button"
.modal-content
#js-modal-body.modal-body

一覧ページの画像に詳細ページのリンクをAjaxで追加（Rails）
link_toのオプションに remote: true を設定しておきます。
　
詳細ページのviewは丸々partial化（Rails）
これは、モーダル表示でのAjaxのための実装です。次の工程で利用します。（ここがポイントかな）
　
partial化したviewをjs.erbにて、モーダルの中身を差し替え、モーダルの表示を行います。（Rails）

1
2


document.getElementById("js-modal-body").innerHTML = "<%= j(render 'theme')%>";
new Modal(document.getElementById('js-detail-modal')).show();

この Modalは、bootstrap.Modal です。webpackerのエントリーファイルで windowオブジェクトに突っ込んでいます。

1
2
3


// app/javascript/packs/application.js
import * as bootstrap from "bootstrap"
window.Modal = bootstrap.Modal;

残タスク

ここまでで、一応モーダルで表示するのと、別タブで表示するのは実装できました。

一見完了してそうなのですが、実はDribbbleではモーダル表示の際にURLを変更しています。ここは、HTML5のHistory APIであるpushStateを利用しています。いわゆるpjaxと呼ばれる実装ですね。ここは実装してみて、少しハマったので、別記事で詳細記載したいと思います。

Hugoのテーマ一覧を参照できるWebアプリを作成した

Tue, 14 Sep 2021 23:00:00 +0900

Hugo 早くて、使いやすくて気に入っています。

ただ、最初始めるにあたり、テーマ選びが難しいです。公式にもテーマ一覧があるのですが、結構な量あって、選びにくいという問題があります。

公式の詳細ページには、Githubのスター数が表示されているので、これを使ってソートすると割と人気なテーマが分かって良さそうということでちゃちゃっとRailsで作ってみました。

ここはHugoで作るべきな気がしましたが、バックエンドでDB更新となるとRuby/Railsを使うとサクッとできるので、何も考えずに作ってしまいました。

一見公式のテーマ一覧と変わらないように見えますが、タグ選択時にもGithub Starsでソートして人気そうなやつが上位に来るようにしています。

構成

Frontend: Bootstrap
Backend: Rails
Deploy: Linode

ちょっと後悔している点

勢いでscrapeして作ってしまいましたが、よくよく考えると公式のテーマ一覧の方もリスト管理されているはずで、そっちのデータを確認してそれを元に作るのが良いなと、出来上がってから思いました。

調べると、案の定以下にありました。
hugoThemesSiteBuilder/themes.txt at main · gohugoio/hugoThemesSiteBuilder

なので、ここは後で直すかもしれません。

cat cloneのbatを使ってみる

Thu, 09 Sep 2021 23:00:00 +0900

本日は RubyKaigi Takeout 2021 が開催されていました。感想はまとめて書こうかと思っていますが、デモ中に bat コマンドを実行している発表者が2人いました。 catの改良版で便利そう！だったので、早速入れてみました。

概要

A cat(1) clone with syntax highlighting and Git integration.

と記載されているように、見やすいシンタックスハイライトと、git（だけでなく色んなツール）連携が可能です。

色んなOSに対応しています。macはbrewで入れるだけです。
また、themeの設定や表示項目、拡張子とハイライトする言語の組み合わせを設定できたりします。見た目もきれいで、とても良いです。

bat ./README.md

git show v0.6.0:src/main.rs | bat -l rs

bat –list-themes

Link

sharkdp/bat

HerokuのRails App（Advent Calender Ranking）をlinodeに移行

Wed, 08 Sep 2021 22:00:00 +0900

勢いで作って放置していた Advent Calender Ranking ですが、 Herokuにデプロイしており、カスタムドメインでのSSL利用料に毎月 $7 かかっていました。
これをなんとかしたいという思いがあり、ついでに遊び場として Linodeを契約(VPC) していました。

実施したこと

Rubyのversion up
ついでに脆弱性対応（gem/npmのupgrade）
capistranoでのデプロイ設定、環境変数設定

DBは ElephantSQL を利用していたこともあり、特に大きな作業もなく、すんなり移行できました。

今後

Ink Interface Kit を利用しているのですが、UIが寂しい感もあるので、手が空いたら少し手を入れようと思っています。

Hugoのコメント機能としてDisqusを利用する

Wed, 01 Sep 2021 22:00:00 +0900

Hugoでコメント機能を導入するには、外部のサービスを利用するのが簡単です。今回は、広く利用されている Disqus を入れてみました。

気になるお値段

Disqus Plans and Pricing

50,000 pv/日から有料となります。

また、通常ではコメント非表示にしておいて、ボタンクリックで表示させる仕組みを入れれば、pv数は下げられます。
私が利用している hugo-theme-meme もこの機能があります。

Disqusの導入方法

迷いそうなとこだけpickup。

Disqusの登録

1.sign up
Disqus の GET STARTED からsign upします。

2.install on my site を選択

名称やURLを入力します。

3.platform選択一番下のmanualを選択します。

コードが生成されます。
これを突っ込めば利用できます。

Themeによっては、より簡単に設定できるようにしているものもあります。
私が利用している hugo-theme-meme もかなり簡単で、以下3箇所修正すれば利用できました。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


# config.toml
diff --git a/config.toml b/config.toml
index c63c193..c5a32e6 100644
--- a/config.toml
+++ b/config.toml
@@ -648,7 +648,7 @@ uglyURLs = false
 # Note: render only in production
# environment
- enableComments = false
+ enableComments = true
 # Note: *global settings*
# `comments` in post’s Front Matter
# has a higher priority than here
@@ -657,8 +657,8 @@ uglyURLs = false
 autoLoadComments = false
## Disqus
- enableDisqus = false
- disqusShortname = ""
+ enableDisqus = true
+ disqusShortname = "rochefort-dev"

こんな感じ

1.記事の最後に以下リンクが表示されます。

これをクリックすると

2.コメント欄が表示されます。

Puma(Rails6)をsystemdで起動させる

Mon, 30 Aug 2021 22:00:00 +0900

以前のPumaではdaemonizeオプションが用意されていましたが、Puma5.1で無くなりました。 Issueを見てみたところ、daemonizeはsystemd（やrunit）などのOSが提供しているものを利用してくれというスタンスのようです。

Puma公式のsystemdの書き方

こちらに記載されています（↓はv5.4.0のもの）。
puma/systemd.md at v5.4.0 · puma/puma

こんな感じに修正して利用しています。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31


# /etc/systemd/system/puma.service
[Unit]
Description=Puma HTTP Server
After=network.target
[Service]
# Puma supports systemd's `Type=notify` and watchdog service
# monitoring, if the [sd_notify](https://github.com/agis/ruby-sdnotify) gem is installed,
# as of Puma 5.1 or later.
# On earlier versions of Puma or JRuby, change this to `Type=simple` and remove
# the `WatchdogSec` line.
Type=notify
# If your Puma process locks up, systemd's watchdog will restart it within seconds.
WatchdogSec=10
User=rochefort
WorkingDirectory=/var/app/my_app/current
# Helpful for debugging socket activation, etc.
#Environment=PUMA_DEBUG=1
Environment=RAILS_ENV=production
Environment=RAILS_SERVE_STATIC_FILES=1
ExecStart=/bin/bash -lc 'bundle exec puma -C config/puma.rb'
Restart=always
[Install]
WantedBy=multi-user.target

以下、ポイントについて補足します。

Type

Puma5.1以上で sd_notify をinstallしている場合は、 notify を指定することでsystemdでシステム起動の異常を検知することが可能です。

それ以前は、 simple を指定します。（simpleだとコマンド実行で起動完了と判断されます。）この場合は、 WatchdogSec は不要です。

5.1以上にして、Gemfile に以下追加してinstallしておくのが良いでしょう。

# Gemfile
gem 'sd_notify'

Environment

環境変数ですが、この例では個別に指定していますが、プロジェクト固有の環境変数が別ファイルで管理されているなどすれば（例えば .env や .envrc など）、EnvironmentFile が利用できます。

ExecStart

公式の例では以下のように記載されています。

ExecStart=/<FULLPATH>/bin/puma -C <YOUR_APP_PATH>/puma.rb

anyenv(rbenv) 利用時に、パスが長くなってしまいます。（これでも良いのですが、プロジェクト毎に書き換える箇所が増えてしまいます。）

例）
ExecStart=//home/rochefort/.anyenv/envs/rbenv/shims/bundle exec puma -C /var/app/my_app/current/config/puma.rb

bash -lc を経由させることで、 .bash_profile を読み込ませた上で実行でき流ので、以下のようにsimpleに書けます。

ExecStart=/bin/bash -lc 'bundle exec puma -C config/puma.rb'

systemctlコマンド

公式ドキュメントには以下が記載されています。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


# After installing or making changes to puma.service
systemctl daemon-reload
# Enable so it starts on boot
systemctl enable puma.service
# Initial start up.
systemctl start puma.service
# Check status
systemctl status puma.service
# A normal restart. Warning: listeners sockets will be closed
# while a new puma process initializes.
systemctl restart puma.service

これに加えて、エラー発生時は以下で確認していました。

1

sudo journalctl -fp err

不動産価格指数をチャートで見れるサイトを作りました

Sat, 28 Aug 2021 17:00:00 +0900

最近、エンジニアが書いている不動産関係のブログ記事を見る機会があり、そこに出てきた「不動産価格指数」に興味が湧いたので、データを眺めていました。見ているうちにチャート化して、見たいときに見れるようにしておくと、需要がありそうだなと思って、勢いでWebアプリを作りました。

結構データとしても面白いです。マンションの値上がり率は全体的に高いのですが、中でも地方の方が高いというのは全く知りませんでした。てっきり関東都市部の方が高いと思っていました。

テーマ

脈略全くないですが、クリームソーダです。無駄にグラデーションさせてます。

データ

こちらで国土交通省によって公開されています。これ自体はありがたいのですが、ファイル形式はEXCELです。JSONかCSVで欲しいところですが、贅沢は言ってられないので、Parseして利用しています。

技術スタック

Server side: Rails6
Frontend: Bootstrap5、NVD3
Deployment: VPC Linode

補足

Excel Parser

roo というgemを使っています。公式に記載のやり方で、サクッとparseできました。ありがとうございます。

chart

NVD3 を利用。どうしても期間を変更できるslider付きのchartを使用したかったのでライセンス上利用可能なこちらを採用しています。 D3.jsのwrapperなんですが、使用しているversionが3系でかなり低いです。

Bootstrap5

Bootstrap久しぶりに利用しましたが、jQuery依存が無くなったんですね。すごい。

deployment

capistrano を利用。 10年ぶりぐらいに使ったのですが、大分変わっていて今回一番苦労しました。周辺機能がgem化されているのですが、anyenvでの利用に手間取りました。この辺は後ほど詳細書きたいと思います。

見ていた不動産関連のブログはこちら

リンク

不動産価格指数チャート

Linodeを契約(VPC)

Wed, 25 Aug 2021 20:05:26 +0900

Linodeの契約をしました。 2〜3年ぶりぐらいのVPCです。 herokuで運用しているアプリがあったので、久しぶりに使ってみています。

Linodeを選んだ理由

DigitalOcean使ったことなかったので、使ってみようと思っていたのですが、以下の2点からLinodeを利用することを決めました。しばらく使ってみたいと思います。

Tokyo Region

まぁ、DigitalOceanもシンガポールにあるので、それほど大差ない気はしますが、一応、近いに越したことはないということでプラスポイント。

100ドルキャンペーン

Try Linode for Free with $100 Credit | Linode

60日間で100ドルのクレジットがもらえます。

ググってみると、DigitalOceanも同様に、誰かのリファラルリンク付きのやつがありました。気にならなければ、どちらも同じですね。キャンペーンは恒常的にどちらもやってるイメージ。

でも、、、

Cost的にはほぼ変わらないので、どっち選んでも良さそうだとは思ってます。 DigitalOceanの方がユーザーが多そうなので、また次契約する機会があれば、再度検討してみたいと思います。

HugoのDeploy方法

Tue, 24 Aug 2021 21:30:36 +0900

Hugoのデプロイ先については Netlify にすることは決めていたのですが、デプロイ方法は当初 Github Actionを考えていました。

公式ドキュメント

しかし、デプロイのドキュメントも公式にしっかりあり、Netlifyについてもしっかり記載されていました。そしてめちゃくちゃすんなり、できました。こういう体験は非常に良いです。Hugo好きになってきました。

ざっくり概要

NetlifyでSite作って、リポジトリ連携（Github）して、設定ファイル（netlify.toml）配置するだけです。利用した設定ファイル（netlify.toml）は、公式記載のままで問題なかったです。

設定ファイルの注意点としては、HUGO_VERSION がnetlify.tomlと一致しているかぐらいでしょうか。

あとは、themeをgit cloneで取得している場合は、利用できないらしいので、git submodule を利用して追加しておくのが良いという記述があります。（もともと submoduleを利用していたので特に対応なし。）

参考

Hosting & Deployment | Hugo

HugoでBlogを作ってみた

Mon, 23 Aug 2021 18:30:20 +0900

Hatenaブログを独自ドメインに移行しようと思い立ったのですが、毎月700円かかるため、他のブログシステムで良いのないか探していました。

しかし、希望するものがなく、自前で環境用意するのが simpleかつコストも安く抑えられそうという気がしたので、少し試してみました。

ブログに求める機能

自分が必要とする機能を整理すると以下。

Must

独自ドメインが利用できる
HTTPSが使える
markdownが使える
templateが豊富（デザインで悩みたくない）
Tagging
記事の検索
低価格

今回改めて他のサービスを調べてみたところhatenaブログは結構良いかもしれないと思いました。個人的には「価格」以外は満たしていそう。
（いろんなscriptがinjectされて重たかったりするのは難点ですが、、、）

Better

Webの管理機能（webからブログ更新できる手軽さが欲しい）

こんな感じでしょうか。

Hugoとは

goのframeworkで高速かつ、Themeも豊富（だが探すのが結構大変）で、流行ってるようでしたので今回試してみました。

静的なファイルにビルドして、Netlifyにデプロイしちゃえば、お金かからず利用できます。
（デプロイに少し時間がかかってしまうのがネックといえばネック。）

Installation

ご参考：公式ドキュメント（Quick Start | Hugo）

ざっくり書くと、以下。

Macの場合はbrew で install
Themeを Complete List | Hugo Themes から選ぶ
Themeを git submodule add or ダウンロードして配置（themes以下）
Theme毎の設定を実施（だいたいThemeのページ辺りに実施方法が書いています）

あとは、 hugo serve すれば動きます。作業自体は難しくありません。

Themeカスタマイズ方法

Themeに手を入れるケースは時々あると思います。 HTML関連は、 layouts 以下に格納されており、Themeのファイルと同じ構成でプロジェクトルート以下に用意すればokです。

cssのカスタマイズは、基本的にはcustomize用のcssをstatic以下に配置して上書きを行います。（Themeによって、customize用のcssを設定ファイルで指定するようなものもあるようです。）

感想

良いところ

高速（static以外は、保存時に即時反映されるので、気持ちよくかけます。）
Themeのカスタマイズもそれなりにできる（layouts をコピーして修正すれば良いですし、そんなに難しくはないです。）
Deploy簡単（参考：Host on Netlify | Hugo）

良くないところ

Webの管理機能が無い
これは仕方がないですが、必要であればgithub上でmarkdown追加すれば、自動でdeployできるのでそこまで困らない気はします。

Theme選びが大変

Themeはかなりたくさん用意されているので、そこから選ぶのも一苦労。また、ぱっと見どういう機能があるのかというのが分かりにくいです。デモページは、だいたい用意されているようなので、なんとなくは確認できますが、デモページに用意されていない機能を確認する場合、（例えば syntax highlight がどういう感じかなど）実際に手元で起動させる必要があります。今回3つほど実際に動かしてみましたが、実装や設定内容もそれぞれ違うので、このTheme選びは結構重要です。

結果選んだのは、こちらの MemE | Hugo Themes 。おしゃれなヘッダーとsimpleなブログデザインに惹かれて選んでみました。
light/darkモードに切り替えもできるし、かなり設定項目も多いです。
中国の方が作成されていて、Github Issueとか見るの辛いかと思ったのですが、英語はokそうだったので今回利用してみました。

Rochefort.dev

New RelicをRailsアプリにinstallしてみる

Installation

と、まぁ簡単でした。

[Rails便利機能]ActiveSupport::OrderedOptions

ActiveSupport::OrderedOptions

#[]= と #[]

method_missing

String#+

ActiveSupport::InheritableOptions

simplecovでbranch coverageを有効にする方法

設定

詳細はこんな感じ

注意事項

Rails7(alpha2)ではransackの更新が必要

どうやら

対応

ご参考

dribbbleのようなモーダル兼詳細ページをRailsで作る（後半）

残りのタスク

URLの変更（参照の履歴の追加）

元の画面に戻る（参照履歴の削除）方法

1.モーダルを閉じる場合

2.ブラウザの戻るボタンを押した場合

stateについて

ということで

See Also

dribbbleのようなモーダル兼詳細ページをRailsで作る（前半）

Dribbble

やり方ざっくり

もう少し詳しく

残タスク

See Also

Hugoのテーマ一覧を参照できるWebアプリを作成した

構成

ちょっと後悔している点

See Also

cat cloneのbatを使ってみる

概要

bat ./README.md

git show v0.6.0:src/main.rs | bat -l rs

bat –list-themes

Link

HerokuのRails App（Advent Calender Ranking）をlinodeに移行

実施したこと

今後

See Also

Hugoのコメント機能としてDisqusを利用する

気になるお値段

Disqusの導入方法

Disqusの登録

こんな感じ

関連リンク

Puma(Rails6)をsystemdで起動させる

Puma公式のsystemdの書き方

Type

Environment

ExecStart

systemctlコマンド

不動産価格指数をチャートで見れるサイトを作りました

テーマ

データ

技術スタック

補足

Excel Parser

chart

Bootstrap5

deployment

見ていた不動産関連のブログはこちら

リンク

Linodeを契約(VPC)

Linodeを選んだ理由

Tokyo Region

100ドル キャンペーン

でも、、、

HugoのDeploy方法

公式ドキュメント

ざっくり概要

参考

HugoでBlogを作ってみた

`#[]=` と `#[]`

`String#+`

100ドルキャンペーン