リンクは公式のドキュメントへのリンクだがドキュメントが用意されていないHookもあるのであしからず。

認証系

システムにログイン・ログアウトしたときに呼ばれるHook。
Sidecar化した今OAuth APIへのアクセスが主な使われどころ。

before_login

認証する前に呼ばれる。

after_login

認証後に呼ばれる。

login_failed

認証が失敗したときに呼ばれる。

before_logout

ログアウト処理の前に呼ばれる。

after_logout

ログアウト処理の後に呼ばれる。

REST API系

REST APIにアクセスしたときに呼ばれるHookたち。
Sugar v7から実装されたHookである。

before_routing

REST APIのルーティング判定前に呼ばれる。
使い所はなさげ。

after_routing

REST APIのルーティング判定後に呼ばれる。
こちらも使い所はなさげ。

before_api_call

ルーティング処理が終わり、APIクラスがロードされる前に呼ばれる。
これも使い所はなさげ。ロギングくらい？

before_respond

クライアントにAPI実行結果を返す直前に呼ばれる。
HttpResponseのインスタンスが渡されるためレスポンスヘッダーに情報を付与したり消したりで使えそう。

before_filter

Filter APIのクエリ実行前に呼ばれる。
SugarQueryインスタンスとクエリオプションが渡されるため検索クエリに手を加えたいときに使えそう。

Bean系

Sugarのカスタマイズで一番使うのがこれらのBean系のHookだと思う。
Sugarのバックエンドのカスタマイズでここを抑えておけばなんとかなるといっても過言ではない。

モデルに近いHookなのでSidecar、BWC共に呼ばれる。

before_fetch_query

ListViewやSubpanelなどリストデータを取得するクエリの実行直前に呼ばれる。
SugarQueryインスタンスとselectするフィールドが渡されるがあまり使い所がなさそう。

after_fetch_query

ListViewやSubpanelなどリストデータ取得クエリの実行後に呼ばれる。
取得したデータのBean配列、DBから取得した生のデータが渡されるため、データ整形はここで。

before_save

最もよく使うHook。
保存前にモデルを操作したり値を判定したり。

after_save

最もよく使うHook。その2。
保存後に子のモデルを更新したり自モデルに関連したモデルを操作することが多い。

before_retrieve

BeanFactory::getBean()の処理前に呼ばれる。
リストではなく単一モデルが対象となる。つまりRecordView（DetailView、EditView）に関連する。

after_retrieve

BeanFactory::getBean()の処理後に呼ばれる。
モデルのデータを整えたりするのがここ。

process_record

ListViewのデータを処理するときに呼ばれる。
一覧データの整形などはこちら。

before_delete

モデルの削除前に呼ばれる。

after_delete

モデルの削除後に呼ばれる。
紐づくデータの掃除などはここ。

before_restore

削除したデータを復活させたときに呼ばれる。
未使用。

after_restore

同上。

リレーションシップ系

モジュールデータのリレーションシップが操作されたときに呼ばれるHookたち。
「データの紐付きが解除されたら〇〇したい」など結構使い所があるHookである。こちらもモデルに近いHookなのでSidecar、BWC共に呼ばれる。

before_relationship_add

データの紐付け前に呼ばれる。
サブパネルでデータを関連付けたときに親のデータを子に書くなど特定の処理を行いたいときに。

after_relationship_add

データの紐づけ後に呼ばれる。

before_relationship_update

データの紐づけ更新前に呼ばれる。

after_relationship_update

データの紐づけ更新後に呼ばれる。

before_relationship_delete

データの紐づけを削除する前に呼ばれる。

after_relationship_delete

データの紐づけを削除した後に呼ばれる。

View系

これらはSugarViewで処理されるBWCのみで有効なHook。
レガシーシステムでは使用しているところもあるだろうがほぼ使わなくなったHookである。実際 v7.10 でDeprecatedとなった。

after_ui_frame

SugarViewのdisplay処理の後に呼ばれる。
画面に追加のViewを流し込みたいときなど。

after_ui_footer

SugarViewのdisplay処理の最後に呼ばれる。

アプリケーション系

