ゆるめ

ゆるめなのは公開範囲です。

カスタム絵文字備忘録

!hatena

追記: 絵文字コピー用のサーバを用意しています。https://stray.shee.pink/@emojihaco/110936801046015968 をご自身のサーバで表示させた後に管理画面から絵文字をコピーしてください。この記事を書いた後に追加された絵文字もたくさんあります。

Mastodon およびその周辺で暮らしているうちに、自作のカスタム絵文字が蓄積されてきました。当エントリは各絵文字の成り立ちや思い出を、主に未来の私のために残しておく目的で作成されました。

続きを読む

またよろしくね Firefox Developer Edition

!hatena

以前の記事で Firefox Developer Edition から別のビルドへ乗り換えた旨を書きましたが、そのちょっと後に Firefox Developer Edition が復活していたみたいです。今さっき気付きました。欲を言えばもっと早く気付きたかったところですが、今気付けて良かったです。
rockridge.hatenablog.com
野良アドオンもまた使えるということで、早速戻りました。

でも、何故かそのままだとアップデートに失敗し、インストーラを落として上書きインストールしても同じ状態だったので、もっと直接落とせるところから落としてきて、インストールしました。

前と同じく、特に移行作業はしていません。Sync で前の子がなかなか消えなかったりしたら消したりする作業が必要になるかもしれませんが、今のとこ何もしていません。

452バイトテトリス

!hatena hatenalet

先日 7行テトリスのことを話題にしている人を見かけて、懐かしくなって巡ってきました。

7行テトリス、482バイトテトリス、6行テトリス、464B tetris、と辿ったところで行き止まりになって、新しいものを見つけられなかったので、自分で書くことにしました。

デモページで動作の確認ができます。コードは以下の通りです。

ES201X を取り入れつついじったら、452バイト (Shift_JIS、LF で保存時) になりました。

<pre id=D><script>onkeydown=e=>K=e.which-38,Z=X=B=[],(Y=f=>{C=[A=12]
K&B.some((p,n)=>Z[h+(K+6?p+K:C[n]=p*A-(p/9|0)*145)])?0:K+6?h+=K:t?B=C:0;B.map(
q=>X[f|=Z[A+h+q],h+q]=1);if(f||1-B)for(Z=X,X=[l=228],B=[~[10,23,-3,-14,A][t=++t%
7],0,1,t-6?-A:2];l--;h=5)for(l%A?l-=l%A*!Z[l]:(P+=f++,K=l+=A);--K>A;)Z[K]=Z[K-A]
for(K=i=0,h+=A,S=P;i<240;)S+=X[i]|(X[i]=Z[i]|=++i%A<2|i>228)?~-i%A?'■':`
■`:'＿';D.innerHTML=S;Z[5]||setTimeout(Y,i-P)})(h=K=t=P=0)</script>

80字越したら改行を入れるルールがあるみたいなので、それに準じました。

<pre id=D><script>onkeydown=e=>K=e.which-38,Z=X=B=[],(Y=f=>{C=[A=12]
K&B.some((p,n)=>Z[h+(K+6?p+K:C[n]=p*A-(p/9|0)*145)])?0:K+6?h+=K:t?B=C:0
B.map(q=>X[f|=Z[A+h+q],h+q]=1)
if(f||1-B)for(Z=X,X=[l=228],B=[~[10,23,-3,-14,A][t=++t%7],
0,1,t-6?-A:2];l--;h=5)for(l%A?l-=l%A*!Z[l]:(P+=f++,K=l+=A);--K>A;)Z[K]=Z[K-A]
for(K=i=0,h+=A,S=P;i<240;)S+=X[i]|(X[i]=Z[i]|=++i%A<2|i>228)?~-i%A?'■':`
■`:'＿';D.innerHTML=S;Z[5]||setTimeout(Y,i-P)})(h=K=t=P=0)</script>

…と思っていたのですが、元々は 79文字 * 7行という制約だったみたいです。見逃していた記事があって、そこから判明しました。そちらに準じた場合は 451バイトになります。

改行も活用するため、セミコロンが外せそうな部分は積極的に外しています。

以下はテキストエディタの機能で JavaScript の部分のみそれっぽく整形したものです。

手を入れた部分のみコメントしています。他の方の書いた部分は他の方の解説をご覧になってください。

