esaのslideをembedする



以下みたいな感じで、マークアップする。

1
2
3
4
<div style="position: relative;width: 100%;border: 1px solid #999; border-radius:7px;overflow:hidden;">
<div style="padding-top: 75%;"></div>
<iframe src="https://esa-pages.io/p/sharing/3/posts/1117/1901213944ee86efdaea-slides.html#/" style="border-style: none;position: absolute;top: 0;left: 0;width: 100%;height: 100%;" scrolling="no" frameborder="no" />
</div>

こんな感じのマークアップを書く。esa側でいい感じにすべきだよなあ、します。

Hexo の archives の表示順序を変える

hexo-generator-indexにはあるorder_byオプションがhexo-generator-archiveには、なかったので足した。

Enable archives to sort by custom order by ppworks · Pull Request #9 · hexojs/hexo-generator-archive

1
2
3
4
5
6
7
   var config = this.config;
var archiveDir = config.archive_dir;
var paginationDir = config.pagination_dir || 'page';
- var allPosts = locals.posts.sort('-date');
+ var allPosts = locals.posts.sort(config.archive_generator.order_by || '-date');
var perPage = config.archive_generator.per_page;
var result = [];

0.1.5以降を使うとorder_byオプションが使えるようになるので、こんな感じで_config.ymlorder_byを追加する。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
diff --git a/_config.yml b/_config.yml
index 9c306f1..232f072 100644
--- a/_config.yml
+++ b/_config.yml
@@ -53,6 +53,9 @@ index_generator:
per_page: 10
order_by: -number

+archive_generator:
+ order_by: -number
+
# Category & Tag
default_category: uncategorized
category_map:

このhexoはesaと連携しているので、indexと同じようにnumberの降順にした。

Dockerでrails s

#250: blog/Dockerでrails new 出来たので今回は、rails sしたくていろいろ調べながら、最低限のDockerfiledocker-comose.ymlが出来上がったのでメモ。

Dockerfile-dev

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
32
33
34
35
36
FROM ruby:2.4.2-slim
MAINTAINER Naoto Koshikawa <koshikawa@ppworks.jp>

ENV DEBIAN_FRONTEND noninteractive

# set locale and timezone
RUN apt-get update -qq && \
apt-get -y upgrade && \
apt-get -y install locales && \
apt-get clean && \
apt-get autoclean && \
apt-get autoremove && \
echo en_US.UTF-8 UTF-8 > /etc/locale.gen && locale-gen && dpkg-reconfigure locales && \
echo "Asia/Tokyo" > /etc/timezone && dpkg-reconfigure -f noninteractive tzdata

ENV TZ Asia/Tokyo

RUN apt-get -y --no-install-recommends install \
build-essential \
libpq-dev \
nodejs \
wget

ENV ENTRYKIT_VERSION 0.4.0
RUN wget https://github.com/progrium/entrykit/releases/download/v${ENTRYKIT_VERSION}/entrykit_${ENTRYKIT_VERSION}_Linux_x86_64.tgz \
&& tar -xvzf entrykit_${ENTRYKIT_VERSION}_Linux_x86_64.tgz \
&& rm entrykit_${ENTRYKIT_VERSION}_Linux_x86_64.tgz \
&& mv entrykit /bin/entrykit \
&& chmod +x /bin/entrykit \
&& entrykit --symlink

RUN mkdir /app
WORKDIR /app

ENTRYPOINT [ \
"prehook", "bundle install -j4 --quiet", "--"]

docker-compose.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
version: '3'
services:
rails: &app_base
build:
context: .
dockerfile: Dockerfile-dev
environment:
DATABASE_URL: "postgres://postgres:@db:5432/your_app_development"
volumes:
- ".:/app"
ports:
- "3000:3000"
depends_on:
- db
command: ["bundle", "exec", "rails", "s", "-b", "0.0.0.0"]
db:
image: "postgres:10.0"
volumes:
- pg-data:/var/lib/postgresql/data
volumes:
pg-data:
driver: local

.dockerignore

1
2
3
4
5
6
7
.git
doc
docker-compose.yml
log
tmp
Dockerfile
Dockerfile-dev

config/database.yml

雑に環境変数DATABASE_URLで繋ぐようにしてみた。

1
2
3
4
5
6
7
8
9
10
11
default: &default
adapter: postgresql
encoding: unicode
pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
url: <%= ENV['DATABASE_URL'] %>
development:
<<: *default
test:
<<: *default
production:
<<: *default

