カテゴリー「パソコン・インターネット」の59件の記事

2018年7月 8日 (日)

ダン・アッカーマン「テトリス・エフェクト 世界を惑わせたゲーム」白揚社 小林啓倫訳

「これ以上テトリスを手元に置いておけない!」
  ――6 拡がるクチコミ

「これはソ連からやって来た、最初の知的財産なんですよ」
  ――8 ミラーソフトへ

オリジナルのエレクトロニカ60版テトリスが開発されてからというもの、新しいバージョンが生み出される際には、みなゼロから開発しなければならなかった。オリジナル版のテトリスも、そしいてゲラシモフ版、ハンガリー版も、そのたびに新しいコードが書かれたのである。
  ――9 ロシア人がやってくる

テトリスは単純だ。あまりに単純すぎる。
  ――12 テトリス、ラスベガスをのみこむ

このロシア人たちは、ゲームカートリッジとは何か、そして日本の家庭用ゲーム機がどのようなものかも理解していないのか。
  ――16 大きな賭け

「モニター、ディスクドライブ、キーボード、オペレーティングシステムで構成される」
  ――18 チキンで会いましょう

(エド・)ログの秘密は、彼が対数によるチューニングに精通しているところにあった。難しさを倍にしたい場合、たんに速度を倍にするのではだめなことを、彼は見抜いていた。
  ――19 ふたつのテトリスの物語

【どんな本?】

 みんな知ってる大ヒット・ゲーム、テトリス。

 落ちてくるブロックを横にズラし、または回して、隙間なく詰めこむ。ブロックは7種類、いずれも4つの正方形を組み合わせたもの。ルールは簡単、操作も単純。ストーリーもキャラクターもなく、敵も味方もいない。感情を揺さぶる要素は何もないはずの、幾何学的なパズルゲーム。

 にも関わらず、テトリスは史上空前の大ヒットとなり、私たちの貴重な時間を食いつぶし、みんなを寝不足に追いやった。ばかりでなく、ぷよぷよなど幾つもの後継者を生み出し、「落ちゲー」というジャンルまで開拓してしまう。

 そのテトリスは、どんな環境で、どのように生まれたのか。いかにして増殖し、マシンの違いを乗り越えて変異・適応し、国家の壁をすり抜け、世界中にパンデミックを引き起こしたのか。

 1970年代から1990年代までのコンピューター情勢、冷戦末期の緊張漂う国際関係、魑魅魍魎が徘徊する戦国時代のゲーム市場、当時のソ連の意外な素顔、コネと度胸と計算とハッタリが渦巻くビジネス・シーン、プログラマー同士の絆、そしてテトリスとゲームボーイにまつわる秘話など、刺激的なネタをたっぷり詰めこみ、驚きと興奮と郷愁に満ちた傑作ドキュメンタリー。

【いつ出たの?分量は?読みやすい?】

 原書は The TETRIS EFFECT : The Game That Hypnotized the World, by Dan Ackerman, 2016。日本語版は2017年10月17日第一版第一刷発行。単行本ソフトカバー縦一段組みで本文約343頁に加え、訳者あとがき5頁。9ポイント45字×18行×343頁=約277,830字、400字詰め原稿用紙で約695枚。文庫本ならやや厚めの一冊分。

 文章はこなれていて読みやすい。内容も特に難しくないが、テトリス登場当時の興奮を知っている年齢だと、更に楽しめる。中でも最も楽しめるのは、アセンブラで直接にハードウェアを叩くようなプログラムを書いている人だろう。

【構成は?】

 ほぼ時系列に沿って話が進むので、できれば頭から読んだ方がいい。あと、できれば登場人物一覧が欲しかった。重要そうな人物が登場する場面には、栞を挟むか付箋をつけるなどしておくといい。

  • Part 1
    • 1 グレイト・レース
    • 2 アレクセイ・レオニードビッチ・パジトノフ
    • 3 アメリカへ
    • 4 最初のブロック
    • 5 ザ・ブラックオニキス
    • 6 拡がるクチコミ
  • BONUS LEVEL 1 これがテトリスをやっているときのあなたの脳だ
  • Part 2
    • 7 鉄のカーテンの向こうから
    • 8 ミラーソフトへ
    • 9 ロシア人がやってくる
    • 10 「悪魔の罠」
    • 11 ELORGへようこそ
    • 12 テトリス、ラスベガスをのみこむ
  • BONUS LEVEL 2 テトリスは永遠に
  • Part 3
    • 13 防弾の契約
    • 14 秘密のプラン
    • 15 迫りくる嵐
    • 16 大きな賭け
    • 17 詰め寄るライバルたち
    • 18 チキンで会いましょう
    • 19 ふたつのテトリスの物語
  • BONUS LEVEL 3 認知ワクチン
  • エピローグ 最後のブロック
  • 謝辞/訳者あとがき

【感想は?】

 驚き呆れ焦り同感し懐かしみ感嘆し…と、気持ちを揺さぶられっぱなし。

 テトリスがソ連出身なのは有名だ。ただ、何の目的で、どんな経緯で造られたのか、となると、様々な憶測がある。曰く数学の教育用、AI研究、果ては…

「あまりに時間を費やしてしまうので、テトリスはアメリカの生産性を下げるために、悪の帝国で開発された悪魔の罠ではないかと怪しんでしまうほどだ」
  ――10 「悪魔の罠」

 と、陰謀説まであった。当然ながら、本書ではその真相も明らかになる。その過程で描かれる、当時のコンピューター情勢は、ロートル・プログラマーにとって、涙が止まらない懐かしさ。今でこそプログラミングは手軽に始められるが、1970年代はコンピューターに触れるってだけで特権階級だった。

1970年代初頭にコンピューターを自由に使うことができたというのは、紙の卒業証書より価値のあるものだったのである。
  ――3 アメリカへ

 ここで言うコンピューターは、懐かしきパンチガードでジョブを流すメインフレームである。現代の若いプログラマには意外に思えるだろうが、当時のプログラマはコンピューターに直接触れる事はできなかった。それはオペレーターという別の職種の方々の権限であって…

 などと年寄りが昔話を始めるとキリがない。

 それでも西側はマシな方で、ソ連をはじめとする東側は更にアレだ。それでもハッカー気質な人は洋の東西を問わず生まれてくる。最初の開発者アレクセイ・レオニードビッチ・パジトノフもそうだし、IBM-PCに移植したワジム・ゲラシモフもお仲間で、まさしく類は友を呼ぶ見本。

 ここで描かれるソ連のプログラマ同士の付き合いは、ネクタイ族が幅を利かせる前の古き良きエンジニアの楽園を思わせる。確かに政治的な締め付けこそ厳しいものの、契約だ権利だなどのウザい邪魔物から隔離され、面白いものはみんなで分け合うのだ。改めて考えると、これって共産主義の理想だよなあw

 かような環境はエンジニアにとって心地よいばかりでなく、テトリスの繁殖にも有利に働く。そう、繁殖である。バジトノフの職場を席巻したテトリスは、モスクワ市街へと漏れ出し、赤い首都も易々と陥落させ、国境をも超えて進撃を始め…

 と、テトリスが次々と人類を虜にしてゆくあたりは、その旺盛な感染力に舌を巻くばかり。だが、やがて鉄のカーテンが立ちふさがり…

 このカーテンを突き破ろうとする、西側のゲーム業界人の苦闘も、この本の大事な柱。なにせ相手は共産圏、こっちの常識は全く通じない上に、そもそも誰を相手にすればいいのかさえ分からない。ここで掟破りの大暴れを見せる任天堂の回し者、ヘンク・ロジャースの活躍はまるきしニンジャだ。

 何せ鉄のカーテンの向こう。

