give IT a try

プログラミング、リモートワーク、田舎暮らし、音楽、etc.

私がメインの検索エンジンをGoogleからBingに変えた理由

はじめに

タイトルの通りですが、今年に入ってからメインの検索エンジンをGoogleからBingに変えました。

なぜ変えたのか?

それはこのブログを含む個人ブログがGoogleの検索結果に上がりにくくなってきたからです。

Googleで個人ブログが検索結果に上がりにくくなった例

たとえば、先日僕は自分の車のワイパー交換の方法をブログに書きました。

blog.jnito.com

Bingで「volvo xc60 ワイパー交換」というキーワードで検索すると、僕のブログがトップに表示されます。

一方、Googleだと同じキーワードで検索しても全然表示されません。
いくらスクロールしても最後まで僕のブログは表示されませんでした。


「xc60 ワイパー 自分で交換」なら表示される

しかし、インデックスに登録されてないわけではありません。
「xc60 ワイパー 自分で交換」みたいなキーワードにするとGoogleでも2番目に表示されます。
(Bingでもトップに表示されます。)


「xc60 ワイパーゴム」は表示されない

次にキーワードを「xc60 ワイパーゴム」に変えて見ましょう。
すると最初のキーワードと同じようにBingでは僕のブログがトップに表示されました。

一方、Googleではまったく表示されませんでした。


同じような事例をもう一つ

もう一つ同じような例として以下のブログ記事で検証してみます。

blog.jnito.com

このブログ記事はFUJIGEN(FGN)のフルアコ(フルアコースティックギター)にThomastik-Infeldというギター弦を張るためにギターを少し改造した、という内容です。
「FGN + フルアコ + Thomastik-Infeld」という組み合わせはめちゃくちゃニッチで、こんなブログを書いてるのはたぶん日本中で僕しかいません。
てか、そもそもネット上に同じような情報が見つからなかったのでブログを書きました。

「fgn フルアコ Thomastik」という検索キーワードでBingを検索してみます。

ご覧のとおり、僕のブログが最初に表示されました。
そんな情報を書いてる人は僕以外いないはずなので、当然といえば当然でしょう。

ではGoogleだとどうでしょうか?

Googleはなぜか記事本体ではなく、僕のXのポストを最初に表示しています。

2ページ目に行くと今度もやはり記事本体ではなく、はてなブログの記事一覧が表示されます。

結局最後まで僕のブログ記事本体のリンクは表示してくれませんでした。


記事タイトルで検索しても表示されない

ちなみにこの記事の場合、「FUJIGENのフルアコにThomastik-Infeldの弦を張る」という記事タイトルそのものをキーワードにしても表示されません。


siteを限定したら表示される(意味なし)

「FUJIGENのフルアコにThomastik-Infeldの弦を張る site:jnito.com」というようにsiteを限定してようやく表示されました。

もはやこれって、Googleから「お前のブログは絶対表示させないぞ」と言われているに等しいと思います。

個人ブログを隠そうとするGoogle?

このようにキーワードの指定方法によってはGoogleでは表示されるものの、Bingに比べると僕のブログは検索結果に引っかかりにくくなっています。
前述のワイパー交換やギター弦のブログ記事に限らず、最近自分の書いたブログ記事はどれも同じような傾向にあると感じています。

あくまで個人的な感覚ですが、昔のGoogleは今のBingみたいに「このキーワードだったら引っかかるっしょ」というキーワードを指定すれば自分のブログが(1位ではなくても)ほぼ百発百中で引っかかっていた記憶があります。

今は順位が落ちたとかではなく、いくらスクロールしても、いくらページをめくってもGoogleの検索結果に表示されません(インデックスにはちゃんと登録されているのに!)。
僕はこの結果に「お前のブログは絶対に表示させないぞ」というGoogleの強い意志を感じます。

個人ブログもたくさん検索結果に上げてくれるBing

Googleがどういうルールでランク付けしているのかはわからないので、もしかすると僕のブログが何らかの理由でペナルティーを食らってたりするのかもしれません(Google Search Consoleの内容は特に問題なさそうなんですけどね)。
ですが、僕だけに限らず、Googleで検索すると個人ブログが引っかかる割合が最近減ってきたような気がしています。

そういう不信感のようなものがGoogleに対して芽生えてきた頃にBingを試してみたところ、昔のGoogleっぽいというか、個人ブログも含めて分け隔てなく検索結果に表示してくれているような印象を受けました。
なので、それ以来、メインの検索エンジンはBingを使うようにしています。

