動かざることバグの如し

近づきたいよ 君の理想に

Rails+RspecでUser-AgentとかHeaderを書き換えてテストする方法

環境

背景

Rspecのテストで、今まではController specsだったが、今ではRequest specsが推奨となっている。

いわゆる type: :request というやつ

で、Request specsでHeaderをカスタマイズした上でテストをしたい。

方法

ググるとみんないろんなやり方をしてたが、Rspec3以降は以下が一番標準的なやり方っぽい。

例えば以下はUser-Agentをmyuseragentに書き換えてアクセスする例

context "ユーザーエージェントを〜でアクセスしたとき" do
  before do
    headers = {
      "user-agent" => "myuseragent",
    }
    get root_path, params: {}, headers: headers
  end
end

ちなみにGETリクエストのparamsは普通のGETパラメータになる

Nuxt.jsにCSSフレームワークを導入するまでの手順

環境

  • Nuxt.js 2.8

背景

Nuxt.jsはVuejsを元に作られているので、CSSフレームワークを追加したいときは、「追加したいCSSフレームワーク vuejs」とかで検索すればインストール方法がすぐ出る。現に、bootstrap-vueとかvuetifyはそれ専用のライブラリが出ているので、npm install するだけで簡単に導入できる。

一方で、Vuejs向けに最適化されていないCSSフレームワークは導入がよくわからなかったのでメモ。巷ではCSSファイルを落としてきてとか直リンクをそのままstyleタグで読み込んでいたりするが、ちょっとイケてなさすぎるのでは。。

条件としては

  • npmパッケージでリリースされている
  • scssで書かれている

が今回のCSSフレームワークの必須条件とする。

前準備

デフォルトではNuxt.jsはsassを読めないのでローダーを入れる

npm install -S node-sass sass-loader

インストール手順

例えば珍しい国産CSSフレームワークMUSUBii」をNuxt.jsに導入する手順を示す。

nuxtjsのプロジェクト上でCSSフレームワークを普通にインストール

npm install -S musubii

assets/common.scssを新規作成して以下 ここではCSSフレームワークで読み込みたいscssファイルを書く。node_modulesは省略可能

@import "musubii/src/scss/musubii.scss";

あとは nuxt.config.js のCSSに以下を追記するだけ。~がないとエラーになるので注意

css: [
  "~assets/common.scss"
],

これでnpm run devを再起動すればおk

ちなみにcommon.scssのファイル名は適当なので他でももちろん可

参考リンク

はてなブログをHTTPS化した話

ついにこのブログもSSL化する時が来た

動かざることバグの如し

うん、ちゃんと表示されてる(

HTTPS化したあとにやったこと

Google Search Console再連携

クソ仕様としか言えないのだが、Search Consoleではhttpとhttpsは分けて計測される

したがって連携を追加する必要がある

GAのデフォルトURLを変更

アナリティクスの管理>プロパティ設定を開くと、『デフォルトのURL』という項目がある。

これをhttpsで選択する。

リダイレクトの挙動

curlで確認してみた 301でリダイレクトしているのがわかる

$curl -sD - -o /dev/null http://thr3a.hatenablog.com/entry/20190407/1554621409
HTTP/1.1 301 Moved Permanently
Server: nginx
Date: Sat, 10 Aug 2019 22:24:45 GMT
Content-Type: text/html; charset=utf-8
Transfer-Encoding: chunked
Connection: keep-alive
Cache-Control: private
Location: https://thr3a.hatenablog.com/entry/20190407/1554621409
Vary: User-Agent, X-Forwarded-Host, X-Device-Type
X-Content-Type-Options: nosniff
X-Frame-Options: DENY
X-Revision: aea41f932ffaacb829d7e6593b3ad384
X-XSS-Protection: 1
X-Runtime: 0.040431
X-Varnish: 696778893
Age: 0
Via: 1.1 varnish-v4
X-Cache: MISS

さーて、この影響でどのくらいPV下がるんでしょうか(焦り

iTerm2のステータスバーを真下に表示させる方法

背景

Macユーザー御用達のターミナルアプリ、iTerm2だが、最近になってなんとステータスバーがついた

Status Bar - Documentation - iTerm2 - macOS Terminal Replacement

これでCPU使用率とか、ネットワークの速度、カレントブランチ等の表示、あと時計も表示できるすごい =)

頑張ればオレオレコンポーネントも作れるらしい

が、残念ながらタブの真下に表示されてしまう。。。普通ステータスバーって言ったら一番真下じゃないんか、、、

結論

設定可能

  • iTerm2の設定画面を開く
  • 「Appearance」タブをクリック
  • 「General」タブを表示
  • 「Tab bar location:」の項目があるので「Bottom」を選択

f:id:thr3a:20190811061103p:plain

これで真下に表示されるようになった iTerm2くっそ便利だけともうちょっと設定表示洗練してほしい、、

Year!!!

f:id:thr3a:20190811061156p:plain