// "event" って変数が firefox になかったから JavaScript 内にしまった
onkeydown = e => K = e.which - 38,
// B を最初から配列扱いするため初期化時の判定方法を変更、副作用で [] 内での宣言が NG に
// "" とか 0 とかになる変数なら宣言できるけど今のとこ空配列
Z = X = B = [],
// いつも思うけどアロー関数ほんとぐっと縮まるね
// この f は初回以外は undefined だけど宣言済み変数として便利に使える
(Y = f => {
	// 上で追い出された A の宣言ここで
	// Array.prototype にくっついてるメソッド使うから Y で代用はできなかった
	C = [A = 12];
	// some() で接触フラグ作り、元のアルゴリズムには手を入れてない
	// 接触してた時はすぐ引き上げるから C が未完成になるけど問題ない
	K & B.some(
		// (p, n) の n 外に出して ++ とかしてみたけど、宣言と初期化で手間取って長くなった
		// n が外に出せれば (,) の三文字が削れてつよい
		(p, n) => Z[h + (K + 6 ? p + K : C[n] = p * A - (p / 9 | 0) * 145)]
	) ? 0 : K + 6 ? h += K : t ? B = C : 0;
	// f = undefined でもいいように |= にした
	// q => (式,式) だと () いるから [] 内にお邪魔させた
	B.map(q => X[f |= Z[A + h + q], h + q] = 1);

	// B を最初から配列にしたから判定長くなった
	// 1 - [] ⇒ 1 - "" ⇒ 1 - 0 で 1、1 - [1,1] ⇒ 1 - "1,1" ⇒ 1 - NaN で NaN
	if (f || 1 - B)
		for (Z = X, X = [l = 228], B = [~[10, 23, -3, -14, A][t = ++t % 7], 0, 1, t - 6 ? -A : 2]; l--; h = 5)
			// 設置判定時必ず 1 になってるから k の代わりに f 使うことにした
			// あと c 宣言する暇なかったから K 使い回した
			for (l % A ? l -= l % A * !Z[l] : (P += f++, K = l += A); --K > A; )
				Z[K] = Z[K - A];

	// K と i ここでリセット
	for (K = i = 0, h += A, S = P; i < 240; )
		// <pre> だから \n に、改行コード一文字にしてテンプレートリテラル使うとさらに一文字減
		S += X[i] | (X[i] = Z[i] |= ++i % A < 2 | i > 228) ? ~-i % A ? '■' : `
■` : '＿';

	// innerText は何故か firefox でキー反応が悪くなるから無理だった
	// <body onload=""> も何故かキー反応が鈍ったから採用できなかった、採用できたら 3バイト縮む
	D.innerHTML = S;
	Z[5] || setTimeout(Y, i - P)

})(h = K = t = P = 0)

新しめの書き方を利用したアルゴリズムなんかでまだまだ縮まる余地が存分にあるので、つよい方々の登場が待たれます。


あと、せっかくなのでブックマークレットにしておきました。なんだかんだでいっつもせっかくしてる感じがします。
T⃞T⃞R⃞S⃞ - Hatena::Let


あとゴルフつながりで、先日 Hatena::Let で Fork して遊んだものも載せておきます。スターがたくさんなのは、たくさん更新してその度に更新箇所にスターをいただいたからで、ブツそのものは通常通りです。
Zalgolf ('unuse strict') - Hatena::Let

さよなら Firefox Developer Edition

!hatena

愛用していた Firefox Developer Edition が近々終了することになりました。
rockridge.hatenablog.com
10年くらい前から、動作テスト用に素の Firefox を残しておいて、生活用に別アプリとして起動するエディションを使っていました。lolifox や Pale Moon などを経て Firefox Developer Edition に辿り着き、これで安泰かなと思った矢先のことでした。*1

プロファイルがいつの間にか共用されるようになり、同時起動もできなくなっていたので、当初のメリットがなくなってしまったのですが、野良アドオンがインストール可能だったり、開発ツールが充実していたりで、手放せない感じになっていました。

しかし今回の終了告知で改めて調べてみたら、素の Firefox にも開発ツールがしっかり搭載されていました。 Firefox Developer Edition 登場以前からのっかってました。Firebug が幅を利かせているのを見て、標準搭載はしていないものだとばかり思っていました。そして Firebug の虫感が苦手なので、Firebug は可能な限り使いたくないなあと思っていました。

開発ツールあるなら素のやつでもいいかな、動作確認も適当にプロファイル変えたショートカットでも作っとけばいいかなと思ったのですが、まだ野良アドオンの問題が残っています。

野良アドオンが使えないと、自分でアドオンを作ったり更新したりする際に面倒そうなので、ノーブランド版のものを入れることにしました。今個人的にバージョン 53 以降にしたかったので、Beta 版の方をインストールしました。

