【 追記１ 】
時東ぁみちゃんはオワコンなんかじゃありません！ほんと時東さんかわいくてマジ眼鏡大天使なんです！
だから、時東さんとカンパニータンクさんをディスったりするのはやめてくださいｗ！
（こう書いておかないと、どっかの怖い大人の人から怒られたりするかもしれないのでほんとお願いしますよ！！１）

　
【 追記２　】
今電話掛かってきてちょっと怒られましたので、金額の部分は伏せます。ごめんなさい。
どうしても知りたいっていう方は僕に会って直接聞いてくださいませ。

　
こんにちは。sakotsuです。

あなたには、会いたい人は、いますか？
あなたには、お金を払ってでも、会いたい人は、いますか？

僕はミーハーではないのでそんな人なんかいないと思っていました。
俺の性格がこんなにミーハーなわけがない、そんな風に考えていた時期が俺にもありました。

それが、ある出来事をきっかけにこうですよ。

↓↓↓↓

今ならこの人の気持ちがちょっとわかる



(@_sakotsu のつぶやき)

さあ僕の身にいったい何が起きたのでしょうか。

1本の営業電話

ランチ後の事務所で、いつものようにニコニコ動画を観ながら「ワロスワロス」言ってるところに１本の電話が鳴った。

営業 「わたくし、●●●の▲▲と言う者ですが、御社のホームページを拝見させて頂きまして今回お電話差し上げたんですけれども、私どもが出版しておりますカンパニータンクという雑誌がありまして、2012年注目の企業特集ということで、日本を元気にするさまざまな業種の経営者様の生の声を取材させて頂いてるんですね。そこで御社のようなIT企業様のお話も是非取材させて頂きたくですね、、、」

俺 「えーと、どちらのサイトをご覧になられたのでしょうか？」

営業 「ええと、御社のサコツジェイピーの方を拝見させて頂きまして、、、、ええと、こう、なんといいますか非常にユニークなアニメーションを見てこれはおもしろいと担当の者が見つけまして、、、、というわけで、御社の仕事内容や経営理念なんかについてお話を伺えればと、、、」

　
営業適当過ぎだろｗ
べジータ殴ったり照英や川越シェフで遊んでるような糞サイトに経営理念とかねーよｗｗ

　
怪しく思った俺は、受話器を頭と肩で挟み直し、営業さんが話す「カンパニータンク」でネット検索し始めた。

取材商法とは　（Wikipediaより引用抜粋）
中小企業を対象に取材申込という名目で行われる商法である。
落ち目の芸能人・スポーツ選手などがインタビュアーとなり、企業経営者と対談するが、業界に精通している人間が派遣される訳ではないため、雑談以上の内容は望めない。
通常のメディアによる取材とは異なり、取材される側が逆に金銭を支払い記事を制作・掲載してもらうシステムであるため、記事広告の一種とされるが、購読者・閲覧者がごく一部に限られているため、広告としての費用対効果は低い。

俺 「えっなにこれこわい」

営業 「はい？・・・それでですね、取材費・原稿製作料・協賛金と言う形で費用をご負担頂きたいと思っておりまして・・」

俺 「あーそうですか。やっぱりそういうやつなんですね。お金無いんで、ちょっと今回はやめておきｍ」

営業 「インタビュアーは時東ぁみちゃんです」

俺 「！？　・・ちょっ、アレですよね眼鏡のアイドルの子ですよね。で、取材はいくらなんですか？」

　
営業 「×万円です。取材時間は1時間ほどでお二人で対談して頂きます＾＾」

俺 「×万かー。。。（メガネっ子アイドルかー）」

　
俺 「・・・お願いします・・。あみちゃんをお願いします・・！」

営業 「ありがとうございます！それでは、明日の14時に心斎橋の東急ハンズ裏でお待ちしております。」

　
俺がメガネフェチだということを、彼は知っていたのだろうか。
俺のハードディスク内に「megane」フォルダが実在すること、そしてその中に時東ぁみセクシー画像もいくつか保存済みだという事実を、彼は知っていたとでも言うのだろうか。

胡散臭い商法を語る営業さんの『メガネっ子アイドル』という竿に、見事1本釣りされてしまいました。

その時のつぶやき。

「お金払ってくれたらあなたの好きなアイドルと小一時間おしゃべりできますよ？」っていう電話が掛かってきたので明日お金払って会うことになりました

(@_sakotsu のつぶやき)

インタビュー当日

お気に入りのカラフルカーディガンを纏い、事務所から5分間チャリを飛ばす。
指定された建物に入ると、営業さんと時東ぁみさんがいた。

俺 「こんにちは、はじめまして」
時東 「こんにちは、宜しくお願いします！（ニコッ）」

突然の笑顔に動揺して手元からiPhoneを落とす俺。
落ち着け、相手は伊達メガネだぞ。

テーブル中央に置いたレコーダーをONにしてインタビューが始まる。

　
営業 「鎖骨という屋号、変わっていますねｗ」
俺 「そうなんですよ、ショボい響きでしょ？鎖骨って」
時東 「（笑）」
俺 「ショボそうに見えて実はちゃんとやってる、みたいな厨設定、ああえーと、中学生みたいな発想が好きなんですｗ」
営業 「そうなんですね」
時東 「（笑）」

　
あれなんで俺は営業の男とばっかしゃべってるんだ？
おい時東仕事しろよ俺はおまえに会いに来たんだぞｗ
　
そんな調子で、1時間弱の緩い雑談レベルのインタビューと記念撮影を終える。

営業さんからは「今の対談の様子をもっと大きなカラーページで載せませんか？この枠に変更も出来ます！××万～××万円です！」とか言われて、「最後方の安いモノクロページ枠でいいっす＾＾」と返しましたけど、対談直後の高揚と「せっかくこんなに長時間話したのだから自分のことをもっとたくさん載せて欲しい！」となりそうなタイミングでの、この営業はさすがだなと思いました。

　
あ、そういえば最後にぁみちゃんと握手をした時に、「俺、頑張ります！」って宣言してたことを今思い出したのでこれから頑張って生きたい。

友人の反応

メガネっ子アイドル代表格の時東ぁみさんと、なんかの雑誌のインタビューみたいなやつでおしゃべりしました。ちっくしょうかわいいかったです。「いつも画像を見掛ける度に右クリック→ダウンロードしてます！」なんて気持ち悪いこと言わなくてよかった

(@_sakotsu のつぶやき)

見てくださいよ、メガネっ子アイドル時東ぁみちゃんと小一時間おしゃべりする為にインタビュー商法にあえて釣られた男のキリッとしたこの顔を　http://on.fb.me/wVdsPQ
(@_sakotsu のつぶやき)

というつぶやきに対して、

「お前なにやってんだよそれ詐欺じゃねーのかよ大丈夫か？」
と、Skypeで心配してくれる友人達の声に対して、一連の流れとカンパニータンクさんのサイトを紹介した。

友人A 「インタビュア一覧ページの昼ドラ感がハンパない」
俺 「そうそうｗ 時東さんじゃなかったら俺も多分行ってないｗ」
友人A 「川村ゆきえだったらおれ行ってたわ。川村ゆきえと付き合いたい」
友人B 「時東あみと喋れて1時間でx万円？ それだったら俺は篠崎愛の60分コースがあれば30万は出すね」
俺 「おいゲス野郎ｗ そういう企画じゃねーからｗ」

雑誌到着

そんなわけで、インタビューから3ヶ月後に発刊された雑誌が届きました。

それはそうとインタビュー商法に乗せられた見本誌が届いてた。俺「鎖骨って折れやすいんです」 憧れの眼鏡っ子アイドルを前にして動揺していたのか自分でも何言っていたのかよくわかりません

　

　
(@_sakotsu のつぶやき)

なんかすげーふんわりとしたタイトルだなーｗ
まあ俺が語った内容がスッカスカだったからなんですけどねｗ

この雑誌の中身を見てみると、僕意外にもたくさんの人がインタビューされていて、僕が載っているモノクロのページだけでなく、カラー特集ページもたくさんあったので、『売って儲けるより取材して儲けるタイプの雑誌』なんだおもしろいなと思いました。