after_entry_point

Sugarの動作に必要なプログラム、設定値の読み込み、ログ、DBの初期化を行ったあとに呼ばれる。
使いみちがありそうでないHook。

after_load_user

Sugarの$currentUserをロードした後に呼ばれる。
ログインユーザーの情報でなんやかんやするときに使う。

after_session_start

セッションスタートの後に呼ばれる。

entry_point_variables_setting

Sugarの動作に必要なプログラム、設定値の読み込みが完了し、初期化を実行する前に呼ばれる。
v6.5にはなかったような。。

handle_exception

その名の通り例外が発生したときに呼ばれる。
もちろんハンドリングしている例外のみだし、BWCなどのレガシーシステムの方はふわっとした実装になっているため必ず呼ばれるわけではないことに注意。

server_round_trip

sugar_cleanup()が実行されたときに呼ばれる。
ドキュメントにはExecutes at the end of every page.と書かれてある。。

process_report_row

レポートのデータを1行ずつ処理するときに呼ばれる。
らしいが試してみた感じうまく動いていない。

before_email_import

SugarSNIPのメールインポート処理で呼ばれる。
未使用。

after_email_import

同上。

after_retrieve_elastic

ElasticSearchデータをハンドリングする際のSugarBean取得後に呼ばれる。
未使用。

スケジューラージョブ系

job_failure

スケジューラのJobが失敗したときに呼ばれる。

job_failure_retry

スケジューラのJobが失敗してリトライ処理を行ったときに呼ばれる。

実際に本番で使用するのは多くて5つくらいかなぁ。経験上before_save, after_saveを知っておけば大体なんとかなるっぽい。次はSidecarの隠しパラメータをまとめてみたい。こちらの方が実用的だがドキュメントに載っていないものが多いのでまとめ甲斐があるでしょう。

作成日、更新日を自動セット

• loopback-ds-timestamp-mixin

論理削除

• loopback-softdelete-mixin

不要なAPIを削除

例えば、アクセストークンを取得するAPIの削除

User.disableRemoteMethodByName('prototype.__count__accessTokens');
User.disableRemoteMethodByName('prototype.__create__accessTokens');
User.disableRemoteMethodByName('prototype.__delete__accessTokens');
User.disableRemoteMethodByName('prototype.__destroyById__accessTokens');
User.disableRemoteMethodByName('prototype.__findById__accessTokens');
User.disableRemoteMethodByName('prototype.__get__accessTokens');
User.disableRemoteMethodByName('prototype.__updateById__accessTokens');

https://qiita.com/shimitei/items/7ed41944a330873c6b6f

idをuuidに変更する

https://stackoverflow.com/questions/36633516/can-i-use-non-sequential-id-for-loopback-model

"id": {
  "type": "string",
  "id": true,
  "defaultFn": "guid"
}

SSL対応

• loopback-ssl

ログインユーザーの情報を取得しておく

• loopback-component-currentuser

モデルが選べてカスタム条件も入れられるのでよさげ。
公式のドキュメントに載ってる実装の拡張。

• https://loopback.io/doc/en/lb3/Using-current-context.html#use-a-custom-strong-remoting-phase

プロセスマネージャー

pm2でも良いんだけど、せっかく純正のプロセスマネージャーがあるので使ってみる。

yarn global add strongloop
cd app-dir
slc start

TODO: サーバー再起動時のプロセス自動起動の方法を確認する。

チームセキュリティー

ロールによるACLはデフォルトで実装されているけれど、チームによるアクセス制限を掛けたい場合。
例えば、「チームAに所属している人はチームAのデータのみ取得できるようにする」とか。

• loopback-component-access-groups

実装した後にこのプラグインの存在に気づいてショック！

これで大体の土台は整えられると思う。
あとはOAuthやJWTなどの認証周りだろうか。

https://github.com/rythgs/sugar-docker-example

もともと中の人が作ったものをforkしてロケールの設定や最新のSugarに対応出来るように修正。細かい違いはあれど、PHP7.1のSugar7.9以降とそれ以外だと思うのでブランチで分けられるようにしておいた。

