シンタックスハイライトをつけた

ブログ開発日記

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

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>

まあ無いよりはマシかな…？

2019-06-14 22:47

Docker Composeで開発環境を構築した

ブログ開発日記

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:

2019-06-07 18:38

OGP対応した

ブログ開発日記

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

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

Chrome拡張とFacebookやTwitterの開発ツールで動作確認した。

descriptionはとりあえずサイト名を設定してるので、きちんと本文のはじめの方だけ切り出して設定するとかを後でやる。

2019-06-06 21:12

HerokuのデプロイをDocker化した

ブログ開発日記

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化した恩恵は感じてないけど…

2019-06-02 17:05

ブログ開発日記

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

2019-05-18 22:51

ActionTextのフォームをE2Eテストした

ブログ開発日記

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

どうしたらいいのかなと思ってたけど、ちょうどいいPRが出ていた。

Add ActionDispatch::SystemTestCase#fill_in_rich_text_area by georgeclaghorn · Pull Request #35885 · rails/rails

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

2019-05-12 22:22

onkcopを導入した

ブログ開発日記

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

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

inherit_mode:
  merge:
    - Exclude

AllCops:
  Exclude:
    - "bin/*"

参考:

https://github.com/rubocop-hq/rubocop/blob/master/manual/configuration.md#merging-arrays-using-inherit_mode

2019-05-12 19:03

記事編集画面に<code>タグを挿入するボタンを付けた

ブログ開発日記

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

[feature request] Custom toolbar extension API · Issue #613 · basecamp/trix

2019-05-11 23:18

ブログ開発日記

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

2019-05-11 19:27

ブログ開発日記

同じ日に複数投稿したら時系列がよくわからなくなるので投稿時間も表示するようにした。
<input>にtype="datetime-local"があるの知らなかった。

<input type="datetime-local"> - HTML: HyperText Markup Language | MDN

あとタイムゾーンの設定でちょっとハマってしまった。

RubyとRailsにおけるTime, Date, DateTime, TimeWithZoneの違い - Qiita

config.time_zoneを設定しておけばよさそうと理解した。
念の為TZ環境変数も設定しておいた。

2019-05-11 15:00

タグ機能を実装した

ブログ開発日記

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

2019-05-10 00:00

ブログタイトルを設定できるようにした

ブログ開発日記

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

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

2019-05-09 00:00

Dependabotの設定ファイルを作った

ブログ開発日記

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"

2019-05-06 00:00

"Deploy to Heroku"ボタンを付けた

ブログ開発日記

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

Creating a 'Deploy to Heroku' Button | Heroku Dev Center

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

2019-05-01 00:00

bulmaで見た目を整えた

ブログ開発日記

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

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

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

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

Tag: "ブログ開発日記"

onkcopをejectした

シンタックスハイライトをつけた

Docker Composeで開発環境を構築した

OGP対応した

HerokuのデプロイをDocker化した

ActionTextのフォームをE2Eテストした

onkcopを導入した

記事編集画面に<code>タグを挿入するボタンを付けた

タグ機能を実装した

ブログタイトルを設定できるようにした

Dependabotの設定ファイルを作った

"Deploy to Heroku"ボタンを付けた

bulmaで見た目を整えた