CodeZine(コードジン)

特集ページ一覧

「全自動4コマ」で4コママンガを作る1~スクリプトで自作4コマ~

Web上のスクリプトエディタを使った4コママンガ作成

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2008/01/25 14:00

Webアプリ「全自動4コマ」では、簡単なスクリプトの記述で4コママンガを作成することができます。今回の記事では、この「全自動4コマ」のスクリプトエディタを利用して4コママンガを作成します。

目次

はじめに

 最近は、さまざまな種類のWebアプリケーションやWebサービスが登場しています。そして、これまでローカルのパソコンで行っていたことの多くが、ブラウザ上で行えるようになってきました。こういった流れに従い、私も2007年の10月~12月にかけて、「全自動4コマ」という4コママンガ生成Webアプリケーションを開発しました。

全自動4コマ
 4コママンガを自動生成するWebアプリ。無償で利用できる。

 「全自動4コマ」では、Webアプリケーションの特徴を生かして、ネット上から情報を集めて、4コママンガの台詞を自動で生成するようにしています。そうすることで、動的なコンテンツを手軽に提供できる環境を作っています。

 この「全自動4コマ」では、ユーザーが自由に4コママンガを改造するためのスクリプトエディタや、完全にオリジナルな4コママンガを作成するためのインターフェースを用意しています。また「全自動4コマ」では、これの仕様の実現のために、4コママンガをスクリプトとして表現することを試みています。

 これから数回の記事で、「全自動4コマ」のスクリプト機能を使って、オリジナルの4コママンガを作成していこうと思います。それとともに、4コママンガをスクリプトとして表現する試みについて、解説を行っていこうと思います。

 まずは、以下にいくつかの利用イメージを示します。

「全自動4コマ」出力サンプル
「全自動4コマ」出力サンプル
「全自動4コマ」スクリプトエディタ
「全自動4コマ」スクリプトエディタ

 第1回の今回は、「全自動4コマ」のサイトで公開されている4コママンガを改造することで、オリジナル4コママンガを作る方法を紹介します。この改造はスクリプトエディタで行います。スクリプトエディタは、「全自動4コマ」のページ上部にある、「エディタで編集」のリンクをクリックすることで起動します。

 記事は、以下の順序で進みます。

  1. 全自動4コマの仕組み
  2. スクリプトエディタの起動と利用
  3. スクリプトによる出力4コマの操作
  4. 作成例

対象読者

 何らかのプログラムを少しでも書いたことがある人を対象にしています。

必要な環境

 IEやFireFox、OperaなどのWebブラウザが必要です。

全自動4コマの仕組み

 まず初めに、「全自動4コマ」の簡単な仕組みについて解説を行います。「全自動4コマ」は、5つの要素でできています。

  1. index.cgi-CGI本体
  2. image.cgi-4コマ画像合成CGI
  3. スクリプトデータ-スクリプトのデータ
  4. 画像-4コマ用画像
  5. Web上の情報-検索エンジンなど、マッシュアップ用のデータ

 ユーザーが「全自動4コマ」のページにアクセスした際、「index.cgi」は、「スクリプトデータ」を読み込みます。このスクリプトデータには、いくつかの予約語が記されており、index.cgiは必要な情報をWeb上から取得して、この予約語を検索結果に置き換えます。そして、置換後のスクリプトデータと画像のパスをimage.cgiに送り、4コママンガを生成します。

 データ内の予約語は、次のように置換されます。

置換前
 s(ねえ $keyって何?);
s($hkw_res[0]よ);
置換後
 s(ねえ CodeZineって何?);
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コママンガを作成しています。また、スクリプトの各記述は、なるべく短くなるように、BacgroundbgPicturepといったように、略語で示されています。

 こういった、スクリプトを使った表示結果の出力は、ノベルゲームや、RPGのイベントシーンの作成の手法と同じです。

 それでは次に、実際にスクリプトエディタを起動して、4コママンガの改造を行っていきたいと思います。


  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 柳井 政和(ヤナイ マサカズ)

    クロノス・クラウン合同会社 代表社員 http://crocro.com/ オンラインソフトを多数公開。 プログラムを書いたり、ゲームを作ったり、記事を執筆したり、マンガを描いたり、小説を書いたりしています。 「めもりーくりーなー」でオンラインソフト大賞に入賞。最近は、小説家デビューして小説...

バックナンバー

連載:「全自動4コマ」で4コママンガを作る
All contents copyright © 2005-2020 Shoeisha Co., Ltd. All rights reserved. ver.1.5