今後ちょくちょくメンテしていくつもり。

症状

MacBook Proを使ってしばらくしていると「パツンッ」とか「パキンッ」みたいな音(決して金属音ではない。どっちかというとプラスチック系の音)がキーボード上部(ロジックボードがある辺り)から鳴る。筐体が温まってきたくらいで鳴るのでヒートシンクとかの熱膨張が関係しているのかなと思っていたが、ディスプレイの角度を変えたときも似たような音が鳴る。

検索してみると結構報告されている模様。。

• Popping Sound, MBP 2016 | Official Apple Support Communities
• MacBook Pro 2016 15インチモデルで、高発熱時にポップノイズが出る問題が報告される。 | AAPL Ch.

この動画が分かりやすい。

突然大きな音が鳴るので心臓に悪い。動画では伝わらないかもしれないけど結構驚く。

いざGenius Barへ

症状が発生してからだいぶ放置していたが重い腰を上げてジーニアスバーに行くことにした。それにしても、これをしたら100%再現するというのがないので再現するか心配だったのだが、ハードウェアチェックをかけているときに運良く音がなってくれた。ディスプレイの角度を変えたときも同様の音が鳴ることを伝え、バックヤードで確認を行なってもらうと確かに再現したらしくそのままリペアセンター行きとなった。

修理されて戻ってきたMacBook Pro

土曜日の昼にジーニアスに行って、修理されて戻って来たのが水曜日の午前中。1週間から10日と聞かされていたので、なかなかに速い。
さて、不具合はどこだったのかというと、修理報告書にはディスプレイユニットを交換したという旨が記載されていた。

今のところは再発することもなく完全解消されている！ヽ(´▽｀)ノﾜｰｲ♪

そして、見た目的には大きく変わらないが、一つだけ明らかに変わったところがある。
それはディスプレイを閉じた状態から開くときの「感じ」で、修理前は「バコッ」と開く感じだったのが、修理後は「ヌルン」と開くようになっていた。多分現行ロットはヒンジ周りに何かしらの改善が施されたものに変更されているんだろうね。なので2017モデルで報告が少ない。

今まで結構Apple製品使ってきたけど運良く不具合に当たらなくて、修理に出したのはMacBook Pro(2006)がGPUかロジックボードだかの交換プログラムの対象になったとき以来で知らなかったんだけど、今はアップルのクリアケースがつくんだね。ちょっと嬉しい。

1.記事が前日のものとして公開される

Netlifyが自動デプロイした記事のパーマリンクが1日前に設定されていることに気づいた。Markdownにはdate: 2017-08-04と記述しているが、デプロイされると

http://rythgs.co/archives/2017/08/03/hogehoge/

上記のような1日前のパーマリンクになってしまう。ローカル環境でhexo generateすると大丈夫なのでhexo generateしたサーバーのtimezoneに依存するのだろう。おそらくUTCで-9時間してるんだよね。

解決法としては、すべてのMarkdownに時間まで設定してデプロイし直したらOKだった。(ex. date: 2017-08-04 12:12:12)

2.webpack導入

モジュールをバンドルするのにgulp使っていたのをwebpackに移行した。
主な変更点は以下の通り。

• Hexoプラグインでやっていたminifyをバンドル時に実施
• jQueryプラグイン系はすべてnpmで管理

yarn add --dev webpack babel-core babel-loader babel-preset-es2015

const webpack = require('webpack');

const path = {
  src: './source/assets/js/_src',
  dist: './source/assets/js',
};

module.exports = options => {
  return {
    entry: `${path.src}/main.js`,
    output: {
      filename: `${path.dist}/bundle.js`,
    },
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
      }),
      new webpack.optimize.UglifyJsPlugin({
        sourceMap: false,
      }),
    ],
    module: {
      loaders: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          loader: 'babel-loader',
        },
      ],
    },
    resolve: {
      alias: {
        masonry: 'masonry-layout',
        isotope: 'isotope-layout',
      },
    },
  };
};

ハマったところ

webpack実行しようとしたらisotope-layoutの名前解決ができねーよって怒られる。
どうやらresolve設定を書いてやる必要があるみたいで。