Release 版だと検索して出てくるアドオンを入れたら日本語化できるのですが、Beta 版はなんか奥まったところにあって、探すのに少し時間がかかりました。ちなみにリンク先は windows の 64bit 版向けのものです。

言語パックを入れた後に about:config の general.useragent.locale に ja-JP と入れて再起動したら日本語の UI になりましたが、後から言語コード一覧ページを確認したら、ja だけで良かったみたいです。

参考にしたページでは、intl.locale.matchOS を false にする必要があるとも書かれていました。私のところでは既にそうなっていたのでいじっていません。

先ほど書いた通り、プロファイルががっつり共用されているので、何の移行作業もなしに移行完了しました。変わったのはタスクバーのアイコンと開発ツールの色くらいです。

f:id:pacochi:20170404170506p:plain
これが昨日たまたま撮っていたコンソール。
f:id:pacochi:20170404170512p:plain
こっちが今撮りたてほやほやのコンソールです。まぶしかったので、これを撮った直後に設定で Dark に戻しました。

なんだかエラーメッセージが英語になりましたが、エラーメッセージは英語のままの方が検索によく引っかかるので、特に直そうとは思っていません。

他にも細かい設定とかがいじられてる気もするので、しばらくセンシティブに様子見したいところです。

追記:復活したので戻りました。

*1:体感的には矢先なんですが、実際は二年半近く経ってたみたいです。

コードダンジョン潜伏記録

!hatena hatenalet

先日ゴルフの衝動にかられたので以前書いたものに追加するついでに短くしました。

しかしこのご時世、正直ブックマークレットの文字数上限なんてあってないようなものなので、可読性を下げるデメリットに打ち勝つほどのメリットがショートコーディングにあるかというと、書いてる時に楽しいとかそんなもんなんですよね。

という訳でブックマークレットのバイト削りはほどほどにして、ゴルフはゴルフ場でということで、ここしばらくゴルフ場に行ってました。

JavaScript のゴルフ場に行ったことがなかったので検索したら、コードダンジョンというブラウザゲームが出てきたので、そこで遊んでいました。レベルが上がって禁止文字の縛りが入ると、検索しても解法が直接出てくることがまずないので、思う存分脳みそしぼってあれこれ考えたり試せたりできるのが熱かったです。

ちょっとしたストーリーがあって、正しいコードの入力に成功するとストーリーが進むようになっています。コマンド入力でストーリーを進める往年のアドベンチャーゲームやインタラクティブフィクションみたいで、レトロ心をくすぐられます。

あんまり面白かったものですから、プレイ料金代わりにこのゲームの攻略本みたいな本を買いました。全問解いた後に買って読んだので、メモリアルブックみたいに感じました。

元は別サイトで出されたクイズらしく、そちらも見に行ってみましたが、現在そういうテーマの問題は出されていないようです。

以下は現時点での全問 (19問) を解いた記録です。ネタバレ以外の何物でもないので、これからプレイする予定のある方は続きを読まずにまっすぐダンジョンへ向かってください。

続きを読む

16年前のブックマークレット

!hatena hatenalet

ふと、自分が一番最初に書いたブックマークレットって何だろう、と思い、過去のファイル群を漁ってみました。

多分この辺が一番最初に書いたものです。

<FONT COLOR="blue"> という部分に時代を感じますね。

当時は「ブックマークレット」という呼称を知らなくて、「JavaScript お気に入り」とか「jsfav」とか呼んでたみたいです。

同じフォルダに他のサイトからもらってきたブックマークレットもありました。

miniToys
b-Max ブックマーク・アクセサリー

昔のサイトでも埋め込みリンク可能だったりするんですね。META 要素の description を読み込んでいるみたいです。

スターの見た目変更記録

star blog

ブログのスターを表示させる際にちょっといじったのは前に書いたのですが、具体的な内容を書きそびれていたので、忘れないうちに書いておきます。

記事の下から記事タイトルの横にスターを移した

HatenaStar.js と、Hatena.Star.SiteConfig をいじっている hatenablog.js が、ページのずっと下の方で読み込まれるので、こちらは DOMContentLoaded のタイミングで以下のように書き換えています。

if (Hatena.Star) Hatena.Star.SiteConfig.entryNodes['article.entry'].container = 'h1';

追記: 引用ツールを表示させないとはてなスターの引用が失敗するようなので表示させたら、ツールの方からスターをつけられない不具合が発覚したので、修正しました。

DOMContentLoaded より早い実行タイミングがあればそっちにしたいところです。

スターの画像を変えた

