BLOG_TITLE環境変数で設定できるようにした。

設定ファイルとかDBで設定するのはなんか手間のわりにメリットが少ないかなあと思って環境変数にしたけど、viewファイルで環境変数を直接参照しててなんかかっこ悪い気がするけどどうなんだろう。他のプロジェクトはどうやってるんだろうか。

id:sue445さんの記事を参考にDependabotの設定ファイルを置いてみた。
こんな内容にした:

# c.f. https://dependabot.com/docs/config-file/
version: 1

update_configs:
  - package_manager: "ruby:bundler"
    directory: "/"
    update_schedule: "daily"
    allowed_updates:
      - match:
          update_type: "all"
    automerged_updates:
      - match:
          dependency_type: "development"
          update_type: "all"
      - match:
          dependency_type: "production"
          update_type: "semver:patch"
    version_requirement_updates: "off"
  - package_manager: "javascript"
    directory: "/"
    update_schedule: "daily"
    allowed_updates:
      - match:
          update_type: "all"
    automerged_updates:
      - match:
          dependency_type: "development"
          update_type: "all"
      - match:
          dependency_type: "production"
          update_type: "semver:patch"
    version_requirement_updates: "off"

READMEに"Deploy to Heroku"ボタンを付けてみた。簡単にデプロイできるようになって便利。

2019-05-03 00:00

ブログ開発日記

投稿のURLにIDが見えてるとちょっとかっこ悪いというか、ソートがID順ではないのにID順なのを期待してしまいそうでややこしいのでランダム値にした。

DBマイグレーションでカラム追加したときに既存レコードにデータをどう設定するかという問題でちょっと悩んだが、面倒になってデプロイ後にrails consoleで対応した。
migration 時にデータを操作するのは悪手か? - Qiita

2019-05-02 00:00

ブログ開発日記

このサイトをGatsby on NetlifyからRails on Herokuに移行した。

Gatsbyで手っ取り早く作ったけど、Gatsbyに慣れてないせいでかゆいところに手が届かなかった。
じゃあもう自分で作ったほうが手っ取り早いなと思ってRailsで作り直した。

Rails 6.0.0.rc1で作ってる。いまのところ特に不具合に遭遇せず普通に開発できてる。

あとAtomフィードをつけた。AtomFeedHelperで簡単にできた。
https://api.rubyonrails.org/classes/ActionView/Helpers/AtomFeedHelper.html

前から使ってみたかったbulmaを使ってみた。
https://bulma.io/

bulmaはクラス名が叙述的になっていてわかりやすい。ちょっとRSpecに近い書き味。

あとは投稿日をつけたり、ActionTextを導入したり。

ActionTextを入れたあとsystem specが一部失敗するようになってしまった。ちょっと調べたけどわからなかったので、のちほど調査することにしていまは無視することにした。

投稿にタグを付けられるようにした。タグの選択はオシャレなUIにしたかったけど手間がかかりそうだったのでとりあえず<select multiple>にした。

2019-05-11 19:27

ブログ開発日記

同じ日に複数投稿したら時系列がよくわからなくなるので投稿時間も表示するようにした。
<input>type="datetime-local"があるの知らなかった。
あとタイムゾーンの設定でちょっとハマってしまった。
config.time_zoneを設定しておけばよさそうと理解した。
念の為TZ環境変数も設定しておいた。

2019-05-11 23:18

ブログ開発日記

長文を書くときに一旦保存したいなと思ったので、下書き機能をつけた。

ActionTextが内部で使ってるTrixは自動的にツールバーを出してくれるけど、<code>タグの機能がなかったので付けた。
Trix.config.textAttributesに要素を追加するのと、Trix.config.toolbar.getDefaultHTMLを置き換えたらできた。
ツールバーにボタンを追加するのは現状デフォルトのHTMLを全部置き換えるしかなくて、単純にボタンを追加するというAPIがない。
Issueでリクエストが出ていたので+1しておいた。そのうち対応されたらいいなと思う。

コードが汚くなってきたのでrubocopを導入したくて、調整するのが面倒なのでonkcopを入れてみた。よく調整されてるし、.rubocop.ymlに設定理由がコメントされてて勉強になる。

そのままの設定だとbin/以下のファイルで引っかかるけど自分で作ったファイルじゃないので除外設定した。
普通に設定するとonkcopで指定されてる除外設定を上書きしてしまうので、追加されるようにinherit_modeを指定する。