何かを尋ねるといいうのは(とくに1980年代のモズクワで政府機関について探るのは)、疑わしい行為なのだ。なんであれ、それを知らないのなら、おまえは知るべき人間なのではない――地元の人々はそう考えていたのである。
  ――1 グレイト・レース

 なんて所に、ロクなコネもなければ相手も知らず、体一つで突撃をかましたハンクの冒険は、ビジネスの成功物語としてもワクワクする。彼がELORG相手に繰り広げる大立ち回りは、秀吉の毛利攻めのような知恵と努力と誠意の物語だったり。また、ここでロジャースのバックとなる任天堂の体質も、日本人としてはちょっと誇らしかったり。

 また、テトリスそのものの数学的な性質や、ゲーム史の中でテトリスが打ち立てた数々の記録、そしてテトリスがヒトの精神に及ぼす影響も…

2014年に行われた研究によれば、テトリスをプレイすることで、喫煙者や飲酒者の欲求が約24%減少した。
  ――テトリス・メモ22

 なんて嬉しい話や、もしかしたらPTSDの治療に役立つかも、なんてネタまであって、ゲーム・マニアにはたまらない一冊だ。プログラマに、ゲーム・マニアに、冷戦時代のソ連に興味がある人に、ビジネスで一旗あげたい人に。読み始めたら止まらない、刺激と興奮に満ちたドキュメンタリーの傑作だ。

【関連記事】

| | コメント (0) | トラックバック (0)

2018年5月 7日 (月)

ココログ:カスタムCSSでタイトルバナーがリンクと判るようにする

T0  このブログの左上、タイトルバナー(右図の赤い丸の所)は、トップページへのリンクになっている。

 ここをクリックすると、トップページに飛ぶ。トップページには、最近の記事5件の全文が載っている。

 今までのデザインだと、リンクになっている事が伝わりにくい。文字の色が地の文と同じ黒なので、見分けがつかない。マウスカーソルを重ねれば、アイコンが指の形になるけど、文字の色が変わらないので、見逃しかねない。

 なんとか「タイトルウバナーはリンクだ」と判るようにしたい。そこで、タイトルバナーの色を本文中のリンクと同じ色にする。また、マウスカーソルが来た時の挙動も、本文中のリンクと同じにする。つまり、カーソルを指の形にして、文字の色も緑色にする。

 タイトルバナーの色を変えるだけなら、標準の「デザイン」→「現在のテンプレートを編集」で出来る。が、マウスカーソルが重なった時に色を変える方法は見つからない。そこで、カスタムCSSを使った。

 と言っても、以下の4行を付け足すだけ。

#banner a:link    { color: #0044ff; } /* 未訪は青 */
#banner a:visited { color: #660099; } /* 既訪は紫 */
#banner a:hover   { color: #336600; } /* マウスカーソルが来たら緑 */
#banner a:active  { color: #cc0000; } /* クリックしたら赤 */

 以下が結果だ。既にトップページに来ているなら、タイトルバナーが紫色になる。

T1

 マウスカーソルを重ねると、文字が緑色になってマウスカーソルが指の形になる。

T2

 これで多少は「リンクである」由が伝わればいいんだが。

| | コメント (0) | トラックバック (0)

2018年2月12日 (月)

ココログのカテゴリーのアーカイブから記事一覧を作るVBScript

 カテゴリ別書評一覧の新装開店の詳細その4。

【はじめに】

カテゴリ別書評一覧を作り替える際、ついでに少し体裁を変えた。記事は千件以上あるので、手作業でじゃやってられない。そこで、各カテゴリーのアーカイブから一覧を作る VBScript を書いた。

【もう少し詳しく】

 各カテゴリーの頁の HTML は、次の構成だ。最新の10記事は全文を載せ、11記事目より前の記事はリンクだけが載っている。

 ¦
 ¦ なんかいろいろ
 ¦
記事1の全文
記事2の全文
記事3の全文
 …
記事10の全文
 ¦
 ¦ なんかいろいろ
 ¦
記事11へのリンク
記事12へのリンク
記事13へのリンク
 …
記事xへのリンク
 ¦
 ¦ なんかいろいろ
 ¦

 これから、各記事のタイトル・URL・日付を抜き出し、次の形の HTML を作る。

<li>記事1の日付 <a href="記事1のURL">
記事1のタイトル</a></li>
<li>記事2の日付 <a href="記事2のURL">
記事2のタイトル</a></li>
<li>記事3の日付 <a href="記事3のURL">
記事3のタイトル</a></li>
 …
<li>記事10の日付 <a href="記事10のURL">
記事10のタイトル</a></li>
<li>記事11の日付 <a href="記事11のURL">
記事11のタイトル</a></li>
<li>記事12の日付 <a href="記事12のURL">
記事12のタイトル</a></li>
<li>記事13の日付 <a href="記事13のURL">
記事13のタイトル</a></li>
 …
<li>記事xの日付 <a href="記事xのURL">
記事xのタイトル</a></li>

 ちなみに、記事1~記事10は、次の形になっている。

 ¦
 ¦ なんかいろいろ
 ¦

<h2>記事?の日付</h2>

 ¦
 ¦ なんかいろいろ
 ¦

<h3><a href="記事?のURL">記事?のタイトル</a></h3>
 ¦
 ¦ なんかいろいろ
 ¦

 記事11~記事xの形は以下。

<li class="archive-list-item"><a href="記事?のURL">記事?のタイトル</a> <span  class="archive-list-date">記事?の日付</span></li>

 要はテキスト・フィルタですね。必要な所を正規表現で見つけ出し、都合のいい形に直して書き出してるだけ。

【インストール】

 この記事の末尾にあるスクリプトを、ctindex.vbs などの名前で保存する。

【使い方】

  1. 各カテゴリーをブラウザで開き、その HTML を cat1.html などの名前で保存する。
  2. cat1.html を、ctindex.html にドラッグ&ドロップする。
     → cat1.html.txt ができる。
  3. テキスト・エディタで cat1.html.txt に見出しや <ol>~</ol> などを付け加えてください。

【スクリプト】

' 2018.01.266 カテゴリHTMLから索引頁を作る
Option Explicit
Dim WSH   : Set WSH  = WScript.CreateObject("Wscript.shell")
Dim FSYS  : Set FSYS = WScript.CreateObject("Scripting.FileSystemObject")

' ダブルクリックで起動したら使い方を示して終わる
if WScript.Arguments.length <> 1 then
    Call MsgBox( "Drag&DropしたファイルLから索引頁を作る" )
    WScript.Quit
end if

' D&Dしたファイル名からフルパスと親フォルダを得る
Dim iName   : iName   = WScript.Arguments.Item(0) ' D&Dしたファイルのフルパス
Dim iFolder : iFolder = FSYS.getParentFolderName( iName ) & "\" '親フォルダ名

' D&D したファイルを開く
Dim iHandle : Set iHandle = CreateObject("ADODB.Stream")
iHandle.Type          = 2                ' text mode
iHandle.charset       = "utf-8"
iHandle.LineSeparator = 10    ' lf
iHandle.open
iHandle.LoadFromFile iName '入力ファイルを読み込む
If Err.Number <> 0 Then
    Call MsgBox( "Code:" & Err.Number & " :Can not open " & iName )
    WScript.Quit
end if