僕は人の役に立ちたくてブログを書いてるのに!!

昔から僕は自分が情報発信することで他の人の役に立ちたい、という思いでブログやQiitaの記事を書いています。
上の例で挙げたワイパー交換の記事にしても、「これならすぐわかる」という交換方法がネットに見つからなかったので、今後自分と同じように自分でワイパー交換したいと思った人のためにブログを書きました。
これはギター弦のブログ記事も同様です。

しかし、Googleは(何か特定のルールに従ってキーワードを入れないと)僕のブログを表示してくれません。
これだと「XC60のワイパーを自分で交換したい」とか「FGNのフルアコにThomastikの弦を張りたい」と思った人が僕のブログにたどり着けなくなってしまいます。

個人が情報発信することでニッチな情報もネットなら見つかる、というのがインターネットの大好きなところだったのに、最近のGoogleは個人ブログを意図的に排除しているような、そんな雰囲気を感じて少し悲しいです 😢

まあ、時代が変わったんだよと言われたらそれまでなのですが、ネットの検索エンジンはGoogleだけがすべてではないので、僕はインターネットの良心を忘れていない(と勝手に信じている)Bingに乗り換えたのでした。

Bingのイマイチなところ

Googleに比べて個人ブログも検索結果に上げてくれやすいのがBingのいいところですが、イマイチなところもいくつかあります。

スクロールが強制的にトップに戻ることがある

意図せず検索結果画面のスクロールがトップに戻っていて、イラッとすることがたまにあります。
具体的にはこんな感じです。

検索結果を表示する
 ↓
下の方にスクロールする
 ↓
リンクを別タブで開く
 ↓
リンク先のページを閲覧したあと、Bingの検索結果にまた戻る
 ↓
なぜかスクロールがトップに戻っている
 ↓
また下までスクロールしないといけない! 💢

別タブで開く表示にしているのに同じタブで開くことがある

検索結果のリンクをクリックしたときは別タブで開く設定にしているんですが、たまに同じタブで開くことがあります。
設定の意味ないやん!なんで?って思います……。

1ページあたりの表示件数を増やせない

検索結果は1ページあたり最大10件程度です。
設定で変更できないので、知りたい情報が上位に出てこないときは何度もページ送りしないとといけません。

広告と検索結果の区別がしづらい

広告は小さな字で「広告」って書いてあるだけで視覚的な違いが少ないため、よーく確認しないと広告をクリックしそうになってしまいます。

とはいえ、検索エンジンは検索結果がすべてでしょ!!

こんな感じでBingはUX(ユーザー体験)としては、ちょっとイケてない部分も多いです。
ですが、検索エンジンで大事なのは検索結果です。

個人ブログの表示順位を下げるのではなく、(検索キーワードによっては)個人ブログをまったく表示しないというGoogleの方針がどうしても好きになれないので、僕はまだしばらくBingを使い続けるつもりです。

まとめ

というわけで、今回のエントリではメインの検索エンジンをGoogleからBingに変えた理由を書いてみました。
いつの頃からは「検索エンジンといえばGoogle」と決まっていましたし、僕自身もそう考えていましたが、この1年ぐらいで僕はGoogleの検索結果に対して強い違和感と不信感を感じるようになりました。

僕みたいに「個人による情報発信を読むのが好き」という人は、Bingに切り替えてみると昔の大好きだったインターネットが帰ってくるかもしれませんよ?

あわせて読みたい

僕がアウトプットするのは「インターネットに恩返し」したいからなんです!という話を書いた記事です。
こちらもあわせてどうぞ。
levtech.jp

「ITエンジニア、夫婦で包丁と包丁研ぎの沼にハマる」の巻

はじめに

昨年書いたこちらのブログの続きです。
blog.jnito.com

ここ1年ぐらい、包丁にハマってます。しかも夫婦で。
妻は包丁の切れ味にハマり、僕は包丁研ぎにハマってます(苦笑)。

料理をしない夫と、包丁を研がない妻

僕は包丁を研ぐ人、妻は包丁を使う人です。
でも僕は包丁を研ぐだけで料理はしません。
妻も包丁は研ぎません。

僕は料理はしないですが、包丁の切れ味を高めるのは好きです。
自分で包丁を研ぐなら自分でも使えよ、というツッコミが聞こえてきそうですが、作詞作曲はしても自分では歌わないバンドメンバーもいたりするので、包丁は研いでも自分では使わない人間がいてもいいんじゃないでしょうか😅