• https://isotope.metafizzy.co/extras.html#webpack

jQueryプラグインとして使用するとエラーになったのでバニラで記述するようにした。

const isotope = new Isotope('.hoge', { /* options */ });

3.Hexoプラグインの見直し

Hexoで運用してしばらくたったのでプラグインを整理してみた。browsersyncやminify系プラグインを外したり。現在入れているプラグインは以下の通り。

hexo-clean-css

CSSをminifyする。JavaScriptはwebpackで実施。

hexo-html-minifier

HTMLをminifyする。

hexo-generator-robotstxt

robots.txtを生成する。

hexo-generator-feed

Atomfeedの生成。

hexo-generator-seo-friendly-sitemap

sitemap.xmlの生成。もう一つhexo-generator-sitemapがあるが、「seo friendly」と掲げているのでこちらを採用した。

4.フォント設定を見直し

Note Sans Japaneseを読み込んでいたが、1.6MBと重たいので廃止した(サブセット化するまでもない)。それとカーニング設定を追加。

letter-spacing: .1em
font-feature-settings: "palt" 1
font-kerning: auto

以上、内部的なお話でした。

• リポジトリにプッシュするだけで
• ビルドしてデプロイまでを自動化
• CDNに対応し
• カスタムドメインも使え
• HTTPSに対応

難しいことすることもなくGUIでポチッとするだけで設定が完了します。
詳細な設定は公式の手順が用意されているので問題なし。

• A Step-by-Step Guide: Hexo on Netlify | Netlify

ハマったところ

• テーマの方で管理していたnpmパッケージが有効にならない
  → まぁ当たり前で、ルートの方で管理するようにした
• HTTPSの設定が浸透しない
  → *.netlify.comの証明書が浸透していたため一時的にサイトが見れない状態に
  → 一旦Netlifyのサイトを削除して再設定でOK
  → すぐさまLet’s Encryptの証明書が有効になった

Hexoに移行するにあたって

郷に行っては郷に従えということでデフォルトHexoに従いテンプレートエンジンとCSSは以下の通りに移行した。

SASSはborbonを使っているので代替フレームワークはkouto swissを採用。大体はそのまま移行できるが、modular-scaleなど細かいところで違いが見受けられたのでドキュメント見つつ修正を施した。ポイントは以下の通り。

• modular-scale
• Stylus記法
• Partialのimportはアンダーバーまで書く

テーマの移行はHexo関係なくStylusとEJSを黙々と書けば良いので、以下ではHexoの仕様に合わせるところを主にあげたいと思う。

リソースはどこで管理すべきか

画像の管理はAsset Foldersという機能があるのでそれを使うと良いらしい。
が、記事ごとにディレクトリが生成されてウザいのでsource/assets/imgの中で管理することに。デプロイした時にはsourceがドキュメントルートになる。どうやらテーマのsourceも同じ構成にしておけばhexo generateした時にマージされて配置される。例えば、

• source/assets/img/post-image.png
• theme/{theme-name}/source/assets/img/theme-image.png

上の 2 つの画像はhexo generateすると以下のように配置される。

public/
  assets/
    img/
      post-image.png
      theme-image.png

この動きはsourceディレクトリ配下のすべてのファイルに適用される。

Asset Pipelineが欲しい

MiddlemanにあってHexoにないもの、それはAsset PipelineってことでJavaScriptなどは自前で結合する必要がある（まぁしなくても良いけど）。この辺りは Gulpで自動化しつつ、jQueryなどのライブラリやプラグインはnpmで管理することにした。ついでにES2015で書きたいのでBabelを導入。

cd theme/rythgs
npm install --save-dev gulp gulp-concat babel babel-preset-es2015 gulp-babel gulp-plumber

ファイル結合してbabel通して保存する簡単な処理を書きます。

var gulp    = require('gulp'),
    concat  = require('gulp-concat'),
    babel   = require('gulp-babel'),
    plumber = require('gulp-plumber');

var config = {
  // 結合したい JavaScript たち
  src: [
    './node_modules/jquery/dist/jquery.min.js',
    './source/assets/js/_src/**/*.js',
  ],
  dist: './source/assets/js/'
};

