PB-100の宇宙新着情報

門真なむ氏との共作『BOMBER WOMAN'』を公開しました

PBロッキー — Sun, 08 Feb 2026 20:31:00 GMT

『BOMBER WOMAN'』のネットプリント配信は終了しています。たくさんの反響をありがとうございます。

「『ゴーストオブイツシマ』と『BOMBER WOMAN'』を並べる」画像を追加。(2026/03/17)

あのお騒がせ姉妹が帰ってきた！

伝説のPB用格ゲーが30年目のバージョンアップ！！

新たに3キャラが参戦、総勢9人を打ち破れ！！！

3年ぶりの新作ゲームを公開！

お久しぶりです、大変お待たせしました。新作『BOMBER WOMAN'』を公開します。例の如くネットプリントです。最寄りのセブンイレブンで出力してください。期限がありますのでご注意を！

ネットプリント情報

項目	内容
予約番号	37008124
費用	20円
印刷設定	必ず A3 用紙でプリントください！, 白黒, 1枚
期限	2026/02/16 23:59
その他	豪華付録のインストラクションカードが付属します。DAISO で購入できるプラスチックケースに収まるサイズです。
注意事項	SNS に本作を投稿する際は、印象的な「一部分のアップ」にしてください！

豪雪などでセブンイレブンにアクセスできない場合は、ローソン・ファミリーマート・ポプラ等のネットワークプリントのためのユーザー ID をご案内します。x@pbrocky にダイレクトメールを送ってください。2月16日まで対応します。

日本国外のファンは x@pbrocky にダイレクトメールを送ってください。2月16日まで対応します。

作品について

『BOMBER WOMAN』と『BOMBER WOMAN'』、セブンイレブンでプリントしたところ

本作は門真なむ氏との共同開発です。またポケコンジャーナル 1995年4月号掲載の『BOMBER WOMAN』を原作とするアッパーバージョンになります。共作もアッパーバージョンも僕にとっては初めての試みです。

原作『BOMBER WOMAN』の後日譚になり、物語の舞台は『BATTLE GIRL』(ポケコンジャーナル 1992年10月号)と同じく“ダサい田舎の王国”です。

『ゴーストオブイツシマ』と『BOMBER WOMAN'』を並べる(X より)

原作のプログラムにモダンな最適化テクニックを適用したことで、30～40ステップ程度の省メモリを達成しました。そこで3人の新キャラを参戦させ、更にエンディングに演出を追加しています。

この演出追加によって、9人に勝ち抜く武闘会という縦糸に、姉妹の物語という横糸が織りあわさる、重厚な作品に仕上がりました。

共同でコードを改善しあう開発スタイルのおかげで、尋常でない地点まで到達できた、と思います。

紙面に書ききれなかった情報は、結構あります。いずれホームページに収録しますからお楽しみに！

それでは、今後ともどうぞよろしくお願いいたします。

新年のごあいさつ、PB-100の宇宙を更新しました

PBロッキー — Thu, 01 Jan 2026 13:39:00 GMT

マークアップの誤りと、複数ページの合字に関する情報を修正し、サイトを更新しました。(2029/03/21)

画像を追加。(2026/03/17)

文書閲覧用ライブラリの最新版を適用し、Gecko 45以下、IE8 以下の閲覧性を改善しています。新着記事で HTML エスケープが無視される問題の修正を確認。(2026/01/02)

イスラエルによるガザでの虐殺が続いています。地球に生きる分別ある大人の責任として、イスラエルを糾弾します。2026年の幕開けも全くめでたくはないです。

さて、2025年はホームページもブログも全く更新しない一年になってしまい、大変申し訳ございません。忙しい年でした。

更新情報

新しい検索結果画面(X より)

この元旦にホームページを更新しましたので、お報せします。大きなところでは、検察機能を JavaScript + Google Search API から、サーバサイドで検索結果ページを生成する昔ながらの方式に変更しています。内部的にはストリーミング SSR で実装していて実は何気にモダンです。

同様にして、Teacup 掲示板のアーカイブ全252ページもストリーミング SSR で生成する方式にしました。

PB-100の宇宙のような規模の小さいウェブサイトでは、CPU 使用時間よりもストレージ代の方が月々のサーバ代に影響するようです。つまり、大量の静的ファイルをアップロードするよりも、サーバ側で都度に動的生成した方が、サーバ代を抑えられそうです。とはいえ、この変更はユーザーからは全く見えない部分です。

ホームページの検察機能を JavaScript(Ajax) ではなく、サーバサイドでページを生成する方式にしました
hamura.css をバージョン0.12.0に
「PB-100の宇宙の運営陣 / PBロッキーのプロフィール」を推敲しています
「詳しいWebブラウザのサポート状況」などの互換性に関するページを微修正しています
「Black♥Jack / プログラムリスト」に「+2ステップでこの問題を塞ぐ」を追記、推敲しています

この他に「～(全角チルダ)」から「〜(波ダッシュ)」への表記ゆれの修正（参考: 「とほほのWWW入門 / アラカルト / 波ダッシュ・全角チルダ問題」）と、「，(全角カンマ)」から「, (半角カンマ+半角スペース)」への書き換えを行いました。

それでは、本年もどうぞよろしくお願いいたします。

PB-100の宇宙は21周年を迎えました、ホームページの更新情報です

PBロッキー — Thu, 18 Apr 2024 12:02:00 GMT

Mr.T のバージョン表記の変更について追記。「Mr.T / バージョンアップ履歴」へのリンクの追加。(2024/05/07)

hamura.css をバージョン0.11.0に。pbList.css に0.11.0からの新機能 pbskip 属性について追記。軽微な推敲と Pocket BASIC Simulator CE 版へのリンクの修正。ウェブ文書ライブラリの更新。(2024/04/28)

ウェブ文書ライブラリの軽微な更新と、前日の更新で発生した問題の修正(サイドバーがメインカラムをはみ出してしまう)。ブログテンプレートの不正なマークアップを修正。(2024/04/20)

ウェブ文書ライブラリの軽微な更新。Chrome 系で閲覧性が向上しています(動かなくなっていたスクロールに追従する表のヘッダーの修正)。(2024/04/19)

おかげさまで21周年を迎えることとなりました。生憎と忙しくしておりまして、新規コンテンツまでは用意できませんでした。

更新情報

とはいえ、この3月の更新から続けていた追加と推敲がかなりの分量になります。ホームページのそこここがほんのりと読みやすくなっていると思います。

「5 LINE RPG ゴーストオブイツシマ / 5行 RPG 制作ノート / 私的5行縛りの明文化、謝辞、PB劇場(デモ)のご紹介」追加
「トロネコの大冒険4 / プログラムリスト / 既知の問題」追加
「Mr.T / プログラムリスト / 変数表」加筆
「Mr.T / バージョンアップ履歴」追加
「Black♥Jack / プログラムリスト / この問題の修正案」追加
「Square / プログラムリスト / 既知の問題」追加
この他にも大量の推敲と修正。例えば「階差数列」の誤記を「等差数列」に改める。
ウェブ文書ライブラリの累積的な更新の適用

「Mr.T」のバージョン表記の変更

この更新から「Mr.T」のナンバリングの変更をしています．ここに以前の表記と新しいバージョン表記の対照表を記載します．

公開日	以前のバージョン番号	新しいバージョン番号
1998年1月	Mr.T	Mr.T Version 1.0.0
2003年4月18日	Mr.T Ver.2.0	Mr.T Version 1.1.0
2003年7月14日	Mr.T Ver.3.1	Mr.T Version 1.2.0
2003年9月17日	Mr.T Ver.3.2	Mr.T Version 1.2.1
2004年4月21日	Mr.T Ver.4.0	Mr.T Version 1.3.0
2004年4月21日	Mr.T Ver.4.0(Pocket BASIC Simulator 用)	Mr.T Version 1.3.0
2004年10月9日	Mr.T Ver.4.1(Pocket BASIC Simulator 用)	Mr.T Version 1.3.1(Simulator のみ)

それでは今度ともどうぞよろしくお願いいたします。

「CASIO PB-100 用 5 LINE RPG ゴーストオブイツシマ(ペーパーウェアのpdf版)」の QR コードの更新はまだ着手できていません。ごめんなさい。

新年のごあいさつとホームページの更新について

PBロッキー — Sat, 03 Feb 2024 08:13:00 GMT

コピーライト表記の発行年を 2003-2023 から 2003-2024 に変更しました。(2024/03/15)

ゴーストオブイツシマの詳細解説のフローチャートの色と配置の微修正をしています。あわせて変数の範囲の修正漏れを改めました。hamura.css 0.10.7を適用しました。(2024/03/14)

本文中に「Android 2.2~4.2 のサポートが向上」とありますが、Android 3~4.4.0で Web フォントが描画されない問題が発覚しました。徹夜で原因を特定してホームページの更新をしています。この問題は hamura.css のデモページでは発生しないために発見が遅れてしまいました。

あわせて1月末の更新の後で修正したページを公開しました。「5 LINE RPG ゴーストオブイツシマ」のあやふやな乱数の範囲の理解で書いてしまっていた詳細解説と変数表が修正されています。「詳しいWebブラウザのサポート状況 / ゲーム機の Web ブラウザで閲覧する」では PlayStation Portable 用ブラウザに関する情報を修正しています。(2024/03/08)

イスラエルによるガザでの虐殺が続き、元旦には能登半島地震もありました。全くおめでたくない2024年の幕開けとなりました。

ただいまは新型感染症の第10波も盛り上がっています。読者の皆様のこの一年のご健勝を祈念いたします。あわせて被災された皆様には速やかな復興を祈念いたします。ガザでの虐殺が終わり戦争犯罪者が裁かれることを願います。

ホームページの更新情報

さて、この29日から30日にかけてホームページの更新をしました。今回は軽微な変更に留まります。

Web 文書ライブラリの累積的な変更を適用し、hamura.css を最新の0.10.3へ
いくつかのページの推敲、加筆修正
表記の統一(中黒点を半角から全角へ)

コンテンツの更新は僅かでしたが、Web 文書ライブラリの変更が溜まっていたので、この機に更新しました。

Eインクの電子ブックリーダー(Android 2.2)で閲覧する(PBロッキーの X より)

hamura.css の最新版では iOS Safari 3~6.x, Android ブラウザ 2.2~4.2, Chrome ~17のサポートが向上しています。流石にこの時代の WebKit ブラウザは基本的な(文書閲覧の為の)機能自体が欠落している、ということはありません。但し、これ以降と異なる挙動をする点がある為、処理を切り替える必要がありました。

ブラウザエンジン毎のバージョンによる変化を収集して、対応ブラウザを拡大することに愉悦を覚える変わり者のおかげで、Android 2.2を搭載するEインク端末でも独特の閲覧性を味わえたりします。一方で動作検証環境を維持し続ける辛みも感じるところではあります。

Google サーチコンソールに嫌われている件

ここからはただの愚痴になります。

サーチコンソールの登録済のページ数のグラフ

昨年は .ga ドメインを失って以来、新しい URL をサーチコンソールに手動でコツコツと登録しています。この作業を休んでいたところ、ゴソッと未登録が増えていました。

Google 側でどのようなアルゴリズムで処理しているのか、推測する他ないところではありますが。独自ドメインを失って appspot.com のサブドメインになってしまったことは決して無関係では無い筈です。

Web 屋さんとしての自信が、ボロボロですよ。

それでは、本年もどうぞよろしくお願いいたします。僕はまずは『CASIO PB-100 用 5 LINE RPG ゴーストオブイツシマ(ペーパーウェアのpdf版)』の URL の更新からです。つまり初版のデータが入手できるのは今だけです。ご購入を検討ください。

更新情報とドメイン喪失からの復旧状況

PBロッキー — Mon, 30 Oct 2023 13:45:00 GMT

この作業中に気が付きましたが、10月28日から30日の間、ホームページが閲覧できない状況でした。ご不便をおかけし大変申し訳ございません。

更新情報

本件に関する投稿

本日、ドメイン喪失によって繋がらなくなったブログ記事中のリンクを修正しました。お陰様で、残る作業は「CASIO PB-100 用 5 LINE RPG ゴーストオブイツシマ(ペーパーウェアのpdf版)」の QR コードの更新のみとなりました。

これと併せてホームページを更新しました。主な更新内容は次の通りです。

「5 LINE RPG ゴーストオブイツシマ」の各ページを推敲しています
「hamura.css / バージョン0.10.0以降の変更点」を追記しました
「詳しいWebブラウザのサポート状況 / テキストブラウザで閲覧する」を追記しました

サーバ側の実装更新について

Navigator 4で閲覧する(Edit / Preferences / Advanced / Enable JavaScript から JavaScript を無効にしています)

また、閲覧者様には分からないところですが、サーバ側の実装にも大きく手を入れています。

パフォーマンスの改善に加えて、Google アナリティクスの更新の追従、Netscape Navigator 4以下の文字化け対策を実施しました。

円安と物価高でサーバ代もジワジワと上昇している為、(とはいえ月々数十円程度のものですが)チューニングを施して様子をみたいと思います。

サーバ用ライブラリをてんこ盛りの express.js からミニマルな koa.js へ
サーバ用コードを rollup で一本化する(5MB 程度のストレージの削減)
Google アナリティクス GA4 への移行遅れで停止していたアクセス解析の復活(但し、動作はいまいち)
Netscape Navigator 4以下の文字化け対策として Shift-JIS でコンテンツを返す

ではでは、今後ともどうぞよろしくお願い申し上げます。

WSL2 で画像表示の出来るテキストブラウジング環境を手に入れる！Ubuntu 20 + w3m + mlterm + sixel

PBロッキー — Wed, 20 Sep 2023 11:02:00 GMT

はじめに

PB-100 用 BASIC と Web 技術は得意分野ですが、Linux となると素人レベルです。その素人が書いた記事です。ツッコミはなんなりとどうぞ。

画像 OK!、`<table>` いける! w3m!!

PB-100の宇宙では様々なフルブラウザに加えて、テキストブラウザによるウェブページの確認を行っています。とはいえ、多種に及ぶテキストブラウザを入手してチェックすることは出来ていません。これまでは Windows 版の Lynx でいくつかのページを巡回する程度でした。

w3m で「ゴーストオブイツシマ」のページを表示する

今回は WSL2 上の Ubuntu 20.04に w3m 他をイストールして、画像付きでインターネット・サーフィンできる環境を用意できましたので、その手順のご紹介です。

w3m は CSS こそ非対応ですが、ターミナルエミュレータの中で起動することで画像のインライン表示が可能です。更に、<table> タグをレンダリングできる珍しいテキストブラウザです。

HTML5 では非推奨になりましたが border="1" 属性付きで <table> を書くと枠線も表示されますから、border="1" 属性をつけ忘れているページがあると、ぐぬぬってなります。

更に、大昔に撮影された w3m のスクリーンショットを見ていくと、テーブルレイアウトと画像を駆使した2000年前後の Web サイトは、フルブラウザとあまり遜色なく表示出来ていたようです。シュゴいです。速やかにインストールする他ありません。

w3m 他をインストールして日本語テキストブラウジング環境を用意する

Windows 10~11に WSL2 と Ubuntu をインストールした後に、次のコマンドを順次実行していきます。

日本語環境の設定

「リナスク / Ubuntu環境を日本語化する」を参考にしました。

最初に

apt update しないといくつかのパッケージのインストールができない

sudo apt update

日本語パックをインストールしてタイムゾーンを設定する

sudo apt install language-pack-ja
sudo update-locale LANG=ja_JP.UTF-8
sudo dpkg-reconfigure tzdata

ここで一度 Ubuntu をリブートします。

sudo reboot

リブートしたら、次のコマンドで言語設定とタイムゾーンが変更されたことを確認します。

echo $LANG
locale
date

w3m, mlterm, sixel, 日本語 IME をインストール

sixel をインストールしなくても、w3m-img と mlterm の組み合わせで、画像の表示は可能です。しかし sixel を使った方が、画像の描画の質が向上します。

sudo apt install w3m w3m-img mlterm libsixel-bin

日本語 IME のインストール

日本語で Google 検索などをしたい場合、日本語入力環境をインストールします。

sudo apt install mlterm-im-ibus ibus-mozc
ibus-daemon --daemonize
ibus engine 'mozc-jp'

IPA フォントをインストール

いくつかのフォントを試したところ、mlterm + w3m の組み合わせで、マルチバイト文字に不自然な隙間ができない、枠線が正しく描かれる、のが IPA フォントでした。

sudo apt install -y fonts-ipafont

フォントキャッシュの更新

fc-cache -fv

ここで一度 mlterm + w3m を使ってみる(飛ばしても構いません)

次のコマンドで端末エミュレータを起動する。

mlterm

端末エミュレータから w3m を起動する。-sixel パラメータを付ける事で、sixel を使って画像が描画されます。

w3m -sixel google.com

スクリーンショット右上のコマンドメニュー(Insert で開きます)の枠線が崩れてしまっています。次からの設定で、これを修正したり、カラースキームを変更します。

mlterm の設定

vi を使ってホームディレクトリ(~)/.mlterm 下に各設定ファイルを用意します。vi は操作感の独特なテキストエディタです。操作方法はググって頑張りましょう。

~/.mlterm/aafont の内容

この設定が無いと、プリインストールのフォントが使用されますが、文字の間にスペースが出来てしまいます。

ISO10646_UCS4_1 = IPAGothic:100;
ISO10646_UCS4_1_BIWIDTH = IPAGothic:100;

~/.mlterm/main の内容

「ubulog / ubuntu の端末を mlterm にする」を参考にしました。正直、よく分からないパラメータが大半です。

# 端末縦横サイズ(文字)
geometry=80x58

#ーーーーー文字関係ーーーーーーー
receive_string_via_ucs = true
# Unicode記号文字幅を半角2文字にする。
# col_size_of_width_a = 2
# アンチエイリアス(Xft)時、JISX0208 の Unicode 変換に CP932 の変換テーブルを使う
use_cp932_ucs_for_xft=true
# UNICODE を適当な文字集合にmapして、UNICODE フォントを使わずに表>示する
not_use_unicode_font=false
# すべての文字を UNICODE フォントだけを使って表示する
only_use_unicode_font=false
# US_ASCII の表示には、必ず ISO8859-1 フォントを使用する
iso88591_font_for_usascii=false
# DEC_SPECIAL フォントの罫線文字のグリフを動的に合成
compose_dec_special_font=false
# インプッドメソッドの設定
input_method = ibus:anthy

# https://github.com/hamano/locale-eaw
# 絵文字も全角にするには
unicode_full_width_areas = U+2600-27FF,U+1F000-1FFFF

#ーーーースクロールバーーーーー
scrollbar_mode = none
# 使いたいスクロールバーの名前
# (*simple* / sample / sample2 / next / motif / athena / mozmodern)
# scrollbar_view_name=sample2

#ーーーー色設定ーーーーーーーー
# 端末画面の前景色
fg_color=green
# 端末画面の背景色
bg_color=#0f0604
# スクロールバーの前景色
# sb_fg_color=#222222
# スクロールバーの背景色
# sb_bg_color=black
# 紙にする画像ファイルのパス
# wall_picture
# Focus から外れたときの前景/背景色の Fade 率(百分率)
fade_ratio=70
# 背景画像(透過処理含む)の輝度調整(百分率)
# brightness=80

~/.mlterm/color の内容

「atominux / mlterm は文字化けやレイアウト崩れに強い端末エミュレータです / 色の設定」の値をほぼそのまま使いました。

black=#333333
red=#e5786d
green=#95e454
yellow=#cae682
blue=#8ac6f2
magenta=#ec448c
cyan=#99968b
white=#f6f3e8
hl_black=#444444
hl_red=#e68686
hl_green=#95e454
hl_yellow=#cae682
hl_blue=#808bed
hl_magenta=#fd559d
hl_cyan=#aaa79c
hl_white=#e6e6e6

w3m にも設定ファイル

~/.w3m/config の内容

# https://github.com/hamano/locale-eaw
east_asian_width 1

コマンドメニューの枠線が正しくなり、カラーリングもダークで目に優しいものになりました。

検索ボックスで日本語の入力ができる事も確認します。

以上です、お疲れ様でした。

白源フォントで枠線が残念だった件

「【Linux】フォントをインストールする」を参考に、日本語などのマルチバイト文字でも余計な空白が現れないという報告のあった「白源フォント」をインストールしました。

しかし、テキスト UI で横の枠線が点線になります。設定で簡単に直るものなのか？フォント側で対応が必要なのか？よく分かりません。出来れば、絵文字をモリモリサポートする「白源フォント」を使いたいところでした。

白源フォントのインストール

sudo apt install unzip
wget https://github.com/yuru7/HackGen/releases/download/v2.9.0/HackGen_NF_v2.9.0.zip
unzip HackGen_NF_v2.9.0.zip
sudo mv HackGen_NF_v2.9.0 /usr/local/share/fonts/
rm HackGen_NF_v2.9.0.zip
fc-cache -fv

~/.mlterm/aafont の内容

ISO10646_UCS4_1 = HackGen Console NF:100;
ISO10646_UCS4_1_BIWIDTH = HackGen Console NF:100;

この他には、「細明體」という明朝体フォントでも空白が現れないとの情報を目にしています。しかし普段使いのフォントはユニバーサルデザインフォントかゴシック系が良いかなと思います。

更新情報と、ドメイン喪失の経緯と対処状況のご報告

PBロッキー — Thu, 07 Sep 2023 07:19:00 GMT

最新の対処状況は「更新情報とドメイン喪失からの復旧状況」を確認ください。(2023/10/31)

記事タイトルを変更しました。(2023/09/14)

更新情報

この8月15日にホームページを更新しました。主な変更点は次の通りです。

「5 LINE RPG ゴーストオブイツシマ」の Web 版を公開しました！15日時点では用意できていなかったゴーストオブイツシマのフローチャートを21日に追記しています。
ホームーページ部分について pb-100.ga ドメインを失ったことで切れていたブログ記事へのリンクを修正しました。ブログの記事中からホームページへのリンクの修正は未だです。ご不便をおかけし大変申し訳ございません。
発表済のゲーム作品(「トロネコの大冒険4」「Mr.T」「Black♥Jack」「Square」)に目次ページを用意しました。
表記の誤りの修正、推敲、若干の追記をいくつかのページに行いました。
~~最新の hamura.css (Version 0.10.0)を取り込んでいません。もう少々お待ちください。~~(誤りでした 2023/10/31)

特に「ゴーストオブイツシマ」については、Web 版の為に大量の技術ドキュメントを書きました。読み応え十分ですが、娯楽として愉しめるのはペーパーウェア版です。

紙メディアで出せる面白さは HTML では難しいですし(*1)、HTML で出来る詳細・長大な解説は、紙メディアには向きません。今回は両者の長短がよく分かりました。

そうそう、各ページにはペーパーウェア版の為に制作したモノクロイラストに、テキトーな彩色をしたものを掲載しています。ドキュメントともどもエンジョイください。因みに、当ホームページのサムネイル画像はクリックで拡大します。

*1 例えば紙メディアの自在なレイアウトは、様々なアクセス手段での閲覧性を考慮しなくてはいけない HTML 文書では、都度に膨大な開発と検証の工程が発生してしまい、当ホームページの体制では現実的ではありません。

ドメインを失って pb-100.ga にアクセス出来なくなった件について

2019年から4年間利用してきた pb-100.ga ドメインを失いました。当面は、これと併存してきた来た pb-100.appspot.com で公開して参ります。記事執筆時点の復旧作業状況にジャンプする。

この間の経緯と対処のタイムライン
日時	出来事
19/04/30	Freenom で取得した pb-100.ga ドメインの使用を開始。
20/06/03	2つのブログのドメインも pb-100.ga のサブドメインにしたことから、現在も殆どの記事が Google にインデックスされていない状況です。
23/06/05	Google アナリティクスでは6/5以降に pb-100.ga へのアクセス記録は無し。
06/12	滝本飛沫氏からの問い合わせで認識する。Freenom が無料ドメイン「.ga」の運営権を失い、ガボン共和国に返還された。その際に数百万件のドメイン名が削除されたことが原因。
06/13	PBロッキーが放心状態で、復旧ロードマップを示せないことをアナウンス。
08/14	ブログのテンプレートを修正して pb-100.blogspot.com, pbrocky.blogspot.com にスタイルとスクリプトが復活する。
08/15	今回のホームページ更新のお知らせを Twitter で先行アナウンスする。
08/21	「ゴーストオブイツシマ」にフローチャートを追記する。
現在	最新の対処状況は「更新情報とドメイン喪失からの復旧状況」を確認ください。(2023/10/31 追記) ~~ブログ記事中のリンクを書き替える為にツールを開発中です。~~Blogger は、他にもいくつかのブログを運営している愛用サービスです。頑張って書き替える、というアプローチではなく、本件を便利ツールを用意する契機にいたします。

オフィシャル文書を確認すると…

今年6月頭に Freenom 社からアフリカのガボン共和国へ、.ga ドメインの運営権が返還された際に、ドメインの移行が行われず削除されたのが原因でした。

ガボン共和国のデジタルインフラ機関「ANINF」と、この返還を支援したフランスのネットワーク情報センター「Afnic」の出した文書によると、以前の運営者がドメインデータを提供していないためとしています。記事の最期に当該文書の deepl 翻訳を収録していますが、Freenom 社について厳しい指摘がされています。

今年3月には、Freenom 社が Facebook を運営する Meta 社から提訴され、無料ドメインが不正サイトの温床になっていると指摘されている、との報道もあります。こういった動向に鈍感であったことが、今回の失態の遠因といえそうです。

独自ドメインによる運用の技術的理由

ここで、Web サイトを開設した Yahoo!ジオシティーズから移った pb-100.appspot.com で提供すれば良いのに、何故ドメインを取得したのか？という疑問を抱かれるかもしれません。

Web ブラウザの組み込みストレージには、オリジングループ毎にサイズの上限が設定されています。つまり、当ホームページのように *.appspot.com, *.blogspot.com で配信される Web サイトは、他の Web サイトと上限を共有することになります。

将来的にストレージを使う Web アプリケーションを提供する際に適当ではないという判断をしましたが、完全に裏目に出てしまいました…

また、グループリミットというもうひとつの制限もあります。これは、グローバルリミットの20%として定義されます。それぞれのオリジンは、グループ (オリジンのグループ) の一部です。グループは、eTLD+1 ドメインごとに1つ作られます。例えば次の通りです。

mozilla.org — グループ1、オリジン1
www.mozilla.org — グループ1、オリジン2
joe.blogs.mozilla.org — グループ1、オリジン3
firefox.com — グループ2、オリジン4

このグループでは mozilla.org、www.mozilla.org、joe.blogs.mozilla.org が、合わせてグローバルリミットの 20% を上限としてストレージを使用できます。firefox.com は、別に 20% の上限を持ちます。

さいごに

PB-100の宇宙の英語名が Galaxy of PB-100 であることから、Freenom 社が提供する無料ドメインの中から .ga を選びました。この .ga が無料ドメインの中で最も酷い事態となってしまいました。他のドメイン提供会社を利用することで再取得は可能のようですが、年間利用料が3000円程度とのことで辞めておきます。他のお値ごろドメインと同程度の1000円なら取得したと思います。(2023/09/14 追記)

最初に選択した無料ホームページサービスがジオシティーズであったお陰で、時代の荒波に揉まれることもなく運営出来ていた当ホームページでしたが、ここに来て痛恨の一撃を貰ってしまいました。

ドメインを失うというヘマをやらかしたことで、せっかく育っていた Web 屋としての自信が砕けましたよ。

ではでは、今後とも PB-100の宇宙をよろしくお願いいたします。最後になってしまいましたが、ガボン共和国の発展を祈念いたします。

付録「Afnic / .ga ドメイン名はまもなくガボンの管理下に戻る」(deepl 翻訳)

.ga ドメイン名はまもなくガボンの管理下に戻る

Libreville, 2023年5月30日: ガボン共和国のデジタル・インフラ・周波数国家機関である ANINF は、2023年6月3日(土)より、レジストリと国家 TLD .ga の完全な管理を引き継ぐ。経済成長著しいガボンでは、ドメイン名保有者とデジタル・エコシステムをより良くするために、このようなガバナンスの変更が長い間行われてきた。バックエンドのレジストリ運営会社の切り替えは、フランスのネットワーク情報センターである Afnic の支援を受けて実施される。
これまで .ga TLD を管理してきた Freenom 社がインターネット・コミュニティに満足のいくサービスを提供できなかったため、ガボン当局は現在の契約を終了し、ガボンの国別 TLD の管理を内製化することを決定した。この決定は、中央アフリカ第3の経済大国であるガボンが、企業、団体、機関、個人のオンライン・プレゼンスをサポートする信頼性の高いデジタル・ツールを必要としていることに裏付けられている。
6月7日: .ga ドメインが Afnic の技術支援により ANINF に移管される

過去1年間、ANINF は、デジタル主権回復の要である .ga TLD の管理を取り戻すという課題において、Afnic に技術的および運営上の支援を求めてきた。6月上旬、ANINF と Afnic は、.ga ドメイン名の登録と解決のインフラをガボンとそのサービスプロバイダーである Afnic に戻すための切り替えを実施する。
この TLD は、最高水準のサービス品質とセキュリティで運営・管理され、ガボンのインターネット発展に不可欠な役割を果たすことになる。そのためにも、ANINF とガボンのインターネット・コミュニティは、このドメインが全世界に開かれたものであり続け、個人、団体、企業を問わず、ガボンに関心や好意を持つすべての人々に利用されることを願っています。
ダイナミックなデジタルエコシステムを支える健全な基盤へ

ANINF は、.ga ネームベースには現在700万以上のドメイン名がストックされていると推定している。しかし、独立機関は .ga ドメイン名には技術的な不正利用が蔓延していると考えている。今回の切り替え作業の一環として、数百万件のドメイン名が削除される予定ですが、これは、以前の運営者が該当するデータを提供していないためです。
これらの削除がデジタルエコシステムに与える影響を最小限に抑えるため、ANINF はレジストラネットワーク全体で大規模な意識向上キャンペーンを実施しています。その目的は、現在の顧客のドメイン名の移行を確実にし、新しいドメイン名登録システムへのアクセスを容易にすることです。また、このキャンペーンは一般消費者も対象とします。Afnic が主要な TLD に技術支援を提供するのは今回が初めてではありません。400万の .fr ドメイン名と20の TLD を管理する役割で知られる Afnic は、.mma や .leclerc のようなビッグブランドであろうと、.sn のような ccTLD であろうと、アクティブなドメインをサポートしている。

追加コンテンツ「ゴーストオブイツシマ公式ファンクラブ会誌第1号兼最終号」の配布につきまして

PBロッキー — Thu, 11 May 2023 18:18:00 GMT

人気投票に使用した画像を追加しました。(2023/05/13)

PB-100の宇宙20周年記念で公開した新作ゲーム「5 LINE RPG ゴーストオブイツシマ」へ多大なるご反響を賜り、ありがとうございます。

さて、公開後に判明した不具合に関する追加コンテンツを出そうとは考えておりましたが、反響に気を良くした僕は、これも本編に双璧をなす凄い A3 ペーパーコンテンツにすべく頑張り抜きました。

マイコン誌の再現に続いて、ファンクラブ会誌の再現を試みましたよ。本編を陽とするなら、会誌は陰。これにて陰陽五行の完成です、なんちって。

配信情報

会誌は、ネットプリントと BOOTH で販売中の「CASIO PB-100 用 5 LINE RPG ゴーストオブイツシマ(ペーパーウェアのpdf版)」のおまけとして、同時配信されています。ネットプリントは8日間という配信期限があります。お気をつけください。

ネットプリント配信の詳細

項目	ファンクラブ会誌	スペシャル・ピンナップ
ネットプリント番号	83502912	会誌に記載されています
費用	20円	2枚を1枚にまとめてプリントする場合は20円。ページ毎にプリントする場合は40円。
印刷設定	A3 推奨, 白黒	2ページを纏めて1枚の A3 にプリント、または A3 にページ毎にプリントを推奨。白黒。
期限	2023/05/19 23:59
ご注意	5月17日（水）1:00～6:00はネットプリントセンター・メンテナンス予定日の為、ご利用になれません。この他に緊急メンテナンスが発生する場合もあるようです。

ローソンとファミリーマート設置のマルチコピー機で利用できる「ネットワークプリント」での配布を希望される場合は、PBロッキーの Twitter アカウントまでご連絡ください。配信期限中につきご対応致させていただきます。

現時点で公開出来る内容

スピンオフ小説「エ！オレ？ホネ！？」滝本飛沫氏寄稿
第一回キャラクター人気投票結果発表、優勝者インタビューがあります（赤面）
PB-100 初期版で発生する問題を回避するパッチ（門真なむ氏より, 一つの式でべき乗が非0の後の EXP で発生, バグを踏んだ時の EXP の値は正の引数と負の引数で異なる）
公開後に判明した不具合情報（門真なむ氏より）
全国の会員からの一言コメント
スペシャル・ピンナップのネットプリント番号
この他にもまだまだ豪華コンテンツがギッシリ詰まっています！

まるで90年代に冊子を1冊手にしたような、想像の斜め上をいく、超充実の A3 ペーパーです！お楽しみに！

実は4月18日の本編の公開時点でも、いい歳して多大な労力をかけて PB-100 用ゲームをリリースしている自身への迷いがありました。お陰様でこれを吹っ切ることができたのは皆様の反響に触れる中でです。

それでは次の20年もPB-100の宇宙をよろしくお願いいたします。

20周年企画 17年ぶりの新作ゲーム「5 LINE RPG ゴーストオブイツシマ」遂に公開！ネットプリントだよ！

PBロッキー — Tue, 18 Apr 2023 11:18:00 GMT

追加コンテンツ「ゴーストオブイツシマ公式ファンクラブ会誌第1号兼最終号」を配布中です。(2023/05/13)

ネットプリント配信終了と追加コンテンツについて(2023/05/02)

ネットプリントでの配信は終了しました。この間に頂戴した多大なる反響と拡散に御礼申し上げます。

現在は BOOTH / CASIO PB-100 用 5 LINE RPG ゴーストオブイツシマ(ペーパーウェアのpdf版) でご購入頂けます。ダウンサイズ無しでデータ化していますので、セブンイレブン(FUJIFILM)にデータを持ち込んでプリントすれば、ネットプリントと同じ高品質で出力いただけます。

併せて、公開後に判明した不具合情報と PB-100 初期版で発生した不具合のパッチを含む「ゴーストオブイツシマファンクラブ会誌第一号兼最終号(仮)」を制作中です。

近日中にネットプリントと BOOTH で配布いたします。BOOTH では先に紹介した商品のおまけになります。個別の販売はいたしません。

2003年の4月18日20時18分に開設したPB-100の宇宙は、本日20周年を迎えることが出来ました。

個人ホームページ時代に産声をあげた多くのウェブサイトが消滅する中、20年目の今日を迎える事が出来たのは、皆様のおかげでございます。

この記念日に、17年ぶりの新作ゲームをお届けできることを嬉しく思います。20周年に相応しい自信作です！更に当ホームページでは初めての試みで作品をお届けします。

「5 LINE RPG ゴーストオブイツシマ」はネットプリントでまずは公開！

項目	内容
ネットプリント番号	65257957
費用	20円
印刷設定	必ず A3 用紙でプリントください！, 白黒, 1枚
期限	2023/04/25 23:59
その他	豪華付録付き！
ご注意	4月19日(水) 1:00～6:00はネットプリントセンター・メンテナンス予定日の為、ご利用になれません。この他に緊急メンテナンスが発生する場合もあるようです。

A3 の紙面を余すところなくタイトにコントロールした、ハイパーなペーパーウェア・ゲーム体験が貴方を待っています。なんと2021年からプリントして赤入れして修正して、を繰り返した尋常ではない紙面です。制作中はなんども眺めてウットリしちゃったのは秘密です！

この間には、ローソン・ファミリーマート(シャープ)、DAISO(リコー) といくつかの複合プリンターを利用しましたが(2021年11月調べ)、網点が発生せずに一番綺麗に出力してくれたのがセブンイレブン(FUJIFILM)のプリンタでした。ご不便をおかけするかもしれませんが、今回はセブンイレブンのネットプリントへの登録のみとしました。しかし Twitter アカウントにご連絡いただければ、期限中に限って個別にご対応できるかもしれません。

線のキリっとしたセブンイレブンのプリンタが、貴方の為の最高のペーパーウェアを出力してくれます。万が一、プリンタのコンディションが悪かったら、近所の他のセブンイレブンを梯子しましょう。

さぁ、20円持ってセブンイレブンへ Go！そうそう、クリアファイルや書類ケースも持って行った方が良いかな。

動機

マイコン誌の掲載経験者に憧れを持つ僕が、一度くらいは紙の上で自作プログラムを見てみたい、と考えていたところ、5行縛り作品のボリューム不足を補ってゲーム体験を補完する狙いもあって、ネットプリントでの発行を決めました。600dpi で書き込まれた A3 紙の存在感が、貴方の異世界への冒険を盛り上げてくれることでしょう。

郵送でのご提供

ネットプリントがない、または入院等でネットプリントを利用できない。頼める知人もいない、天涯孤独である。そんな方は仕方ないので、僕の Twitter アカウントまで住所をお伝えください。僕がプリント代、送料を負担して郵送します。申し訳ございませんが、受付はネットプリントの期限までとし、発送は日本国内のみとなります。

お願い

是非この試みをご利用の SNS で拡散してください！他機種のユーザーの方にとっても、全てのマイコン誌読者をときめかせる一枚となっている、と思います。

気ままにリフレクション(杏里)を聴きながら。

20周年プレ企画第七弾！BLACK♥JACKをバージョンアップ、ホームページを更新しました

PBロッキー — Mon, 17 Apr 2023 11:18:00 GMT

20周年プレ企画の最期を飾る第七弾のご案内です。第六弾は「6 LINE RPG ムシハカセへの反響の記録」を公開しました。

