脳トレ風の英単語帳アプリ、単語ﾄﾚｰﾆﾝｸﾞを作りました。
散らばったアルファベットの中から単語を構成する（もしくは構成しない）アルファベットを選ぶことで習得具合がチェックできるゲーム形式の単語帳です。
Adobe AIR 3.5で作ったiPhoneアプリです。Stage3Dによる描画で表示のパフォーマンスがよい感じになってきました。
iPhone 5対応。機能制限と広告表示がありますが無料版もありますので是非お試しください。
無料版はこちらです。
SOFTBANK MOBILE Corp.さんのiPhoneアプリFamily Apps（ファミリーアップス）6月号にYさん著の絵本「てんとちゃんの家さがし」を提供しました。「えほんのもり」のコーナーより無料で読めます。
「てんとちゃんの家さがし」は、以前このブログに掲載したものと同じストーリですが、数カットの絵を書き直した新バージョンになっていますので、既にご覧いただいた方も是非もう一度ご覧いただけたら幸いです。
オリジナルiPhoneアプリ漢字の練習帳を全学年アップデートしました。
変更点は全学年共通で以下となります。、
1.iPad対応のユニバーサルアプリに。
2.判定機能ON/OFFの追加。
3.ブログ記事でも書いた動作の高速化。ファイルサイズの軽量化。
4.バグ、漢字シェイプのミス修正。
1はiPhone版と基本同じですが選択画面など画面の広さを活かしたレイアウトになってます。
2は下記の設定画面に追加したトグルボタンで漢字をなぞる時、これまではある程度お手本と一致していないと次の書き順に進まなかったのだけど、ここでOFFに設定すると一致しなくても進みます。ある程度練習したあとは、なぞらずに書いたほうが覚えるだろうし書くクセもあるだろうしということで追加しました。
より使いやすくなっていますので購入済みの方は是非アップデートを。もちろん無料のアップデートです。
前回から引き続きリリース済みのiOSアプリ、漢字の練習帳の動作を軽量化していく検証。
今回は「選んで練習」のボタン表示を改善したい。この画面は最初80字しかない一年生を作った時はこんなものかなと思っていたのだけど、200字ほどの他の学年では長く感じる。
実際に表示するまでにどの位時間がかかっているのかを計測してみる。
インスタンスの生成直前と表示直後の時間を取得し差を測ってみた。
この画面ではフレームレート24で、1フレームあたり20個ボタンを生成してます。
検証は漢字の練習帳 六年生でしているのでボタンの数は181個。
ということはボタンを全部表示するのに10フーレム必要なわけだから、理屈上は最短でも、1秒÷24フレーム×10フレーム = 0.41666666…秒かかるはず。
これを5回試した。
まず、現状の結果がこれ。
time: 0.663
time: 0.577
time: 0.567
time: 0.572
time: 0.624
これはADL上の結果ですけどそれでも0.1秒位遅れてるぽい。といってもこれがまんま実機で出るなら別に気にしない。
実機だとこれの10倍近く遅れているような印象なので、遅っ！って感じ。
以前作ったアプリで「ひらがなれんしゅうちょう」はFlashからAIR2.0で画面密度も標準で作っている（当時、標準しか無かった。）のだけど、同じような画面でボタン約90個を表示していても気にならないレベルで表示される。単純に比較出来ないとしても遅いのはたぶんFlexコンポーネントのせい。コンポーネントは汎用性がある分処理のオーバーヘッドが大きくなっているので。
でもコンポーネントをやめてオリジナルなボタンを作るとかは避けたい。パフォーマンスはそのほうが断然良くなる可能性あるけど、フレームワークに守られている良さというか、たとえばここではスクロールがあるけどコンポーネントを使っているなら何も気にせずボタンを配置するだけでいい。
だけどオリジナルにボタンを作るならスクロール用のキャンセルを入れたりとか必要な実装が増えていって、フレームワークを使う意義がなくなっていってしまう。なので現状の仕組みで出来る限りの方法をとる。
ここのボタンのスキンは高解像度用と標準用を作っていて、しかもiPhoneをだけをターゲットにしたアプリなのでサイズは結局のところ固定のままだ。
なのでスキンクラスやコンポーネントから主にサイズなどを演算している処理をオーバーライドして消したみた。主に弄ったのは、
drawBackground measure drawMinimumHitArea layoutContents updateDisplayList |
このあたりのメソッドを可能な場合はオーバーライドして何もしないようにした。
これでもう一度タイムを計測してみると、
time: 0.591
time: 0.503
time: 0.527
time: 0.497
time: 0.504
個人的にもっと速くなるんじゃないかと思っていたので若干残念だったのだけど若干は速くなったみたい。
さらに何か出来ないかと考えキャッシュさせることにした。Viewが切り替わる度にボタンの生成・破棄をしているので、一度生成したボタンは消えないようにキャッシュして再利用してみる。メモリの使用量は増えるけど「生成」のコストがなくなるはず。
これでさらにもう一度タイムを計測した結果が、
time: 0.604
time: 0.418
time: 0.43
time: 0.417
time: 0.417
お、今度は1回目が遅いものの（キャッシュしていないので）、その後は全体的に速い。0.417っていうのは理論上の最短に近い。
それでも実機ではそれなりに時間がかかってしまうので、それをカバーする為に見た目上、先にボタンが表示されるようにした。いわゆる遅延ロードみたいなやつ。修正前はボタンがすべて生成されてから表示していましたが、1フレーム毎に生成している段階で画面に表示し操作できるように変更。一番下のボタンを操作するには結局最後まで待たなきゃいけないし、全体の表示までのトータルの時間では画面の更新がない分、修正前のほうが速いのだけど、ずっとビジーインジケーターだけが表示されるより印象として速く感じる。
ということで、この方法を使うことにしました。
精査して次回のアップデートに入れますのでお待ちください。
漢字の練習帳が全てリリースされ一段落ついたので、次回更新にむけ改善したい箇所を検証しつつ対応しよう。
まず最初に漢字の練習画面で画面に表示されるまでにかかる時間を短縮したい。
ここで時間がかかるのは、漢字を構成する一画一画の線の画像ファイルをロードしているから。
さらに直列にロードしているので、画数の多い漢字ほど時間がかかっている。
並列にロードすればある程度時間は減るのだが、これだと同時にロードする画像ファイルが多くなると、ビジーインジケーターが回転しないままロード完了までフリーズしたかのような挙動になってしまう。そうなると回避の為に数ファイル毎に分け間を入れることになり結局問題の解決にならない。
そこでこの画像ファイルをすべて埋め込んでしまうことでロード自体を無くせばよい。問題は埋め込む数。たとえば漢字の練習帳 六年生にはこの画像ファイルが1900ファイル以上ある。
画像ファイル一つは5K以下のファイルなのだが、これだけの数を埋め込もうとするとFlexもFlashも書き出し自体が出来ないケースが多い。または非常に時間がかかってしまう。以下に改善策の履歴をメモしておきます。
1.Embedで画像を埋め込む。
最初にトライしたのが、FlexのEmbedメタタグで1900枚すべての画像を埋め込んでしまう方法。
以下のようにEmbedタグを約1900回記述し書き出そうとした。
[Embed(source="assets/uid_1002_1.png")] [Bindable] public var uid_1002_1:Class; [Embed(source="assets/uid_1002_10.png")] [Bindable] public var uid_1002_10:Class; ・ ・ ・ |
この方法はFlash Builderから書き出しの途中で以下のエラーになり書き出せなかった。
2.SWCにして埋め込む。
次に試みたのはSWCにして埋め込む方法。
Flashで一画毎にシンボルを定義しSWCに書き出す。Flashで名付けたリンケージ名を参照して利用する。
なお検証結果に違いはないと思いますが、約1900個のシンボルを生成するオペレーションの都合もあり画像からパスデータに変えています。
これをFlashでSWCに書き出そうとしたところ、長時間のパブリッシュ状態の後以下のエラーでSWCが出力されず。
試しに上記のアラートに指定されている、jvm.iniを編集し512MBを指定して試したのですが状況は変わりませんでした。
しかたないので約500アイテム毎に分けSWCを4ファイルにして書き出す。
今度はパブリッシュに時間がかかるも無事SWCが出力されました。
これをFlexのから使った場合も上手くいったので万事OKと思ったのですが、実機確認用の書き出しでNG。
ADL用の書き出しは時間もかからず問題ないのですが、実機用の書き出しがエラーにこそならないものの30分経過しても終わらない。試しにSWCを1ファイルだけにしたら15分位経過して出力されたので、ずっと待っていれば出力されるかもしれないのですが待ちきれずキャンセル。そもそも実機確認を繰り返す開発作業にあってこの時間は現実的じゃありません。
正確にはFlash Builderでパッケージ化の方法が「標準」の場合にこのような状況で、「高速」を指定した場合はSWCが4ファイルでも出力されたのですが最終的なリリースビルドは「標準」と同等のものなので無意味と思います。
この後Flashから書き出すSWCの書き出し方を変えていろいろ試してみたのですが、状況は変わらずで結局SWCで埋め込む方法は諦めました。
3.SWFをロードして使う。
SWCでダメならSWFをロードして使うしかないかと思いトライ。
SWCの時と同様にしてFlashで500アイテム毎に分けて4つのSWFを生成。これをロードする。
後で基本的な部分の問題に気づくのですがひとまずここではやったことをそのまま書きます。
AIR for iOSではLoaderでSWFをloadする時に以下のようにコンテキストを設定しないとロードの段階でエラーになります。
var context:LoaderContext = new LoaderContext(); context.allowCodeImport = true; |
さらにロードしたSWFのクラスを参照したり親側からアクションスクリプトで操作する場合、
context.applicationDomain = ApplicationDomain.currentDomain; |
も指定します。
これを試すとADL上では問題なく動く。書き出しも早いし、画像を使っていた時よりファイルサイズも小さい。今度こそ万事OKと思ったのですが、実機確認に進み状況が変わる。実機用ファイルは無事出力されるも実機確認で以下のエラー。
この原因は以下のリンクに記載がある。
モバイルデバイスでサポートされていない ActionScript 3.0 API
以下、引用です。
Loader
iPhone アプリケーションでは、Loader.load() メソッドを使用できません。Loader.load() メソッドを使用してロードされた SWF コンテンツ内の ActionScript コードを実行することができません。ただし、SWF ファイル内のアセット（ライブラリ内のムービークリップ、イメージ、フォント、音声など）は使用できます。また、イメージファイルをロードするために Loader.load() を使用することもできます。
さらに、
Loader クラスは、コンテンツが ADL で実行される場合は、特に制限なく動作します。しかし、iPhone 上で実行される場合は、ActionScript バイトコードを含む SWF コンテンツをロードしようとすると、エラーメッセージが出力されます。
SWFのロード関連でNG事項があることは頭の片隅にあったのですが、ActionScriptの実行がNGなだけだと誤解してました。
今回のSWFにActionScriptは含んでいないのですがリンケージ書き出しの時点で制限に該当する模様。となるとSWFをロードしてクラスを参照する方法は無理です。
残る手段はリンケージ書き出しせず、タイムラインに配置したインスタンスを名前で参照するしかなさそう。
これだと新規のインスタンスの生成は出来ず、配置されたインスタンスを参照して利用するしか出来ないわけだけど、今回の用途ではビットマップデータにさえ出来ればよいのでこの方法でも対応は可能。あまりスマートでない気もするのだが、やむを得ないのでこの方法にもトライしました。
1.Flashで1900個すべてのアイテムをステージに配置して名前を付ける。
2.シンボルにリンケージは設定はしない。
これをパブリッシュしてSWFをアセットとして使う。驚いたのはリンケージを設定しない場合、パブリッシュは一瞬で書き出されたこと。
これほど大量のシンボルを持たせ、一つもリンケージ書き出ししない。という条件でパブリッシュしたのは初めてかもしれなくてよく思い出せないのだけどそんなものだったっけ？なににしてもこれは嬉しい誤算なのでよしとする。
書き出したSWFをロードして利用します。この場合も前述のコンテキストを指定してロードしないとエラーになります。
var context:LoaderContext = new LoaderContext(); context.allowCodeImport = true; context.applicationDomain = ApplicationDomain.currentDomain; |
これでロードしたSWFをloader.contentより参照しステージに配置したインスタンスを名前で参照できる。
この方法では書き出しも通常の時間で無事完了しています。
ひとまず、改善したいポイント一つクリア。
あとはこれが無事林檎さんの審査通ればいいんですけども。それはまた後日。
小学六年生で習う漢字181文字を練習するiPhoneアプリを作りました。
これで小学生の漢字ついにコンプリート。この後はいくつかアップデートを行う予定です。
漢字の練習帳 六年生に収録している漢字は以下です。
針 城 障 蒸 諸 除 純 処 署 将 傷 若 尺 射 捨 磁 衆 就 宗 樹 収 縦 従 熟 縮 骨 穀 刻 鋼 孝 皇 紅 降 呼 厳 源 己 憲 権 誤 后 冊 策 済 裁 困 座 砂 蚕 姿 私 至 視 詞 誌 巻 看 割 株 干 革 拡 閣 我 灰 宇 域 遺 異 延 沿 映 供 疑 吸 簡 机 危 揮 貴 勤 筋 郷 胸 警 敬 系 激 劇 穴 絹 脳 納 認 難 乳 届 展 党 討 糖 庁 著 宙 忠 段 誕 探 値 暖 痛 賃 頂 潮 善 専 洗 泉 宣 染 寸 推 仁 垂 盛 誠 聖 臓 蔵 装 創 窓 層 操 奏 存 尊 宅 担 棒 忘 訪 亡 片 補 暮 宝 奮 腹 並 閉 陛 班 肺 俳 拝 背 派 秘 批 否 晩 幼 郵 優 模 訳 幕 枚 密 盟 裏 律 翌 欲 乱 卵 覧 臨 朗 論
小学五年生で習う漢字185文字を練習するiPhoneアプリを作りました。
漢字の練習帳 五年生に収録している漢字は以下です。
織 職 条 状 常 情 序 準 招 承 証 謝 質 舎 似 示 識 修 授 術 述 鉱 構 興 講 厚 効 耕 故 減 現 限 個 護 罪 財 採 際 在 混 査 再 災 妻 支 酸 賛 雑 枝 志 師 資 飼 刊 格 確 額 過 価 可 仮 河 快 賀 解 因 圧 移 営 永 易 液 益 衛 桜 往 応 演 恩 居 許 義 技 逆 久 旧 眼 幹 慣 規 寄 基 禁 句 境 均 群 経 券 件 潔 険 検 能 燃 任 銅 導 独 徳 統 張 築 断 団 程 提 適 敵 銭 責 税 接 績 設 舌 絶 政 性 制 勢 製 精 則 造 像 増 総 祖 素 退 属 測 率 損 態 貸 貿 防 報 豊 保 編 弁 墓 武 富 布 婦 復 複 仏 版 判 犯 破 肥 非 比 備 俵 評 貧 容 余 預 綿 輸 暴 夢 務 迷 領 略 留
小学四年生で習う漢字200文字を練習するiPhoneアプリを作りました。
漢字の練習帳 四年生に収録している漢字は以下です。
臣 信 賞 順 初 唱 笑 松 焼 象 照 借 治 児 辞 失 周 種 祝 告 候 航 康 固 験 功 好 札 昨 材 菜 最 差 司 史 氏 士 散 残 察 殺 刷 参 産 試 完 官 各 街 覚 課 貨 果 加 改 害 械 芽 印 衣 以 案 愛 囲 位 胃 栄 英 塩 億 漁 共 挙 泣 求 救 給 議 機 器 願 観 管 関 紀 季 希 喜 旗 郡 軍 訓 鏡 協 競 極 芸 景 径 型 結 欠 建 健 念 熱 働 特 得 堂 毒 灯 努 徒 典 伝 兆 貯 仲 単 置 腸 低 停 底 的 然 選 浅 戦 席 折 積 節 説 成 清 省 静 束 争 倉 巣 帯 卒 続 側 孫 隊 達 望 法 別 包 変 辺 便 副 不 付 府 夫 粉 兵 博 梅 敗 費 飛 飯 必 標 票 要 勇 約 牧 民 脈 末 未 満 無 量 料 良 利 陸 浴 養 歴 令 例 冷 類 輪 労 老 連 録
小学三年生で習う漢字200文字を練習するiPhoneアプリを作りました。
漢字の練習帳 三年生に収録している漢字は以下です。
進 真 深 申 身 神 乗 植 暑 所 助 昭 消 商 章 勝 写 主 守 取 実 者 持 事 次 式 州 宿 集 住 重 受 酒 拾 習 終 号 港 幸 庫 湖 向 祭 根 仕 皿 使 始 死 指 歯 詩 寒 荷 界 階 開 院 員 運 飲 育 悪 安 暗 医 委 意 泳 駅 央 屋 横 温 化 急 級 去 宮 球 究 客 岸 館 感 漢 起 期 具 銀 君 苦 区 橋 局 業 曲 軽 係 血 決 研 県 農 童 動 度 都 鉄 転 島 投 豆 登 等 湯 丁 柱 帳 着 注 炭 短 談 追 調 定 庭 笛 全 昔 整 世 速 息 想 相 送 打 対 待 族 他 代 第 題 勉 返 放 服 部 負 平 福 物 配 畑 発 箱 反 坂 板 波 倍 品 病 秒 表 氷 筆 美 鼻 皮 悲 有 予 羊 洋 葉 陽 遊 問 面 油 由 薬 役 味 命 両 旅 流 様 落 列 礼 緑 路 練 和
小学二年生で習う漢字160文字を練習するiPhoneアプリを作りました。
今月中に少なくともあと2学年はリリースする予定です。
漢字の練習帳 二年生に収録している漢字は以下です。
午 後 元 言 古 戸 作 細 才 今 止 算 矢 市 姉 思 紙 黄 高 考 行 原 光 交 広 公 工 語 室 時 週 秋 首 春 弱 社 自 寺 少 書 色 食 場 心 新 黒 国 谷 合 回 会 海 画 絵 外 科 角 楽 活 何 歌 家 夏 羽 引 遠 雲 園 丸 兄 形 計 強 近 教 顔 間 汽 記 帰 岩 京 魚 牛 弓 線 船 切 雪 数 図 朝 直 通 弟 鳥 長 茶 昼 池 知 地 冬 当 東 答 頭 刀 点 電 店 読 道 同 内 肉 南 前 親 西 声 星 晴 台 多 体 太 走 組 分 聞 米 歩 母 方 父 風 買 番 売 半 麦 馬 鳴 毎 毛 門 夜 野 友 用 明 万 北 妹 里 理 曜 来 話