使い方

Dockerfileを更新した場合は

1
2
docker-compose build
docker image prune # 必要に応じて

普段の開発は

1
docker-compose up -d

migrationなどの実行

1
docker-compose exec rails db:migate

DBに入る

1
docker-compose db psql -u postgres

みたいな感じ。

参考にした

この辺のQiita記事を参考にしつつも、そもそもDockerfileの記述方法もよくわからないし、docker-compose.ymlの記述方法もよくわからなかったので、公式ドキュメントを読みまくった。

buildしまくっていると、imageの差分が出来まくるので、不要なものを消したいと思って色々調べた結果

Dockerの不要なコンテナ・イメージを一括削除する方法

がとても参考になった。

1
docker image prune

をよく使う。

次はいまConoHa VPSで雑に動かしているアプリをDocker化してみようと思う。
本番も、docker-compose使うことになるのかな。だとしたら、今回作った開発用のものはdocker-compose-dev.ymlみたいな感じになるだろうか。試行錯誤してみよ。

Dockerでrails new

Macのローカルでrails newする際に、最初にどこかにrailsが必要なのが嫌で、rails newで出来たディレクトリだけ欲しくて、Dockerfileを書いてみた。

https://github.com/ppworks/docker-rails_new

Dockerfile

1
2
3
4
5
6
7
8
9
10
11
12
FROM ruby:2.4.2-slim
MAINTAINER Naoto Koshikawa <koshikawa@ppworks.jp>

ENV DEBIAN_FRONTEND noninteractive

RUN apt-get update -qq && \
apt-get -y install build-essential # nio4r

RUN mkdir /app
WORKDIR /app
COPY Gemfile /app/Gemfile
RUN bundle install -j4

Gemfile

1
2
3
ruby '2.4.2'
source 'https://rubygems.org'
gem 'rails', '>= 5.1'

docker-compose.yml

1
2
3
4
5
6
7
8
9
10
version: '3'
services:
rails-new:
build:
context: .
dockerfile: Dockerfile
volumes:
- ".:/app"
tty: true
stdin_open: true

rails new

1
2
3
cd ~/docker
git@github.com:ppworks/docker-rails_new.git dev
cd dev
1
docker-compose run --rm rails-new rails new your-awesome-app --skip-bundle

Dockerよくわかってないので、もっとかっこいい方法があるかもしれない。
次は、Docker上でrails sしてみたいと思う。

追記

2017-11-02 16:12
https://github.com/ppworks/docker-rails_new/pull/1
の内容を反映した。

Heroku SSL EndpointからAutomated Certificate Managementへ移行する

Heroku SSL EndpointからAutomated Certificate Managementへダウンタイムなしで移行したので、その記録。

Heroku SSL化を挟まないと、heroku certs:auto:enableしてからstatus: OKになるまでの間にダウンタイムが発生する。そのあたりの注意点は公式ドキュメントに書いてあった。

https://devcenter.heroku.com/articles/automated-certificate-management#migrating-from-ssl-endpoint
Migrating from the SSL Endpoint addon to Automated Certificate Management requires a DNS change. However, you can use Heroku SSL (SNI) as an intermediate step to avoid downtime for your custom domain. Start by following these instructions to migrate from SSL Endpoint to Heroku SSL (SNI). Once that process is complete, you can enable ACM with no downtime as described above.

いちど、Heroku SSLへ移行してから、ACM(Automated Certificate Management)へ移行すればいい。

Heroku SSLを使うには、heroku certs:addコマンドに--type sniオプションを付けて証明書を追加する。

このとき、既存の証明書と同じものをアップロードしてオッケー。

1
heroku certs:add example.com.crt example.com.key --type sni

すると、こんな感じで2つの証明書が表示される。

1
2
3
4
5
heroku certs -a pplog
Name Endpoint Common Name(s) Expires Trusted Type
────────────────── ──────────────────────── ──────────────────────── ──────────
gifu-1545 gifu-1545.herokussl.com www.pplog.net, pplog.net 2018-01-30 03:10 UTC True Endpoint
camarasaurus-91097 (Not applicable for SNI) www.pplog.net, pplog.net 2018-01-30 03:10 UTC True SNI

ドメインを確認すると

1
2
3
4
5
6
7
8
9
heroku domains -a pplog
=== pplog Heroku Domain
pplog.herokuapp.com