PB-100の宇宙は明日、4月18日の20時18分で20周年を迎えます。いよいよ17年ぶりの新作ゲームをリリースします、お楽しみに！

ホームページの更新内容

20周年プレ企画第七弾として「Black♥Jack」を19年振りにバージョンアップしました。併せて以前のバージョンのプログラムリストを資料として順次公開していきます。
この間に発表したブログ記事4本とプログラムリスト「ぽあぽあ 544ステップ版」へのリンクを関連するページに張っています。
「Black♥Jack」と「Mr.T 攻略マンガゲーム拳ロッキー」に性的コンテンツに関する警告文を表示しています。

Black♥Jack Version 1.3.0の変更点

1. ゲームオーバーの条件を修正

新バージョンでは、エリがスカートを脱いだ(2回以上負けた)状態以降に母に見つかるとゲームオーバーになります。ジャケットを脱いだ(1回負けた)状態で母に見つかるとゲームオーバーになるのは不自然に思え、改めました。

2. 演出の追加と操作性の改善

マル雄が全裸でゲームオーバーした際に、母さんに怒られる演出を追加しました。あわせて、トランプ勝負の結果表示で STOP せずに、他の画面と同様にキー入力で次に進むようにしました。

因みに、ゲームオーバーの際に母が遠くにいる場合、中々画面が切り替わらない点にご注意ください。

3. その他

マル雄の2枚目以降で ? の表示を加えました。ストップかカードの追加の選択式であることをユーザーに伝えるためです。
ゲームオーバーのメッセージを吹き出しに変更しました。
プログラムサイズは542ステップから544ステップになりました。

旧バージョン公開ページの追加とバージョン表記の変更

今回の更新から旧バージョンも公開していきます。併せてバージョンのナンバリングを次の通り変更します。

公開日	以前のバージョン番号	新しいバージョン番号
2003年4月18日	Black♥Jack	Black♥Jack Version 1.0.0
2003年5月25日	Black♥Jack Ver.1.1	Black♥Jack Version 1.0.1
2003年7月14日	Black♥Jack Ver.2.0	Black♥Jack Version 1.1.0
2004年10月9日	Black♥Jack Ver.3.0	Black♥Jack Version 1.2.0
2023年4月17日		Black♥Jack Version 1.3.0

バージョンアップを終えて

「5行 RPG(仮)」を脱稿して温まっていた状態で、それなりの時間をかけて見直しましたが、プログラムの基本的構造に変化がなかったため、2004年の段階でかなり追い込めていたのだと思いました。

「Mr.T」「トロネコの大冒険4」に比して言及されることの少ない作品ですが、もちろん自信作です。是非この機会に遊んでいただけたらと思います。

それでは、明日はいよいよ20周年、17年ぶりの新作ゲームをリリースします、お楽しみに！

20周年プレ企画第六弾！6 LINE RPG ムシハカセへの反響の記録

PBロッキー — Sun, 16 Apr 2023 11:18:00 GMT

この記事は20周年プレ企画第六弾です。第五弾では「544ステップに詰め込め！ZERO のノーマル PB-100 対応に挑んだ者たちの軌跡」を公開しました。

プレ企画はあと1つ「BlackJack の19年ぶりのバージョンアップ」を残すのみとなりました。そして明後日の20時18分は20周年です！19年ぶりの新作ゲーム「5行 RPG(仮)」をお届けします！お楽しみに！

2020年、童心に還って、伝説のムシキングを追った PB-100 ユーザーたち

6 LINE RPG「ムシハカセ」は、結局5行に収める事は出来なかった、という無念とともに手放した昔の作品でした。2020年にひっそりとブログに収録してからやや間も空けて、加藤升巳･づら丼氏を皮切りに、咳メグ氏、umipi 氏に拾って頂き、そこから多くの方達にプレイ報告を頂戴しました。

2020年1月27日の Togetter 編集部のイチオシ

Togetter 編集部によるリツイート

CASIO 公式アカウントがリツイート

この模様を Togetter でまとめたところ、Togetter 編集部に「イチオシ(JavaScript を無効にすればページが表示されます)」として推していただき、CASIO 公式アカウントからもリツイートされます。お陰様で PB-100 シリーズの素晴らしさをワールドに示すことが出来ました。

そして5行 RPG 開発の日々へ…

恥ずかしながら、僕自身はブログへの収録に際して、シミュレータで簡易に動作確認を済ませたのみで、エンディングを拝んですらいません。ゴールデンヘラクレスオオカブトに負けて、そこで諦めました。執筆時点の僕のフォーカスは、PB-100 用 CSS ライブラリ hamura.css のデモンストレーションの方にあったからです。

そんな気合の入っていない作者を他所に、実機に入力し、エンディング画面をカメラに収めて反響を寄せて下さった PB-100 シリーズユーザーの皆様、ありがとうございます。

この経験が僕を再び、2006年には成し得なかった5行 RPG の完成へと駆り立てていくことになります。苦しい道のりの始まりでした。

さて、その5行 RPG はいよいよ明後日の公開です。苦しい道のりも完成しちゃえば良い思い出です。皆様、楽しんでください！

明日は20周年の前夜、プレ企画のフィナーレは「Black♥Jack バージョンアップ版」の公開です。5行 RPG を完成させたばかりでパキパキのPBロッキーによる至極の機能追加と省メモリ化を味わってください！

20周年プレ企画第五弾！544ステップに詰め込め！ZERO のノーマル PB-100 対応に挑んだ者たちの軌跡

PBロッキー — Sat, 15 Apr 2023 11:18:00 GMT

記事の最期で言及している「DRY US」の PB-100 向けリストを544ステップに縮めたものを門真なむ氏が公開してくださいました。ポケコンジャーナル後期に最高峰の PB-100 系プログラミング技術を誇っていたたかじょゆうき。氏のリストから94ステップを短縮したのは驚異的です(再)！併せて本記事中の僕による「DRY US」に関する不正確な表記を改めています。(2023/04/17)

この記事は20周年プレ企画第五弾です。第四弾では「ぷよぷよ風落ちゲー「ぽあぽあ」の544ステップ版、遂に公開！」を公開しました。4月18日20時18分の20周年記念日の前夜まで、計7回に渡って記事やバージョンアップを用意しています。お楽しみに！

PB-100 シリーズ用固定出題型パズルゲーム「ZERO」

印刷して門真なむ版とたかじょゆうき。版を比較する

工学社のポケコンジャーナル誌の1992年12月号に掲載された PB-110/120 用ゲーム「ZERO」は、544ステップに収まりながらも、全15面を備える固定出題型パズルゲームでした。その実現の為には、面データを数式から生成するテクニックが使われています。

メモリの限られていた当時のマイコンやポケコンのプログラム作品には、しばしばこの数式から必要なデータを得るテクニックが使われていて、PB-100 シリーズもその例外ではありません。そんな作品達の中でも、ZERO のソレは殊に鮮やかでした。計算結果をゲームに利用するための調整を必要とせずダイレクトに得ていたからです。

ZERO の面データ圧縮の技術をたかじょゆうき。氏自身が存分に解説した「Programmers' Work Shop 人生PROGRAMIX」(ポケコンジャーナル 1994年1月号)は、作品が成立した背景にあるミラクルについて、氏の手応えが溢れる文章となっています。

ノーマルの PB-100 には非対応…!?

一方で僕は、作品がノーマルの PB-100 では動かない点が気になっていました。これは ZERO が Version 2 BASIC から備える STR$ を使っていたことに依ります。この STR$ を置き換える改造を試み、叶わなかった僕は永らく ZERO をノーマル PB-100 で動かすことは不可能だと考えてきました。

私はノーマル初代 PB-100 に対応させるべく挑戦し玉砕した．

そんな折、2020年11月の門真なむ氏によるノーマル PB-100 対応版の発表は衝撃でした。

凄い！
「私はノーマル初代 PB-100 に対応させるべく挑戦し玉砕した」の一文は、それなりの時間取り組んだ末の降参だったと記憶します。

ようやく時間を持てたところ、ご厚意もあってたかじょゆうき。版を入手でき、両版を比較してどのようなテクニックが使われているのか、読み込んでみました。1992年のたかじょうゆうき。氏が成し得なかったことを如何にして実現しているのでしょう？

また PB-100 プログラマーとして更なる進歩をすべく僕自身の敗因を知りたい、という動機もありました。

`STR$` が必ずしもアドバンテージでは無かった！

両版を比較していくと、STR$ の存在がアドバンテージでは無いことが視えてきました。

STR$ からの流れで面データを $ に記憶するたかじょゆうき。版では、"0" を " " に置き換えるループ処理が必要であったり、数字同士の和を求める際に一旦 VAL で数値化する必要があります。

結果的に MID とループで数値を文字化(ただし 0 は " " に)していても、面データを配列変数に記憶することでステップ数の差を補えたのでした。

むしろ後者の方がステップ数が有利で、たかじょゆうき。版には無かった親切機能を追加したり、「動作を揃える施策」が成されたり、至れり尽くせりでした。

> 開発フォルダには面を徐々に表示する版が残っており、終盤に余裕が出て瞬間表示を再現したようです。
逐次表示の場合、かなりステップ数に余裕が出てくることに気づいて戦慄しました (;'∀')

ご参考「動作を揃える施策」部分の比較

面スタート時に、一瞬で面データを表示している部分の抜粋、比較になります。オリジナルが1行で実現している処理に、STR$ を使わない門真なむ版では3行を要している。にも関わらず、他の部分の最適化で544ステップに収めている。

たかじょゆうき。版の当該部分

3 $=C$+STR$(FRAC TAN VAL(Z$)*1ᴇ10)+A$

門真なむ版の当該部分

3 $=" 123456789→"
4 FOR I=0 TO 9:Z=10*FRAC Z:N(I)=INT Z:H=H+SGN INT Z
5 $=$+MID(Z+1,1):NEXT I

戦略の勝利、成功体験に囚われた敗北

現在の面データを $ に持つか？配列変数に持つか？が栄光と挫折の分かれ目でした。

門真氏の開発の発端に、戦略的な配列変数の検討があったというのも鮮やかです。

ブロックの並び判定や空間圧縮が伴う落ち物では、MID で一気に処理できる $ がやはり便利ですね。数字の位置が固定の ZERO では配列に分があるかもと思ったのが、とっかかりだったと思います。

一方の僕の敗因もはっきりとしました。

たかじょゆうき版のように、現在の面データを $ に格納する実装は、僕にとっては Mr.T とぽあぽあ544ステップ版で成功体験があり、これに囚われてしまっていたことが、玉砕の原因と分かりました。

門真なむ版のもたらしたもの

たかじょゆうき。版を28年目に改良した、門真なむ版 ZERO によって人類は、ノーマル PB-100 用ゲームの固定出題型パズルというジャンルにおいても、その極限に肉薄した作品を目にすることとなった、と僕は皆様にお報せします。

そしてその他のゲームジャンルでも同様にして高度なゲーム性に至った作品が現れたとしたら、、、
そのとき私たちはようやく、齢20年を経た PB-100 シリーズにおけるゲーム表現の可能性のいくらかを知りえた、といえるのではないでしょうか．

もう齢41年なんですね…ちゃん、ちゃん♪

もうちょっと続くよ

門真なむ氏からは ZERO について、PB-100 プログラミング考古学ともいえる指摘もありました。92年の雑誌掲載からから28年目にして、ぱねぇーっす。

原作では面の状態を文字列変数 $ で管理しているが、自分の方では数値変数 N..W (=N(0)..N(9)) を用いている。原作の変数表を見ると、この N..W 部分がごっそり未使用になっているので、開発中はこちらの方法も検討されていたのかも?　とちょっと思っていた。

更に、たかじょゆうき。氏の PB-100/110 用シューティング「DRY US」の PB-100 向けリスト(ポケコンジャーナル 1994年11月号)についても、ノーマル機に収める事が出来た、とのことです。これは、激しく公開キボンヌですね…

そういえばたかじょさんの『DRY US』は DATA 文の使えないPB-100用リストが6??ステップだけど、以前これを558ステップにまで縮めた。タイトルの PRINT を除けば544ステップに収まるので、増設RAMありの場合はタイトル用リストを別プログラムエリアに入れることで完全になる、というのはありかもしれない。

さて、プレ企画は残り2回となりました。次は第六弾「6行 RPG ムシハカセへの反響の記録(仮)」になります。

20周年プレ企画第四弾！ぷよぷよ風落ちゲー「ぽあぽあ」の544ステップ版、遂に公開！

PBロッキー — Fri, 14 Apr 2023 11:18:00 GMT

<var>, <code>, <samp> のマークアップを追加しています。(2023/05/15)

感想戦とリンクを追記しました。昨日はステップ数を修正し忘れていました。(488ステップ → 487ステップ、2023/04/16)

9行目に不要な : があったのを削除しています。本件は門真なむ氏からご指摘いただきました。(2023/04/15)

この記事は20周年プレ企画第四弾です。第三弾では「1行落ちモノゲームの金字塔、Mr.Tの成立経緯について」を公開しました。4月18日20時18分の20周年記念日の前夜まで、計7回に渡って記事やバージョンアップを用意しています。今回で折り返し地点です！

ぽあぽあ 544ステップ版の競演が急きょ決まりました！

毎夜20時18分頃に、淡々と記事等を公開するだけだったプレ企画ですが、今回はナント、門真なむ氏も関わってくださいました。

この記事に前後して、門真なむ氏もお手元の「ぽあぽあ 544ステップ版」を公開されるとのことです。

PB-100 プログラマとしての実力もスンゴイ上に、研究量やリリースの速度でも尋常でなはない、なむ氏のことですから、ひょっとしたらと思っていましたが、やっぱり！

ベンチマークなどの調査を基に、高速な実装にも定評のあるなむ氏によるリストはとても楽しみで、僕も勉強させていただきたい思いです。

一方の私のリストは、ループを抜けて都度に6行に戻るあたり、速度よりも省メモリを重視しているようです。また、オリジナルの改編も様々に行っている筈で、オリジナルを尊重するなむ氏とはどんな違いが出てくるか？

一つのお題に対して、複数の実装が寄せられるのは、ポケコンジャーナルのゲームデザイン館など、マイコン誌では度々企画されていました。それを20年代にもなって PB-100 で出来るとはことになるとは…！

ぽあぽあ 544ステップ版公開！

ぽあぽあ 544ステップ版のリスト。保存状態が悪くパンチ穴もあった。幸いにこれよりも新しそうな手書きのリストを見つけたのでそれを復元したが、案の定、バグがあった。

長らく公開のご要望を頂いていた「ぽあぽあ 544ステップ版」をついに公開します。

「ぽあぽあ」(小山田正人氏)は、ポケコンジャーナル 1996年4月号に掲載された落ちモノパズルゲーム作品です。テトリス系列の落ちモノではなく「ぷよぷよ」を志向しているユニークな作品で、連鎖をきめるとブロックがポコポコと消えていくのは心地良いです。

このぽあぽあの544ステップ版制作の経緯については「幻の『ぽあぽあ 544ステップ版』」をご覧ください。

ところで、コロナ禍もあって実家に帰れていない為、オリジナルの確認を出来ていません。オリジナルと本作の差異については分からなくなっています。悪しからず。

遊び方

2～3個の泡が連なった3種類のブロックが画面右から左にふんわりと落ちてきます。次に落ちてくるブロックの種類は角度モード表示で判断できます。(より短く書くために、オリジナルとはブロックとモードの対応を変えています。)

ブロックは 4 で回転し、6 で速く落ちます。

ブロックが積まれた時に 88 と並ぶとブロックは破裂します。この衝撃で互い違いになっている泡(o°, °o)が 8 になり、ブロックの隙間も詰まります。これによって 8 が並ぶと連続で破裂して得点が入ります。

一度に消える 8 が多い程高得点です。

ブロックで画面が埋まるとゲームオーバーです。ブロックを消せないと落下速度は上がっていきます。反対にブロックを連鎖で消すと落下速度は下がります。

プログラムリスト

487ステップです。変数増設はありませんが、26個を使い切っています。

1 VAC :$="OO()  8 8oo°°°8°°o 8°8o°ooo8°o":PRINT "   PoaPoa"
2 K$=" ":FOR A=.5 TO 15:L$(A)=MID(A*2,2):GOTO 12
3 FOR I=0 TO 2:PRINT CSR A-2;L$(I);CSR 9;:NEXT I
4 IF 1≦D;PRINT D;:J=J+10↑D
5 $=MID(1,A-1)+H$(I)+MID(A+1):RETURN
6 I=0:E=LEN($)-3:PRINT :IF 0&lt;E;PRINT MID(2,E);
7 FOR A=2 TO E+1:IF MID(A,2)≠Q$;IF MID(A,2)≠T$ THEN 9
8 IF D=0;$=MID(1,A-1)+U$+MID(A+2)
9 IF 0≦D;IF MID(A,1)=K$;GOSUB 5:GOTO 6
10 NEXT A:FOR A=2 TO E+1:IF MID(A,2)="88";D=D+1:GOSUB 3:NEXT A
11 IF I≠0;GOSUB 5:GOTO 6
12 NEXT A:F=F-D:D=RAN#*3:IF 4&lt;E;D=RAN#*2
13 MODE 4+D:FOR A=10 TO E STEP -1:FOR B=F TO 9:IF KEY="4";G=G+9-12*SGN G
14 PRINT CSR A;O$(C+G);I$;:IF KEY≠"6";NEXT B
15 I$=K$:NEXT A:$=MID(1,E+1)+O$(C+G)+M$:C=INT D:D=-1:IF E&lt;11 THEN 6
16 PRINT :PRINT J;"Pts"

シュミレータ用リスト

実機用との差異は、2行冒頭に H$="": を追加している。

[P0]
1 VAC :$="OO()  8 8oo\DG\DG\DG8\DG\DGo 8\DG8o\DGooo8\DGo":PRINT "   PoaPoa"
2 H$="":K$=" ":FOR A=.5 TO 15:L$(A)=MID(A*2,2):GOTO 12
3 FOR I=0 TO 2:PRINT CSR A-2;L$(I);CSR 9;:NEXT I
4 IF 1&lt;=D;PRINT D;:J=J+10^D
5 $=MID(1,A-1)+H$(I)+MID(A+1):RETURN
6 I=0:E=LEN($)-3:PRINT :IF 0&lt;E;PRINT MID(2,E);
7 FOR A=2 TO E+1:IF MID(A,2)&lt;>Q$;IF MID(A,2)&lt;>T$ THEN 9
8 IF D=0;$=MID(1,A-1)+U$+MID(A+2)
9 IF 0&lt;=D;IF MID(A,1)=K$;GOSUB 5:GOTO 6
10 NEXT A:FOR A=2 TO E+1:IF MID(A,2)="88";D=D+1:GOSUB 3:NEXT A
11 IF I&lt;>0;GOSUB 5:GOTO 6
12 NEXT A:F=F-D:D=RAN#*3:IF 4&lt;E;D=RAN#*2
13 MODE 4+D:FOR A=10 TO E STEP -1:FOR B=F TO 9:IF KEY="4";G=G+9-12*SGN G
14 PRINT CSR A;O$(C+G);I$;:IF KEY&lt;>"6";NEXT B
15 I$=K$:NEXT A:$=MID(1,E+1)+O$(C+G)+M$:C=INT D:D=-1:IF E&lt;11 THEN 6
16 PRINT :PRINT J;"Pts"

変数表

変数	ブロック落下処理の内容(12～15行)	ブロック破裂処理の内容(3～12行)
`A`	`FOR NEXT`
`B`	`FOR NEXT`
`C`	ブロック
`D`	NEXT ブロック	連鎖数
`E`	隙間を含むブロックの高さ
`F`	落下速度
`G`	ブロックの角度
`H$`	=`""`
`I(I$)`	=`""`, `" "`	5行目では、0: `" "` を削除、3:`88` が破裂した
`J`	得点
`K$`	=`" "`
`L$~Z$`	破裂キャラクタ、ブロックキャラクタ

最後に

最終版っぽい手書きのリストには案の定バグがありました。怒涛の勢いでプレ企画用に7本、メインの新作ゲーム1本を用意している中でのデバッグは肝を冷やしましたよ。

そして、なむさん、ありがとうございます。

次回は第五弾「544ステップに詰め込め！ZERO のノーマル PB-100 対応に挑んだ者たちの軌跡」です。お楽しみに！

追記・2実装競演の感想戦

思いもよらず2実装が出そろうこととなったプレ企画第四弾は楽しんでいただけましたか？

ぽあぽあでは最初の破裂の後に、互い違いになっている泡(o°, °o)が 8 になり、隙間が詰まり、更に破裂をする。と複数の処理が続きます。この部分を高速に実装することが、ポコポコという小気味よさを生み出す為に重要と考えています。

門真なむ版は予想通り、高速な実装を披露してくださいました。

僕は本企画の前日になむ氏がぼかして公開していたリストの行数から、ステップ数については僕の実装に分があるだろう、と考えていました。しかし動作速度の差が如実に示されると、そっと CLEAR して明日は門真版を入れて学校に行こうと思いました。

門真なむ氏からは「連鎖がより自然な動きになっている感じですね。ルールを咀嚼してまとめ直したといいますか。」と頂きました。そこを拾って頂いてありがとうございます。新規性はちょっと示すことができました、と胸を撫でおろします。

門真氏のリストを拝見していくと、本作でも文字列の不等式が使われています。この理解が曖昧な僕はアワワとなります。この部分も学んでいきたい点です。

門真なむさんは平日にも関わらず、原作に寄せるブラッシュアップや実装ミスの修正と追い込みをして、更にはアレンジ版まで併せて公開してくださいました。大変ありがとうございました。それにしても開発が速い…！

20周年プレ企画第三弾！1行落ちモノゲームの金字塔、Mr.Tの成立経緯について

PBロッキー — Thu, 13 Apr 2023 11:18:00 GMT

この記事は20周年プレ企画第三弾です。第二弾では「逃走入力式オートバトル～PB-100用のミニマムなRPGの戦闘システム～」を公開しました。

4月18日20時18分の20周年記念日の前夜まで、計7回に渡って記事やバージョンアップを用意しています。お楽しみに！

本件に関する記憶細胞が抹消される前に、ここに記録しておきます。開発時のメモ等でさらに詳細が判明したら追記していきます。

ところで、この記事の公開作業をしながら録画した「水星の魔女 Season2 #13」をようやく観ています。おかげ様で、20周年に向けてそのくらい忙しくさせて頂いております。ってどのくらいやねん!?

K君のアイデアで連鎖を実現

「ぷよぷよ」メガドライブ版 1992年

1行落ちモノゲームの金字塔「Mr.T」へと至る道は、中学～高校時代の友人のK君に「パニッカーST」(滝本飛沫, ポケコンジャーナル 1995年3月号)を見せたことから始まります。彼は僕に影響されてポケコンを購入し PC-E650 ユーザーにもなってくれました。

このK君の通学路にはゲームセンターがあり、彼はよく利用していたようです。もちろんそこは生徒指導の教師も出入りし、優等生に属する彼からは教師達をいなしていた話を聞いた気がします。ちなみにこのゲーセンは既に閉店しています。

さて、そこで一世を風靡していた落ちモノの傑作「ぷよぷよ」の連鎖をパニッカーSTに取り入れようと、K君が「特殊ブロック」を考案してくれたのでした。

これを実装して画面全てを一挙に消す連鎖が出来るようになりました。しかしこの時点では、元作品のパニッカーSTのシンプルな美しさに比して、特殊ブロックには無理やり感も否めませんでした。

消えすぎる問題

その後にこの追加ルールの致命的な欠点に気付くことになります。一切キー操作をしないで画面を眺めていたのですが、ブロックが消え続けてゲームが終わらなかったのです！消える圧力が強すぎるのでした。

そこでまずは、同じ方向のブロックの出現を辞めました。このブロックは積むと確実に消滅します。そして最上段のブロックによっては3つのブロックが一挙に消えます。

このブロックは場に積もるブロックを偶数個から奇数個へと切り替える点などゲームに興味深い作用を及ぼしています。しかし、Mr.T では一旦これを辞めることにしました。

パニッカーSTの、同じ方向のブロックによる3つ同時消し、場のブロックの偶数個と奇数個の切り替えは、床がせりあがるシステムと相まってゲーム展開に変化を生んでいます。せり上がる床という鉱脈を探求する作品が続く願いを込めて、読者諸賢の注意を喚起します。

依然として消えすぎる問題

それでも依然としてブロックを消す圧力の方が強い。そこで発見したのが、特殊ブロックが画面に残り矢印ブロックでは消すことのできない「お邪魔ブロック」になること。このお邪魔ブロックはお邪魔ブロックと並ぶことで消える。先に述べた「無理やり感」は、特殊ブロックがノーコストで消えていた点にあったのかもしれません。

お邪魔ブロックを絡ませることで最も高ランクな連鎖が可能になる。ブロックを高く積み上げたところでお邪魔ブロックが残ってしまうと一挙に窮地になる、スリリングなゲームになりました。これは我ながら会心の変更でした。

しかもお邪魔ブロックを消すコードは、矢印ブロックを消す条件式をそのまま使えます。

さて、お邪魔ブロックはルールは異なりますが、ぷよぷよの対戦プレイでも登場します。ミニマムなマシンでありながら現代的な落ちモノの要素をさらに取り込む事が出来たのでした。

最後に安い手を狙い続ければ、お邪魔ブロックも苦にならない点は、咳めぐ氏が「リアルタイムレベルアップシステム」と命名してくれた、システムでハイスコアを意味のあるものにしました。これはやや無理やり感がありますが fps を出せない PB-100 では仕方が無いですね。

パソコン通信での公開

消えすぎる問題を解決した後に、ポケット通信で公開したのが高校三年生の1月(1998年)でした。おそらくK君にはこの変更を見せていないと思います。高校三年の3学期はほとんど学校に行くことも無く、卒業を迎えたからです。

滝本飛沫氏によって続けられたアクションパズルへのアプローチと、ぷよぷよに出会ったK君の連鎖への情熱と、僕の追い込みによって、1行落ちモノゲームの金字塔、Mr.T は完成を見たのでした。

パソコン通信での公開については「ポケット通信のおもひで」で記事にしています。ぷよぷよについては「enchant.jsを使ったHTML5用落ちものパズル、Saturday Night Aventureをリリースしました」でも言及しています。

さて、落ちモノ繋がりで明日はいよいよ「ぽあぽあ 544ステップ版」の公開です！お楽しみに！

20周年プレ企画第二弾！逃走入力式オートバトル～PB-100用のミニマムなRPGの戦闘システム～

PBロッキー — Wed, 12 Apr 2023 11:18:00 GMT

この記事は20周年プレ企画第二弾です。第一弾では「トロネコの大冒険4」の19年ぶりのバージョンアップを公開しました。

4月18日20時18分の20周年記念日の前夜まで、計7回に渡って記事やバージョンアップを用意しています。お楽しみに！

PB-100 シリーズの為のタイニー RPG 制作ノート

『RPG製作ノート MAKING OF MADARA』（1990年, 角川書店）RPG のプログラミングがしたくて買ったけどそういう書籍では無かった…

PB-100 におけるタイニーRPGは、544ステップの中に、戦闘と成長、世界の探索と謎解きといった RPG の諸要素をなんとか入れ込みつつ、加えて作者のこだわりを出せるかに注目したい、魅力的なジャンルと考えています。

拙作「トロネコの大冒険4」では、3D 表現と数式で生成した広大なダンジョンをアピールポイントにしました。数式で生成する強みを活かした裏面もこだわったポイントです。

このあおりを受けたのが、戦闘と謎解きです。とはいえ、他のタイニー RPG を見渡しても、それなりの謎解き要素を入れ込めた作品は無いので、この点は今後の課題として一旦脇に置きます。

また、謎解きのみのアドベンチャーでしたら「Is this love?」(たかじょゆうき。ポケコンジャーナル 1995年8月号)という優れた作品が存在します。

さて、あおりを受けた戦闘についてです。

ミニマムな戦闘を実装する

トロネコの大冒険4では、戦闘は申し訳程度と諦めて、どこまでも省ステップなものに仕上げることに注力しました。

そこで生まれたのが、プレイヤーと敵が交互に攻撃を行うのではなく、ランダムで攻撃側が決まるシステム。これは「BATTLE GIRL」(たかじょゆうき。ポケコンジャーナル 1992年10月号)で採用されていたものを参考にしました。

更にコマンド入力を廃して逃げたくなったらキーを押す、というオート戦闘にしました。コマンド入力を廃したのは大きく省ステップに貢献しました。

ちなみに「BATTLE GIRL」では、戦闘にも作者のこだわりがみられ、肉体攻撃と精神攻撃と逃走から選択するシステムでした。

副次的に、戦闘にスピード感が生まれ、よりスリリングになった点、どちらかの連続攻撃が発生して変化がついた点は、大変にお得でした。

このシステムはプチRPG「ムシハカセ」そして4月18日に公開する新作「5行 RPG(仮)」でも採用していて、僕の RPG 作品の定番となりつつあります。

5行 RPG でのブレイクスルー

更に5行 RPG では、逃走入力式オートバトルを極めて短く記述するブレイクスルーに遭遇しました。そもそもこのブレイクスルーが無ければ5行に詰め込んで作品を完成させることが出来なかったのでありますが。

ブレイクスルーで得た知見を活用することで、より多くのこだわりを盛り込んだタイニー RPG 作品が可能になりました。しつこく掘り下げ続けることで、2003年のトロネコの大冒険4発表時には思いもよらなかった地点まで辿りつくことが出来たと思います。

『ムシハカセ』のバージョンアップの過程で、勝利、敗北、逃走成功を一つの条件式で判定するコード等々、ヤバいブレイクスルーが幾つもあった。
ここで得られた知見を『トロネコの大冒険』につぎ込めば、タイニー RPG が次のステージに進む手応えが確かにある。

コード例による確認

それでは、コード例を用いて省ステップを確認してみます。

変数表
変数	内容
A	プレイヤーの攻撃力
B	敵の攻撃力
H	敵のHP
I	プレイヤーのHP
J	T=2の時に破壊される
T	ターン

ターン制と非ターン制

次の通り、交互の攻撃(ターン制)よりも常にランダムな攻撃の方が、若干のステップ(;T=1-T: の分)が稼げます。

