一部ブラウザでしか利用できなかった、英文音声読み上げ機能を全ブラウザ対応にしました。
php を利用してクロスドメインの問題を回避するようにしています。

　http://www.dango-itimi.com/typeng/
　

しかし英文読み上げ途中で、結構音声が途切れることがあります。原因は不明。

[ FLASH ] [ update ] [ web service ] 2012年03月24日 13:54 | コメント (0) | トラックバック

Google+のほうで少しずつ書き込んでいた、「TYPENG」という英語学習タイピングが行える Web アプリケーションが完成しました。

　http://www.dango-itimi.com/typeng/
　

「英文字入力を行いながら英語の学習が可能なタイピングゲームはないだろうか」と探してみるも、なかなか条件にあったものが見つからなかったため、自分で作成してしまいました。
内容はとてもシンプルながら、いい感じに仕上がったと思います。英語勉強中の方など、気軽に使用していただけたらと思います。

以下 TYPENG の説明です。ABOUT ページからの一部引用となります。

■ TYPENG とは

シンプルなキー操作で英文入力を行うことが可能な、英語学習用ツールです。

■ 特徴

英数字キーのみで英文入力が可能です。
以下のキー入力操作は自動的に補完されます。

・単語間のスペース
・文頭や文中の大文字(Shiftキー + 英字キー)
・記号「'」「.」「?」等

例えば以下の英文章があったとします。
How are you?

メモ帳などで上記文章を入力する際、以下のキー操作を行います。
「Shift + h」「o」「w」「Space」「a」「r」「e」「Space」「y」「o」「u」「?」

TYPENG では以下のキー操作のみで上記文章の入力が可能です。
「h」「o」「w」「a」「r」「e」「y」「o」「u」

■機能

　・SPACEキー or 矢印左キー
　英文音声読み上げを行います。Google Chrome or Safari 限定機能です。

　・SHIFTキー or 矢印右キー
　日本語訳 表示/非表示 の切替えを行います。
　英文入力完了後に日本語訳を見たい、という場合にご利用ください。

　・ENTERキー or 矢印下キー
　次の文章へ切替を行います。
　タイピングが苦手な方でも英字を読むだけの目的として利用できます。

矢印キーでの操作は、タイピングを行わず英文を次々と読みたい時にご利用ください。

クロスドメインの関係上、英文音声読み上げ機能は Google Chrome でしか動作しません。と思いきや Windows Safariでも動作しました。Webkit系ブラウザならば動作するのかもしれません。Mac では動作確認していないためどうなるかわかりません。

追記)
英文音声読み上げ機能を全ブラウザ対応にしました。

[ FLASH ] [ update ] [ web service ] 2012年03月23日 19:18 | コメント (0) | トラックバック

今年正月より調査を行っていた Google App Engine(以下GAE) にて、ゲーム・待ち受け Flash(swf) が簡単に作成できる Webツール「FLA.PRINTER フラプリ」を公開しました。

機能・コンセプト

画像一枚用意するだけでオリジナルの携帯向け Flash 製作を行えます。
結構古い携帯電話にも対応します。(vodafone 等)
簡単に作れるかわりに、Flash の内容もシンプルです。
カスタムモードを用いれば、ある程度 こった Flash を作ることが可能です。
携帯向けの他、PC向けに、マウス対応など 機能を拡張したファイルも同時に出力します。

何かものを作る際、形にするまでには多くの根気が必要となりますが、その根気の必要量をなるべく少なくすべく、シンプルモードはできるだけ簡単なステップで Flash(swf) を生成できるようにしています。生成後に表示される QR コードから、携帯電話で即表示確認・保存が可能となります。

ブロック崩し

現在フラプリでは、ブロック崩しのみが作成可能です。内容はとても単純なブロック崩しなので、ゲーム性は薄いです。バーの中心でボールを当てた際、ブロック貫通ボールになるようにする、等、まだ改良の余地はあるかもしれません。

個人的には、以下のようなムフフな感じでも利用してほしく思います。
サンプルギャラリー : block 3

---
以下少々技術的な余談

python による swf バイナリ解析処理実装

swf 内に任意のスクリプトの埋め込みと、画像データの入れ替えを行う処理を python にて実装しました。

はじめは PIL(Python Imaging Library) を利用して swf に画像を埋め込むための解析処理を作成していましたが、中途、PIL は GAE 上では利用できない事が判明しました。よって GAE 上では、PNG の画像解析に関しては pypng というモジュールを利用し、GIF の解析処理は断念することに。
最終的に、swf バイナリ解析処理は、PIL 利用版と pypng 利用版 を切り替えて利用出来るようにまとめました。