それはさておき、この1年で包丁と砥石と包丁研ぎグッズがめちゃくちゃ増えました。

これまでに購入した包丁

實光(じっこう)刃物・青二 三徳包丁 (165mm)

ちょっと高くてもいいからよく切れる包丁が欲しい!ということで初めて購入した高級包丁です。
青紙二号という鋼(はがね・非ステンレンス材)を使っている包丁です。
「おお、さすが。めちゃくちゃよく切れる!」という感動を味わいました。

www.jikko.jp

播鍛(ばんか)・ステンレスV金10号ダマスカス牛刀 鎚目 (210mm)

僕は兵庫県西脇市という町に住んでるのですが、車で20分ほどで行ける兵庫県小野市に播鍛という包丁メーカーがあります。
試しに足を運んでみたら、いい包丁が比較的手頃な値段で売っていたので購入したのがこちらの牛刀です。
一般的に「切れ味が優れているのはステンレスよりも鋼」と言われますが、実際に使ってみると「ステンレスでもめっちゃ切れるやん!」となりました。

banka.jp

播鍛・ステンレス粉末ハイス鋼 三徳 (180mm)

播鍛の包丁、いいね!ステンレスの包丁、いいね!ということで、もう一本買ってみたのがこちらの三徳包丁。
V金10号よりもさらに高級な粉末ハイスというステンレス材を使っています。
前評判通り、V金10号よりもさらに鋭い切れ味でした。

banka.jp

播鍛・ステンレスV金10号ダマスカス牛刀 鎚目 (180mm) と ステンレス粉末ハイス鋼 ペティ (135mm)

それまでは三徳包丁をメインで使っていたのですが、2つ前に購入した牛刀が便利で妻がすごく気に入ったので、サイズ違いの牛刀を買おうということになり、購入したのがこちらの180mm牛刀です。

また、ペティナイフは長年GLOBALのペティナイフを使ってたのですが、これもよく切れるやつに買い換えたい、ということで、2本同時に購入しました。


banka.jp
banka.jp

堺山凰 青2 牛刀 (210mm) と 堺北辰 白3 本焼ペティ (180mm)

鋼はサビやすいから、という理由でしばらくステンレスをメインで使っていたのですが、久々に鋼の包丁を使ってみると「やっぱり鋼は切れ味がいい!ステンレンスとはひと味違う!」となり、鋼の包丁を求めて日本三大刃物産地のひとつ、大阪府堺市にある「堺刃物ミュージアム CUT」を訪れました。

www.sakaidensan.jp

「堺刃物ミュージアム CUT」には数多くの魅力的な包丁がありました。
もともと鋼の牛刀を買う目的で行ったのですが、気付いたら鋼の牛刀に加えて本焼きのペティナイフまで買っていました(苦笑)。

ちなみに本焼き(本焼き包丁)というのは一枚の鋼を鍛造して作る最高級包丁のことです。
別に本焼き包丁が欲しかったわけではないのですが、180mmという万能包丁代わりに使える絶妙なサイズ感と見た目の美しさに惚れてつい購入してしまいました(かなり高かったけど・・・😅)。

ですが、使い勝手と切れ味のバランスが良いので、今のところこの包丁が普段使いで一番よく使う包丁になっています。

コラム:鋼の包丁に熱湯をかけてはいけない!?

鋼の包丁はよく切れる代わりに錆びやすいというデメリットがあります。
そのため、使い終わったらすぐに水分を拭き取る必要があります。

また、水分を拭き取るのではなく、強制的に乾燥させる目的で「包丁に熱湯をかけると良い」というアドバイスもネットやYouTube動画もよく見かけます。

「そうか、なるほど」と思い、上で紹介した本焼きのペティナイフに熱湯をかけてみたところ・・・包丁に白いシミができてしまいました!!😱

ビックリして購入した「堺刃物ミュージアム CUT」に電話したところ、「サビ防止のために塗ってあったコーティング用の液体ビニールが熱で溶けたんだと思います」とのこと。
持ち込めばその場で職人さんが直してくれるとのことで、すぐに包丁を持っていきました(兵庫の山奥から片道1時間半かけて💦)。

とりあえず液体ビニールとやらは別になくても構わないので、剥がしてもらうことにしました。
また、職人さんいわく、サビ防止の目的なら熱湯でなくシンクで使うお湯でも十分とのこと。
それからは熱湯は使わず、シンクで使うお湯で包丁を洗っています。

