たまりば

パソコン・インターネット パソコン・インターネット三鷹市 三鷹市

ブログ開設10周年
2017年12月29日 23:37

2017/12/29で10周年らしい。管理画面TOPで教えてくれた。
ブログ10周年
もっとも、ここのブログサービスに決める前に他のサービスで書いていた時期が少々あり、ブログを始めたのは2007/11/27だし、このサービスで2007/12/29に書いた記事はただの文字のテストで、初めてまともな記事(というか「ここに決めました」という内容)を書いたのは2008/04/05だ。
本当は11/27にブログ10周年って言いたかったけど忘れてたんである。

10年かけて記事数が200くらい。平均すると18日間に1記事。
そんなに書いてたっけと思ったが最初の頃は今よりもっと高頻度に書いてた気がする。
これからも更新頻度はあんまり上がらないだろうなあ…。

…まあ更新頻度はともかく、これからもたぶん自分が死ぬかブログという概念が著しく時代遅れになるまでは続けていくと思うので、今後ともよろしく。  

  • ゲームボーイの背景面とウィンドウ
    2017年12月16日 00:19


    一般的な2次元ゲーム機の画面は背景面とスプライトからできている。
    ファミコンでは背景面が1枚だけだったのに対し後年のゲーム機は複数枚の背景面を持つのが当たり前になり、多重スクロールなどの技法で差を見せつけたものだ。

    さてゲームボーイだが、これが背景面は1枚だけなのだが、特徴的な「ウィンドウ」という機能を持っていて、背景面1枚ではできないような表現が少しだけ実現できる。いわば背景面1.5枚とでもいえる面白い仕組みだ。

    背景面が2枚あると、2枚の絵を用意してそれらを重ねて動かすことができる。上の絵の透過しているところでは下の絵が見える。
    対してゲームボーイは、扱える背景面は1枚だけなのだが、その背景面の右下の一部を「ウィンドウ」の内容で置き換えたものを表示できる。

    図で示すと分かりやすいだろうか。
    例えばこのような2枚の絵があったとして、
    いらすとやの草原 いらすとやの城
    背景面が2枚あるとこういうことができる。
    2枚の背景面での合成
    一方、ウィンドウではこういうことしかできない。
    ウィンドウでの合成

    これを何に使うかというと、最も一般的な使い方は画面下部にステータス表示を出すことだ。
    ウィンドウ側に書いたステータス表示を固定したまま、画面の残りの部分を自由にスクロールすることができる。
    ファミコンで同様のことをするにはラスタースクロールが必要だが、ゲームボーイではウィンドウのおかげで画面下部に出すなら同じことを楽にできる。(ウィンドウの制限として、上部にはできない)
    例はいくらでも見つかると思うが、とりあえず「ゼルダの伝説夢をみる島」を挙げておこう。ポーズをかけるとウィンドウ部がそのまませり上がってくる独特の挙動を示す。
    ゼルダの伝説夢をみる島のウィンドウ
    この作品、恐らく1画面の*ゼルダシリーズで唯一ステータス表示が画面下部にある。ゲームボーイでは画面上部にステータスを出すことが困難だったことの証左だ。
    なお同じゲームボーイ(カラーだが)でも「ふしぎの木の実」では恐らくラスタースクロール的に頑張って画面上部に出している。
    * 2画面のゼルダでは2画面の中央あたり(下画面上部・上画面下部)だったりする

    ステータス以外にも、背景面に描いた大きな物体の下部を隠したい時に使える。
    例えばこちらは「パロディウスだ!」の猫戦艦。水面から出現するところにウィンドウが使われている。
    パロディウスだ!のウィンドウ
    ここで背景面が2枚あれば波の間を透過できたところだが、ウィンドウではできない。

    さて下に何か出すだけならラスタースクロールでもできる。
    ウィンドウでは、画面の右側にも何か出すことが可能だ。(左にはできない)
    「F1スピリット」がそのような表示を使っている。

    左右に分割するのはラスタースクロールでは不可能だ。
    ファミコンで同様の表示をしたゲームには「ロードファイター」があるが、
    これはどうやらキャラクタパターンを1ドットづつずらした8種類作ってフレームごとに書き換える荒業を使っているようだ。そのため複雑な内容は表示できない。
    これはスプライトで書かれているので、(ゲーム画面本体も含めて)複雑な内容は表示できない。


    変わった使い方としては「ポケットモンスター金・銀」の英語版。
    ポケモンSilverのウィンドウ
    一見何も変わったところは無いように見えるが8×8のグリッドを描いてみると…
    ポケモンSilverのウィンドウ_グリッド付き
    画面の左側だけ文字の配置が3pxずれている。背景が1枚なら普通には8ドットのマス目に沿ってしか文字は表示できないはずだ。
    これは右半分だけウィンドウに描画した上でずらして重ねているのだ。
    さり気ない、しかし重要な使われ方だ。

    最後に「P・マン(原題 Prehistorik Man)」を紹介しよう。

    このゲームは凄まじいゲームで、飛び跳ねるアイテムを背景面を書き換えて表示したり、パースの付いた文字が流れたり、ライン中に画面を書き換えて文字を表示したりと様々な技術が詰め込まれている。
    そんな中でウィンドウが使われているのがオープニングのこの画面。
    P・マンのウィンドウ
    主人公と木がスプライト、引かれている枠がウィンドウだ。
    下が切れているがこれはラスタースクロール的に消しているのだろう。
    ウィンドウの制限として枠が決して画面右端から離れられないのだが、その制限を感じさせないところが上手い。

    以上、ウィンドウが特徴的なゲームを挙げたが、この機能はもうちょっと面白い使い方ができそうな気がしてならない。
    巨大な敵を真っ二つにするとか、ラスタースクロールと併用して右上に行く階段とか、右半分を自由な形に隠すとか(左はスプライトでどうにかする)。
    暇があったら何か作ってみたい。

    2017/12/16訂正: 「ロードファイター」について、1ドットずらしだと記憶していたのだが、実際には単なるスプライトだと指摘をいただいた。1ドットずらしの技法はどこかで読んだ気がして、確かこのゲームだと思っていたのだが、記憶は当てにならないものである。
    2017/12/18更新: 前日と翌日の記事が投稿されていたのでリンクを張った。  

  • Firefox57でタブ幅を縮めるuserChrome
    2017年12月04日 02:01

    自分はブラウザでタブを大量に開いている(先日1000を超えていた)。そのためタブ幅はファビコンが見える限界まで縮めたい。
    昔はabout:configでタブの最小幅を設定できたのだがいつからかできなくなり、何らかのアドオンで縮めたり、南っぽい名前の頃にはタブの形が丸みを帯びて無駄なスペースができて気に食わなかったのでClassicThemeRestorerを使ってタブを四角くした。
    Firefox56での表示はこんな感じだ。
    ClassicThemeRestorerでタブ幅を縮めたFirefox56
    しかしそのClassicThemeRestorerがQuamtum(57)になって使えなくなった。
    これはもうFirefoxを捨ててChromeに乗り換えるときかと真剣に悩み、せめてuserChrome.cssで多少なりとも使いやすくできないか…と色々いじっていたところ、なんかむしろ以前より使いやすいものができてしまった。
    それがこれだ。とても美しい(※感じ方には個人差があります)。
    userChromeでタブ幅を縮めたFirefox57
    以前との違いとしては、
    ・以前はタブの表示が破綻しない最小幅は36pxほどだったのが、もっと狭めても大丈夫に。
    ・以前はスピーカーマークが出るとタブ幅が広がって隣と重なってしまっていたのが、広がらなくなった。
    ・以前は幅を狭めるとタイトルは表示できなかったのだが、表示できるようになった。
    特にタイトルが重要だ。色々と限界まで切り詰めた結果、タブ幅30pxで全角1.5文字ほど表示できている。このわずかな文字数でもタブの内容を判断するのに大いに役立つ。

    ピン留めしたタブの表示が崩れるなど、もうちょっといじりたいところも無いではないが、とりあえず十分使い物になるものができたと思うので、公開する。
    誰かの役に立てば幸いだ。
    /* ピン留めされたタブの幅はいじりたくないところだが、パディングをいじった影響でそのままだとアイコン幅-4pxになる */
    .tabbrowser-tab /*:not([pinned]) */ {
    /*        max-width: 250px !important; なぜかmax幅を指定すると3タブまでfoxygestures以外で閉じた時空白になる症状が出たのでやめた */
            min-width: 30px !important; /* 本題 */
    }

    /* タブを閉じるボタンを消す。場所もないし元々要らなかったので。昔はabout:configで消せたのだが今はuserChrome必須。 */
    .tab-close-button{
            display: none;
    }

    .tab-content{
            /* タブ左端とファビコンの隙間をゼロに */
            padding-left: 0px !important;
            margin-left: 0px !important;
            /* タブ右端まで文字が表示されるように */
            padding-right: 0px !important;
    }

    /* ファビコンの右端に少し文字が掛かるくらいにしてスペースを節約 */
    .tab-icon-image, .tab-throbber{
            margin-right: -4px !important;
    }

    /* タブの右端で文字が薄くなるのをキャンセル */
    .tab-label-container{
            mask-image: none !important;
    }

    .tab-text{
            /* 文字の頭のスペースを無くす */
            margin-left: 0px !important;
            /* 文字間も詰めて少しでもスペースを節約 */
            letter-spacing: -1px !important;
            /* Windows10ではデフォルトで游ゴシックになるのが嫌いなのでメイリオに */
            font-family: 'メイリオ' !important;
            /* ファビコンに文字が掛かるとそのままだと見にくいので背景色で縁取りする。
               色は標準テーマの「Light」のものに合わせた。現在のタブとhoverしたタブは色が違うがあんまり気にならなかったのでそのまま。 */
            text-shadow: 1px 1px 0px rgba(227,228,230,0.5), -1px 1px 0px rgba(227,228,230,0.5), 1px -1px 0px rgba(227,228,230,0.5), -1px -1px 0px rgba(227,228,230,0.5) !important;
    }