目次
07日 読書中…
19日 vue-tweet-embed で表示していた Tweet が崩れる
21日 訂正：ジュピターの記事について
Twitter で、面白そうな本を教えていただいたので購入し、読んでいる。
『ゲーム戦争―遊びを創造する男たち』
1996 年に発行された本だが、1993 年に発行された本を改題し、修正・加筆されたものだ。
なので、主な内容は 1993年時点のものになる。
内容は、セガの歴史。
この本を読んだ方が、ツイッターでいくつかのページの写真をアップロードしていた。
主にメガドライブの開発時期の話だったのだけど、そこに、自分が欲しかった情報が書いてあった。
過去に書いた、サターンの噂話記事の真相だな。
サターンはセガ５番目の機種なのに、なぜ「６番目」を意味する土星なのか？
書籍には、メガドライブが５番目になる数え方が書いてあった。
それだと、サターンは６番目になるので問題ない。
…まぁ、この噂話記事は、最初から「怪しい話」と分かっていて、だけど面白かったから書いただけ。
でも、多分こういうことだろうな、と推察していたのが、真相だったと裏付けされた。
これが購入のきっかけ。
自分のページに関連する情報があると分かったのなら、購入して読むのが誠意だろう。
こちらの記事は、後日修正する予定だけど、本を全部読み終わってからね。
しかし、内容はメガドライブよりも、セガ創立からの歴史話が中心だった。
自分の過去の日記でもセガ初期の歴史を調べて書いたことがあった。
でも、これはネットで調べてまとめただけ。専門家ではないのでインタビュー調査などはしていない。
こちらは気づかずに購入したわけで、思わぬ拾い物。
ただし、本の内容は、申し訳ないのだが怪しい。
自分の知らないことが書いてあったので、「これは新情報」と裏付け調査をしたら、どうも本の方が間違えているようだ、ということが多数ある。
元々が、ゲーム業界に特に詳しくない人向けに、「最近話題になっているセガってどんな会社なんだろう」と教えるような内容だ。
だから、厳密に正しいことを書く必要もない。
大体あっていればそれでいいし、場合によっては嘘によって話を簡略化したほうが伝わりやすい場合もある。
それでも、知らない情報が補われた部分はあるし、こちらの記事もそのうち修正すると思う。
何かと忙しくて、少しづつ読み進めている。まだ８割しか読み終わっていない。
全部読み終わってから自分の書いた過去記事の修正を考えるし、怪しい部分もあるので裏付け調査も必要だ。
しかし、怪しいのは細部のみで、大筋としてはなかなか楽しい本だ。
ゲーム好き、セガ好きの人にもおすすめ。
同じテーマの日記(最近の一覧)
関連ページ
別年同日の日記
申し訳ありませんが、現在意見投稿をできない状態にしています。 |
昨日 8/18 の夕方ごろから、仕事で作っていたプロダクトで、Tweet のタイムラインを表示していた部分で画面崩れが起きるようになった。
この時点では、リロードを繰り返すと崩れたり正常だったり。
あ、これは Twitter がウィジェット用の出力を変えたな、と気づいた。
普通は、Web ページに Twitter のタイムラインを埋め込みたければ、Twitter が公式に用意したサイトで作成した HTML の断片を埋め込めばよい。
この断片の中では、widget.js というプログラムを読み込んでいて、このプログラムがタイムラインを埋め込む。
しかし、Javascript のフレームワークである vue ではこの方法が使えなかった。
HTML は、画面を表現するための言語だ。
Javascript は、一般的な意味でのプログラム言語であり、HTML を操作するための機能も充実している。
ここで、Javascript でプログラムを作る際は、「データ操作」と HTML 操作を同時に行うことが要求される。
内部データを計算によって書き換えても、画面に反映されなくてはわからないからだ。
しかし、内部データと画面を常に一致させておく、というのが結構面倒くさい。
vue はこれを解消するフレームワークだ。
HTML とデータのつながりを記述できるようになっている。
そのうえで、Javascript でデータを操作すると、自動的に HTML に反映される。
非常に便利だ。
その代わり、今までのように「Javascript で HTML を操作する」のは禁じ手になった。
vue が書き換えることが前提なので、それ以外の書き換えがあると破綻するためだ。
さて、vue の説明が長くなった。
先に書いた Twitter の widget.js は「HTML を操作してツイートを埋め込むプログラム」であり、vue と相性が悪い。
そこで作られていたのが、vue-tweet-embed というライブラリだ。
これを使うと、非常に簡単に vue 内にツイートを埋め込める。
さて、今回、Twitter が送信するデータの形式が大きく変わったようだ。
widget.js は一緒にバージョンアップされているので問題はない。
しかし、vue-tweet-embed で表示する場合は、問題が出た。
具体的には、vue-tweet-embed のやり方で指定したサイズや、表示の際のオプションがすべて無視される。
縦に長い…とても長い「タイムライン」が表示され、スクロールバーも出ない。
これが冒頭に書いた画面崩れの状況だ。
僕が作っていた環境では、ツイートの冒頭に、以前はなかった「@～さんのツイート」という表示が入るようになった。
これ、noheader という指定で消していたものだが、vue-tweet-embed ではその指定も利かなくなっている。
昨日夕方は「時々崩れる」だったのが、今朝仕事を開始するときには「100%崩れる」状態になっていた。
Twitter 社が、数あるサーバーのすべてで新プログラムに更新が終わったのだろう。
これはどうにかしなくては。
ほぼ一日かけて何とかした。
まず、vue-tweet-embed の使用は廃止。
だましだまし使う方法もあるが、今後も同じようなことが起きては困るからだ。
公式 widget.js で何とかできる環境を構築するのが良いだろう。
先に書いた vue との相性の悪さは、v-once で解決できる。
vue で HTML とデータのつながりを記述する際のオプションで、「一度だけ描画」を意味するものだ。
最初に描画されたら、その後は更新しない。だから、widget.js が書き換えた後の内容が保証される。
あとは widget.js の読み込みをどうするかだ。
本当は、ツイッターの埋め込みを行う部分を指示する HTML などを準備したうえで、「最後に」読み込むと、埋め込みを行ってくれる。
しかし、vue だと埋め込みタイミングがいつになるかわからない。
（vue を使うと、ページ遷移なども画面の書き換えで行い、通信を起こさないようなことが可能になるため）
Twitter 公式に、widget.js 内の「埋め込み」メソッドの呼び出し方が定められていた。
すでに widget.js が読み込まれていることが前提だが、メソッドを呼び出したタイミングで埋め込みを行える。
これは公式に定められたものなので、今後も安心して使えるだろう。
さらに、公式に「widget.js を必要な時に読み込ませるが、読み込みが終わる前に、読み込みが終わったらやって欲しい処理を登録しておく」プログラムも公開されていた。
そのままでは vue で使えないが、改造して使うことにしよう。
というわけで、出来上がったのが次のような仕組みだ。
まず、全体としては vue のコンポーネントだ。
このコンポーネントは、ツイートを埋め込むためのものになる。
だから、「埋め込みたい」側の vue プログラムからは、このコンポーネントを読み込んで組み込む必要がある。
この際、v-once タグをつけておいて欲しい。そうしないと、widget.js が書き換えたものが保証されないから。
template の中で、一番最初のタグに ref="tweet" をつけておいて欲しい。
また、ツイートを埋め込みたい部分には、ツイッター公式の埋め込み HTML 断片の、埋め込み部分を書いておく必要がある。
（だって、公式 widget.js は、それを見つけて書き換えるものだから）
あとは、このコンポーネントが読み込まれ、DOM が構築された際に適切なプログラムが動けばよい。
なので、mounted に仕込みを行う。
mounted(){
window.twttr = ((() => {
const fjs = this.$refs.tweet;
let js;
let t = window.twttr || {};
if(t.widgets) return t; // もう関数定義されている
js = document.createElement("script");
js.src = "https://platform.twitter.com/widgets.js";
fjs.appendChild(js);
t._e = [];
t.ready = function(f){
t._e.push(f);
};
return t;
})());
twttr.ready( () => {
twttr.widgets.load( this.$refs.tweet);
});
},
先に書いた通り、twitter 公式のプログラムから少し変わっている。
まず、一番重要なのは「widget.js の読み込みタグがなければ、追加することで読み込ませる」だ。
元のプログラムでは、HTML 内にタグがあるかどうかを確認していた。
でも、その追加したタグは、vue によって消されてしまうことがある。
なので、widget.js が読み込まれて関数定義されたかどうかを確認するように変更した。
タグを追加する位置は、元のプログラムでは特定のタグのすぐ後ろ、となっていた。
しかし、v-once された内部にしたいので、「内部の一番最後」に追加している。
あとは、そうした DOM を探し出す方法が vue 向けに変わっているくらいか。
最後に、twttr.ready に「埋め込み」を指示する関数を書いてある。
twttr.ready は、上のプログラムの中で、キューに登録するプログラムとして作ってある。
これ、widget.js が読み込まれた時点で、キューに入っている関数を実行してくれる。
そのうえで、twttr.ready 自体が書き換えられ、キューに登録ではなく「即時実行」になる。
そのため、再度この部分が読み込まれた場合には、新たに widget.js を読み込むこともなく、即時に埋め込みが行われる。
ひとまず、相性が悪い widget.js を、無理やり vue の中にねじ込んだ。
これで、今後 widget.js がバージョンアップすることがあっても大丈夫だろう。
でも、今回もこれだけでなく、文字サイズが変わったり、全体デザインが変わったり、いろいろ変わってるんだよね。
最初の方に書いた noheader が効いていないのは、公式 widget.js では大丈夫だった。
でも、以前は使えた noborder や nofooter は廃止されているようだ。
今回廃止されたのか、以前から実は使えてないのかはわからない。
今後も、「崩れる」ほどではないが、「見た目が変わる」くらいのことはあるかもしれない。
翌日追記
これを書いている「翌日」というのは土曜日。
昨日は、とにかく突貫作業でどうにかしなくてはならなくて、作り上げて日記ネタにした。
今日になって、気になったので、仕事時間外だけど vue-tweet-embed のソースを読んでみた。
驚くことに、構造はほとんど僕が作ったものと同じだった。
公式の widget.js を読み込み、widget.js の埋め込む対象位置を教えるタグを埋め込み、埋め込むための関数を呼び出す。
呼び出す関数が少し機能の違うものだったり、タグの作り方が違ったり、vue の再描画に対する保障方法が違ったり、という違いはあるのだけど、大きくは変わらない。
そうすると、なぜ表示崩れが起きたのかよくわからない。
いろいろな「若干の違い」によるものかもしれない。
また、vue-tweet-embed が広く使われている割に騒ぎになっていないのが不思議だったのだが、これも環境によって動作が違うのかもしれない。
謎はいろいろある。ここに書いたこと自体が、多くの人にとっては無意味なのかもしれない。
しかしまぁ、ライブラリに頼らず問題を自分の手元でコントロールできる状態に置いたことで、今後の保証をある程度得られた、と思うことにしよう。
同じテーマの日記(最近の一覧)
別年同日の日記
申し訳ありませんが、現在意見投稿をできない状態にしています。 |
以前、「セガ・サターン」の一連の話題を書いたときに、一緒に展開された商品群についての話も書いている。
その中に、「ジュピター」という機械の話があった。サターンと性能的には同じだが、CD-ROM ではなくカートリッジで動作する前提の機械だ。
今だから正直に書こう。
実は、書いているときから、少し眉唾なうわさ話だと思っていた。
自分は業務用の ST-V だけど関連したプログラマをやっていたし、それなのにジュピターなんて話聞いたこともなかったから。
でも、海外ではすごく有名で、信憑性をもって語られる話らしいんだよね。
サターンには、実際に土星の衛星や惑星の名前がつけられた関連商品がたくさんあり、それらの話を書こうと思い、情報を集めているときにこの話を知った。
そして、あまりに面白かったので、眉唾だと思いながらも紹介した、というのが記事を書いたときの真相だ。
ただ、同時期に見つけ出した噂話には、明らかに否定できるものもあった。
例えば、マルチカートリッジ対応の 4slot ST-V の話とか。これは、僕は記事の中で真相を明らかにして否定した。
記事に書いたのは、少なくとも「僕が否定情報を持ち合わせていない」ものだけだ。
—
さて、こんな話を急に蒸し返したのも、情報が得られたから。
先に書いておくと、噂を書いた時点である程度気づいていて、やっぱりその通りだった、というところなのだけど。
海外での「噂」では、サターン以前に作られたセガハードは、大きく分けて次の４機種。
SG-1000
SEGA Mark III
Master System
MEGA DRIVE
他にもあるのだけど、同じ性能の別バージョン、という扱いになる。
たとえば、MEGA DRIVE には、性能が同じ別バージョンとして MEGA DRIVE 2 がある。
ここに書いたのは、「性能が違う」４機種だ。
だから、サターンが６番目というのはおかしいのでは？ というのが、最大の根拠となる。
しかし、気をつけてほしい。
ここでもう答えが出ているようなものなのだけど、２番目の機種に「３」という名称がつけられている。
SG-1000 には、性能が同じで付属品などが違う別バージョンとして発売された、SG-1000IIがあるためだ。
この「３」を基準に考えれば、Master System が４、MEGA DRIVE が５となる。
その次の機種は「６番目」となる。第６惑星である「サターン」だ。
（SG-1000II は２機種目に数えるが、MEGA DRIVE 2 は６機種目には数えない。この場当たり的なルールが話を混乱させている）
この裏付けが、先日紹介した書籍「ゲーム戦争―遊びを創造する男たち」に書かれていた。 216 ページ目だ。
メガドライブの開発中に、名称を決定するくだりだ。以下引用する。
佐藤たちは、この新機種を、通称「M５」と呼んでいた「ＳＧ−１０００」がM１、「マークⅡ」がM２、「マークⅢ」がＭ３、海外用の「マスターシステム」が、Ｍ４と呼ばれていた。
「いっそ、『マークＶ』というのはどうだろう」
「いや、これは、いままでの流れとは違うハードだから、そうはしたくない」
なかなか、タイトルが決まらない。
ひとりが、ふといった。
「『メガドライブ』というのはどうだろう」
上に引用したとおり、開発現場でもメガドライブを M5 と呼んでいたのだそうだ。
サターンは６番目で正しい。
—
ところで、引用した文章、色々説明したい。
まず、マークIIという機械はない。SG-1000II のことだ。
この書籍、ゲームマニア向けではなく、当時話題となっていた「セガ」という会社を紹介するビジネス書だ。
そのため、マニアから見ると色々とおかしなツッコミどころも多い。
しかし、「マニア向けでない」というだけで、丹念な取材を行って書かれているのは事実なようだ。
書かれていることに裏付け調査は必要だろうが、ある程度は信頼して良いように思う。
その上で、M４を「海外用の」マスターシステム、と書いていることに注目したい。
僕は、Mater System を「機能が違うハード」としてカウントしていた。
しかし、海外用のマスターシステムは SEGA MarkIII と同じ性能の別バージョンにすぎない。
ただ、リージョン管理（商品の流通地域の管理）のために、カートリッジの形状変更などがある。
このため、開発現場としては大きなプロジェクトで、新しい開発番号になったようだ。
そして、国内のマスターシステムは、「海外の名称に合わせて新規発売した別バージョンで、新ハードではない」扱いのようだ。
実際、SEGA Mark III に別売りされた付属品を最初から内蔵しただけで、それまでになかった機能は一切追加されていない。
僕は「機能で見ると、サターン以前に４機種しかない」と書いていたのだけど、実は３機種しかなかったことになる。
—
以上、過去に書いた記事が誤っていた、というお詫びと訂正になる。
まぁ、先に書いた通り、元々面白がって書いただけの噂話だったので、訂正する方が野暮なのかもしれないけど。
同じテーマの日記(最近の一覧)
関連ページ
別年同日の日記
申し訳ありませんが、現在意見投稿をできない状態にしています。 |