それにしても液体ビニールが塗ってあるなんて全然知らなかった!
ごく少量なのでそのまま使っても人体には影響がないそうですがこういうトラブルに遭遇するとビックリするかもしれないので、鋼の包丁を買うときは予め液体ビニール(またはなんらかのコーティング材)の有無を確認した方がいいかもしれません。

これまでに購入した砥石と包丁研ぎグッズ

自分で包丁を研ぎ始めたのは去年の夏頃からなのですが、包丁と同じく、あれよあれよという間に砥石と包丁研ぎグッズが増えていきました(苦笑)。


貝印のコンビ砥石セット #400 #1000

包丁研ぎについて右も左もわからない状態でとりあえず買ってみた砥石セットです。
包丁研ぎ入門者にはちょうどいいと思います。

が、すぐにこれでは満足できなくなり、このあといろいろと砥石や包丁研ぎグッズを買い足していくことになります。。。

ALTSTONE 「深 FUKAMI」の3000番 と 8000番

砥石の番手を上げた方が切れ味がよくなる、という情報を聞いて買い足した砥石です。
たしかに番手を上げた方が滑らかな切れ味になりますね。

シャプトン 刃の黒幕 #12000 クリーム

8000番の砥石で研ぐと切れ味は滑らかになるものの、YouTube動画で見るようなシャープな切れ味にはならないな〜、さらに番手を上げないといけないのかな〜?と思いながら買ってみたのがこの砥石です。

が、結構固くて砥石の上で包丁が滑るような感覚があり、研げてるのか研げてないのかよくわからない感じでした。
また、これを使えば誰でもYouTube動画のようにスパスパ切れるのか、というとそうでもなかったです。

半年以上使って最近ようやくこの砥石のクセや上手な使い方がわかってきたような気がします。
なので、これはちょっと上級者向けの砥石かもしれません。

ツボ万 砥石修正用アトマ 中目

使い終わった砥石の面を平らにするための修正砥石です。面直し(つらなおし)と呼んだりもします。
最初に購入した貝印の砥石セットにも修正砥石は付いていたのですが、持ち手の付いてるこっちの方がずっと使いやすくて便利です。
包丁研ぎにハマった人は買って損はないと思います。

ALTSTONE 「深 FUKAMI」の1000番

1000番は最初に買った貝印の砥石があるからいらないかな、と思ってたのですが、やっぱりもうちょっといい1000番の砥石が欲しいと思って買い足したのがこの砥石です。
貝印の砥石よりもよく研げますし、研ぎ心地もいいですね。

SHARPAL 205Hレザーストロップ

いわゆる革砥(かわと)っていうやつです。
僕は研磨剤を塗らず、バリ取り(包丁研ぎの仕上げとして刃先の小さな削りかすを除去する作業)だけに使っています。
バリ取りは丸めた新聞紙の上で包丁をすべらせればOK、と説明されることも多いですが、雑にシャカシャカやると切れ味が悪くなるような気がして、革砥の上で包丁の角度を一定にしながら丁寧にバリ取りをするようにしています。
また、いちいち新聞を丸めるのが地味に面倒だった、という理由もあります。

ピカール ネオ

鋼の包丁はすぐ錆びます。
こまめに洗って拭けば錆びないのでは?と思っていましたが、どれだけがんばってもすぐにうっすらと変色してきます。
というわけで、錆びるのは鋼の包丁の宿命です。絶対に避けられません。

包丁が錆びてきても金属磨きで磨けば十分きれいになります。
代表的な金属磨きとして、ピカールとピカール ネオがありますが、ピカールの方はめちゃくちゃ臭いらしいです(使ったことないけど)。
ピカール ネオは部屋の中で使ってもほとんど臭いが気になりません。

ただし、人体にはよくないらしいので使ったあとはしっかり包丁を洗う必要があります。
また、相手は鋭い刃物なので気を付けて磨かないとケガの原因になります。
僕はいらなくなったまな板の上に包丁の刃先をピタッとくっつけながら磨くようにしています。

包丁を研いだら紙の筒を切ってみる

YouTubeで包丁研ぎ師のRyotaさんが、包丁の切れ味を確かめるためによく紙の筒を切っています。

www.youtube.com

僕もRyotaさんの真似をして包丁を研ぎ終わったら毎回紙の筒を切っています(笑)。