f:id:pacochi:20170206085555p:plainf:id:pacochi:20170206085552p:plainf:id:pacochi:20170206085554p:plainf:id:pacochi:20170206085550p:plainf:id:pacochi:20170206085553p:plainf:id:pacochi:20170206091214p:plain
こういう画像に変えました。

f:id:pacochi:20170218182709p:plain
使用イメージはこんな感じです。私のプロフィールアイコンは四隅が透過色なのですが、何故かその部分が黒くなっているみたいです。後で詳しく調べたいです。追記: .hatena-big-star-star-container > .hatena-star-star と .hatena-big-star-star-container に border-radius:0px; を追加したらはじっこも白くなりました。

はてなブログは元々プロフィールアイコンの上にスターを置くのがデフォルトで、そんなことしちゃっていいなら私も置いちゃうよということで、半透明のスターを描いてアイコンに重ねました。

CSS は、はてなのデザイナーさんのブログ記事を参考にして書きました。

.hatena-star-inner-count,
.hatena-star-inner-count-green,
.hatena-star-inner-count-red,
.hatena-star-inner-count-blue,
.hatena-star-inner-count-purple {
  font-size: 16px!important;
  display: inline-block;
  vertical-align: middle;
}
article.entry .hatena-star-star-image {
  background-image: url('http://cdn-ak.f.st-hatena.com/images/fotolife/p/pacochi/20170206/20170206085555.png');
}
article.entry .hatena-star-green-star-image {
  background-image: url('http://cdn-ak.f.st-hatena.com/images/fotolife/p/pacochi/20170206/20170206085552.png');
}
article.entry .hatena-star-red-star-image {
  background-image: url('http://cdn-ak.f.st-hatena.com/images/fotolife/p/pacochi/20170206/20170206085554.png');
}
article.entry .hatena-star-blue-star-image {
  background-image: url('http://cdn-ak.f.st-hatena.com/images/fotolife/p/pacochi/20170206/20170206085550.png');
}
article.entry .hatena-star-purple-star-image {
  background-image: url('http://cdn-ak.f.st-hatena.com/images/fotolife/p/pacochi/20170206/20170206085553.png');
}
article.entry .hatena-star-temp-star-image {
  background-image: url('http://cdn-ak.f.st-hatena.com/images/fotolife/p/pacochi/20170206/20170206091214.png');
}
article.entry .hatena-star-star-container a {
  display: inline-block;
  vertical-align: top;
  width: 20px;
  height: 20px;
  position: relative;
}
article.entry .hatena-big-star-star-container {
  width: 16px;
  height: 16px;
  position: relative;
  border-radius:0px;
}
article.entry .hatena-big-star-star-container > .hatena-star-star {
  background: transparent;
  border-radius:0px;
}
article.entry .hatena-star-star {
  padding: 0px;
  border: none;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 0;
  left: 0;
}
article.entry .hatena-star-user {
  padding: 0px;
  border: none;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 0;
}

ボタンをいつものに戻した

はてなブログのスター付加ボタンはデフォルトだとhttp://hatenablog.com/images/theme/star/hatena-star-add-button.pngこういうちょっと大きめのボタンなのですが、なんだか気後れしてしまうのでいつものボタンに戻しました。

span.hatena-star-add-button-image {
  background-image: url('http://s.hatena.ne.jp/images/add_rd.gif');
}
span.hatena-star-comment-button-image {
  background-image: url('http://s.hatena.ne.jp/images/comment_rd.gif');
}
span.hatena-star-comment-button-image-active {
  background-image: url('http://s.hatena.ne.jp/images/comment_active_dark.gif');
}

たった今色違い画像の存在に気付いたのでそっちに差し替えました。馴染んでて嬉しいです。

スターコメントを表示させて、スターを促すツールチップを隠した

スターコメントが非表示にされていたので、出しました。スターコメントは人力検索やはてなブックマークでも非表示にされてて不憫だなと思います。

もういっこのセレクタは、なんかでっかい緑色の吹き出しが出てきてびっくりしたので反射的に display:none; しました。

span.hatena-star-comment-container {
  display: inline-block;
}
div.star-navigation-tooltip{
  display: none;
}

置き換わってほしいとちょっと強めに願う場合はセレクタに要素名を足したり子孫セレクタにしたりして、優先順位を若干高めさせています。!important よりは弱めの願い方です。

Hatena::Let でもスターをいじるブックマークレットをいくつか投稿したので、一緒に紹介しようと思っていたのですが、記事が長くなってしまったのでこれ単体で出すことにします。

関連記事