swf 埋め込み対象データはあらかじめ解析しデータストアに登録

ブロック崩しカスタムモードでは背景画像を選択することができます。この背景画像は PNG ファイルなのですが、PNG ファイルを swf 内に埋め込むための解析処理に結構な処理行数を必要としてしまいます。

ユーザからのリクエスト(生成処理呼び出し)のたびに PNG 解析処理を実行するのは よろしくないため、事前に swf 内に埋め込める形にバイナリ解析しデータストアに登録しておく、という方法を採りました。

ローカル PC 上のデータストアに設定したデータを、本サーバ上に登録する方法があるようですが、資料が少なくややこしそうだったため、Web 上からアップロードできる要パスワードの専用ページを別途作成することに。

様々な状況に応じた swf を出力するための fla ファイルと jsfl の作成

jsfl を用い、パブリッシュ時に ガイドレイヤーやプロファイラを動的に切り替えることで、一つの fla ファイル内に 携帯向け Flash Lite 1.1 用スクリプトと、PC向け Flash Player 7 用スクリプトの両立を行っています。

今回作成したブロック崩し用 fla ファイルでは jsfl を実行すると、以下のような swf (計16種類)がパブリッシュされます。

fla
├ シンプルモード用
│　├ ゲーム用
│　│　├ Flash Lite 1.1 用
│　│　│　├ jpg 画像用 swf
│　│　│　└ png 画像用 swf
│　│　└ Flash Player 7 用
│　│　　　├ jpg 画像用 swf
│　│　　　└ png 画像用 swf
│　└ 待ちうけ用
│　　　├ Flash Lite 1.1 用
│　　　│　├ jpg 画像用 swf
│　　　…　…
│
└ カスタムモード
　　├ ゲーム
　　…

ユーザがシンプルモードで投稿した画像が jpg だった場合、サーバ側では「シンプルモード」の「jpg 画像用 swf」4種類を取得し、それら swf 内に投稿 jpg の埋め込みを行います。

PC 向け Flash(swf) が Flash Player 7 である理由は、Flash Player 7 が Flash Lite 1.1 用スクリプトを判別可能な最大のバージョンであるからです。Flash Player 8 からは Flash Lite 1.1 のスクリプトはパブリッシュできません。

動作検証の手間

Google App Engine SDK でのローカル(Windows上)環境上では動作したものが、サーバにアップロードすると動作しない、といった箇所がいくつかありました(後述)。バグを完全に取り除いてから本サーバにアップロード、という手順は無理かもしれません。
また、Google App Engine Launcher からの「Deploy」コマンドによるファイルアップロードは 毎回 ID と パスワード入力を行わなくてはならないため、本サーバ上での動作確認はやや手間がかかります。

ローカルと本サーバとの動作の違い

urlopen によるファイル取得に関しまして、ローカルと本サーバ上とでは動作が異なる点に少々つまづきました。

Windows 上では、プロジェクトルートからの相対パスで静的ファイルが取得できるのに対し、本サーバ上では相対パスでの urlopen による静的ファイルの取得は不可。「http://～」というアドレス経由で Web 上から取得できる形にしておけば本サーバで取得可能。しかし、ローカル環境上では「http://localhost～」というアドレス経由では urlopen が機能せず？ファイル取得できず。

結局、ローカル環境上では相対パスで、本サーバ上では「http://～」経由でファイルを取得するような処理を作成することに。webapp のテンプレートファイルのファイルパス指定は相対パスでローカル本サーバどちらとも正常に機能するので、何かよい方法があるのかもしれません。

エラー後の表示は適当

ユーザが設定する画像のフォーマットエラーや容量オーバー時等に発生するエラーにて、「フォーマットエラーです」といったきちんと場合分けしたエラー表示処理は面倒なのでまだ行っていません。エラー発生時は強制的にホームに戻されるという、やや不親切設計です。

ブロック崩し 画像分割

古い携帯機種にも対応するために、ブロック画像を細かく分割するという作業を行っています。一つの大きな画像をブロックの数だけスクリプトで複製し、各ブロック内では画像の一部分を表示する、という方法が本来はセオリーであり、簡単で swf 容量も少なく済みます。しかしその簡単な方法ですと 昔の携帯機種ではブロック消去時に負荷がかかるようで、画面が一瞬止まってしまうという現象が発生します。事前に画像をわざわざ小さく分割するのは苦肉の作であります。

開発者向けおまけツール swfdumper

今後の開発用に、Web 上から swf 内ヘッダとタグを解析し表示するツールを作成しています。どのタグのデータを入れ替えれば良いのかを判別するために利用します。

http://flaprinter.appspot.com/swfdump/