=== pplog Custom Domains
Domain Name DNS Record Type DNS Target
───────────── ─────────────── ───────────────────────────
www.pplog.net CNAME www.pplog.net.herokudns.com
pplog.net ALIAS or ANAME pplog.net.herokudns.com

CNAMEALIASに設定すべき項目が表示されるので、これらをDNSの設定に反映する。

1
dig CNAME www.pplog.net

TTLの設定に寄るけども、DNS反映されたら、Heroku SSL Endpointのアドオンを削除する。(焦らなくてもいいので次の日にでも)

1
heroku addons:destroy ssl -a pplog

Automated Certificate Managementを有効にする。

1
2
heroku certs:auto:enable -a pplog
Enabling Automatic Certificate Management... done

すぐに確認すると、In Progressになっている。

1
2
3
4
5
6
7
heroku certs:auto -a pplog
=== Automatic Certificate Management is enabled on pplog

Domain Status
───────────── ───────────
www.pplog.net In Progress
pplog.net In Progress

しばらくすると、OKになる。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
heroku certs:auto -a pplog
=== Automatic Certificate Management is enabled on pplog

Certificate details:
Common Name(s): pplog.net
www.pplog.net
Expires At: 2018-01-30 04:51 UTC
Issuer: /C=US/O=Let's Encrypt/CN=Let's Encrypt Authority X3
Starts At: 2017-11-01 04:51 UTC
Subject: /CN=pplog.net
SSL certificate is verified by a root authority.

Domain Status
───────────── ──────
www.pplog.net OK
pplog.net OK

証明書のTypeACMになっていれば完了。

1
2
3
4
heroku certs -a pplog
Name Common Name(s) Expires Trusted Type
────────────────── ──────────────────────── ──────────────────── ─────── ────
camarasaurus-91097 pplog.net, www.pplog.net 2018-01-30 04:51 UTC True ACM

Hexo のサイドバーに travis の builds を表示した

Copied from: blog/Hexo と esa 連携するときの travis の設定

travisのbuildろぐをサイドバーに出してみたくて出してみた。フィードは、こんな感じでアクセスできるのでJavaScriptで持ってきてパースする。だいぶ雑なコードになったので、あとでもうちょいちゃんとするほうがいいかも。

https://api.travis-ci.org/repos/ppworks/ppworks.github.io/builds.atom

それっぽく表示するために、各ステータスのtravis-ci上での色を調べてた。

status color
received #edde3f
queued #edde3f
created #edde3f
booting #edde3f
started #edde3f
canceled #9d9d9d
passed #39aa56
errored #db4545
failed #db4545

ステータスの一覧がtravis-ciのドキュメントで探し出せず、CSSのスタイルから調べることになった。各ステータスの正しい順序は未検証。できれば各ステータスの意味も正確に知りたい気持ちもある。

Seed FuをPostgreSQL 10 対応する

当面は、https://github.com/ppworks/seed-fu/tree/support-postgresql10 を使う。

https://www.postgresql.org/docs/10/static/release-10.html
Move sequences’ metadata fields into a new pg_sequence system catalog (Peter Eisentraut)

A sequence relation now stores only the fields that can be modified by nextval(), that is last_value, log_cnt, and is_called. Other sequence properties, such as the starting value and increment, are kept in a corresponding row of the pg_sequence catalog. ALTER SEQUENCE updates are now fully transactional, implying that the sequence is locked until commit. The nextval() and setval() functions remain nontransactional.

The main incompatibility introduced by this change is that selecting from a sequence relation now returns only the three fields named above. To obtain the sequence’s other properties, applications must look into pg_sequence. The new system view pg_sequences can also be used for this purpose; it provides column names that are more compatible with existing code.

The output of psql’s \d command for a sequence has been redesigned, too.

とのことで、いままで PostgreSQLID Sequenceを設定していた、こういうコードが落ちるようになった。