上で使ったのはコピー用紙ですが、新聞紙を使うのもアリです。
ただ、新聞紙はコピー用紙よりもふにゃっとしているのでコピー用紙よりも難易度が高いかもしれません。

昔はなかなか切ることができませんでしたが、最近はだんだんとコツがわかってきました。

紙の筒を切るコツと注意点

そもそもの話として、よく切れる包丁とめちゃくちゃよく切れる包丁があります。

上で紹介した包丁は基本的にどれもよく切れるのですが、その中でも「播鍛・ステンレス粉末ハイス鋼 三徳」と「堺山凰 青2 牛刀」はめちゃくちゃよく切れます。
この包丁を使うとあまり神経質にならなくても包丁を研いだあとは結構簡単に紙の筒が切れます。一種のチートですね。

反対に「播鍛・ステンレスV金10号ダマスカス牛刀」とかは、かなり包丁を研ぐときの角度等に気を付けないとなかなか切れなかったりします。
とはいえ、がんばればなんとかなるんですが。

これは鋼材の違いや刃先の薄さの違いが切れ味に影響しているのかなーと思ったりしています。

あとは、単純に切り方の問題も大きかったりします。
切るときの角度はかなり包丁を縦気味にして(60度ぐらい?)、包丁のアゴの部分から先端に向かってゆっくり引きながら包丁を筒に押し当てると、包丁の刃先と紙が擦れ合うざらっとした感触と共に刃先が紙に食い込みます。

一回成功すると「こういう感じか!」というのがわかるのですが、一度も成功したことがないと「全然わからん」となるかもしれません。
逆上がりを覚えるときと同じような感じ、と言えば伝わるでしょうか。

最後に、紙の筒を切るのは研いだ人の自己満足です(苦笑)。
別に紙の筒が切れなくても、研ぎ終わった包丁を使う妻は「普通によく切れる」と言ってくれます。
なので、紙の筒が切れない包丁=全然研げていない包丁というわけではないので、あまり躍起にならないようにしてください。

新品の包丁が一番切れる、とは限らない

これまでに買った包丁のほとんどは購入直後の新品の状態でとてもよく切れました。
しかし、例外がひとつだけあります。
それは「堺北辰 白3 本焼ペティ」です。

これまでに買ってきた包丁の中で一番高い包丁だったので、当然一番よく切れるだろうとワクワクしていたのですが、家で試し切りしてみると「あれ?」という切れ味でちょっとガッカリした記憶があります。

ハッキリした理由はわからないのですが、これは「購入後に本刃付けしてもらう前提で作ってあるから」ということなのかもしれません。
聞くところによると、プロの料理人は研ぎ師に依頼して新品の包丁を自分好みの切れ味になるよう研いでもらうそうです。
もしかすると「堺北辰 白3 本焼ペティ」もそういう意図で、新品の状態では調整の余地を大きく取ってあったのかもしれません。

ちなみに「堺北辰 白3 本焼ペティ」もしっかり研いであげるとよく切れるようになりました(きれいな鏡面に傷を付けないように神経を使いましたが・・・)。

で、鋼とステンレス、どっちがいいの?

包丁について調べていくと、「包丁の鋼材は大きく分けて2つあります。鋼(はがね)とステンレスです」という説明を目にすると思います。

hocho.ichimonji.co.jp

「えー、そんなの気にしたことがない」という人はおそらくステンレスの包丁=錆びない包丁*1を使っているはずです。

一般的に「鋼は切れ味は良いが錆びるのが難点」「ステンレスは錆びないが切れ味は鋼に劣る」と言われます。
じゃあ、どっちがいいのか?

鋼とステンレスの両方を使った妻いわく、

「めちゃくちゃこだわる人じゃなければステンレス。錆びないのはすごく大きなメリット。いい包丁なら切れ味も鋼とそこまで変わらない」

とのことです。

ただ、食材を切ったときの感触は微妙に違うらしく、ステンレスは「スコン!」と鋭く切れるのに対し、鋼は食材に油を塗っているかのような滑らかで優しい切り心地になるみたいです。
切ってて気持ちいいのは鋼の方なので、妻は「堺北辰 白3 本焼ペティ」を一番よく使っています。

研ぎやすさはどうなの?

鋼とステンレンスには研ぎやすさにも違いがあり、一般的に「鋼の方が研ぎやすく、ステンレンスの方が研ぎにくい」と言われます。