解析結果は header, tagSet, tagMap の順で表示されます。

　header --- swf ヘッダ内のデータ
　tagSet --- 登場順タグ一覧
　tagMap --- タグ毎の 登場順に ID を割り振った一覧

サイト内表示している広告に関して

Amazon 商品の表示を行う予定でしたが、東北関東大震災により Amazon が正常に機能していない状況のため、現在は勝手に日本赤十字社へのリンクを貼らせていただいております。

以後の予定

■ swf バイナリ解析処理の拡張

画像表示領域(DefineShape)の動的変更

■ ゲーム第二弾製作

ブロック崩しの次のゲームを製作中。二作目まで製作できたら量産体系が整うことになりそうなので、以後は Flash Lite の製作のみに集中できそうです。

[ FLASH ] [ tips ] [ update ] [ web service ] 2011年03月26日 16:05 | コメント (0) | トラックバック

追記)
サービス終了しました。
遊んでくださった皆様ありがとうございました。

なんとびっくり、Mobage(モバゲータウン)にて 団子一味のゲームが遊べるようになりました！「団子一味の野望 mobile」という名称となります。

「団子一味の野望 mobile」は個人で頂いたお話の仕事となり、私は運営・開発共にほぼ関わっておりません。一部グラフィックスデータの提供とストーリーモードの台詞の監修を少々させていただいただけとなります。

内容は 「OH! DANGO! JAM」がベースとなり、そこにさまざまなソーシャル要素が加わって、携帯ゲームならではの楽しい仕組みがてんこ盛りとなっております。よろしければ是非一度お遊びください！

　■ モバゲータウン上の URL(携帯からしかアクセスできません)
　http://pf.mbga.jp/12001690

　■ QRコード
　

※ モバゲーという事で無料でも遊べますが、課金アイテム等もありますゆえ、お子様に遊んでいただく場合はご注意ください。

※ 「団子一味の野望 mobile」については、「団子一味の野望 mobile」の制作会社へお問い合わせください。

※ PC 版 OH! DANGO! JAM のゲストキャラクター(熊猫男性・ビーンズ・猫剣士等)は、「団子一味の野望 mobile」には登場しないのでご了承ください。

[ FLASH ] [ GRAPHIC ] [ info ] [ update ] [ web service ] 2011年02月24日 19:31 | コメント (4) | トラックバック

習作として GridCutter という画像加工出力を行う Web ツールを製作しました。
各ピクセルデータを拡大して等間隔に配置し 32bit の PNG で出力を行います。

以下簡単な操作手順です。

・FILE から加工元となる画像ファイルを PC 上から選択
・各ピクセルデータを 四角か丸か どちらの模様で表示するかを TYPE から選択
・zoom (倍率)、margin(間隔ピクセル数) に数値を入力
・出力される 画像サイズ W(横幅)と H(縦幅)を確認
・VIEW ボタンを押して画像トレース開始
　→ 進行状況はツールバー最下部に表示
・画面に表示されたトレース画像で問題なければ SAVE ボタンで PC 上に保存

すべての処理はローカルPC上で行われます。「四角」あるいは「丸」の模様を配置するだけなので、画像加工処理自体は非常に簡単なものですが、何か機会がありましたらお気軽にご利用ください。

Opera で発生する問題

現在の Opera のバージョンは 10.10

zoom あるいは margin のテキストフィールドそばにマウスカーソルがあると、各テキストフィールドに自動的にカーソルがあたり、ハイライトするようにしています。これにより、テキストフィールドをクリックすることなくキーボードから数値入力が可能となります。
しかし、以下の条件が合わさると、テキストフィールドの数値はハイライトされているのにキーボードから数値入力ができなくなる、という場合があります。

・ブラウザに Opera を用いている
・FILE または SAVE ボタン押下からファイル選択ダイアログ表示を行い
　ファイル選択あるいはキャンセルからダイアログを閉じた直後の状態

上記条件の場合、ユーザは swf 画面を一度クリックしないと 数値入力ができません。
Opera のみフォーカスの動作が少々異なるのかもしれません。

[ FLASH ] [ update ] [ web service ] 2009年12月06日 13:57 | コメント (0) | トラックバック

■ Twice Me
http://www.dango-itimi.com/twiceme/

zoome で公開されている動画をアンチエイリアスなしで拡大して閲覧可能

個人用に製作。あれこれやってるので小さく宣伝。
最低限の機能のみ実装し UI グラフィックは適当です。
時間帯によっては API からまったく反応が返ってこないため使い物になりません。

[ FLASH ] [ info ] [ update ] [ web service ] 2009年08月31日 00:47 | トラックバック