1
SELECT setval('#{sequence}', (SELECT GREATEST(MAX(#{quoted_id})+(SELECT increment_by FROM #{sequence}), (SELECT min_value FROM #{sequence})) FROM #{@model_class.quoted_table_name}), false)

エラーはこんな感じ

1
2
3
4
Failure/Error: SeedFu.seed

ActiveRecord::StatementInvalid:
PG::UndefinedColumn: ERROR: column "increment_by" does not exist

以下のように、新たに導入されたpg_sequenceカタログを参照するように変更した

1
SELECT setval('#{sequence}', (SELECT GREATEST(MAX(#{quoted_id})+(SELECT seqincrement FROM pg_sequence WHERE seqrelid = '#{sequence}'::regclass), (SELECT seqmin FROM pg_sequence WHERE seqrelid = '#{sequence}'::regclass)) FROM #{@model_class.quoted_table_name}),

ちなみにRailsの類似処理は既にマージされていた。

https://github.com/rails/rails/pull/28864

Hexo を esa ぽい URL にする

Copied from: blog/esa 2 GitHub の .travis.yml を微調整

Hexoのパスを/posts/242みたいにしてあげれば↑のCopied fromもいい感じにリンクされるのでは説。

https://github.com/ppworks/ppworks.github.io/commit/0ca5a701df1482bc638a5320ac047c622ad2d947

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
32
33
34
diff --git a/_config.yml b/_config.yml
index 76bbbfb..61852bc 100644
--- a/_config.yml
+++ b/_config.yml
@@ -14,14 +14,14 @@ timezone: Asia/Tokyo
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://ppworks.github.io
root: /
-permalink: :title
+permalink: posts/:number/
permalink_defaults:

# Directory
source_dir: source
public_dir: public
tag_dir: tags
-archive_dir: archives
+archive_dir: posts
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
diff --git a/themes/landscape/_config.yml b/themes/landscape/_config.yml
index 4c1bb96..e8d5ba2 100644
--- a/themes/landscape/_config.yml
+++ b/themes/landscape/_config.yml
@@ -1,7 +1,7 @@
# Header
menu:
Home: /
- Archives: /archives
+ Archives: /posts
rss: /atom.xml

# Content

permalink: posts/:numberにしたくなりがちだけど、ブラウザがhtmlとして認識しなくなってしまうので、/をつけて、トレイリングスラッシュあり的な扱いでお茶を濁す。

esa 2 GitHub の .travis.yml を微調整

Copied from: blog/GitHub Page を Hexo で作る

何も考えずに他人の.travis.ymlを適当に使ってたので、ちょっと調整したりした。
本当はpublicをcacheしたいんだけど、どうしてもうまく行かずに一旦ほぼ元のと同じ感じになった。この時間、なんだったんだ。

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
32
33
language: node_js
sudo: false
cache:
apt: true
directories:
- node_modules
node_js:
- '6'
branches:
only:
- esa
env:
global:
- GIT_COMMITTER_NAME=ppworks
- GIT_COMMITTER_EMAIL=koshikawa@ppworks.jp
- GIT_AUTHOR_NAME=ppworks
- GIT_AUTHOR_EMAIL=koshikawa@ppworks.jp
before_install:
- npm install
before_script:
- git config --global user.name 'ppworks'
- git config --global user.email 'koshikawa@ppworks.jp'
- rm -fr public
- git clone --depth=1 --branch=master https://github.com/ppworks/ppworks.github.io.git public
- cd public
- git ls-files | xargs -I {} rm -rf {}
- cd -
script:
- $(npm bin)/hexo generate
- cd public
- git add -A
- git commit -m 'Update'
- git push https://$GH_TOKEN@github.com/ppworks/ppworks.github.io.git master

Travis CIでのHexo自動ビルドエラーについて · Issue #2 · llminatoll/wakaba-review https://github.com/llminatoll/wakaba-review/issues/2

が大変参考になった。ありがたい。

そして、dateが毎回書き換わる問題によって、permalinkも毎回変わってしまってつらかったので、一旦permalinkからdateを消すという雑な対応をした。

https://github.com/ppworks/ppworks.github.io/commit/12eb69754b42587e7c6e6b78b29af83acbed3418

本当はpublicをcacheしたいんだけど、どうしてもうまく行かず

どうもpublic配下のcacheをクリアしても、git-cloneしたrepositoryがmasterブランチになってしまって、コンフリクトし続けてしまった。何か手順がミスっていたかもしれない。

どうせcacheしてもarchiveをネットワーク越しにもってくるし、git clone --depth=1と対して変わらんので、いいかもしれない。

git ls-files | xargs -I {} rm -rf {}

何なの、って思ってたけど、tricknotesさんのコメントをみて理解した。sourcethemeなどから消したファイルの差分を検知するために、一旦雑にワークディレクトリから全ファイルを消してから、hexo generateを実行することで、正しい結果をコミットできる。なるほどだ。