gulp.task('build', function() {
  return gulp.src(config.src)
    .pipe(plumber())
    .pipe(concat('all.js'))
    .pipe(babel())
    .pipe(gulp.dest(config.dist));
});

gulp.task('watch', function() {
  gulp.watch(config.src, ['build']);
});

gulp.task('default', ['watch']);

package.jsonからライブラリを自動で読み込みたいが、そこまでする量ではないのでベタ書き。テンプレートではall.jsのみを読み込むようにしておく。

{
  "presets": ["es2015"],
  "compact": false
}

ES2015 を使うので.babelrcに設定を書く。
自動で圧縮してくれるが圧縮は後述するプラグインに任せるのでオフっておく。

プラグインで拡張する

必要なものは大体プラグインで用意されているのでnpmでインストールする。

hexo-all-minifier

html, css, js, imageを圧縮する。**hexo serverの時も動作してしまう** のでhexo generateの時だけ有効化するのが良い。この辺り自動でやってくれるようにならないだろうか。

hexo-browsersync

言わずもがな。自動リロード。
※これ使ってるとHTMLのお尻が文字化けするバグがある。

hexo-deployer-git

GitHubにデプロイするのに必要。

hexo-generator-feed

atom.xmlの出力。

hexo-generator-sitemap

sitemap.xmlの出力。

そんなわけでMiddlemanからHexoに完全移行し快適なブログ環境が整った。
Middlemanと違ってテーマが完全に分離できて一から作るのも楽。そして何と言ってもNodeで完結するようになったのが個人的に大きなポイントでございました。あ、コード表示がhighlight.jsでちょっとリッチになったのも嬉しい :-P

1.Sequelizeで使用しているDBインスタンスを取得する

ORMを通すよりは直接DBインスタンスからクエリ流した方が速いので、使用しているインスタンス取れないかなぁと思ってソース見たらメソッドが用意されておりました。

sequelize.connectionManager.getConnection().then((db) => {
  db.get('SELECT name FROM hoge WHERE id = 1', (err, result) => {
    if (err) {
      return;
    }
    console.log(result.id);
  });
});

ポイント

• getConnectionするとPromiseが返る
• コールバックの第1引数にDBインスタンスが入る
• APIは各DBに依存する

2.Sequelizeでトランザクション管理

複数モデルのupdateを1トランザクションで流して、全て実行した後Promiseの結果を受け取ります。Promise.eachがキモ。Bluebird ありがとう。

sequelize.transaction((t) => {
  return sequelize.Promise.each(models, (model) => {
    return model.update(updates, {transaction: t});
  });
}).then((result) => {
  // コミットしたらこっち
}).catch(() => {
  // ロールバックしたらこっち
});

3.エスケープ処理する

1とも関係しますが、シビアにパフォーマンスが要求される場面でORMの機能は使わずクエリをそのまま流したかったのでエスケープ処理を入れる必要がありました。

sequelize.escape(req.params.user_id);

Sequelize意外と痒いところに手が届きます。
Promiseベースで記述できるのもGood :D

気づけば2016年最初の記事。。

今回は新しく用意したOmnibus GitLabに古いGitLabを完全移行させるという流れで実施しました。サーバーはUbuntu Server 14.04です。

1. Omnibus GitLabをインストール
2. Omnibus GitLabの設定
3. Non-omnibus GitLabのバックアップ
4. DBダンプをMySQLからPostgreSQLに変換
5. バックアップデータをOmnibus GitLabにRestore

Omnibus GitLabのインストール

Omnibus版のインストールは恐ろしく簡単になってます。
公式の手順に沿って進めればすぐにインストール完了です。

https://about.gitlab.com/downloads/#ubuntu1404

Omnibus GitLabの設定

Omnibus版では設定を以下のファイルで行うようになっています。
gitlab.yamlやinitializerに記述していたものが一つのファイルにまとめられています。

/etc/gitlab/gitlab.rb

タイムゾーンの設定

gitlab_rails['time_zone'] = 'Asia/Tokyo'

メールの設定