が、僕自身は鋼材による大きな違いをそこまで感じないですね。

一般論でいうと、粉末ハイスを使っている播鍛の三徳とペティが一番研ぎにくいはずですが、意外とそうでもないです。
むしろバリがすぐに出るので研ぎやすい方かも。

一方、鋼を使っている「堺北辰 白3 本焼ペティ」は硬くて結構研ぎづらいです。
もっとも、これは「硬くて研ぎにくい」という本焼き包丁の特徴そのものかもしれませんが。

ステンレス系のV金10号を使っている播鍛の牛刀は研ぎにくいというよりも、よく切れる刃を付けにくい(=かなり神経を使う)という印象です。

なんとなく、研ぎやすさ・研ぎにくさは鋼材の違いよりも刃先が薄さの方が大きな要因になってそうな気がします。
最初から刃先の厚みが薄く仕上げてある包丁の方がすぐにバリが出て、なおかつ鋭い切れ味が出るので研ぐのが楽です。

おまけ:これまでに購入したまな板

包丁の切れ味が落ちる大きな要因がまな板です。
固いまな板を使うと刃先にダメージを与えてしまい、すぐに切れ味が落ちるそうです。
この話を聞いてから我が家もプラスチック製の固いまな板から、木製の柔らかいまな板に切り替えました。

が、木製のまな板もいろいろあって、包丁と同じくこの1年でいろんなまな板を買ったので、実際に購入したまな板と使ってみた感想をまとめておきます。

IKEA SKOGSTA

イケアのまな板です。大きさ、重さ、柔らかさ、ともにいい感じです。

無印良品のまな板

「まな板はひのきが一番包丁に優しい」と聞いて購入したまな板です。
たしかに柔らかくて包丁には優しいのですが、ヒノキ風呂のような匂いが部屋中に漂うのと、いかにも「和風」な木目がインテリアにマッチせず、すぐに使うのを辞めました。

KEYUCA オリーブのまな板

見た目がオシャレ、という理由で買いましたが、思った以上に固いまな板だったため、すぐに使うのを辞めました。
item.rakuten.co.jp

KEYUCA マホガニーのまな板

一方、オリーブのまな板と一緒に買ったマホガニーのまな板は大きさ、重さ、柔らかさ、ともにgoodで今も使っています。

今はIKEAのまな板とKEYUCAのマホガニーのまな板をメインで使っています。

まとめ:包丁も包丁研ぎも奥が深い!

というわけでこのエントリでは最近夫婦で包丁と包丁研ぎにハマっているという話を書いてみました。

僕は料理をしないので包丁の切れ味については妻の感想が基準になるのですが、包丁がよく切れると料理がすごく楽しくなるみたいです。
というか、包丁をたくさん使いたくなるのでキャベツや人参を細かく刻んだりしたくなるんだとか。
また、生肉も思い通りに切れるので、最初からカットしてある肉ではなく、少し安い肉のブロックを買って自分でカットすることも多いみたいです。

プログラマであれば、いいキーボードを買うと打ち心地がよくてたくさんタイピングしたくなるような気持ち、と言えば伝わるでしょうか(伝わるか?)。

包丁研ぎは最高の切れ味を求めてもくもくと作業に熱中できるところが面白いですね。
精神集中というか、瞑想をしてるような、そんな感覚になることがあります。
また、砥石もいろんな砥石がありますし、YouTube動画を見ていると研ぎ方にも無限のバリエーションがあってとても奥が深いです。

包丁も同じく、鋼材、形状、大きさ、作り方、デザイン等々で無限の組み合わせがあります。
いい包丁を使い始めると、だんだんと自分の好みがわかってきて、次はあんな包丁を使ってみたい、こんな包丁があったら嬉しい、というようにどんどん欲しい包丁が増えていきます。

いやあ、どちらも沼ですね(苦笑)。
一度も包丁を研いだことがない人や、特にこだわりもなく安い包丁を使い続けているという人は、ぜひこちらの世界へ。
包丁がよく切れると楽しい!という感動を一度味わってみてほしいです😄


おまけ

研ぎ立ての包丁でキッチンペーパーの芯も切ってみました。

これもRyotaさんの真似ですw

www.youtube.com

続・おまけ

あまり切れ味よくないなーと思ってたGLOBALの包丁でも紙の筒が切れました!!

*1:厳密には錆びにくい包丁です。条件によってはステンレンスも錆びるので。