inherit_mode:
  merge:
    - Exclude

AllCops:
  Exclude:
    - "bin/*"
参考:

ActionTextのリッチテキストエディタは単純な<textarea>ではなく、JSでテキスト入力をトラップして処理してる(らしい)ので、capybaraでフォームの入力をしようとしても普通のやり方だとうまくいかなかった。

どうしたらいいのかなと思ってたけど、ちょうどいいPRが出ていた。
page.execute_scriptでJSを実行して文字列をリッチテキストエディタに入力させるらしい。なるほど。
同じようにやったらテストが上手く動くようになった。

2019-06-02 17:05

ブログ開発日記

投稿ページの<title>タグに個別のタイトルを表示するようにした。

Dockerの勉強がてら、HerokuのデプロイをDocker化(という言葉であってるのか?)した。

参考: Building Docker Images with heroku.yml | Heroku Dev Center
作業内容はこちら: Heroku container deploy by okonomi · Pull Request #152 · okonomi/blg

まずstackをcontainerに変更する。
herokuコマンドで切り替え:

heroku stack:set container -a oknmjp
Review Appはapp.jsonの指定を変更:

{
   "stack": "container"
}
次に、アプリの定義ファイルheroku.ymlを作る:

build:
  docker:
    web: Dockerfile.production
  config:
    GITHUB_OAUTH_CLIENT_KEY: xxx
    GITHUB_OAUTH_CLIENT_SECRET: xxx
    SECRET_KEY_BASE: xxx
release:
  image: web
  command:
    - bin/rails db:prepare
run:
  web: bin/rails server -p $PORT
あとはDockerfile.productionをいい感じに用意する。

ハマったこと:
  • イメージビルド時にbin/rails assets:precompileを実行しているが、SECRET_KEY_BASEを設定する必要があった
  • Railsサーバの起動ポートは$PORTで指定しないといけない
解決してないこと:
  • ビルド時にSECRET_KEY_BASEとかの漏洩しちゃいけない値はどうDockerに渡せばいいのか
    • アプリのConfig Varsはビルド時には参照できない
    • いまはとりあえずダミー値を渡してるけどあんまり良くない気がする
まだDocker化した恩恵は感じてないけど…

meta-tagsを使ってOGP対応した。

https://github.com/kpumuk/meta-tags

Chrome拡張とFacebookやTwitterの開発ツールで動作確認した。
descriptionはとりあえずサイト名を設定してるので、きちんと本文のはじめの方だけ切り出して設定するとかを後でやる。

Railsサーバとwebpack-dev-serverを別コンテナで起動して、WEBPACKER_DEV_SERVER_HOSTでRailsにwebpack-dev-serverの居場所を教えてあげる形にした。

version: "3.7"

services:
  web: &app_base
    build: .
    ports:
      - "3000:3000"
    volumes:
      - .:/app
      - bundle:/app/.bundle
      - node_modules:/app/node_modules
      - home:/root
    environment:
      BUNDLE_PATH: /app/.bundle
      BUNDLE_JOBS: 4
      WEBPACKER_DEV_SERVER_HOST: webpacker
    command: /bin/sh -c "rm -f tmp/pids/server.pid && bin/rails s -p 3000 -b '0.0.0.0'"
    depends_on:
      - db
  webpacker:
    <<: *app_base
    ports:
      - "3035:3035"
    command: bin/webpack-dev-server
  db:
    image: postgres:11.2
    ports:
      - "5432:5432"
    volumes:
      - pg_data:/data
    environment:
      PGDATA: /data

volumes:
  bundle:
  node_modules:
  pg_data:
  home:

コードを書いたときにシンタックスハイライトが効くようにしてみた。

enable syntax highlighting using highlight.js · okonomi/blg@e5835bc

highlight.jsを使った。
TrixエディタのUIだとHTMLの直接編集ができないので<code class="ruby">みたいに言語を指定したりできないけど、highlight.jsは勝手に言語を判別してなんとなくいい感じに色付けしてくれるので楽。

Ruby:
class User < ApplicationRecord
  before_create :set_remember_token

  private

    def set_remember_token
      self.remember_token = generate_remember_token
    end

    def generate_remember_token
      SecureRandom.hex(20)
    end
end
HTML:
<!DOCTYPE html>
<html>
  <head>
    <title>Sample</title>
  </head>
  <body>
    <p>Hello</p>
  </body>
</html>
まあ無いよりはマシかな…?