GitLabから送られるメールの設定です。

gitlab_rails['gitlab_email_from'] = 'gitlab@example.com'
gitlab_rails['gitlab_email_display_name'] = 'GitLab'

SMTP 設定

メールの環境に合わせて設定します。
Gmailなども設定できますが社内のSMTPサーバーを設定。

設定が終わったら反映

設定を変更したら反映させます。

sudo gitlab-ctl reconfigure
sudo gitlab-ctl restart

Non-omnibus GitLabのバックアップ

こちらは旧環境で行います。

sudo service gitlab stop
cd /home/git/gitlab
sudo -u git -H bundle exec rake gitlab:backup:create RAILS_ENV=production

DBダンプをMySQLからPostgreSQLに変換

Omnibus版はメインデータベースがPostgreSQLに変更されているので、MySQL > PostgreSQLの変換が必要になります。これも公式の手順通りに進めればOK。

https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/update/mysql_to_postgresql.md#converting-a-gitlab-backup-file-from-mysql-to-postgres

この時点で移行用のバックアップデータが完成したことになります。

バックアップデータの移行

作成したバックアップデータをOmnibus GitLabへ移行します。
例によって公式の手順通りでOK。

https://gitlab.com/gitlab-org/omnibus-gitlab/blob/98b1bfb0d70082953d63abbc329cd6f2c628d3bc/README.md#restoring-an-application-backup

# バックアップデータを所定の位置に配置
sudo cp <TIMESTAMP>_gitlab_backup.tar /var/opt/gitlab/backups/

# unicorn と sidekiq の停止
sudo gitlab-ctl stop unicorn
sudo gitlab-ctl stop sidekiq

# バックアップデータをリストア
sudo gitlab-rake gitlab:backup:restore BACKUP=<TIMESTAMP>

# GitLab 起動
sudo gitlab-ctl start

# チェック
sudo gitlab-rake gitlab:check

チェックでエラー発生

チェックかけたらリポジトリへのアクセス権がないと怒られたので修正します。

sudo chmod -R ug+rwX,o-rwx /var/opt/gitlab/git-data/repositories
sudo chmod -R ug-s /var/opt/gitlab/git-data/repositories
sudo find /var/opt/gitlab/git-data/repositories -type d -print0 | sudo xargs -0 chmod g+s

findコマンドはsudoしてやらないと怒られるので注意。

おわりに

移行後にアクセスすると一回だけ502エラーが出てちょっと焦りましたが、reconfigure とrestartしたら直ったのでとりあえずOKです。バックアップ、リストア周りが優秀で予想以上に移行が簡単だったので自分の作るシステムもこうありたいと思いました。

ワンカラムなシンプルなサイトなので、メディアクエリーのブレークポイントのバリエーションは大・中・小の3つくらいでよいでしょう。それぞれモバイル、タブレット、デスクトップといったところでしょうか。

フォントサイズのベースを以下のように設定します。

で、ブレークポイントをどこに置くかという問題ですが、主なフレームワークのブレークポイントを見ると、

以上のようになっており、iPhone 6までのlandscapeが640pxで収まりiPadのlandscapeが1024pxで収まるFoundationのブレークポイントを参考にしたいと思います。 (iPhone 6+はタブレット寄りの考え。。)

html {
  // default
  font-size: 100%;

  // small
  @media only screen and (max-width: 40em) {
    font-size: 87.5%; /* 14px / 16px * 100 */
  }
  // large
  @media only screen and (min-width: 64.063em) {
    font-size: 112.5%; /* 18px / 16px * 100 */
  }
}

Vertical Rhythm、Modular Scaleの基準はすべて1remを基準値としていたので、ルートのfont-sizeを変更するだけでマージンやパディングも含めてすべてうまい具合にスケーリングされます。便利ですね。remを使用しているのでIE8以下は死にますがハナから切り捨ててるのでこれでいいのです。

参考

• Media Queries | Foundation Docs
• Skeleton/skeleton.css at master · dhg/Skeleton · GitHub
• bootstrap/_variables.scss at v4-dev · twbs/bootstrap · GitHub
• Bourbon - Documentation