Rails + Sassでimage-urlを使うのは古い。画像の指定はurlだけでOK

TL; DR(最初に結論)

2024年にrails newするなら、dartsass-railsを使おう。

そして、sass/scssファイルに画像のURLを指定する場合はimage-urlではなくurlを使おう。

/* app/assets/stylesheets/foo.scss */
.my-image {
  /* image-urlではなくurlを使う */
  background-image: url('bg.png');
}

はじめに

Qiitaに書こうと思ったけど、記事としてきれいにまとまらないのでこっちに雑にまとめます。

たとえばRailsアプリで背景画像を出したいとき、かつSassを使っているとき、画像のURLはimage-urlで指定していました。

/* app/assets/stylesheets/foo.scss */
.my-image {
  background-image: image-url('bg.png');
}

ちなみにbg.pngはapp/assets/images/bg.pngに配置されている前提です。

上のscssファイルはプリコンパイルされるとダイジェスト付きのURLに変わります。(image-urlurlに変わる)

.my-image {
  background-image: url(/assets/bg-31822...4a19b.png);
}

が、image-urlはsass-railsやsassc-railsが提供している関数です。 そして、sass-railsやsassc-railsはすでに開発が止まっていて、現在開発が継続しているのはdartsass-railsです。

ただし、dartsass-railsではimage-urlは使えません。 冒頭のscssファイルをプリコンパイルするとurlの中身はダイジェスト付きのパスになるものの、image-urlimage-urlのままになり、結果として無効なCSSになります。

.my-image {
  /* dartsass-railsだとimage-urlがそのまま残る */
  background-image: image-url(/assets/bg-31822...4a19b.png);
}

じゃあどうしたらいいのかというと、scssにurlを指定します。

/* app/assets/stylesheets/foo.scss */
.my-image {
  background-image: url('bg.png');
}

こうすると正しいCSSが出力されます。

.my-image {
  background-image: url(/assets/bg-31822...4a19b.png);
}

なお、この記事ではimage-urlを対象にしていますが、asset-url, font-url, video-url, audio-urlも考え方は同じです。

コラム:Railsで使えるSassのgemは3種類

歴史的経緯により、Railsで使えるSassのgemは、sass-rails、sassc-rails、dartsass-railsの3種類です。

さらにややこしいことに、sass-rails 6はsassc-railsのラッパーです。

This gem is now only just a wrapper around sassc-rails.

https://github.com/rails/sass-rails/releases/tag/v6.0.0

よって、これら3つのgemを古いものから順に並べると、以下のようになります。

  • sass-rails 5以下(Rubyで実装されたオリジナルのSass。開発終了)
  • sass-rails 6 = sassc-rails(Cで実装されたSass。開発終了)
  • dartsass-rails(Dartで実装されたSass)

このほかにも、gemを使わずにnpmとして提供されているSassを使う、というアプローチもあります。 いろいろあってややこしいですね。

僕の疑問

上記のような挙動を知って、僕は以下のような疑問を持ちました。

  • image-urlってそもそもどこで定義されてるの??
  • url(...)って標準のCSSなのに、なんでdartsass-railsだとプリコンパイルされたらダイジェスト付きのパスに変わるの??

それぞれ調査した結果を以下にまとめます。

セルフアンサー:image-urlはどこで定義されてるの??

image-urlはsprockets gemのimage_urlメソッドにマッピングされます。

# https://github.com/rails/sprockets/blob/v3.7.3/lib/sprockets/sass_processor.rb
def image_url(path)
  asset_url(path, type: :image)
end

asset_urlメソッドはsassc-railsに定義されていて、これがさらにasset_pathメソッドを呼び出します。 こうした一連の流れにより、image-urlの引数として指定したパスはasset_pathメソッドでダイジェスト付きのパスに変換されます。

# https://github.com/sass/sassc-rails/blob/v2.1.2/lib/sassc/rails/template.rb
def asset_path(path, options = {})
  path = path.value

  path, _, query, fragment = URI.split(path)[5..8]
  path     = sprockets_context.asset_path(path, options)
  query    = "?#{query}" if query
  fragment = "##{fragment}" if fragment

  ::SassC::Script::Value::String.new("#{path}#{query}#{fragment}", :string)
end

def asset_url(path, options = {})
  ::SassC::Script::Value::String.new("url(#{asset_path(path, options).value})")
end

しかし、dartsass-railsではasset_urlメソッドやasset_pathメソッドに相当する処理がありません。