「カンパニータンク　時東ぁみ」で検索して発掘されたエントリー

「カンパニータンク　時東ぁみ」でググったら、取材ページがいくつか見つかったので列記いたしますね＾＾

• インタビュー写真: 時東ぁみさんとの一枚: 『漫glish』マンガで学ぶオンライン英会話スクールの裏側
• 初取材｜株式会社アセットブレイン社長のブログ【いまできること】Powered by Ameba
• Cool Ja本　世界で通用する日本本 『人種マニア』のカリカチュア・アーティスト、渡辺孝行さんが『カンパニータンク』という経営者向けの雑誌の取材を受けました。
• メディア情報　カンパニータンク – isn't it ?　＋　its　=　infomation total square
• カンパニータンク7月号インタビュー｜ICE Co., Ltd.

みなさん大変良い顔をしていらっしゃいますね＾＾

掲載後の反響

雑誌掲載の反響なんて1ミリも期待してなかったのですが、ありましたよ反響。

営業の電話が増えました。

『インタビュー商法に乗っかった男』としてそっち業界方面で僕の名簿が回ってるらしく、今度は別の出版社から「大仁田厚さんと対談してみませんか？」という電話が掛かってきました。「ちょっと前に時東ぁみちゃんと思い出作ったのでもう結構です＾＾」と丁重にお断りしておきました

(@_sakotsu のつぶやき)

元プロレスラー・大仁田厚さんとの電流金網デスマッチ対談でもやるのかな。

他にも、産経新聞グループかなんかを名乗る営業さんから似たような商法の電話がありました。
やっぱり、「こんな商法に乗っかる/引っかかるやつだったらまた釣れるんじゃね？」ってことなのでしょうか。

ネット上の 取材商法/インタビュー商法 のブログ記事まとめ

今回の件に関して、ネット上でおもしろいエントリーをいくつか見つけましたので紹介いたします。

• 「元気を伝える」カンパニータンクの取材はまあ詐欺だな
• 「元気を伝える」カンパニータンクさんから怪文書？が送付されてきた件
• 元気を伝えるカンパニータンク　【取材商法】　 | Atelier Aje ブログ

以下、引用抜粋：
この会社、取引先を見ても芸能事務所ばかりなのですが、いや、むしろ芸能事務所関連の資本が、過去の人材の再利用目的で設立したというのが実態ではないかと思われます。

最後に

ここまで散々ディスってきたような感じで書いてきましたが、実は僕はあまりそう思っていません。
取材商法/インタビュー商法自体は悪ではないと思っています。
（営業電話の印象が悪かったりするのがマイナスイメージなんでしょうか）

確かに怪しさは満載ですが、そういう商法だと割り切った上で、ひとつの体験として、ネタはネタとして楽しめばいいと思います。
「x万円は高い」という意見もありましたが、芸能人とツーショット写真が撮れたり、ルールを守ればそれを広告素材としても使えたり、雑誌の広告掲載料と考えると、まあアリなんじゃないかと思います。

何も知らない田舎の婆ちゃんとかを喜ばせるネタぐらいにはなるかもしれませんし、僕もお金を払ったからにはサイトのトップページとかにウザいぐらいに時東さんとのツーショット画像を載せてやるつもりでいますからねｗ

適当に事務所構えてさえいれば、どこからともなく営業電話が掛かってくるはずです（Twitter上でも多数報告がありました）ので、みなさんも乗っかってみたらいかがでしょうか！保障はしませんけど！

こんにちは！

先日行われた、大阪てら子43「みんなで教え合おうぜ！特別授業 vol.2」について、いろいろ学ぶことがありましたので自分なりに適当にまとめました。

何でもいいから発表しよう

今回は、「みんなで勉強ネタを持ち寄って教え合おう」という趣旨でやりました。
まあいつも同じようなもんなんですけれど、「参加しても一言も発しないまま帰っちゃうのは楽しくないので何でもいいから発表しましょうよ」ってぐらいのハードルは一応設定しました、という感じです。

ちなみに2009年にやったvol1.はこちらです。

最近ではみんなブログの更新も滞ってますけれど、vol.1の頃はみなさん積極的にブログ書いてますねｗ
「Flashでアレができた、コレができそう」でキャッキャウフフしてた時代ですね。
　

自分用箇条書き羅列

みなさんに発表して頂いた項目の中からメモってた箇所の一部を箇条書きします。

• おすすめAFプラグインサイト『Trapcode』 と『シーバレー』
• Flashだとクソ重くなるような表現、例えばエフェクト掛かったパーティクル表現などがAfterEffectsは得意
• @chabudai先生「particulerは入れといた方がいいです！」 → 1万円で買えるオブジェクトを散らすプラグイン
• ENDLESS NIGHTMARE。最初のカラスと花火にAfterEffectsを使っているそうです。素敵。「Flashの実装では難しい表現で心を掴む」
• 「それHTML5で出来るよ」とそそのかされた照英が泣きながらFlashで実装し直す画像
• ヌード 無料イラスト　nude-illust.　『ワインパーテｲの果て』に要注目
• mixiクリスマスで送ったプレゼントがローソンに置いてる端末ロッピーを介して受け取れる仕組み。僕もからあげクンをもらいました。
• ソーシャルバナー『mixi × NIKEiD』で「期間中に全世界で日本の売上がトップレベルに」
• 「アーリーアダプターのみんなーー！mixiに戻ってきてくれーー！！！」
• やるやる詐欺だったTitaniumが簡単そうだったので俺もいつか絶対そのうちやるやる詐欺
• フリーのマインドマップツール『FreeMind』が便利そう
• @_sakotsu先生 による『時東ぁみちゃんと握手する方法』については後日更新予定、とのこと

顔認識

顔認識APIが使えるface.com

1. faces.detect(); → 検出
2. tags.save(); → 学習
3. faces.recognize(); → 識別

ざっくりこういう流れで画像をface.comのAPIに渡すと以下の値が返ってくるそうです。

• 目の位置
• 鼻の位置
• 口の位置
• 笑顔度
• メガネ度
• 性別

また、３つの顔画像を渡して「この顔はQ太郎さん」などとして学習させると、
任意の画像に対して「Q太郎さんが写っているかどうか」のスコアを返してくれるそうです。

リファレンスドキュメントはこのあたりかな。
おいメガネっ子検出アプリとかできるんじゃないのかこれ。
だいぶおもしろそうなのでこれもそのうち手を出したいです。
　

ASの顔認識ライブラリ

上記のface.comは静止画に対するAPIですが、
@kjkmr先生 に紹介してもらったAS3ライブラリ『HiSlope』は動画に対してイケてるかのようなサンプルが見つかりました。

• >Terminator Machine Vision plus Michael Jackson’s Black or White mashup by Og2t (HiSlope test)
• >play.blog2t.net » Posts tagged with “hislope”, “as3”, and “tracking”

顔認識ライブラリとして有名な『Marilena』との関連はあるのかわかりませんが、これも気になりますねー。
　

CSSを便利に書くことができる拡張言語

