はじめに
最近は、さまざまな種類のWebアプリケーションやWebサービスが登場しています。そして、これまでローカルのパソコンで行っていたことの多くが、ブラウザ上で行えるようになってきました。こういった流れに従い、私も2007年の10月~12月にかけて、「全自動4コマ」という4コママンガ生成Webアプリケーションを開発しました。
「全自動4コマ」では、Webアプリケーションの特徴を生かして、ネット上から情報を集めて、4コママンガの台詞を自動で生成するようにしています。そうすることで、動的なコンテンツを手軽に提供できる環境を作っています。
この「全自動4コマ」では、ユーザーが自由に4コママンガを改造するためのスクリプトエディタや、完全にオリジナルな4コママンガを作成するためのインターフェースを用意しています。また「全自動4コマ」では、これの仕様の実現のために、4コママンガをスクリプトとして表現することを試みています。
これから数回の記事で、「全自動4コマ」のスクリプト機能を使って、オリジナルの4コママンガを作成していこうと思います。それとともに、4コママンガをスクリプトとして表現する試みについて、解説を行っていこうと思います。
まずは、以下にいくつかの利用イメージを示します。
![「全自動4コマ」出力サンプル 「全自動4コマ」出力サンプル](http://cz-cdn.shoeisha.jp/static/images/article/2064/4koma01_50per.jpg)
![「全自動4コマ」スクリプトエディタ 「全自動4コマ」スクリプトエディタ](http://cz-cdn.shoeisha.jp/static/images/article/2064/editor01_50per.jpg)
第1回の今回は、「全自動4コマ」のサイトで公開されている4コママンガを改造することで、オリジナル4コママンガを作る方法を紹介します。この改造はスクリプトエディタで行います。スクリプトエディタは、「全自動4コマ」のページ上部にある、「エディタで編集」のリンクをクリックすることで起動します。
記事は、以下の順序で進みます。
- 全自動4コマの仕組み
- スクリプトエディタの起動と利用
- スクリプトによる出力4コマの操作
- 作成例
対象読者
何らかのプログラムを少しでも書いたことがある人を対象にしています。
必要な環境
IEやFireFox、OperaなどのWebブラウザが必要です。
全自動4コマの仕組み
まず初めに、「全自動4コマ」の簡単な仕組みについて解説を行います。「全自動4コマ」は、5つの要素でできています。
- index.cgi-CGI本体
- image.cgi-4コマ画像合成CGI
- スクリプトデータ-スクリプトのデータ
- 画像-4コマ用画像
- Web上の情報-検索エンジンなど、マッシュアップ用のデータ
ユーザーが「全自動4コマ」のページにアクセスした際、「index.cgi」は、「スクリプトデータ」を読み込みます。このスクリプトデータには、いくつかの予約語が記されており、index.cgiは必要な情報をWeb上から取得して、この予約語を検索結果に置き換えます。そして、置換後のスクリプトデータと画像のパスをimage.cgiに送り、4コママンガを生成します。
データ内の予約語は、次のように置換されます。
s($hkw_res[0]よ);
s(開発者のための実装系Webマガジンよ);
上記例では、$key
が検索語に、$hkw_res[0]
がはてなキーワードの検索結果に置換されています。他にも、GoogleやWikipediaの検索結果に置き換えることや、名詞や形容詞のリスト、また占い結果などに置換することも可能です。「全自動4コマ」では、このように、予約語を検索結果に置換することで動的なコンテンツの生成を行っています。
また、「全自動4コマ」では、各コマの情報をすべてスクリプトとして記述できるようになっています。以下に、1コマ分のスクリプトの例と、その意味を示します。
bg(255,200,200); p(km_nya0.gif,0,-5); s(ねえ $keyって\n何?); f(7,10,45);
背景色(R255
,G200
,B200
); 画像描画(画像ファイル名km_nya0.gif
,X位置調整0
,Y位置調整-5
); 台詞の格納(台詞の中身ねえ $keyって\n何?
); フキダシ(左X位置7
,上Y位置10
,右X位置45
);
上記のスクリプトで、フキダシの「下位置」がないのが気になるかもしれません。フキダシの「下位置」は、自動で決定されるので記述する必要はありません。このような仕様になっているのは、予約語の置換結果によって台詞の長さが変わるために、フキダシの「下位置」が変化するためです。
「全自動4コマ」では、このように4コママンガのコマ内のオブジェクトをスクリプトで指定することで、4コママンガを作成しています。また、スクリプトの各記述は、なるべく短くなるように、Bacground
→bg
やPicture
→p
といったように、略語で示されています。
こういった、スクリプトを使った表示結果の出力は、ノベルゲームや、RPGのイベントシーンの作成の手法と同じです。
それでは次に、実際にスクリプトエディタを起動して、4コママンガの改造を行っていきたいと思います。