Dim hDate, hURL, hTitle, rDate, rTitle, rList, oBuf
Set rDate  = new RegExp :  rDate.IgnoreCase = True    '<h2>日付</h2>
Set rTitle = new RegExp : rTitle.IgnoreCase = True    '<h3><a href=URL>記事名</a></h3>
Set rList  = new RegExp :  rList.IgnoreCase = True    '<li class=..>
rDate.pattern = "^.*<h2>(\d+)[^\d]+(\d+)[^\d]+(\d+).*</h2>.*$"
rTitle.pattern = "^.*<h3><a href=.([^>]+).>([^<]+)</a></h3>.*$"
rList.pattern = "^<li class=.archive-list-item.><a href=.(.*).>(.*)</a>.*<span .*>(.*)</span></li>$"
Do While iHandle.EOS = False
    Dim line : line = iHandle.ReadText( -2 )
'                                        <h2>日付</h2>
    if rDate.Test( line ) then
        hDate = rDate.Replace( line, "$1" & "." & "$2" & "." & "$3" )
    end if
'                                        <h3><a href=URL>記事名</a></h3>
    if rTitle.Test( line ) then
        hURL   = rTitle.Replace( line, "$1" )
        hTitle = rTitle.Replace( line, "$2" )
        oBuf = oBuf & "<li>" & hDate & " <a href=""" & hURL & """>" & vblf & hTitle & "</a></li>" & vblf
    end if
'                    <li class=..><a  href=URL>記事名</a> <span..>日付</span></li>
    if rList.Test( line ) then
        hURL   = rList.Replace( line, "$1" )
        hTitle = rList.Replace( line, "$2" )
        hDate  = rList.Replace( line, "$3" )
        oBuf = oBuf & "<li>" & hDate & " <a href=""" & hURL & """>" & vblf & hTitle & "</a></li>" & vblf
    end if
Loop
                    ' 結果の書き出し
Dim oHandle
Set oHandle = CreateObject("ADODB.Stream")
oHandle.Charset    = "UTF-8"
oHandle.Open
oHandle.WriteText oBuf, 0
oHandle.SaveToFile WScript.Arguments.Item(0) & ".txt", 2        '上書き

iHandle.Close
oHandle.Close
Call MsgBox( hDate )

【おわりに】

 改めて考えると、「複数のカテゴリーを一度で処理できりゃ楽なんじゃね?」とか「いっそカテゴリーのHTMLもスクリプトで取ってこいや」とか、改善の余地はいろいろあるけど、とりあえず役に立ったから良しとしよう。

【関連記事】

| | コメント (0) | トラックバック (0)

2018年2月 8日 (木)

ココログでスマートフォン対応アコーディオン式メニュー但し反則技

 カテゴリ別書評一覧の新装開店の詳細その3。

【謝辞】

 いっぽんしめじ様のにわはんみょうをまぜまココログの「スマートフォン表示」に無理矢理スタイルを設定してみたにお世話になりました。

【はじめに】

 カテゴリ別書評一覧は、やたら記事が長い。下の方を見るには、画面の大きなパソコンでもスクロールが面倒臭い。画面の狭いスマートフォンじゃ、やってられないだろう。

 紆余曲折の末、アコーディオン式メニューを使うことにした。ただし、反則技を使っている。

【アコーディオン式メニューとは】

 こんな感じのシロモノ。下の【見出し1】や【見出し2】をクリックすると、「本文1」や「本文2」が、見えたり消えたりする。

【手口】

 スタイルタグ(<style type="text/css">~</style>)を使う。上のサンプルは、以下の HTML で実現している。できれば、この記事の HTML を見て確認して欲しい。Firefox なら、CTRL+U で HTML を表示します。

<style type="text/css">
/* 見出しの体裁 */
.c_menu label {
    display: block;
    margin: 0.2em 0 0px 0;
    padding : 0.2em;
    line-height: 1em;
    cursor :pointer;
    background :#f0f0a0;
    font-weight: bold;
    border-left: 1px solid silver;
    border-bottom: 1px solid silver;
}
/* チェックボックスを隠す */
.c_menu input {
    display: none;
}
/* 本文 最初は隠す */
.c_menu .menuBody {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
}
/* 本文 チェックボックスがonなら表示 */
.c_accordion:checked + .menuBody {
    height: auto;
    padding: 2px;
    opacity: 1;
}
</style>

<div class="c_menu">
    <label for="c_title1">【見出し1】</label>
    <input type="checkbox" id="c_title1" class="c_accordion" />
    <div class="menuBody"><p>本文1</p></div>

    <label for="c_title2">【見出し2】</label>
    <input type="checkbox" id="c_title2" class="c_accordion" />
    <div class="menuBody"><p>本文2</p></div>
</div>

【解説】

 スタイルシートと HTML を組み合わせ、こんな感じに指定した。

  1. 見出しは、チェックボックスにする。
    ただしチェックボックスの□は隠す。
  2. 本文は、最初は高さをゼロにして隠しておく。
  3. チェックボックスがチェックされたら、本文を見せる。

 スタイルシートは、普通 ~.css で指定する。ココログだと、カスタムCSSを使う。

 が、しかし。

 ココログのカスタムCSSは、パソコンで見た時だけ有効になる。スマートフォン用のスタイルシートは、有料プランだけが使える。無料のプランでは使えない。

 幸い、無料のプランでも、HTML の編集はできる。そして、HTML内でもスタイルシートは書ける。<style>~</style>で囲って書けばいい。

 そこで、ココログの記事編集画面の「HTMLの編集」を使い、記事内にスタイルシートを埋め込んだ。

【でも反則技です】

 ただし、これは反則技だ。

 HTML の規格だと、<style>~</style>を使っていいのは、<head>~</head>の中だけだ。<body>~</body>では、使えない。が、上の方法だと、<body>~</body> の中に書くことになる。

 規格に沿っていないので、ブラウザによっては巧く動かない可能性がある。また、スマートフォンでも、機種によってはダメかもしれない。

 また、他にもマズい点がある。

 この方法だと、記事の中にスタイルシートを埋め込む。他の記事でも同じ手口でアコーディオン式メニューを使った場合、困った事がおこるかも。

 というのも。「カテゴリー」や「バックナンバー」を見た時だ。

 例えば、このサンプルだと、スタイルのクラス c_menu や c_accordion を使っている。他の記事でも同じ名前を使っていた場合、名前がカブって思わぬ事態になるだろう。

【反則技の報い】

 だけじゃない。実は、記事を編集する時点で、既に問題が起きていた。

 というのも、ココログの記事編集画面で、文字を入力できないのだ。「HTMLの編集」はできるんだが、そうでない「記事の編集」画面では、文字が入らない。

 どうも <style>~</style> があると、「記事の編集」は巧く動かないらしい。

 仕方がないので、<style>~</style> 以外の部分を予め完成させ、最後に「HTMLの編集」で <style>~</style> を書き加えた。

【メモ】

 最初は記事の先頭に目次をつけて、頁内リンクを張っていた(→ウェブページ版カテゴリ別書評一覧、パソコンからだけ見える)。が、これだと、二つ問題がある。

 まず、スマートフォンからは見れない。ココログの仕様で、ウェブページが見れるのはパソコンだけで、スマートフォンじゃ見れないのだ。

 そこでウェブページからブログの記事に移す。

 が、ここでも二つ目の問題が起きた。スマートフォンだと、頁内リンクが効かない。常に頁の先頭に飛ぶ。これじゃ目次の意味ないじゃん。

 どうやら複数の原因が絡んでいるようだ。スマートフォンだと、ココログは別の頁にリダイレクトする。この際に、頁内リンクの情報が失せるらしい。また、機種によっては、ブラウザの仕様で、頁内リンクの有効個数に制限があるみたい。

 加えて、HTMLの書き方にも制限があるっぽい。<a name=~>じゃダメで、id を使えとか。この辺は面倒なんで、途中で調べるのは諦めた。

 ってんで、アコーディオン式メニューに切り替える。JavaScript を使う手もあるが、なんとなく嫌なので、HTML+CSS で実現可能な方法を探す。

 が、ここでも、ココログの制限に泣かされた。つまりココログだとスマートフォンではカスタムCSSが効かないのだ。

 でもまだ手はある。何も .css を使う必要はない。HTML中の style="~" でも体裁は指定できる。やったね。

 と思ったら。スタイルシートの終盤、c_accordion:checked + .menuBody の所でひっかかった。HTML 中だと、決まった体裁は指定できる。が、:checked などの疑似クラスは使えないのだった。がっくし。

 という事で、再びスタイルシートに戻る。解決案を示唆してくれた、いっぽんしめじ様には深く感謝する次第。

 やあ、これで万事解決、じゃ記事にしようか…と思ったら、ここでも文字が入力できなくて泣く。仕方がないので、とりあえず文字だけ入力しといて、最後の仕上げにスタイル指定を入れる事にする。

 と、そんな風に、一見スタイリッシュなシロモノも、それを支える裏方さんは様々な苦労をしいているんです←いやオマエがダメなだけだろ

【関連記事】

| | コメント (0) | トラックバック (0)

2018年2月 7日 (水)

ココログの記事一覧で大量の記事を一度に選ぶ

 カテゴリ別書評一覧の新装開店の詳細その2。

【はじめに】

Select02x
画像クリックで拡大します

 ココログは、既に書いた記事を削除できる。削除以外にも、非公開にする・コメント欄を閉じる・カテゴリを変えるなど、色々な操作ができる。

 これらの操作は、記事一覧の画面で行う。変えたい記事を選んで、すべき操作を指定する。右のスクリ-ン・ショットでは、記事「SFマガジン2018年2月号」を公開している。なお、赤い丸や文字は、私が書き加えた。

 一度に複数の記事を選ぶこともできる。が、大量の記事は選べない。というのも、一画面に表示できる記事は、最大50件までなのだ。だから、一度に操作できるのも、50件までという事になる。

 記事の数が少なければ、たいした問題じゃない。が、大量の記事を一括して消したり非公開にする場合、これはシンドい。「カテゴリ別書評一覧の新装開店」では、全部の記事をいったん削除した。記事は千件以上ある。一画面最大50件だから、素直にやると20回以上も同じ操作を繰り返さなきゃいけない。

 これは辛いんで、ちょっとセコい手口を使い、記事一覧の画面で、大量の記事を表示させた。

【記事一覧で大量の記事を表示する】

 以下の方法で、記事一覧に500件の記事を表示した。

1.ブラウザで記事一覧の画面を出す。

2.URLは、こんな感じになっている筈だ。ちなみに、赤い所の文字は出鱈目な数字に書き換えた。

http://app.cocolog-nifty.com/t/app/weblog/post?__mode=list_entries&blog_id=123456

3.URLの最後に、「&limit=500」を付け加える。

http://app.cocolog-nifty.com/t/app/weblog/post?__mode=list_entries&blog_id=123456&limit=500

4.編集した URL で、ブラウザをリロードしよう。
  記事一覧は最初の500件を表示する。
  嬉しい事に、頁の下にある「前 >」を押すと、501件目~1000件目を表示する。

【注意事項】

 2000件とか欲こかないで、500件 ぐらいにしときましょう、という話。

 だいたい見当がつくと思うが、&limit=500 は「最大500件まで表示する」という指定だ。だから、&limit=2000 とすれば、2000件まで表示する。

さて。先に「記事は千件以上ある」と書いた。なら、&limit=2000 とすりゃ良さそうなモンだ。が、500件を例に出したのには、ちゃんと理由がある。

 実を言うと、&limit=2000 を指定して、やってみたのだ。ちゃんと全記事を表示してくれた。

 のは、いいが。ここで全ての記事を選び、「削除」ボタンを押す。すると、暫く待たされた挙句に「こんなに沢山は扱いきれないよ」みたいなメッセージが出た←すまん、メッセージの詳細は覚えてない。

 当然、処理はキャンセルされてしまう。どうも、削除にせよコメント欄を閉じるにせよ、一度に扱える記事の数には限界があるらしい。1000件でも試したが、やはりハジかれた。500件なら、受け付けてくれた。

 という事で、500件ぐらいで我慢しましょう。2000件は無理です。

【関連記事】

| | コメント (0) | トラックバック (0)

2018年2月 5日 (月)

ココログ(Typepad)のバックアップを複数のファイルに分けるVBScript

 カテゴリ別書評一覧の新装開店の詳細その1。

【はじめに】

 ココログは、記事のバックアップを取れるし、復元もできる。バックアップを取るのは簡単だが、復元の際に困る場合がある。

 というのも。ココログで復元するには、「管理」ページの「読み込む」を使う。が、ココログだと、一回の操作で読みこめるファイルの大きさに、制限があるのだ。最大3M(メガバイト)まで。

 記事の数が多かったり、大きな写真を使っていると、バックアップの大きさが3Mを越えてしまう。私の場合は約17Mに達した。だから、復元の際には、複数のファイルに分けて、何回か「読み込む」操作をしなきゃいけない。

 分けるったって、単純にバイト数で分けるわけにはいかない。記事の切れ目で分ける必要がある。ってんで、記事の切れ目でファイルを分ける VBScript を作った。

 はいいが、使い勝手はとても悪い。

 というのも。

 このスクリプト、元ファイルを幾つかのファイルに分けて書きだす。

 のはいいが、書き出した全てのファイルに対し、手作業で文字コードを変える必要があるのだ。書き出すファイルは、BOM つきの UTF-8 だ。これを、BOM なしの UTF-8 に変える。仮に10個のファイルに別れたら、10回同じ操作を繰り返す必要がある。不細工だね。

 私は K2Editor を使い、いったん開いて、保存時の文字コードを UTF-8N に変えた。

 などの問題はあるが、記録として記事に残しておく。

【使い方】

  1. 下にあるソースを、div.vbs などのファイル名で保存する。
  2. ココログのバックアップを、div.vbs にドラッグ&ドロップする。
     →バックアップと同じフォルダに、"a-0.txt", "a-1.txt", "a-2.txt" … などが出来る。
  3. 上で出来たファイルは、文字コードが BOM つきの UTF-8 である。これを、テキスト・エディタなどで、BOM なしの UTF-8 に変える。
  4. 文字コードを変えたファイルを、ココログで「読み込む」。

【メモ】

a.文字コード

 ココログ(Typepad)のバックアップは、BOM なしの UTF-8 。読み込む際も、BOM なしの UTF-8 だ。BOM つきの UTF-8 も読ませてみたが、ハジかれた。いずれも改行文字は LF。

 面倒なことに、VBScript は Unicode が苦手だ。読み書きともに特殊な API を使わにゃならん。おまけに書けるのは BOM つき UTF-8 だけ。もっとも、いったん書いてから、先頭の3バイトを削って上書きすりゃいいんだが、面倒くさいからやめた←をい。

b.ココログのファイル形式

 この記事を書き始めてから調べて知ったんだが、ココログのバックアップのファイル形式は Tyopepad だった。んな事も知らずにスクリプトを書いていたとは、我ながら無謀な真似したもんだ。

c.ココログのバックアップの取り方

  1. 管理ページトップから、タブ「ブログ」を選ぶ。
  2. 「そのほかの操作」をクリックする。
    →ポップアップ・メニューが出る。
  3. ポップアップ・メニューから、「ブログの管理」を選ぶ。
    →「ブログ」タブの「管理」サブタブが出る。
  4. 「管理」サブタグから、「読み込み/書き出し」を選ぶ。
    →「読み込み/書き出し」の頁が出る。
  5. 書き出し(IPv4のみ)を右クリックして、リンク先を保存する。
    ブラウザが Firefox なら、「名前をつけてリンク先を保存(K)…」を選べば、
    ファイル保存ダイアログが出る。
  6. 上で保存したファイルが、ココログのバックアップだ。

d.ココログを復元する際の注意事項

 復元する前に、更新通知とRSSフィードを切っておこう。常連さんや Google にスパムを送りかねない。というか、私は切らずにやらかしたのでかなり迷惑をかけてしまった。

 復元は、バックアップと同じ「読み込み/書き出し」の「読み込み」を使う。文字コードは「Unicode(UTF-8)」にする。読み込んだ後にブログの再構築を促してくる。が、記事が多いと再構築は時間がかかるので、最後のファイルを読み込んだ後にしよう。

【ソース】

' 大きいテキストファイルを3Mぐらいに分割
Option Explicit
Dim WSH   : Set WSH  = WScript.CreateObject("Wscript.shell")
Dim FSYS  : Set FSYS = WScript.CreateObject("Scripting.FileSystemObject")
Const MAXBUF = 2700000

' ダブルクリックで起動したら使い方を示して終わる
if WScript.Arguments.length <> 1 then
    Call MsgBox( "Drag&Dropしたファイルを3Mごとに分割する" )
    WScript.Quit
end if

' D&Dしたファイル名からフルパスと親フォルダを得る
Dim iName   : iName   = WScript.Arguments.Item(0) ' D&Dしたファイルのフルパス
Dim iFolder : iFolder = FSYS.getParentFolderName( iName ) & "\" '親フォルダ名
Dim msg        : msg = ""

' D&D したファイルを開く
Dim iHandle : Set iHandle = CreateObject("ADODB.Stream")
iHandle.Type   = 2                ' text mode
iHandle.charset    = "utf-8"
iHandle.LineSeparator = 10    ' lf
iHandle.open
iHandle.LoadFromFile iName '入力ファイルを読み込む
If Err.Number <> 0 Then
    Call MsgBox( "Code:" & Err.Number & " :Can not open " & iname )
    WScript.Quit
end if

Dim article    : article    = ""
Dim buf        : buf        = ""
Dim n        : n            = 0
Do While iHandle.EOS = False
    Dim line : line = iHandle.ReadText( -2 ) & vbLf
    if InStr( line, "AUTHOR: " ) = 1 then
        if ( Lenb( buf ) + Lenb( article ) ) > MAXBUF then
            buf = putBuf( buf, iFolder & "a-" & n & ".txt" )
            n = n + 1
        end if
        buf = buf & article
        article = ""
    end if
    article = article & line
Loop
buf = putBuf( buf & article, iFolder & "a-" & n & ".txt" )
Call MsgBox( n & ": " & msg )
WScript.Quit

' ファイル f にテキスト c を書きだす
Function putBuf( c, f )
    putBuf = ""
    if Lenb( c ) = 0 then Exit Function
'
    Dim oHandle : Set oHandle = CreateObject("ADODB.Stream")
    oHandle.Charset    = "UTF-8"
    oHandle.Open
    oHandle.WriteText c, 0
    oHandle.SaveToFile f, 2        '上書き
    oHandle.Close
end Function

【関連記事】

| | コメント (0) | トラックバック (0)

2018年2月 4日 (日)

カテゴリ別書評一覧の新装開店

 カテゴリ別書評一覧を作り替えた。

 元はウェブページとしていたが、一つ問題がる。スマートフォンから見れない。スマートフォンからは、ブログの記事だけが見える。ウェブページは見えない。だがら、スマートフォンからウェブページのカテゴリ別書評一覧は見えない。これはココログの仕様だ。

 そこで、ブログの記事として新しく作り直すことにした。が、これが幾つか別の問題を引き起こす。問題の何個かは解決できたが、不具合も残った。時として元の問題より新しく生まれた不具合の方が大きかったりするが、まあ仕方がない。

 それはそれとして、多少のノウハウも得た。そこで、これから折を見て得たノウハウや作ったスクリプトを記録しておく。

 ただし。作ったスクリプトは自分の需要に合わせたモノだ。なので、ハッキリ言ってあまり役に立たない。おまけに使い勝手は悪いし、多少の書き換えが必要だったりする。そこは覚悟して欲しい。

 まずは、大雑把な手順を。

  1. ブログのバックアップを取る。
    念のため、取ったバックアップに加え、そのコピーも保存する。
  2. ウェブページのカテゴリ別書評一覧を、ブログの記事として登録する。
  3. 先の 1. で作ったバックアップを、テキスト・エディタで開き、一括変換機能で変換する。
    変換元はウェブページのカテゴリ別書評一覧の URL、
    変換先は 2. で登録したブログ記事のカテゴリ別書評一覧の URL。
  4. 先の 3. で変換したバックアップを、複数のファイルに分ける。
    ココログ(Typepad)のバックアップを複数のファイルに分けるVBScript
  5. ココログの記事を全て削除する。
    ココログの記事一覧で大量の記事を一度に選ぶ
  6. 先の 4. で分けたファイルを、ココログにアップロードする。
  7. ココログの記事を再構築する。
  8. 一部の記事は URL が変わってしまう。
    そこで、カテゴリ別書評一覧を作り直す。
    ブラウザで各カテゴリを開き、HTML をディスクに保存する。
    カテゴリのHTMLから URL と記事タイトルを抜き出し、カテゴリ別書評一覧 のHTML に加工する。
    出来上がった HTML で、2. で作った記事を入れ替える。
    ココログのカテゴリーのアーカイブから記事一覧を作るVBScript

 なんてことをやる間に、次のような壁に突き当たった。不細工な手口でも解決できた壁には○を、解決できなかった壁には×をつける。

  1. ×:ココログのウェブページはスマートフォンから見れない。
    しばらく待てば…と思っていたが、どうもココログは対応する気がないようだ。
  2. ×:ココログの無料プランでは記事の一括変換ができない。
  3. 〇:文字コードに注意。
    ココログは、バックアップもアップロードするファイルも、BOM なしの UTF-8 だ。
    いくつか VBscript を作ったんだが、UTF-8 の読み書きには苦労した。
    え?「今は python だろJK」?そこはムニャムニャ。
  4. ×:カテゴリ別書評一覧は、とても長い記事だ。
    下の方の内容を見る時は、かなりスクロールしなきゃいけない。
    これは面倒くさい。
    そこで記事の頭に目次をつけ、頁内リンクを張った。
    が、しかし。
    ココログをスマートフォンから見ると、頁内リンクが効かない。
    原因は不明。
    ココログの仕様か、スマートフォンの都合か、私の HTML がミスってるのか、結局わからないまま。
  5. 〇:そこで、CSS によるアコーディオン式メニューに変えた。
    最初は見出しだけが見える。
    見出しをクリックすると、中身を開いて見せる。
    もう一度クリックすると、閉じて見出しだけになる。
  6. 〇:アコーディオン式メニュー、最初は カスタムCSS でやろうとした。
    が、ココログは、スマートフォン用の頁だとカスタムCSSが効かない。
    そこで一時しのぎの反則技を使った。
    反則技なので、将来ブラウザのバージョンが上がるとダメになるかも。
    ココログでスマートフォン対応アコーディオン式メニュー但し反則技
  7. 〇:「ブログは残すが記事は全部削除する」のは、ココログだと凄く面倒くさい。
    記事が少なければたいした問題じゃないが、多いとたいへんな手間になる。
    ココログの記事一覧で大量の記事を一度に選ぶ
  8. ×:ココログで、記事を削除→記事を再度アップロード すると、記事の URL が変わる事がある。他の記事へのリンクを張っている場合、ソレがリンク切れになってしまう。
    再び 記事全部削除→変換してアップロード すりゃ解決しそうだけど、面倒くさいから今は止めとく。
  9. 〇:ココログの無料プランだと、アップロードできるファイルの容量に制限がある。
    記事数が多いと、何回かに分けてアップロードしなきゃいけない。
    そこで適切な大きさごとにファイルを分けるスクリプトを書いた。
    が、c. とかの関係で、いろいろとムニャムニャ。
    ココログ(Typepad)のバックアップを複数のファイルに分けるVBScript
  10. ×:客足がぱったり途絶えた。これは Google の仕様だろう。
    以下は推測だが、理由の一つはパクリを防ぐためと考えた。
    Google は新しいネタを好む。
    同時に、ネタが同じなら、より古い記事を好む。
    オリジナルの記事とパクリ記事を比べると、オリジナルの方が古い。
    よって古い記事がオリジナルだろう、と見当がつく。
    だから古い記事を贔屓すれば、オリジナルの尊重になるだろう。
    で、だ。
    私は 記事を削除→再登録 した。
    その結果、ファイルの日時は新しくなる。
    そのせいで、古いが故の贔屓から外れたんだろう。
    幸いにして常連さんは相変わらず通ってくれてるんで、のんびりやっていきます。

 と、そんな記事を、これから気が向いたら書いていきます。

【関連記事】

| | コメント (0) | トラックバック (0)

2016年4月27日 (水)

Windows:デスクトップの大量アイコンはお手軽ランチャで整理

 Windows には便利なアプリケーションが沢山ある。あるのはいいけど、使いたいアプリケーションを Windows メニューから探し出すのは手間がかかるし、面倒くさい。また、よく使う書類も、すぐ見つかる所に置いておきたい。じゃ、デスクトップに置いておこう。これなら一発で見つかるし。

 などと考えるのは人の常。でも、パソコンを何年も使っていると、デスクトップに置くアプリケーションや書類のアイコンが増えて、気が付いたらデスクトップはアイコンだらけ。

 なんてのは、多くの人が経験する話。幸いにして、この問題を解決する便利な道具がある。ランチャーと呼ばれるアプリケーションだ。

 ランチャーを極論すると。デスクトップにゴチャアゴチャとある多数のアイコンを、小さなラックにまとめて収納できるソフトだ。デスクトップのアイコンをクリックするように、ラック上のアイコンをクリックすれば、アプリケーションが立ち上がったり、書類が開いたりする。

 大抵のランチャーは他にも便利な機能があるんだが、基本的にはデスクトップを整理するための道具だと思っていい。私もぴょんきち氏が作った CLaunch を使っていた。軽くて速くて機能は充分だし、ラックもコンパクトで使う画面の面積も小さい上に、なんたってデザインがカッコいい。

 が、Windows7 だと、何か他のアプリケーションかドライバと相性が悪いらしく、なぜか動かなくなってしまった。結局、今でも何が原因かわかっていない。他のランチャーを使う事も考えたのだが、あまり余計なアプリケーションを入れたくない。

 どうせ基本的な機能しか使っていないんだし、もっと手抜きできる手口はないだろうか?

 と考えたら、実に姑息な方法があった。なんのことはない、アイコン専用のフォルダをデスクトップに置けばいい。このフォルダの中に、よく使うアプリケーションや書類のショートカットを、まとめて突っ込んでおく。書類の本体は適切なフォルダに置けば、デスクトップはスッキリする。

 パソコンを起動した時に、アイコン専用フォルダをダブルクリックで開けば、その窓がランチャーと同じように働く。表示を「一覧」にしておけば、小さいアイコンと名前だけが画面に出るので、あまり場所も取らない。Windows10 だと、こんな雰囲気の窓になります。

 この手口、さすがに CLaunch に比べると場所を取るが、利点はある。業務用のパソコンだと、セキュリティ上の目的で、余計なアプリケーションを入れてはいけない規則になっている場合がある。この手口は特にアプリケーションを入れなくていいので、業務用のパソコンでも問題ないのだ。

 なお、ショートカットを作る際は、CTRL キーと SHIFT キーを押しながら、元のファイルをアイコン専用フォルダにドラッグ&ドロップすると、 「ショートカットを作りアイコン専用フォルダに置く」操作が、一発でできます。出来上がるショートカットが「~のショートカット」って名前になるのが、ちと困りものだけど。

| | コメント (0) | トラックバック (0)

2016年4月26日 (火)

Raffaele Cecco「JavaScriptグラフィックス ゲーム・スマートフォン・ウェブで使う最新テクニック」オライリージャパン 相川愛三訳 2

軽量な jQuery UI に対し、Ext JS は過酷な使用に耐えるユーザーインターフェースを提供します。
  ――4章 高度なUI

 Raffaele Cecco「JavaScriptグラフィックス ゲーム・スマートフォン・ウェブで使う最新テクニック」オライリージャパン 相川愛三訳 1 から続く。

【1章 コードの再利用と最適化】

 なんとなく、著者は8ビット機の時代からゲームを作っていたんじゃないかと思う。というのも、1章から年寄りには懐かしいネタが次々と出てくるので。浮動小数点演算を避けるために予め計算してルックアップ・テーブルにキャッシュしておくとか、キャラクターはスプライト・オブジェクトを使って背景に重ねるとか、まるでファミコンだ。

 かと思えば、Duff's device(→Wikipedia)なんて懐かしいネタも出てきたり。低レベルの話だと、2の累乗での乗除算はシフト演算で代行って小技もあったが、JavaScriptでは「実際に調べてみると」乗除算ともに特に利益はないとか。こういう所を、ちゃんと測っているのが流石だし、測り方まで教えてくれるのが俺しい。

 ただし切り捨ては Math.floor() より n >> 0 の方が、Google Chrome だと3割ほど速かったとか。他のブラウザじゃ大差ないんだけど。

 やっぱり、と思ったのが、DOM の要素を jQuery で扱う時の注意点。ドキョメント全体から指定の要素を探すのは、ソレナリに時間がかかり、処理時間にして3~8倍の差が出る。だから、扱う要素は初期化時に予め DOM を呼び出して変数に代入しておき、ループの中ではなるたけ jQuery に検索させないようにするといい。

 同様に面白いのが、多くの要素を追加する時。これも、何度も append() するより、多数の要素を含む長い文字列で HTML を作っておき、一気に append() する方が速いとか。

 ここでの描画サンプルは、縦に細長い(1ピクセル)の div 要素を横に並べてサインカーブを描くなんて荒業を見せてくれる。その手があったかw

【2章 DHTML】

 2章では、Web ならではの最適化が出てくる。例えば多数のキャラクターを一枚の PNG 画像にまとめて収納しておき、描画時にクリッピングして表示するなんて小技。HTTP プロトコルだと、小さい画像を何枚も送るより、一枚の大きい画像を送る方が速いのだ。

 これをスプライト・オブジェクトとして、描画位置は css をいじって動かす。これならフリッカーに悩まないね←古い。

 ブラウザ・ゲームで辛いのが、マシンごとの性能の違い。setInterval()setTimeout() を使ってもいいが、「Windows XP が提供するOSレベルのタイマー精度は15ミリ秒」と、あまし信用できない。

 また、スプライト・オブジェクトの移動量も、マシン性能に応じて変えなきゃいけない。遅いマシンじゃ一回の移動量を大きく、速いマシンじゃ移動量を小さくしたい。ところがPCだとブラウザ以外のアプリケーションが動いてたりするんで、最初にマシン性能を測っただけじゃ後で困ったことになる。

 ってんで、ここでは、スプライト・オブジェクト全体を処理するのにかかった時間を常に測り、これに応じてスプライト・オブジェクトの移動量を調整したり、タイムアウト値を変えたりしてる。そういう事かあ、と納得した。

【3章 スクロール 】

 最初に出てくるのは視差スクロール。複数のレイヤを重ね、手前のレイヤは速く、奥のレイヤは遅く動かすことで、立体感を出すテクニック。低予算アニメでもよく使ってたなあ。タイル・マップ・エディタ(Tiled)なんて便利なモノがあるとは。これなら私にも大戦略が作れそう←ツケあがるな

【4章 高度なUI 】

 ここでは軽量で軽快なユーザ・インタフェース・ライブラリの jQuery UI と、本格的な Ext JS 紹介。サンプルは jQuery UI を使い、回転木馬風に回る画像の列を描くもの。この章から、マウスイベントのハンドラが出てくるので、いじって楽しいプログラムが出てくる。

 ここでは Web プログラムの悩みの一つ、クライアントが画像などをキャッシュしている場合に、load イベントが発生しない問題の対処なんてのが面白い。

【5章 JavaScriptゲーム 】

 懐かしのインベーダーゲームを作る章。若い人はオリジナルのインベーダーゲームを知らないかも…と思ったが、ニンテンドーDSi や FLASH やスマートフォン向けのもあるのね。

 インベーダーゲームの細かい仕様については著者も詳しいが、註で訂正する訳者も相当なもの。段々とインベーダーが速くなる工夫は、「やはりそうか」と納得。衝突判定の工夫は楽しいが、コードそのものはコールバック使いまくりで相当に難しくなってくる。

【6章 HTML5 Canvas】

 いよいよ HTML5 の本領、Canvas。雰囲気は PostScript で、既に描いた物は参照できず、xor で描くとかは無理で、常に上書き。ただし描く際に透明度は指定可。そのためかアニメーションは難しそうで、Canvas 全体を描きなおす方法が載っている。

 最初のサンプルは、制御点をマウスで動かしベジェ曲線/二次曲線を描くもの。制御点は独立した div 要素を使う。やはり Canvas で描いた要素をスプライト的に動かすのは難しいようだ。

 FLASH/SVG/Illustrator 形式を Canvas 用 JavaScript に変換する道具が、サードパーティーから出てるのは嬉しい。

 別の意味で興奮するのが、WebSocket のチャット・ツール。ちょっと前、テロリストが情報交換に MMORPG のチャットを使ってるって話があったが、これと P2P を君合わせると金楯を出し抜けるなあ、などと思ったり。にしても XAMPP(→Wikipedia) なんて便利なモンもあるのか。これ使えば PHP を独習できるね。

【7章 ベクトル計算 】

 シューティング・ゲームなどで必須のベクトルについて、大砲の弾丸の飛翔をシミュレートするアニメーションを例に説明してゆく。弾丸の残像が少しづつ消えていく効果を出すのに、背景画像の透明度を変えながら重ね書きするって大技を繰り出してるw

 最後に、複雑なキャラクタを軽い処理で描く手法が賢い。いったん隠れ Canvas に描き、「この隠れ要素を Canvas の drawImage() 関数のビットマップソースとして用いてみましょう」。

【8章 Google Chart Tools】

 HTTP 経由で Google の API を呼び出し、グラフに変換する Google Chart API の紹介。簡単な呼び出し法では <img> タグの src で URL を指定するだけなんで、固定の HTML 頁でも使える。JavaScript 経由で呼び出すなら、Google のライブラリ jsapi(→MDN)が便利。マウスなどのイベントにコールバックを設定すれば、エフェクトもつけられる。

【9章 jQuery Mobile】

 スマートフォン用のスライディングブロックパズル(→Wikipedia)を例に、スマートフォン用 JavaScript ライブラリ jQuery Mobile を紹介する。

【10章 PhoneGap】

 10章で作った JavaScript 版を、PhoneGap により Android のネイティブに変換する。といっても、内容の大半は開発用ツールのインストールと設定。入れるのは JDK,Android SDK,Eclipse,Eclipse 用 ADT プラグイン,PhoneGap。インストールのコツや日本語版パッチも紹介してるのがありがたい。

【おわりに】

 意外と HTML5 Canvas の話は少なく、DHTML でコトが済むネタが多い。6章・7章のサンプルも DHTML で作れそうだし。

 などの JavaScript に特化した話よりも、リアルタイム系のゲーム作りの工夫のネタが楽しかった。昔はマシンが貧弱なため工夫せにゃならなかった。マシンが強力になった今は、OSやブラウザや JavaScript インタープリタが計算力を食いつぶし、結局はアプリケーション・プログラマが知恵を絞る羽目になってるのが皮肉。

 JavaScript に興味がなくても、ゲーム作りに興味があるなら、読んで損はないと思う。

【関連記事】

| | コメント (0) | トラックバック (0)

2016年4月25日 (月)

Raffaele Cecco「JavaScriptグラフィックス ゲーム・スマートフォン・ウェブで使う最新テクニック」オライリージャパン 相川愛三訳 1

 本書は、ワンランク上を目指す JavaScript プログラマーに向けた解説書です。主にグラフィックスやアニメーションを扱いますが、単に HTML5 Canvas や jQuery について説明するだけの書籍ではありません。

【どんな本?】

 Web ブラウザ上のゲーム・アプリケーションの開発用としては現在最も有力なプログラミング言語である JavaScript を使い、主に2Dのアクション・ゲームを作りたい人のための技術解説書。

 単にアニメーション用のインタフェースを紹介するだけでなく、実行速度を速くする方法、マシンの性能が違っても同じような操作感を実現するコツや、使うメモリの容量を減らす工夫、他言語と比べた JavaScript のクセ、CSS と組み合わせた印象的なエフェクトなど、今すぐ応用できるテクニックを豊富なソースコードと共に紹介する。

【いつ出たの?分量は?読みやすい?】

 原書は Supercharged JavaScript Graphics, by Raffaele Cecco, 2011。日本語版は2012年3月17日初版第1刷発行。単行本ソフトカバー横一段組みで本文約257頁。8.5ポイント46字×38行×257頁=約449,236字、400字詰め原稿用紙で約1,124枚。文庫本なら上下巻ぐらいの分量だが、キャプチャ画像やイラストを豊富に収録しているので、実際の文字数は6~7割程度。当然ながら、ソース・プログラムもふんだんに出てくる。

 訳者は相当にプログラミングがわかっている人らしく、文章はこなれていて読みやすいし、言葉の使い方も適切。問題は内容で、次の条件三つをを全て満たす人向け。

  1. HTML と CSS が書ける。救くとも、この記事頁の HTML と CSS ぐらいは、マニュアルを見ながらでもいいので、自分で作れる。
  2. JavaScript でプログラムを作れる。と言っても、この程度のオモチャで喜んでいる程度では苦しい。プログラミング技術として、クロージャ・コールバック・継承ぐらいは使えて、Web プログラマとしては DOM(Document Object Model、→XML用語辞典) による要素の追加や変更ができる。
  3. jQuery を多少は知っている。日頃から使っていると更によし。

 意外なことに、ゲームを作った経験がない人でも、上記三つを満たす人なら、読みこなせる。なお、デバッガは Firebug を紹介しているので、ブラウザは Firefox を使っているといいかも。

 本書のゴールとしては、次のようなゲームやエフェクトが出てくる。ただし、サウンドはなし。

  • 懐かしのインベーダーゲーム:PC版&Android版
  • チャット
  • 棒グラフ:ポップアップする吹き出しつき

 描く画像は2Dが中心で、グラデーションや影をつけて立体感を出すあたりが限界。テトリスを作るには可能だけど、ぷよぷよは少しエフェクトを簡素化しないと難しいかも。さすがに物理演算エンジンを酷使する3Dゲームまでは無理です。ゲーム専用機ならPSP未満、かな。

 HTML の規格だと、5章までは DHTML 対応で、6章から HTML5 が必要になる。

【構成は?】

 前章を受けて後の章が続く形なので、素直に頭から読もう。

  •  訳者まえがき/まえがき
  • 1章 コードの再利用と最適化
    • 1.1 高速化
    • 1.2 何をいつ最適化するか
    • 1.3 自家製コードプロファイリング
    • 1.4 JavaScriptの最適化
      • 1.4.1 ルックアップテーブル
      • 1.4.2 ビット演算、整数、2進数
    • 1.5 jQueryとDOM操作の最適化
      • 1.5.1 CSSスタイル変更の最適化
      • 1.5.2 DOM挿入の最適化
    • 1.6 その他の情報
  • 2章 DHTML
    • 2.1 DHTMLスプライトの作成
      • 2.1.1 アニメーション
      • 2.1.2 カプセル化と描画の抽象化(詳細隠蔽)
      • 2.1.3 スプライトのコード
      • 2.1.4 スプライトのコード
      • 2.1.5 簡単なSpriteアプリ
      • 2.1.6 より動きのあるスプライト
    • 2.2 jQueryプラグインに変換
    • 2.3 タイマー、スピード、フレームレート
      • 2.3.1 setIntervalとsetTimeoutの使用
      • 2.3.2 タイマーの精度
      • 2.3.3 一定スピードの実現
      • 2.3.4 Internet Explorer 6 の背景キャッシュ
  • 3章 スクロール
    • 3.1 CSSだけを使ったスクロール効果
    • 3.2 JavaScriptを使ったスクロール
      • 3.2.1 背景画像のスクロール
      • 3.2.2 タイルベース画像のスクロール
  • 4章 高度なUI
    • 4.1 HTML5のフォーム
    • 4.2 JavaScriptのUIライブラリ
      • 4.2.1 jQuery UIを用いたWebインタフェース強化
      • 4.2.2 Ext JSを用いた強力なUI
    • 4.3 UI要素の自作
      • 4.3.1 3D回転木馬の作成
  • 5章 JavaScriptゲーム
    • 5.1 ゲームで使うオブジェクトの概要
    • 5.2 ゲームのコード
      • 5.2.1 ゲーム全体で用いる変数
      • 5.2.2 キーの読み込み
      • 5.2.3 キャラクタの移動
      • 5.2.4 簡単なアニメーション効果
      • 5.2.5 衝突判定
      • 5.2.6 インベーダー
      • 5.2.7 プレイヤー
      • 5.2.8 シールド
      • 5.2.9 UFO
      • 5.2.10 gameオブジェクト
      • 5.2.11 ひとつにまとめる
  • 6章 HTML5 Canvas
    • 6.1 Canvasのサポート
    • 6.2 ビットマップかベクターか? あるいは、その両方か?
    • 6.3 Canvasの制限
    • 6.4 CanvasとSVGの比較
    • 6.5 CanvasとFlashの違い
    • 6.6 Canvasエクスポータ
    • 6.7 Canvasの描画の基本
      • 6.7.1 Canvas要素
      • 6.7.2 描画コンテクスト
      • 6.7.3 矩形の描画
      • 6.7.4 直線と曲線を使ったパスの描画
      • 6.7.5 ビットマップ画像の描画
      • 6.7.6 色、境界線、塗り潰し
    • 6.8 Canvasを使ったアニメーション
    • 6.9 Canvasと再帰的な描画
      • 6.9.1 Canvasによる樹木のページレイアウト
    • 6.10 DHTMLスプライトをCanvasのスプライトに置き換える
      • 6.10.1 CanvasSpriteオブジェクト
      • 6.10.2 他のコードの修正
    • 6.11 CanvasとWebSocketを使ったグラフィカルなチャットアプリ
      • 6.11.1 WebSocketの利点
      • 6.11.2 WebSocketoのサポートとセキュリティ
      • 6.11.3 チャットアプリ
  • 7章 ベクトル計算
    • 7.1 ベクトルの計算
      • 7.1.1 足し算と引き算
      • 7.1.2 拡大と縮小
      • 7.1.3 正規化
      • 7.1.4 回転
      • 7.1.5 内積
    • 7.2 JavaScriptによるベクトルオブジェクトの作成
    • 7.3 ベクトルを使った大砲シミュレーション
      • 7.3.1 シミュレーション全体で用いる変数
      • 7.3.2 弾丸
      • 7.3.3 大砲
      • 7.3.4 背景
      • 7.3.5 メインループ
      • 7.3.6 ページレイアウト
    • 7.4 ロケットのシミュレーション
      • 7.4.1 ゲームオブジェクト
      • 7.4.2 障害物オブジェクト
      • 7.4.3 ロケットオブジェクト
      • 7.4.4 背景
      • 7.4.5 衝突判定と反作用
      • 7.4.6 ページレイアウト
      • 7.4.7 改良・改造のアイデア
  • 8章 Google Chart Tools
    • 8.1 制限事項
    • 8.2 グラフ一覧
    • 8.3 画像グラフ
      • 8.3.1 データ形式とグラフ分解能
      • 8.3.2 動的なデータの使用
      • 8.3.3 まとめ
    • 8.4 インタラクティブなグラフ
      • 8.4.1 インタラクティブなグラフのペイント
  • 9章 jQuery Mobile
    • 9.1 jQuery Mobile の基本
    • 9.2 TilePic:モバイル向けのWebアプリ
      • 9.2.1 TilePicゲームの説明
      • 9.2.2 TilePicゲームのコード
    • 9.3 PhoneGapとは
  • 10章 PhoneGap
    • 10.1 インストール
      • 10.1.1 JDKのインストール
      • 10.1.2 Android SDKのインストール
      • 10.1.3 Eclipseのインストール
      • 10.1.4 ADTのインストール
      • 10.1.5 PhoneGapのインストール
    • 10.2 EclipseでのPhoneGapプロジェクトの作成
      • 10.2.1 App.javaファイルの変更
      • 10.2.2 AndroidManifest.xmlファイルの変更
      • 10.2.3 簡単なWebアプリを作成してのテスト
      • 10.2.4 TilePicアプリのテスト
  • 付録A ソケットサーバのソースコード
  • 付録B モバイル版 Orbit Assault
    • B.1 jQuery Mobileによるモバイル対応
      • B.1.1 タッチによる砲台操作
      • B.1.2 画面回転の対応
      • B.1.3 ページレイアウト
    • B.2 PhoneGapによるネイティブアプリ化
  • 索引

【全般】

 掟破りの楽しさ。いやこの記事を書く時点では5章までしか読んでいないんだけど。

 なんといっても、いきなり最適化の話が出てくるのが掟破り。プログラミングの教科書なら、普通は「まずチャンと動くようにしろ、最適化はその後だ」と来る筈なんだがw

 というのも、出てくる例の多くが、リアルタイムの応答が必要なモノが多く、実効速度に厳しい制限があるモノが多いため。そんなわけで、プログラミングの本としては、JavaScript が云々というより、リアルタイム系のゲームを作る際のコツやテクニックの紹介がやたら楽しいし、他のプログラム言語にも応用できそうな話が多い。

 ということで、次の記事に続きます。

【関連記事】

| | コメント (0) | トラックバック (0)

より以前の記事一覧