セルフアンサー:なんでurlがダイジェスト付きのパスに変わるの??

これはsprockets-rails 3.3でurlに指定したパスをダイジェスト付きのパスに変換する機能が導入されたためです。

github.com

つまり、これはdartsass-railsではなく、sprockets-railsの機能です。

この機能は正規表現で実現されています。

# https://github.com/rails/sprockets-rails/blob/v3.5.1/lib/sprockets/rails/asset_url_processor.rb
module Sprockets
  module Rails
    # Resolve assets referenced in CSS `url()` calls and replace them with the digested paths
    class AssetUrlProcessor
      REGEX = /url\(\s*["']?(?!(?:\#|data|http))(?<relativeToCurrentDir>\.\/)?(?<path>[^"'\s)]+)\s*["']?\)/
      def self.call(input)
        context = input[:environment].context_class.new(input)
        data    = input[:data].gsub(REGEX) do |_match|
          path = Regexp.last_match[:path]
          "url(#{context.asset_path(path)})"
        end

        context.metadata.merge(data: data)
      end
    end
  end
end

実装上はurl(...)みたいな文字列を置換するだけなので、image-url(...)でもhoge-url(...)でも、正規表現にマッチした文字列なら何でも()内のパスがダイジェスト付きのパスに変換されます。

/* app/assets/stylesheets/foo.scss */
.my-image {
  /* hoge-urlはCSSとして無効 */
  background-image: hoge-url('bg.png');
}
.my-image {
  /* だが、url(...)の形式ならimage-urlでもhoge-urlでも何でも変換される */
  background-image: hoge-url(/assets/bg-31822...4a19b.png);
}

また、sprockets-railsが提供している機能なので、SassではないプレーンなCSSでもアセットプリコンパイルの対象になっていればurlがダイジェスト付きのパスに変換されます。

/* app/assets/stylesheets/foo.css */
.my-image {
  /* scssやsassではなく、プレーンなCSSとしてurlを指定する */
  background-image: url(bg.png);
}
.my-image {
  /* アセットプリコンパイルの対象になっていればダイジェスト付きのパスに変換される */
  background-image: url(/assets/bg-31822...4a19b.png);
}

ちなみにsprocets-rails 3.2以前ではurlはプリコンパイルしても何も変わらず、そのまま出力されます*1

/* sprockets-sass 3.2ではプリコンパイルしても何も変化なし */
.my-image {
  background-image: url(bg.png);
}

まとめ

わかったことをまとめるとこんな感じです。

  • image-urlはsass-railsやsassc-railsが提供している関数
  • image-urlはdartsass-railsには存在しない
  • バージョン3.3以降のsprockets-railsはurlをダイジェスト付きのパスに変換してくれる
  • dartsass-railsはurlを使うしかない
  • sass-railsやsassc-railsはsprockets-rails 3.3以上がインストールされていれば、image-urlurlも両方使える

表にするとこんな感じでしょうか。

組み合わせ
sass-rails, sassc-rails Y Y
dartsass-rails Y
sprockets-rails 3.2以下 Y
sprockets-rails 3.3以上 Y Y
image-url ❌ 2
url ❌ 1
  • ❌ 1 = ()内のパスは変化しない(ダイジェスト付きにならない)
  • ❌ 2 = パスにダイジェストは付くものの、image-urlimage-urlのまま残るため、無効なCSSになる

2024年現在でrails newする場合、Sassを使いたいならdartsass-railsを使うことになるはずです(なぜならsass-railsやsassc-railsは開発が終了しているから)。

また、sprockets-rails 3.3がリリースされたのは2021年11月なので、3.2以前のsprockets-railsがインストールされることはまずないでしょう。

ということはSassで画像URLを指定する場合はimage-urlではなくurlを使う、というのが望ましい方法になりますね。

/* app/assets/stylesheets/foo.scss */
.my-image {
  background-image: url('bg.png');
}

参考文献

github.com

おまけ

Stack Overflowに同じような質問があり、まだ誰も回答していなかったので、僕が回答してみました(2013年の質問ですが・・・)。

stackoverflow.com

あわせて読みたい

アセットプリコンパイル周りは初心者泣かせのややこしい挙動が満載です。画像がうまく表示できないときはこちらの記事も参考にしてみてください。

qiita.com

*1:これが原因でローカルでは画像が表示されるが、Herokuにデプロイすると画像が表示されない、というトラブルがよく起きていた