コミュ障だから明日が僕らをよんだって返事もろくにしなかった

何かを創る人に憧れたからブログをはじめたんだと思うよ

気分転換にフォントとか変えてみる

きまぐれにフォントなどを変えてみたりするのです

はい、おはようございます。毎日あきもせずクソブログを更新し続けている僕です。まあ毎日毎日クソみたいな記事読んでますと飽きますよね。てなわけでして、気分転換にフォントとか変更して読んでみたりするのはいかがかな?


そんなわけでフォントを変換する謎ブックマークレットをつくりました。実行するとこんな感じです。

f:id:andron:20190423204319p:plainf:id:andron:20190423204309p:plain
大体のフォントをニコモジに変換するブックマークレット作りました。左が使用前、右が使用後となります。一部文字は非対応です。変換前コードもセットで置いておいたので見たいサイトで利用できない場合はなんとかソースをこねくり回してご利用ください。


ニコモ
Google Fonts + Japanese • Google Fonts + 日本語

以下ソース

javascript:var%20l=document.createElement("link");l.setAttribute("rel","stylesheet");l.setAttribute("href","https://fonts.googleapis.com/earlyaccess/nicomoji.css");var%20s=document.createElement("style");content=document.createTextNode("body{font-family:'Nico%20Moji';}");s.appendChild(content);document.head.appendChild(l);document.head.appendChild(s);

変換前

(()=>{
  var l = document.createElement("link");
  l.setAttribute("rel", "stylesheet");
  l.setAttribute("href", "https://fonts.googleapis.com/earlyaccess/nicomoji.css");
  var s = document.createElement("style");
  content = document.createTextNode("body{font-family: 'Nico Moji'; }");
  s.appendChild(content); 
  document.head.appendChild(l);
  document.head.appendChild(s);
})()

とりあえず変換前のコードも載せておきます。ブックマークレット的にベターな記述よくわかんないからコードレビュー用に乗せてます*1!importantとか、ニコモジに合う漢字とかの対応とか、ゴリ押し気味の記述とかはなんとか直したいけど動くからいいかってなってたりします。その辺りの修正は丸投げです……。

ちなみに、URL欄に入力できる文字数はEdgeで2048文字(最小)、Chromeで32776文字(最大)だそうです。幅ありすぎる。 この辺りもふまえて圧縮したベターなコードを書く場合どうしたらいいんでしょうねー……。


おまけ

はてなの方にもブックマークレット機能があったりするみたいです。@を使うことで通常ブックマークレットとは違った拡張性があるっぽいみたいです(未検証)。
Hatena::Let

使い方
Hatena::Let


おわり

*1:自分でリファクタリングしない言い訳