@ikekou先生 にLESSというCSSの拡張言語を教えていただきました。
「LESS は、CSS に変数と関数の概念を拡張することができます」とのこと。
色指定ではなく、明るさ指定(brightness:10）みたいな？書き方もとかもできると。

詳しくは以下です。

• LESS « The Dynamic Stylesheet language

　
CSSの拡張言語については、『LESS』の他にも『SCSS(Sass)』『Stylus』というものもあり、それぞれ書き方にクセがあるようで、参加者の人の中でも好みが分かれているようでした。

• CSS拡張メタ言語「SCSS(Sass)」と「LESS」の比較 – (DxD)∞
• Stylus

ただ、ローカル環境ではそのまま動かないこともあるらしく、phpのようにローカルサーバー立ててやらないといけないっぽいので、初心者層は手を出さなくてもいいかもしれません。
僕もおとなしくスルーしときます。

関連リンク

@rettuce先生 は、Chromeの音声認識とGoogle翻訳の日本語解析を使って、その場でしゃべった言葉をwebcam画像上に載せてTwitterの画像投稿サービスに投げるという離れ技を見事に披露してくれました。レタス先生すごい。あとは僕も良くわかってないのでリンクを参照してください。

• blog.rettuce.com » Flashハッカソン+大阪てらこに初参加してきたよ。

まとめ

いやー、みんなでアレコレ話してると新しい発見があったりしてやりたいことがいっぱい出てきますね！楽しかったです！

ちなみに勉強会当日の、僕の新しい発見はこちらです。

今試しに男性用ブラ装着した状態で、なか卯でご飯食べてるんだけど、バレないように穏便を心掛けるようになって好青年に振る舞えるようになれるし、不自然な胸の膨らみを隠そうとして背筋を伸ばすから姿勢も良くなる効果があることがわかりました。あと、恥ずかしいのでドキドキした日常を送れます
(@_sakotsu のつぶやき)

あと、バレたら死にたくなるという危機感
(@_sakotsu のつぶやき)

飲み屋の2階席にて男性用ブラを投げ合って遊んでたら誤って1階に落としてしまったからさあ大変！ダッシュで取りに行ったら女性店員に「ちょww大丈夫なんですか？」って顔されたので「違うんです健全な飲み会です！」って間違った返しをしてしまいました。

(@_sakotsu のつぶやき)

本当にありがとうございました。

あけましておめでとうございます！

ようやく落ち着いたので、去年12月に開催した大阪てら子42「大喜利クイズ大会と忘年会」に持っていったネタなど書かせてくださいお願いします。

大喜利のルール説明

大阪てら子42「大喜利クイズ大会と忘年会」では、
今回のために用意したデスクトップアプリを大画面テレビに映して参加者のみなさんでクイズを楽しみました。

2011年を締め括る会ということで特別に豪華賞品も用意しました。

男子向け賞品

純情可憐／篠崎愛 [DVD]
アイドルユニット“AeLL.”のメンバーとしても活躍する篠崎愛ちゃんの移籍後初イメージ第2弾。
19歳になった愛ちゃんの迫力のスーパーボディを、南国の島・バリ島で余すことなく収録。

（参考）YouTube – 篠崎愛

　

篠崎愛さんのDVDにつきましては、Amazonレビューにて最も参考になったとされる「シコシコマン」さんや「パイオニア」さんを始めド変態レビュアーさんの意見を参考に、数ある作品の中からこちらの『純情可憐』に決定とさせて頂きました。
　

女子向け賞品

週刊添い寝CDvol.05玲央
「週刊添い寝CD」とは、あなたが眠るまでの間、彼氏が添い寝をしてくれる疑似体験CDです。
全編立体音響効果のあるダミーヘッドマイクで収録。 あたかもあなたの耳元で囁いているようなリアルな感覚を体感して頂けます。
第五弾は『強引で傍若無人』な彼が登場。 彼との甘く優しい夜をお過ごしください。

（参考）YouTube – 週刊「添い寝CD」シリーズ　ビーズログより

腐女子にとっては鼻血ブーな内容らしいですので、そういう覚悟で視聴してみてください。

大喜利スタート

さてさて、男子も女子もモチベーションが上がったところでようやく大喜利クイズ大会がスタート。

　
「中2男子に大人気のアプリを答えなさい」
「次に流行る『美人○○』を答えない」
「HTML6の驚きの仕様は？」
など
　

問題に沿って回答した「ハッシュタグ付きのツイート」をユーザー別に収集して一覧で表示します。
それを司会の僕が参加者の回答を見ておもしろい回答に対して「おもしろいね！」ボタンを押して採点していきます。

事前課題

当日答える問題とは別に、事前に作品を用意してくる課題もありました。こちらの配点は高めです。
僕も頑張って課題に対する作品を用意しました。

• 照英さん、もしくは川越シェフさんの画像を使って、Flash作品もしくはHTMLページ・コラージュ画像のいずれかを作りなさい（配点50点）
  → こちらを理解してからプレイしてくださいませ
  → 川越達也のパン工場 ドキドキパニック （音量注意）
• オリジナルのゆるキャラをデザインしなさい。落書きでも結構ですが、FlashタイムラインアニメーションやjQueryで動かすと加点対象とする（配点30点）
  → ゆるキャラ作品 （音量注意）

結果発表

事前課題の得点を加算して結果発表。

最後は、みんなで篠崎愛ちゃんのわがままボディを堪能しました。

http://twitpic.com/7rviau

とてもおもしろかったので、またやりたいです。
ありがとうございました。

今回は、僕が小学生の頃初めて作ったゲームについて語りたいと思います。クソゲー誕生秘話なのです。

君はMSXを知っているか

少し昔話をしましょう。

僕がまだ小学校低学年ぐらいの頃、家にはファミコンの他にもう1つ、MSXというコンピュータがありました。

MSXは、キーボード一体型のコンピュータで、ファミコンと同じようなカートリッジカセットを挿してゲームで遊べる他、趣味でプログラミングを楽しめるという親父のおもちゃでもあったわけです。

• FCマネジメント：MSX-BASIC for Education

ちょうど「ゲームは1日2時間まで」という我が家のファミコンルールを破り、電源アダプタを母親に隠されて退屈していた僕は、親父の部屋に置いてあったMSX本体と『BASICプログラミング入門』などと書かれた雑誌に興味を持ち始めます。

BASICは、1970年代以降のコンピュータで広く使われた初心者向けの言語であり、MSXでそのソースコードを記憶する媒体はなんとカセットテープ。
テープを再生することでデータを読み込み、録音することでデータを書き込んでいました。

資料になりそうなエントリーがありましたので紹介します。

• BlueMeme loneOS’s blog: ストレージデバイスの歴史 (1) – カセットレコーダー

初めてのクソゲー『ちかん』の誕生

BASIC入門雑誌を開くと、そこには50行ほどの短いソースが載ってありました。

命令文の意味もよくわかっていませんでしたが、これを見本通りに手打ちすると『しりとり』ゲームが完成しました。
とても簡素でしょぼい『しりとり』でしたが、入力に対して即座に計算し答えを返してくる反応に興奮しました。
僕が初めてゲーム作りのおもしろさを知った瞬間でした。

そこで次は、頑張って150行ぐらいの『おいかけっこ』ゲームのソースを手打ちすることにしました。
自機に向かって敵が追随してくるシンプルなゲームでした。

画面上で、敵「▲」が自機「●」を追いかけてくる様子を見て、「なんだよこれ、●って誰だよ」と思いました。
ファミコン漬けの毎日を送り数多くのゲームをプレイしてきた小学生にとって、それはあまりにも自然なリアクションでした。

「工夫すればもっと面白くできる！」
そう考えた僕は、考えを巡らせました。

ただ、そこはアルファベットすら馴染みのない小学生です。
おいかけっこするアルゴリズムを理解し書き換えるなんてことはほぼ不可能でした。
それでもなんとか、「●」と「▲」と書かれた箇所が自機と敵だということは理解できました。

アレコレ考え抜いて『おいかけっこ』ゲームはこうなりました。

※イメージです

そうです。
自機を「女」に、敵を「男」にすることでそこに『暴漢から逃げ回る女』というストーリーが生まれ、タイトルを『おいかけっこ』から『ちかん』（痴漢という漢字は当時知りませんでした）に変更して、よりドラマチックなゲームとして変貌を遂げたのです！

どういう発想でこのアイデアが生まれたのか、今となっては定かではありませんが、おそらくBASIC入門本と一緒に本棚に置いてあった週刊ポストが、思春期の少年に悪影響を及ぼしたのかもしれません。

enchant.jsを使って『痴漢』を作ってみた

でまー、その『ちかん』をですね、enchant.jsを使って再現しようと試みたのがこちらです。

痴漢 – sakotsu inspire

• 十字キーで操作してください
• IE他、旧ブラウザには対応してないかもしれません

すいませんでした。

enchant.jsのよくわからなかった箇所

JavaScript製なのでiPhoneでも見れるかな、と思ったのですが読み込み時にエラーがある様子。
そのあたり、ちょっとまた調べてみます。

あと実装の段階で、以下の点あたりがよくわかりませんでした。

• 「いいね」ボタンを設置したいのですが、JavaScriptの挙動のせいか既存ソースが無効化?上書き？されてしまいます。なにか回避作等あれば、、
• Spriteクラス内でthisをaddChild()する書き方
• dispachEventの使い方
• Spriteの参照を他クラスに渡せない
• EventTargetクラスの拡張の書き方
• Scene管理

わかる方、ヒント頂けるとうれしいです＞＜

後日談・まとめ

『ちかん』を作った後は、FF3だかDQ4にどっぷりハマってしまって、それ以降BASICプログラミングを触ることはなくなってしまいましたが、今も尚、実家に眠っている『ちかん』と雑に書き殴られたテープは、製作を生業としている僕にとっての原点であり、かけがいのない宝物なのかもしれませんね。

(＾q＾)

前回の大阪てら子で少しだけ触れた『enchant.js』と、少し前に話題になってたらしい『mario.js』について紹介したいと思います。

『enchant.js』ってなんですか？

『enchant.js』というのは、ファミコンの初代マリオやドラクエのような2Dゲームを作るのに便利な機能を備えたJavaScriptベースのゲームエンジンです。

• enchant.js – HTML5 + JavaScript Game Engine
• 4Gamer.net ― ユビキタスエンターテインメント，無料で使用できるHTML5/JavaScriptベースのゲームエンジン「enchant.js」をリリース（ミドルウェア/開発ツール）

具体的には、以下の便利クラスなどが用意されています。
FlashのActionScriptベースな造りことがわかります。ざっと軽く見ていきましょう。

Gameクラス

ゲームの開始と終了を管理する他、ゲームに必要な要素である、ステージサイズ・fps・キー入力なども設定できたり、画像・音声素材の事前読み込みもできます。

Spriteクラス

表示オブジェクトクラス。
x座標・y座標の位置値、拡大率/回転角度といった変形値、アニメーションフレームなどをプロパティとして持つ。マリオやクリボーなどのキャラクター実装にはこのSpriteクラスを拡張して作ります。

Labelクラス

テキスト表示用のクラス。スコアの表示などに使う。

Mapクラス

ドラクエの背景マップを作れるクラス。マップチップと呼ばれる正方形のドット絵を敷き詰めて構成する。

Sceneクラス

「オープニング」「アクションパート」「ボスパート」「クリア」「ゲームオーバー」などのシーン管理に。

Soundクラス

wavやmp3を再生できる。ループ再生は現段階ではまだ実装されてないぽい。

その他、詳しくは以下の公式のドキュメントをチェックしてみてください。

• Class Index | JsDoc Reference

enchant.jsを実際に使って作られたゲームは以下で遊ぶことが出来ます。ソースもzipで丸ごとダウンロード可。

• 9leap : トップページ – どこでも遊べる、投稿型ゲームサイト

こちらのページも作り方の参考になりそう。

• 4Gamer.net ― 「enchant.js」でゲームを作ろう！　HTML5とJavaScriptによるアクションゲーム制作入門（ミドルウェア/開発ツール）

そんでこれが、手慣れたActionScriptのような書き方で組めるというので、それじゃいっちょやってみっかと相成ったわけですね。クソゲーもすぐ作れそう。次回くだらねーやつを発表させて頂きますね＾＾

『mario.js』ってなんですか？

JavaScriptでアクションゲームの実装について調べていたところ、『mario.js』というソースコードに行き着きました。

• Play Super Mario Bros in 14kB Javascript – Nihilogic

どうやら、わずか14KBのソースコードで、マリオの1-1が遊べる（敵はいませんけど）というものだそうです。
本家サイトの背景も実は方向キーで操作できるゥ！と当時話題になってましたそういや。

以下のサイト様にて、mario.jsのソースコードが細かく解説されておりました。

• 14KB JavaScriptマリオをコードリーディングしてみたよ – aikeの日記

すごい。
エンコードされたバイナリデータ（不可解な大量の文字列の塊）からマリオのドットグラフィックやサウンドを再現してるんですね。。ひゃー。
他にも、マリオのBダッシュスピード調整や「？ブロック」の点滅などの為にいろんなタイマーが用意されていることもわかりました。

中身が細かくどうなってるのかまで完全に理解するのは難しそうですが、アクションゲームとして必要な実装要素が掴めそうです、勉強になりますね。

もうひとつ別の『mario.js』

上記の mario.js とは別の mario.js もありました！こっちは日本製です！

• [KY] WCAN mini ActionScript Vol.9 に参加，そして発表してきました « いわぶろ（ろてん）
• [javascript] 1年くらい放置していたマリオさんなライブラリ「mario.js」をgithubに上げてみた « いわぶろ（ろてん）

GitHubにソースも公開されています。

使い方としては、マリオかルイージを「歩く」「ジャンプ」「しゃがむ」させたり出来ます。
上記サイトの上部にマリオがいるはずです。（IEなどのブラウザによっては機能しないかもしれません）

あと関係ないけど、mario関連でこんなのも見つけました。

• Pure CSS animated 3D Super Mario Icon – An experiment by Andreas Jacob

マリオは世界中で愛されてますねー。

３つ目のユーティリティ系『mario.js』

さらにまた別の『mario.js』も発掘しました！
こっちはアクションゲーム向きというよりは、痒いところに手が届くユーティリティ系です！

• mario.js:ゲーム開発用JSライブラリ

マリオを作る用途以外でも便利かもしれません。

おまけ：感銘を受けたエントリーの紹介

最初に紹介した『enchant.js』を創られた方のブログなんですが、めちゃめちゃかっこいいので紹介させて頂きます。
僕がenchant.jsに興味を持ったのもこのプレゼンを見てからです。

• wise9 › グッバイIVS 日本最強プレゼンバトル体験記

「（FlashLiteの）クソゲー量産してなんか意味あるんスか？」

みんなが思ってたことを（Adobeさんや会場の空気を読まずに）さらっとディスる。
それも、裏側にはしっかりとした考えがある上でまっすぐにディスってる。
そのディスり方も、悪意を感じさせない方向に持っていくスマートさ。
もーめちゃめちゃカッコイイ。おれもこういうプレゼンできる人になりたいですー (^v^)

つってなー。テッテレー。

こんにちは！

先日行われた、大阪てら子40「そろそろモバイル開発について語ろうぜ」について軽くまとめてみます。
モバイルコンテンツを作る方法ってこんなにあったんですね！な内容でした。

iPhoneサイトだの、Androidアプリだの開発環境についてみんなが教えてくれました

僕が特に知りたかったモバイル開発について、参加者のみなさんがそれぞれ違うアプローチで紹介して頂きました。
ありがとうございます！以下にいくつか連ねていきますね。

Corona

@hc_nakahara さんが『Corona』について発表してくださいました。

• プレゼン資料：CoronaSDKで始めるスマートフォンアプリ開発 （※pdf注意）

CoronaはiOSとAndroidアプリの同時開発を可能にする開発プラットフォームです。
物理演算エンジンとしてお馴染みの『Box2D』や、Facebookとの連携などゲーム作りに便利な機能も簡単に作れるのだとか。

日本コロナの会 @hc_nakaharaさんの資料によると、
Coronaは元Adobeの人が作ったものらしく、記述ルールもAS3と非常に似ているようです。

サンプルゲームも見せて頂いたのですが、確かにお手軽簡単に数十行の記述でだるま落としゲームができていました。なるほどこれはすごい。

Android / iOS向けの書き出しで年間349ドル掛かるそうですが、確かに開発手段の有力な1候補になりそうですね。

ただ、「Androidとの相性がまだあまり良くなさそう」なことも併せて話しておられましたｗ

AIR for Android

@butchi_y さんが『AIR for Android』について発表してくださいました。

• ブッチブログ 大阪てら子40参加レポート

当然ですが、Androidには当然AIRをインストールした上でないと動作しません。
ですので、この場合「Androidアプリ」というよりも、「Android上で動作するAIRアプリ」といったニュアンスの方が近いのかもしれません。

そのAIRに対応するのが、Android 2.2からで（一部動かない端末もあり）、またAIR 2.6からiOS向けのアプリ書き出しにも対応する（AIR for iOS）ほか、加速度センサ・カメラ・マイクも対応しているそうです。

ただ、各社が発売するAndroid端末間にも多少の仕様誤差があるようで、その組み合わせによるサポートもややこしくなりそうですね。

ユーザーのみんながみんな最新版で揃えてくれれば問題ないのですが、やはりそうもいかず、@butchi_y さんが発表してくれたアプリも端末との相性もあるのか動作が不安定な箇所も見受けられました。

なるほど、Flasher注目のAIR for Android もまだ実用に耐えうるのか注意が必要だと言うことがわかりました。

インストール率について と その他参考サイト

• AIR＋FlashDevelopでブラウザ・PC・Android・iPhone一挙開発 – GEOQUAKE Backstage

「250,000超件のダウンロード」ということで、これがAIR for Androidの現在の利用状況ということですかね？

この25万ダウンロードと言う数なんですが、全世界展開してる端末の台数を考えると驚きの少さじゃないでしょうか？
このニュースエントリによると、スマートフォンの世界出荷台数4億5000万台のうちAndoroidのシェアが45％なので、
単純計算2億台ということになるのですが、そのうちの25万台がダウンロードと考えると、これはAIR for Android まだ全然始まってないんじゃ・・？

コメント欄にて、sugariさまに上記について指摘していただけました！

Androidからだと250,000超が表示の上限のようで、
PCからマーケットを見るとAIRのダウンロード数は5,000,000 – 10,000,000件ですよ

勘違いしていました！よく知らずに騒いでしまいすみません！
（表示の上限ってなんねんそれｗ）

でもまー、それでも1000万インストール / 2億台 なんですね。。

たかだが1プラグインのくせに母体を喰う恐れがあるから迫害されてるんでしょうか。。。？＞＜
ちょっとまだ普及には程遠いのかもしれませんね。。

Flasher注目の『AIR for iOS』と『AIR for Android』について適当にググッたらヒットしたエントリー様も参考に追記しておきますね。

• 「アメーバピグ for Android」 開発事例 | デベロッパーセンター
• iPhone/iPadアプリ開発の扉を開くAdobe AIR 2.6とは（1/3） – ＠IT
• hi-posi » Blog Archive » AIR for Androidでできない事。

Unity

@024t910 さんが3Dゲーム開発環境『Unity』について発表してくださいました。

Unityとは、「iPhone、ウェブ、Xbox360、PS3すべてのプラットフォーム向けに開発できる3Dゲーム用の開発環境」だそうです。
公式サイトのGalleryを見てみると、なるほどこいつはすごいものが出来上がりそうです。

というかこれはもう、Flasherが作ったカジュアルゲームというよりは、コンシューマー向けの本気ゲームな領域ですよねｗ
でもそれがUnityでは簡単に作れる、ということでしょうか。

　以下は、@024t910 さんがUnityを触っていく際にまとめていったリンク集エントリです。

• Unity 開発用メモ – アレとコレ.jp

Unitiyの開発がどういうものなのか、実際に3Dゲームのライブコーディングをしてくださったんですが、
コーティングというよりは、あまりソースコードを触ることもなくどちらかと言えば、3Dライブビューの中でパーツを配置したりして作っていました。

「へー、ゲームってそうやって作ってるんだ？」というぐらいお手軽に作っておられましたが、
ただですね、これを実現するためのいろいろ便利な機能をフル装備すると、
ライセンス一式でなんと 4,500ドルも掛かるそうです。安い高いは別として勇気はいりますねｗ

Titanium Mobile

@astronaughts さんが、『Titanium Mobile』について発表してくださいました。

• 大阪てら子で Titanium mobile について話してきました » astronaughts.net

web開発の人にとって身近な言語であるJavaScriptをベースに開発できることで注目を集めている『Titanium Mobile』。
短いコード記述で手軽に開発が可能なようです。

高機能なエディタを有した開発環境『Titanum Studio』（ただし、デバッガーが有料）も先日リリースされたようですし、数ある開発プラットフォームの中でも一番とっつきやすいと言えるかもしれませんね。

ただ、いくつかお話を聞いて注意したいと思ったことは、
「アクションゲームなどのリアルタイムな反応を必要とするゲームを作るのは苦手」だということです。

でもこのあたりは、例えばJavaScript製のゲームエンジンなどと併用した場合はどうなるのかなどそのあたりも気になるので、また今後調べてみたいと思います。

• 連載：Titanium Mobileで作る！ iPhone／Androidアプリ｜gihyo.jp … 技術評論社
• 4Gamer.net ― 「enchant.js」でゲームを作ろう！　HTML5とJavaScriptによるアクションゲーム制作入門（ミドルウェア/開発ツール）

Mono touch

@kamiyam さんが『MonoTouch』について話してくださいました。

が、すいません @kamiyamさん！
僕はこの時ちゃんと話を聴いてなくてｗ、「C#で開発する」ということしかメモれてませんでした。すいません！

モノタッチ、なんだかすごかったでしたよね、僕もそう思いました！！！１

その他の発表

僕の『enchant.js』で作ったクソゲーは次回更新時にでも発表させて頂きます。

• @coppieee さん
  
  ASCII.jp：WebSocketでスマホ用対戦ゲームを作ってみた｜実録！HTML5でモバイルWebアプリ開発

２つの端末で、ピッチャーとバッターとに分かれて対戦できるゲームを紹介して頂きました。
「HTMLのcanvasの描画が重たかったのでCSSアニメーションで対処した」などの工夫を話していただけました。
node.js と webSocketを使ってリアルタイム通信を行っているそうです。（僕はあまりよくわかっていませんｗ）

• @mu3yo2 さん
  RGB BALL – jsdo.it – Share JavaScript, HTML5 and CSS

JavaScript で作られた処理の重たそうなアニメーションの描画テストを発表して頂きました。
iPhoneで見るとやっぱり重たかったわけですが、@kjkmrさんが同じものをObjective-Cで作り直したところ、
「さっくさくやで」な軽快さを実現していました。さすがネイティブ言語は違いますね！

あと、勉強会とは直接関係はないのですが、個人的に「いいねボタン」を押した@fladdictさんのUIに関する良エントリも紹介させて頂きます。

• fladdict » スマホのUI考 〜 ボタンについて
• fladdict » スマホのUI考２ 〜 フィードバックについて

まとめ

クラスプラットフォームな開発環境はまだまだ他にもあるそうです。

• 「Androidの開発ツール」のまとめ – FlatLabs

@hc_nakaharaさんによると、こういう開発環境は50個ぐらいはあるとのこと。

アレなんですかね、アプリ制作事業はもう飽和して美味しくないから、それならば開発プラットフォームを提供する側にまわって胴元としてライセンス商法で儲けよう、っていう狙いなんでしょうかね。

Objective-Cは嫌いなみなさんは、自分が既に体得している言語から開発環境を選べばいいかもと思いました。
Flasherである僕も、『AIR for iOS』『AIR for Android』を応援しながらいろいろ摘んでいければと思いました。

参加してくださった皆様、ありがとうございました！勉強になりました！！

こんにちは。元コーダーのsakotsuです。

前回に引き続き、スマートフォン向けのサイトについて学び始めたのでその雑感などを備忘録として書いていきたいと思います。

時間が無い人向けに結論を先に書いておくと、
「誰だよHTML5でWebの世界が激変するって言ってたやつは、、」です。

僕の勉強不足で生意気言っていたらすみません！
でも、「HTML5万歳！夢の技術万歳！」なエントリーが並ぶ中でこういう意見もあっていいんじゃないかと思って書かせて頂きます。

宜しくお願い致します。

HTML5って何ですか

僕が数年前にコーダーとして働いていた頃は、HTML4/XHTMLの時代でした。
それから今に至り「HTML5がWebの世界が激変させる！」という記事を見かけるようになりました。

会社を辞めてからコーディングに興味を無くしFlasherとしてやっていた僕は、今更になって「いったい何が始まるんです？＞＜」という不安な面持ちでいたんですけれど、いざフタを開けてみれば、個人的にはまだHTML5はあまり騒ぐような段階じゃありませんでした。

というか、複数のブラウザに縛られている現状ではHTML5に実体なんてものはありませんでした。

• PC向けサイトでは、まだCSS3が使えない（と考えていた方がいい）
• 実質はスマートフォン向け
• CSS3追加プロパティと疑似セレクタでコーディングが楽になることもあるけれど、各ブラウザに対応するための面倒な記述も減らない

HTMLが4から5に変われど、環境が整うまでコーダーの人はHTML5による恩恵はまだ受けられないんじゃないかと思うようになりました。

お～い磯野～、未整備なHTML5のことなんて放っておいてJavaScriptやろうぜ～

そんなHTML5をdisっていた僕ではありますけれど、jQueryで作られたUIや仕掛けなど、
Flashでは出来ない部分に手が届くようなweb体験は素敵な感触でした。

jQueryについては、こちらのスライドがわかりやすかったので紹介します。

• ノンプログラマーのためのjQuery入門

調べていくと、jQueryの他にも便利そう/おもしろそうなJavascriptライブラリがあるみたいですね＾＾

• 4Gamer.net ― ユビキタスエンターテインメント，無料で使用できるHTML5/JavaScriptベースのゲームエンジン「enchant.js」をリリース（ミドルウェア/開発ツール）
• kanariia.net BLOG – [easelJS]JSのCanvasをFlashライクに使うライブラリ！とりあえずHelloWorldしてみる。

そのうち触ってみようー。

DreamWeaverでHTML5を組む際の注意点

というわけで、HTML5+CSS3が通用するスマートフォン向けにコーディングをやってみました。

「HTML5になって、タグの記述も少なくなって楽になったよやったね！」なんて言いながらDreamWeaverCS4で作業をしていたら、
UTF-8ページが勝手にShift-JISに書き換えられてしまうという事例が発生しました。

ちなみに文字コードに関してはこの一行を書いていました。

<meta charset="UTF-8">

ググって見ると以下のページで解決できました。

• 【更新】Dreamweaver CS4 でテンプレートを適用すると文字化けする件。（CS5 でも発生する模様） – btmup Blog ［ボトムアップ ブログ］
• Dreamweaverで文字コードが勝手にSJISに変更される – memories

要は、今までHTML4記述で必要だった部分を省略したために、
DreamWeaverが余計なお世話で文字コードをShift-JISとして解釈し自動変換してしまってたということでした。

結局、HTML5では不要なはずの下記の1行を追加することにしました。

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

うーん、Adobeさんなんとかしてほしいです。。

あと、CSS3の border-radiusもそうなんですけど、

-webkit-border-radius: 10px; /* for Safari,Chrome */
-moz-border-radius: 10px; /* for Firefox */

webkit系ブラウザ用とFirefox用とを併記しないといけないみたいです。仲良くしてよ。

やっぱり「HTML5になって記述が劇的に楽になったやったー」を実感するには、もうしばらく時間が掛かるのかもしれませんね。。

iPhone上でのアニメーション表現の選択肢

みなさんお馴染みの通り、iPhoneのSafari上ではFlashが再生されませんので、代替案を考えなければなりません。

そういえば、CSS3にはアニメーションするプロパティが追加されたんでしたね。

• webkit応用編01 | HTML5+CSS3でサイトを作ってみる。

ところが、これはIE6～8（9はどうでしたっけ？）では動きません。

しょうがないのでクロスブラウザなjQueryのanimate()で組むのが定石かと思ったのですが、
iPhoneでは「jQueryアニメーションは重い」というエントリーを見つけました。

• zudolog » iPhone, iPadでの-webkit-transitionと-webkit-transform

どうやら、CSSのtransition / transformを使うべきらしいです。

せっかくなので、これ以外の方法でアニメーションする方法も考えてみたいと思います。

まず思いついたのが、アニメーションgif。
これならPCでもガラケーでもスマートフォンでもアニメーションできるんじゃないだろうか。
そう思っていたのですが、Safari上での再生が他のブラウザと比べて劇的に遅いという残念仕様だということがわかりました。
試しに、こちらのページをSafariとそれ以外のブラウザで確認してみてください。

加えて、こういうエントリーも見つけました。

• iPhone／AndroidのブラウザでGIFアニメが再生できない件 | alt

もー、AppleさんはFlashを封じるならアニメーションgifぐらい他ブラウザと足並み揃えといてくださいよー。

で、そんなAppleさんに居た人が作ったという、iOS対応のアニメーションオーサリングソフト『Hype』も最近登場したみたいです。
トゥイーンとフェードだけ使うならこれでいい気もしますけど、評判はどうなんでしょうかね。

• もうFLASH不要かも? HTML5アニメ作成ソフトHype登場 iOSにも対応! 【増田(@maskin)真樹】 : TechWave

最後。
jpgの連番再生的な発想でアニメーションさせる方法も紹介されていました。

• blog.rettuce.com » アニメーションgifならぬアニメーションjpg/png

おー！
これは下準備がちょっと大変かもしれませんが、工夫すれば一番キレイで威力発揮しそうな気がします！

でもやっぱり、Appleは早くFlashを解禁してくださいｗ

他、参考になりそうなエントリーも教えてもらいました

• iPhone4 Retina Display対応のデザインのコツ！ | KAYAC DESIGNER’S BLOG – カヤックの意匠部によるデザインやマークアップの話
  iPhone4用解像度に合わせてデザインする時の注意点がよくまとまっています！
• iPhone,iPadをPC上でエミュレータ「iBBDemo2.0」使い方？快適にシュミレーション可能 ：PC,モバイル｜アマモ場
  AIR製のiPhoneとiPad用のシミュレーター
• flipsnap.jsというのを書いた – Webtech Walker
  「スライドするUIを汎用的に使えるようにしてみた」だそうです！

まとめ

正直、「HTML5＋CSS3」に関してはまだまだマーケティング用語の域をでないレベルの印象ですが、
「JavaScript」はこれからちゃんと勉強していかないといけないなーと感じました。

あと、HTML5+CSS3+JavaScriptのことをFlasherの人達と話してたんですけど、
「これらのことをクロスブラウザでサクっと作れちゃうFlashってやっぱすげーよな」って話になって僕らは中ジョッキで乾杯しました。

なので、Adobeさんは負荷の軽いFlashPlayerを作ってAppleさんも早くそれを認めてあげてください。

【追記 11/05/30】
jQueryMobileの組み方について有益なコメントを頂きました！
本文にて「デザインのカスタマイズが超しにくいんですけど！」という趣旨の文を掲げておりましたが、CSSに関してはCDNをそのまま使うのではなく個別に用意するのが普通みたいです。勉強不足なのに調子に乗ってdisってしまってjQueryの中の人すいません！出直してきます。

シロ様より教えていただきました！ｊQueryMobileのギャラリーサイトです。
http://www.jqmgallery.com/
————–

こんにちは。

そろそろ僕もスマートフォン用のコンテンツ製作の波に乗っかりたいと思っていたところ、
「これからjQueryMobileが来るよ！」と周りから煽られましたので、まずは手始めに、スマートフォン用のサイト製作に便利らしいという『jQuery Mobile』を触ってみることにしました。

サンプルページを作る過程で、いろいろと気付いたことなどがありましたのでまとめてみました。

時間が無い人向けに結論を先に書いておくと、
「モックはすぐできそうだけど、クライアントはこのテンプレートサイトで満足すんのかな？」です。
僕の勉強不足で生意気言っていたらすみません。
でも、「jQueryMobile万歳！」なエントリーが並ぶ中でこういう意見もあっていいんじゃないかと思って書きました。

jQuery Mobile って何ですか？

jQuery Mobile というのは、jQueryのプラグインのひとつで、「スマートフォン向けのサイトが手軽に作れる」と今話題になっているものです。

• jQuery Mobile | jQuery Mobile

わかりやすい動作サンプルについては下記のサイト様を見てくださいませ。

• ホーム | jQuery Mobile リファレンス
• jQuery Mobile使用時によく使うマークアップで日本語サンプルを作ったので配布します – かちびと.net

サンプルページ『HELLO, SAKOTSU!』

で、出来たのが下記のテストページです。
（多分そのうち上書き更新されていくと思います）

• HELLO,SAKOTSU!

トップからページ遷移してBackボタンで戻ってきた時に、Headerが吹っ飛ぶんですけれど、
jQuery Mobileは現時点ではまだアルファ版（テスト段階）であることから、バグのせいにしているんですが、
僕の組み方が悪いのかもしれませんｗ

ページ遷移の内部処理を理解する

jQuery Mobileには、横にページをスライドさせたり画面がくるんとひっくり返ったりするページ遷移エフェクトが設定できます。

このページ遷移エフェクトを実現するにはAjax通信が伴うので、遷移後のアドレスが[ index.html#menu ]とか[ /#hoge/index.html ]に置き換わったりします。これは、ページ単位の切り替えではなく、同一ページ内でコンテンツを置き換えているからです。

このあたりの処理の説明はややこしいのでわかりやすい下記のサイト様をみてくださいませ。

• ページ遷移 | jQuery Mobile リファレンス

つまりページ遷移エフェクトとページ単位の切り替えの両立は難しいので、ページ遷移するコンテンツは同一のhtmlに全部まとめて書くのが吉なのかなーと思います。
（ページ単位で管理したい人にはなんだか気持ち悪いかもしれないけれど、、）

製作メモ

この通りですね、jQueryMobileページのコーディングは、通常のHTMLコーディングではなく、jQueryMobile用のコーディング記述で書く必要がある、と思っていた方がいいです。

以下には、作業中にメモっていたつぶやきを列記しておきますね。
jQueryMobileがバージョンアップすることで結果も変わるかもしれませんが念のため。

CSS読み込み記述について。全CSSを内包したimport.cssひとつを一括でlinkするのではなく、順番に分けてlinkした方が良いぽい。一括だと読み込みが追いつかずに描画がバグった。参考: http://bit.ly/lh57nV

お手軽簡単にUIを実装できる反面、ページ背景色を変えたいなど細かいカスタマイズには不向き。cssファイルに設定していても上書き無効化される。ただし、タグにstyle属性を直書きすれば反映される。ひゃーすごい原始的な書き方に！

これは、jQueryMobile用のCSSが優先されることから起こる現象です。
例えば、「<div data-role="content">で囲むと自動で余白に囲まれる」といったことから、僕は余白無しの画像を置きたい場合に、<div data-role="content">の外に記述しました。
（でもHeaderはこれのせいで吹っ飛んだのかな？）

<a>タグで見た目が勝手にボタン化されてしまう場合は<div>タグで囲むなどする

<a>タグで自動的にボタン化してくれて便利なんですが、画像をボタンにしたい場合は無理矢理<div>で囲んだりしました。
ただ、ゴリ押しの実装になってしまうので、結局画像ボタンは諦めました。

結論・まとめ

JavascriptやCSSを書けなくたってお手軽簡単にUIを実装できるのは大変素晴らしいのですが、
カスタマイズがしにくいという点でどうしてもテンプレートサイトのような造りになってしまいがちなので、そのあたりでクライアントが満足してくれるかどうかが怪しいところです。。

もちろん僕の勉強不足で、まだjQueryMobileさんのチカラを引き出しきれてないところも多々あるとは思いますが、
それならば、通常のHTML5サイトをスマートフォンサイズに最適化して作った方が見栄えも良くてウケもいいんじゃないかな、、と思ってしまいました。

ただ、まだ正式版のリリースではないので、そのあたりも期待しながらjQueryMobileを見守っていきます＾＾

今回、参考にしたサイト様達の紹介

• jQuery Mobileについての雑感 ページ構成篇 – ある1つのサンプル
  他のページも大変参考になります！
• jQuery Mobile リファレンス的なもの – へっぽこプログラマーの日記
  リファレンスはここがよくまとまっていました。
• mobjectify – Mockup your mobile website prototype in minutes
  なんと、サイトでパーツを配置していくだけでソースがダウンロードできるっていう便利サイト。
• イラスト　無料　 ＧＩＦ イラスト工房ユニ
  今回のサンプルページでも使わせて頂きました、素材屋さんです。ありがとうございます！
  工事中のページなどで使えそうな「お辞儀する女性」や「乗馬をする全裸女性」など、セクシーなヌードイラストも充実してますので自分が18歳以上かどうかちゃんと確認してからクリックしてくださいね。

モバイル開発についての勉強会の告知

もー、わからないことがいっぱいあるので、
6/19に大阪てら子で、モバイル開発についてあれこれ情報共有しようぜの会をやります。

• 【勉強会】大阪てら子 40「そろそろモバイル開発について語ろうぜ」 : ATND

もう人数がオーバーしてしまいましたが、、好評でしたら同じようなテーマで続けていこうかと思っています。

当日はUstreamで放送するかもしれませんので（未定）、気になる方は@teraco_osakaアカウントで動向を
チェックしてみてくださいませ。

こんにちは！

突然なんですけど、自分用にSoundManagerをAS3で書いたので、もしよかったらみんな4の5の言わずに使ってみてください！
そして募金でもしてください！今すぐSoundManager募金してください！さあ早く！急いで！

ダウンロード・使い方については以下をご覧くださいませ。

SoundManager って何ですか？

Flashで音を鳴らすことに特化しただけのクラスライブラリです。それ以外のことは（ver0.8の時点では）出来ません。
AS3で普通に書くと、ただ音を鳴らして音量ON/OFFするだけでも案外めんどくさくなるのですが、
そのあたりを意識せずに数行の記述で簡単に扱いたいな、と思って書きました。

自分用に書いたので多少のクセはありますけれど、ある程度の基準に達したと判断したので公開します。

設計コンセプト・実装してない機能など

• Soundクラスの概念を意識しなくても使えるように
• staticなクラスとしてどこからでも呼び出せるように
• soundの制御は基本的にplay(),stop()の切り替えではなく音量の操作で行うことを想定
• soundを種類に応じてBGMとSEに分けて管理する。
  • BGMの特性 → ループ再生する、重ね再生できない
  • SEの特性 → ループ再生しない、重ね再生できる
• バグ回避の観点から、フェードアウトしながらのstop()と、pause()、resume()は実装から外しています
• 現バージョン（ver0.8）では、Tweenerの力を借りているのでTweenerを同梱しないと動きませんが、いずれなくても動作するようにしたいです。他Tween系ライブラリをお使いの人でも、同梱するTweenEngine.asを一部書き換えるだけで動かせると思います

ちなみにSoundManager.asにはもうちょっと踏み込んでメモってます。

ダウンロード

• SoundManager [jp.sakotsu.sound] ver.0.81 （2011/7/4更新）
  http://sakotsu.jp/work/soundmanager/lib_ver081.zip
• サンプルflaファイル
  http://sakotsu.jp/work/soundmanager/sample_ver081.zip
• githubにも上げたほうがいい？
  （検討中）

※Tween系ライブラリ『Tweener』を同梱しています。
　とても助かっていますいつもありがとうございます。好きです、Tweener！
　いずれ、Tweener無しでも動くようにしたいです。

動作サンプル

SoundManagerの基本的な使い方

[使い方その1] Flashのライブラリに音声ファイル（mp3, wavなど）を読み込む

Flashのライブラリに、使いたい音声ファイル（mp3, wavなど）を読み込み、
「ActionScriptに書き出し」「最初のフレームに書き出し」にチェックを入れます。

こんな感じです。
リンケージで設定したクラス名を指定して使いますので適当に「BGM1」や「SE1」などと命名してください。
以降の解説では、これら「ActionScriptに書き出し」でクラス指定した音素材を総称してsoundと記述することとします。
　

[使い方その2] SoundManagerを初期化してからsoundを追加する

まず、初期化の一文を書きます。

SoundManager.init();

　
次に、soundをSoundManagerに登録します。

SoundManager.addBGM("bgm1", "BGM1");
SoundManager.addSE("se1", "SE1");

音素材の用途に合わせて、『BGM』と『SE』に分けて登録します。
「ループ再生する、重ね再生できない」soundは『BGM』として、
「ループ再生しない、重ね再生できる」soundは『SE』として、addBGM() / addSE()で登録します。

addBGM() / addSE()の第1引数には、soundと紐付ける任意のsoundIDを記述し、第2引数にはリンケージ名（Flashライブラリ内のSoundクラス名）を指定します。また、addBGM()の第3引数でloopの有無も指定できます（省略可。標準はtrue）。
同じIDで複数登録すると一番最後のものが反映されます。
　

addExternalBGM() / addExternalSE()でも同様に、外部ファイルへのパスを直接指定して登録することが出来ます。

SoundManager.addExternalBGM("bgm2", "external_bgm.mp3");
SoundManager.addExternalSE("se2", "external_se.mp3");

この場合、再生はストリーミング形式になります。（参考：flash.media.Sound (ActionScript 3.0)）
　

[使い方その2] 再生する

soundを再生するにはplay()を実行します。

SoundManager.play("bgm1");
SoundManager.play("se1", 3); // 3秒掛けてフェードイン再生

play()の第1引数に再生したいsoundのIDを指定します。
第2引数を追加することで、フェードイン再生を秒数指定できます。
　

stop()で再生を停止します。

SoundManager.stop("bgm1");

ここで１つだけ注意点があります。
残念ながらstop()ではフェードアウトしながらの停止は実装していません。
これは僕の力不足の為、今のところ泣く泣く実装から外しています。バグ挙動の回避の為です、すみません。
どうしてもフェードアウト停止させたい場合は、音量を0にフェードアウトした後で停止させるなどで強引になんとかしてください。。

[使い方その3] 音量を調整する

基本的には、音量はBGMとSEごとに管理します。
全てのBGMを一括操作するにはsetVolumeBGM()を、
全てのSEを一括操作するにはsetVolumeSE()を使います。
音量を制御するつまみにこれを割り当てると便利だと思います。
第1引数に音量を0～１の範囲で指定します。第2引数でフェードイン/フェードアウトも指定できます。

SoundManager.setVolumeBGM(0.5);
SoundManager.setVolumeSE(0.5, 1);

　
また、個別のsoundの音量だけを操作したい場合には、setVolume()を使います。
第1引数にsoundのIDを、第2引数に音量を、第3引数でフェードイン/フェードアウトも指定できます。

SoundManager.setVolume("bgm1", 0.5, 1);

[使い方その4] ミュート状態を交互に切り替える

SoundManager.toggleMuteBGM();
SoundManager.toggleMuteSE(1);

toggleMuteBGM()を実行すると、BGMに登録しているsound全てに対してmute/unMuteを交互に切り替えます。
toggleMuteSE()も同様に、SE全てに対して切り替えます。
引数を追加することで、フェードイン/フェードアウトを秒数指定できます。
通常、この記述だけで簡易なBGMの切り替えに関しては事足りるんじゃないかと思います。

toggleMuteBGM()/toggleMuteSE()の切り替え状態(true or false)は以下のプロパティ（読み込み専用）で参照できます。
デフォルト値はどちらもfalse（ミュート状態にない：音が出る）です。

trace( SoundManager.isMuteBGM ); //Boolean
trace( SoundManager.isMuteSE ); //Boolean

これらのミュート状態を交互に切り替えるのではなく、直接一括で操作したい場合は以下のメソッドを使います。

SoundManager.setStatus(false, true, 1);

setStatus()の第1引数でBGM登録したsoundを、第2引数でSE登録したsoundに対する音の可否設定を指定します。
(true：聴こえる / false:聴こえない)
第3引数を追加することで、フェードイン/フェードアウトを秒数指定できます。

上記の記述例だと、「BGMをmute（音消し）にして、SEはunMute（聞こえる状態）」に1秒掛けてフェードさせます。
このメソッドの場合は、trueが「音が聞こえる」状態なので注意。　
　

[使い方その5] その他のメソッド

上記以外のメソッドも紹介しておきます。

SoundManager.removeBGM("bgm1");
SoundManager.removeSE("bgm1");

addBGM() / addSE()で登録したsoundをIDを指定してリストから外します。
勝手に操作されたくないsoundがある場合は、removeしておきましょう。
再生中のsoundには実行されませんので、stopしてからremoveしてください。
　

SoundManager.setPanBGM(-1, 1);
SoundManager.setPanSE(1, 1);

setPan()を全BGM/全SEに対して実行します。
　

SoundManager.setPan("bgm1", -1, 1);

個別にsoundの定位を操作します。
第1引数にsoundのIDを、第2引数に-1～1の範囲でNumber型で指定して-1（左スピーカーから出力）～0（標準）～ 1（右スピーカーから出力）を設定します。
第3引数を追加すれば、フェード効果を秒数指定できます。
　

SoundManager.stopBGM();
SoundManager.stopSE();

登録している全BGM/全SEの再生を停止します。
stop()と同じくフェードアウトしながらの停止はできません。
　

SoundManager.muteAllBGM();
SoundManager.unMuteAllBGM(1);
SoundManager.muteAllSE();
SoundManager.unMuteAllSE(1);

全BGM/全SEに対して、mute/unMuteを指定します。
　

[使い方その6] プロパティ

便利かもしれないプロパティを紹介します。

trace( SoundManager.bgmList ); //Array
trace( SoundManager.seList ); //Array
trace( SoundManager.isAvailable("bgm1") );// Boolean;

bgmList/seListで、全BGM/全SEに登録してあるsoundのID一覧を配列で返します。
isAvailable()は、指定のIDが登録されているかどうかを返します。
　

trace( SoundManager.isPlaying("bgm1") ); //Boolean;
trace( SoundManager.isMute("bgm1")  ); //Boolean;
trace( SoundManager.getProperty("bgm1") ); //String;

上から、指定したsoundに対して「再生中であるかどうか」「ミュート状態であるか」「プロパティ一覧」を取得できます。

こういう使い方も出来ます

大掛かりなフルフラッシュサイトを作る場合などで、
例えば、音素材だけを内包したsound.swfを親swfがLoaderで読み込んで使う、といったケースがあるかと思います。
その場合は、以下のような記述をすればOKです。（ダウンロードできるサンプルに同梱しています）

// [1] sound.swfを読み込む。ApplicationDomainの設定がポイント
var _loader:Loader = new Loader();
_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, _onCompleteSoundSwf);
_loader.load( new URLRequest("sound.swf"), new LoaderContext(false, ApplicationDomain.currentDomain) );

// [2] 読み込み完了後、sound.swfに内包された"BGM4"を指定して使えるようになります
private function _onCompleteSoundSwf(e:Event):void {
	SoundManager.addBGM("bgm4", "BGM4");
	SoundManager.play("bgm4");
}

Loaderクラスのメソッドloadの第2引数に指定するLoaderContextのプロパティの
アプリケーションドメインにApplicationDomain.currentDomainを指定します。
アプリケーションドメインについてよくわからない人は、ここを見てたらい回しにされるか、諦めて上のソースをコピペしてください。

最後に

今回、自分用のSoundmanagerを作るに当たって、githubに散在する偉大なる先人のSoundManagerなどを参考にさせて頂きました。（ありがとうございます！勉強になります！）
なので、sakotsu製のが肌に合わない方は、他の方のものを探すか、諦めて自分で組んでください。

意見･要望・バグ報告等ありましたらコメント欄に書いてくだされば、改良していくかもしれませんが、
緊急サポートは保障出来ませんので悪しからずお願い致します。
あと、このSoundManagerの不具合等により被害を被ったとしても、僕はあなたに対して「ごめんな・・」と言いながら缶コーヒーを奢る事ぐらいしか出来ません。

以上、よろしくお願い致します。

いきなりのドヤ顔、失礼致します。

「頭カラッポの方が、夢、詰め込める。」

この言葉は、先人が残した偉大な言葉として広く知られているそうですが、
僕も「2011年は光る雲を突き抜けFlyAwayしていきたい！」そう強く思い、新年を迎えたはずなのですが、なんというかプライベートの方で「やっぱり頭カラッポじゃダメじゃん。。」という、チャラヘッチャラでもへのへのカッパでもない事態になりまして、今もその頭を抱えていた次第です。

みなさまにおかれましても、いくら7つのボールを集めると願い事が叶うからといって安易に頭をカラッポになさらぬよう、十分ご注意下さいませ。

というわけで、今日からまた改めて2011年やっていきたいと思います。
本年もどうぞ宜しくお願い致します。