' 交互に攻撃する
10 T=INT( RAN#*2
20 H(T)=H(T)-INT RAN#*A(T)
  :PRINT H;" vs";I;
  :IF 0&lt;H(T);T=1-T:GOTO 20

' ランダムで攻撃する
10 T=INT( RAN#*2
20 H(T)=H(T)-INT RAN#*A(T)
  :PRINT H;" vs";I;
  :IF 0&lt;H(T) THEN 10

コマンド入力式と逃走入力式オートバトル

最初のリストは 0 で逃走を試みる、1 で戦闘を継続する、サンプルです。

もうひとつのリストは、オートバトルで 0 で逃走を試みるサンプルです。ウェイト処理を講じなくてはいけませんが、逃走入力式オートバトルの方が短くなりそうです。

' コマンド入力式（ランダムで攻撃する）
10 T=2
20 H(T)=H(T)-INT( RAN#*A(T)
  :PRINT H;" vs";I;
  :T=RAN#*2
30 IF KEY="0";IF T&lt;1;PRINT "ESC":GOTO 99
40 IF KEY="1" THEN 20
50 GOTO 30

' 逃走入力式オートバトル（ランダムで攻撃する）
10 T=2
20 H(T)=H(T)-INT( RAN#*A(T)
  :PRINT H;" vs";I;
  :T=INT( RAN#*2
30 IF KEY="0";IF T&lt;1;PRINT "ESC":GOTO 99
40 GOTO 20

ちょっとした工夫点

トロネコの大冒険4では、上記コード例のようにプレイヤーと敵で50%づつの確率ではなく、若干、プレイヤーの攻撃確率を上げています。あからさまでない程度に攻撃確率を多くした方がユーザーの爽快感に良いだろうと考えました。

いずれは、敵毎に攻撃の頻度や、ダメージのバラつき方に変化を付けて、個性を持たせた作品を作れたら、と思います。

明日公開の第三弾は落ちモノゲーム「Mr.T」の制作秘話です。お楽しみに！

20周年プレ企画第一弾！トロネコの大冒険4をバージョンアップ、ホームページを更新しました

PBロッキー — Tue, 11 Apr 2023 11:20:00 GMT

この記事は20周年プレ企画第一弾のご案内です。4月18日20時18分の20周年の前夜まで、計7回に渡って記事やバージョンアップを用意しています。お楽しみに！

ホームページの更新内容

20周年プレ企画第一弾として「トロネコの大冒険4」を19年振りにバージョンアップしました。併せて以前のバージョンのプログラムリストも資料として順次公開していきます。
プログラムポシェット1985年 Vol.1「TENNIS GAME」の掲載ページを修正しました。門真なむ氏に情報提供いただきました。この度のご連絡、大変ありがとうございます。
ライブラリの累積的な修正を適用しました。大きなところでは IE5.5～IE11 で .pbList が崩れる問題が修正されています。この問題は昨年から発生していたようです。hamura.css は引き続き Internet Explorer 5以降のサポートを続けて参ります！
プロフィールページの西暦の誤りを修正しました。

トロネコの大冒険4の変更点

1. 白亜の扉の表示を改善し、迷宮が広くなる

白亜の扉を表示する際に、一瞬壁が表示される問題を修正しました。併せて白亜の扉があった場所も歩けるようになりました。これによってナント2%程度、迷宮が広くなりました。

2. 移動関連の最適化と省ステップ化

前方が壁の時に前進しようとしても再描画処理が発生しないようになりました。

方向転換のプログラムをよりステップ数の少ないものに変更しました。この変更で空きステップ数は11ステップになった上、PB-100 初期出荷バージョンの SGN に関するバグへの対策が不要になりました。この対策には2ステップを要していましたが、これ以降は残り11ステップをまるまる機能追加に使うことが出来ます。

この変更の一部には、門真なむ氏が示してくださったものを採用させて頂きました。更になむ氏は、数値変数の循環に関する包括的な調査を公開されています。

11ステップの余裕があるということは、敵の攻撃頻度などに個性をつけたり、裏面ではレベルアップを止めてラスボスに比してトロネコが強くなりすぎないようにする、等の改善が可能です。

とはいえ、今はこの検討よりも4月18日20時18分に公開する「5行 RPG」の成果を取り入れたトロネコシリーズの新作に取り組みたい気分です。

旧バージョン公開ページの追加とバージョン表記の変更

今回の更新から、旧バージョンも公開していきます。

併せてナンバリングを次の通り変更します。バージョン表記はこれまで殆ど使ってこなかったので、影響は無いだろうと思います。

変更は現在一般的に使われていて、PB-100 用 CSS ライブラリプロジェクト「hamura.css」でも踏襲しているナンバリングのポリシーに一致させる為です。

機能追加と仕様変更ではマイナーバージョンを、バグの修正ではパッチバージョンを増やします。

公開日	以前のバージョン番号	新しいバージョン番号
2003年6月8日	トロネコの大冒険4	トロネコの大冒険4 Version 1.0.0
2003年8月9日	トロネコの大冒険4 Ver.2.0	トロネコの大冒険4 Version 1.1.0
2004年2月15日	トロネコの大冒険4 Ver.3.0	トロネコの大冒険4 Version 1.2.0
2004年4月21日	トロネコの大冒険4 Ver.3.1	トロネコの大冒険4 Version 1.2.1
2023年4月11日		トロネコの大冒険4 Version 1.3.0

プレ企画第二弾「20周年プレ企画第二弾！逃走入力式オートバトル～PB-100用のミニマムなRPGの戦闘システム～」に続きます。

20周年記念企画のお知らせ

PBロッキー — Tue, 11 Apr 2023 11:17:00 GMT

おかげさまでPB-100の宇宙は、この4月18日で20周年を迎えます。これを記念して新作ゲーム作品を4月18日20時18分に公開致します。2006年公開の「ムシハカセ」から数えてもなんと17年振りとなりましたが、ブランクを感じさせない自信作です、ご期待ください！

更にこのプレ企画として、死蔵していたブログ記事や既存作品のアップデートを毎日公開していきます。PB-100の宇宙による一連の催しをどうぞエンジョイください！

スケジュール

日時	催し
4月11日	プレ企画第一弾「トロネコの大冒険4」が19年ぶりにアップデート！
4月12日	プレ企画第二弾ブログ記事「タイニー RPG 制作ノート(仮)」
4月13日	プレ企画第三弾ブログ記事「Mr.T への道(仮)」
4月14日	プレ企画第四弾「ぽあぽあ 544ステップ版」公開！
4月15日	プレ企画第五弾ブログ記事「ZERO に挑んだプログラマー達の軌跡(仮)」
4月16日	プレ企画第六弾ブログ記事「ムシハカセに頂戴した反響を振り返る(仮)」
4月17日	プレ企画第七弾「Black♥Jack」が19年ぶりにアップデート！
4月18日 20時18分くらい	PBロッキーによる17年ぶりの新作ゲーム「5行 RPG(仮)」を公開！

周年記念の楽屋裏

今まで周年記念というものを一度もしたことが無かった当ホームページです。この20周年も今年の2月までは特に考えていませんでした。そんな中、この3月に長年取り組んできた5行 RPG が完成してくれた為、翌月の20周年に公開することにしました。

15年目に完成の可能性が芽生えるもそこから1年半進捗のない開発

5行 RPG は前作の6行 RPG ムシハカセを発表した2006年から取り組んでいたテーマです。そして2006年の時点では不可能と考えていました。

しかし思い出してはアプローチを続け、可能性が見えたのが2021年の10月です。この時点では RPG の諸要素をなんとか5行に押し込むことが出来た、という段階でした。

6 LINE RPG「ムシハカセ」(2006年)に比して、ゲーム作品としての「情念」を込める事が出来なかったので、5 LINE RPG は、将来の作品に向けてのリファレンス実装的な意義に留まってしまっている点は否めない。

技術サンプルとしては充分に意義のあるものでしたが、ここから「作品」として公開できるものにする為に粘り続けることとなりました。2021年11月から2023年の3月は、全くコードが動かないまま休日が溶けた経験を何度も味わった、苦しい日々でした。

この3月24日に、ずっと未解決だった「チートしないと敵に勝てない問題」を解決し、ボスキャラに特別な仕掛けを追加できました。

2021年11月に諦めた時から1つの問題を解決し、1つのギミックを追加し、1つを諦めた。まぁこんなところでしょう。僕、よく頑張った。

敵が強すぎてチートしないとゲームが進行しない問題を解決
ボスにギミックを追加
敵を倒したときに * を表示するのを諦める

5行プログラムでも最高峰のゲーム体験を目指す

とは言え、5行は5行です。PB-100 に手入力するのに10分を要するとして、この10分の元が取れるだけの「オモシロ」を作品は提供できるのか？

この点については2021年から温めてきたアイデアを用意してあります。どうぞ安心して4月18日をお待ちください。PB-100 史上最高峰のゲーム体験を2023年に提供する、その仕込みはだいたい終えています！

2021年から「このプログラムリストを発表できないまま新型感染症で逝ってしまったら口惜しい」とはずっと思ってきました。おかげさまでようやくその肩の荷が降ります。

それではどうぞお楽しみに！

PBロッキーさんのコメント @ PB-100の宇宙

PBロッキー — Fri, 03 Mar 2023 04:55:04 GMT

たけいちさん、15年と8か月振りのご訪問、ありがとうございます！

プログラムポシェット掲載に際してのこもごもの証言もありがとうございます。採用されたら証明写真を撮影して郵送するって、当時の雑誌編集の悠長さはナイスですね。

ご紹介いただいた「まんだらけ」のページを拝見いたしました。マルっと一作品を載せてしまっていて、ありがたいやらかんやら… ( ^-^;)

https://pb-100.ga/club/bbs/teacup/127.html

たけいちさんのコメント @ PB-100の宇宙

PBロッキー — Wed, 01 Mar 2023 23:21:08 GMT

PBロッキーさん、皆さんこんにちは。2007年 6月28日にteacup掲示板にご挨拶させていただいた、たけいちです。さて、皆さん時間があればgoogleの画像検索で「プログラムポシェットvol3 まんだらけ」で検索してみてください。まんだらけ通販のプログラムポシェット（売り切れ）のページが出てくると思います。その右側の写真にPB-100の記事があると思うのですが、それを投稿したのあたしなんです。それが言いたくてやってきました！！ではでは。

たけいちさんのコメント @ PB-100の宇宙

PBロッキー — Tue, 28 Feb 2023 10:04:39 GMT

PBロッキーさん、みなさん、こんにちは、2007年 6月28日に挨拶させていただいた、たけいちです。お暇な方、googleの画像検索で、「プログラムポシェット　vol3 まんだらけ」で検索してみてください。まんだらけ通販の売り切れたプログラムポシェットの写真が2枚出てくると思うのです。そのうちの右側に「チャンピオンゴルフ」という記事があるかと思いますが、これを投稿したのはあたしなんです。それが言いたくてやってきました。すみません。
プログラムポシェットは「変数リスト」や「プログラムの説明」にもスペースを割いていていい雑誌でした。採用になったら写真を送らなきゃいけなくて、証明写真を撮りに行ったのを覚えています。

2023年年始の更新情報、NUAO氏がホームページを開設、ムシハカセがPC-E200シリーズに移植されました！

PBロッキー — Wed, 04 Jan 2023 08:51:00 GMT

Android 2.2の標準ブラウザで CSS と Web フォントが読み込まれない問題を修正しました。(2023/01/09)

新年あけましておめでとうございます。

2022年は、銃殺された元首相らと統一教会との癒着の報道が地上波放送を賑わすという、正に歴史の転換点という言葉がピッタリの年でした。一方でこの間も、新型感染症は収束せず、只今は第8波が猛威を振るっています。

まずは閲覧者の皆様のこの一年のご健康を祈念させていただきます。

更新情報

さて、最後にホームページを更新した10月17日からこれまでの変更を公開しましたのでご報告いたします。

「トロネコの大冒険4」に変数の値の遷移の表を追記しました。
「SQUARE」の技術情報をブラッシュアップしています。
作者名の誤植を1件修正しました。渋川高校P夏氏より掲示板にご連絡を頂きました。ありがとうございます。
NUAO 氏のホームページ「NUAO PB-100」へのリンクを追加しました。
「詳しいWebブラウザのサポート状況」に PlayStation Vita, PlayStation 4を追加しました。どちらも良好に閲覧できます。
長らく動いていなかったブログの「最近更新した記事」が動作するようになっています。
ここ迄の hamura.css と Web 文書用ライブラリの累積的な更新を適用しています。目につきやすいところでは、表組のヘッダーがスクロールに追従するようになりました。
サーバ側のコードを修正しました。インスタンスが落ちている状態からのレスポンスが若干改善している筈です。技術的には、同期で書いてしまっている部分を非同期に改めました。

お知らせ

新たなPB-100専門 Web サイトが誕生しました

当サイトに「rogue」「一行将棋」「ハノイの塔 on PB-100」を寄稿された NUAO 氏が PB-100 専門の Web サイト「NUAO PB-100」を開設されました。現在は9本のオリジナルゲームと記事を公開しています。当サイトともども巡回コースに入れましょう。

あの「ムシハカセ」が他機種に移植されました

「PB-100スピリッツ8」(咳めぐ氏)より

PB-100 の名作ゲームをシャープのポケットコンピュータ PC-E200/G800 シリーズへ移植するゲームパック企画「PB-100スピリッツ8」に「6行 RPG ムシハカセ」を収録頂きました。

元作品を踏襲しつつ、画面表示が洗練されたり、敵の強さと経験値を家からの距離で変化させています。制限の厳しさから誤魔化した部分をバッチリ補ってくださったパワーアップ版です。

私のゲーム作品からは既に「Mr.T」を「PB-100スピリッツ3」に収録していただいております。

さて、ホームページを開設して20周年となる年がやって参りました。周年記念のようなことは今まで一切できていなかったのですが。今年くらいは、という思いもあります。

はてさて、本年もどうぞPB-100の宇宙をよろしくお願い申し上げます。

PBロッキーさんのコメント @ PB-100の宇宙

PBロッキー — Tue, 15 Nov 2022 02:55:43 GMT

お久しぶりでございます。

渋川高校P夏さんからは、ホームページ発足当初にコメントを頂戴しました。その際の「また、来ます。」から18年8か月を経て、またいらっしゃってくださりました m(_ _)m

マイコンBASICマガジン誌による誤植の件、承知いたしました。次回の更新で修正致します。

この度のご連絡、大変ありがとうございます！

http://pb-100.ga/@geoboard/10.html

ナイコンさんのコメント @ PB-100の宇宙

PBロッキー — Sun, 13 Nov 2022 00:05:10 GMT

はじめまして。
３０年以上前の思い出を振り返りながらHP拝見いたしました。
PBプログラマー紳士録はかなり前から認識はありましたが、雰囲気がだいぶ大人な感じになっていて
五十路過ぎの自分が閲覧していても「イタくない」様相かと。
　
　さて、本題です。
紳士録内にある
「渋川高校 P夏」と「洗川高校P夏」とは同一人物です。
なんせ本人が言うのだから間違いありません。
もしかしたらお気づきの方もいるかと思いますが、
実はベーマガ89年11月号に掲載されたときに、雑誌の目次では「洗川高校・・・」の
名前で記載されていたのですが、実際のプログラムページでは正しく「渋川高校・・・」
になっている、という誤植でした。実際に洗川高校なんて存在しませんし。

　「渋川高校P夏」のPBプログラム雑誌掲載本数は３本なんだぞ！

と言いたくて、投稿いたしました。
今でも愛機PB-110は私の机の中で眠っております。
もう液晶が液漏れしていて電卓としても使えませんが。

ゲームライブラリに寄稿作品『1行将棋』を公開しました

PBロッキー — Fri, 14 Oct 2022 12:01:00 GMT

『ハノイの塔』のプログラムを差し替えて、大幅な加筆を行いました。『1行将棋』のプログラムを改善しました。『SQUARE』の技術解説に、ロイヤルストレートの判定についてと本作に固有の事情を追記しました。(2022/10/17)

"1行将棋"の Google 検索の結果

『rogue』に続く NUAO 氏の寄稿ゲーム作品『1行将棋』を公開しました。併せて BASIC では珍しい再起呼び出しを使った『ハノイの塔』を解くプログラムを公開しました。

本告知記事の執筆にあたって1行将棋、1次元将棋を探してみましたが、大学のオープンカレッジでの例が見つかるのみで、珍しい題材ということが分かります。2次元の盤上で競われる将棋を1次元にしたらどうなるか？是非お手元の PB-100 を起動してご確認ください！

この他にも発表済の記事に追記や推敲を行っています。

『rogue』にサブルーチンコールの解説を追記。門真なむ氏作『rogue in PB』へのリンクを追記。
『トロネコの大冒険4 > 技術情報』と『同 > なんとなくフラクタル』、『たかじょゆうき。ZEROの衝撃 > 1993年、年の瀬 ― PBロッキーを襲った戦慄のビジョン!?』に Twitter で公開済の写真資料を追記。
『square > 技術情報』に正五角形を使ってペア系を判定する図等を追記し推敲を行いました。『同 > 付記』に門真なむ氏作『ヨット』へのリンクを追記。
『トロネコの大冒険4 公式ガイド> 攻略 Q&A』に「Q. 裏面から表面に戻りたい！」を追記。

上記の他にも、Web サイト全体に渡って表記のブレとマークアップを修正し、ブラウザの互換性情報について修正し、ライブラリの累積的な変更を適用しています。

ではでは、今後ともどうぞよろしくお願いします。皆様におかれましては第8波を逃れて健やかな日々を送られますよう！

ゲームライブラリに寄稿作品『rogue』を公開しました

PBロッキー — Fri, 20 May 2022 11:58:00 GMT

Pocket BASIC 用ゲーム『rogue』とnethack.alt.org

『特殊部隊突入シュミレーションゲーム SWAT』に次いで16年ぶり2作目の寄稿ゲーム作品となる『rogue』を公開しました。NUAO 氏によるローグライクなターン制 RPG です。

この他に、記事データベース > その他の関連書籍に追記し、ここ迄のライブラリの累積的な更新を適用し、いくつかのページでマークアップの微修正を行っています。

今後ともどうぞよろしくお願いいたします。

PBロッキーさんのコメント @ PB-100の宇宙

PBロッキー — Wed, 11 May 2022 05:36:08 GMT

> 16: PBロッキー 2022年5月11日 7:35
> 早速のご連絡ありがとうございます。それでは、次のメールアドレスまで空メールをお願いいたします。ボットにメールアドレスを収集されないようにアットマークを書き替えています。適宜に修正の後に送信ください。 xxxxxx[ a ]gmail.com

NUAO さんと連絡が取れたので、直前のコメントは削除いたします。

PBロッキーさんのコメント @ PB-100の宇宙

PBロッキー — Tue, 10 May 2022 22:35:57 GMT

このコメントはブログの管理者によって削除されました。

NUAO さんのコメント @ PB-100の宇宙

PBロッキー — Tue, 10 May 2022 22:16:05 GMT

有り難うございます。あいにくtwitterは使用しておりません。ご案内宜しくお願いします。NUAO

PBロッキーさんのコメント @ PB-100の宇宙

PBロッキー — Tue, 10 May 2022 12:38:17 GMT

NUAO さん、ご連絡ありがとうございます。現在はメアドを非公開で Twitter のダイレクトメールでご案内いさせていただきます。もし、NURO さんが Twitter を利用していない場合、メールなどその他の手段をご案内致します。どうぞよろしくお願いいたします。

ナイコンさんのコメント @ PB-100の宇宙

PBロッキー — Tue, 10 May 2022 07:22:06 GMT

いくつかPB-100の自作ゲームを投稿したいのですが、可能でしょうか？ NUAO

PB-100の宇宙の更新と作業中のコンテンツの備忘録

PBロッキー — Thu, 05 May 2022 12:06:00 GMT

「水の要塞」のイラストについて Twitter へのリンクを追加しました。(2023/05/23)

公開したコンテンツへのリンクを追記しました。(2023/05/02, 2023/04/16)

「7. Mr.T のブロックを消すアルゴリズムの検討」を追記。(2023/04/04)

構文エラーで更新フィードが提供されなかった問題の修正。(2022/05/17)

作業中のコンテンツに、門真なむ版 ZERO の解析記事、ぽあぽあ544ステップ版、Tiny RPG 縦断レビューを追記しました。(2022/05/12)

『I/O別冊 Computer fan SPECIAL 2』掲載の2作品について追記しました。(2022/05/11)

pbChr.css で H が R と表示されていた問題を修正しました。(2022/05/07)

コピーライト表記に西暦を追加しました。やや老舗です、ということを推していきます。年に一度の数字の更新が面倒でずっと外していました。(2022/05/06)

ドメインの更新が近づいてきましたので、例年、これと同時期に行っているウェブサイトの更新を実施しました。今回も地味な更新に留まってしまっています。

主な更新ポイント

動かなくなっていたホームページ部分の検索機能の復旧
依存するウェブ文書ライブラリ及び hamura.css の累積的な更新の適用
誤記の修正、表記の統一、対応ブラウザに関する情報を更新
CSS, Javascript, HTML の各ファイルサイズの削減
記事データベースに『I/O別冊 Computer fan SPECIAL 2』を追記しました(2022/05/11)
更新フィードが提供されない問題の修正(2022/05/17)

印刷時のレイアウトの向上や、強制カラーモード(ハイコントラストモード)のサポートの向上、CSS と Javascript のファイルサイズの削減。ブログの各ページで 10KB 程度の HTML の削減等、さりげない感じで閲覧性が向上しています。

前回の更新から hamura.css のマルチブラウザはサポート範囲を大きく拡大しています。なんと Netscape Navigator 6で一定の閲覧性を実現するまでに成長したことは、しっかり宣伝させてください。

作業中のコンテンツについて

Twitter 等で制作中のアナウンスをしながらリリース迄持っていけていない、新規コンテンツについてご紹介しておきます。自戒を込めて。

アクセスカウンター付きの Web 1.0風トップページ
記事データベースの大幅更新
~~5行 RPG~~ お陰様で公開しました
~~門真なむ版 ZERO の解析記事~~ お陰様で公開しました
~~ぽあぽあ544ステップ版~~ お陰様で公開しました
Tiny RPG 縦断レビュー
Mr.T のブロックを消すアルゴリズムの検討

1. アクセスカウンター付きのWeb 1.0風トップページ

「ホームページトップの Web 1.0 化、楽しい…」2021年9月29日のツイート

トップページの Web 1.0化と Yahoo!ジオシティーズ時代のアクセスカウンターの復活に向けて開発中です。

いい塩梅の Web 1.0感を出すために、フォント画像を作ったところで足踏みしています。

2. 記事データベースの大幅更新

「データベース用のウェブデザインの検討メモ。」2022年5月5日のツイート

PB-100関連記事の情報を json に正規化して蓄えて、ここからウェブページを書きだす体制に移行中です。

現在もウェブ上で続く、新作ゲームやレビュー等の創作活動へのリンクを収録しやすい体制を目指します。

新規に作成するデザインが数点あって、足踏みしています。

この体制が出来た後には、雑誌掲載のバグ情報の修正プログラム部分については全て転載したいと考えています。(2022/05/12 追記)

3. 5行 RPG

「90年代風イメージイラスト」2021年10月25日のツイート

2006年の『6行 RPG ムシハカセ』の制作中から目指していた5行 RPG に数年ぶりに取り組んでいます。

チートをしないと一番弱い敵に勝つことが出来ない問題が解決できず、ボスキャラにギミックを仕込みたいという欲求も出てきて、暗礁に乗り上げています。

4. 門真なむ版ZEROの解析記事

「両プログラムリストの、同じまたは等価のコードをオレンジでマーカーした上で、両者で異なる実装を比較していきました。」2021年9月16日のツイート

1992年に公開された PB-110 用固定出題型パズルゲーム『ZERO』(たかじょゆうき。ポケコンジャーナル 1992年12月号)は、2020年に門真なむ氏の手によってノーマル PB-100 対応版がリリースされました。同様の改良に挑んで叶わなかった僕にとっては衝撃でした。

門真なむ氏の戦略の成功と僕の失敗について、記事を用意していますが5行 RPG のリリースに併せて波状的にリリースしたい、と考えていていましてまだ溜め込んでいます。

5. ぽあぽあ544ステップ版

「消えかけた感熱紙の反射の加減を視たりしつつ、コードを打ち起こしてみました」2021年9月17日のツイート

ポケコンジャーナル1996年4月号に掲載された『ぽあぽあ』(小山田正人氏)を、僕が改良したいわゆる『544ステップ版』につきまして、プログラムリストの公開の要望を頂いております。

プログラムリストは感熱紙と手書きのリストが手元に残っていますが、状態は大変に悪いです。感熱紙は掠れていたり、パンチ孔に重なっていたりと復元の困難さに嘆息していたところ、手書き版の方が実装が進んでいる、新しいバージョンのようでした。こちらを元に公開に向けて頑張ります。

それにしても、ゲームシステム的に袋小路と判断したプログラムリストの扱いの雑さたるや、やや反省します。

6. TinyRPG縦断レビュー

PBロッキーの描いたタイニー RPG のひとつ『水の要塞』(滝本飛沫, マイコン BASIC マガジン 1988年9月号)のイメージイラスト。2022年になっても移植作品がリリースされる人気作品。作者によるイメージイラストとマイコン BASIC マガジンの用意したカバーイラストはツイートを参照。

和製 RPG ブームを背景に、あふれ出るイマジネーションをノーマル PB-100 にブチ込んだ、タイニー RPG に分類される作品群について紹介していくシリーズ記事『TinyRPG縦断レビュー』が止ってしまっていてごめんなさい。

pbLCD.css のエディタが出来たら再開しようと考えていたところ、このザマです。

因みに hamura.css は、pbLCD のエディタが出来た段階で Version 1として推していきたいと思います。

7. Mr.T のブロックを消すアルゴリズムの検討

HTML5 版の Mr.T(SNA) のコードを見直して enchant.js から自作ゲームエンジンへの移植中。
先に言及しているアルゴリズムに誤りがある事に気付く。
複数の消える組がある場合「消えることで新たに消える組の生まれる」組から削除する。
つまり「消える組を挟むブロックが同じ」組から削除する。

それでは2022年もよろしくお願いいたします。皆様のご健康と充実したポケコンライフを祈念いたします。

hamura.cssのマルチブラウザ技術、pbLCD.cssとpbChr.css, pbList.cssのフォールバックの画像置換と強制カラーモード

PBロッキー — Mon, 25 Apr 2022 08:51:00 GMT

hamura.css > issue 22, hamura.css > issue 23 での解決事項を記事に追記しています。(2022/04/27)

本記事の内容を一般化して述べると、フォント画像やフラットデザインのアイコン等の単色画像への画像置換を大々的に行っているウェブページの強制カラーモード対応の実際について、です。ソースコードと併せて読み進めてみてください。

Firefox 3.1b3(Gecko 1.9.1), Windows の強制カラーモードでの表示

hamura.css は、各ブラウザエンジンとバージョンの実装状況に合せて異なるプロパティと技術を駆使して、同等の表現を実現します。

このプロパティと技術の取捨選択が複雑多岐になる為、この機会にガッツリと文書にまとめておきます。

特に画像置換に強制カラーモード(ハイコントラストモード)が絡むと、使用プロパティと技術の選択がシビアでした。なんとかモノになって本当に良かったです。という hamura.css 開発者用の記録です。

はじめに
使用する技術とプロパティ
1. 強制カラーモード(ハイコントラストモード)
2. Gecko の奇妙な挙動への対処
pbLCD.css の絶対配置の図
border-color に transparent を使えないIE6以下用の変更
IE5 の CSS-P とインタラクションの制限

1. はじめに

hamura.css を読み込むことで、PB-100 の LCD を模した画像状のコンテンツ(pbLCD.css)と LCD セグメントを模した画像状のコンテンツ(pbChr.css)を HTML で表現出来ます。

HTML5スタンダード・デザインガイド > コンピュータの入出力内容をマークアップする

また pbList.css では Web フォントに非対応なブラウザに対して pbChr.css と同じ方法で画像フォントでフォールバック表示します。但し、この時に使用するフォント画像は白抜きのマスク画像です。

これらのマークアップは注意深く設計されている為、ツールチップなどの豊かな表現力を備える pbLCD.css でも多重の <div> の入れ子のようなマークアップではありません。一般的なセマンティックなマークアップにだいたいなっています。

1.1. コンピュータの入出力内容のマークアップ

先に挙げた『HTML5スタンダード・デザインガイド』にある通り、hamura.css でも PB-100 の画面のマークアップには <pre><samp> を使っています。

次に示すのは、ターミナル操作と出力のマークアップの例です。

&lt;pre>&lt;samp>PS > &lt;kbd>npm start&lt;/kbd>
> node local-web-server.js

Listening on port 8022&lt;/samp>&lt;/pre>

1.2. CSS によるテキストの画像置換

CSS を使ったテキストの画像置換はロゴ(ロゴタイプ)などに使われる古くからあるテクニックです。hamura.css では pbLCD.css と pbChr.css のキャラクター表示と、pbList.css のフォント画像によるフォールバックで大々的に使っています。

画像置換とは

画像置換とは HTML 内のテキストを非表示にし、その範囲を背景画像へと置き換える CSS の手法です。最近はあまり使われなくなりましたが、以前は SEO 対策として利用されたテクニックです。

CSS による画像置換では主に、content:url か background-image を使います。(この他には特定の状況で mask を使いました。)

なかでも content:url には、ハイコントラストモード時や、印刷時に背景画像を印刷しない設定でもコンテンツが欠落しない利点があります。しかしサポートするのは比較的新しめのブラウザになってしまいます。

画像置換のクロスブラウザに関する情報は『【画像スプライト編】Web文書のグレースフルデグラデーションをムキになってやってみる』にあります。この機会に覚えておきましょう。

1.3. テキストだけの情報提供

多くの機能が実装途中の NetSurf 3.10では CSS を切った方が、むしろコンテンツは欠落しない。

ブラウザが CSS と画像に非対応の場合、テキストでコンテンツが提供されます。これは hamura.css の定義する HTML が、検索ボットやスクリーンリーダーにテキストと適切な HTML タグでコンテンツを伝えることが出来ることでもあります。

多くのブラウザは画像を無効に出来ます。更に Firefox は 表示 > スタイルシート から スタイルシートを使用しない を選択できる為、これらの状況への対応も頭の隅に入れておきます。

2. 使用する技術とプロパティ

ブラウザ	CSS Generated Content	フォント画像ファイル	pbChr		pbLCD			pbList
ブラウザ	CSS Generated Content	フォント画像ファイル	キャラクタ表示	カーソルの点滅	キャラクタ表示	透過	ゴースト	マスク画像ファイル
モダンブラウザ(*1)	◎	x3.gif, x3.svg, x3.anime.svg(*6)	`:after + content:url`	animation gif, CSS Animation(5, 6)	`:after + content:url`	`opacity`	`:before + content:url`	x3mask.png, x3.anime.svg(*6)
IE 9	◎	x3.gif, x3.svg(*6)	`:after + content:url`	animation gif, DHTML(*6)	`:after + content:url`	`opacity`	`:before + content:url`	x3mask.png, x3.svg(*6)
IE 8	〇(*2)	x3_x10.png, x3_csr.gif	`:after + content:url`	animation gif	`:after + content:url`	透過 png	`:before + content:url`	x3mask.png
Opera 9~9.2x	△(*3)	x3.gif	`background-image`	animation gif	`:after + content:url`	`opacity`	`:before + content:url`	x3mask.png
Opera 7.2~8	△(*3)	x3_x10.png, x3_csr.gif	`background-image`	animation gif	`:after + content:url`	透過 png	`:before + content:url`	x3mask.png
Opera 7~7.1	×(*4)	x3_x10.png	`background-image`	DHTML(*7)	`background-image`	透過 png(*11)	DHTML	x3mask.png
Gecko 0.9~1.9.0	×(*4)	x3.gif	`background-image`	animation gif	`background-image`	`-moz-opacity`	DHTML	x3mask.png, x3mask.gecko0.9.1.png(*8)
Gecko ~0.8.1	×(*4)	x3_x10.png, x3_csr.gif	`background-image`	animation gif	`background-image`	透過 png(9, 11)	DHTML	x3mask.png
IE 7	-	x3_x10.png, x3_csr.gif	`background-image`	animation gif	`background-image`	透過 png	DHTML	x3mask.png
IE 5~6	-	x3_x10_8.png, x3_csr.gif	`background-image`	animation gif	`background-image`	疑似透過 png(*10), `-ms-filter`	DHTML	x3mask.png
MacIE 5	-	未実装

モダンブラウザは IE10 以上、Firefox 3.5(3.1 beta)以上、Opera 9.5以上、Safari, Chrome
IE8 には CSS Generated Content に -ms-filter を使えない制限がある。IE8 の -ms-filter はハイコントラストモード時のツールチップの尻尾に使っています。
CSS Generated Content を CSS-P する場合、ブロック要素でないと意図した動作をしない。この為に pbChr.css では画像置換に background-image を使う。
CSS Generated Content をサポートするが CSS-P することが出来ない。この為に全ての画像置換に background-image を使う。
EdgeHTML は、高圧縮されたアニメーション GIF でリピートしない為、カーソルの点滅に CSS アニメーションを使う。
「モダンブラウザと IE9 の強制カラーモード(ハイコントラストモード)」にて詳しく。
Opera 7~7.1x は背景画像のモーション gif に非対応の為、カーソルの点滅は javascript で行う。
Gecko 0.9.1, このバージョンだけ透過 png の透明色が黒くなる為、透過 gif に切り替えている。この手法でも pbLCD.css のコンディション部分の問題が解決していない。
Gecko 0.6～0.8.1, -moz-opacity を指定する要素が Viewport に入るとブラウザがクラッシュする。
IE6以下は、透過 png に非対応の為、疑似的な透過 png を使う。キャラクターの組み合わせによっては背面にあるキャラクターが隠れてしまう。javascript で -ms-filter の可否を判定して正しい透過表示に切り替える。この機能は以前のバージョン(pbDisplay)から備えている。
Opera 7~7.1x, Gecko ~0.8.1, 透過キャラクタの画像スプライトの background-position の指定は javascript で行っている。これらのブラウザが background-position-y を非サポートの為、各キャラクタの透過度ごとに background-position を指定すると CSS が巨大になってしまうためです。

Gecko 0.8.1以下で -moz-opacity がブラクラの原因であることを突き止めた時のツイート

Gecko 0.9.1で gif の透過色が黒色になる問題

2.1. 強制カラーモード(ハイコントラストモード)

強制カラーモードと画像置換は大変に相性が悪いですが、様々な手法を駆使して相性問題を解消しています。

2.1.1. Edge 72~, Chrome 89~, Firefox 89~ の強制カラーモード

forced-colors メディア特性をサポートするこれらのブラウザの pbChr.css と、pbList.css の画像フォールバックでは mask を使ってボーダーをフォントの形で切り抜いています。CSS の上書きはやや複雑になりますが、通常のカラーモードの x3.gif をそのまま mask-image に使える為、別の画像のダウンロードが不要な利点があります。

2.1.2. IE10~, Edge ~18 の強制カラーモード

-ms-high-contrast メディア特性をサポートするこれらのブラウザの pbChr.css と、pbList.css の画像フォールバックでは x3.anime.svg でキャラクタを表示します。カーソルの点滅は SVG ファイル内に記述した CSS Animation で行います。

2.1.3. IE9, Gecko 1.9.1~88, Goanna の強制カラーモード

先のメディア特性をサポートしないブラウザの pbChr.css と、pbList.css の画像フォールバックでは x3.svg でキャラクタを表示します。SVG には <path style="fill:WindowText" /> のスタイルが設定されていて、閲覧者の選択したテキストカラーが塗り(fill)に反映されます。カーソルの点滅は javascript で行っています。

2.1.4. IE8 の強制カラーモード

dark-on-light(黒いテキストカラーに白地など、テキストカラーの方が暗い), light-on-dark(白いテキストカラーに黒地など、テキストカラーの方が明るい) を Javascript で検出し、light-on-dark の場合は outline を使って色を反転(invert)させてカラー設定に馴染ませています。

テキストカラーと背景色が黒と白の場合には意図した描画を得られますが、これ以外の色の場合、必ずしも良好な描画ではありません。

light-on-dark, dark-on-light は hamura.css が使用するクロスブラウザライブラリが独自に定義したものです。詳しくは『ユーザー設定の調査』を参照します。

2.2. Gecko の奇妙な挙動への対処

Gecko 1.1 には -moz-opacity が設定されている <b> 要素が <a> 要素の下に居ないと非表示になってしまう問題がありました。解決していますが、発生条件と回避条件を特定できてはいません。
Gecko 1.1.1 で現象を確認しています。Gecko 1.0(Netscape Navigator 7.0), Gecko 1.2 では問題は発生していません。
Gecko 0.6～1.3 には CSS-P している要素が親要素ボックスをはみ出すと描画されない問題がある。この問題を迂回するためにレイアウトを変更している。(後述)
この変更によってフォーカス~~とレンジ~~の描画が他のブラウザに劣ります。(後述)

3. pbLCD.css の絶対配置の図

pbLCD.css は200x70ピクセルの画像状のコンテンツをマークアップで記述することが出来ます。CSS-P と画像置換で HTML を PB-100 の LCD 風に置換しています。

3.1 Gecko ~1.3のペイントの問題

Gecko 1.3.1以下で CSS-P に関連したペイントの問題

さて、Gecko ~1.3 には CSS-P している要素が親要素を上下にはみ出す部分について、onload 時に当該要素が ViewPort 外の場合にペイントされない問題がありました。

マウスで周辺を触ると描画される。さらにスクロールで ViewPort 外に出た後に再び ViewPort に入ると描画されていない場合もあります。

そこで2種類の異なる座標系の CSS を用意しました。

3.2. 多くのブラウザの座標系

Edit on draw.io

<pre> とこの直下の <samp> 要素は、200x70ピクセルのサイズです。液晶画面全体を表示しているのは <samp> です。

LCD セグメントに対応する <b> にツールチップやレンジを関連付ける <a> 要素は、<b> より一回り大きいサイズです。この為、ツールチップは <a> 要素の上下にはみ出す位置に出現します。

マウスホバーやタブフォーカスといった閲覧者のインタラクションで、<a> に背景色が付きます。これは <b> より一回り大きいサイズになります。

3.3. バグを回避する為の座標系

Edit on draw.io

<pre>, <samp>, <a> 要素の高さを、上下のマージン30pxづつを加えた130pxとします。液晶画面全体を表示しているのは <small> です。

ツールチップが親要素をはみ出すことが無くなった為、ペイントが欠落する問題は解消されました。

しかしこの変更によって、フォーカス時の塗り~~とレンジ~~が他のブラウザに劣るものになってしまっています。

3.4. Gecko 1.3.1以下のフォーカスとレンジの問題

レンジの下線が LCD セグメント毎に切れる問題は hamura.css > issue 22 で解決しました。(2022/04/27)

Gecko 1.3でのフォーカスとレンジの様子

Gecko 1.4でのフォーカスとレンジの様子

Gecko 1.3ではフォーカス時に現れる破線は対象の LCD セグメントを囲む形にはなりません。

~~レンジの下線は、LCD セグメント毎に切れてしまっています。~~(解決済)

4. `border-color` に `transparent` を使えないIE6以下用の変更

hamura.css では、border を駆使して三角形を描画するテクニックをツールチップの尻尾で使っています。このテクニックは広範なブラウザで使えて便利なのですが、IE6 以下では border-color に transparent を指定できない制限があります。

hamura.css はライブラリとして公開されている為、ウェブページの背景色は未定です。この為に transparent を使えないのは具合が悪いのです。

この制限の為、IE6 以下ではツールチップの尻尾は常に LCD の青色のベゼルの上にあるように変更しています。これならばウェブページの背景色は問題になりません。

IE6 の上側のツールチップは青色のベゼルのやや内側に出現する

IE6 の上側のツールチップはマウスホバーで上に向かうも、青色のベゼルをはみ出さない

IE5.5 のツールチップはマウスホバーやタブフォーカスで内側に移動する

5. IE5 の CSS-P とインタラクションの制限

この問題はツールチップのタグ構造を変更して hamura.css > issue 22 で解決しました。(2022/04/26)

IE5 の上側のツールチップはマウスホバーで本体部分だけが移動して、尻尾はその場に残る

IE5 の下側のツールチップはマウスホバーでしっぽ部分だけが移動して、本体はその場に残る

未解決の問題として、IE5 のツールチップのインタラクションでの CSS-P が正しくない問題があります。

この他にも、IE6 ないし IE5.5 以下には、CSS-P の問題に遭遇しています。随分昔に取り組んだことなので失念しています。

hamura.cssがNetscape Navigator 6をサポートしたよ

PBロッキー — Fri, 22 Apr 2022 14:10:00 GMT

Netscape Navigator 6.10で hamura.css のデモページを表示する

hamura.css バージョン0.9.22が、ついに Netscape Navigator 6.0 のサポートを果たしたことをご報告します。

PB-100の宇宙では、ハイパーテキストでの PB-100 用プログラムの公開の際に遭遇する諸問題を解消するべく CSS ライブラリ hamura.css の開発を続けて来ました。

自身の開発した PB-100 用プログラム作品を世に問おうという志を持った皆様が、サポートブラウザの不一致で導入を諦める事が無いように、広範なブラウザとバージョンをサポートすべく心血を注いできました。このひとつのマイルストーンが Netscape 6 のサポートです。

バック、トゥ、2000年

さて Netscape とはどのようなブラウザなのでしょう？

Netscape Navigator 6.10 のアクティベーション画面

Netscape Navigator 6のリリースは今から21年前、2000年の11月14日です。この4か月前、2000年7月17日にリリースされた Internet Exproler 5.5 が同時代のウェブブラウザです。

これ以前の Netscape 4系は一世を風靡するも、様々な独自機能を備えて登場した IE4 にブラウアシェアを奪われたのでした。Netscape 4のコードをベースにした5の開発を断念した後に、一から書き上げられた Gecko エンジンを採用して Netscape は巻き返しを図ります。という時代背景のブラウザバージョンになります。

結局 Netscape はバージョン9(Gecko 1.8.1)までリリースして2008年3月に開発とサポートが終了します。しかし Gecko エンジンは現在も開発が続いていて Firefox をはじめとしたウェブブラウザが搭載しています。

最新の Firefox はバージョン99、Gecko エンジンのバージョンも同じく99です。一方の Netscape 6の Gecko エンジンのバージョンは0.6になります。

ということで僕はバージョン99と0.6の Gecko エンジンを行き来しつつこの記事を書いています。

アーリーGeckoエンジンの各バージョンへの対応

さて、現在のウェブブラウザと基本的閲覧機能の実装状況で遜色があまり無い、と僕が考えている Firefox 3.5(Gecko 1.9.1) から、遡っていって、Firefox 1.0(Gecko 1.7)、更に遡って Netscape 7.1(Gecko 1.4)。更にさらに下って Gecko 0.6 まで遡るのは、長い長ぁい道のりでした。

1999年3月18日に公開された Internet Explorer 5 で hamura.css を表示する

Windows OS と足並みを揃えてメジャーバージョンアップする IE とは異なり、Gecko は小刻みに CSS などの挙動が変わっていって苦労させられました。原因不明のブラウザクラッシュに悩まされつつ、一つ一つ回避方法を、だいたい勘で調べていったのでした。

この作業を経て、21年前にリリースされたウェブブラウザが hamura.css をレンダリング出来る、それだけの能力を備えていたことが分かりました。あぁ、21年前に hamura.css が存在していたらどれ程素晴らしかったでしょう？

『pbDisplay.css次期バージョンでは balloon 機能がつくよ！』2011年の記事で hamura.css になるものの構想をしていたときのもの

これは理屈上は可能ですが、実際には hamura.css は現代の知見とツールを使って開発されています。21年前に存在していることは残念ながらありません。

次のPB-100の宇宙の更新では Netscape 6で快適に閲覧できるようになっているでしょう。その際は Javascript を有効にしてご覧ください。いやぁ～、ウェブブラウザって本当に面白いですね。それでは、さよなら、さよなら。さよなら！

Webサイトを更新しPB-100関連サイトへのリンクを追加しました

PBロッキー — Sat, 18 Sep 2021 13:48:00 GMT

hamura.css のt のフォントの背が1ドット低い問題の修正をPB-100の宇宙に導入し忘れていたことに気づいたので、18日以降に行った変更と併せて公開しました。フル HD スクリーンサイズでの記事ページと掲示板のレイアウトを改善し、これにあわせて各ページの見出しのヒエラルキーを推敲しています。(2021/09/23)

IE9 でレイアウトが崩れている

今年5月の更新から後に、手元の Web サイトデータの微修正を少しづつしてきましたが、IE9 のタブレットサイズでレイアウトが崩れる問題に気付いたため、急きょこのタイミングで修正をアップロードしました。

主な更新内容は次の5点になります。それでは、PB-100の宇宙を引き続きどうぞよろしくお願いいたします。

修正後の Lighthouse のスコア

『トロネコの大冒険4』の行番号と変数表に詳細な解説を追記しました。
『トロネコの大冒険4』に移植作品へのリンクを追加しました。
『Mr.T』に移植作品へのリンクを追加しました。
PB-100関連リンク集に Little Limit, コスモパトロールアーカイブ, JP3TLC's homepage > PC-1245 > sacさんのゲームのダウンロードへのリンクを追加しました。
表記のブレを統一。Web サイトチェックツール Lighthouse の指示に従った修正。依存ライブラリの累積的な修正の適用。

新規コンテンツのご案内、対応ブラウザの拡大のお知らせ

PBロッキー — Mon, 10 May 2021 13:59:00 GMT

かなり久しぶりに新規ページを追加しました

5月9日から本日まで行われた更新で、PB-100の宇宙に新しいページを追加しました。拙作『ムシハカセ』の鮮烈な復刻デビューとともに広く認知された、筈の CSS ライブラリ『hamura.css』の導入の為の解説ページと、hamura.css の対応ブラウザを加味した、本サイトの Web ブラウザのサポート状況に関するページです。

本サイトで使われている CSS ライブラリ『hamura.css』の導入解説ページ
本サイトの Web ブラウザのサポート状況に関するページ

対応ブラウザの拡大について

僕が開発しているテキストサイト用の CSS ライブラリの、ここ迄のアップデートを本サイトにも適用しました。この更新によって、サイトのそこここで微妙に閲覧性が向上していると思います。例えば、文書内リンクでジャンプした際に、当該記事の見出しにハイライト色が付くようになりました。

合わせてこの更新では、次の重大な問題が解決しています。

Firefox 3.5~3.6 で表示が崩れる問題

ツイートより

Firefox 3.5~3.6 は歴史的経緯と異なる HTML 解釈で <a> タグの子孫に <h1> や <div> といったブロック要素が現れると、各要素を <a> タグで囲む文書ツリーを作ります。この際には <a> が複製されます。

この挙動が Web サイトのデザインを損なっていたのでマークアップを改めました。

因みに、非リンク要素の :hover に対応しない IE6 以下では <a href="javascript:void(0)"> で囲む不正なマークアップでしのぎましたが、これがボロボロになる変化でした。

理由は存じませんが Firefox 4 以降では解消しています。

テキストブラウザの Lynx でリンクが無効になる問題

先の Firefox と同じ部分で問題が起きていました。こちらは不正なマークアップの為にハイパーリンクが無効になっていました。インライン要素でマークアップし直す修正で、こちらの動作も改善しています。

ドメイン更新の5月末が近づくとまた一年が巡ったなぁ、という気分です。今回は、お陰様でテキストサイト用の CSS ライブラリが固まって来ていてマークアップの変更に苦心することも減りました。その分、ブラッシュアップに注力が出来ました。

それでは2021年もよろしくお願いいたします。

マイコンプログラムをHTMLで表示するCSSのポイント、禁則処理、コピーペーストなど

PBロッキー — Sat, 29 Aug 2020 03:39:00 GMT

とてもニッチかつめんどくさい問題を扱っている為、なるべく汎用的に書くことに苦労しました。

2003年のホームページの開設以来、HTML を書いて17年が経ちました。この間に Web 技術を生業とすることになった僕ですが、テキストを表示するという一点だけでもまだまだ Web ブラウザには苦労をさせられます。ブラウザによっては意図した見た目や動作をしてくれません。

HTML5 を信じない、しかし Web ブラウザを愛す。ということで頑張っていきたいと思います。

マイコンBASICのプログラムリストをHTMLで表示するCSSのポイント

Smile Basic プログラムリスト掲載ページ

さて、CASIO PB-100 用 CSS ライブラリ hamura.css はお陰様でようやく形になってきました。本記事では hamura.css の中でプログラムリスト等の表示を担当する pbList.css について、黒魔術、バッドノウハウが堆積してきたので、ここで2点とおまけの1点について記事にして整理します。

使いどころとしては、プチコンでのプログラミング学習のように、ユーザーが手入力する(写経する)プログラムを Web サイトで公開する際などです。ニッチです。

テキストの折り返し位置、禁則処理の無効化について
コピーペーストしたテキストの改行
おまけ IE6 以下では連続する空白文字を DOM インターフェイスで取得する際に1つの空白文字になってしまう問題を回避する

検証結果

レイアウトの手段、text-indent または float
1. Web フォント時の折り返し、○またはイマイチ
2. コピペしたテキストの折り返し、○または×

ブラウザ	レイアウト	1.折り返し	2.コピペ品質
Windows 10 Chrome 80.0	`float`	?	×
Windows 10 Chrome 80.0	`text-indent`	○(*1)	○
Windows 10 Chrome 79.0	`float`	イマイチ	×
Windows 10 Chrome 79.0	`text-indent`	イマイチ	○
Windows 10 Edge 44.18362(*2)	`float`	イマイチ	×
Windows 10 Edge 44.18362(*2)	`text-indent`	イマイチ	○
Windows 10 Firefox 72.0	`float`	?	○
Windows 10 Firefox 72.0	`text-indent`	○(*1)	○
Mac OSX Safari 13.0	`float`	?	?
Mac OSX Safari 13.0	`text-indent`	○(*1)	?
Windows 10 IE5, IE7	`float`	イマイチ	○
Windows 10 IE5, IE7	`text-indent`	?	?
Windows 10 IE8, IE9	`float`	○	○
Windows 10 IE8, IE9	`text-indent`	?	?
Windows 10 IE10, IE11	`float`	○	○
Windows 10 IE10, IE11	`text-indent`	イマイチ	○

line-break:anywhere に対応している
EdgeHTML 18

まとめ

行番号付きの BASIC リストを整列して表示する方法は複数考えられます。パっと思いつくだけでも、positon:absolute, display:table, float, text-indent があります。今回は殆どのブラウザ向けには text-indent を使ってレイアウトしました。

しかし IE8~11 では float でレイアウトした場合にだけ、テキストの折り返しが意図したものになりました。条件付きコメントで分けることのできる IE8~9 は良いとして、他のブラウザ用と共通の CSS ファイルを読み込む IE10~11 は CSS ハックで float レイアウトに上書きする必要がありました。

他のモダンブラウザも float でレイアウトしても一見では良かったのですが、コピーペーストに難があったため text-indent でレイアウトする他ありませんでした。

1. テキストの折り返し位置、禁則処理の無効化について

"コマンドが行の途中で折り返す問題は、IE11以下で解消できた。" 2020年1月14日のツイート

テキストの折り返しはかつてのマイコン BASIC のプログラムリストがそうであったように、ボックス幅での折り返しを目指しました。結局、これが出来ているのは IE8~11 と Firefox と Safari, Chrome でした。

この内、IE8~11 が右端で折り返す条件が特殊で、ボックス幅を無視する筈の white-space:pre といった意外な指定が効きました。この動作は Trident エンジンの個性の様で EdgeHTML エンジンはこれと異なります。旧バージョンの方が良質な表示をするケースはちょっと複雑な気分です。

Firefox と Safari では line-break:anywhrere をサポートしているお陰で意図した折り返しをします。Chrome はこの記事を書いている最中にバージョンが80に上って anywhrere をサポートしました。

これは、ブラウザの禁則処理によって、文書作成者の意図しない位置でテキストが折り返されることが関係しています。禁則処理は通常の文章では不都合は起き難いですが、プログラムリストでは異なってきます。

PB-100 のプログラムの場合、"" 内で折り返された際にスペースの存否が分からなくなります。このような禁則処理を CSS で制御して、空白文字を正確に表現することが上記環境で実現しました。

2. コピペしたテキストの改行

普段はここまでチェックすることは無いのですが、プログラムの配布に使用するものなので検証しました。

float でレイアウトした際に Edge(EdgeHTML) と Chrome で、テキストのコピーペーストの際に不要な改行が現れました。これらのブラウザでは要素に効いているスタイルを元に改行を挿入するようです。一方 IE と Firefox はスタイルを反映しないようです。

float レイアウトでは <span> をブロック要素にするため、要素の後に改行が追加されてしまいました。これを回避するために <span> がインライン要素のままレイアウトする手段を選ぶ必要がありました。そこで text-indent のレイアウトを採用しました。

3. おまけ IE6以下では連続する空白文字をDOMインターフェイスで取得する際に1つの空白文字になってしまう問題を回避する

僕は、クロスブラウザを考慮しなくなると途端にモチベーションが下がってしまう特殊性癖なので、IE6 以下の対応も続けています。

IE6 以下では、連続する空白文字をDOMインターフェイスから取得する際に1つの空白文字になってしまう挙動があります。プログラムコードをマークアップする際には <pre> や <code> を使用しますが、この為に IE6 時代のコードハイライターは、空白文字に関する情報を失わない <textarea> でのマークアップを推奨していました。

しかし <textarea> はマークアップとして不適であり、Javascript が無効でコードハイライト出来なかった場合の CSS でのスタイリングも大きく制限されます。そこで hamura.css では、<pre> を使いつつ、連続する空白文字をひとつおきにに置換する苦肉の策を弄しました。以下のような変換を pbList エディタで行っています。

return cmd.split( '  ' ).join( '  ' );

本件に関する素晴らしい検証記事は次になります。

驚いたことに Firefox 2.0 の出力結果とまったく異なるのだ。先頭の改行文字は無視され、残りの改行文字やタブは、半角スペース(0x20)にすべて変換されてしまっている。これはブラウザ上の表示に一致する。つまり IE の TextNode に対する考え方は、それをなるべくブラウザの表示結果と一致させようということらしい。

hamura.cssで始めるCASIO PB-100のためのHTML制作入門

PBロッキー — Thu, 27 Aug 2020 06:49:00 GMT

合字「ᴇ⁻」を hamura.css version 0.10.0 以降のものに書き換えました。(2023/11/24)

CSS ライブラリ『hamura.css』や Blogger テンプレート『4bit-city』を使って PB-100 に関する Web ドキュメントを書いていくための入門記事です。

HTML 文書への hamura.css のインポートについては、Readme を参照ください。

注意

4bit-city は開発中で、まだ公開出来ていません！入門記事としながらも、開発中の内容、検討中の内容が含まれます。すみません。

はじめに

hamura.css は HTML で PB-100 シリーズ用の BASIC リストと操作法等を公開するための CSS ライブラリです。次の5つのスタイルがひと纏まりになっています。

pbList, pbList エディタ
pbFont
pbLCD, pbLCD メーカー
pbChr, コード一覧
pbKey

Blogger用テンプレート、4bit-cityについて

4bit-city は hamura.css を組み込んだ Blogger 用テンプレートです。PB-100 に関するブログを直ちに開設することができます。

hamura.css をはじめとするいわゆる CSS ライブラリを副作用無しにホームページやブログに導入することは Web 技術者でないと難しいことです。Web 技術に不案内な方は Google のブログサービス Blogger にブログを開設し、ブログテンプレートに 4bit-city を設定しましょう。このブログも 4bit-city をベースにしたものを使用しています。テキストが読みやすく、ページの読み込みも圧倒的に高速です。

共通の注意事項

日本語 Web ページでバックスラッシュを表示するためには lang=en を適宜に使用します。この指定を行っても一部の日本語フォントで ¥ が表示されるケースがあります。

&lt;span lang="en">\&lt;/span>

また一部の記号は文字参照を使って記述します。PB-100 シリーズのフォントセットにあるものでは次の記号が該当します。

文字	文字実態参照と数値文字参照
<	`<`
>	`>`
¥	`¥`
\	`\`	バックスラッシュ
ᴇ⁻	`ᴇ⁻`
ᴇ	`ᴇ`
♠	`♠`
♥	`♥`
♦	`♦`
♣	`♣`
▓	`▓`	市松模様

1. BASICリストを正確に美しく公開したい
pbList.css

pbList.css

pbList.css は pbPrinter.css の後継ライブラリです。Web フォントとリガチャ(合字)をサポートする環境では美しい PB-100 フォントで BASIC リストを表示することができます。その上 Javascript が有効な環境では、コードのハイライトをします。

また Web フォントが使えない環境では JavaScript で画像置換してフォールバックします。リガチャ非対応の環境でも Javascript でフォールバックします。CSS や JavaScript が使えない環境でも HTML として正しく、情報の欠落が無いように細心の注意を払ってデザインされています。

pbListエディタ

pbList エディタ

pbList による HTML の作成には pbList エディタを使用します。PB-100 と同じ解釈でスペースを挿入して pbList のお約束に沿った HTML を生成します。ツールで生成した HTML には改行等の変更を一切加えずにコピーペーストしましょう。

pbList エディタは開発中です。デスクトップ用ブラウザで動作を確認しています。

2. PB-100フォントを文章の中で使いたい
pbFont.css

pbFont.css

pbFont.css はコード片や変数、印字結果などの出力を PB-100 のルックにします。対象に応じて <code>, <var>, <samp> を使い分けます。

変数には <var>
BASIC コマンドやプログラム片には <code>
画面やプリンターへの出力結果には <samp>

マークアップ

	表示サンプル	コード
1	名前は`X$`に入っています。	`<var class="pbFont">X$</var>`
2	`GOTO 10`で次の面に進みます	`<code class="pbFont">GOTO 10</code>`
3	ゲーム終了で`CLEAR!!`と表示されます。	`<samp class="pbFont">CLEAR!!</samp>`

3. 画面の様子を伝えたい・説明したい
pbLCD.css

pbLCD.css

pbLCD.css によって HTML で画面イメージを記述することができます。pbDisplay.css の後継ライブラリで表現力とアクセシビリティが向上しています。

ごく一部の CSS のサポートが不十分なブラウザに対しては JavaScript で表現を補います。また画像と CSS が使えない環境でも情報の欠落が無いように細心の注意を払って設計されています。

RUN DEG
A 1 24

機能

キャラクターを透過したり、透過したキャラクターにキャラクターを重ねて、ゲームのスピード感を表現する
キャラクターの上下に、任意の色の吹き出しを付ける
1つ以上のキャラクターに任意の色の下線を付ける

pbLCDメーカー

pbLCD によるマークアップはお約束がたくさんあるため人力で書くのは困難です。~~このためのツール pbLCD メーカーで HTML を作成します。ツールで生成した HTML には改行等の変更を一切加えずにコピーペーストしましょう。~~

pbLCD メーカーは開発中です！

4. LCDキャラクタを表示したい
pbChr.css

pbChr.css

pbChr.css によって PB-100 の LCD キャラクタを文書中に登場させることができます。pbChr.css によるマークアップを書く際は便利なチートシートを使用しましょう。

キャラクタを文字通りの意図で使っている場合は <samp> でマークアップしています。
キャラクタに特別な役割がある場合は <dfn> を使用します。併せて title 属性に役割を書いておくのが良いでしょう。

	表示サンプル	コード
1	`♥`に重なるとライフが回復します。	`<samp class="pbChr69">♥</samp>に重なるとライフが回復します。`
2	プレイヤーは騎士(Ω)となってモンスターと戦います。	`プレイヤーは騎士(<dfn class="pbChr6D" title="騎士">Ω</dfn>)となってモンスターと戦います。`

IE7 以下で行頭に pbChr.css を書くとテキストフローが乱れる問題の対策

IE7 以下でテキストフローの先頭に pbChr.css を書いた場合に左にズレる問題の解決法はツールとライブラリ > hamura.css > pbChr.css > 「IE7以下で行頭に pbChr.css を書くとテキストフローが乱れる問題の対策」を参照ください。(2021/05/10)

5. キー操作を分かりやすく伝えたい
pbKey.css

pbkey.css

pbKey でプログラムの実行の手順や、実行中の操作を分かりやすく示すことができます。

例1 pbChr.cssと組み合わせる
キャラクターの説明とキー操作

shift0でゲームを開始します。

プレイヤーは騎士(Ω)となって魔城を探索し、幽閉されたお姫様(♥)を奪還します。 46で騎士を左右に動かしてZで剣を振ります。

&lt;p>&lt;kbd class="pbKeyS">shift&lt;/kbd>&lt;kbd class="pbKeyBlk">0&lt;/kbd>でゲームを開始します。
&lt;p>プレイヤーは騎士(&lt;dfn class="pbChr6D" title="騎士">Ω&lt;/dfn>)となって魔城を探索し、幽閉されたお姫様(&lt;dfn class="pbChr69" title="お姫様">♥&lt;/dfn>)を奪還します。
&lt;kbd class="pbKeyBlk">4&lt;/kbd>&lt;kbd class="pbKeyBlk">6&lt;/kbd>で騎士を左右に動かして&lt;kbd class="pbKey">Z&lt;/kbd>で剣を振ります。

例2 pbFont.cssと組み合わせる
コマンドとキー操作

RUN モードで
DEFM 10EXE変数領域の確保
shift1初期化
shift0ゲーム開始

&lt;pre>RUN モードで
&lt;code class="pbFont">DEFM 10&lt;/code>&lt;kbd class="pbKeyBlk" title="execute">EXE&lt;/kbd>変数領域の確保
&lt;kbd class="pbKeyS">shift&lt;/kbd>&lt;kbd class="pbKeyBlk">1&lt;/kbd>初期化
&lt;kbd class="pbKeyS">shift&lt;/kbd>&lt;kbd class="pbKeyBlk">0&lt;/kbd>ゲーム開始
&lt;/pre>

マークアップ

pbKey.css のマークアップ表はツールとライブラリ > hamura.css > pbKey.css に移動しました。(2021/05/10)

pbChrのコード一覧

pbChr のコード一覧はツールとライブラリ > hamura.css > pbChr.css に移動しました。(2021/05/10)

紀和鏡『あのこをさがす旅』の中間報告、2017年熊野大学の夏期セミナーにて

PBロッキー — Mon, 24 Aug 2020 03:42:00 GMT

あれよあれよという間に、旅行の難しい時代に突入してしまいました。皆様は如何お過ごしでしょう？

随分昔の旅の話になってしまいますが、その時のメモをもとに思い出しつつ書いていきます。2015年の記事、『あのこをさがす旅』をめぐる旅の続きになります。

紀和鏡との邂逅

熊野大学の講堂 2017年8月5日撮影

紀和鏡に、執筆の舞台裏を聴きたい想いを募らせた私は、2017年に開催された熊野大学の夏期セミナーに参加しました。熊野大学は文学者の中上健次が中心となって設立した文化組織で、彼の死後も活動が続いています。この健次の配偶者が鏡になります。

講師として登壇する鏡の長女の中上紀氏に少しでもお話を聴けないか、と考えていたのでした。

しかして幸運なことに、その日のスケジュールを終えて講堂での食事会の最中に、鏡は現れました。

主催者には鏡を目当てにしていた事を伝えてあり、早速紹介して頂けました。ついに『あのこをさがす旅』の著者に話を伺う事が叶いました。表舞台に出なくなって久しく、彼女の健康状態を気にしていましたが、お孫さんとの日々を楽しんでいると伺い安堵しました。

主人公、剛太のモデルについて

熊野大学で聴き込んで僕は初めて知ったのですが、鏡には2女の下にご長男が居たのでした。執筆当時、鏡は東京都府中市で3人の子と暮らしていました。この時末っ子の長男はちょうどファミコンに夢中の年頃です。

鏡は、長男の部屋から漏れてくるファミコンの音を聞いていた、と往時を語りました。

ファミコンからの流れで現在は、孫の遊んでいる最新ゲームのグラフィックに関心している、とも伺いました。鏡のテクノロジーへの好奇心が伺え、異界への入り口としてファミコンが選ばれたのも頷けました。

執筆当時、鏡と3人の子が暮らした東京都府中市について

執筆当時住んでいた東京都府中市について鏡は、遺跡だらけで、東京空襲の記憶も残っていた、と触れました。

長男とその姉の存在(実際は姉は2人だが)、そして所在も生死すら不明な主人公の失踪した父は、当時別居していた健次に重なります。作品は府中時代の紀和家のスナップショットの一面もありそうです。

ノーライフキングとの関係

鏡はいとうせいこうとの親交が深いです。僕はベストセラーとなった『ノーライフキング』との関係を是非伺いたかったです。執筆当時、鏡はノーライフキングを意識していたのでしょうか？

しかし恐る恐る触れると、いとうせいこうさんは凄い作家で、といなされてしまいました。

鏡は、社会科学誌『マージナル』の編集委員を務めたスマートなお姉さまです。インタビュワーの力量不足で、鏡から執筆の背景を引き出すことは叶いませんでした。また、作家に向ける問いとして不味かったかも、と思います。

鏡は間もなく、人を迎えに行く用事があるから、と自身で車を運転して会場を去り、インタビューの機会は終わったのでした。

たびを終えて

イベントは当然ながら中上健次ファンが多く、中には健次をテーマにしているという大学生さんも居りました。そんな彼女、彼らに紀和鏡の児童文学『あのこをさがす旅』を啓蒙できたのは収穫でした。

そうそう、僕が小学校の時に購入していた最初の書籍は、高校の時の友人のI氏に貸したままだったことが、その後判明したのでした。

ブログと更新情報の URL 変更のお知らせ

PBロッキー — Wed, 03 Jun 2020 21:16:00 GMT

.ga ドメインを失いました！旧アドレスをご利用ください。(2023/09/07 追記)

PB-100の宇宙では、2009年より pbrocky.blogspot.com でブログを発信し、pb-100.blogspot.com で更新情報を提供して参りました。この度は、blogspot.com ドメインで提供していたブログと更新情報を、pb-100.ga のサブドメインとしましたのでご案内いたします。

また、サブドメインへの移行は Blogger 提供の機能で実現しております。従来のアドレスへアクセスした際は適宜に新しいアドレスへリダイレクトされる為、各ブログへのリンクの変更は不要です。

引き続きどうぞよろしくお願い申し上げます。

アドレスの変更
	旧アドレス	新アドレス
ブログ	`pbrocky.blogspot.com`	`blog.pb-100.ga`
更新情報	`pb-100.blogspot.com`	`www.pb-100.ga`

PB-100用プチRPG『ムシハカセ』僅か6行のプログラムに凝縮した少年の成長譚…!?

PBロッキー — Fri, 10 Jan 2020 12:43:00 GMT

誤記の修正と「PB-100初期版における各種誤動作の発生確認」へのご協力のお願い

「初期出荷バージョンのSGNにまつわるバグの回避法」に収録したプログラムに僕の転載ミスがありました。

1 D=SGN A(A-5)+D:
↓
1 D=SGN A*(A-5)+D:

また PB-100 シリーズの初期版の誤動作については、ウェブ上で最もまとまっている文書である「pb-100_bug-check_2024-06-02」(門真なむ氏)を参照ください。あわせて、お時間の許す方は誤動作の調査にご協力ください。(なむ氏による本件のツイート) (2024/06/03)

「20周年プレ企画第六弾！6 LINE RPG ムシハカセへの反響の記録」を公開しました。(2023/04/17)

PB-100 の名作ゲームをシャープのポケットコンピュータ PC-E200/G800 シリーズへ移植するゲームパック企画「PB-100スピリッツ8」に本ゲームを収録頂きました。作品の雰囲気を残しつつ、制約の中で諦めた部分を改善したパワーアップ版です。是非ご確認ください！(2023/01/05)

Twitter で公開していたフローチャートを収録しました。2ch のコメントへのリンクを関連する僕の投稿を全て納めるものにしました。(2022/10/9)

Aka_whisper 氏のツイートを元に、初期出荷バージョンの SGN にまつわるバグの回避法を追記しました。この度の情報提供を心よりありがとうございます。(2020/02/07)

Pocket BASIC シミュレータでの実行画面

2006年に2ちゃんねる掲示板の『PB-100は氏ね READY P1』スレッドに CASIO PB-100 用ゲーム『ムシハカセ』を投稿したのは実は僕でした。今回は完成が近づきつつある PB-100 プログラム公開用 CSS ライブラリ『hamura.css』のデモを兼ねて、このブログに収録します。

僅かに6行で実現したプチ RPG の魅力を hamura.css の素晴らしい表現力とともにお楽しみください。ちなみにプチ RPG の命名は509さんでした。スレッドの皆様に頂戴した反響の数々、大変ありがとうございました。

物語(適当)

今日もあなたは幻の超レアムシキング、ゴールデンヘラクレスオオカブトを求めて、害獣も出没してちびっこにはちょっぴり危険な裏庭の先の森へと駆けていくのであった。

遊び方

ゲームの始め方と再開の仕方
ゲームの進捗	操作
初めて遊ぶ	`shift1`、または `VAC` の後に `shift0`
害獣にやられた後に再開する	`D=1` してから `shift0`
クリアしてから再開する	`D=1` `U=0` してから `shift0`

フィールドを探索！

RUN DEG
A 1 24

左から、現在の地形を表すキャラクター、X 座標、HP。

4で左へ、6で右へ移動します。これ以外の数字ボタンを押すとまずいです。この問題は6行では解決が難しいです、すみません。

地形の一覧
表示	解説
A	スタート地点で回復地点の自宅。座標 `1` と `2` にあるよ。おやつを食べてのんびりすると HP が最大値まで回復するぞ。
_	裏庭から続く平地。お母さんには「この先の森には行くな」って言われているんだけどね。
¥	森。「オオカブトは自宅から50歩ほど行った大きな森の中でドツボカズラの樹液を吸っている」ってみんな噂しているよ。

害獣と遭遇！

RUN DEG
J 1 24 30

左から、害獣を表すキャラクター、X 座標、HP、害獣の HP。害獣との遭遇は移動後に限らず、屋外に居る場合に起こります。

オートバトルです。逃げる時は 5 を押し続けます。害獣の HP を0以下にしたら勝利です。最大 HP が少し上昇します。

害獣の一覧
表示	解説
a	荒くれウサギ。とっても攻撃的な奴なんだ。
J	ドツボカズラ。人間を襲うこともある危険な食虫植物だよ。こいつの樹液はオオカブトの好物なんだって。
'	幻の超レア虫キング、ゴールデンヘラクレスオオカブト。小さい身体なのにとってもパワフルなんだ。

エンディングの演出にほんの少しだけ凝っていますので、お時間の許す方は是非最後まで付き合いください。ボス以外の害獣が2種類しかいない点は心残りです。

プログラムリスト

実機用リスト

P0
1 D=D+SGN A*(A-5:D(SGN D)=1:P=EXP FRAC LN D:O(RAN#+.05)=4+P:P(LN D)=3
2 Q=B+6:H=INT P*5:$=KEY:$="0"+$:A=VAL($):IF U=4;PRINT " Get♥":END
3 D(P)=Q*4:$="_¥A,aJ '":PRINT :PRINT MID(P-U,1);D;G;:IF P-U&lt;5 THEN 1
4 PRINT H;:IF H&lt;1;PRINT "Win":B=B+.5:M(P)=4:I(SQR D)=8:GOTO (P+U)/4
5 C=RAN#↑RAN#↑RAN#+π:IF KEY="5";IF C≧4;PRINT "Ec":GOTO 1
6 IF G>0;D(C)=D(C)-INT (RAN#*M(C):GOTO 3
P1
1 VAC :GOTO #0

ムシハカセのフローチャート, draw.io で2021年10月に作成, 初出はツイートにて

P1 は変数のクリアしかしていないので、実機には必ずしも入力の必要はありません。入力しない場合 VAC の後に shift0 でゲームを開始します。

初期出荷バージョンの`SGN`にまつわるバグの回避法

PB-100 の最初期に出荷されたものには SGN にまつわるバグがあります。SGN の数式中での位置関係によっては意図した計算結果にならない、というもので詳しくは『PB-100初期出荷バージョンの異常動作について』で解説しています。

この度は Aka_whisper 氏より回避法をご教示いただきました。

P0
1 D=SGN A*(A-5)+D:D(SGN D)=1:P=EXP FRAC LN D:O(RAN#+Z)=4+P:P(LN D)=3
P1
1 VAC :Z=.05:GOTO #0

バグに対策したことで一行あたりの文字制限を超えたため、.05 を変数 Z に代入することで文字数を稼いでいます。または O(RAN#+.1)=4+P にしても一行に収まります。この場合、害獣の出現率が倍になります。

Pocket BASIC シミュレータ用リスト

[P0]
1 D=D+SGN A*(A-5:D(SGN D)=1:P=EXP FRAC LN D:O(RAN#+.05)=4+P:P(LN D)=3
2 Q=B+6:H=INT P*5:$=KEY:$="0"+$:A=VAL($):IF U=4;PRINT " Get\ht":END
3 D(P)=Q*4:$="_\\A,aJ '":PRINT:PRINT MID(P-U,1);D;G;:IF P-U&lt;5 THEN 1
4 PRINT H;:IF H&lt;1;PRINT "Win":B=B+.5:M(P)=4:I(SQR D)=8:GOTO (P+U)/4
5 C=RAN#^RAN#^RAN#+PI:IF KEY="5";IF C>=4;PRINT "Ec":GOTO 1
6 IF G>0;D(C)=D(C)-INT(RAN#*M(C):GOTO 3

[P1]
1 VAC:GOTO #0

シミュレータの入手

Pocket BASIC シミュレータは開発者の Bernie 氏の Web サイトからダウンロードいただけます。Windows OS で動作します。また Windows CE 版を滝本飛沫氏の Web サイトからダウンロードいただけましたが現在はリンク切れです。一旦 web.archive.org の URL をご案内しておきます。

2006年公開時点からのシミュレータ用リストの変更点

2006年の公開時点では、実機では動いたのにシミュレータでは動かない箇所があった為、リストの1行目を変更していました。この問題は最新の version 0.12 では解決していた為、本記事執筆にあたってシミュレータ用リストを実機用と等価にしました。

2006年版での変更点

P(LN D)=3
↓
P(SGN(D-1))=3

最後に

さて hamura.css の表現力にも手応えを感じております。いよいよ重い腰を上げて『ぽあぽあ 544ステップ版』の公開に着手します。ではでは。

PBロッキーのブログ記事全105件の書き換えを終えました

PBロッキー — Tue, 07 Jan 2020 17:09:00 GMT

変なスイッチが入ってしまい、1月6日迄に古いルールで書かれた記事の修正を終えました。

2009年から書き続けてきた105件のブログ記事は、全て2017年以降に更新されています。2017年は現在のものと同系列のデザインが稼働した年で、これ以降に書かれたり修正された HTML は閲覧に支障をきたすことは無いはずです。

ちなみに古いルールというのは HTML4.01 や XHTML1.0 という意味ではありません。デザイナーが独自に定義した Web サイトに固有のルールのことになります。この場合ではPBロッキーが定義したPB-100の宇宙のサイト群に固有のルールです。

画像の拡大表示が出来ない不具合が解決した

LightBox を使って拡大表示していた際の <img> 周りのマークアップは、現在の CSS と Javascript では画像の拡大表示に不具合がありアクセシビリティに支障をきたしていました。これが最大の問題でこの度ようやく解消しました。

この件は流石にマズイという思いが強く2017年からコツコツと手作業で書き換えていました。

`<br>`タグで改行していたのを`<p>`タグに書き換える

2009年の最初期のブログは <br> タグで改行し <p> タグはほぼ使っていません。現在はその真逆な上に <p> でマークアップしないとスマートフォンなどのシングルカラム表示時に、余白が無くなり表示が残念になる CSS 設計になっています。

このような設計は僕以外の者が記事を書く際の足かせとなっています。しかし、タブレット表示時に拡大した画像を画面幅一杯に表示する、そこを譲れないラインに現在の設計となりました。<p> タグを正しく使うことは SEO でも重要とされていますので頑張ります。

本文の見出しが`<h3>`からなのを`<h2>`からに

以前はブログタイトルを <h1>、記事タイトルを <h2> でマークアップして、本文の見出しタグは <h3> からでした。これは Blogger を利用開始した2009年当時の Blogger のテンプレートに倣っていたと思います。

現在はページ毎にユニークな <h1> タグの内容が SEO でも重要という情報を小耳にはさみ、記事ページでは記事タイトルを <h1> でマークアップし、この際にブログタイトルは <div class="h1"> でマークアップしています。もちろん本文は <h2> からです。

以上の書き換えを半自動化する

以上の書き換え作業は今回から、cheerio という jQuery ライクに文書を操作出来る Node.js 用ライブラリを使って半自動化しました。今まで手作業でこなしてきた、古いルールの HTML から新しいルールの HTML への書き換えをスクリプトのサポートを受けながら出来るのは至福で、隔世の感がありました。

React や Vue といった Javascript ライブラリの出現によって、かつてデファクトスタンダードだった jQuery の影が薄くなって久しいです。

しかし、こうして10年以上に渡って書き続けられた、その間に様々にコーディングルールが変遷してカオス化した HTML 文書を書き換えるには jQuery 的ライブラリが大きな力になってくれました。

インターネット元年やそれ以前から大量に生み出した何千、何万というテキストを再び資産化するには jQuery 的なものが大きな力になると思います。

良質な文書を未来のワールドワイドウェブに遺していくにあたって、またひとつ必要な技術を獲得できました。幸先が良いスタートでございます。ではでは、2020年代もどうぞよろしくお願い申し上げます。

11年のお付き合いとなったBlogger改造のおもいでとWebサービス盛衰の点描

PBロッキー — Sun, 22 Dec 2019 22:00:00 GMT

Blogger のテンプレートで、BlogList ウィジェットに読み込ませる XML フィードの本文部分は、何故か2重に HTML エスケープする必要があります。(参考ツイート, 2026/01/02 追記)

&lt;table&gt;
↓
&amp;lt;table&amp;gt;

Yahoo! Pipes のスクリーンショットを wikipedia.org のものからPBロッキーが記録していたものに差し替えました。(2020/1/10)

盛況のうちに終わった Google Blogger Advent Calendar 2019 の最終日にはイラストレーターのさんがつ氏によるアドベントカレンダー参加者を書き込んだイラストが公開されました。PBロッキーの姿も描いて頂きました。是非探してみてください。(2019/01/05 追記)

Google Blogger Advent Calendar 2019 25日全てが投稿で埋まる

記事は Google Blogger Advent Calendar 2019 の23日目です。“Google が提供するブログサービス Blogger ですが、横のつながりを持つ機能がありません。ゆるく一緒に遊んでみるのもいいかと思い、カレンダーを作ることにしました。”という企画です。

23日担当の僕、PBロッキーは11年のお付き合いとなった Blogger テンプレートのカスタマイズの日々を、当 Web サイトの運営史と、出会ってはお別れした外部の Web サービスとのアレコレを交えつつ書き留めてみます。読者の方がお世話になった Web サービスが出てきたら一緒に涙してください。

気が付けば10年を超えた Blogger との付き合い

こことは別のブログですが Blogger に本格的に触り始めたのは2008年の7月でした。以来 Blogger とは11年以上のお付き合いになるわけです。この間にもいくつもの Web サービスが現れては消えました。時にユーザーが紡いだ膨大な量の知的活動の成果物ともども消滅しました。

そんな中で Blogger が存続し現在もアップデートを続けていることは、この11年の間に晴れの日も雨の日も折に触れて Blogger に記録を残し続けた僕には幸いなことでした。11年の月日を遡ることが出来たのも Blogger のお陰です。

そうそう、この昼にも投稿一覧を開くと新しいデザインにアップデートされていました。Google のサービスへの意欲に安堵する瞬間です。

安定しなかった0年代のBloggerの苦い想いで

2008年以前には、文章を書くのが好きなバイト先のチーフに、店舗のブログを始めては、と勧めたのが Blogger でした。チーフが編集画面で書き上げた記事は、生憎と公開の前に消えてしまいました。今にして考えると Blogger のせいというよりは当時の Web ブラウザの問題だったのかも知れません。

何れにしろ、まずはメモ帳で執筆する、などと気の利いた助言が出来なかったことは申し訳ない事でした。少なくとも僕の退職までの間にチーフが再び Blogger に向かうことはありませんでした。

高いカスタマイズ性と広告も出ない太っ腹

2009年から2012年まで使用したデザイン、スクリーンショットは2011年に撮影

PBロッキーのブログをここ Blogger で始めたのは2009年6月の事でした。当時の僕は Blogger のカスタマイズの自由さに惚れ込んでいました。

Yahoo!ジオシティーズで運営していたホームページとブログを同じデザインにして、見ための上では両者をシームレスに繋ぎました。これが出来ないならばブログを始めることは無かったようにも思います。そしてデフォルトで広告が表示されない点も納得のデザインをする上で助けになりました。

2009年の僕は、趣味でも仕事でも Web 技術に関わっていましたがサーバをレンタルするには至りませんでした。レンタルサーバ会社への入金が止まった段階で Web サイトが消えてしまうようでは、ハイパーテキストを未来に遺すという運営の主旨に叶わないからです。

Bloggerと無料サービスを使ってCGIのような事をする

外部のデータによって内容が更新されるホーム。スクリーンショットは2013年の web.archive.orgより

しかし無料サービスで出来ることに不満があったのも事実です。そんな折に Blogger の BlogList ウィジェットを使って CGI のようなことをするテクニックを考案します。

BlogList ウィジェットは外部のブログを登録するとそのフィードを取得して、最新の投稿のタイトルとサムネイル等を表示します。このような外部のブログは複数を登録できます。

ここに登録するのが外部のブログではなく、表示させたい任意のコンテンツをフィード形式にしたものにすると、貴方の Blogger に存在しないコンテンツを注入することが出来ます。このような任意のフィードを作ってくれる無料の Web サービスが提供されていて恩恵に与りました。

マッシュアップの時代、Yahoo! Pipesとともに

Yahoo! Pipes で2つのブログのフィードを合わせて時系列順で一つに並べる、2009年のスクリーンショット

それが米国 Yahoo の提供する Yahoo! Pipes です。Pipes は各 Web サービスが発行しているデータを、Pipes の Web GUI 上で様々に加工した後に json や jsonp, XML などの形式で再発行してくれました。勿論ブログフィードでの発行も出来ました。

Pipes が登場した2007年2月の背景としてさまざまな企業や団体が所有するデータベースを公開する WebAPI を整備するようになり、これらのデータを組み合わせることで新たなサービスを生み出すマッシュアップという手法が注目されました。このマッシュアップの時代に華麗に登場したのが優れた UI を備えた Pipes でした。

残念ながら Pipes は2015年9月30日に終了します。ややあけて2016年1月に当サイトは Google Apps Script で同等の機能を実装しました。お陰様で現在も pb-100.blogspot.com のホームでは、PB-100の宇宙のサイト群の更新情報をマッシュアップして表示しています。

ファイル置き場の流転の日々

執筆時点の land.to、息の長いサービスです

BlogList ウィジェットを使った改造に味を占めた僕は順調に Blogger に嵌っていくのですが、度々悩まされたのが CSS, Javascript 等の置き場所です。

当初は無料ホームページサービスながら他ドメインからファイルを呼び出すことが出来る land.to を利用していました。しかし引け目を感じて Google Code へ移ります。Google Code では初めてオープンソースプロジェクトのオーナーになるということでドキドキしました。

スクリーンショットは『Google、プロジェクトホスティングサービス“Google Code”を終了する計画を明らかに』より

Google Code の2015年の閉鎖を経て Dropbox の公開フォルダにファイルを移します。間もなく2017年の公開フォルダの無効化を経て Github Pages に移ることとなりました。

Github Pages で落ち着いた感はあったのですが、http: でアクセスしても https: にリダイレクトしてしまうためゲーム機等の古いブラウザで閲覧できない問題がありました。2019年3月にホームページを Google App Engine に移した際に、リダイレクトの無いここを Blogger 用のファイル置き場にしました。

こうして振り返ると、ようやく腰が据わったという気がします。

日付	出来事
2015年1月25日	Google Code の閉鎖
2016年8月31日	Google ドライブの Web ホスティング機能の廃止には巻き込まれませんでした
2017年3月15日	Dropbox は無料ユーザー向けの公開フォルダが無効に
2019年3月31日	Yahoo!ジオシティーズの終了
現在	Google App Engine をファイル置き場に

2015年からBlogger改造熱の再燃、2016年にリリースのSNS対策の新機能

2015年に私の Blogger 熱は再燃し、再びテンプレートの改造と Web デザインの改善に力を入れるようになりました。なんとこの時の熱は現在も続いていて、4年半に渡って様々なスクリーンサイズとメディアで閲覧性の優れるテキストサイト用の HTML, CSS の開発を続けています。

そんな折に2016年の春から初夏にかけて Blogger のテンプレートに強力な新記法が登場したのでした。

resizeImageオペレーター

Twitter Card Validator で OGP 対応を確認する

resizeImage()によって Google Photo 等に置いた画像を任意のピクセルサイズに縮小したり、トリミングが出来るようになります。72pxで固定だった記事一覧のサムネイル画像のサイズが柔軟に設定できるようになりました。しかし何よりも大きいのは OGP の提供が可能になった点だと思います。

この記法の登場で SNS でシェアする際に、効果的に記事中の一番最初の画像を引用することが出来るようになりました。

ラムダ式

Google の検索結果にパンくずリストが反映されている

同時期に登場したラムダ式によって、記事にパンくずリストを追加したり、画像の無い記事にラベルに基づいた代替のサムネイル画像を追加する、といった従来に比して高度な処理を行えるようになりました。

Google の定義した XML がブログを生成するプログラム言語であることをより印象付ける変更です。しかし実のところ XML でプログラムを書くのはしんどいです。XML で無ければどれほど楽だったかなと思いつつ、しかし目当ての表示を実現できるだけで有難いと思って頑張る他ありません。

レイアウトバージョン2についても

2010年に登場し2011年まで段階的にアップデートが行われたレイアウトバージョン2にも触れておきます。

レイアウトバージョン2ではウィジェットのプロパティが整理され、<b:defaultmarkup> に定義した内容を種類の異なるウィジェットから <b:include> できるようになりました。現在このブログのテンプレートは2555行という長大なものになっていますが、コードを再利用する仕組みが整ったお陰でなんとかメンテナンスが出来ている感じです。

最新のレイアウトバージョンは2017年に登場した3ですが、<data:blog.isMobile> によるモバイルとデスクトップの内容の切り替えが出来なくなっている為、レイアウトバージョン2を使い続けています。

僕がこれらを自身のテンプレートに取り込むのは2018年頭頃で、新機能のリリースから2年弱のタイムラグがありました。Blogger のテンプレート改造に関する情報は少なく、Google 提供のテンプレートのソースコードを見て新機能の存在を知ったりしていました。

2018年の海外のテンプレート配布サイトには、これら機能を利用していないテンプレートも散見されました。更にはサムネイルの画像のリサイズを javascript で行っているものもあって、javascript を切った状態で閲覧すると寂しいデザインになってしまっていました。

2019年3月のYahoo!ジオシティーズの閉鎖によりWebサイトをGoogle App Engineに移行

2003年から16年弱に渡って間借りしてきた無料ホームページサービスのYahoo!ジオシティーズが遂にその幕を降ろしました。当サイトの移転先は Google App Engine としました。

2009年よりこの間、頑なに避け続けていたレンタルサーバですが GAE は隔世の感があり無料枠の範囲でも使い勝手が大変に良いです。いつしか Blogger のコンテンツも GAE に移して Web サイトのコンテンツと併せて一元的に管理したいと考えるようになりました。

Blogger への不満

将来に GAE へ移行できれば、この間に Blogger に対して感じた諸々の不満から解放されます。ということで最後は Blogger への不満について軽く触れておきます。

format オペレーターの出力が日本標準時の9時間だけ遅れている
投稿ページで次の記事、前の記事のタイトル等が表示できない
スタティックページの更新日時を表示できない
ページ数付きのナビゲーションができない
ラベル一覧で記事数を超えて、前の記事へのリンクが提供される
しっかりした AMP 対応が出来ない
PWA が出来ない、~~但しサードパーティードメインを設定すれば可能に思える~~はツイートで訂正しました
サードパーティドメインの設定が出来ない、私は昨年暮れからトライして設定できていません
スタティックページとコメントの内容が検索ウィジェットの検索対象ではない
テンプレートを改造した際の CSS と Javascript 等の置き場所に困る
記事一覧画面が必ずしもユーザーが設定した記事数を表示しない場合がある
- 一覧画面に表示される記事の分量が一定を超えないように記事が減らされる
-  を長文の記事に設定すると解消する

上記の中には Javascript で補えるものもあります。しかし Ajax や DHTML といった手法は閲覧者の回線とマシンリソースに負荷を掛けます。そもそも Javascript が切られている場合にコンテンツが欠落するため、特に Web 文書に於いては可能な限りサーバ側でコンテンツを用意したいところです。

ブログサービス全般の問題

続いて Blogger に限らず無料ブログサービス全般の不満についても触れておきます。

移転したサイトのリンク更新などで記事の一括検索、一括更新が出来ない
記事の更新履歴を残すことが出来ない

Web 上に良質な公開ノートを残す、その為に遠からずブログサービスを卒業する日が来ると思います。

最後に

在りし日の Blogger の管理画面

うまくすれば来年の今頃は Blogger から卒業しているかもしれませんが、しかし未だに強くお勧めのサービスであることは変わりません。

“無料ブログ”で真っ先に検索結果に出てくるアメブロなどではなく、落ち着いてじっくり執筆の出来る、無用な広告を閲覧者に浴びせ掛けない、Google の堅牢なインフラの上に構築された Blogger を是非ご検討下さい。

いざとなったら記事のエクスポート機能もキッチリ提供されているので何とかなります。つまり Blogger は強くお勧めなわけであります。

アドベントカレンダーについて

前日、22日の記事はののさんで『Blogger へんぴだけど居心地がいい』です。明日24日の記事はいししさんで『Blogger への道』です。

PBロッキーさんのコメント @ PBロッキーの日記

PBロッキー — Sun, 22 Dec 2019 14:48:32 GMT

nikki さんに背中を押されてアドベントカレンダーに登録しました (^-^)

https://adventar.org/calendars/4197 https://pbrocky.blogspot.com/2019/12/TheDaysOfCustomizingMyBlogger.html

nikki さんのコメント @ PBロッキーの日記

PBロッキー — Sat, 14 Dec 2019 12:52:30 GMT

MovableType2Blogger のソースコードあるのはわかったのですが、
私では手に負えないくらい複雑なのであきらめてます。

記事見ていただきありがとうございます。
まだアドベントカレンダー空いてますのでどうぞ。

PBロッキーさんのコメント @ PBロッキーの日記

PBロッキー — Sat, 14 Dec 2019 03:00:16 GMT

おはようございます。コメントありがとうございます。

MovableType2Blogger が停止していて Picasa もこの通りですから、ここで紹介した方法だけでは移行は終わりません。(Picasa Web Albums は正確には Blogger の為に機能が縮小して存続している状況です。)

ググってみたら、MovableType2Blogger のソースコードは Github にあって自分で Google App Engine にアップロードすれば使えるかもです、大変だ… (;´Д｀)

https://github.com/pra85/google-blog-converters-appengine/tree/master/src/movabletype2blogger

nikki さんの Blogger アドベントカレンダーの記事拝見しました。テンプレート改造ネタはいくつかあるので、参加して書いてみようかしら。

nikki さんのコメント @ PBロッキーの日記

PBロッキー — Fri, 13 Dec 2019 14:21:17 GMT

こんばんは、はじめまして。
この記事2019年でも使えますか。
いくつか2019年現在で違う部分があります。
ライブドアブログは無料に一本化されてます。
Picasaも終了。
MovableType2Bloggerが停止していて使えません。

ライブドアブログからbloggerへ移行を検討中です。

Webサイトのデザインをアップデート、ダークモード等に対応しました

PBロッキー — Thu, 12 Dec 2019 12:00:00 GMT

本格熟成4年半のテキストサイト用コード

PB-100の宇宙のサイト群のデザインをアップデートしました。2016年大晦日の大幅なアップデートからのマイナーチェンジになります。

2016年以来、当サイトの HTML タグ構造、Javascript、CSS は、4年半前からブラッシュアップを続けているテキストサイト用のコードをベースにしています。

この3年弱の間に溜まった更新を一気に当てた形になります。このアップデートによって Web ページの閲覧性が更に上がっていることと思います。

ダークモードとハイコントラストモードへの対応

今回の更新の注目点としてはダークモードへの対応です。OS の設定でダークモードを選んだ際に Web ページ側でこれを検出してデザインを変更する仕組みが最近のブラウザには提供されています。

併せて Windows OS と Internet Exproler、Edge 及び Firefox の組み合わせて利用できる、ハイコントラストモードへの対応も行いました。

2017年時点ではほぼ決定版と感じていたデザインですが、3年も経つと野暮ったさが目に付くようになってきていました。しかし、静的 HTML とブログのテンプレートを其々修正する必要があるため長らく放置してしまいました。特にブログのテンプレートは全てで2530行と長大になってしまっていて、なかなか手を入れられないでいました。

次回の大掛かりな更新では、長らくお世話になった Google のブログから静的 HTML と同じように管理するスタイルに一元化したいと考えています。

最後になりますが、並行して hamura.css のアップデートを行いました。ではでは、今後ともPB-100の宇宙をよろしくお願い申し上げます。

ジオシティーズからの転送ではリファラを元に適切なページを表示します、2019年9月末まで

PBロッキー — Thu, 02 May 2019 06:44:00 GMT

昨夕より、ジオシティーズの当サイト跡地からの転送は適切なページに振り分けています。これ以前は常にトップページが表示されていましたが、以降はリファラを元に意図したページが表示されます。

この機能は下記の通り、2019年9月30日まで提供されます。あと5か月ほどです。

2019年3月31日までに転送設定をしていただいたお客様のページについては2019年9月30日まで告知が表示されます。
なお、現在は転送設定の受付を終了しております。ご了承ください。

ジオシティーズからの転送振り分けコード片

当サイトが転送に使用したコードは以下の通りです。汎用で書かれていない部分もありますので、適宜に読み替えて参考にしてください。url パラメータを付与してリダイレクトループを回避しています。もっとスマートな回避法もある筈ですが、サーバサイドは書き始めたばかりですので。

// Node.js + express.js
app.use( function(req, res, next){    
    const flag = 'geocities';
    var ref = req.header('Referrer') || '';

    if( req.param( flag ) ){
        next();
    } else if( ref.indexOf('http://www.geocities.jp/pbrocky544/') === 0 ){
        ref = ref.split( '?' )[ 0 ].split( 'http://www.geocities.jp/pbrocky544' ).join( '' ).split( 'index.html' ).join( '' );
        redirects[ ref ] ? res.redirect( 302, redirects[ ref ] + '?' + flag + '=1' ) : next();
    } else if( ref.indexOf('http://www.geocities.co.jp/SiliconValley-Bay/1859/') === 0 ){
        ref = ref.split( '?' )[ 0 ].split( 'http://www.geocities.co.jp/SiliconValley-Bay/1859' ).join( '' ).split( 'index.html' ).join( '' );
        redirects[ ref ] ? res.redirect( 302, redirects[ ref ] + '?' + flag + '=1' ) : next();
    } else {
        next();
    };
});

pb-100.gaドメインの取得とサイト構造の修正

PBロッキー — Tue, 30 Apr 2019 07:17:00 GMT

.ga ドメインを失いました！(2023/09/07 追記)

ジオシティーズの終了によってページランクを失ってしまったのを機に、Webサイトの構造を大きく修正しました。この間はずっと、16年前に決めたディレクトリ構造を踏襲してきましたが、Google App Engine への移転によってサーバサイドにも手を入れることが出来るようになったお陰で長年の懸案に取り組めました。修正前のページにアクセスした場合は適宜に301リダイレクトされますので、どうぞご安心ください。

更に、当サイトでもついに独自ドメインを取得しました。Web サイト運営開始から16年目にしてようやくです。今後は pb-100.ga からPB-100の宇宙をご利用ください。Google App Engine 提供の pb-100.appspot.com のままでも良さそうだったのですが、Google の検索結果に" - Google App Engine"が追加されるのに業を煮やして無料ドメインを取得しました。

今後とも、ひとつよろしくお願い申し上げます。

記事データベースに『カシオポケコン操縦法』ナツメ社を追加しました

PBロッキー — Mon, 01 Apr 2019 13:26:00 GMT

PB-100関連記事データベースにナツメ社の『PB-100・PB-300・PB-700 カシオポケコン操縦法』を追加しました。

本ページの製作にあたっては chamekan 氏に情報提供頂きました。氏には度々反響や情報を寄せていただき深く感謝しております。(目次画像は同氏のツイートより)

Yahoo!ジオシティーズ終了に伴いPB-100の宇宙のURLを移動しました

PBロッキー — Sun, 31 Mar 2019 13:03:00 GMT

ホームページスペース提供サービス、Yahoo!ジオシティーズの終了に伴い、当サイトは Google App Engine へ無事に移行したことをご案内いたします。

外部サイトへのリンクと、ブログ記事中の URL でまだジオシティーズへのリンクが残っているものがございます。これらにつきましても引き続き最新の URL へ修正して参ります。

今後とも当サイトへのご愛顧をよろしくお願い申しあげます。

PBロッキーさんのコメント @ PB-100の宇宙

PBロッキー — Thu, 07 Feb 2019 14:42:20 GMT

airfewさん、お返事が遅れてしまいました。移植してくださった作品の配布ページなどございましたら是非ご案内下さい。

グラフィックを使っているとのこと、かなり遊びやすくなっていると思います！高速なPB-100でも向きを変えるのに1秒強を要していました。8で振り向くのはナイスアイデアですね。

『ぽあぽあ 544 STEP 版』も承知しております。今は Yahoo!Geocities の閉鎖につき Web サイトの移動が喫緊の課題ですが。必ず。

airfew さんのコメント @ PB-100の宇宙

PBロッキー — Wed, 23 Aug 2017 15:03:05 GMT

ロッキーさんの「トロネコの大冒険4」をPC-1245に移植させていただきました。BASIC+マシン語(CPGグラフィク)で作成しましたが、PC-1245のBASICではPB-100のようにサクサク動作しないので"[8]振り向く"を追加しました。現在は「Mr.T」の移植を画策中です。
『ぽあぽあ 544 STEP 版』の公開を気長に待っております。

アニメーションgifの制作と最適化のメモ

PBロッキー — Tue, 31 Jan 2017 15:41:00 GMT

ライブラリ等で使用する画像ファイルの最適化のメモ書きです。

アニメーション GIF の制作

すべてのフォントとカーソルだけのレイヤーの2枚を用意、設定は置換とする。

無駄に作るとファイルサイズが倍になるので注意。

アニメーション GIF の最小化

どちらも圧縮率は同じで Adobe Image Ready が書き出したものを 14% 程小さくしてくれた。

ezgif.com/optimize tools.dynamicdrive.com/imageoptimizer/index.php

色数の少ない gif → png8 でファイルサイズを半分以下に

gif 画像を png8 にしたところファイルサイズが半分に、これをさらに tinypng.com で縮小するとトータルで 1/10 以下に。49,563 から 3,992 に。

同じファイルを compressor.io で実施したところ 4,345 でした。

256色を使う画像に対してはロスレス圧縮を行う

以上のサイトでは、256色をフルにつかう png では色数が間引かれてしまい画質が落ちてしまう。

ロスレス圧縮なら compressor.io が良さそう。

pbLCD.gif から pbLCD.png に。
gif	png8 化	compressor.io でロスレス圧縮
21,488	13,969	10,216

Windows8.xのライブタイルに対応しました

PBロッキー — Tue, 31 Jan 2017 15:16:00 GMT

遅ればせながらPB-100の宇宙を Windows ライブタイルに対応しました。

ライブタイルは Winodws 8.x だけで利用できる機能です。Windows 10 でも使えたっていいと思うのですが… 職場にしか Windows 8.x が無かったため動作確認に手間取ってしまいました。

PB-100の宇宙をホームに追加する

モダン UI 版 IE でPB-100の宇宙を開く
右下の星マークをタッチ（クリック）
右に出てくる画鋲マークをタッチ（クリック）
“スタート画面にピン留めする”をタッチ（クリック）

Windows 8.x を使っていてホームに Modern UI 版 IE が居ない場合、既定のブラウザを IE に戻すことで Modern UI 版が復活します。

タイルの設定の仕方

タイルの設定を行うことで、サイトのショートカットがホーム画面に追加された際の見た目をある程度コントロールできます。さらにライブタイルを設定すると更新情報などを画像とテキストで表示することができます。

PB-100の宇宙では次のリンクを参考にしてライブタイルを提供することができました。

IE11 での Web サイト用カスタムタイルの作成 (Windows) WebMatrix 3：サイトをライブタイルに対応させてみた - だるろぐ

設定は HTML に <meta> で記述する方法、別ファイルに記述してリンクだけを書く方法があります。今回は管理やファイルサイズでメリットの多い後者の方法を採りました。

設定ファイルは異なるドメインに置くことができるため自前のファイルを配置することの出来ないブログサービスでもタイル化することができます。

Microsoft が提供している www.buildmypinnedsite.com/ で対話的に <meta> を制作できます。しかしブログフィードを notification に変換するサーバが既に停止しているためこの部分を自前で用意します。

notification の生成・配信は Google Apps Script で行いました。Blogger の画像置き場でもある Picasa Web アルバムでは URL パラメータで最適なサイズに変換できるためこのロジックを組むこともできました。

この他に Windows 7～8.1 限定でピン止めされたサイトに特別な機能を追加することができるようです。

ピン留めされたサイトのメタデータを宣言する (Windows)

PB-100の宇宙のサイトパフォーマンス

PBロッキー — Sun, 22 Jan 2017 17:28:00 GMT

前回に続いてモダンで読みやすいデザインと軽快な読み込みを両立する新しいPB-100の宇宙のパフォーマンス測定の様子になります。

Pingdom で計測

PB-100の宇宙で使用しているテキストサイト用のスタイルは読みやすさと軽量さを追求して開発しています。加えて HTML で PB-100 用リストや画面イメージを公開するための CSS + JavaScript ライブラリを読み込んでいます。

Pingdom によると、これらを合わせても上位15%程度の速度を誇っています。

GetMatrix, PageSpeed

GetMatrix

PageSpeed Mobile

PageSpeed PC

ところどころ減点を貰っているのはサーバ側の設定に関することで、無料ホームページスペースを利用している僕にはどうすることもできません。

CSS と JavaScript の一本化と縮小と HTML の空白文字の除去まで、出来ることはほぼやり尽くしているので眺めるだけでした。

modern.IE

modernIE はホーム画面用のタイルの設定がないよ、と減点してきます。本日いそいそと設定したところ Windows10 では設定が反映されません、どうやら Windows 8.x 限定の機能のようです。

Modern UI 版 IE を使うと Web サイトのタイルが設定できました。これ以外の方法ですと簡素なショートカットが追加されます。(2017.1.25)

Google Analyticsが残したCookieを削除する

PBロッキー — Sun, 22 Jan 2017 11:16:00 GMT

前回に続いてリニューアル後のPB-100の宇宙の運営の様子をご紹介していきます。

この想い信じて光に向かって駆けていく

Google Analytics を外した際に併せて行っておきたいのが Google Analytics が端末に保存した Cookie の削除です。この Cookie はリクエストの度に Web サーバに送られるため転送量を増やしページの表示を遅くします。

geocities.jp について僕のブラウザには 288 byte の Cookie が保存されていました。あるページでは 15 回のリクエストをしているのでざっと 288×15=4320 byte の転送が発生していてよろしくありません。

ページの JavaScript に Cookie を削除するコードを追加して後始末します。今回使用したコードは以下の通りです。JavaScript が有効なブラウザで訪問した場合、次の訪問以降では通信量が削減できていると思います。

if (navigator.cookieEnabled) {
    (function( document ){
        var c = document.cookie.split( '; ' ),
            d = new Date( 0 ).toGMTString(),
            kv, i = -1, k;

        for( ; kv = c[ ++i ]; ){
            k = kv.split( '=' )[0];
            document.cookie = k + "=;expires=" + d + ';domain=.geocities.jp;path=/';
        };
    })( document );
};

ちなみに FireBug のネットワークコンソールではリクエストの通信量を測ることができないようで効果を実測で確認することはできませんでした。

今回の施策は、次の記事などで紹介されている“クッキーレスドメイン”という高速化手法を参考にしています。

画像やCSSのようにスタティックなコンテンツはクッキーを有効にしていないクッキーレスドメインから取得した方が優れたパフォーマンスが見込める

Google Analyticsを辞めて読み込み時間を短縮する

PBロッキー — Fri, 20 Jan 2017 14:44:00 GMT

リニューアル後のPB-100の宇宙の運営の様子をご紹介していきます。みなさまのホームページ運営のご参考になりましたら幸いです。個人ホームページ時代の生き残りの皆様、今年もはりきっていきましょう！

PB-100の宇宙では快適なページの読み込みのために Google Analytics 等の（クライアント側で実施する）アクセス解析を辞めました。ページビューの確認には Blogger の統計画面等のサーバ側アクセス解析を利用しています。

ほうぼうに Google Analytics をお勧めしてまわった過去があって恐縮ですが。高度な調査をするわけでもなく、アクセスの少ない非商用サイトですので簡易なサーバ側アクセス解析だけで十分でした。最初は迷いがありましたが有効に使えていなかったサードパーティー JavaScript の読み込みを辞めることができて本当に良かったです。

本記事ではPB-100の宇宙で利用しているアクセス解析サービスをスクリーンショットと合わせてご紹介いたします。

Bloggerの統計画面とGoogle Search Console

Blogger の統計画面

Google Search Console

メインで使用しているアクセス解析は Blogger の統計画面と Google Search Console です。

ブログの統計画面では月に2000件程度のアクセスを頂いています。しかし Siri などの AI サービスの登場に前後してアクセス数が極端に増えているようですので学習用のボットが大きなアクセスを占めているように思います。

Google Search Console では Google 検索経由のアクセス数と検索ワードが判ります。ブログとホームページで併せて月に200件程度のアクセスを頂戴しています。

ちなみに Yahoo!Geocities のアクセス解析は2014年6月8日をもって提供終了しているためホームページ部分のページビューは分かりません（汗

Bing Webmaster ToolsとFeedBurner

Bing Webmaster Tools

FeedBurner

この他に Microsoft の検索サービス Bing のアクセス解析『Webmaster Tools』も登録しています。月々の流入数は僅かに数件でした。

FeedBurner はフィードプロキシというジャンルのサービスです。FeedBurner を挟んで更新フィードを配信することでフィード経由のアクセス数が確認できます。アクセス解析に加えてフィードをクロスブラウザなものに変換する機能、更新情報を Twitter に投稿する機能などが便利です。FeedBurner によるとフィード経由でのアクセスも日に数件程度あるようです。

反響が無くて寂しいから、がアクセス解析をはじめた動機でしたので、収まるところに収まったようにも思います。ではでは。

大晦日の大幅リニューアルからこれまでの変更点のおしらせ

PBロッキー — Thu, 19 Jan 2017 16:29:00 GMT

これまでで最もファビュラスなPB-100の宇宙です

昨年の大晦日に大幅リニューアルしたPB-100の宇宙は今この瞬間も、全国100万人のPB-100ユーザーのみなさまによりファビュラスな体験を提供するべくアップデートを重ねています。

記事ではここしばらくで実施された重要な更新をお知らせいたします。

BASICリストの色分けで捗るコードレビュー

Webフォントを使った pbList

pbPrinter

リニューアルで導入された pbList にも素晴らしいコードの色分け機能がやって来ました。BASIC リストの色分けはひと世代前の pbPrinter からの取り組みです。pbList では機能を整理してファイルサイズを削減しています。(圧縮前の JavaScript サイズが 40KB から 13KB)

また pbList では使い勝手の良い Web Font で PB-100 のルックを実現しています。一方の pbPrinter は画像置換・イメージスプライトと呼ばれるテクニックを使っていました。

PB-100の宇宙のサイト群を縦断して検索できる

Yahoo!Geocities のホームページ部分でも検索窓が使えるようになりました。ちなみに、このPBロッキーのブログや新着情報はリニューアル時点から検索窓が利用可能です。

無料ホームページスペースに導入できる検索 API の調査から行って Google の Custom Search API を利用しています。

さらに Custom Search API の戻り値に不要な値が多かったため Google Apps Script を経由してデータを最適化しています。これにより通信量は半分以下になっていて従量制や低速な回線に優しい設計となっています。

ところで、Google さんの検索 API は無料枠では1日に100件の検索しか出来ません。とはいえサイトのアクセス数もボチボチですのでしばらくはこの状態で大丈夫でしょう…

サイトのリニューアルをしました

PBロッキー — Sat, 31 Dec 2016 15:22:00 GMT

画像は2016年2月5日に開発中のもの、PBロッキーのツイートより

サイトをリニューアルし読みやすさ・表示の速さを圧倒的に改善しました。新しいPB-100の宇宙の軽快なネットサーフィンをお楽しみください。

リニューアルに併せてリンク集にひい氏とよなぷー氏のブログへのリンクを追加いたしました。両氏とも PB-100 用ゲームをコンスタンスに発表されていて頭が下がります。

また　Yahoo!ジオシティーズのコンテンツの至る所に推敲を加えていますので、お気に入りの記事を再読されるのも年始にふさわしいかと思います。

PB-100の宇宙をリニューアルしました

PBロッキー — Sat, 31 Dec 2016 13:07:00 GMT

お待たせしました、PB-100の宇宙のサイトとブログのデザインをリニューアルしました。新しいPB-100の宇宙はさらに読みやすく、そして軽量になっています。

サイトのデザインをリニューアルしたいとはこの1年程ずっと考えていました。以前のデザインが気に入らなくて制作意欲を削いでいると感じていました。しかし数百ページの Web サイトと複数のブログにモダンなリニューアルを施すためには開発体制の刷新から取り組む必要があり時間を要しました。

記事ではリニューアルのポイントをご紹介いたします。

1.さらに読みやすく

今回導入したデザインは、僕がこの1年半に渡って調整を続けてきたテキストサイト用のテンプレートをベースにしています。

フルHDを超えるディスプレイでもスマートフォンやスマートウォッチでも快適に閲覧頂けるように作りこまれています。

また、新たに開発中の PB-100 プログラム公開用の CSS ライブラリを先行導入しています。新世代のライブラリは優れたデザイン性は元より、アクセシビリティにも最大限の配慮が払われています。

ぜひ、リニューアルされたページを開いて新世代の CSS ライブラリのパワーをご確認ください。

2.さらに軽量に

225KBから45KBへ

広く普及したモバイル通信は前時代的な高額の従量制が一般的です。その間隙を縫って格安定額な低速回線も普及しています。時代は再び軽量な Web ページを求めているのではないでしょうか。

このような認識からPB-100の宇宙では軽量な Web ページ開発に力を注いでいます。イメージ、CSS、Javascript のそれぞれに圧縮を施しています。また、そもそも CSS や Javascript が大きくならない設計を心がけています。

軽快なネットサーフィンをお楽しみください！

生まれ変わったPB-100の宇宙はサイトのテーマである『PB-100 ゲーム文化とそのソフトウェア資産を後世に伝える』を一層体現するものになっていると確信します。弛まぬ技術開発と資料研究を続け、また第一線のPB-100プログラマーとして研鑽を重ねていきたいと思います。

今後ともどうぞ御贔屓に。

PBロッキーさんのコメント @ PB-100の宇宙

PBロッキー — Thu, 08 Sep 2016 01:36:24 GMT

>> 8 さん
サイトの表示をようやく復旧いたしました。
ご心配、ご不便をおかけし大変申し訳ございませんでした。

PBロッキーさんのコメント @ PB-100の宇宙

PBロッキー — Mon, 16 May 2016 02:47:14 GMT

> 今後も残しておいてください。
ありがとうございます。サイトをのぞくと Google Code に置いていたファイルが配信され無くなっていました。
なるべく早く復旧いたします。今後ともご贔屓に。

匿名さんのコメント @ PB-100の宇宙

PBロッキー — Sat, 14 May 2016 15:10:37 GMT

なつかしくて、何度も拝見しています。今後も残しておいてください。

大阪市都島区の豚玉とトレーディングカードのお店『やっさん』店主やっさん追悼

PBロッキー — Sun, 10 Apr 2016 20:23:00 GMT

昨年の暮れから度々覗いてはシャッターが閉まっていたので、意を決して隣の将棋会館で訊ねるとやっさんは昨年9月ごろ急逝されていたと知りました。

また一つ“何気ない幸せ”を失ったことが口惜しくて書いておきます。

都島のディープスポット『やっさん』

やっさんは豚玉とやきそば、これに夏にはカキ氷が加わるファストフード店です。

お財布に優しい価格設定と少メニューの脱力したラインナップがなんとも言えません。また店内で食べる場合は麦茶のサービスがつきました。この他に缶ビールも販売していて一杯やることも出来ました。

やっさんのお品書き
品目	税込み価格	メモ
豚玉	250円	8%への消費増税後は300円、肉抜きは50円引きだった
やきそば	250円	8%への消費増税後は300円、肉抜きは50円引きだった
カキ氷	100円	夏場のみ
缶ビール	350円
麦茶	0円	店内で豚玉ややきそばを食べる際のサービス

もうひとつの商い、トレーディングカードの売買

そんなやっさんが異彩を放っていたのは壁を覆うトレーディングカードです。やっさんのもうひとつの商いはトレーディングカードの売買でした。

こちらは最近はなかなか売れていかない、と近年の子供の懐事情に絡めて聴いています。またトレーディングカードはやっさんの趣味(または関心)のひとつでもあったようでした。

店舗の奥には、テーブルが3つとマンガ本とVジャンプの詰まった本棚が並びます。一番奥のテレビでは深夜放送の録画をやっさんが観ていました。この録画のおかげで『ノーコンキッド』に出会うことができました。

主なお客さんは、店頭で豚玉と焼きそばを買って行くパターンです。店舗の中で食べていくのは、例えばトレーディングカードを携えた学生さんたち。

同様に店舗内で料理に追加して缶ビールを注文してやっさんとの雑談を楽しむ、僕のような客もちらほら居ました。

そんなやっさんについて僕の知人曰く「なんでもっているのか分からない、興味がある」そうです。この件についてはその後、売り上げは芳しくないが持ち家で家賃がないのでやっていけている、そう聞いたことがあったと思います。

やっさんに通った日々

4年ほど前に大阪で働き始めて間もなく、チョクチョク足を運ぶようになった『やっさん』。その馴れ初めは、道に迷ってセブンイレブンの所在を尋ねたのがやっさんだった、というものでした。そのときにチラッと覗いた店内の様子が気になって、後日改めて顔を出しました。

間もなく土曜の夜8時過ぎ頃には、閉店前のやっさんに行って、豚玉を食べるのがパターンになりました。

大阪暮らしの2年目に隣の区に越したこともあり、やや足は遠のきますが一月に一度は通っていました。昨年の後半から仕事が忙しくなりさらに足が遠くなりました。

年末が近づき久しびりに覗いてみるとシャッターが閉まっている。そんなことが年を越しても続き、ついに隣の将棋会館で訊ねたのでした。

大阪市都島区のトレカ界隈の子供達に向けて

訃報に触れてまず取り掛かったのが、インターネット上での情報収集でした。しかし、目当ての情報は無くお客さんたちはシャッターの下りている理由を知らないようでした。

インターネットどころか携帯電話すら持たなかったやっさんらしいといえば、あまりにもらしくてむしろ微笑ましいという思いも湧きます。 SNSアカウントとマイフレ(リアルフレンドにあらず)を1人も持たなかったやっさんでした。

都島近辺でトレーディングカードを嗜む子供達に少なからざる影響を与えたであろう、やっさんの消息がこうしてふいに途絶えてしまうことは、ありうる成り行きだったともいえます。そして、なにがしかやっさんに感化されていた思う僕は、情報時代にあってこれをよしとしません。

君達が親しんだ失われた風景を記録しておきます

人類が協同して作り上げる超巨大な知識データベース・インターネットに、まずは僕が書き残しておきます。やがて君たちが失ったものを想うころになった時、君もまた君とやっさんのこもごもを記録してくれるのかもしれません。無数のほかのこもごもとともに。

やっさんのご冥福を謹んでお祈りいたします。

日々是ライトニングなれ！インターネットラジオ『Lightning★Princess』と歩んだ3650日

PBロッキー — Mon, 23 Nov 2015 12:24:00 GMT

全体的に文章とタグ構造を推敲しました。併せてリンク切れだった Wiiウェアサイトへのリンクを web.archive.org に差し替えました。(2019/12/29)

愛聴していたインターネットラジオが2年ぶりに更新されていました (・∀・)b

気をよくして少し書いておきますよ。いぇ、書かせてください。

バックトゥザ2006年

2006年のことでした。僕は東京の煤けた下宿でバイトすらせずに燻っていました。

そんな頃ネットサーフィンの果てに Windows 用に『熱血硬派くにおくん』シリーズのクローンゲームをリリースしている石田裕明氏のホームページに出会い、間も無く彼と友人が放送しているインターネットラジオ『+Lightning★Princess+』(略称はライプリ、記事中では以降はこれを用いる ※)の熱心なリスナーとなったのです。

※ 但し通はラプリと呼称する。

DJプロフィール(うる憶え)

石田裕明氏

ラジオ内では“石田さん”と呼ばれる(記事中ではそれにならいます)
昭和56年生まれ、千葉県君津市出身
千葉工業大学卒、ソフトメディア研究会OB
大学在学中から制作していたくにおくんクローンゲームを公開する Web サイト『いしだ小屋～六畳一間～』を運営
株式会社Miracle Kidz 所属のプログラマー、Wiiウェア『ダウンタウン熱血どっじぼーる』、スマホゲーム『くにおくんの熱血ドッジボール ALLSTARS!!』等を開発
ラジオでは DJ、編集、Web サイト更新まで担当

近衛大牙氏

ラジオ内では“近衛先生”と呼ばれる(記事中ではそれにならいます)
昭和56年生まれ、群馬県出身
千葉工業大学卒、ソフトメディア研究会OB
声優専門学校修了
進学塾講師
ラジオではDJ(いい声)を担当、スタジオ提供(1スタと呼ばれる)
二葉亭四迷よろしく「このへんたいがぁ！」がプリンセスネーム(※)の語源

※ ライプリにおけるペンネームの意味。

インターネットラジオ繚乱期を二人三脚で駆け抜ける

ライプリが第一回放送をリリースした2005年は個人制作のラジオ番組のインターネット配信が盛んに行われていました。

現在はその多くが閉局し、ごく一部が活動の場をビデオ配信に写していることと思います。10年を超えて放送を続ける個人局は稀有な存在といえます。

そんなライプリがどんなラジオだったか、うる覚えながらご紹介します。

2004年10月25日にねとらじの全てのデータがライブドアに委譲され、2005年2月4日にライブドア仕様のサイトデザインにリニューアル。名称も「livedoorねとらじ」になった。さらに、2005年6月にはフジテレビ系列の情報番組「とくダネ!」で紹介され、多くの主婦DJが誕生したといわれる。

終わらない同時代トークの合間に

声優を志望しいい声の持ち主の近衛先生がときに身体を張った話題を提供し、石田さんが小気味いい突っ込みを入れていた。

話題は美少女ゲームやアニメから子供時代に熱中したファミコンゲームやマンガなどのホビーに関するものが中心で、リスナーによるをたより※もそれを踏襲したものでした。

※ ライプリでは、お便りではなくをたよりと呼称する。

そんな合間には、彼らの~~失恋もとい~~恋愛や社会人としての様子がインサートされました。

Pentium3 機を駆り同人クローンゲームをリリースしつつ、大学卒業後は化学系の派遣従業員をしていた開局初期の石田さんは、ゲームプログラマーとなる希望を語りました。

近衛先生は大学卒業後に声優学校を修了しデビューの機会を模索しながら進学塾で講師をしていました。

希望の道はやすやすとは拓けないまでもネットラジオを収録しエンターテイメントを人知れず届けていく姿に当時の僕は励まされ、彼らのようになりたいと憧れました。

インターネットラジオの虜となった僕は第二のライプリを探すも…

懐かしのゲームなどを語る同様なテーマのラジオはいくつもあったと思います。いくつか聴いたりもしましたが結局ライプリに並ぶものには出会えませんでした。DJ の二人の掛け合いが面白く、またどちらも上手い話題や切り返しで盛り上げる力を持っていました。

石田さんのホームページを主な導線にリスナーは増えていき、録音品質が向上したりジングルが入るようになりました。まだラジオで読めていないをたよりの束を溜め込んでしまったぼやきがしばしば聴かれました。

あの二人のように生きていけばよかったんだよ、そう教えてあげたかったやつがいました

Wiiウェア『ダウンタウン熱血どっじぼーる』 Miracle Kidz 2011年7月12日発売

ラジオはコンスタンスに回を重ね僕は何度も聴き返すほどでした。

あるときは実家で引きこもり母と罵り合いつつ…

あるときはリーマンショックのために採用を逃し日経平均に翻弄される儚い我が身と思いつつ…

あるときは一念発起首都圏に出てハローワークに通う心細い日々の友に…

またある時は遠く西日本の僻地で働きながら放送を待ち望んでいました。

2011年、ドサ回りを経て念願の Web プログラミングを身につけ、勝手に石田さんの背中が視えたかと思ったとき、彼は Wii ウェア用のゲームをリリースしてのけていました。

任天堂から貸与された壊してしまったら大変なことになる、という特殊なボードを Core2 Duo の自作機に挿しての困難な開発だったといいます。

一時期の終わり

この頃には石田さんの多忙によりラジオの更新は間延びするようになります。そこからさらに数年が過ぎ、2013年暮れ―僕の社会人復帰が軌道に乗った頃ついにラジオは鳴らなくなりました。

気がつけば僕も自分の道をようやくにして歩き始め、憧れの誰かを必要としなくなっていました。彼らのその後は Twitter などで気にかけつつも、また一つ人生の一時期が過ぎ去ったことを思いました。

2年ぶりの放送を聴いている俺、を視ているマリア様

『くにおくんの熱血ドッジボール ALLSTARS!!』株式会社マーベラス 2015年7月29日～2015年12月14日

そんな折、2年振りに新作がリリースされていることを遅ればせながら知りました。ずっと Windows PC で聞いていましたが、いつの間にか僕は iPad mini を手にするようになっていました。

小さいプロジェクトとはいえメインプログラマーとなった僕は、変わらないトークに心地よく耳を傾けつつダラダラと日曜の午後を過ごしました。

石田さんがプログラムを担当したというスマホアプリ『くにおくんの熱血ドッジボール ALLSTARS!!』はまもなくサービス提供期間を終えると知って慌ててインストールしました。

20年経っても遊べるファミコンゲームとは異なりサーバとの連携が切れたら最期、アプリは遊べなくなってしまいます。

エンディンぐぅ、君は君自身のためだけに這いずり回っていたんだ

20年前の僕にこっそりそのことを教えてあげたら「それはなんて時代になっちまったんだ！」ふた言目には「お前はいったい何をしていたんだ！」と言われてしまうかもしれません。

悪いけど、僕はなにもしなかったし、なにも出来なかったんだよ…

そんな201xではありますが、それでも…すべてのチルドレンに光アレ！

「せぇ～の、マミマミムゥ～～!(※)」

※ ライプリ定番のエンディングコール。放送中で近衛先生が学生時代にアルバイトしていたアニメイトの同僚従業員が魔法少女であり、この名前が由来であることが明かされた。

ご清聴アザース！

それにしても“マミマミムゥ～”ってなんなんですか？LP(※) ください。

※ をたよりの内容によって DJ から投稿者に付与されるポイント。マミマミムゥについて質問するとジャブジャブ貰える、との発言があった。貯めると良い。

パスケースサイズの超小型水彩パレットの制作・工作編

PBロッキー — Wed, 09 Sep 2015 12:40:00 GMT

せっかく水彩パレットを作っても一枚も描いていないのもなんなので、思うままに書き出すと、女体を描いておりました。

どうも、僕です。

紹介編、買出編に続いて、制作の様子をご紹介します。

100均の水彩パレット(& 絵具ホルダー)の切り出し

メインパーツとなる100均の水彩パレットの切り出しは、アクリルカッターであっという間でした。無理な力を掛けてパレットを割らないように注意します。

切り出すサイズをイメージするにはリサイクルショップで50円で買ったパスケースが重宝しました。

パレットも絵具ホルダーも暑さが 6mm あり、これをヒノキの角材と同じ 5mm の高さにする必要がありました。まず、金やすりで 1mm 程の溝を入れていき、ニッパーで余分な高さを落としていきました。このときに使用するニッパーは画像3枚目の黄色いもののような形状のものを使います。

パレットを木枠で覆う

続いて切り出したパレットを檜の木枠に埋め込みます。

木枠のサイズで切り抜いた厚紙を用意してこれをガイドにします。

檜の角材を切り出して 3mm x 5mm を長辺に、5mm x 5mm を短辺に使用します。角材の接点は凹凸を作って組み合わせました。精度が出せず大きな隙間が出来ましたが、パテで埋めるため気にせず進めます。

ガイドの厚紙に入れた状態で、木枠・パレットの隙間にパテを押し込んでいきます。上に重しを載せて硬化を待ちます。

硬化後にガイドから木枠を取り出して、さらに隙間をパテで埋めていきます。

パレットの形を整えるためにこちらの側にもパテを盛ります。

パレットの形を整え塗装する

はみだしたパテをカッターややすりで削って形を整えます。

続いて木枠にはニスを、パレットには白いアクリルスプレーを塗ります。この際にマスキングのため、セロテープなどを使用します。

100均のニスは硬化後もべたつきがあります。全体に透明アクリルスプレーを塗ってべたつきを抑えます。しかし効果の程は微妙でした…

パテ→やすりがけ→塗装の工程は、慣れていないためか何度か繰り返しました。

最後に600～2000番のやすりや研磨剤を使って全体を磨きました。

革の切り出し

続いて革鞄から部材を切り出します。

この革には強度を出すための裏張りがされていましたが、革を濡らすと簡単に剥がれました。

革を濡らした状態で適当な重しでプレスして平らにします。革のたわみを減らして正確に切り出せるようになります。

革のカットにはクラフト用のカッターで十分でした。切断前に刃を新しいものにして慎重に進めます。

また、水に濡れた状態と乾燥した状態では、僅かにたわみが出て長さが変化します。濡れた状態で革をカットしたため僅かに部品と寸法の合わない事態となりました。といっても 10cm の革で 0.5mm 以下の差です。木枠を少しやすりで削って寸法をあわせました。

接着

木枠の位置には補強のため 0.3mm のアルミ板を貼り付けました。ホックを通す穴も開けます。

革に裏側に補強と装飾のための布を貼り付けます。作業はいち面づつ行います。背になる面は開きが悪くなるため接着しないほうが良かったかもしれません。

続いて布とパレットを接着します。はみ出た布を切って、飾りホックのオスをつけます。

絵筆をホールドするための部品を縫い付けて完成です！

最後に

できれば、みなさんの夏休みが終わる前に記事を公開したかったのですが…

それではまた次のコンテンツで！

パスケースサイズの超小型水彩パレットの制作・買出編

PBロッキー — Sun, 23 Aug 2015 03:15:00 GMT

前回の紹介編に続いて、制作の様子をご紹介していきます。

今回は買出編ということで、制作のために買い揃えた材料・消耗品・工具をご紹介します。

100円ショップで購入したもの

まずは 100円ショップ、主にダイソーで購入したものです。

材料

水彩用パレット

メインの材料となる水彩用パレットは100均のものから一部を切り出して使用しました。

現在ダイソーでは水彩パレットは画像の2種類のものが陳列されています。

そして今回の制作に使用したものは左側の大きい方です。こちらの方が薄かったのが選んだ理由です。

買ったばかりの新品を切り刻むなどといった思い切ったことができるのは、100均のおかげです。

筆セット

このうち10号サイズのものの柄を切って、パスケースサイズ(長辺11cm程度)に納まるようにしました。柄は加工の容易な木製でした。

アルミ板

0.3mm厚のアルミ板です。革の内側に貼り付けました。

バネホック(メス側)の取り付けの際にアルミ板を挟むようにして抜けにくくしました。

消耗品

エポキシパテ

100均でちょくちょくお世話になるパテです。保存が難しいため、購入したら早めに使い切ります。

接着剤

金属・革・木・布などに広く使える万能タイプを使用しています。

何種類か購入したなかには、2液を混ぜて使う充填効果もあるというものもありました。

木工用ニス茶色

1日程度が経過してもニスのべたつきが残りました。そのためアクリルスプレーのクリアを吹き付けます。

アクリルスプレー白とクリア

白はパテを盛った水彩パレットと絵具ホルダーに吹き付けました。

クリアは仕上げとして全体に使用しました。

サビ落とし、研磨剤40%配合

研磨用に購入しました。以前は専用のものがあったと思うのですが、現在のダイソーにはサビ落とし用のものしか見つかりませんでした。

茶色の手縫糸

革の色と合わせました。絵筆のホルダーを本体に縫い付けるのに使いました。

革靴用の保護クリーム無色

革製品の保護クリームが無かったため、革靴用で代用しました。

工具

金やすり

平型のやすりです。切り出した水彩パレットやその木枠の形を整えるのに使いました。グイグイ削れて快適に作業できました。

丸い棒ヤスリ

アルミ板にバネホックを留める孔を開けるために使いました。

千枚通し

革に開けた孔を広げたり、孔に通した糸を繰るのに使いました。

カッター台

0.5mm 程度の薄い革を使いましたので、その切断にはクラフト用のカッターで十分でした。切断の際に下に敷きました。

ホームセンターで購入

材料

ひのきの角材 2本

パレットと絵具ホルダーを囲う木枠に使いました。

それぞれに60円程度のものです。

5mm x 5mm x 90cm のものを木枠の短辺に、5mm x 3mm x 90cm のものを木枠の長辺に使いました。

消耗品

紙やすり #40～#2000

目の粗い40番はグイグイ削ることができて切断工具の替わりに使えました。

これ以上に目の細かいものは利用シーンが僅かでしたので100均の紙やすりセットで十分に思います。

工具

アクリルカッター

水彩用パレット & 絵具ホルダーの切り出しに使用しました。

お目当てのサイズにあっという間に切り出すことが出来てとても重宝します。

オルファのナイフもパレットの加工に使っていますが、出番は少なく無用な買い物でした。

木材用のノコギリ替刃

市販のカッターの替刃として使える、ということで選びました。カッターは以前に100均で買っていたものがありました。

木枠の制作と絵筆の切り詰めに使いました。

クラフトショップで購入

材料

飾りホックくわえタイプ

オス側がくわえタイプのバネホックです。

くわえタイプのためオス側の施工はとても簡単でした。メス側は強度を出したり出っ張りの処理が必要でした。

5組入りで500円程度、この他にサイズに合ったホック打ちが必要です。

工具

ホック打ち

購入したホックのサイズに合った打ち具を併せて購入します。

ハトメ抜き

ホックのメス側用の穴を革と内布に開ける際に遣いました。

4本菱目打

絵筆ホルダーを縫い付ける際に、縫い穴を開けるために使いました。

ハンマーとゴム板

ハンマーはなるべく木製かゴム製を使います。

ゴム板はハトメ抜きや菱目打を使う際に下に敷きます。

リサイクルショップ

材料

革の鞄

解体利用するつもりで買ってあった手製の革カバンです。

飾り模様が刻印されていてニスのようなものでコーティングされていていました。

龍の刺繍のある買い物バッグ

ナイロン製のバッグを解体して内張にしました。龍の刺繍がされていたのでこれを選びました。

制作編へ続く…

若干過不足があるかと思いますが、以上が今回の制作のために購入した材料等になります。

初めての試みで試行錯誤しつつ買い足していったので何度もお店を往復することになりました。そして結構な額になったと思います。

こうして記録に残しておくと次の制作の際に買い忘れなどの手戻りが減りそうです。(もう既に他のものを作りたい気分になっています)

それでは次回は最終回の制作編です。enjoy!

パスケースサイズの超小型水彩パレットの制作・紹介編

PBロッキー — Tue, 11 Aug 2015 09:42:00 GMT

パスケースサイズの水彩画材ケースを制作しました

いつもお世話になっております、僕です。

この2週間に渡って取り組んでいた水彩画材ケースが、この朝ようやく完成しました。

4年前からシステム手帳を使い始めたりと文具に関心を持ち始め、今年に入ってからはバッグに放り込んで常に携帯できる水彩画材入れが欲しいと思っていました。

いよいよ辛抱たまらなくなって、エイヤっと材料を買い始めたのは7月27日から。これから3回に分けて、その制作の様子をご紹介していきます。

ちなみに同じものを2つ制作していてひとつは今朝、知人にプレゼントしました。

スペック

パスケースサイズ、厚さは1cmと少し
絵具ホルダー5色分、パレット大、パレット小
11cm 以下に切り詰めた筆と鉛筆を各一本づつ収納
手に馴染む、革製カバーと木製のパレット枠

パスケースサイズにこだわって他は割り切りました。

その上で不便さを超えて携行する愉悦を味わえるように、木材と革を使用しています。そういえばおさがりで貰った父の水彩画材セットは木製のケースでした。

筆は木製のものをカットしてケースに収納します。描く際には鉛筆キャップを反対にはめて延長します。

絵具ホルダーはたったの5色で、例えば赤青黄の3原色の他にはわずかに2色しか色を携行することができません。

緑や茶色といった基本的な色もその場で色を混ぜ合わせて作る必要があります。

仕方がないので、たった5色の絵具ホルダーにどんな色を詰めるか？工夫する楽しみがある、と考えることにします。

水彩パレット自作の世界

さて、水彩絵具はなんといっても廉価。

その上、固まった状態で携行でき、水で溶かして簡単に再利用できる、優れた性質を持っています。

そんな水彩を愛し画材ケースを自作している方たちのレポートがインターネットでいくつも紹介されています。

今回の制作に取り組むにあたって、それらを眺めては構想を練っていました。最後にそのうちからいくつかをご紹介します。

いざ、めくるめく水彩パレット自作の世界へ！

※ 画像は、三鷹の森ジブリ美術館で販売している宮崎駿監督セレクトの絵の具セットについてくるパンフレット。アクリル絵の具など特性の優れた画材は他にもあるが、水彩絵具の扱いやすさは突出している。その辺りが監督の押している最大の理由なのだろう、などと思いつつ…

シガレットケースサイズの極小水彩キット

試作品で本採用にはならなかったそうですが思い切りの良さが参考になりました。完成品を紹介するこちらの記事では、100均のマスカラを使った折りたたみ式の筆を紹介しています。

まんもストーク「只管打走」> 超小型水彩セット開発トリビア

極薄の水彩パレット & 絵具ホルダー

板状につくり付けられた水彩パレットと絵具ホルダー。ページではこの他にもフロッピーディスクケースを使ったものなど自作の水彩画材携行具を紹介している。

自転車野郎のスケッチは楽し > 自作携帯絵の具

システム手帳用の水彩パレット & 絵具ホルダー

バイブルサイズのシステム手帳にバインドできるパレットと絵具ホルダーです。既製品のシステム手帳をケースにできるため、お気に入りのケースとの組み合わせで様々なバリエーションが楽しめます。

りのんのページ > 現在使っている道具

買出編に続く…

ターレンス固形水彩絵の具プチカラー 12色 NCW-12H 水筆入

このように様々なスタイルの携行具が制作される背景には、水彩画材の扱いやすさが大きいと思います。

この夏休み、みなさんもオリジナルの画材ケースに取り組まれてはいかがでしょう？自作の道具を使えばお絵かきの楽しみは倍層です！

さて、完成後に知りましたが携帯性を重視した製品もいくつか出ているみたいです。

このなかで、ターレンスプチカラー12色の商品ページには、次のようなコメントが寄せられていました。

特にこのような趣味のアイテムはそれを持ったときの満足感を満たせなければ、意味がない。薄っぺらいプラの仕切り、全てが安ぽいアイテムの寄せ集め。

¥1,640 という廉価で供給されてい点は素晴らしいです。しかし趣味性の高いものだけに、所有したり携行する愉悦の高い高級志向の製品が望まれているのでしょう。

買出編に続きます。

紀和鏡『あのこをさがす旅』をめぐる旅

PBロッキー — Sat, 07 Feb 2015 17:55:00 GMT

昨年の記事「『ノーライフキング』と『あのこをさがす旅』」の続きです。また、この記事の続き「紀和鏡『あのこをさがす旅』の中間報告、2017年熊野大学の夏期セミナーにて」があります。

書評『あのこをさがす旅』が届く

あのこをさがす旅地平線ブックス紀和鏡, 飯野和好

年末の多忙を縫って図書館に複製依頼していた書評がようやく届いた。評者は、浅川玲子。『子どもの本棚』（1990年8月号・日本子どもの本研究会）

どんな方かとお名前を検索するとまずはホラー小説『リング』『らせん』の女性記者の名前が出てくる。その検索結果をかき分けて、それらしい人物が出てきた。

山梨県立図書館在職中から県内図書館の振興、児童サービスの発展に尽力するとともに、子どもの本、子どもの読書に係わるボランティアグループや研究団体の育成に努めた。この結成、指導したグループが、現在、地域での子どもの読書推進活動の中心となって活動している。また、自らもボランティアとして、自宅に「やまばと文庫」を開設し、本の貸出や読み聞かせを行うなど、子どもの読書推進を実践している。

やまばと文庫で検索するとさらに以下の記事が見つかる。地域文庫という興味深い活動が紹介されている。

◇甲府の浅川さん宅「やまばと文庫」－－孤塁守り児童書３５００冊住宅地図を眺めていたら「一坪図書館」という文字が目にとまった。県立図書館に聞くと、１９７３年から７８年まで県が一般住宅や公民館などに設置していた全国でも珍しい公設民営の小さな図書館のことだという。現在も、地域文庫として運営する人もわずかながらいる。背景を取材した。【沢田勇】「始めた当時は『一坪』という言葉がぴったりでした」－－甲府市西田町の浅川玲子さん（７９）は７２年、地域文庫「やまばと文庫」を自宅の玄関に開設し、地域の子供たちに開放した。MAINICHI 2009-05-05

ファミコンのスイッチが切れた後に

さて、評者はこの物語がお気に召さなかったようだ。当該部分を引用してみる。

一つでも主人公（剛太）が考える場面があると、危機感も感じられ、よりストーリーにメリハリがつくのではないだろうか。
現実と夢が入り混じった物語だが、もっと現実的であれば迫力も出てくると思われる。
この物語の登場人物は、ほとんど自分の位置や思考を持ち合わせていないためか、ファミコンのスイッチが切れた後には、視覚・感覚共に何も残らず心さみしい。

図書館の郵送複写サービスを利用して書評が届く

評者は主人公・剛太に世界や社会とはいかないまでも、失踪した父を見つけ出し家族を再生させる、といったシーンを期待したのかも知れない。

最初のうちアレコレと思案を巡らし冒険に備えるような描写もあったが、次々と襲い来る圧倒的な怪異に流されるまま漂う心細い存在となっていく。このような主人公に実は僕にはあまり違和感も不満もなかった。

あるいは小学生のときの僕は物足りなさを感じていたのかもしれない。しかしそれから20年を経ても読み返させ、ブログを書かせ、調べものをさせている。僕は完全に『あのこをさがす旅』と紀和鏡の虜のようである。

紀和鏡はなぜ『あのこをさがす旅』を書いたのか

イラストは僕の手による作品内ゲームのイメージ

鏡の略歴を見ると一貫して書いているのは SF や伝奇ものだ。このうち僕が手に取っているのは2冊。

『狙われたオリンピック』（集英社文庫、1987年）では、ソウルオリンピックに照準を合わせて生物兵器テロを画策するネオナチ組織と、日本を影から牛耳る巫女集団との暗闘が描かれる。

この巫女集団は、鏡の作品に度々登場する重要なモチーフのようだ。『夢熊野』（集英社、2002年）では、霞の向こうに見え隠れした巫女達が前面に現れて、彼女らの活躍、愛憎、戦争が源平時代の熊野を舞台に描かれる。

先の巫女集団の中心におわすのは、あるいは『夢熊野』の主人公・八百比丘尼の末裔なのかもしれない。

さてさて、以上の流れから大きく外れて、『あのこをさがす旅』は書かれている。

1945年生まれの紀和鏡は、1990年に54歳。二人の娘はこのとき18歳と16歳。年頃になった娘達を他所にファミコンを独占している鏡だったのだろうか。

いや、娘達はそもそもファミコンをねだらなかったかも知れない。はてさて、鏡がどのようにファミコンと接したのか？イメージが湧かない。

そしてどうして唐突にファミコンにまつわる物語を書こうと思ったのだろうか？

『ノーライフキング』いとうせいこうとの接点を探す

剛太とその家族と剛太にとっての“カミ”または“みどり”

僕は、鏡が『あのこをさがす旅』に取り組んだのは『ノーライフキング』を受けて、ではないか？と想像している。

『ノーライフキング』のベストセラーとなったことに比して、消化不良に終わったそのラストシーンなど、自分であったらその素材をこう料理する、といった経過があって、あのような作品に実を結んだのかもしれない。

実はこの点を確かめるまたとない機会があった。 2013年の熊野大学という定期開催のセミナーに於いて、紀和鏡といとうせいこうはどちらも講師として名を連ねていた。

絶好のチャンスを逃してしまった。またしてもあのこは僕の手をすり抜けていったようだ。

PBロッキーさんのコメント @ PB-100の宇宙

PBロッキー — Sat, 31 Jan 2015 03:58:29 GMT

airfew さん、ようこそ。
FX-702P とはいい機体を入手されましたね！

さらに、トロネコや Mr.T を入力いただいて活用いただいて、大変嬉しい限りです。

ぽあぽあ 544 STEP 版の公開の要望はサイト発足から、初めてになるかも。。。次に実家に帰った折にプログラムノートかカセットテープを探してみますね(^-^

airfew さんのコメント @ PB-100の宇宙

PBロッキー — Wed, 28 Jan 2015 14:57:04 GMT

最近FX-720Pを入手したので、トロネコの冒険とMr.Tを楽しくプレイさせていただいています。
Mr.Tの4連鎖はかなり難しいです。
ぜひとも、幻の『ぽあぽあ 544 STEP 版』をwebに公開して下さい。よろしくお願いします。

『ノーライフキング』と『あのこをさがす旅』

PBロッキー — Sat, 17 May 2014 14:16:00 GMT

「紀和鏡『あのこをさがす旅』をめぐる旅」「紀和鏡『あのこをさがす旅』の中間報告、2017年熊野大学の夏期セミナーにて」に続きます。

更新履歴

日付	更新内容
2024/09/02	月刊 ASCII 1990年1月号掲載の映画『ノーライフキング』のレビュー記事と髙𣘺ピョン太氏のポストを収録しました。
2024/04/25	続き記事へのリンクを追記しました。あわせて、『あのこをさがす旅』について言及しているページを紹介します。「あの本のタイトル教えて！（児童書板）まとめ / 紀和鏡（きわきょう）『あのこをさがす旅』(旧 URL)」
2024/03/22	切れていた YouTube 動画のリンクを変更。
2019/12/30	竹熊健太郎氏によるツイートを追記しました。
2015/02/08	『子どもの本棚』（1990年8月・日本子どもの本研究会）掲載の書評を取り寄せて記事の続きを書きました。あのこをさがす旅をめぐる旅かな
2014/06/17	下記に言及(再掲載)を見つけた。紀和鏡『あのこをさがす旅』（理論社一三〇〇円）は著者はじめての児童文学。ファミコンＲＰＧをモチーフにしたＳＦファンタジーだが、後半の展開にはしばし茫然。なんだかよくわからないがこの結末はすごい。
2014/05/15	『子どもの本棚』（1990年8月・日本子どもの本研究会）に書評があるようだ。目次巻頭随筆ワープロらくらく書斎術 / 吉本直志郎 / p1～1 (0002.jp2) 今月の書評『ゆめみるピンピキ』『ふゆめがっしょうだん』『かえるくんどうしたの』『ぼくたちともだちゆうびんや』『大砲のなかのアヒル』『白ネコ横丁冬ものがたり』『あのこをさがす旅』『キョーフのちびっこ転校生』『空の散歩にさよなら』『クジラはなぜ歌う』『クジラの保護と捕鯨』『ペンギンブックスものがたり』『おーい、コンペートー』『いく子の町』『飛騨の絵本』『ゼバスチアンからの電話』『イギリス』 / 渡辺和子 ; 荒川弘美 ; 芦谷美智子 ; 吉井享一 ; 青柳智江 ; 浅野清 ; 浅川玲子 ; 小島陽子 ; 吉田和枝 ; 奥山弘子 ; 山辺昭代 ; 秋山益子 ; 土屋洸子 ; 大澤マツ ; あかね ; るつ ; 山花郁子 ; 茂木茂雄 / p2～18 (0003.jp2)

こんなじゃダメ神様、ファミコンゲームと少年少女が出会うとき

ファミリーコンピュータのせわしく明滅する画面とやかましい電子音、ニューメディアが生み出す新しいリアルに、子供だった僕らは夢中だった。そんな僕らを大人たちは奇異の目で見ていた。ときに露骨に僕らからゲームを奪い取ろうとした。

なかには僕らのことを興味深く観察し僕らとファミコンの物語をモノにした大人たちがいた。そう、ファミコンゲームと少年少女が出会うとき、そこにドラマが生まれる。そしてそのドラマを書き残すことは子供である僕らの手に余った。僕らは僕らの側に立ってくれる語り部を必要としていた。

NAN-CHATTE!!

ファミコンゲームを取り入れた作品

さて、ファミコンゲームを取り入れた作品を2つ紹介したい。ファミコンゲームの登場する物語作品は数あれど、このふたつはいつまでも気になり続ける作品です。

一方は著名で映画化もされた。もうひとつは、ずいぶんマイナーになってしまうみたいだ、言及する人はいない。故に、両者を併記したレビューなどは、少なくともインターネット上では見ない。

日付	出来事
1987/01/26	『ドラゴンクエスト2 悪霊の神々』が株式会社エニックス（現スクウェア・エニックス）より発売。
1988/02/10	『ドラゴンクエスト3 そして伝説へ…』が株式会社エニックスより発売。発売日には量販店の前に数キロメートルの行列ができるなどの社会現象を巻き起こした。(wikipedia より)
1988/08/10	『ノーライフキング』発行。いとうせいこう著。新潮社。竹熊健太郎氏によると、執筆は一年以上前に終えていたとのこと。
1989/12/16	映画『ノーライフキング』公開。市川準(監督)。アルゴプロジェクト(アルゴ・ピクチャーズ)。
1990/04	『あのこをさがす旅』発行。紀和鏡。理論社。

ノーライフキング

ノーライフキングいとうせいこう河出文庫 1988年

― 大ヒットファミコンゲーム（小説ではディスコンと呼ばれる架空のゲーム機が登場する）ライフキングの伝説にあるとき呪われたカセットが存在するという噂が流れる。

― クリアできなければ死んでしまうという噂が全国を駆け巡り子供たちは狂騒状態へと突入する。

原作は、トレンディーな感性でマルチなタレントを発揮する（当時）いとうせいこう氏。いたこ状態になって作品を書き上げたという。

まず映画に出会う

ノーライフキング VHS 市川準キティビデオ 1992年

さて、僕の父はこの当時、月刊アスキーを購読していて僕もそれをわけもわからずに読み込んでいた。ゲームの紹介記事や加藤洋之 & 後藤啓介氏の4コマ漫画にイラストを読んでいた。その記事の隅に映画評があったのを覚えている。記事ははじめてコンピュータを正しく描いた作品として評価していた。

まもなく近所のレンタルビデオ屋(平安堂長野大橋店)で借りて作品を目にすることとなる。この頃は父にねだって様々な映画やアニメを目にしていた。ラストシーンの音楽と風景の続くシーンなど、よく分からない、といったところが当時のおぼろげな感想だ。

ファクトリリィ― 加藤洋之&後藤啓介画集 DRAGON MAGAZINE SPECIAL 1989年

遅れて原作の小説を手にするのは、確かとなり町にブックオフが進出した高校時代だったと思う。小説は再版を重ねていて藤原カムイの装丁によるハードカバーが最も最初のものになる、これを初めて手に取った。

小説は投げっぱなしたように物語は終わり、映画版では狂騒状態の終焉と日常への回帰が描かれる。

DVD 化はされていないので、オークション等を利用して VHS 版を手に入れるしかない。また、鈴木さえ子による映画音楽が CD 化されていて、僕も少し前に購入して聴き込んでいる。劇中に挿入された児童の合唱による『こんなじゃダメ神様』はチロリン・アンソロジーに収録されている。

ノーライフキング・ノ・ミュージック鈴木さえ子 with TOMISIRO ミディ 2013年

チロリン・アンソロジー1986-1987 オリジナルレコーディングのリマスター SOLID 2014年

Media Break Movie
世紀末の日本の子供たちを描くノーライフキング

実家に保管していた『月刊 ASCII 1990年1月号』452ページの切り抜き．初出は x.com．

全国につながるコンピュータ・ネットワークを持つ学習塾は，子供たちの情報交換の場だった．
物語のカギとなるソフト“ライフキングの伝説IV”．原作には詳しい記述はないが，映画ではアクション RPG として描かれる．
監督の市川淳は CF 出身．劇場用映画の監督は3本目になる．
“あすなろ会”の授業はすべてコンピュータを介して行われる．いまノートはフロッピーディスクにとって代わられたのだ．

これは，日本映画史上で最も多くパソコンが登場した映画である．
原作は，昨年の夏に新潮社から刊行されたいとうせいこうの同名小説．かなりの話題になったので，読んだことのある人も多いだろう．ただ，やはり原作と映画は別もの．特に僕にとっては．これが解釈の違いというものなのだろうが，ずいぶんと異なった印象を受けた．
「呪われたファミコンソフト“ノーライフキング”．解かないと死んじゃうんだって…」子供たちの持つ噂のネットワーを軸に，大人たちも巻き込んで巨大な何かが静かに動き出した…．
ストーリーについてはこれ以上触れない．現代の子供とそれを取り巻く日本の社会が，どちらかというと淡々と描かれている．限られた時間が勝負の CF 界を生き抜いてきた監督とは思えないほどだ．
背景となる社会の描写には，かなり気を使っているようだ．もちろん20年近く前に主人公と同世代だった僕には，共感できる部分と，すさまじい違和感を感じる部分とがある．終業式，夏休みの水泳教室，放課後の寄り道，自分専用の AV システム，留守番電話まで備えた子供部屋，完全にコンピュータ化された学習塾，どこか浮いている周囲の大人たち．これが現代の子供たちの世界というものなのだろう，きっと．
ちなみに，コンピュータに関連したシーンは，“かなり”正確に描かれているといえよう(というか，今までのものが，あまりにもいい加減だっただけだが)．なお，映画に登場するゲームや CAI システムの画面は，すべて X68000 のもの．画面制作は原田大二郎だが，我らがログイン編集部も協力しているという(ただし，クレジットには登場しない)．40台のマシンが並ぶ学習塾の教室シーンは，壮観でさえある．
パソコンマニアを自任するなら，これだけでも見ておいて損はない，かもしれない．
(吉田)
ノーライフキング，12月中旬より公開予定

高橋はプログラマーのころ、映画「ノーライフキング」中に出てくるゲーム「ライフキングの伝説IV」のプログラミングを担当させていただきました。ゲームの原画はCG作家の原田大三郎さん、ドット絵はファミ通デザイナーの鑓田準次さんでした。この仕事を最後に高橋はプログラマーをやめました。

あのこをさがす旅

あのこをさがす旅地平線ブックス紀和鏡飯野和好

― ファミコンゲームをしている最中に突然聞こえてきた、女の子の声、その声にいざなわれるように、少年少女の冒険が始まる。

こちらは荒唐無稽な作品で、主人公の少年少女は、実際にファミコンゲームの世界を旅することになる。

― それは体育館に現れた世界の裂け目からだった。

そして主人公の日常は脈絡もなく(ランダムに)ゲームの世界を行き来するカオスなものとなる。8bit ゲーム機特有の唐突な演出が僕らを熱狂させたが冷静に見ると理不尽極まりない。まさにそんな感じで物語は進行していく。少年たちはゲームの世界で都合よく勇猛な戦士や恐るべき魔法使いになるといったこともなく、あてどなく彷徨い怪異に遭遇していく。

そういえばネバーエンディングストーリーでも、主人公バスチアンは美しい剣士としてファンタージェンに召還されるが、最後は何もかもを失い自らの再生と人間世界への帰還のために心細い旅をすることになる。

― 物語（ゲーム）のクライマックス、黄金の城で＜ほんとうのこと＞を見抜き帰還した少年達は、しかし相変わらず広がり続ける世界の裂け目を目にする。

― 主人公たちが一足先に体験した怪異は、まもなく町中の人たちが経験することになる。そしてこの怪異はいったいどこまで広がるのか？

― 体育館の穴は拡がりつづけ、そして世界はゆっくりと変容していく。

荒唐無稽でありながら、読後に清涼感があるのが不思議です。

作者の紀和鏡

夢熊野紀和鏡集英社 2002年

作者の紀和鏡に俄然興味がわく。児童文学はこの一作だけで80年代には SF やミステリーを、2000年代に入ってからは源平時代の熊野を舞台にした大作をものにしている。

ネット上にほとんど反響を見ないが、もっと読まれて語られてほしいと思う。

ちなみに挿絵を担当したのは飯野和好氏。90年前後は彼の作品をよく目にした。作品を見るとアーリー'90の甘酸っぱい気分が思い出されます。

小学校の共同購入で出会う

知のモラル東京大学出版会 1996年飯野和好氏が表紙絵と挿絵を担当

この作品に出会ったのは、小学校の共同購入でだった。当時、僕の小学校ではふた月に一度程度だったか、担任が児童書の書名の書かれた封筒を配っていた。書名のほかにチェック欄と値段が書かれていて、僕は思うままにチェックを入れるとその合計金額を袋に入れて後日担任に提出する。しばらくすると本が届いた。このような出費について両親は寛大でした。

さて、僕の手元にある本は実は二冊目になる。最初に共同購入したものは、いつの間にか見当たらなくなっていた。

― これもあのこの仕業なのだろうか？

PB-100が大活躍するマンガ『WAVE』読みました

PBロッキー — Fri, 02 May 2014 14:22:00 GMT

PB-100 が活躍するらしい漫画、『WAVE』を遅ればせながら読みました．

あらすじ

『ウェーブ 1』THE SEIJI ヤングチャンピオンコミックス 2007年12月

ときは現代(2006年頃か？)― IT産業の日向で、影で、隅っこで活躍する 3 人の男達．その一人、堀川高文は物語冒頭で、自らが率いるラブゲート社の株価不正操作の疑いで逮捕され、、、

その後の 3 人の波乱万丈を予感させつつも物語は一旦、1985年夏、高校時代の彼らにフォーカスする．

得意なパソコン技術を駆使して、違法コピーなどの裏ビジネスでのし上がろうとする七転八倒の青春時代が以降 2 巻にわたって描かれる．

おや、この時間軸の動きは、先回紹介した『ノーコン・キッド～ぼくらのゲーム史～』(テレビ東京)とよく似ていますね．

連載は打ち切り？第 3 巻が未刊行･･･

すでに連載は終了し、単行本は 2 巻まで出ていています．連載の最後のほうのエピソードは 3 巻が出ていないため、いったい主人公達がどのような決着を迎えたのか？知ることはできません．

漫画家で本作で作画を担当した THE SEIJI 氏のサイトに連載終了の経緯について該当の記録を見つけました．

ＷＡＶＥ第一部完

今回描き上げた話で、とりあえず一息つくことに。

で、監修さんのご尽力で何とか第一部完的な話にまとめることが出来ました。

理由は…皆さんが当然想像するであろう「打ち切り」的な話ではなくて、こちらの都合です。確かにそんなに売れてる作品ではないのだけど、烈に移ってからはアンケートは悪くないようだし、編集からも雑誌に必要な作品だとお言葉頂いております。いやほんまに、１０年続けろといわれておりますですので。

しかし体はひとつしかないので、月産枚数にも限界があるということで…とりあえずわがまま言わせていただきました。３巻出るかどうかは未定ですが、再開は多分あると思います。大好きな作品ですんで。とりあえず、今までのご愛読に感謝です。ありがとうございました～っ。

再開について、期待してよさそうな書き込みです、、、

しかし、主人公のモデルの一人、ホリエモンが受刑を終えて、体型はスリムになり雰囲気もガラッと変わって活動をはじめています．現実の方が先に行ってしまって、ここからまた勝負するのは難しいんじゃないかな、とも思います．

見事な絵日記につられ氏の最近の日記を拝見すると、事務所の移転からDIYの日々が写真付きで綴られています．しばし魅入ってしまいました．

監修を担当した藤下真潮氏のWebサイトにも連載終了に関する日記を見つけました．

氏は WAVEの時代という漫画作品の補完ページを公開しています．PB-100 の画像検索にピックアップされるのでご存知の方も多いと思います．

建前としては年明け頃に第２部スタートの予定です。奇跡の第３巻は一応出版される方向性で動いております。しかしながら今回の３４話は話数の関係で収録されないと思われます。てなわけでこれも幻の３４話かな(^^;;;;

もう少し具体的に再開の予定に言及されています．残念ながら第 2 部はまだありません．

近過去へのたび

『ウェーブ 2』THE SEIJI ヤングチャンピオンコミックス 2008年7月

この時代に郷愁感のある世代がそれなりの社会的地位を得つつありますから、今後もこういった80年代から90年代初頭までの近過去を扱った作品は増えていくと予想します．

先の記事でも触れましたが、僕もそんな作品をものにしたいです．平成零年を舞台に、小学生の主人公達がファミコンやドッジボールに熱中し、ミニ四駆を削り、ビックリマンチョコをほうばる．

遠景に見るおねぇさん達は、肩パッドが入り眉が太く高飛車．男達はそんな女性の気を惹こうと必死．土地成金の坊ちゃんが、高級車を買うけどどこかちぐはぐで．

慢性的な体の凝りが直ったら取り組みたい、そう以前のブログで書きました．そして凝りは少しづつ癒えています．

それでは、クソッタレの 201x 年を生きるすべてのチルドレンに、アテブレーデ・オブリガード、キャンセル、エターナルフォース･ブリザード．

ノーコン・キッド～ぼくらのゲーム史～

PBロッキー — Sun, 03 Nov 2013 12:26:00 GMT

ソワソワが止まらない深夜ドラマ

テレビドラマ『ノーコン・キッド～ぼくらのゲーム史～』テレビ東京 2014年

行きつけの豚玉屋で録画を第四話まで観て以来、気になってソワソワが止まらないドラマがある。テレビ東京の深夜ドラマ、『ノーコン・キッド～ぼくらのゲーム史～』だ。

ドラマは1983年から始まり、2013年までの30年間を描くという。各話は主に、主人公達がゲームに熱中した青春時代のエピソードが語られる。そしてオープニングやエンディングに現在、つまり2013年の彼らの状況が断片的にインサートされる。

主人公の一人は高校時代にコンピュータ・プログラマになるという夢を語り、2013年には巨大 IT 企業のトップとなっている。しかし、企業のサービスでの違法行為が取りざたされ連日報道番組を賑わせることとなる。

ドラゴンクエスト3の頃から、プログラマーが子供達の憧れの職業に躍り出た。ということをマンガ『ドラゴンクエストへの道』に絡めて紹介してますのでよろしければ。 html5用ゲーム制作のイベントではしゃいできました＼（^o^）／

近過去の再現は

映画『バブルへGO!! タイムマシンはドラム式』2007年2月公開

僕は主人公達の 10歳年下になるので、この時代は小学生の視点から知っている。当時のファッションや街並み、ゲーセンの描写、話し言葉の再現についつい目が行く。映画『バブルへGO!!』程ではないが頑張っていると感じた。

また、この時代に作られたドラマにありそうな、演出が使われていたりして、おぉっと思うこともある。そうそう、4gammers のインタビュー記事で知ったが、各話で監督が交代していて、それぞれに個性的な演出をしているという。

TVドラマ「ノーコン・キッド」は，今だからこそ作れた作品。原案・シリーズ構成・脚本を担当した佐藤大氏とプロデューサーの五箇公貴氏に思いの丈をたっぷり語ってもらった

クソッタレの201x を生きながら

近過去を扱ったものは面白い。

この時代の僕は、ファミコンに明け暮れる小学生だった。両親とも公務員で経済的に恵まれた子供時代を送ることができた。情緒的には、絶えない夫婦喧嘩、家庭内暴力から別居、そして離婚をしているため、決して恵まれているとは思わないが。願わくば、この時代に戻り、ずっとこの時代を生きていたい。

『昭和40年男 2013年 08月号』クレタパブリッシング

少し前に昭和40年男という雑誌がコンビニに並んでいるのをパラパラ眺めましたが、そう思う人は案外多いのだな、と思っています。先には東京オリンピックも控えているけど、基本的には輝かしい過去を振り返り、往時のプロダクツを慈しみながら生きていくのが、絶頂期を過ぎた国に生きる人なのではないかな、と考えています。

音楽とビデオの詰まった iPhone5 をいじりながらも満たされず、1000円もした VHS テープや、メタルテープのことをしみじみと思い出す。 80年代製のテレビをヤフーオークションで落札して、中身を液晶テレビに入れ替える。 3D CNC で60年代風の筐体を削りだして、そこに国内メーカーのインターネット機能つきラジオを組み込む。中身はソニータイマーのせいで5年で故障するけど、筐体の方は高価な一点ものなので、また中身を買ってくる。

そうやってお気に入りの時代の調度に囲まれて、クソッタレの 201x 年を生きながら、もうひとつのもっとも自分の生きたい時代を生きる。そんなことをしている日本人を外国人が見てクールだね、ってなったとき、ファッションの中心地フランスのように老いながらも尊敬を維持している、そんな先進国になれんじゃあと、職場ではしつこく語っています。最近の僕は。

話を戻して

さて、ノーコン･キッドとは全く関係の無い個人的な想い込みを長々としてしまったが、実はちょっと関係がある。ドラマの主人公達はバブル期に青春を過ごし、キャリア形成のきっかけを掴みました。

かくして2013年に至った主人公達がいったいどんなこれからを思い描くのか？青春時代をどう振り返るのか？期待と不安がない交ぜの、ソワソワが続いています。

平成零年、そのための工程

4Gamer：
作品の外側にもドラマが盛りだくさんですね……。
一方で，「このドラマは俺達がやりたかった！」みたいに悔しがっている人も多そうな気がします。
佐藤氏：
いるかもしれませんね。そういう人はぜひ，それぞれの“ゲーム史”をバンバン作ってほしいんですよ。映画でもいいし，小説でも，漫画でもいいんです。実際のところ，今は小説が多く出てるじゃないですか。「僕と彼女のゲーム戦争」とか。あれはあれで良いなぁと思います。作品の中で「HALO」なんかをバリバリ遊んでいるのを見ると，羨ましいことこのうえないんですよ。今回は洋ゲーには一切触れられませんでしたから，なおさら（笑）。

実は僕も、平成零年という架空の世界を舞台に、90年前後のカルチャーをひたすら遊びまくる子供達を描いたマンガを制作したい、と考えていました。

なので、ノーコン・キッドには先にやられてしまった、という思いがあります。なんてことを言いつつも、ここでは『ゲーム拳ロッキー』というゲームマンガを公開しただけの僕ですが。おまけにプログラムの開発やサイトの整備も滞っています。これに関しては、たまに覗いてくださるみなさまには大変申し訳なく思います。

僕の生産性の低さには、慢性的に続く背中から後頭部にかけてのコリが少なからざる影響しているようです。このコリは10年以上前に肉体労働からデスクワークに移ったときからあり僕を苦しめています。今年はこのコリから解放されるべく体操やら通院やらに取り組んでいます。

体をリフレッシュしてエネルギッシュに闘える体制を整えます。ではでは、今後ともご贔屓に。

Saturday Night Aventure 攻略マンガ「ゲーム拳ロッキー」ポケコン探偵倶楽部

今回は一度気持ちを吐き出せてよかったです。ずっと開発やら猫の世話やストレッチで忙しくていけません。

タイニー感あふれる Web サイトを作りたい！

PBロッキー — Mon, 01 Apr 2013 14:57:00 GMT

この狂った世界でたったひとつ、、、 pure love

pbPrinter.css を NDS Browser で表示．なにぃ～！まるでサーマルプリンター FP-12T で今まさに印字されたかのようだぁ～～！！

ど～も、僕でした．

年を越して随分経ってしまいましたが、皆さんいかがお過ごしですか？僕は、やや元気です．

はい、ここのところはずっと忙しく PB-100 の宇宙に向き合うちょっとした時間も持てずにズルズル来てしまいました．

あともう少ししたら状況が改善するかもしれません．もし改善しなかったら、、、あいつはいいやつだったと銀杏並木の先のマリア様をみたら思い出してください．

では、はりきっていってみようっ↑↑

ところで最新ゲーム機を買いましたYo!

ニンテンドーDSブラウザー (ニンテンドーDS用) 2006年7月

去る正月は吉日、僕の手元に最新ゲーム機がやってきました．そいつの名は Nintendo DS！あのゲームボーイ・アドバンスの後継機です！！

早速 Amazon で NDS 用 Web ブラウザを購入してネッツ・サーフィンに活用しています！！！携帯ゲーム機用のうえ 2006 年の製品だというのに、なかなかしっかりと Web サイトを表示してくれます．

ちなみに sofmap にて中古で 1,900 円。ブラウザは Amazon で 1 円と送料でした．大変、リーズナボゥ～です．

Opera 8.x のバグに遭遇

ニンテンドーDSブラウザー (ニンテンドーDS Lite用) 2006年7月

そそくさと PB-100 の宇宙を閲覧したところ、pbDisplay.css でキャラコードが後の方の文字が表示されませんでした．どうも background-image が扱える画像のサイズ制限に引っかかっているようです．

同様の問題はデスクトップ版の Opera 8 でも確認できました．(NDS Browser は Opera 8.5 をベースにしている．)これは回避できない問題ではないのでいずれ解決します．

この他には読み込みに時間がかかる点が気になりました．css と js はそれぞれひとつにまとめ、アイコン画像を css スプライトにまとめる、といったチューンアップをいずれやっていきたいです．

問題といえばそのくらいのもので、pbPrinter.css で PB-100 用プログラムリストがビシっと表示してくれるのは壮観でした．ちょっと遅いけど．

開発/HTML仕様ニンテンドーDSブラウザーWiki

Tiny 感溢れる Web サイト、それが俺達のホライゾン

Android SDK の Android シミュレータでサイトの表示を確認する．画面サイズは QVGA の 240x360 サイズ．Tiny なデバイスでもバッチリ．

最近は、PC 用サイトとスマホ用サイトを巧みに表示し分ける Web ページが増えてきました．そのようなサイトは見易かったり、読み込みも早い場合が多く安心感があります．

PB-100 の宇宙でも昨年にスマートフォン対応を済ませました．これで、出先にちょっと PB-100 情報を確認したい！という皆様のニーズにもバッチリ応えることができます．素晴らしいですね．

個人ホームページ時代の再来？

ところで、スマホ対応を済ませたモダ～ンなサイトはすぐにそれと分かるようなデザイン上の共通性があるようです．

テキスト中心のすっきりしたデザインになっていて、スマホのような縦長の小さい画面で閲覧すると、左右の追加情報部分が無くなって横幅一杯にメインの内容が表示されます．

僕にはこのようなデザインに、個人ホームページ時代の再来のような感覚を覚えるときがあります．今時感・オサレ感がやや鼻につきますが．

個人ホームページ時代の Web ページはテキストが中心で、左右の情報バーといった手間をかけることはあまり無く、情報は画面一杯に上から下へと表示されていました．

デスクトップパソコンからタブレットにスマートフォンといった様々な画面サイズに対応しなくてはならない、それもなるべく手間をかけるわけには行かない．モバイルにはなるべく軽いページを表示したい．

そんな要請から新しい Web 手法の流れが生まれています．

今時の Web 野郎風情の何するものぞ

そんな成果をときについばみつつも、ときに斜に構えてみて、今時の Web 野郎風情の何するものぞ、といった心意気で、NDS Browser で表示を確認してみたり、というのが最近の僕です．

最新の成果を取り入れつつも、個人ホームページ時代の熱いハートを受け継ぐ、そんなホームペェジを模索していきたい！個人ホームページ時代のワクワク感をいつまでも滲ませていたい！ついでにソーシャル爆発しろ．

ではでは、本年もよろしくお願いいたします！

元旦（+3ヶ月）

いつの間にやら、エイプリルフールですが、嘘もなく、ただフールなだけ．

ナイコンさんのコメント @ PBロッキーの日記

PBロッキー — Thu, 28 Mar 2013 16:05:28 GMT

このコメントは投稿者によって削除されました。

モバイル対応とデザインの更新

PBロッキー — Mon, 24 Sep 2012 15:01:00 GMT

PB-100 の宇宙のデザインを更新しました．

PB-100 筐体に使われている淡いカラーの組み合わせから一転、モノトーンな色使いにしました．

見えずらいころでは、モバイル対応を行いました．スマートフォンでスクロールができない、といった致命的な問題が解消できたと思います．

小型デバイス向けに css を追加しましたので、横 240px といった環境でも快適に閲覧ができると思います．

webレイアウト、プログラムリスト、お知らせ

PBロッキー — Fri, 14 Sep 2012 12:52:00 GMT

Web ページのレイアウトの変更

ど～も、PBロッキーです．ここしばらく時間を見つつサイトのデザインをいじっています．

PB-100 の宇宙では 2009 年頃を転機に、個人ホームページ時代なサイトから現在の形へとアップデートを続けてまいりました．

メインコンテンツとメニューが縦に並ぶ 2 カラムとしたのはそのときです．

あわせてディスプレイサイズが横 640px までの環境で快適に閲覧できるよう、横幅を固定の 619px としました．

さて、Web サイトのレイアウトには、いくつかの手法があってそれぞれに一長一短があります．（僕が 2009 年に PB-100の宇宙をいじっていたときは、固定幅レイアウトのほかにはリキッドレイアウトの話題を良く見た気がします．）

このたびは、最大サイズを横 619px とするフレキシブルレイアウトとしました．

すると画像のように、横幅をムギュっと縮めてもレイアウトが崩れません．この状態で Safari 3.2 のブラウザの幅はスクロールバーの幅を含んで 346px です．

フレキシブルレイアウトの弱点は、 ie6 以下のサポートができない点です．これは、max-width といった css 指定が ie6 以下にはないためで、画像のサイズをカラムに合わせて変更することができません．( js を使って画像のサイズを変更することは可能です．)

ということで、ie6 以下については、ブラウザの表示エリアの幅が 640px 以下だとレイアウトが崩れたり、イメージがはみ出したりしてしまいます．このようなケースはごくごく限られるため、この辺であきらめるとします．

最後に、このデザインの変更はまだ反映できていません．サイトが（ pureCssPopup のための変態的なタグ構造のため）スマートフォンでスクロールできない、という致命的な状況なのでさっさと更新しなくちゃいけないのですが、、、

Web制作者は知っておきたいwebサイトのレイアウト7選 2011/03/29 ギャラリーにエフェクトを設定しました

pbPrinter ( pbListImageMaker ) のアップデート

そんなサイト構造にしていて気付いたのですが、pbPrinter にエラーを発見しました．

pbPrinter は表示エリアのリサイズ時には、それに合わせてシート数やシートあたりの横幅を自動で変更します．この部分でエラーが起きていました．

また ie では <pre> タグ内にできた <div> （などのブロック）要素のサイズの計算が他のブラウザと異なり、フレキシブルレイアウトを崩してしまう、問題も発見しました．

タグを遡る処理を追加して、<pre> タグ内に <div> を置くことがないようにしました．

あわせて、<pre> タグ内の改行文字が ie と他のブラウザで異なるため <pre> タグでコードを囲んでいる場合 ie で正しい改行位置を取得できない不具合を修正しました．

また冗長なコードを修正し負荷を抑えるようにしました．これは、複数のプログラムリストを処理する際に顕著です．

現在 float:left で配置している PB フォントを絶対配置に変更すればブラウザのレンダリング負荷の点でさらに有利に思いますが、これについてはまだ後日．

PB-100 活動のこれから、つまり 100活

ここしばらくみっちりと js 等のフロント技術をやってきたおかげで、PB-100 の宇宙の発足当初には思いもよらなかった成果がでるようになってまいりました．

この pbPrinter などは、サイト公開当初から切に欲しかったものです．

今ならもっと難しいことも視野に入ってきつつあります．これからもジワジワやっていきたいと思います．よろしくお願いいたします．

お知らせ

最後に、ひい氏による PB-100 ブログ PROGRAMS for PB-100 をご紹介いたします．

ひい氏オリジナルの PB-100 用ゲーム作品を公開しているブログになります．

社長業の傍ら、コンスタンスにゲーム作品を発表されている、ということで僕も見習わなくてはいけません．

ゲームの紹介等も大変見やすいので、まだご覧になっていないそこのあなた、ぜひ一度ネッツサーフィンしてみてください．ではでは～

PB-RACER for PB-100

pbListImageMaker をアップデートしました

PBロッキー — Mon, 13 Aug 2012 05:14:00 GMT

お久しぶりです、PBロッキーです．

このたびは、PB List Image Maker を修正しましたのでご報告いたします．

pbListImageMaker をPB-100の宇宙で使い始めました pbListImageMaker の関連記事

その前に PB List Image Maker って？

PB-100 と FP-12T

PB List Image Maker はブラウザ上で PB-100 用プログラムリストを表示することができる、というツールです．素晴らしいですね！

PB-100 のキャラクタセットは非アスキーで特別なキャラクタを含みます．PB List Image Maker は、このような特殊文字を含むプログラムリストを、Web上で正確に流通させることができます．

しかも、まるで FP-12T 等のサーマルプリンタで出力したような見栄えで表示してくれます．

ie で正しく表示できない問題を修正

さて、前回の記事では正式公開に向けてまずは手元で使う、ということでしたが、案の定、問題を発見しました．

ie では画像のようにリストが崩れてしまう、という不具合が発生していました．

これは html 中の改行の扱いがブラウザによって異なる、というのが原因でした．

html 中の改行情報が ie では失われてしまう

ie ではブラウザによって改行が半角スペースに変換されていました．このためにリストの行の終わりを調べることができません．

ちなみに <pre> タグ内のテキストについては半角スペースに変換せず改行情報を保持しています．諸般の理由で <pre> で囲むのをやめたのですが、ie でのチェックをしないままにリリースしてしまったのが直接の原因でした．

この問題については、<br> タグを検出して改行を取得するようにしました．

連続するスペースが ie ではひとつにまとめられてしまう

この問題は、ie と他のブラウザで PB List Image Maker のステップ数カウント機能が示す値が異なるので気付くことができました．

半角スペースが連続する場合、を使うようにしないと、複数の半角スペースがひとつにまとめられてしまいます．（画面の見栄えだけでなく js から取得できるテキスト情報からすでに．）

特殊文字コード表

どうして空白ノードが入るのかというと、HTMLブラウザ等でソース中の改行を半角スペースに勝手に置き換えるという機能があり、そのときの仕様をいまだに継承してしまっているのです。

以上の問題は以前の記事を公開してまもなく気付きましたが、多忙にかまけてズルズルと放置してしまいました．

今回、盆休みということでえいゃっと修整しましたが、文字コード周りには苦しめられました．<pre> が使えないケースがあったり、使えるケース・使えないケースに両対応するとなると途端に厄介になるみたいです．

この状態でしばらく様子を見たのちに、正式リリースしようと思います．

ではでは～

pbListImageMaker をPB-100の宇宙で使い始めました

PBロッキー — Sun, 06 May 2012 06:14:00 GMT

お久しぶりです、PBロッキーです．

このたびは、pbListImageMaker を使ってPB-100の宇宙を更新しましたのでご連絡いたします．

まずは、今回アップデートされたページをご覧ください．

pbPrinter.css version 0.x 特殊部隊突入シュミレーションゲーム SWAT トロネコの大冒険4 >> プログラムリスト Mr.T >> リスト BLACK♥JACK >> プログラムリスト SQUARE >> プログラムリスト

Web における PB-100 用リストの流通が、まったく新しい次元に突入したことがよくご理解いただけたことと思います．

PB-100の宇宙では、このような技術の開発によって PB-100 文化とそのソフトウェア資産を後世に伝える活動を続けていきます！！

ちょっとした懸案

さて、もう大分前にコードは動いていたのですが、公開が今日まで延びたのは、一点問題に遭遇していたからになります．それは、浮動小数点の _E や _E- をどう扱うか？という点です．

pbListImageMaker は、ページ中の指示された要素のテキストを解析して画像に置換していく、という挙動です．そのため _E や _E- に相当する適当な文字記号を決めておく必要があります．

文字記号は結果的に画像に置き換えられるので、他のキャラクタと被らなければとりあえず問題はありません．なので一旦は _E や _E- に見える文字・記号を探してきて当てる方針で考えました．（実装も楽です）

しかしあくまでも、_E や _E- はアルファベットの E です．そこに異なった文字を当ててしまっては、中国語・日本語・朝鮮語の漢字をごちゃ混ぜにした Unicode の愚を冒すことになります．

そこで、_E 及び _E- は下付き文字を表す <sub> タグで囲んで指定することとしました．

&lt;sub>E&lt;/sub> &lt;sub>E-&lt;/sub>

これにより、js が走らないブラウザや音声読み上げブラウザ、検索エンジンに対しても正しく情報を伝えることができるようになりました．

しかし、その副作用としてコードを記入する場合によく使われている <pre> タグを使うことができなくなります．整形済みテキストを表す <pre> は <sub> のようなテキストの表示をいじるタグを包むことはできないのです．

<pre> が使えないために、コードの改行時には <br> を記入する必要がでてしまいました． _E や _E- を使わないコードの場合、<pre> を使うことはできますが、この点はよろしくないですね…

ちょっとしたものでもツールのリリースって大変なものですね（＞＜

そんなこんなでまずは手元で使ってみて正式公開に向けて取り組んでまいります．ではでは．

pbListMakerのその後

PBロッキー — Sat, 25 Feb 2012 14:37:00 GMT

ど～も、僕です．

．．．

…

あまりに素晴らしすぎるので息をするのを忘れていました．ど～も、僕です．

コードハイライトの世界

ところで読者諸賢は、SyntaxHighlighter なんてご存知でしょうか？

ブログや Web サイトで~~コード~~プログラムリストを公開する際に色分けしてくれて読みやすくしてくれる、というモノで一度はどこかで見かけていることと思います．ページが開かれたときに javascript が走り、プログラムリストの書かれている要素を解析して色分けしてくれる、という仕組みで javascript と CSS を読み込むだけで動作してくれます．

このようなライブラリはいくつかありますが、中でもよく使われているのが、先の SyntaxHighlighter みたいです．対応言語も豊富で、10数種類のメジャーな言語をサポートするという充実っぷりで素晴らしいですね．

ただ、PB-100 用 BASIC をサポートしない点を除いては、、、

pbListMaker のリリースに向けて

ということで、当初はなんとなくエディター風のものを制作していた pbListMaker ですが、SyntaxHighlighter 的なスタイルで目下リリース準備中です．

しかも、この pbListMaker は PB-100 及び PB-120 用フォントで整形表示してくれるので、というか、それがそもそもの目的でしたので SyntaxHighlighter の遥かに斜め上をいってますね．

すでにブログや Web サイトに SyntaxHighlighter を導入している君は、さっさと削除した上で wktk してリリースを待ちましょう．

進捗

プログラムリストの整形やハイライト、step数カウント機能はテスト段階で、このほかに変数表やデータバンクを整形、ハイライト表示すべく開発しています．データベースだろ？と心の中で突っ込んだ君は IT パスポートに出るからよく勉強しといてくれよ！

また、javascript のつくりも整理が必要になってきました．

PB-100 のプログラムリストを解析する部分、プリンター部分、このほかに PB-100 のディスプレイもあります．これらをうまく結合すればもっと面白いことになりそうです．

今日はここまで、ではでは、僕でした．

PB-100のリストの色分け機能を作成中

PBロッキー — Sat, 11 Feb 2012 05:43:00 GMT

この僕としたことが思いがけず時間ができてしまったので、先日から pbListMaker にコードハイライト機能と step カウント機能を追加していたりしました．

まだ、自分のコードでチェックしているだけで、動作の検証はまだまだですが、リストを解析して正しく色分けをしてくれています．

あわせて行っている、step 数のカウントも正しく動作しています．

この機能によって、PB-100 リストの解析やバグの発見が容易になり、PB-100 プロダクツの品質向上に貢献することでしょう．また、PB-100 プログラマーの育成にも寄与してくれるでしょう！

ちなみに、このあたりの機能は以前にも一度取り組んでいますが、そのときは玉砕しておりました、、、

ちょっと状況が悪くまだコミットはできていません、悪しからず．enjoy!

機能について

コードハイライト機能

文字列は赤く
コマンドは青で
SIN や INT などの関数は緑色に
コメントの色分けはまだ、、、

ステップ数カウント機能

表示・非表示

整形表示機能

雑誌デザイン風デザイン・プリントアウト風デザイン
BASICリスト・databank・変数表・実行出力結果

以上から選択．

フォント

PB-100
PB-120

以上から選択．

プリンター

FP-12T
FP-40T

以上から選択．

NetFrontでのサイト表示確認

PBロッキー — Sat, 31 Dec 2011 14:19:00 GMT

自宅のハイビジョンテレビには、NetFront 3.4 というブラウザがついているのですが、このほどそれでの動作確認をしてみました。

テレビのリモコンで操作するということで、操作感についてはひたすら微妙ですが、レンダリングについてはそれほど崩れている、ということもありません。

PB Display Image Maker も問題なく表示されています。

ただ一点、深刻な問題がありましてスクロールができません。これは NetFront に限らず他の非パソコン向けブラウザにも散見される現象です。

PB-100の宇宙は、独自に編み出した、PureCssPopup という CSS だけで LightBox のような表現を行えるタグ構造となっています。そのために <html>, <body> タグからしばらくあまり見かけない CSS がセットされています。

PureCssPopup

これが PC用のブラウザでは概ね問題ないのですが、スマートフォン等のブラウザのフィット表示機能と相性が悪いようです。

かなり苦労した PureCssPopup ですが、いよいよ PB-100の宇宙から外す決心をしました。

ということで、来年は外す年にしたいですね！

ではでは、みなさまもよいお年を～ ☆ミ

HTML5 用ゲーム制作のイベントではしゃいできました＼（^o^）／

PBロッキー — Tue, 29 Nov 2011 20:36:00 GMT

ど～も、僕です。

もう一月以上前になりますが、enchant.js という HTML5 用のゲームライブラリのイベントでしゃべってきました。

今回はそのご報告をいたします。

enchant.js meetup! まとめ #enchantjsmeetup | togetter UEI「enchant.js meetup!」レポート | 4Gamers.net enchant.js meetup!を開催しました| enchant.js Developers Blog

PB-100 を知っているひとは？

会場は100人を超す入場者で、10代から20代の若い方が多いということでした。そんなわけでアウェイ感もプレッシャーもありました。

おなじみのこの写真を見せて、知っている人を訪ねると2割程度の方が手をあげてくださりました。

さきまでのアウェイ感も消えうせ、ここはホームグラウンドだ、ということで一安心です。

偉大な遺産、PB-100 用ゲーム作品群のご紹介

ゲーム開発日誌、私の場合

続いて、PB-100 にはこんなゲームがありましたよ、ということで簡単に4つほど紹介しました。

3D シューティングのあたりで会場から笑いが起こりました。（After Burning 天丸氏）

3D ネタでいえば、まだまだ拙作の 3D ダンジョン RPG や FPS の構想もありますので、あと半世紀は笑いが取れそうです。

若者よ、これがペーパーウェアマガジン時代だ

さらに、今からすれば考えられないという感じですが、PB-100 を含めこの時代のゲーム作品は、紙媒体に印刷されて流通していたんですね。ということで見てもらいました。

写真はポケコンジャーナル1995年3月号、滝本飛沫氏によるパズルゲーム作品「パニッカーST」です。

今回のセッションも、もともとはこの作品に出会ったことがきっかけでした。

以上の資料を徹夜で作りながら、考えていたこと

『ドラゴンクエストへの道』ガンガンコミックス 1991年9月 2,800円

ゲーム制作に関しては、徹夜もなくわりとトントンと進んで、オレ、成長してるジャン、と自画自賛していたのですが、調子にのって応募したセッションの準備は難産で徹夜もする羽目になりました。

その準備の合間には、『ドラゴンクエストへの道』というマンガを出してきて眺めたりしていました。

作品は、まだ高校生だった中村光一や堀井雄二がゲームコンテスト(1982年)で出会い、そしてドラゴンクエスト（1986年）を作るまでのお話です。

1991年の発行ということでドラゴンクエスト5の出る少し前になります。

この頃、エニックス（現在はスクウェア・エニックス）は出版部門を立ち上げ、ドラゴンクエストを導線に読者を獲得、月刊少年ガンガンを創刊しました。僕も創刊号から数年間の購読者でした。

ドラゴンクエストへの道それは栄光の道

『ドラゴンクエストへの道』の表紙、鎧が(・∀・)ｶｺｲｲ!!

まずは子供向けに書かれている、ということもありますが、登場人物のそれぞれがなにかにぶつかり乗り越えていく、という楽しめるつくりです。

そして、その20年後を知る今の僕からすると、その努力はことごとく報われて、登場人物がみな幸せになる。当人からすれば、おいおいちょっと待ってくれよ、となりそうですが、そういう感想が湧きます。

またこの当時、ドラクエに続けと粗製 RPG を乱発したりしなかったりしたライバルメーカーも、こんなに儲かってしまっていいの、という状況だったそうでみんな幸せだったみたいです。

我々は超イイ時代にいるのか

先のイベントを実施した UEI 代表・清水氏は、HTML5を制するものだけが未来への切符を手にすることができる、我々は超イイ時代にいると仰っていました。

そしてその言葉がデジャブったのは、さきの『ドラゴンクエストへの道』のせいです。

最後に、もし『ドラゴンクエストへの道』をブックオフで見かけたらぜひ購入しましょう。

ちなみに清水氏のアクションには9ヶ月前にも一度言及していました。

プログラムコンテストでの入賞

Saturday Night Aventure 攻略マンガ「ゲーム拳ロッキー」

PBロッキー — Thu, 13 Oct 2011 22:28:00 GMT

「性加害表現を含むコンテンツに関する警告」を追記しました。(2023/04/17, 関連記事)

Mr.T の発表年を修正しました。(1997～→1998～, 2023/04/13)

HTML5 ゲームの投稿サイト 9leap はメンテナンス中のままアクセスの出来ない状態の為、現在ゲームで遊んで頂くことができません。(2020/1/11)

性加害表現を含むコンテンツに関する警告

本作品は性加害にあたる表現を含みますが、これが批判的に描かれていません．警告文とともに発表時のまま公開を続けます．

PBロッキーが今後制作する作品では、性加害を批判的表現を抜きにして描くことはありません．(2023/04/17)

はじめに

HTML5 用ゲーム『Saturday Night Aventure サタデー・ナイト・アバンチュール』は『Mr.T』というゲーム作品を元にしています。

これから紹介するゲーム攻略マンガはその Mr.T のために僕が描いたものですが、ルールは全く一緒なのできっとあなたの攻略を助けてくれるでしょう！

マンガとしてもちょっと面白いかもしれません。

9leap : Saturday Night Aventure enchant.jsを使ったHTML5用落ちものパズル、Saturday Night Aventureをリリースしました

Mr.T(1998～)について

RUN DEG
↑ → ↓ ↑ ← [ → ?

『Mr.T』は僕が高校生のときに制作したもので15年くらい前になります。そのときはポケット通信というパソコン通信に公開していました。

Mr.T は、CASIO PB-100 用ゲームのため画面は横向きです。また画面を一杯使っても12個のキャラクタしか表示できません。逆にそれがゲームにいい作用をするときもあります。

PB-100 版を触ってみたいという方は Bernie 氏の制作の PB-100 シミュレータ「Pocket BASIC Simulator」をダウンロードしましょう。

ポケット通信のおもひで Mr.T - CASIO PB-100用落ちものパズルゲーム pbrocky パニッカーSTとテトリスタイプゲームについて PBロッキー作品 for PBsim Burnout. Pocket BASIC Simulator.

攻略マンガ・ゲーム拳ロッキー（2006年）

Javascript を有効にして読んでみてね。

enchant.jsを使ったHTML5用落ちものパズル、Saturday Night Aventureをリリースしました

PBロッキー — Mon, 10 Oct 2011 03:55:00 GMT

Mr.T の発表年を修正しました。(1997年→1998年, 2023/04/13)

HTML5 ゲームの投稿サイト 9leap はメンテナンス中のままアクセスの出来ない状態の為、現在ゲームで遊んで頂くことができません。(2020/1/11)

サタデー・ナイト・アバンチュール

サタデー・ナイト・アバンチュール(Saturday Night Aventure)憧れの課長さん(妻子あり)との燃えるようなひととき。相手は死ぬ。僕も死ぬ。

ということで HTML5 用落ちものパズルゲーム『Saturday Night Aventure』をリリースしました。

~~以下で遊んでいただけます。~~BGM が鳴るのでご注意を。あと、IE9 以上か他の新しいめのブラウザを使ってください。

ワンラインだけのデザイン

ブロックは上から下に落ちてくる、その際にブロックの左右移動は一切できない、という思い切ったデザインです。

その割りに落ちものパズルでは必須の、高度な連鎖消しが組めたりしてゴキゲン！なゲームとなっています。

新しめのブラウザなら大抵動作すると思うのでみんなも遊んでみてね！

落ちものパズルのゲーム x 非ゲームの境界

ぷよぷよ

みなさんご存知の落ちものパズル「ぷよぷよ」(1991年)は簡単なルールながら、高度な連鎖を作ることができ一時期はすごいブームでした。

今でも続編がリリースされているようで、近くで遊んでいる人の携帯ゲーム機から“ファイアー！”の掛け声が聞こえたりして、ああニューヨークに行きたい、とふと思ったりします。

テトリス

またそれ以前には、「テトリス」（1984年）のブームがありました。“落ちものパズル”というゲームジャンルを生み出した偉大な作品です。

僕もゲームボーイ版やファミコン版などをやりこみました。こちらはさらに簡単なルールとなっていて、ご存知のように連鎖はありません。

ちなみにかなり小さい頃、佐渡島と新潟を結ぶフェリーにもゲーム筐体のものが設置されていて遊んだのを覚えています。

ゲームルールをそぎ落としていった先に

酷くざっくりですが、落ちものパズルの歴史は、元祖であるテトリス以降は連鎖や対戦といった新機軸を打ち出すべくルールを増やしていくものでした。

ではその逆の方向、ゲームルールをそぎ落としていった先にはいったいなにがあるのでしょう？

もちろん行き過ぎれば、そもそもゲームとしては成立しなくなりランダムなカオスに成り果てます。

そのカオスの縁にあるゲームと非ゲームの境界。

いったいどこからがゲームで、どこからゲームでなくなるのでしょう？

デザインの究極、ゲームの究極

タイトル: 『VICTORY』1975年
作者: 福田繁雄(1932年～2009年)

画像は、グラフィックデザイナー・福田繁雄（故人）のポスター作品です。

テーマは反戦。作品が発表されたのはベトナム戦争の時代でした。

極端に単純化されたイメージですが、世界のどこでも・だれにでも、意図の伝わる力強さがあります。

これ以上に単純で力強いデザインは到底考え付かない、ということでご同業のグラフィックデザイナー達はしてやられた！のだそうです。

ちなみに作品は1975年のワルシャワ戦勝30周年記念国際ポスターコンクールのグランプリとなりました。

ときにはPB-100のはなしをしようか

CASIO のポケットコンピュータ PB-100 は 1982年の発売以来、シリーズ計で100万台を出荷する大ヒットとなりました。

独自デザインの非 ASCII なフォントセットがゲームユースを意識したものだったため、当時の小中学生にも購入されてホビー機としても活躍しました。

ディスプレイ表示能力は12文字、グラフィック機能無し、という貧弱なものですが、ペーパーウェアマガジン（マイコンBASICマガジン、ポケコンジャーナル等）を中心に盛んにゲーム作品が発表されます。

そして、雑誌等を介してゲームプログラミング技術の交流が一巡した後期(1990年以降)には、当初には思いもよらなかった高度なゲーム性を備えた作品が登場します。

そのようなすばらしいゲーム作品群は、さきに触れた“ゲームの究極”と対峙し肉薄しているのではないか？僕はそんなふうに思っています。

PB-100用ゲームとスマートフォンゲームの相性

PB-100用ゲーム作品は限られた資源の中で作られています。そしてスマートフォン用ゲームも限られた資源の中で作られます。

特にゲームパッドがそうで、携帯ゲーム機のようなコントローラは望めません。

所以、ユーザーの入力は単純になりながらそれでも多彩な展開を見せる、そんな工夫が要ります。

Mr.T から Saturday Night Aventure へ

RUN DEG
↑ → ↓ ↑ ← [ → ?

今作「Saturday Night Aventure」は PB-100 用落ちものパズルゲームとしてリリースしていた拙作「Mr.T」(1998年)にアレンジを加えリリースいたしました。

プレイヤーは矢印ブロックの左右回転という単純な働きかけしかゲーム世界に行使できませんが、それでも多彩な展開があなたを楽しませてくれると思います。

そして操作がシンプルな分フィジカルな体験（とでも言えばいいのかな？）となるように、ゲームのヴィジュアルエフェクトをデザインしました。（太鼓の達人のようなリズムゲームを意識しています）

またこのビジュアルに至るには早い段階で決定していた BGM の影響も大きかったと思います。

ワンレン・ボディコン・ジュリアナ東京・バブルへGo!

Mr.T を他機種に移植するにあたって、ジュリアナ東京チックなビジュアルでみせたら（少なくとも僕にとっては）面白くないか？とは 9leap や enchant.js に出会う前からうっすらと考えていました。

今回 9leap のコンテストやすばらしい BGM に出会えたことでひとつアウトプットができてよかったと思います。

ちなみにゲーム内で使用している画像はライブラリ提供のフォントとパッド以外は全て僕が起こしました。辛かった…

謝辞

実際にガチにゲームを作ってらっしゃる方には議論の尽くされたことを稚拙にリピートしているだけかもしれません、悪しからず。

以下のフリー音楽素材を提供くださったアーティストのみなさま、ありがとうございます。

使用音楽素材

Dance Queen [ #19：Loop#52 ]

author: hitoshi_senses
URL: www.senses-circuit.com

SoundEffect Pack

author: Ubiquitous Entertainment Inc.
URL: enchantjs.com/ja/material.html

tm2r_bom26_c.wav, tm2_bom000.wav

author: OSA
URL: osabisi.sakura.ne.jp/m2/

使用ライブラリ

enchant.js

author: Ubiquitous Entertainment Inc.
URL: enchantjs.com/ja/

draw.text.js

author: nakamura001
URL: d.hatena.ne.jp/nakamura001/20110502/1304348628

参考にしたゲーム作品

『パニッカーST』ポケコンジャーナル 1995年3月号工学社

author: 滝本飛沫
URL: homepage3.nifty.com/tshibuki/

滝本飛沫氏には、いち読者・いちファンであったときから（インターネットのおかげで実際にお会いし、その後はずっと折に触れ交流させていただいています）刺激と激励をいただいております。

pbDisplay.cssの0.x系最後のリリースをしました

PBロッキー — Sat, 17 Sep 2011 14:21:00 GMT

リポジトリへのリンクを Google code から github に変更しました。(2019/12/21)

pbDisplay.css version 0.1.5 を公開しました。0.x 系では最後のリリースになると思います。

今回は IE における ActiveX フィルターの有無の判定を .htc から javascript で行うように変更しました。

pbDisplay0.1.0.css version0.1.5 checkActiveX.js

以上のアップデートを踏まえて、pbDisplay.css の導入ページも更新しました。

pbDisplay.css 導入の手引き

IE の ActiveX フィルターの判定はずいぶん難儀して、css expression ～ htc ～ javascript と手法を替えていきました。最後の最後で一番無難なところに落ち着いてしまった気はします。これ以降はいよいよ、スピーチバルーン機能などをサポートする 1.x 系を制作していこうと思います。

それにしても IE は独自拡張をいろいろ用意していて、きっとまだ知らないものもありそうです。それと、改めて subversion の使い方を眺めてみて、リリース版は trunk じゃいけないとか、いろいろ勉強になりました。これからどうしよぅ、、、

ライブドアブログをBloggerに移行するためのQ&A

PBロッキー — Thu, 15 Sep 2011 11:18:00 GMT

無料のブログサービスながら、結構細かくカスタマイズできる livedoor ブログは、僕を初めて css に触れさせてくれたサービスでした。とはいえ当時のレイアウトは <table> タグを多用した酷いものでしたが。

しかし、livedoor ブログ並みかまたはそれ以上のカスタマイズの自由度に加え、無料でありながら公告無し、ブログのインポート、エクスポートもでき、さらにその上ブログ上部のナビゲーションバーまで消しても OK！という Google のブログサービス Blogger に出会ってしまうと、それ以外のブログサービスはもう使えません。

さらに Blogger では、カスタマイズに習熟すると Yahoo! ジオシティーズで制作してきた無料ホームページとブログをデザイン上シームレスにつないでしまうこともできます。このPB-100の宇宙もそんなふうに作られています。

この記事を参考に、livedoor ブログからの移行に成功したら、ぜひ Blogger のカスタマイズにも挑戦してみてください。Blogger 独自のカスタマイズタグに慣れが必要ですが、かなり満足のいくものができると思います。

MT形式によるブログ移行の嵌りどころ

今回は次の一連の流れでの注意点をご紹介いたします。

livedoor ブログなどを MovableType 形式でエクスポート
Blogger 独自の Atom 形式に変換
Blogger にインポート

また、この記事と以前に書いた移行関連の記事は、他のブログサービスからの移行、他のブログサービスへの移行にも参考になるところがあると思います。ぜひ併せてご覧ください。

ライブドアブログからBloggerへのデータの移行に成功しました無料版ライブドアブログの全記事データをバックアップ、Bloggerにインポートする方法

ブログの移行に関するQ&A

Q. MovableType2Blogger でエラーがでてしまい Blogger インポート用のファイルが取れない

A. まずはMT形式エクスポートファイルの文字コードが UTF-8 か確認してみましょう。

文字コードが UTF-8 だった場合、MT形式エクスポートファイルの構文エラーが考えられます。

記事の数が1件～数件程度のテスト用データを用意して検証を行ってみましょう。

Q. 有料版 livedoor ブログでMT形式でエクスポート、MovableType2Blogger で Atom 形式に変換、Blogger へインポートしたときに、記事の日付がすべて作業しているその日のものになってしまう

A. MT形式エクスポートのDATE:の部分のデータ形式が正しくなかったため、MovableType2Bloggerで.xmlに変換したときに、変換をしたときの日付を自動で設定されていた、というのが原因のようです。

まずはお手元で、記事が一件～数件程度のダミーのMTエクスポート形式のデータを用意して、MovableType2Blogger で変換→ Blogger へインポートを試してみましょう。

その際には、記事の投稿日時の部分を以下のような形式にしてみてください。

DATE: 12/09/2011 05:00:36 AM

以上でうまくいった場合、せっかく livedoor ブログの有料機能を利用しましたが、日時の表記が MovableType2Blogger では不正だった、ということになります。

livedoor ブログの出力が誤っているのか？MovableType2Blogger のほうで対応が不十分なのか？有料版を使ったことのない私には判断がつきかねます。

残念ながら日付表記の変換のための作業が必要になります。

さらにその上、以下で紹介する世界標準時への変更や、24時間表記から12時間表記への変更が必要になりますので、もし livedoor ブログを消さずに残しているなら、PBロッキーの作成したテンプレートを使って改めてMT形式のエクスポートファイルを取得するのがいいでしょう。

無料版ライブドアブログの全記事データをバックアップ、Bloggerにインポートする方法

何かの理由で以上の方法が使えない場合

お手元のMT形式のエクスポートファイルを手動で変更していくことになります。

記事の件数が多く日付の表記形式の一括書き換えを行いたい場合、正規表現を使って一括置換のできるテキストエディタを使用するのがいいいでしょう。

正規表現が不案内な方もぜひこの機会にトライしてみれば、あとあといろんなところで使えるかもしれません。まずは以下の記事が参考になると思います。

エディタのファイルメニューから「検索」→「置換」とアクセスします。
置換ウィンドウが表示されましたら上の「置換前(検索語)」には「^DATE: ([0-9]{2,4})年([0-9]{1,2})月([0-9]{1,2})日」と入力。
下の「置換後(置換する語)」には「DATE: $2/$3/$1」と入力。
「正規表現」にチェックを入れ、「全置換」ボタンを押します。
置換が終了しましたらファイルメニューから「保存」して下さい。

Q. なんとか Bloggerに記事をインポートできたけど、よく以前のブログと見比べてみると記事の投稿日時が 9時間くらいずれている

A. ブログの投稿日時を世界標準時に直しておかないと、投稿日時が9時間（日付をまたぐ場合は日付も）ずれてしまいます。

一見すると正しい風な日付なので、見逃してしまわないように注意が必要です。

また、この際に併せて24時間表記から12時間表記への書き換えを行います。

× DATE: 12/09/2011 17:00:36
↓
○ DATE: 12/09/2011 05:00:36 PM

さて、海外在住で時差が違うユーザの場合はどうなるんでしょう？恐らく、お住まいのロケーションにあわせる必要があると思います。ダミーデータを用意して十分な検証を行ってみてください。

Q. 数十件に一件程度の割合で、記事の日付がインポート作業をした日付になってしまう

A. 上記、24時間表記から12時間表記への変更の際に 00:00 AM は 12:00 AM としないと、不正な日付として扱われてしまうようです。

その結果、作業時点の日付が MovableType2Blogger によって付与されてしまいます。

○　DATE: 07/08/2008 12:30:36 AM
×　DATE: 07/08/2008 00:30:36 AM

Q. Bloggerにインポートしたところ、記事の投稿日時が作業時の日付になっています。MovableType2Blogger から受け取ったXMLファイル以外のすべてのデータ（MT形式のエクスポートファイルもlivedoorブログ自体も）を消してしまいましたが、大丈夫でしょうか？

A. 記事の投稿日時を作業時のものに書き換えているのは、MovableType2Blogger になります。

記事のインポート時に Blogger によって行われているわけではありません。

MT形式のエクスポートファイルを削除していたり、livedoor ブログを削除していた場合、正しい投稿日時でのブログの移行は絶望的になります。

Web上にキャッシュされたデータを参照しながら、投稿日時を手動で入れていくことはある程度は可能だと思いますが、かなり困難なものとなると思います。

Q. PBロッキーの制作している、Picasa ウェブアルバムに画像を移動して再リンクできたりする移行ツールはいつ使えるようになるの？

A. 取り扱い説明記事書くので、もうちょっと待ってくださいな！

以下のブログで紹介している、移行ツールによって、livedoor ブログで使用している画像の URL 一覧の取り出し、Picasa ウェブアルバムにアップロードした画像の新しい URL にMT形式エクスポートファイルの画像 url を一致、という操作を半自動化することができます。

PBロッキーはこのツールを使用してブログデータの移行に成功しています。しかし、PBロッキー以外の方が利用するには、ドキュメントなどがあまりにも不十分です。

ライブドアブログからBloggerへのデータの移行に成功しました

Webデザイナー必見の厳選！美麗フリー画像素材集・但しPB-100

PBロッキー — Mon, 05 Sep 2011 17:23:00 GMT

どうも、僕です。

このたびは、デザインの現場でとてもとても重宝しそうな美麗フリー画像素材集をご紹介いたします。

案の定、PB-100だけですが、科学やIT、電子立国といったイメージが欲しいときに脊髄反射的に使っておけばいいですね。

この時代のプロダクトの存在感はすばらしいと思います。

CASIO PB-100 少し斜めから 1600サイズのイメージ

地の緑のグラデーションが美しい。

CASIO PB-100 斜めに切り取る 1600サイズのイメージ

筐体に傷が付いているのと、汚れを落としていなかったのが残念。

CASIO PB-100 正面 1600サイズのイメージ

さすがにPB SPECIALの表紙ように、パイナップルを切り抜いてPB-100を埋め込むようなことはできません。

キウイに増設RAMパック OR-1Eを埋め込むことも同様です。

CASIO PB-100 トロピカル縦 1600サイズのイメージ

ライセンス

ちなみに、僕が撮りました。

写真を勉強する機会に恵まれ、よさげな機材と設備を使わせていただけました v(^-^

この記事の写真画像は以下のライセンスでご利用いただけます。

クリエイティブ・コモンズ（Creative Commons）表示（CC BY）

ぷよぷよのゲーム電卓をいじる

PBロッキー — Sun, 04 Sep 2011 22:56:00 GMT

ゲームと非ゲームの境界

この僕としたことが、ぷよぷよのゲーム電卓を手に入れました。

ご覧のようにゲーム画面が 4×4 というかなり思い切ったデザインです。この頃はぷよぷよが大変なブームでしたので、その勢いに乗ってこんな思い切ったことができたのかもしれません。

電卓と同じように配置されたボタンの部分が光ってゲーム画面になります。ぷよぷよではこのボタンはディスプレイとなりますが、この他に光るボタンを操作する神経衰弱ともぐらたたきが入っています。

ぷよぷよのゲーム電卓は当時テレビコマーシャルを見ていますが、4×4 の画面でもゲームが成立してぷよぷよになっている。少なくともテレビの画面ではそう見えることは驚きでした。

ゲームをとことんシンプルにしていったとき、それでもまだゲームといえる、ゲームと非ゲームとの境界はどこにあるのか？僅かに12文字の画面でゲームを作らなくてはいけない PB-100 シリーズとも通じるものがあります。

PB-100でも連鎖したいよね、とあの子が言った夏

パッケージによるとこの製品は1995年ということで僕が高校生の頃のものになります。

このころの僕はといえば、ちょうど滝本飛沫氏による落ちものゲーム『パニッカーST』（ポケコンジャーナル'95年3月号・PB-100シリーズ用）に出会い、それを改造していた頃になります。

基本的にアクション系のゲームは全般に下手であまり手を出さなかったのですが、そのような理由で落ちものゲームへの関心が高かった時期になります。

パニッカーSTとテトリスタイプゲームについて PBロッキー作高度な連鎖の楽しめるMr.T

肝心のゲームの紹介や感想はまた次回ご紹介いたします。

WSOH さんのコメント @ PBロッキーの日記

PBロッキー — Fri, 19 Aug 2011 06:27:52 GMT

ちなみに下記の件ですが
1.MTエクスポート形式のファイルのほうのバックアップはまだ手元にありますか？
2.Livedoorブログはまだ削除しないで残していますか？
3.MT形式のエクスポートは、有料ブログの機能で行いましたか？それともライブドアリッパーなどのサービスやソフトを使いましたか？

有料版ライブドアでエクスポートしました。
そしてそちらのデータはまだ残っております。

そして以前のデータは下書き(非公開)の状態で残しております。

再度pbrockyさんのBLOGをなぞってやり直してみようと思います。

WSOH さんのコメント @ PBロッキーの日記

PBロッキー — Fri, 19 Aug 2011 06:16:30 GMT

ご丁寧にありがとうございます。
少しずつ試してみようと思います。

わざわざ、お時間を割いてコメント頂き
ありがとうございました。

pbrocky さんのコメント @ PBロッキーの日記

PBロッキー — Thu, 18 Aug 2011 15:48:25 GMT

WSOHさん、こんばんわ。

再度インポートしても全ての記事がインポートした日時のままということでしたら、
私の経験では（すいません、もう記憶があやふやですが）、
MT形式エクスポートのDATE:の部分のデータ形式が正しくなかったため、
MovableType2Bloggerで.xmlに変換したときに、変換をしたときの日付を自動で設定されていた、
というのが原因のように思います。

まずはお手元で、記事が一件～数件程度のダミーのMTエクスポート形式のデータを用意して、
MovableType2Bloggerで変換→bloggerへインポートを試されてはいかがでしょう？

その際には、記事の投稿日時の部分を以下のような形式にしてみてください。

DATE: 07/08/2008 05:00:36 AM

また、ご質問の件ですが以下のように考えています。

・日付を一旦世界標準時に直す
　これについては、ブログの投稿日時を世界標準時に直しておかないと、
　投稿日時が9時間（日付をまたぐ場合は日付も）ずれる、ということです。
　確かに投稿日時は正しくありませんが、インポート時の日時になってしまう問題とは
　別のこととなります。

・0:00 PM は 12:00 PM とする
　ブログの投稿日時を24時間表記から12時間表記に直す必要があるのですが、
　その際に 0時としてしまうと、これも不正なデータになってしまうようです。
　これは PM 0時台に書いた記事だけ、MovableType2Bloggerによって
　変換をしたときの日付を自動で設定されてしまった、のではないかと思っています。
　○　DATE: 07/08/2008 12:30:36 PM
　×　DATE: 07/08/2008 00:30:36 PM

以上で、WSOHさんのお困りの件は解決できるかと思います。
もし、うまくいきませんでしたら、新しい状況と併せて以下の件もお報せください。

1.MTエクスポート形式のファイルのほうのバックアップはまだ手元にありますか？
2.Livedoorブログはまだ削除しないで残していますか？
3.MT形式のエクスポートは、有料ブログの機能で行いましたか？それともライブドアリッパーなどのサービスやソフトを使いましたか？

それでは、うまくいきますことを祈っています。

WSOH さんのコメント @ PBロッキーの日記

PBロッキー — Wed, 17 Aug 2011 04:28:15 GMT

WSOHです。
昨日はコメントありがとうございました。

・日付を一旦世界標準時に直す
・0:00 PM は 12:00 PM とする

の部分を詳しく教えて頂けないでしょうか?
この2点がわからず再度インポートしても
インポートしたままの日時になってしまいます；；

2007年のアクセス記録

PBロッキー — Sat, 13 Aug 2011 04:44:00 GMT

HDDにあった2007年の PB-100の宇宙トップページへのアクセス数の記録になります。

例年、一月になるとアクセス数が伸びます。とはいえ月辺り300アクセスというのは、今も大差ありません。

ライブドアブログからBloggerへのデータの移行に成功しました

PBロッキー — Fri, 12 Aug 2011 07:25:00 GMT

Google Code の終了のために使えなくなっていた移行支援ツールを GitHub に移動しました。(2017.1.2)

しかし Picasa ウェブアルバムについても Google Photo の登場で記事執筆時点から状況が変わっています。現在も Picasa ウェブアルバムに上げた画像の URL の一覧を得ることができるのか？未確認です。

ライブドアブログからBloggerへのデータの移行に成功しました。

ブログ中の画像の URL の取得、及び、一括ダウンロードした画像を Picasa ウェブアルバムにアップロードした上で記事中の画像の URL を Picasa のものに置き換えるために、以下のツールを制作しました。

操作は画像の URL の含まれたテキストを適宜にペーストして、ボタンをクリックするだけです。

それでも現状は作った僕以外の人が操作するには厳しいかな、と思います。いずれきちんと記事にしますのでその時をお楽しみに！

ライブドアブログからBloggerへ、移行支援ツール（画像は Picasa ウェブアルバムへ）無料版ライブドアブログの全記事データをバックアップ、bloggerにインポートする方法

途中正規表現による URL の操作に戸惑いましたが、このツールの制作は昨日の一日でできました。めでたしめでたしです。

pbDisplay.cssのページを追加しました

PBロッキー — Mon, 08 Aug 2011 07:47:00 GMT

HTML タグを書くだけで PB-100 の画面イメージを表示できる pbDisplay.css の紹介・導入ページを制作しました。

pbDisplay.css の紹介と導入

pbDisplay.css がバージョンアップを重ねた結果、解説テキストの量も大きくなってしまったため、HTML タグエディターである PB Display Image Maker とは別個にページを用意したほうがいい、と判断しました。

また、PB-100の宇宙全体の画面デザインを、メインカラムで 470px から 450px、サイドバーカラムで 140px から 150px としました。

新着情報ページは記事データを Yahoo!Pipes で生成していますが、今回新たにサムネイルが設定されてない記事に対して Yahoo!Pipes 側でブログ毎に適宜にサムネイルを設定するようにしました。

無料版ライブドアブログの全記事データをバックアップ、Bloggerにインポートする方法

PBロッキー — Tue, 02 Aug 2011 14:46:00 GMT

Livedoor ブログに書いてきたブログ記事400件を Blogger に移動するため、いろいろやってみました。

今回は、MovableType 形式で Livedoor ブログの記事を取得して Blogger にインポートすることができましたので、その過程をメモがてらご紹介します。

本記事の内容を実行する場合は、まずはテスト環境（稼動していない新しいブログ）で十分に検証を重ねた上で行ってください。

追記ブログテンプレートを修正しました 11/08/05

日付がインポートした日の日付になってしまう記事ができてしまう。

また、それ以外のエントリーもそもそも正しい日付でインポートできない（9時間づれてしまう）問題に気付きブログテンプレートに以下の修正を行いました。

日付を一旦世界標準時に直す
0:00 PM は 12:00 PM とする

またブログへのトラックバックは、インポートできないためコメントととしてインポートするようにしておきました。

さらに便利な公告除去機能も付いていますが、無料ブログでの公告削除は規約違反のため、バックアップをエクスポートしたら速やかにもとのデザインに戻しておきましょう。

livedoor-blog-exodus/livedoor_blog_templete.html GitHub

MovableType形式でLivedoorブログから記事をエクスポートする

無料版でMT形式エクスポートを得るためのアプリがリリースされています。しかしそれぞれに問題がありエクスポートを得ることができませんでした。

ライブドアリッパー: 記事が欠ける、コメント・トラックバックが取得できない
LivedoorBlogRead: 動かなかった… かりに動いても Feed を元にしているようなので50件以上以前の過去記事は取れないかも

MovableType形式出力用のブログテンプレートを使う

そこで、今回は以下のようなブログテンプレートを制作してみました。このテンプレートをあなたの Livedoor ブログに適用したうえで Blog のトップページを表示するとほぼMTエクスポート形式の表示になります。

このページを、全てを選択（Ctrl + A）してテキストエディタに貼り付ければ、（ほぼ）MTエクスポート形式が得られます。余分なテキストが前に入りますのでそこだけ削除します。

～.logなどといったファイル名で保存しておきましょう。また、テキストのエンコードは utf8 がよいと思います。（後で使用するMovableType2Bloggerにエンコードの制限があったような気がします。）

さらに、このテンプレートには記事とコメントの日付を自動でMT形式に変換する javascript がついているのですばらしいですね。（但し動作確認はFirefox3.6のみです）

同様にテンプレートを使ったエクスポートのページ Movable Typeの読み込みファイル・フォーマット

ブログテンプレートの変更

ブログテンプレートの変更は、ブログ設定 > デザイン > デザインカスタマイズから行います。変更はトップページのみです。

また、ブログ設定 > 基本設定 > トップページの表示件数から表示件数を最大の50件にします。

一度に表示できるのは50件まで

トップページに表示できる記事は最大で50件です。そこでページ最上部のナビゲーションをクリックして50件以降を表示します。。

ということで、記事の総数が多い場合、以上の作業を適宜繰り返すことになります。例えば、記事の総数が500件の場合作業は10回になります。

MovableType形式出力用のブログテンプレート（修正済み 11/08/05）

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
&lt;html xmlns="http://www.w3.org/1999/xhtml" id="ldblog-standard">
&lt;head>
  &lt;meta http-equiv="Content-Type" content="text/html; charset=euc-jp" />
  &lt;title>&lt;$BlogTitle ESCAPE$>&lt;/title>
  &lt;style>
    textarea {
      border:    0;
      width:    100%;
      font-size:  10px;
      overflow:  hidden;
    }
    li {
      display:  inline-block;
    }
  &lt;/style>
&lt;/head>

&lt;body>
  &lt;div>
    &lt;SetVar NavigatorRange>8&lt;/SetVar>
    &lt;SetVar NavigatorFirstPageText> << &lt;/SetVar>
    &lt;SetVar NavigatorLastPageText> >> &lt;/SetVar>
    &lt;SetVar NavigatorPrevPageText> < &lt;/SetVar>
    &lt;SetVar NavigatorNextPageText> > &lt;/SetVar>
    &lt;$IndexNavigator$>
  &lt;/div>
 &lt;!-- Loop Start -->
  &lt;IndexArticlesLoop>
    &lt;div>
      &lt;!-- &lt;IfDateChanged>&lt;/IfDateChanged> -->
      &lt;!-- &lt;a href="&lt;$ArticlePermalink$>">&lt;/a> -->
      AUTHOR: YourName&lt;br />
      TITLE: &lt;$ArticleTitle ESCAPE$>&lt;br />
      STATUS: Publish&lt;br />
      ALLOW COMMENTS: 1&lt;br />
      CONVERT BREAKS: default&lt;br />
      ALLOW PINGS: 1&lt;br />
      PRIMARY CATEGORY: &lt;IfArticleCategory1>&lt;$ArticleCategory1$>&lt;/IfArticleCategory1>&lt;br />
      CATEGORY: &lt;IfArticleCategory1>&lt;$ArticleCategory1$>&lt;/IfArticleCategory1>&lt;IfArticleCategory2>,&lt;$ArticleCategory2$>&lt;/IfArticleCategory2>&lt;br />
      DATE: &lt;b>&lt;$ArticleDateYear$>/&lt;$ArticleDateMonth$>/&lt;$ArticleDateDay$> &lt;$ArticleDateHour$>:&lt;$ArticleDateMinute$>:&lt;$ArticleDateSecond$>&lt;/b>&lt;br />
      -----&lt;br />
      BODY:&lt;br />
                  &lt;textarea>&lt;$ArticleBody$>&lt;/textarea>&lt;br />
      -----&lt;br />
      EXTENDED BODY:&lt;br />
                  &lt;IfArticleBodyMore>&lt;textarea>&lt;$ArticleBodyMore$>&lt;/textarea>&lt;br />&lt;/IfArticleBodyMore>
      -----&lt;br />
      
      &lt;CommentsLoop>
        COMMENT:&lt;br />
        AUTHOR: &lt;$CommentAuthor ESCAPE$>&lt;br />
        EMAIL: &lt;$CommentEmail ESCAPE$>&lt;br />
        URL: &lt;$CommentUrl$>&lt;br />
        DATE: &lt;i>&lt;$CommentDateTime$>&lt;/i>&lt;br />
        &lt;textarea>&lt;$CommentBody$>&lt;/textarea>&lt;br />
        -----&lt;br />
      &lt;/CommentsLoop>
      &lt;TrackBacksLoop>
        COMMENT:&lt;br />
        AUTHOR: &lt;$PingBlogName ESCAPE$>&lt;br />
                                EMAIL: &lt;br />
        URL: &lt;$PingBlogUrl$>&lt;br />
        DATE: &lt;i>&lt;$PingDateTime$>&lt;/i>&lt;br />
        &lt;textarea>&lt;a href="&lt;$PingBlogUrl$>">&lt;$PingTitle$>|&lt;$PingBlogName ESCAPE$>&lt;/a>&lt;br />&lt;$PingExcerpt$>&lt;/textarea>&lt;br />
        -----&lt;br />
      &lt;/TrackBacksLoop>
      &lt;!-- &lt;TrackBacksLoop>
        PING:&lt;br />
        TITLE: &lt;$PingTitle ESCAPE$>&lt;br />
        URL: &lt;$PingBlogUrl$>&lt;br />
        IP: 127.0.0.1&lt;br />
        BLOG NAME: &lt;$PingBlogName ESCAPE$>&lt;br />
        DATE: &lt;i>&lt;$PingDateTime$>&lt;/i>&lt;br />
        &lt;textarea>&lt;a href="&lt;$PingBlogUrl$>">&lt;$PingTitle$>&lt;/a>&lt;br />&lt;$PingExcerpt$>&lt;/textarea>&lt;br />
        -----&lt;br />
      &lt;/TrackBacksLoop> -->
      --------&lt;br />
      &lt;br />
      &lt;br />
    &lt;!-- &lt;IfArticleRating>&lt;$ArticleRatingIcon$>&lt;/IfArticleRating> -->
    &lt;/div>
  &lt;/IndexArticlesLoop>&lt;!-- Loop End -->

&lt;script language="JavaScript" type="text/javascript">
  (function(){
    var bArray = document.getElementsByTagName('B');
    var l = bArray.length;
    var b, inner, d;
    for(var i=0; i&lt;l; i++){
      b = bArray[ i];
      d = new Date( b.innerHTML);
      b.innerHTML = convertXX( d.getUTCMonth() +1) +'\/' +convertXX( d.getUTCDate()) +'\/' +d.getUTCFullYear() + ' ' +
        convert12( d.getUTCHours()) + ':' +convertXX( d.getUTCMinutes()) + ':' +convertXX( d.getUTCSeconds()) +
        ampm( d.getUTCHours());
    }

    var iArray = document.getElementsByTagName('I');
    var l = iArray.length;
    for(var i=0; i&lt;l; i++){
      inner = iArray[ i].innerHTML;
      d = new Date( [
        inner.substring( 0, 4), '\/',
        inner.substring( 5, 7), '\/',
        inner.substring( 8, 10), ' ',
        inner.substring( 12, 14), ':',
        inner.substring( 15, 17), ':',
        '00'
      ].join( ''));
      iArray[ i].innerHTML = convertXX( d.getUTCMonth() +1) +'\/' +convertXX( d.getUTCDate()) +'\/' +d.getUTCFullYear() + ' ' +
        convert12( d.getUTCHours()) + ':' +convertXX( d.getUTCMinutes()) + ':' +convertXX( d.getUTCSeconds()) +
        ampm( d.getUTCHours());
    }
    
    var tArray = document.getElementsByTagName('TEXTAREA');
    l = tArray.length;
    var REG_ADS = /&lt;div id="ad_rs"[^&lt;]*?&lt;\/div>/i;
  for( i=0; i&lt;1; i++){
   inner = tArray[ i].innerHTML;
   tArray[ i].innerHTML = inner.replace( REG_ADS, '');
  }

  function convertXX( n){
   var str = '' + n;
   return str.length == 1 ? '0' + str : str;
  }
  function convert12( t){
   return convertXX( ( t > 12) ?  '' + (t -12) : ( t === 0 ? 12 : t));
  }
  function ampm( t){
   return ( t > 12) ? ' PM' : ' AM';
  }
  
  
  setTimeout(function(){
   var ad = document.getElementById('ad');
   if (ad) {
    ad.parentNode.removeChild(ad);
   }
   else {
    setTimeout(arguments.callee, 100);
   }
  }, 100);  
 })();
&lt;/script>

&lt;/body>
&lt;/html>

MovableType形式エクスポートファイルをBloggerに読み込ませてみる

本来なら、続いてブログ記事で使われている写真画像をダウンロードして、適宜にサーバに保存。その後にエクスポートファイルの写真のurlを新しいurlに置き換えなくてはなりません。

しかし、以上の作業を置いておいて、一度Bloggerに読み込んでみます。

この作業は、新しいBlogを作成して行いましょう。稼働中のブログの環境を破壊してしまったら大変です。

MovableType2BloggerでMT形式からAtom形式へ変換

MovableType形式からBloggerのxml形式への変換には、MovableType2Blogger という便利なWebアプリケーションがあります。

MovableType2Blogger conversion utility

Bloggerへブログをインポート

このサービスで取得した xml ファイルを、Bloggerの管理画面の設定 > 基本 > ブログをインポートからアップロードします。

管理画面の記事一覧を表示すると、インポート済みの記事ができていますので、チェックをつけて公開にします。

追記

以下の問題は、テンプレートの修正で解消されています。Enjoy！

一部の記事で、日付が正しくない

一部の記事で、日付が正しくないことがあるみたいで、これは手動で設定します。僕の場合、一度のインポートで1～2件程度がインポートした日付で登録されてしまいました。

MT形式でのインポートに対応してほしい。

全ての記事がインポート時の日付になってしまう

また、以下のような問題も起きるみたいで、僕も実際に全ての記事の日付がインポート時（本日）のものになっていました。現在はほぼ問題ないため、MovableType2Bloggerに与えるMTエクスポート形式の日付がはじめのうちは正しくなかったためだと思います。

インポートした日付で間違いないです。むしろ、作成時の日付で反映することは、受け入れ側にとって、過去に遡ることになり、おかしなことになってしまいます。
この投稿に限らず、「ブログ」と「ホームページ」の区別がはっきりと認識されていないように思えます。「ブログ」は、各社ごとの機能に大差があり、引越すときは、今までのブログを捨てる覚悟でないと出来ません。

BloggerにLightbox風エフェクトを導入して幸せになる・徹底解説編

PBロッキー — Fri, 24 Jun 2011 10:06:00 GMT

slimbox2 for Bloggerの解説

あなたのBloggerに、スクリプトを導入するだけで全ての記事の画像にポップアップ効果を導入してくれるslimbox2 for Blogger。

この記事ではどんなルールでポップアップ機能をhtml要素に追加しているのか？Blogger向けの設定部分を解説します。

併せて私が遭遇したBlogger（+picasa）固有の注意点も紹介します。

もし、簡単導入編で動作しなかった方は、ご自身のブログのテンプレートをこの記事を参考に確認してみてください。

また、他のLightBox系ライブラリを使う、という方にも有益な情報があると思います。

この記事は以下の記事の続きとなっています。

BloggerにLightbox風エフェクトを導入して幸せになる・簡単導入編 BloggerにLightbox風エフェクトを導入して幸せになる・本格導入編

slimbox2を有効にするルール

今回紹介した、Blogger用の設定部分について解説します。

ご覧の通りjQueryのセレクタを使って、ポップアップ機能を付与する要素をピックアップしています。

$("#Blog1 .post-body a[href*='.bp.blogspot.com/'] img:first-child[src]").parent().slimbox({}, (略～

source slimbox2_for_blogger.js

Bloggerのhtml構造では、記事の写真のある要素は、#Blog1 .post-bodyの下になります。この内、#Blog1は記事を表示する記事ウィジェットのIDです。

続く.post-bodyの下に記事の本文は入ります。.post-bodyはページタイプによっては（indexやアーカイブページなど）複数存在します。

もしslinbox2 for bloggerが動かない場合、この部分の名前が違っているのかもしれません。ご利用のBloggerのテンプレートをご確認ください。

続いてimgタグを配下にもち、picasaへのリンクを持つ<a>タグ（ただしドメインはblogspotになっています）を見つけます。ご存知のように、Bloggerの投稿エディタから記事に埋めたpicasaの画像はこんなhtml構造になりますね。

ということで、Flickerなどの他の写真サービスを利用している場合は動作しません。この場合は適宜セレクタを書き換えてください (^-^;;

また#Blog1はなくても動作しますが、この指定を入れることで探索の対象を全html要素から#Blog1以下に限定しています。こうしてブラウザへの負荷を（若干）減らしています。

昔の記事でpicasaの画像が表示できない不具合

少し以前（一年程度昔？）に投稿した記事のpicasaの画像はslimbox2でうまく表示できませんでした。最近のものでは全く問題ありません。

該当の部分をよく見てみると、picasaのurlに入っていた-hが原因でした。ご紹介したコードでは対策してあって自動で-hを外すようになっています。


var REG_PICASA_FIX = /(\/s\d*)-h/
~~
el.href.replace( REG_PICASA_FIX, '$1')

LightBox系への苦言大きな画像の場合、画面が一杯になってスクロールも表示されない

例えば、この画像の場合です。大きな画像もそのまま表示してしまうのでかっこ悪くなるし、closeなどのナビゲーションも隠れてしまってよろしくありません。

（クリックして確認してみてください、cを押してポップアップを閉じます）

そもそも動的に書き出しているポップアップなレイヤーのhtmlを、拙作Pure CSS Popupのようにしておけば適宜にスクロールバーがでてきて対処できるんですけど。

また、巨大な画像ではなくても、PCやブラウザの画面サイズが小さいこともあるわけで、画面にあわせてフィット表示させる機能はマストな気がするのですが。。。

クロスドメインな画像のサイズは取れないとか、そんな制約でもあるのでしょうか？

Pure CSS Popup なギャラリー JavaScript で、画像本来のサイズ(幅, 高さ)を取得する方法

PB-100の宇宙 新着情報

門真なむ氏との共作『BOMBER WOMAN'』を公開しました

3年ぶりの新作ゲームを公開！

ネットプリント情報

作品について

新年のごあいさつ、PB-100の宇宙を更新しました

更新情報

PB-100の宇宙は21周年を迎えました、ホームページの更新情報です

更新情報

「Mr.T」のバージョン表記の変更

新年のごあいさつとホームページの更新について

ホームページの更新情報

Google サーチコンソールに嫌われている件

更新情報とドメイン喪失からの復旧状況

更新情報

サーバ側の実装更新について

WSL2 で画像表示の出来るテキストブラウジング環境を手に入れる！Ubuntu 20 + w3m + mlterm + sixel

はじめに

画像 OK!、&lt;table> いける! w3m!!

w3m 他をインストールして日本語テキストブラウジング環境を用意する

日本語環境の設定

最初に

日本語パックをインストールしてタイムゾーンを設定する

w3m, mlterm, sixel, 日本語 IME をインストール

日本語 IME のインストール

IPA フォントをインストール

フォントキャッシュの更新

ここで一度 mlterm + w3m を使ってみる(飛ばしても構いません)

mlterm の設定

~/.mlterm/aafont の内容

~/.mlterm/main の内容

~/.mlterm/color の内容

w3m にも設定ファイル

~/.w3m/config の内容

白源フォントで枠線が残念だった件

白源フォントのインストール

~/.mlterm/aafont の内容

更新情報と、ドメイン喪失の経緯と対処状況のご報告

更新情報

ドメインを失って pb-100.ga にアクセス出来なくなった件について

オフィシャル文書を確認すると…

独自ドメインによる運用の技術的理由

さいごに

付録「Afnic / .ga ドメイン名はまもなくガボンの管理下に戻る」(deepl 翻訳)

.ga ドメイン名はまもなくガボンの管理下に戻る

6月7日: .ga ドメインが Afnic の技術支援により ANINF に移管される

ダイナミックなデジタルエコシステムを支える健全な基盤へ

追加コンテンツ「ゴーストオブイツシマ 公式ファンクラブ会誌 第1号兼最終号」の配布につきまして

配信情報

ネットプリント配信の詳細

現時点で公開出来る内容

20周年企画 17年ぶりの新作ゲーム「5 LINE RPG ゴーストオブイツシマ」遂に公開！ネットプリントだよ！

ネットプリント配信終了と追加コンテンツについて(2023/05/02)

「5 LINE RPG ゴーストオブイツシマ」はネットプリントでまずは公開！

動機

郵送でのご提供

お願い

20周年プレ企画 第七弾！BLACK♥JACKをバージョンアップ、ホームページを更新しました

ホームページの更新内容

Black♥Jack Version 1.3.0の変更点

1. ゲームオーバーの条件を修正

2. 演出の追加と操作性の改善

3. その他

旧バージョン公開ページの追加とバージョン表記の変更

バージョンアップを終えて

20周年プレ企画 第六弾！6 LINE RPG ムシハカセへの反響の記録

2020年、童心に還って、伝説のムシキングを追った PB-100 ユーザーたち

そして5行 RPG 開発の日々へ…

20周年プレ企画 第五弾！544ステップに詰め込め！ZERO のノーマル PB-100 対応に挑んだ者たちの軌跡

PB-100 シリーズ用固定出題型パズルゲーム「ZERO」

ノーマルの PB-100 には非対応…!?

STR$ が必ずしもアドバンテージでは無かった！

ご参考「動作を揃える施策」部分の比較

たかじょゆうき。版の当該部分

門真なむ版の当該部分

戦略の勝利、成功体験に囚われた敗北

門真なむ版のもたらしたもの

もうちょっと続くよ

20周年プレ企画 第四弾！ぷよぷよ風落ちゲー「ぽあぽあ」の544ステップ版、遂に公開！

ぽあぽあ 544ステップ版の競演が急きょ決まりました！

PB-100の宇宙新着情報

画像 OK!、`<table>` いける! w3m!!

追加コンテンツ「ゴーストオブイツシマ公式ファンクラブ会誌第1号兼最終号」の配布につきまして

20周年プレ企画第七弾！BLACK♥JACKをバージョンアップ、ホームページを更新しました

20周年プレ企画第六弾！6 LINE RPG ムシハカセへの反響の記録

20周年プレ企画第五弾！544ステップに詰め込め！ZERO のノーマル PB-100 対応に挑んだ者たちの軌跡

`STR$` が必ずしもアドバンテージでは無かった！

20周年プレ企画第四弾！ぷよぷよ風落ちゲー「ぽあぽあ」の544ステップ版、遂に公開！

20周年プレ企画第三弾！1行落ちモノゲームの金字塔、Mr.Tの成立経緯について

20周年プレ企画第二弾！逃走入力式オートバトル～PB-100用のミニマムなRPGの戦闘システム～

20周年プレ企画第一弾！トロネコの大冒険4をバージョンアップ、ホームページを更新しました