<?xml version="1.0" encoding="UTF-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
    <title>_level0</title>
    <link rel="alternate" type="text/html" href="http://level0.kayac.com/" />
    <link rel="self" type="application/atom+xml" href="http://level0.kayac.com/atom.xml" />
    <id>tag:level0.kayac.com,2011-01-12://1</id>
    <updated>2012-05-01T08:27:45Z</updated>
    <subtitle>KAYAC Intaractive Designer チームによるActionScript Flash イベント デザイン ニュースのブログ</subtitle>
    <generator uri="http://www.sixapart.com/movabletype/">Movable Type Commercial 4.261</generator>

<entry>
    <title>100KB以内でこんなのつくってみました!!</title>
    <link rel="alternate" type="text/html" href="http://level0.kayac.com/2012/04/100kb_recruit2.php" />
    <id>tag:level0.kayac.com,2012://1.3315</id>

    <published>2012-04-05T04:37:00Z</published>
    <updated>2012-05-01T08:27:45Z</updated>

    <summary>※4/30で募集終了しました（5/1追記） 現在募集中のFlashLiteクリエイター対象『100KB採用』！ 応募締切は4月30日(月・祝)までとなりました！！ まだまだ募集していますので、ご応募お...</summary>
    <author>
        <name>taichi</name>
        
    </author>
    
        <category term="MobileSocial" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="flashlite" label="FlashLite" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="en" xml:base="http://level0.kayac.com/">
        <![CDATA[<p>※4/30で募集終了しました（5/1追記）</p>

<p>現在募集中の<a href="http://level0.kayac.com/2012/03/100kb_recruit.php" target="_blank">FlashLiteクリエイター対象『100KB採用』</a>！<br />
<strong>応募締切は4月30日(月・祝)まで</strong>となりました！！<br />
まだまだ募集していますので、ご応募お待ちしています！</p>

<p>今回は、カヤックのソーシャルゲームチームで現在運営している<br />
『ぼくらの甲子園~熱闘編~』『武装合体ブレイブファクトリー』<br />
で制作した、FlashアニメーションTipsを紹介します！</p>]]>
        <![CDATA[<h4>【ぼくらの甲子園~熱闘編~】 : オープニングFlash</h4>

<p>このゲームは、ユーザー１人１人が高校球児となり<br />
４７都道府県の中から自分の入学する高校を選び、<br />
一緒の高校になった他のユーザーと共に甲子園を目指すのが目的なんですが、<br />
本当の野球と同様、ユーザーが９人集まらないと試合ができない！という<br />
異色のソーシャルゲームです。<br />
高校野球の練習・特訓と言った世界観を、<br />
ミニキャラクターを利用したアニメーションで表現しています。</p>

<p><iframe width="480" height="274" src="http://www.youtube.com/embed/psT9jTbqA9I" frameborder="0" allowfullscreen></iframe><br />
ゲーム導入部分で熱い世界観を感じて貰うべく制作。<br />
100KBという制限内で約80KBまで使ったFlashです。</p>

<p>長尺のムービーを画像やシンボルを極力抑えつつ、<br />
動きに容量を割いて制作しています。<br />
背景になる画像は端末で見て気にならない程度までぼかしを入れ、<br />
縦幅の伸縮で緩急のあるカメラワークを目指しました。<br />
クローズアップを使う事でキャラのわずかな動作でもダイナミック感が出せると思います。</p>

<h4>【ぼくらの甲子園~熱闘編~】 : 練習Flash</h4>
<iframe width="480" height="274" src="http://www.youtube.com/embed/1V146hKPlBQ" frameborder="0" allowfullscreen></iframe>

<p>こちらはメインページのHTMLで表示しているインラインFlash。<br />
ユーザーが選択する"コーチ"や"練習"の内容に合わせた演出を<br />
48パターン用意していますが、<br />
ページ全体の容量や読み込み速度を考えて<br />
どれも20KB以下になる様に制作しています。</p>

<p>20KB以下と言うレギュレーションで<br />
キャラクターをアニメーションさせる演出を実現するために、<br />
キャラクターを構成するパーツはアンカーポイントの少ないパス素材で用意し、<br />
共通化したシンボルにしています。</p>

<p><br />
<h4>【【武装合体ブレイブファクトリー 】 : ミッションFlash</h4><br />
<iframe width="480" height="274" src="http://www.youtube.com/embed/mINAc0TmEz0" frameborder="0" allowfullscreen></iframe><br />
<h4>【武装合体ブレイブファクトリー 】 : セッティングFlash</h4><br />
<iframe width="480" height="274" src="http://www.youtube.com/embed/iY3RAWZ1ZnI" frameborder="0" allowfullscreen></iframe></p>

<p>こちらも同じくmobage内で公開中の<br />
「武装合体ブレイブファクトリー」ゲーム内サンプル。</p>

<p>動画をご覧の通り、<br />
マシン画像・各種エフェクト・イベント演出・UIなど<br />
様々な要素が入ったFlashです。</p>

<p>そのパーツ組み合わせ数は1,000,000通りを数えるため、<br />
どんなパターンの装備状況でも<br />
絶対に100kを超えないようなレギュレーションで制作を行っています。</p>

<p>しかし、ただ軽くするだけではいけません。<br />
容量を維持しつつも、パーツのデザインや<br />
世界観に合った演出・エフェクトを作り、<br />
ユーザーに楽しく快適に遊んでもらうため、<br />
試行錯誤を繰り返す必要があります。</p>

<p><br />
今回の100KB採用のテーマ<br />
<strong>「見栄えを維持しながら中身は軽く、おもしろいコンテンツが作れる」</strong>スキルが<br />
なぜ重要視されているかが、この例で少しはお伝えできていると幸いです。</p>

<p>腕に覚えのある方、ご応募をお待ちしております！</p>

<p><br />
<big>「100KB採用」4/30(月)締切です！</big><br />
<big><a href="http://www.kayac.com/recruit/100kb/entry"><strong>申込フォームはコチラ！</strong></a> </big></p>]]>
    </content>
</entry>

<entry>
    <title>HTML5関連の情報源のまとめ（2012年4月版）</title>
    <link rel="alternate" type="text/html" href="http://level0.kayac.com/2012/04/html520124.php" />
    <id>tag:level0.kayac.com,2012://1.3314</id>

    <published>2012-04-02T07:00:33Z</published>
    <updated>2012-04-04T14:00:13Z</updated>

    <summary>こんにちわ。HTMLファイ部のふちがみです。 HTML5のすごいコンテンツやニュースをキャッチアップしきれない！知らないところでバズってる！と悔しい思いをしている方も多いと思います。そこで、ミーハーな...</summary>
    <author>
        <name>fuchigami</name>
        
    </author>
    
        <category term="misc" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="css" label="css" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="html5" label="html5" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="javascript" label="javascript" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="jsdoit" label="jsdo.it" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="en" xml:base="http://level0.kayac.com/">
        <![CDATA[<p>こんにちわ。HTMLファイ部のふちがみです。</p>

<p>HTML5のすごいコンテンツやニュースをキャッチアップしきれない！知らないところでバズってる！と悔しい思いをしている方も多いと思います。そこで、ミーハーなファイ部のメンバーに「どうやって情報収集をしているか」を聞いてみたのでまとめてみました。</p>

<h2>HTML5関連の情報源のまとめ（2012年4月版）</h2>

<h3>ソーシャルブックマーク</h3>

<ul>
<li><a href="http://b.hatena.ne.jp/keyword/HTML5">キーワード「HTML5」を含む新着エントリー - はてなブックマーク</a></li>
<li><a href="http://b.hatena.ne.jp/keyword/CSS">キーワード「CSS」を含む新着エントリー - はてなブックマーク</a></li>
<li><a href="http://b.hatena.ne.jp/keyword/javascript">キーワード「javascript」を含む新着エントリー - はてなブックマーク</a></li>
</ul>

<h3>コミュニティー</h3>
<ul>
<li><a href="https://groups.google.com/group/html5-developers-jp?hl=ja&pli=1">html5j.org | Google グループ</a></li>
</ul>

<h3>ニュースサイト</h3>
<ul>
<li><a href="http://dothtml5.com/">HTML5/CSS3の情報をクリップ！ :: dotHTML5</a>
<ul>
<li><a href="https://twitter.com/#!/dotHTML5">dotHTML5のtwitterもフォローしておくとGOOD</a></li>
</ul>
</li>
</ul>

<h3>ゲーム・ガジェット系</h3>
<ul>
<li><a href="http://www.kotaku.jp/">Kotaku JAPAN｜ザ・ゲーム情報ブログ・メディア</a></li>
<li><a href="http://japanese.engadget.com/">Engadget Japanese</a></li>
</ul>

<h3>ギャラリーサイト</h3>
<ul>
<li><a href="http://html5gallery.com/">HTML5 Gallery | A showcase of sites using HTML5 markup</a></li>
</ul>

<h3>ショウケース</h3>
<ul>
<li><a href="https://developer.mozilla.org/ja/demos/">Demo Studio | Mozilla Developer Network</a></li>
<li><a href="http://www.chromeexperiments.com/">Chrome Experiments - Home</a></li>
<li><a href="http://ie.microsoft.com/testdrive/">Internet Explorer 10 Test Drive</a></li>
<li><a href="http://www.apple.com/html5/">Apple - HTML5</a></li>
</ul>

<h3>イベント情報</h3>
<ul>
<li><a href="https://twitter.com/#!/cssnite">CSS Nite (cssnite)</a></li>
<li><a href="https://twitter.com/#!/search/%23html5j">html5とか勉強会</a></li>
</ul>

<h3>資料</h3>
<ul>
<li><a href="http://www.slideshare.net/search/slideshow?searchfrom=header&q=html5">"html5" on SlideShare</a></li>
<li><a href="http://www.slideshare.net/search/slideshow?searchfrom=header&q=CSS">"CSS" on SlideShare</a></li>
<li><a href="http://www.slideshare.net/search/slideshow?searchfrom=header&q=JavaScript">"JavaScript" on SlideShare</a></li>
</ul>

<h3>有名クリエイターのポートフォリオ</h3>
<ul>
<li><a href="http://mrdoob.com/">Mr.doob</a></li>
</ul>

<hr />

<h2>HTML5コンテスト開催中！</h2>

<p>最後にPRです。弊社が運営する<a href="http://jsdo.it/">HTML5, CSS, JavaScriptのソーシャルコーディングサービス jsdo.it</a> でコーディングコンテストを開催中です。</p>

<h3>どんなコンテスト？</h3>
<blockquote>
<p>世界のFlash図鑑 <a href="http://wonderfl.net/">wonderfl</a> に投稿された以下の二つのFlash作品をHTML5, CSS, JavaScriptを駆使してリメイクしてください。</p>
<cite><a href="http://jsdo.it/event/q/vol2">Web Creator's Contest Q - vol.2</a></cite>
</blockquote>

<p>Flashの作品をHTML5でリメイクをするコンテストです。課題のコードは<a href="http://jsdo.it/event/q/vol2">イベントページ</a>をご覧ください！</p>

<h3>賞品はあるの？</h3>

<p>jsdo.it史上、一番豪華な賞品を用意しました！3D BRABIA 40インチやPlaystation VITAなどなど！</p>

<h3>こんなコードがコンテストに投稿されています</h3>
<iframe scrolling="no" src="http://jsdo.it/blogparts/qLqi?view=design" width="465" height="546" style="border:1px #CCC solid; width: 465px; margin: 0px;"></iframe>
<p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/satosato/qLqi" title="散り舞うSAKURA">散り舞うSAKURA - jsdo.it - share JavaScript, HTML5 and CSS</a></p>

<p>皆様のご参加お待ちしています！</p>

<p><a href="http://jsdo.it/event/q"><img alt="banner1_4.jpg" src="http://level0.kayac.com/2012/04/02/banner1_4.jpg" width="728" height="90" class="mt-image-center" style="text-align: center; display: block;" alt="Web Creator's Contest Q" /></a></p>]]>
        
    </content>
</entry>

<entry>
    <title>「100KB採用」FlashLite1.1クリエイター募集。</title>
    <link rel="alternate" type="text/html" href="http://level0.kayac.com/2012/03/100kb_recruit.php" />
    <id>tag:level0.kayac.com,2012://1.3313</id>

    <published>2012-03-13T07:41:00Z</published>
    <updated>2012-05-01T01:30:41Z</updated>

    <summary>※4/30で募集終了しました（5/1追記） 「動く履歴書」を見せてください。 100KB以下の世界で、 工夫をこらして生きるクリエイターは、 未来でも生きていける。 カヤック閃光部は、そう思っています...</summary>
    <author>
        <name>kijima</name>
        
    </author>
    
        <category term="MobileSocial" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="flashlite" label="FlashLite" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="en" xml:base="http://level0.kayac.com/">
        <![CDATA[<p>※4/30で募集終了しました（5/1追記）</p>

<p><br />
<strong><big>「動く履歴書」を見せてください。</big></strong></p>

<p>100KB以下の世界で、<br />
工夫をこらして生きるクリエイターは、<br />
未来でも生きていける。<br />
カヤック閃光部は、そう思っています。</p>

<p>５年以上も前から、<br />
過去の技術と言われていたFlashLite1.1ですが、<br />
ソーシャルゲームブームが続く昨今、<br />
その技術は、まだまだ必要とされています。</p>

<p><strong>さまざまな制限の中で試行錯誤しつつ、<br />
サクサク動くアニメーションをつくる技術と、<br />
ユーザーを楽しませる効果的な演出。<br />
これは、すべての日本人が<br />
スマートフォンを持ったとしても、役に立つ。</strong></p>

<p>そのことを信じているカヤック閃光部は、<br />
FlashLite1.1クリエイターを募集します。</p>

<p><strong><big>携帯Flashコンテンツや、Flashアニメーションを<br />
つくったことのある方、カヤックで働きませんか。<br />
</big></strong><br />
閃光部の「閃」は、ひらめくという漢字です。<br />
カヤックのFlasherは、Flashやアプリを<br />
ただつくるのではなく、企画から考えます。</p>

<p><a href="http://www.kayac.com/service/sp/socialgame/">カヤックがつくっているゲームは、こちらからご覧ください。</a><br />
<a href="http://www.kayac.com/service/sp/socialgame/" >http://www.kayac.com/service/sp/socialgame/</a></p>

<p>チームワークを大切にしているソーシャルゲームチームで、<br />
チームワークを体験できるゲームをつくりましょう。</p>

<p><br />
<big>※4/30で募集を終了しました（5/1追記）</big></p>

<p><br />
閃光部の選考担当／來島政史</p>]]>
        
    </content>
</entry>

<entry>
    <title>初心者だけどドット絵描く楽な方法見つけた！気がする</title>
    <link rel="alternate" type="text/html" href="http://level0.kayac.com/2012/02/post_113.php" />
    <id>tag:level0.kayac.com,2012://1.3312</id>

    <published>2012-02-21T07:07:36Z</published>
    <updated>2012-02-23T02:14:42Z</updated>

    <summary>「モンスターを集めてまいれ！」というiPhoneアプリを プロデュースしたんですが、イラストレーターのタスクが多く ドット絵を自分で描く事になりました。 初ドット絵だったので このノウハウ共有に何の意...</summary>
    <author>
        <name>shimada</name>
        
    </author>
    
        <category term="iOS" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="ドット絵" label="ドット絵" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="モンスターを集めてまいれ！" label="モンスターを集めてまいれ！" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="en" xml:base="http://level0.kayac.com/">
        <![CDATA[<p>「<a href="http://itunes.apple.com/jp/app/monsutawo-jimetemaire/id491657299?mt=8">モンスターを集めてまいれ！</a>」というiPhoneアプリを<br />
プロデュースしたんですが、イラストレーターのタスクが多く<br />
ドット絵を自分で描く事になりました。</p>

<p>初ドット絵だったので<br />
このノウハウ共有に何の意味も無いかもしれませんが<br />
きっと何処かに需要はある！と、思い込んで記事を書いております。</p>

<p>使用ソフトはPhotoshopです。</p>

<p>余談ですが<br />
バイトのドット絵得意な子に聞いたところ「Photoshopはやめておいたほうがいい」<br />
との回答。</p>

<p>・・・・。</p>

<p>さあいってみよう！</p>

<p><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="m01.png" src="http://level0.kayac.com/shimada/m01.png" width="300" height="300" class="mt-image-none" style="" /></span><br />
まず下絵を準備<br />
自分、<a href="http://wanco.kayac.jp/pc/">ワンコ</a>しか描けないので<br />
イラストレーターにさらっと描いてもらいました</p>

<p><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="" src="http://level0.kayac.com/shimada/m03.png" width="300" height="300" class="mt-image-none" style="" /></span><br />
モンスター画像は最終的に150×150px で使用するんですが、<br />
ドット絵の荒さを出す為に50×50pxに縮めます。</p>

<p><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="m04.png" src="http://level0.kayac.com/shimada/m04.png" width="300" height="300" class="mt-image-none" style="" /></span><br />
輪郭の線をポチポチなぞっていきます。</p>

<p><br />
</p><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="m05.png" src="http://level0.kayac.com/shimada/m05.png" width="300" height="300" class="mt-image-none" style="" /></span><br />
レイヤーを分けて下地になる色を塗ります。<p></p>

<p><br />
ここで<br />
初心者の私はぽちぽちやるのに疲れ<br />
楽な方法は無いものか考えました。</p>

<p>そして<br />
ドット絵師達には邪道だと<br />
言われそうな方法を思いつきました。</p>

<p><br />
</p><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="m10.png" src="http://level0.kayac.com/shimada/m10.png" width="202" height="287" class="mt-image-none" style="" /></span><br />
利用するのはレイヤー効果のソフトライト
<p><br />
</p><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="m06.png" src="http://level0.kayac.com/shimada/m06.png" width="300" height="300" class="mt-image-none" style="" /></span><br />
ソフトライトに設定したレイヤーで影になる部分を黒で塗ります<br />
色を変える必要がないので楽ちんこ<p></p>

<p><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="m07.png" src="http://level0.kayac.com/shimada/m07.png" width="300" height="300" class="mt-image-none" style="" /></span><br />
レイヤー増やしてソフトライトでもう一回影をヌリヌリ</p>

<p><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="m08.png" src="http://level0.kayac.com/shimada/m08.png" width="300" height="300" class="mt-image-none" style="" /></span><br />
レイヤー増やして白でハイライトの部分をヌリヌリ</p>

<p><br />
</p><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="m09.png" src="http://level0.kayac.com/shimada/m09.png" width="300" height="300" class="mt-image-none" style="" /></span><br />
最後に仕上げをぽちぽち<p></p>

<p><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="m0101.png" src="http://level0.kayac.com/shimada/m0101.png" width="363" height="415" class="mt-image-none" style="" /></span><br />
で<br />
"ニアレストネイバー法！！"で150×150pxに拡大します。</p>

<p>"バイキュービック法！！！"だと<br />
拡大した時に余計なグラデーションがつくので注意です。</p>

<p><br />
</p><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="m11.png" src="http://level0.kayac.com/shimada/m11.png" width="640" height="173" class="mt-image-none" style="" /></span><br />
最後に登場モンスターチラ見せ！全部同じ手法で描いてます<p></p>

<p><a href="http://itunes.apple.com/jp/app/monsutawo-jimetemaire/id491657299?mt=8"><br />
<span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="appStore.png" src="http://level0.kayac.com/shimada/appStore.png" width="147" height="49" class="mt-image-none" style="" /></span><div><br /></div></a><br />
<strong>"モンスターを集めてまいれ!"では<br />
<a href="http://www.hogera.com/pcb/">5r4ce2</a>のぱんかれさんが作成した<br />
ファミコン風の"GD-DOTFONT-DQ"フォントを使用しています</strong></p>

<p>ぱんかれさん快諾していただいてありがとうございました！<br />
おかげさまでリリースする事ができました。<br />
フォントをダウンロードする時は<a href="http://www.hogera.com/pcb/font/catalog/">こちら</a>から<br />
この分かりやすい図を参考にどうぞ！<br />
<span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="dq_font.png" src="http://level0.kayac.com/shimada/dq_font.png" width="819" height="641" class="mt-image-none" style="" /></span><br />
</p>]]>
        
    </content>
</entry>

<entry>
    <title>お正月スペシャルコンテンツ「おHTML5」の裏側みせちゃいます #1</title>
    <link rel="alternate" type="text/html" href="http://level0.kayac.com/2012/01/ohtml5_1.php" />
    <id>tag:level0.kayac.com,2012://1.3310</id>

    <published>2012-01-20T14:30:00Z</published>
    <updated>2012-01-22T08:24:45Z</updated>

    <summary>みなさま、あけましておめでとうございます。@tsmallfieldです。 本年もこの_level0をよろしくお願いいたします！ さて、2012第一弾はお正月のスペシャルコンテンツ「おHTML5」！！ ...</summary>
    <author>
        <name>obara</name>
        
    </author>
    
        <category term="misc" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="javascript" label="JavaScript" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="en" xml:base="http://level0.kayac.com/">
        <![CDATA[<p>みなさま、あけましておめでとうございます。<a href="http://twitter.com/tsmallfield" target="_blank">@tsmallfield</a>です。<br />
本年もこの_level0をよろしくお願いいたします！</p>
<p>
さて、2012第一弾はお正月のスペシャルコンテンツ「<a href="http://ohtml5.kayac.com/" target="_blank">おHTML5</a>」！！<br />
制作にあたっての技術的な裏話をご紹介します。
</p>

<hr />

<h2>おHTML5</h2>

<span class="mt-enclosure mt-enclosure-image" style="display: inline;"><a href="http://ohtml5.kayac.com/" target="_blank"><img alt="ohtml5_img_1.jpg" src="http://level0.kayac.com/entryimages/obara/ohtml5_img_1.jpg" width="320" height="423" class="mt-image-none" style="" /></a></span>

<p>
「おHTML5」はブラウザの様々な機能を利用した、くすっと笑える遊び心120%のスペシャルサイト。<br />
&lt;select&gt;や&lt;input&gt;といったいつも見慣れた部品であんなことやこんなことまで！！<br />
<br />
まだ未チェックの方は今すぐこちらのURLへ！<br />
<a href="http://ohtml5.kayac.com/" target="_blank">http://ohtml5.kayac.com/</a>
</p>]]>
        <![CDATA[<h3>実装体制</h3>
<p>フロントの実装は私と<a href="http://www.kayac.com/team/itani-hiroki" target="_blank">イタニティー</a>の2人で行い、主にフレームワークを作成する側とそれを使用する側という役割分担としました。</p>

<h3>専用ライブラリ barbie.js</h3>
<p>
今回は実験的コンテンツということで、jQueryといったフリーのライブラリを一切使用していません。
</p>
<p>
「えっ、ライブラリなしとか絶対無理。。。。」と思ったそこのあなた！！
安心してください。
</p>
<p>
なぜなら本サイトの対象ブラウザはChromeのみ！<br />
querySelector()やclassListといった、今まで使いたくても使えなかった便利で魅力的な新機能を思う存分使えるのです。
</p>
<p>
今回「おHTML5」のため作成した専用ライブラリがその名も"barbie.js"！<br />
JSの読み込み機能からウィンドウのアニメーション制御までを可能にする即席ライブラリです。<br />
ちなみにバービー(barbie)とは担当ディレクター<a href="http://www.kayac.com/team/murakami-mamiko" target="_blank">ばびこ</a>の愛称。<br />
こういう遊び心、大事ですよね！
</p>



<h3>ポップアップウィンドウの制御</h3>

<span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="ohtml5_img_2.jpg" src="http://level0.kayac.com/entryimages/obara/ohtml5_img_2.jpg" width="480" height="235" class="mt-image-none" style="" /></span>

<p>ではさっそく技術的な話題に入りましょう。</p>

<p>
今回のテーマの一つが、ポップアップウィンドウの制御。<br />
window.open();で生成したウィンドウの座標、位置をアニメーションで変更したり、<br />
複数のウィンドウ間の連携機能を実装する必要があります。<br />
これらの機能は「初夢の窓」や「スクロールやぶさめ」、「ブラウザ凧揚げ」でガッツリ使われています。<br />
</p>

<h3>AnimatablePopup</h3>

<p>
"AnimatablePopup"はウィンドウオブジェクトをラップするクラス。<br />
座標／位置のアニメーション機能、ウィンドウ間の通信機能を備えています。</p>

<p>クラスの使用方法は普段通り。<br />
new 演算子を用いてインスタンスを生成します。
</p>

<pre>
var popup = new AnimatablePopup("hoge.html");
</pre>

<p>（それにしてもセンスのない名前。。。）</p>

<hr />

<p>第二引数で様々なオプションも指定できます。</p>

<pre>
var popup = new AnimatablePopup("hoge.html", {
    innerWidth  : 200,
    innerHeight : 300,
    x           : 0,
    y           : 0,
    reuse       : true
});
</pre>

<h3>座標、サイズのアニメーション</h3>

<p>任意の位置(x, y)にアニメーションしながら移動するには以下のように指定します。</p>

<pre>
popup.moveAnimTo(x, y);
</pre>


<p>簡単ですね。</p>

<p>
内部の実装はタイマーで定期的に座標を変更するという昔ながらの方法です。<br />
なお、パフォーマンスを考慮し、一つのタイマーを全インスタンスで共有するようにしています。
</p>

<h3>イージングの指定</h3>

<p>第2引数でイージングの種類も指定できます。</p>

<pre>
popup.moveAnimTo(x, y, TransitionType.EASE_OUT);
</pre>

<p>イージングのタイプは以下の4種類。</p>

<pre>
TransitionType.LINEAR;
TransitionType.EASE_IN;
TransitionType.EASE_OUT;
TransitionType.EASE_IN_OUT;
</pre>

<p>これらの中身はただの関数です。</p>
<p>
いずれも指定された長さの、0から始まり1で終わる配列を生成し返します。<br />
もし他の動きを望む場合はイージング関数を自前で用意しても良いでしょう。
</p>

<pre>
popup.moveAnimTo(x, y, myEasingFunction);

function myEasingFunction(len) {
    // your code goes here;
}
</pre>

<p>参考までにTransitionType.LINEARの実装は以下のようになっています。</p>

<pre>
/**
 *  @param  {uint} n
 *  @return {Array.&lt;Number&gt;}
 */
function LINEAR(n) {
    var i   = 0,
        x   = 0,
        dx  = 1 / n,
        ret = [];
    
    for (; i &lt; n; ++i) {
        ret[i] = x;
        x += dx;
    }
    ret[n - 1] = 1;
    
    return ret;
}
</pre>



<h3>アニメーション時間の指定</h3>

<p>アニメーションにかかる時間を[ms]で指定できます。</p>

<pre>
popup.moveAnimTo(x, y, TransitionType.EASE_OUT, 3000);
</pre>



<h3>リピート＆逆再生</h3>

<span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="ohtml5_img_3.jpg" src="http://level0.kayac.com/entryimages/obara/ohtml5_img_3.jpg" width="480" height="267" class="mt-image-none" style="" /></span>

<p>「スクロールやぶさめ」では弓のウィンドウを左右に繰り返し動かす必要があったため、<br />
第5引数でリピート指定ができるようにしました。</p>

<pre>
popup.moveAnimTo(x, y, TransitionType.EASE_OUT, 3000, TransitionOption.REPEAT);
</pre>

<p>
だんだん引数が増えてきましたね。。。<br />
そろそろ破たんしそうです。
</p>

<p>ではアニメーション後、逆再生したい場合は。。。</p>

<pre>
popup.moveAnimTo(
    x,
    y,
    TransitionType.EASE_OUT,
    3000,
    TransitionOption.REPEAT | TransitionOption.AUTO_REVERSE
);
</pre>

<p>さすがにこれ以上引数が増えると怒られそうなので OR で指定するようにしてみました。<br />
（これは最近Objective-Cをさわりはじめた影響です。。。）</p>

<p>参考までに、TransitionOptionの定義部分は以下のようになっています。</p>

<pre>
var TransitionOption = {
    REPEAT       : 1 &lt;&lt; 0,
    AUTO_REVERSE : 1 &lt;&lt; 1,
    .
    .
    .
};
</pre>

<p>取り出す場合は&gt;&gt;(右シフト)して&amp;1すればOKですね。</p>

<p>オプションの指定方法に関しては、今考えると以下のようにした方がよかったかも。。。</p>

<pre>
var options = new AnimationOptions;

options.repeat      = true;
options.autoReverse = true;
options.duration    = 3000;
options.easing      = TransitionType.EASE_OUT;

popup.moveAnimTo(x, y, options);
</pre>

<p>もしくは。。。</p>

<pre>
popup.moveAnimTo(x, y, {
    repeat      : true,
    autoReverse : true,
    duration    : 3000,
    easing      : TransitionType.EASE_OUT
});
</pre>

<p>
中～大規模案件ではこの辺の設計が重要になってきます。<br />
あとで困らないように、きちんと設計しましょう。
</p>

<h3>最後に</h3>

<p>さて、今回の記事いかがでしたでしょうか？<br />
次回はカスタムイベント周りについて解説したいと思います。</p>

]]>
    </content>
</entry>

<entry>
    <title>Support PackageとMapView</title>
    <link rel="alternate" type="text/html" href="http://level0.kayac.com/2011/12/mapview_and_support_package.php" />
    <id>tag:level0.kayac.com,2011://1.3308</id>

    <published>2011-12-16T02:30:00Z</published>
    <updated>2011-12-18T01:56:24Z</updated>

    <summary>この記事は「Android Advent Calendar 2011 」の裏エントリとして書いています。 ...</summary>
    <author>
        <name>taro</name>
        
    </author>
    
        <category term="Android" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="android" label="android" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="fragment" label="fragment" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="supportpackage" label="support-package" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="en" xml:base="http://level0.kayac.com/">
        <![CDATA[<p>この記事は「<a href="http://androidadvent.blogspot.com/2011/11/android-advent-calendar-2011_21.html">Android Advent Calendar 2011</a> 」の裏エントリとして書いています。
</p>
]]>
        <![CDATA[<style type="text/css">
#entryBody .entryBodyInner pre {
    line-height: 200%;
    padding: 0 3em;
}
pre.uwvm_code {
    background-color: #fff;
    border-radius: 1em;
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
}
.uwvm_logcat {
    overflow: scroll;
    color: red;
    white-space: nowrap;
}

</style>


<p>16日の表のエントリは<a href="https://twitter.com/intent/user?screen_name=RKisato">@RKisato</a>さんです。前の日の記事は<a href="https://twitter.com/intent/user?screen_name=LuckOfWise">@LuckOfWise</a>さんによる「<a href="http://www.luckofwise.com/archives/2011/12/1148/?title=%E3%81%8D%E3%81%A3%E3%81%A8%E3%81%8A%E9%87%91%E3%81%8C%E6%AC%B2%E3%81%97%E3%81%8F%E3%81%A6Android%E3%82%92%E5%A7%8B%E3%82%81%E3%81%9F%E5%83%95%E3%81%9F%E3%81%A1%E3%81%B8">きっとお金が欲しくてAndroidを始めた僕たちへ | LuckOfWise.com</a>」です。
</p>
<p>こんにちは、<a href="https://twitter.com/intent/user?screen_name=9re">@9re</a>です。Androidアプリ開発に携わってそろそろやっと1年です。恐縮ですが、ごく普通のAndroidアプリ開発に関する記事を書きます。
</p>
<h2>Support Package</h2>
<p>というと、ご存知の通り、Android 4.0用のコード等をそれらよりもっと前のAndroid 1.6とかでも使えるようにという素敵プロジェクトです。個人の感想を言うと、当初の設計ミスや使い辛さを半ば認めているようなプロジェクトだとも思います。という意味では新規プロジェクトなんかにはかなりオススメしたいライブラリではあると思っています。・・・が
</p>
<h2>サンプル・コードがそもそも動かない</h2>
<p>まず、1.6で動かないのはわりと仕方ないし、これから導入する方にとってはあまり関係ないかも知れませんが、2.2でもサンプルコードが動かないので導入を躊躇ってしまわれた方もいるかもしれません。quick &amp; dirty fixではありますが、<a href="https://github.com/9re/android-support4-demo-for-android-1.6">1.6でも動くサンプル作っておきましたので是非</a>。
</p>
<h2>MapViewをSupport PackageのFragment内で使うには？</h2>
<p>ということでやっと本題に入りました。これはアチラこちらで質問がされていてFAQだと思います。android.support.v4.app.FragmentManagerという android.app.FragmentManager相当のクラスがあるのですが、これを使うには、FragmentActivityを継承する必要があります。
</p>
<p>一方MapViewを利用するにはMapActivityを継承する必要があります。そうです。よくある多重継承の問題です。
</p>
<h2>多重継承</h2>
<p>個人的には必要は感じませんが、やはり困ったとき(フレームワークに設計を強制される時)の最終手段があるというのはいいですね。</p>
<p>このケースでは、FragmentActivityとMapActivityのうちFragmentActivityはオープンソースですので、そちらに手を入れます。</p>
<p>一つの方法は、単純にFragmentActivityのsuper classをMapActivityにすることです。これは、<a href="https://github.com/petedoyle/android-support-v4-googlemaps">android-support-v4-googlemaps</a>というプロジェクトでの方針です。diffが少ない分メンテしやすいし、安全だと思います。しかし一方で、FragmentActivityまでもがMapActivityの制約を受けることになってしまいます。</p>
<h2>MapActivityの制約</h2>
<p><a href="http://code.google.com/android/add-ons/google-apis/reference/com/google/android/maps/MapActivity.html">documented にあるように</a></p>
<p><center>MapActivityはプロセスにつき1つしか作れない</center></p>
<p>これを無視すると、予期せぬことが起きるらしいです。少なくとも次のようなエラーメッセージが出ている人は、うっかりこの制約を冒してしまっているように思います。</p>
<div class="uwvm_logcat" style="height:200px;"><tt>
E/ActivityThread( 1543): Activity com.example.android.apis.view.MapViewDemo has leaked IntentReceiver com.google.android.maps.NetworkConnectivityListener$ConnectivityBroadcastReceiver@333aa670 that was originally registered here. Are you missing a call to unregisterReceiver()?<br/>
E/ActivityThread( 1543): android.app.IntentReceiverLeaked: Activity com.example.android.apis.view.MapViewDemo has leaked IntentReceiver com.google.android.maps.NetworkConnectivityListener$ConnectivityBroadcastReceiver@333aa670 that was originally registered here. Are you missing a call to unregisterReceiver()?<br/>
E/ActivityThread( 1543):  at android.app.ActivityThread$PackageInfo$ReceiverDispatcher.<init>(ActivityThread.java:953)<br/>
E/ActivityThread( 1543):  at android.app.ActivityThread$PackageInfo.getReceiverDispatcher(ActivityThread.java:748)<br/>
E/ActivityThread( 1543):  at android.app.ContextImpl.registerReceiverInternal(ContextImpl.java:791)<br/>
E/ActivityThread( 1543):  at android.app.ContextImpl.registerReceiver(ContextImpl.java:778)<br/>
E/ActivityThread( 1543):  at android.app.ContextImpl.registerReceiver(ContextImpl.java:772)<br/>
E/ActivityThread( 1543):  at android.content.ContextWrapper.registerReceiver(ContextWrapper.java:318)<br/>
E/ActivityThread( 1543):  at com.google.android.maps.NetworkConnectivityListener.startListening(MapActivity.java:163)<br/>
E/ActivityThread( 1543):  at com.google.android.maps.MapActivity.onResume(MapActivity.java:431)<br/>
E/ActivityThread( 1543):  at android.app.Instrumentation.callActivityOnResume(Instrumentation.java:1149)<br/>
E/ActivityThread( 1543):  at android.app.Activity.performResume(Activity.java:3823)<br/>
E/ActivityThread( 1543):  at android.app.ActivityThread.performResumeActivity(ActivityThread.java:3211)<br/>
E/ActivityThread( 1543):  at android.app.ActivityThread.handleResumeActivity(ActivityThread.java:3236)<br/>
E/ActivityThread( 1543):  at android.app.ActivityThread$H.handleMessage(ActivityThread.java:2093)<br/>
E/ActivityThread( 1543):  at android.os.Handler.dispatchMessage(Handler.java:99)<br/>
E/ActivityThread( 1543):  at android.os.Looper.loop(Looper.java:123)<br/>
E/ActivityThread( 1543):  at android.app.ActivityThread.main(ActivityThread.java:4735)<br/>
E/ActivityThread( 1543):  at java.lang.reflect.Method.invokeNative(Native Method)<br/>
E/ActivityThread( 1543):  at java.lang.reflect.Method.invoke(Method.java:521)<br/>
E/ActivityThread( 1543):  at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:867)<br/>
E/ActivityThread( 1543):  at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:625)<br/>
E/ActivityThread( 1543):  at dalvik.system.NativeStart.main(Native Method)</tt>
</div>
<p>この部分はオープンソースではないため詳細は分かりませんが、「ドキュメントにやってはいけない」と明記されていることをするのは、あまり得策ではないでしょう。</p>
<p>この場合でも、Activityが一つしか存在しない作りであれば、全く問題はないと思います。</p>
<p>しかし、既存のプロジェクトからの移行等そのようなことができない場合はmixin風のクラスを書くというような解決策になってくると思います。</p>
<br />
<h2>mixinで書きなおしてみた</h2>
<p>
  取り敢えず、forkしてブランチ作っておきました。<a href="https://github.com/9re/android-support-v4-googlemaps">experimental-fragment-activity-feature-impl</a>
</p>
<h2>実装にあたっての指針</h2>
<p>
  まず、本家のFragmentActivityで定義されているメソッドを2つに分けます。Activityのメソッドを上書きしているものと、独自のメソッドです。特に独自のメソッド群は新しくFragmentActivityFeatureとしてインターフェイスを定義します。また、ライブラリ内で直接アクセスされているフィールドのgetterやsetterもこれに加えます。</p>
<pre class="uwvm_code">
<!-- Generator: GNU source-highlight 3.1.5
by Lorenzo Bettini
http://www.lorenzobettini.it
http://www.gnu.org/software/src-highlite -->
<tt><i><font color="#c90017">/***</font></i>
<i><font color="#c90017"> * FragmentActivity独自のメソッド</font></i>
<i><font color="#c90017"> ***/</font></i>
<b><font color="#0600bc">Object</font></b><font color="#000000"> </font><font color="#222222">onRetainCustomNonConfigurationInstance</font><font color="#b700b7">();</font>
<b><font color="#0600bc">Object</font></b><font color="#000000"> </font><font color="#222222">getLastCustomNonConfigurationInstance</font><font color="#b700b7">();</font>
<b><font color="#0600bc">void</font></b><font color="#000000"> </font><font color="#222222">supportInvalidateOptionsMenu</font><font color="#b700b7">();</font>
<b><font color="#0600bc">void</font></b><font color="#000000"> </font><font color="#222222">onAttachFragment</font><font color="#b700b7">(</font><b><font color="#0600bc">Fragment</font></b><font color="#000000"> fragment</font><font color="#b700b7">);</font>
<b><font color="#0600bc">FragmentManager</font></b><font color="#000000"> </font><font color="#222222">getSupportFragmentManager</font><font color="#b700b7">();</font>
<b><font color="#0600bc">void</font></b><font color="#000000"> </font><font color="#222222">startActivityFromFragment</font><font color="#b700b7">(</font><b><font color="#0600bc">Fragment</font></b><font color="#000000"> fragment</font><font color="#b700b7">,</font><font color="#000000"> </font><b><font color="#0600bc">Intent</font></b><font color="#000000"> intent</font><font color="#b700b7">,</font><font color="#000000"> </font><b><font color="#0600bc">int</font></b><font color="#000000"> requestCode</font><font color="#b700b7">);</font>
<b><font color="#0600bc">void</font></b><font color="#000000"> </font><font color="#222222">invalidateSupportFragmentIndex</font><font color="#b700b7">(</font><b><font color="#0600bc">int</font></b><font color="#000000"> index</font><font color="#b700b7">);</font>
<b><font color="#0600bc">LoaderManager</font></b><font color="#000000"> </font><font color="#222222">getSupportLoaderManager</font><font color="#b700b7">();</font>
<b><font color="#0600bc">LoaderManagerImpl</font></b><font color="#000000"> </font><font color="#222222">getLoaderManager</font><font color="#b700b7">(</font><b><font color="#0600bc">int</font></b><font color="#000000"> index</font><font color="#b700b7">,</font><font color="#000000"> </font><b><font color="#0600bc">boolean</font></b><font color="#000000"> started</font><font color="#b700b7">,</font><font color="#000000"> </font><b><font color="#0600bc">boolean</font></b><font color="#000000"> create</font><font color="#b700b7">);</font>

<i><font color="#c90017">/*** </font></i>
<i><font color="#c90017"> * ライブラリ内でアクセスされているフィールド用のgetter</font></i>
<i><font color="#c90017"> ***/</font></i>
<b><font color="#0600bc">FragmentManagerImpl&lt;?&gt;</font></b><font color="#000000"> </font><font color="#222222">getFragmentManagerImpl</font><font color="#b700b7">();</font>
<b><font color="#0600bc">boolean</font></b><font color="#000000"> </font><font color="#222222">isRetaining</font><font color="#b700b7">();</font>
<b><font color="#0600bc">Handler</font></b><font color="#000000"> </font><font color="#222222">getHandler</font><font color="#b700b7">();</font>
</tt>
</pre>
<p>あとは、FragmentActivityとして定義されている変数を新しいインターフェイスの型FragmentActivityFeatureとして定義し直します。一部Activityとしての性質を要求されている箇所では取り敢えず、&lt;FragmentActivityImpl extends Activity &amp; FragmentActivityFeature&gt;というパラメータ付きの型として定義します。
</p>
<p>
  しかしながら、これではFragmentクラスようなパブリックなクラスまでもがパラメータ付きのクラスになってしまいます。これではもはや、android.app.Fragmentと同じようには使うことが出来ません。
</p>
<pre class="uwvm_code">
<!-- Generator: GNU source-highlight 3.1.5
by Lorenzo Bettini
http://www.lorenzobettini.it
http://www.gnu.org/software/src-highlite -->
<tt><b><font color="#0600bc">Fragment&lt;?&gt;</font></b><font color="#000000"> fragment </font><font color="#b700b7">=</font><font color="#000000"> </font><b><font color="#ff006a">new</font></b><font color="#000000"> Fragment</font><font color="#b700b7">&lt;?&gt;();</font>
</tt>
</pre>
<p>勿論ここでraw typeを使うことも可能ですが、コンパイラにも怒られてしまいますし、あまり気持ちの良い物ではありません。
</p>
<p>そこで&lt;FragmentActivityImpl extends Activity &amp; FragmentActivityFeature&gt;として定義していたフィールドmActivityをただのActivityとして定義しなおしました。そしてこのフィールドをprivateにし、setterのシグネチャを以下のように定義することで、このフィールドに対する代入の型チェックを行うことにしました。
</p>
<pre class="uwvm_code">
<!-- Generator: GNU source-highlight 3.1.5
by Lorenzo Bettini
http://www.lorenzobettini.it
http://www.gnu.org/software/src-highlite -->
<tt><font color="#b700b7">&lt;</font><font color="#000000">FragmentActivityImpl </font><b><font color="#0600bc">extends</font></b><font color="#000000"> Activity </font><font color="#b700b7">&amp;</font><font color="#000000"> FragmentActivityFeature</font><font color="#b700b7">&gt;</font>
<b><font color="#0600bc">void</font></b><font color="#000000"> </font><font color="#222222">setActivity</font><font color="#b700b7">(</font><b><font color="#0600bc">FragmentActivityImpl</font></b><font color="#000000"> activity</font><font color="#b700b7">)</font><font color="#000000"> </font><font color="#772121">{</font>
<font color="#000000">    mActivity </font><font color="#b700b7">=</font><font color="#000000"> activity</font><font color="#b700b7">;</font>
<font color="#772121">}</font>
</tt>
</pre>
<p>
  なので、このフィールドに対して
</p>
<pre class="uwvm_code">
<!-- Generator: GNU source-highlight 3.1.5
by Lorenzo Bettini
http://www.lorenzobettini.it
http://www.gnu.org/software/src-highlite -->
<tt><font color="#b700b7">((</font><font color="#000000">FragmentActivityFeature</font><font color="#b700b7">)</font><font color="#000000">mActivity</font><font color="#b700b7">).</font><font color="#222222">getSupportLoaderManager</font><font color="#b700b7">();</font>
</tt>
</pre>
<p>
  というキャストは安全です。
</p>
<h2>JDK 6のバグ</h2>
<p>
  このフィールドのgetterを以下のように定義しました。
</p>
<pre class="uwvm_code">
<!-- Generator: GNU source-highlight 3.1.5
by Lorenzo Bettini
http://www.lorenzobettini.it
http://www.gnu.org/software/src-highlite -->
<tt><font color="#000000">@</font><font color="#222222">SuppressWarnings</font><font color="#b700b7">(</font><font color="#d13e00">"unchecked"</font><font color="#b700b7">)</font>
<b><font color="#ff006a">final</font></b><font color="#000000"> </font><b><font color="#ff006a">public</font></b><font color="#000000"> </font><font color="#b700b7">&lt;</font><font color="#000000">FragmentActivityImpl </font><b><font color="#0600bc">extends</font></b><font color="#000000"> Activity </font><font color="#b700b7">&amp;</font><font color="#000000"> FragmentActivityFeature</font><font color="#b700b7">&gt;</font>
<b><font color="#0600bc">FragmentActivityImpl</font></b><font color="#000000"> </font><font color="#222222">getActivity</font><font color="#b700b7">()</font><font color="#000000"> </font><font color="#772121">{</font>
<font color="#000000">    </font><b><font color="#ff006a">return</font></b><font color="#000000"> </font><font color="#b700b7">(</font><font color="#000000">FragmentActivityImpl</font><font color="#b700b7">)</font><font color="#000000"> mActivity</font><font color="#b700b7">;</font>
<font color="#772121">}</font>
</tt>
</pre>
<p>
  しかし、<a href="https://bugs.eclipse.org/bugs/show_bug.cgi?id=98379">ここに書かれている</a>通り、このコードはeclipseのコンパイラではコンパイルが通りますが、JDK 6の古いバージョンではコンパイルが通りません。
</p>
<p>また、JDK 7ではこのコードは問題なくコンパイルすることが出来ます。ということでバグなのではないか？というように思っています。
</p>
<p>ということで<a href="https://github.com/9re/android-support-v4-googlemaps/blob/experimental-fragment-activity-feature-impl-r6/for-jdk-6.patch">jdk6用のパッチ</a>も書きました。単純にActivityを返します。</p>
<pre class="uwvm_code">
<!-- Generator: GNU source-highlight 3.1.5
by Lorenzo Bettini
http://www.lorenzobettini.it
http://www.gnu.org/software/src-highlite -->
<tt><b><font color="#0600bc">Activity</font></b><font color="#000000"> </font><font color="#222222">getActivity</font><font color="#b700b7">()</font><font color="#000000"> </font><font color="#772121">{</font>
<font color="#000000">    </font><b><font color="#ff006a">return</font></b><font color="#000000"> mActivity</font><font color="#b700b7">;</font>
<font color="#772121">}</font>
</tt>
</pre>
<p>FragmentActivityFeatureの機能を使いたい場合は、内部で行なっているのと同様の
</p>
<pre class="uwvm_code">
<!-- Generator: GNU source-highlight 3.1.5
by Lorenzo Bettini
http://www.lorenzobettini.it
http://www.gnu.org/software/src-highlite -->
<tt><font color="#b700b7">((</font><font color="#000000">FragmentActivityFeature</font><font color="#b700b7">)</font><font color="#222222">getActivity</font><font color="#b700b7">()).</font><font color="#222222">getSupportLoaderManager</font><font color="#b700b7">();</font>
</tt>
</pre>
<p>というキャストを行います。</p>
<p>勿論、パッチを当てたバージョンをdefaultとして、パラメータ付きの型を返す方をパッチとするべき、という批判があるかもしれません。</p>
<br />
<h2>困りがちな事例を幾つか</h2>
<h3>MapActivityにはMapViewは一つしか作れない</h3>
<p>
  FragmentのonCreateViewでMapViewを生成するとこの制約にかかってしまいます。ActivityのonCreateで生成し、mMapViewのようなフィールドとしてインスタンスの参照を保持し、Fragment側で利用する際には、
</p>
<pre class="uwvm_code">
<!-- Generator: GNU source-highlight 3.1.5
by Lorenzo Bettini
http://www.lorenzobettini.it
http://www.gnu.org/software/src-highlite -->
<tt><b><font color="#0600bc">MyMapActivity</font></b><font color="#000000"> activity </font><font color="#b700b7">=</font><font color="#000000"> </font><font color="#b700b7">(</font><font color="#000000">MyMapActivity</font><font color="#b700b7">)</font><font color="#000000"> </font><font color="#222222">getActivity</font><font color="#b700b7">();</font>
<b><font color="#0600bc">MapView</font></b><font color="#000000"> mapView </font><font color="#b700b7">=</font><font color="#000000"> activity</font><font color="#b700b7">.</font><font color="#222222">getMapView</font><font color="#b700b7">();</font>
</tt>
</pre>
<p>のようなgetterを通してインスタンスを利用すると良いでしょう。
</p>
<h3>ViewPagerの中でMapViewのスクロールが出来ない</h3>
<p>ViewPagerは子要素のTouchEventsを<a href="http://developer.android.com/reference/android/view/ViewGroup.html#onInterceptTouchEvent(android.view.MotionEvent)">ViewGroup.onInterceptTouchEvent</a>をoverrideすることで、子要素から奪っています。この挙動を変えるにはこのメソッドを上書きしてください。
</p>
<pre class="uwvm_code">
<!-- Generator: GNU source-highlight 3.1.5
by Lorenzo Bettini
http://www.lorenzobettini.it
http://www.gnu.org/software/src-highlite -->
<tt><font color="#000000">@Override</font>
<b><font color="#ff006a">public</font></b><font color="#000000"> </font><b><font color="#0600bc">boolean</font></b><font color="#000000"> </font><font color="#222222">onInterceptTouchEvent</font><font color="#b700b7">(</font><b><font color="#0600bc">MotionEvent</font></b><font color="#000000"> event</font><font color="#b700b7">)</font><font color="#000000"> </font><font color="#772121">{</font>
<font color="#000000">    </font><b><font color="#ff006a">if</font></b><font color="#000000"> </font><font color="#b700b7">(</font><font color="#222222">shouldDispatchTouchEventsToTheMapView</font><font color="#b700b7">())</font><font color="#000000"> </font><font color="#772121">{</font>
<font color="#000000">        </font><i><font color="#c90017">// 子要素にイベントを送りたい！</font></i>
<font color="#000000">        </font><b><font color="#ff006a">return</font></b><font color="#000000"> </font><b><font color="#ff006a">false</font></b><font color="#b700b7">;</font>
<font color="#000000">    </font><font color="#772121">}</font>
<font color="#000000">    </font><b><font color="#ff006a">return</font></b><font color="#000000"> </font><b><font color="#ff006a">super</font></b><font color="#b700b7">.</font><font color="#222222">onInterceptTouchEvent</font><font color="#b700b7">(</font><font color="#000000">event</font><font color="#b700b7">);</font>
<font color="#772121">}</font>
</tt>
</pre>
<h3>ListFragmentのちょっとしたハマり所</h3>
<p>
以下のようなコードは、エラー等は一切起きませんが、その後このFragmentの挙動がおかしくなる可能性があります。
</p>
<pre class="uwvm_code">
<!-- Generator: GNU source-highlight 3.1.5
by Lorenzo Bettini
http://www.lorenzobettini.it
http://www.gnu.org/software/src-highlite -->
<tt><font color="#000000">@Override</font>
<b><font color="#ff006a">public</font></b><font color="#000000"> </font><b><font color="#0600bc">void</font></b><font color="#000000"> </font><font color="#222222">onDestroyView</font><font color="#b700b7">()</font><font color="#000000"> </font><font color="#772121">{</font>
<font color="#000000">    </font><b><font color="#ff006a">super</font></b><font color="#b700b7">.</font><font color="#222222">onDestroyView</font><font color="#b700b7">();</font>

<font color="#000000">    </font><b><font color="#ff006a">if</font></b><font color="#000000"> </font><font color="#b700b7">(</font><font color="#222222">getView</font><font color="#b700b7">()</font><font color="#000000"> </font><font color="#b700b7">!=</font><font color="#000000"> </font><b><font color="#ff006a">null</font></b><font color="#b700b7">)</font><font color="#000000"> </font><font color="#772121">{</font>
<font color="#000000">        </font><i><font color="#c90017">// 何か終了処理のようなもの</font></i>
<font color="#000000">        </font><font color="#222222">getListView</font><font color="#b700b7">().</font><font color="#222222">setOnScrollListener</font><font color="#b700b7">(</font><b><font color="#ff006a">null</font></b><font color="#b700b7">);</font>
<font color="#000000">    </font><font color="#772121">}</font>
<font color="#772121">}</font>
</tt>
</pre>
<p>
  以下のようにメソッドの呼び出し順序をかえてください。
</p>
<pre class="uwvm_code">
<!-- Generator: GNU source-highlight 3.1.5
by Lorenzo Bettini
http://www.lorenzobettini.it
http://www.gnu.org/software/src-highlite -->
<tt><font color="#000000">@Override</font>
<b><font color="#ff006a">public</font></b><font color="#000000"> </font><b><font color="#0600bc">void</font></b><font color="#000000"> </font><font color="#222222">onDestroyView</font><font color="#b700b7">()</font><font color="#000000"> </font><font color="#772121">{</font>
<font color="#000000">    </font><b><font color="#ff006a">if</font></b><font color="#000000"> </font><font color="#b700b7">(</font><font color="#222222">getView</font><font color="#b700b7">()</font><font color="#000000"> </font><font color="#b700b7">!=</font><font color="#000000"> </font><b><font color="#ff006a">null</font></b><font color="#b700b7">)</font><font color="#000000"> </font><font color="#772121">{</font>
<font color="#000000">        </font><i><font color="#c90017">// 何か終了処理のようなもの</font></i>
<font color="#000000">        </font><font color="#222222">getListView</font><font color="#b700b7">().</font><font color="#222222">setOnScrollListener</font><font color="#b700b7">(</font><b><font color="#ff006a">null</font></b><font color="#b700b7">);</font>
<font color="#000000">    </font><font color="#772121">}</font>

<font color="#000000">    </font><b><font color="#ff006a">super</font></b><font color="#b700b7">.</font><font color="#222222">onDestroyView</font><font color="#b700b7">();</font>
<font color="#772121">}</font>
</tt>
</pre>
<p>これはsuper.onDestroyView()を呼んだ後に、getListView()を呼んでしまうと、内部のフィールドmListがonDestroyViewの後は本来はnullとなっている筈であるのに対し、getListView()を呼ぶことで、mListが古いListViewの参照を持つこととなってしまいます。結果再びonCreateView()が呼ばれても内部変数は、ensureList()の
</p>
<pre class="uwvm_code">
<!-- Generator: GNU source-highlight 3.1.5
by Lorenzo Bettini
http://www.lorenzobettini.it
http://www.gnu.org/software/src-highlite -->
<tt><b><font color="#ff006a">private</font></b><font color="#000000"> </font><b><font color="#0600bc">void</font></b><font color="#000000"> </font><font color="#222222">ensureList</font><font color="#b700b7">()</font><font color="#000000"> </font><font color="#772121">{</font>
<font color="#000000">     </font><b><font color="#ff006a">if</font></b><font color="#000000"> </font><font color="#b700b7">(</font><font color="#000000">mList </font><font color="#b700b7">!=</font><font color="#000000"> </font><b><font color="#ff006a">null</font></b><font color="#b700b7">)</font><font color="#000000"> </font><font color="#772121">{</font>
<font color="#000000">         </font><b><font color="#ff006a">return</font></b><font color="#b700b7">;</font>
<font color="#000000">     </font><font color="#772121">}</font>
<font color="#772121">}</font>
</tt>
</pre>
<p>という実装により、古いListViewと古いListViewに対するOnItemClickListenerという組み合わせが残ってしまい、コールバックvoid onListItemClick (ListView l, View v, int position, long id)は呼ばれなくなってしまいます。
</p>
<h3>最近出たrev.5になっても未だに修正されない明らかなバグ</h3>
<p>
  <a href="https://plus.google.com/108284392618554783657/posts/5v22Rh3nUhG">受け売りですみません</a>。
</p>
<h2>結び</h2>
<p>少々バグもありますが、Fragment apiやLocalBroadcastReceiverやModernAsyncTask等、便利なapiも結構ありますので、
何か困ったことがあったら、ソースにパッチを当てたり等しながら導入するといいのではないでしょうか。</p>
<br />
<p>長々とありがとうございました。少し翻訳調なのは、焦りつつ<a href="http://uwvm.blogspot.com/2011/12/on-mapview-and-compatibility-library.html">原稿</a>を日本語に直していたからです。
</p>
<p>以上、日本語も英語も不自由な<a href="https://twitter.com/intent/user?screen_name=9re">@9re</a>でした!</p>]]>
    </content>
</entry>

<entry>
    <title>iPhoneアプリに「スクリーンショットを自動撮影してFacebookに投稿する機能」をつける</title>
    <link rel="alternate" type="text/html" href="http://level0.kayac.com/2011/11/iphonefacebook.php" />
    <id>tag:level0.kayac.com,2011://1.3307</id>

    <published>2011-10-31T16:28:19Z</published>
    <updated>2011-10-31T17:03:15Z</updated>

    <summary>先日、『KOF ENCOUNTER』という、すれちがい対戦バトルゲームをリリースしました。 実際に街ですれちがった人とバトルが発生して、経験値がたまってキャラがどんどん強くなっていく！というゲームです...</summary>
    <author>
        <name>tsutsumi</name>
        
    </author>
    
        <category term="iOS" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="en" xml:base="http://level0.kayac.com/">
        <![CDATA[<p>先日、『<a href="http://itunes.apple.com/jp/app/the-king-of-fighters-encounter/id449518556?mt=8">KOF ENCOUNTER</a>』という、<strong>すれちがい対戦バトルゲーム</strong>をリリースしました。</p>

<p><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><a href="http://level0.kayac.com/assets_c/2011/11/map_battle-105.php" onclick="window.open('http://level0.kayac.com/assets_c/2011/11/map_battle-105.php','popup','width=640,height=480,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false"><img src="http://level0.kayac.com/assets_c/2011/11/map_battle-thumb-480x360-105.png" width="480" height="360" alt="map_battle.png" class="mt-image-none" style="" /></a></span></p>

<p><strong>実際に街ですれちがった人とバトルが発生して、経験値がたまってキャラがどんどん強くなっていく！</strong>というゲームです。<br />
<font color=#ff0000><big><strong>無料！</strong></big></font> かつ <font color=#ff0000><big><strong>アカウント登録とか一切必要なし！</strong></big></font> ですので、ぜひぜひお試しください！！</p>

<p><a href="http://itunes.apple.com/jp/app/the-king-of-fighters-encounter/id449518556?mt=8">http://itunes.apple.com/jp/app/the-king-of-fighters-encounter/id449518556?mt=8</a></p>

<p>で、このアプリ、ゲームが進めていくと手持ちのキャラが増えていったり、地域ごとのランキングでのし上がっていったり、といった楽しさがあります。<br />
TwitterとかFacebookをウォッチしてると、わざわざスクリーンショットを自分で撮影してアップしている人が多いことに気づきました。</p>

<p>そこで、『自分の手持ちキャラクターを一覧できる画面』と『自分がランクインしている地域のランキング画面』に、<br />
<strong>「スクリーンショットを自動撮影してFacebookに投稿する機能」</strong><br />
をつけました。</p>

<p><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><a href="http://level0.kayac.com/assets_c/2011/11/IMG_1198-108.php" onclick="window.open('http://level0.kayac.com/assets_c/2011/11/IMG_1198-108.php','popup','width=640,height=960,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false"><img src="http://level0.kayac.com/assets_c/2011/11/IMG_1198-thumb-240x360-108.png" width="240" height="360" alt="IMG_1198.PNG" class="mt-image-none" style="" /></a></span></p>

<p>今回はこの機能の実装方法についてご紹介させていただきます。</p>

<h3>スクリーンショットの撮影</h3>
まずスクリーンショット撮影部分のコードはこうなっております。
<pre title="code" class="brush: js;">
+ (UIImage *)screenshotWithView:(UIView *)view
{
    CGSize imageSize = [view bounds].size;
    if (NULL != UIGraphicsBeginImageContextWithOptions)
        UIGraphicsBeginImageContextWithOptions(imageSize, NO, 0);
    else
        UIGraphicsBeginImageContext(imageSize);
    
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSaveGState(context);
    CGContextTranslateCTM(context, [view center].x, [view center].y);
    CGContextConcatCTM(context, [view transform]);
    CGContextTranslateCTM(context,
                          -[view bounds].size.width * [[view layer] anchorPoint].x - view.frame.origin.x,
                          -[view bounds].size.height * [[view layer] anchorPoint].y - view.frame.origin.y);
    
    [[view layer] renderInContext:context];
    
    CGContextRestoreGState(context);
    
    // Retrieve the screenshot image
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    
    UIGraphicsEndImageContext();
    
    return image;
}
</pre>

<p>撮影したいviewを引数に渡すとUIImageを返すシンプルなメソッドとなっています。<br />
よろしければそのままご使用ください！<br />
（位置合わせのところはケースによっては修正が必要かもしれません）</p>

<p>KOFでは広告部分を除外するためviewを撮影対象としていますが、keyWindow全体を撮影したい場合は、こんな感じになります。（一部抜粋）<br />
<pre title="code" class="brush: js;"><br />
for (UIWindow *window in [[UIApplication sharedApplication] windows]) <br />
{<br />
    if (![window respondsToSelector:@selector(screen)] || [window screen] == [UIScreen mainScreen])<br />
    {<br />
        CGContextSaveGState(context);<br />
        CGContextTranslateCTM(context, [window center].x, [window center].y);<br />
        CGContextConcatCTM(context, [window transform]);<br />
        CGContextTranslateCTM(context,<br />
                              -[window bounds].size.width * [[window layer] anchorPoint].x,<br />
                              -[window bounds].size.height * [[window layer] anchorPoint].y);<br />
        <br />
        [[window layer] renderInContext:context];<br />
        <br />
        CGContextRestoreGState(context);<br />
    }<br />
}<br />
</pre></p>

<p><br />
<h3>Facebookへのキャプション付き画像投稿</h3><br />
撮影したスクリーンショットのUIImageを、Facebookに投稿する部分のコードは下記のようになっています。<br />
<pre title="code" class="brush: js;"><br />
- (void)uploadPhoto:(UIImage *)image caption:(NSString *)caption {<br />
    NSMutableDictionary *params = [NSMutableDictionary dictionaryWithObjectsAndKeys:<br />
                                   image, @"picture",<br />
                                   nil];<br />
    <br />
    if ([caption length] > 0) {<br />
        [params setObject:caption forKey:@"caption"];<br />
    }<br />
    <br />
    [facebook requestWithMethodName:@"photos.upload"<br />
                          andParams:params<br />
                      andHttpMethod:@"POST"<br />
                        andDelegate:self];<br />
}<br />
</pre><br />
上記コード内で、facebookという名前になっているのは、Facebook iOS SDKのFacebookクラスのインスタンスです。<br />
captionという引数に文字列を渡すと、投稿時にキャプションが入ります。</p>

<p>認証部分やdelegateメソッドなど前後部分は割愛しています。<br />
このあたりは私の個人ブログでも記事を書いているので、よろしければご参照ください！</p>

<p>・<a href="http://d.hatena.ne.jp/shu223/20110223/1298415231">カメラアプリにFacebookへの写真投稿機能をつける</a><br />
・<a href="http://d.hatena.ne.jp/shu223/20110314/1300018597">Facebook iOS SDK を使用して近況の投稿やプロフィール取得を実装する</a></p>

<p><br />
それではみなさま、『<a href="http://itunes.apple.com/jp/app/the-king-of-fighters-encounter/id449518556?mt=8">KOF ENCOUNTER</a>』で楽しいすれちがいライフを！！</p>

<p> </p>]]>
        
    </content>
</entry>

<entry>
    <title>大好評！無料iPhoneアプリKOF ENCOUNTER</title>
    <link rel="alternate" type="text/html" href="http://level0.kayac.com/2011/10/iphonekof_encounter.php" />
    <id>tag:level0.kayac.com,2011://1.3306</id>

    <published>2011-10-26T10:06:50Z</published>
    <updated>2011-10-26T10:27:23Z</updated>

    <summary>今月にリリースされた無料iPhoneアプリKOF ENCOUNTERが好調です！ すれ違った他のユーザーとKOFのキャラクターで戦うシンプルなアプリです。 ライトユーザーをターゲットにしていたので ヘ...</summary>
    <author>
        <name>shimada</name>
        
    </author>
    
        <category term="iOS" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="en" xml:base="http://level0.kayac.com/">
        <![CDATA[<p>今月にリリースされた無料iPhoneアプリKOF ENCOUNTERが好調です！</p><p></p><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="kof.jpg" src="http://level0.kayac.com/shimada/kof.jpg" width="600" height="157" class="mt-image-none" style="" /></span><p></p>

<span class="mt-enclosure mt-enclosure-image" style="display: inline;"><a href="http://itunes.apple.com/jp/app/id449518556?l=ja&amp;ls=1&amp;mt=8"><img alt="appStore.png" src="http://level0.kayac.com/shimada/appStore.png" width="147" height="49" class="mt-image-none" style="" /></a></span><div><br /></div><div>すれ違った他のユーザーとKOFのキャラクターで戦うシンプルなアプリです。</div><div><div><br /></div><div>

<p>ライトユーザーをターゲットにしていたので<br />
ヘビーユーザーからの評価は厳しいかもと覚悟していましたが<br />
今の所好評化を得れていています！</p>

<p>励ましのコメントも厳しいご意見も<br />
次のバージョンアップのモチベーションにしてます！ありがとうございます！！</p>

<p>久しぶりにデザイナーとして参加したんですが、<br />
今回一番苦労したのが軽量化です。</p>

<p>無料の場合特に<br />
を超えるとダウンロード数が減るので<br />
20MBという縛りの中で制作していました。</p>

<p>素材も多くクオリティもあまり落とさずに見せたかったので<br />
かなりシビアな戦いでした。</p>

<p>現在も残りのキャラクターを追加するために<br />
軽量化と素材作りに奮闘中です！<br />
</p></div></div>]]>
        
    </content>
</entry>

<entry>
    <title>スマートフォンアプリワークショップ　&quot;twitterアプリ改造大会！&quot;　参加レポ</title>
    <link rel="alternate" type="text/html" href="http://level0.kayac.com/2011/10/smartphoneworkshop_mochico.php" />
    <id>tag:level0.kayac.com,2011://1.3305</id>

    <published>2011-10-25T12:42:19Z</published>
    <updated>2011-10-25T13:45:00Z</updated>

    <summary>こんにちは初めまして。mochicoです。 Androidのディベロッパーやってます、よろしくお願いします。 10月21日に恵比寿支社の地下にて行われた「スマートフォンアプリワークショップ　&quot;twit...</summary>
    <author>
        <name>anonymous</name>
        
    </author>
    
        <category term="Android" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="android" label="android" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="iphone" label="iphone" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="ワークショップ" label="ワークショップ" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="en" xml:base="http://level0.kayac.com/">
        <![CDATA[<p>こんにちは初めまして。mochicoです。<br />
Androidのディベロッパーやってます、よろしくお願いします。</p>

<p>10月21日に恵比寿支社の地下にて行われた「<a href="http://www.kayac.com/news/2011/10/appli_event">スマートフォンアプリワークショップ　"twitterアプリ改造大会！"</a>」に参加してきました！<br />
iPhoneアプリとAndroidアプリのワークショップを同時に行うイベントはちょっと珍しいのではないでしょうか。</p>]]>
        <![CDATA[<p>4、5人ずつのAndroidチームとiPhoneチームで各2チーム。<br />
TwitterにOAuthでログインしてフォロワーをリスト表示するサンプルプロジェクトを元に、課題を解決していきます。<br />
すてきなアプリをつくったチームには賞品も・・・！？<br />
みじかい時間で初めて会う人たちといかに協力してひとつのアプリを仕上げられるかが勝負です。</p>

<p>Androidチームに与えられた課題はこちら。<br />
<ol><li>毎回ログインしなくていいようにする　　<small>ヒント：SharedPreference</small><br />
</li><br />
<li>リストビューを高速化する　　<small>ヒント：使いまわす</small><br />
</li><br />
<li>画像（Followerのアイコン）表示を高速化する　　<small>ヒント：非同期処理</small><br />
</li><br />
<li>ブレストを行い、新しい機能をつくる</li></ol><br />
最後のチーム発表では、イ○娘とコラボしたアプリ、<br />
もぐらたたきみたいにたこ焼きをつつくと大阪のオバチャンが飛んでいくアプリや<br />
写真を撮るとお札の顔部分と合成して離婚の可能性をつぶやいてくれるアプリ、<br />
ひたすら「本当にツイートするの？」と聞いてくるアプリなど、iPhone・Android関係なく個性的なアプリが並びました。</p>

<p>アイデア出しから始まるワークショップ系の勉強会には、<br />
何か今まで自分が作ったものやネタをいくつか持っていってベースにすると完成度が上がるかもしれません。</p>

<p>懇親会は和やかにすすみましたが、もっと開発中にiPhoneとAndroidの開発者で意見交換したかったかも。<br />
こんどは全く同じものをiPhoneとAndroidでそれぞれつくる、とかもおもしろいかもしれないですね！</p>]]>
    </content>
</entry>

<entry>
    <title>【小ネタ】AIR for iOSを実機デバッグする時のフレームレートに注意</title>
    <link rel="alternate" type="text/html" href="http://level0.kayac.com/2011/10/air_ios_framerate.php" />
    <id>tag:level0.kayac.com,2011://1.3304</id>

    <published>2011-10-13T05:00:00Z</published>
    <updated>2011-10-13T05:04:18Z</updated>

    <summary>FlashBuilderでActionScriptモバイルプロジェクトを作成し、iPad向けのアプリを開発していた時のこと。 PCとiPadが同じネットワーク上にあれば実機上で動作させつつFlashB...</summary>
    <author>
        <name>ando</name>
        
    </author>
    
        <category term="iOS" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="air" label="AIR" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="ios" label="iOS" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="en" xml:base="http://level0.kayac.com/">
        <![CDATA[<p>FlashBuilderでActionScriptモバイルプロジェクトを作成し、iPad向けのアプリを開発していた時のこと。<br />
PCとiPadが同じネットワーク上にあれば実機上で動作させつつFlashBuilder上のデバッガに接続することが可能なのですが、その間、フレームレートが激落ちしてしまう現象に遭遇しました。Statsの表示も5/30fpsくらいです。<br />
なんだろうこれー、と思いながらもとりあえずFlashBuilderのデバッガを停止させると、なぜかここで実機上のアプリが30fpsに復活しました。うーん、実機とデバッガとのやり取りが同期処理だったりするのでしょうか・・・？AIR for iOS開発者の方はご注意を。</p>]]>
        
    </content>
</entry>

<entry>
    <title>知っ得？軽量・高速・サイズ気にしないでいい！スマートフォン向けAIRアプリ（Flashだよ）</title>
    <link rel="alternate" type="text/html" href="http://level0.kayac.com/2011/10/airflash.php" />
    <id>tag:level0.kayac.com,2011://1.3303</id>

    <published>2011-10-02T07:00:00Z</published>
    <updated>2011-10-03T07:01:19Z</updated>

    <summary>御久方ぶりです 千歳です！ ここで取り扱うのは「air for android＆AIR for iOS」です。（以下　AIRと一括りにします） ツールの方は「FlashBuilder」ではなく「Fla...</summary>
    <author>
        <name>chitose</name>
        
    </author>
    
        <category term="Flash" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="air" label="AIR" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="android" label="Android" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="flash" label="Flash" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="ios" label="iOS" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="早い" label="早い" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="軽い" label="軽い" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="en" xml:base="http://level0.kayac.com/">
        <![CDATA[<p>御久方ぶりです<br />
千歳です！</p>

<p>ここで取り扱うのは「air for android＆AIR for iOS」です。（以下　AIRと一括りにします）<br />
ツールの方は「FlashBuilder」ではなく「Flash」です。（以下、FlashといえばオーサリングツールのFlashのことです）<br />
FlashBuilderでも使えると思いますが、試していないのでご了承下さい。</p>

<p>さて、AIRの最近のニュースだと<br />
「Adobe AIR 3」が公開されましたね。<br />
詳しくはkamijo氏のブログが大変に参考になるので必見です！<br />
<a href="http://cuaoar.jp/2011/07/adobe-air-3-1.html">http://cuaoar.jp/2011/07/adobe-air-3-1.html</a></p>

<p>では、本題です。<br />
AIRアプリをスマートフォンで見る時にネックになるのが<br />
・ベクターレンダリングの遅さ　特にiOSだと顕著と聞きます。<br />
・画像のサイズ分け　<br />
　　Flashで作る場合、端末のサイズによって切替て綺麗に出したいのになかなか大変です。</p>

<p>この２点を解決するクラスを作ってみました。（思いつきで書いたのでかなり適当＆機能がないｗ）<br />
これで、サイズを気にせず、ベクターの重さを考えないでゴリゴリアニメーションさせたりできます！<br />
しかるべき場所にソースコードをアップしようと思ったのですが、面倒になったので＆大したコードでもないので<br />
ペッと貼っつけていきます。<br />
<a href="http://level0.kayac.com/entryimages/chitose/demo.swf" target="_blank">サンプルswfはコチラ</a></p>

<h3>ベクターレンダリングの遅さ</h3>
<p>サンプルを見ていただければわかりますが、キャラの素材が画像（ラスター）になっています。<br />
でも、素材はベクターデータです。<br />
ウィンドウサイズを変えてリロードしてみてください。<br />
どのサイズでも綺麗にでると思います。</p>

<p>やってることを簡単にご説明。<br />
・ベクターの素材系をブロックごとにMC化（左上が必ず起点になるように）<br />
・「シンボルプロパティ」から「基本クラス」にクラスを指定する<br />
以上<br />
一回クラスを作ってしまえば簡単です。</p>

<p>クラスはコチラです↓</p>

<pre>
package {
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.Sprite;
	import flash.events.Event;
	
	/**
	 * ...
	 * @author pon
	 */
	public class SpriteBitmap extends Sprite {
		public static var scale:Number=1;
		
		private var bitmap:Bitmap
		private var bd:BitmapData
		public function SpriteBitmap(){
			addEventListener(Event.ADDED_TO_STAGE, added);
		}
		private function added(e:Event):void {
			removeEventListener(Event.ADDED_TO_STAGE, added);
				
			var copy:Sprite=new Sprite();
			var sp:Sprite = new Sprite();
			copy.addChild(getChildAt(0))
			sp.addChild(copy);
			
			copy.scaleX *= scale;
			copy.scaleY *= scale;
			
			bd = new BitmapData(sp.width, sp.height, true, 0x00000000);
			bd.draw(sp);

			bitmap = new Bitmap(bd);
			bitmap.scaleX /= scale;
			bitmap.scaleY /= scale;
			
			while(numChildren){
				removeChildAt(0);
			}
			addChild(bitmap);
			
			copy.removeChildAt(0)
			sp.removeChildAt(0)
			
			copy=null
			sp = null
		}
	}

}
</pre>
<ul>
<li>スケールを表示サイズに合わせる</li>
<li>BitmapData.draw()</li>
<li>スケールを元のサイズに戻す</li>
<li>元あったパスデータをremoveChild()</li>
<li>BitmapをaddChild</li>
</ul>
<p>という流れです。</p>
<p>これで、素材としてはベクターで用意して<br />
アプリで表示する時に自動でラスター化することで、軽い＆綺麗＆早いを実現できます</p>

<h3>画像のサイズ分けがメンドイ</h3>
<p>前述の対応でほぼほぼ解決してしまいましたが、端末サイズを読みとって丁度イイサイズにするコードをドキュメントクラスに書きます。</p>

<pre>
package 
{
	import display.View;
	import flash.display.Sprite;
	//import net.hires.debug.Stats;
	import flash.display.StageScaleMode
	import flash.display.StageAlign
	import smartphone.src.display.SpriteBitmap
	
	/**
	 * ...
	 * @author pon
	 */
	public class Main extends Sprite {
		private const WIDTH:uint = 480;
		private const HEIGHT:uint = 320;
		
		public var view:View;
		//private var stats:Stats = new Stats();
		
		public function Main():void{
			//addChild(stats);
			
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.align = StageAlign.TOP_LEFT;
			var sw:int = stage.stageWidth;
			var sh:int = stage.stageHeight;
			if (sh > sw) {
				sw = stage.stageHeight;
				sh = stage.stageWidth;
			}
			
			var ws:Number = sw / WIDTH;
			var hs:Number = sh / HEIGHT;
			
			if (ws < hs) {
				hs = ws;
				view.y=(sh - HEIGHT * hs) / 2;
			}else {
				ws = hs;
				view.x = (sw - WIDTH * ws) / 2;
			}
			view.scaleX = ws;
			view.scaleY = hs;
			SpriteBitmap.scale = ws;
		}
	}
	
}
</pre>
<p>ポイントは</p>
<h4>Flash上での画面サイズは480×320(320×480)が推奨です。（比率があってればOK）</h4>
iPhoneの比率がコレなのでこれで作っておくと丁度イイです<br />
Androidではこれより長くなる端末があるので、長めに背景素材などを用意するか、最上位レイヤーの両サイドに黒い矩形を載せておきましょう。<br />
さらにドキュメンクラスに画面サイズを定数として記述しておきます。
<h4>ドキュメントクラスではなくMCでラップしてそこをメインクラスにする。</h4>
このMCを丁度イイサイズに拡縮します。
<h4>縦横の長さを比較して縦か横かを把握する。</h4>
iOSは知りませんが、Androidでは縦か横か取得できますがなんか信用できません。（実機でアレレ？ってことがありました。）<br />
なので、自力で調べます。
<h4>ビットマップ化してくれるクラスのstaticにスケールサイズを教えてあげる。</h4>
この値でビットマップ化のサイズを可変させますので重要です！<br />
このコードが走った後にそれぞれの「ビットマップ化してくれるクラス」が生成されるようにしましょう。（１フレ開けておくなど）
<p>とまぁ、こんな感じです。</p>

<p>このコードはご自由にお使いください！<br />
同じシンボルが複数登場する時とか、出たり消えたりする場合などの対応が必要かなーとおもってるのですが<br />
必要になったときに追加しようかと思ってます。誰かやっちゃてもいいですよ！<br />
ほかにも便利な機能をもたせたりしてくれたら、教えてくださいね！ｗ<br />
利用する時は、周りの人に「level0」を紹介してもらえればうれしいです<br />
では快適なAIRアプリ制作ライフを！<br />
</p>]]>
        
    </content>
</entry>

<entry>
    <title>&quot;動き&quot;の教え方 2</title>
    <link rel="alternate" type="text/html" href="http://level0.kayac.com/2011/09/_2.php" />
    <id>tag:level0.kayac.com,2011://1.3302</id>

    <published>2011-09-29T17:50:07Z</published>
    <updated>2011-09-29T18:08:51Z</updated>

    <summary> ...</summary>
    <author>
        <name>shimada</name>
        
    </author>
    
        <category term="Animation" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="color" label="color" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="flash" label="flash" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="font" label="font" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="kayac" label="kayac" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="swf" label="swf" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="wav" label="wav" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="wmode" label="wmode" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="en" xml:base="http://level0.kayac.com/">
        <![CDATA[<p><embed height="400" width="550" align="middle" play="true" loop="true" salign="" menu="true" devicefont="false" wmode="window" quality="high" bgcolor="#ffffff" name="visibleSample" id="visibleSample" src="http://level0.kayac.com/shimada/swf/ugoki2.swf" type="application/x-shockwave-flash"/><br />
</p>]]>
        
    </content>
</entry>

<entry>
    <title>iOS SDK用音声認識ライブラリ VocalKit の使い方</title>
    <link rel="alternate" type="text/html" href="http://level0.kayac.com/2011/09/ios_sdk_vocalkit.php" />
    <id>tag:level0.kayac.com,2011://1.3301</id>

    <published>2011-09-29T16:32:44Z</published>
    <updated>2011-09-29T17:55:12Z</updated>

    <summary>みなさまこんにちは！tsutsumiと申します。 突然ですが、こちら、先日（2010年12月4日）とある勉強会にて発表した際の資料です。  VocalKitについて   View more prese...</summary>
    <author>
        <name>tsutsumi</name>
        
    </author>
    
        <category term="iOS" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="3d" label="3D" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="ar" label="ar" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="ar" label="AR" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="art" label="art" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="class" label="class" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="closure" label="closure" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="dictionary" label="Dictionary" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="flash" label="flash" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="iphone" label="iPhone" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="iphone" label="iphone" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="js" label="js" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="kayac" label="kayac" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="number" label="Number" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="object" label="object" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="php" label="php" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="png" label="png" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="sdk" label="sdk" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="swf" label="swf" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="wav" label="wav" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="プロパティ" label="プロパティ" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="勉強会" label="勉強会" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="en" xml:base="http://level0.kayac.com/">
        <![CDATA[<p>みなさまこんにちは！tsutsumiと申します。</p>

<p>突然ですが、こちら、先日（2010年12月4日）とある勉強会にて発表した際の資料です。</p>

<div style="width:425px" id="__ss_7162496"> <strong style="display:block;margin:12px 0 4px"><a href="http://www.slideshare.net/t26v0748/vocal-kit" title="VocalKitについて" target="_blank">VocalKitについて</a></strong> <iframe src="http://www.slideshare.net/slideshow/embed_code/7162496?rel=0" width="425" height="355" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe> <div style="padding:5px 0 12px"> View more <a href="http://www.slideshare.net/" target="_blank">presentations</a> from <a href="http://www.slideshare.net/t26v0748" target="_blank">堤 修一</a> </div> </div>

<p>iPhone SDKで利用できる音声認識ライブラリ（Pocket Sphinxのラッパー）VocalKitについて紹介しています。</p>

<p>中身を読むのが面倒な方のために、下記に内容を抜粋します！</p>

<h3>『勇気をください』</h3>
「勇気をください」と言うと、勇気の出るエピソードが表示されるiPhoneアプリ。<br/>
音声認識を使っているので、ちゃんと「勇気をください」といわないと怒られます。

<p><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><a href="http://level0.kayac.com/assets_c/2011/09/20110306083504-thumb-240x360-90.png"><img alt="20110306083504.pngのサムネール画像" src="http://level0.kayac.com/assets_c/2011/09/20110306083504-thumb-240x360-90-thumb-240x360-91.png" width="240" height="360" class="mt-image-left" style="float: left; margin: 0 20px 20px 0;" /></a></span><br />
（<a href="http://www.appbank.net/2010/11/06/iphone-application/182987.php">AppBankさんへの寄稿記事</a>）<br />
（<a href="http://itunes.apple.com/jp/app/id395958856?mt=8">AppStore</a>）</p>

<h3>VocalKitとは？</h3>
オープンソースの音声認識エンジン、Pocket Sphinxのラッパー<br/>
https://github.com/KingOfBrian/VocalKit

<h3>使い方</h3>
<h4>録音を開始する</h4>
<pre title="code" class="brush: js;">
[vk startListening];
</pre>
<h4>認識を開始する</h4>
<pre title="code" class="brush: js;">
[vk postNotificationOfRecognizedText];
</pre>
<h4>認識結果を受け取る</h4>
（NSNotificationが飛んでくる）

<h3>単語辞書の記述方法</h3>
<ul>
	<li>単語名 音素1 音素2 音素3 . . .</li>
	<li>同じ単語を複数の発音で定義したい場合は(2)とか(3)とかつける</li>
</ul>
<pre title="code" class="brush: js;">
me	M IY<br/>
encourage	EH N K ER IH JH<br/>
encourage(2)	IH N K ER AH JH<br/>
</pre>

<h3>認識結果</h3>
NSNotificationのUserInfoプロパティに認識結果が入ってくる。
<pre title="code" class="brush: js;">
NSDictionary *dict = [notification userInfo];	
NSString *phrase = [dict objectForKey:VKRecognizedPhraseNotificationTextKey];
NSNumber *score  = [dict objectForKey:VKRecognizedPhraseNotificationScoreKey];	
</pre>

<h3>辞書作成のコツ</h3>
単語数が多いと、処理も重いし認識率も悪い
<ol>
	<li>まず標準の辞書で、認識結果をためしてみる（sayコマンド便利）</li>
	<li>出てきた単語だけで辞書を再構成する</li>
</ol>

<p></p>

<p><br />
自分で作るとかなり大変な音声認識機能ですが、VocalKitを使うと超簡単にiPhoneに実装できてしまうので、ぜひぜひお試しください！<br />
</p>]]>
        
    </content>
</entry>

<entry>
    <title>ディレクター向け：Android案件チェックしておくもの</title>
    <link rel="alternate" type="text/html" href="http://level0.kayac.com/2011/09/android_4.php" />
    <id>tag:level0.kayac.com,2011://1.3300</id>

    <published>2011-09-16T00:38:34Z</published>
    <updated>2011-09-16T04:15:31Z</updated>

    <summary>こんにちは、夏が終わりそうなので夏カレーつくりました、hidakaです。 みなさん、よくアプリ開発しててリリース直前になって、あーあれ忘れてた、これどうなってんのーみたいな話になったことはないでしょう...</summary>
    <author>
        <name>hidaka</name>
        
    </author>
    
        <category term="Android" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="android" label="android" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="ディレクター" label="ディレクター" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="管理" label="管理" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="en" xml:base="http://level0.kayac.com/">
        <![CDATA[<p>こんにちは、夏が終わりそうなので夏カレーつくりました、hidakaです。</p>

<p>みなさん、よくアプリ開発しててリリース直前になって、あーあれ忘れてた、これどうなってんのーみたいな話になったことはないでしょうか。<br />
ありがちなところでは、マーケット用の画像ないよ、とかアプリ説明決まってないとか。</p>

<p>今日はディレクター向けに、アプリ開発時にチェックしておくことのまとめです。</p>

<p>まずはアプリ開発スタート時にチェックしておきたいもの。<br />
すぐ決まることはさっさと決めるのが、ブラッシュアップ時間を確保するポイントです。<br />
</p>]]>
        <![CDATA[<table cellspacing="2px" cellpadding="4px" border="1px">
  <tr>
    <th bgcolor="#EEEEEE" scope="col"  style="padding:4px;">項目</th>
    <th bgcolor="#EEEEEE" scope="col"  style="padding:4px;">チェック</th>
    <th bgcolor="#EEEEEE" scope="col"  style="padding:4px;">備考</th>
  </tr>
  <tr>
    <td  style="padding:4px;">担当ディレクター</td  style="padding:4px;">
    <td  style="padding:4px;">&nbsp;</td  style="padding:4px;">
    <td  style="padding:4px;">&nbsp;</td  style="padding:4px;">
  </tr>
  <tr>
    <td  style="padding:4px;">iOS版の有無</td  style="padding:4px;">
    <td  style="padding:4px;">あり・なし</td  style="padding:4px;">
    <td  style="padding:4px;">&nbsp;</td  style="padding:4px;">
  </tr>
  <tr>
    <td  style="padding:4px;">価格・広告の有無</td  style="padding:4px;">
    <td  style="padding:4px;">無料・～～円</td  style="padding:4px;">
    <td  style="padding:4px;">広告の場合、広告プラットフォームとアカウント確認</td  style="padding:4px;">
  </tr>
  <tr>
    <td  style="padding:4px;">リリース予定日</td  style="padding:4px;">
    <td  style="padding:4px;">&nbsp;</td  style="padding:4px;">
    <td  style="padding:4px;">&nbsp;</td  style="padding:4px;">
  </tr>
  <tr>
    <td  style="padding:4px;">最終プレビュー予定日</td  style="padding:4px;">
    <td  style="padding:4px;">2011/10/05</td  style="padding:4px;">
    <td  style="padding:4px;">&nbsp;</td  style="padding:4px;">
  </tr>
  <tr>
    <td  style="padding:4px;">制作開始日</td  style="padding:4px;">
    <td  style="padding:4px;">2011/09/07</td  style="padding:4px;">
    <td  style="padding:4px;">&nbsp;</td  style="padding:4px;">
  </tr>
  <tr>
    <td  style="padding:4px;">デザインアップ予定日</td  style="padding:4px;">
    <td  style="padding:4px;">2011/09/27</td  style="padding:4px;">
    <td  style="padding:4px;">&nbsp;</td  style="padding:4px;">
  </tr>
  <tr>
    <td  style="padding:4px;">原稿FIX日</td  style="padding:4px;">
    <td  style="padding:4px;">2011/09/15</td  style="padding:4px;">
    <td  style="padding:4px;">&nbsp;</td  style="padding:4px;">
  </tr>
  <tr>
    <td  style="padding:4px;">容量問題の可能性</td  style="padding:4px;">
    <td  style="padding:4px;">あり・なし</td  style="padding:4px;">
    <td  style="padding:4px;">10M超えそうな場合ありで</td  style="padding:4px;">
  </tr>
  <tr>
    <td  style="padding:4px;">AR・QRなどライブラリの利用</td  style="padding:4px;">
    <td  style="padding:4px;">あり・なし</td  style="padding:4px;">
    <td  style="padding:4px;">ライセンスまわりも確認</td  style="padding:4px;">
  </tr>
  <tr>
    <td  style="padding:4px;">HTMLコーディングの有無・担当</td  style="padding:4px;">
    <td  style="padding:4px;">あり・なし</td  style="padding:4px;">
    <td  style="padding:4px;">プログラマ側判断で一部HTMLにすることもあります</td  style="padding:4px;">
  </tr>
  <tr>
    <td  style="padding:4px;">Basic認証の有無</td  style="padding:4px;">
    <td  style="padding:4px;">あり・なし</td  style="padding:4px;">
    <td  style="padding:4px;">開発環境のAPIとかにも。</td  style="padding:4px;">
  </tr>
  <tr>
    <td  style="padding:4px;">デザインデータの書き出し担当</td  style="padding:4px;">
    <td  style="padding:4px;">De or PG</td  style="padding:4px;">
    <td  style="padding:4px;">&nbsp;</td  style="padding:4px;">
  </tr>
  <tr>
    <td  style="padding:4px;">パッケージ名</td  style="padding:4px;">
    <td  style="padding:4px;">&nbsp;</td  style="padding:4px;">
    <td  style="padding:4px;">&nbsp;</td  style="padding:4px;">
  </tr>
</table>

<p>次に、マーケット情報関連。<br />
アカウントの用意や証明書、あとはレビュー依頼予定やプレス準備などです。</p>

<table cellspacing="2px" cellpadding="4px" border="1px" style="padding:4px;">
  <tr>
    <th bgcolor="#EEEEEE" scope="col"  style="padding:4px;">項目</th>
    <th bgcolor="#EEEEEE" scope="col"  style="padding:4px;">チェック</th>
    <th bgcolor="#EEEEEE" scope="col"  style="padding:4px;">備考</th>
  </tr>
  <tr>
    <td  style="padding:4px;">マーケットリリースのアカウント</td  style="padding:4px;">
    <td  style="padding:4px;">あり(アカウント名)・なし</td  style="padding:4px;">
    <td  style="padding:4px;">&nbsp;</td  style="padding:4px;">
  </tr>
  <tr>
    <td  style="padding:4px;">証明書の用意</td  style="padding:4px;">
    <td  style="padding:4px;">担当者</td  style="padding:4px;">
    <td  style="padding:4px;">&nbsp;</td  style="padding:4px;">
  </tr>
  <tr>
    <td  style="padding:4px;">アナリティクスの有無</td  style="padding:4px;">
    <td  style="padding:4px;">&nbsp;</td  style="padding:4px;">
    <td  style="padding:4px;">GoogleやFlurryなど</td  style="padding:4px;">
  </tr>
  <tr>
    <td  style="padding:4px;">ドコモマーケットへの申請</td  style="padding:4px;">
    <td  style="padding:4px;">&nbsp;</td  style="padding:4px;">
    <td  style="padding:4px;">2週間ほど見ておく</td  style="padding:4px;">
  </tr>
  <tr>
    <td  style="padding:4px;">AU one marketへの申請</td  style="padding:4px;">
    <td  style="padding:4px;">&nbsp;</td  style="padding:4px;">
    <td  style="padding:4px;">2週間ほど見ておく</td  style="padding:4px;">
  </tr>
  <tr>
    <td  style="padding:4px;">レビュー依頼</td  style="padding:4px;">
    <td  style="padding:4px;">依頼先</td  style="padding:4px;">
    <td  style="padding:4px;">&nbsp;</td  style="padding:4px;">
  </tr>
  <tr>
    <td  style="padding:4px;">プレス配信予定</td  style="padding:4px;">
    <td  style="padding:4px;">担当</td  style="padding:4px;">
    <td  style="padding:4px;">&nbsp;</td  style="padding:4px;">
  </tr>
  <tr>
    <td  style="padding:4px;">アプリ説明(4000字まで)</td  style="padding:4px;">
    <td  style="padding:4px;">&nbsp;</td  style="padding:4px;">
    <td  style="padding:4px;">できるだけ長く（SEO効果狙うため）</td  style="padding:4px;">
  </tr>
  <tr>
    <td  style="padding:4px;">プロモーションテキスト(80字まで)</td  style="padding:4px;">
    <td  style="padding:4px;">&nbsp;</td  style="padding:4px;">
    <td  style="padding:4px;">&nbsp;</td  style="padding:4px;">
  </tr>
  <tr>
    <td  style="padding:4px;">カテゴリの決定</td  style="padding:4px;">
    <td  style="padding:4px;">&nbsp;</td  style="padding:4px;">
    <td  style="padding:4px;">マーケットを参考に。</td  style="padding:4px;">
  </tr>
  <tr>
    <td  style="padding:4px;">連絡先メールアドレスの決定</td  style="padding:4px;">
    <td  style="padding:4px;">&nbsp;</td  style="padding:4px;">
    <td  style="padding:4px;">&nbsp;</td  style="padding:4px;">
  </tr>
  <tr>
    <td  style="padding:4px;">スクリーンショット画面の決定</td  style="padding:4px;">
    <td  style="padding:4px;">&nbsp;</td  style="padding:4px;">
    <td  style="padding:4px;">2-6枚。SSではなく説明画像などでも可</td  style="padding:4px;">
  </tr>
  <tr>
    <td  style="padding:4px;">プロモーション動画の有無</td  style="padding:4px;">
    <td  style="padding:4px;">&nbsp;</td  style="padding:4px;">
    <td  style="padding:4px;">youtubeURLを指定できます。省略可</td  style="padding:4px;">
  </tr>
</table>

<p>まだまだ続きます。<br />
次は制作チーム内での情報共有として整理しておきたいもの。</p>

<table cellspacing="2px" cellpadding="4px" border="1px" style="padding:4px;">
  <tr>
    <th bgcolor="#EEEEEE" scope="col"  style="padding:4px;">項目</th>
    <th bgcolor="#EEEEEE" scope="col"  style="padding:4px;">チェック</th>
    <th bgcolor="#EEEEEE" scope="col"  style="padding:4px;">備考</th>
  </tr>
  <tr>
    <td  style="padding:4px;">対応OS</td  style="padding:4px;">
    <td  style="padding:4px;">2.2～</td  style="padding:4px;">
    <td  style="padding:4px;">場合によって2.1,1.6など</td  style="padding:4px;">
  </tr>
  <tr>
    <td  style="padding:4px;">タブレット対応の有無</td  style="padding:4px;">
    <td  style="padding:4px;">あり・なし</td  style="padding:4px;">
    <td  style="padding:4px;">&nbsp;</td  style="padding:4px;">
  </tr>
  <tr>
    <td  style="padding:4px;">メインの検証端末</td  style="padding:4px;">
    <td  style="padding:4px;">N1など</td  style="padding:4px;">
    <td  style="padding:4px;">テスト機ではなく、開発機として常に用意するもの</td  style="padding:4px;">
  </tr>
  <tr>
    <td  style="padding:4px;">カメラ機能の有無</td  style="padding:4px;">
    <td  style="padding:4px;">あり・なし</td  style="padding:4px;">
    <td  style="padding:4px;">検証端末が増加します</td  style="padding:4px;">
  </tr>
  <tr>
    <td  style="padding:4px;">API実装の有無</td  style="padding:4px;">
    <td  style="padding:4px;">あり・なし</td  style="padding:4px;">
    <td  style="padding:4px;">&nbsp;</td  style="padding:4px;">
  </tr>
  <tr>
    <td  style="padding:4px;">ウィジェットの有無</td  style="padding:4px;">
    <td  style="padding:4px;">あり・なし</td  style="padding:4px;">
    <td  style="padding:4px;">&nbsp;</td  style="padding:4px;">
  </tr>
  <tr>
    <td  style="padding:4px;">SDカードインストール可否</td  style="padding:4px;">
    <td  style="padding:4px;">可・否</td  style="padding:4px;">
    <td  style="padding:4px;">いつも忘れられるもの</td  style="padding:4px;">
  </tr>
  <tr>
    <td  style="padding:4px;">通知機能の有無</td  style="padding:4px;">
    <td  style="padding:4px;">あり・なし</td  style="padding:4px;">
    <td  style="padding:4px;">&nbsp;</td  style="padding:4px;">
  </tr>
  <tr>
    <td  style="padding:4px;">外部サービスの利用（facebook,bit.ly,twitterなど）</td  style="padding:4px;">
    <td  style="padding:4px;">あり・なし</td  style="padding:4px;">
    <td  style="padding:4px;">SDKが必要なものなど確認</td  style="padding:4px;">
  </tr>
  <tr>
    <td  style="padding:4px;">外部投稿用文言確認</td  style="padding:4px;">
    <td  style="padding:4px;">あり・なし</td  style="padding:4px;">
    <td  style="padding:4px;">Twitterの場合、特に注意</td  style="padding:4px;">
  </tr>
  <tr>
    <td  style="padding:4px;">テストアカウントの用意(外部サービス)</td  style="padding:4px;">
    <td  style="padding:4px;">あり・なし</td  style="padding:4px;">
    <td  style="padding:4px;">facebookなど</td  style="padding:4px;">
  </tr>
  <tr>
    <td  style="padding:4px;">バックグラウンド処理の有無</td  style="padding:4px;">
    <td  style="padding:4px;">あり・なし</td  style="padding:4px;">
    <td  style="padding:4px;">GPSと併用の場合テスト工数増加</td  style="padding:4px;">
  </tr>
  <tr>
    <td  style="padding:4px;">GPS利用の有無</td  style="padding:4px;">
    <td  style="padding:4px;">あり・なし</td  style="padding:4px;">
    <td  style="padding:4px;">GPSオフ時のテスト追加</td  style="padding:4px;">
  </tr>
  <tr>
    <td  style="padding:4px;">音・動画素材の有無</td  style="padding:4px;">
    <td  style="padding:4px;">あり・なし</td  style="padding:4px;">
    <td  style="padding:4px;">高品質のものを用意しておき、変換して使う形が◎</td  style="padding:4px;">
  </tr>
  <tr>
    <td  style="padding:4px;">アプリ再インストール時の想定</td  style="padding:4px;">
    <td  style="padding:4px;">OK・NG</td  style="padding:4px;">
    <td  style="padding:4px;">ユーザー登録的なものがある場合の仕様チェック</td  style="padding:4px;">
  </tr>
</table>

<p>多いように思いますが、ここまではワイヤー作る以前にほとんど書けてしまいます。<br />
仕様からもれがちなものを抑えていきましょう。</p>

<p>ここからは制作進行中などに注意していくもの。</p>

<table cellspacing="2px" cellpadding="4px" border="1px" style="padding:4px;">
  <tr>
    <th bgcolor="#EEEEEE" scope="col"  style="padding:4px;">項目</th>
    <th bgcolor="#EEEEEE" scope="col"  style="padding:4px;">チェック</th>
    <th bgcolor="#EEEEEE" scope="col"  style="padding:4px;">備考</th>
  </tr>
  <tr>
    <td  style="padding:4px;">各画面のメニュー要素の決定</td  style="padding:4px;">
    <td  style="padding:4px;">OK・NG</td  style="padding:4px;">
    <td  style="padding:4px;">&nbsp;</td  style="padding:4px;">
  </tr>
  <tr>
    <td  style="padding:4px;">利用規約・使い方画面の原稿・チェック</td  style="padding:4px;">
    <td  style="padding:4px;">あり・なし・済</td  style="padding:4px;">
    <td  style="padding:4px;">&nbsp;</td  style="padding:4px;">
  </tr>
  <tr>
    <td  style="padding:4px;">担当デザイナー</td  style="padding:4px;">
    <td  style="padding:4px;">担当者名</td  style="padding:4px;">
    <td  style="padding:4px;">&nbsp;</td  style="padding:4px;">
  </tr>
  <tr>
    <td  style="padding:4px;">デザイナーのAndroidデザイン経験</td  style="padding:4px;">
    <td  style="padding:4px;">あり・なし</td  style="padding:4px;">
    <td  style="padding:4px;">9patchの仕組みの理解など</td  style="padding:4px;">
  </tr>
  <tr>
    <td  style="padding:4px;">ボタンのロールオーバー作成</td  style="padding:4px;">
    <td  style="padding:4px;">OK・NG</td  style="padding:4px;">
    <td  style="padding:4px;">	iphone版はデフォルトで済まそうとしている場合は特に忘れないように注意</td  style="padding:4px;">
  </tr>
  <tr>
    <td  style="padding:4px;">ローディング画面</td  style="padding:4px;">
    <td  style="padding:4px;">あり・なし</td  style="padding:4px;">
    <td  style="padding:4px;">標準ダイアログなのか、デザインするのか</td  style="padding:4px;">
  </tr>
  <tr>
    <td  style="padding:4px;">大画面になった場合が想定できるか</td  style="padding:4px;">
    <td  style="padding:4px;">OK・NG</td  style="padding:4px;">
    <td  style="padding:4px;">可変レイアウト対応ができているか</td  style="padding:4px;">
  </tr>
  <tr>
    <td  style="padding:4px;">各画面、縦方向に伸びる想定ができているか</td  style="padding:4px;">
    <td  style="padding:4px;">OK・NG</td  style="padding:4px;">
    <td  style="padding:4px;">縦横比が最小の場合の想定も</td  style="padding:4px;">
  </tr>
  <tr>
    <td  style="padding:4px;">高解像度アイコン(512*512)</td  style="padding:4px;">
    <td  style="padding:4px;">OK・NG</td  style="padding:4px;">
    <td  style="padding:4px;">&nbsp;</td  style="padding:4px;">
  </tr>
  <tr>
    <td  style="padding:4px;">プロモーション画像(180*120)</td  style="padding:4px;">
    <td  style="padding:4px;">OK・NG</td  style="padding:4px;">
    <td  style="padding:4px;">&nbsp;</td  style="padding:4px;">
  </tr>
  <tr>
    <td  style="padding:4px;">宣伝用画像(1024*500)</td  style="padding:4px;">
    <td  style="padding:4px;">OK・NG</td  style="padding:4px;">
    <td  style="padding:4px;">&nbsp;</td  style="padding:4px;">
  </tr>
  <tr>
    <td  style="padding:4px;">アプリアイコン(72*72,48*48,36*36)</td  style="padding:4px;">
    <td  style="padding:4px;">OK・NG</td  style="padding:4px;">
    <td  style="padding:4px;">&nbsp;</td  style="padding:4px;">
  </tr>
  <tr>
    <td  style="padding:4px;">担当プログラマ</td  style="padding:4px;">
    <td  style="padding:4px;">担当者名</td  style="padding:4px;">
    <td  style="padding:4px;">&nbsp;</td  style="padding:4px;">
  </tr>
  <tr>
    <td  style="padding:4px;">素材データの扱いレベル</td  style="padding:4px;">
    <td  style="padding:4px;">&nbsp;</td  style="padding:4px;">
    <td  style="padding:4px;">psdで可か、各パーツpng書き出しが必要か</td  style="padding:4px;">
  </tr>
</table>

<p>以上はアサイン後にチェックが始まります。<br />
デザインデータの書き出しをどちらがやるか、などはメンバーによって変わってくると思います。</p>

<p>そして忘れちゃいけないテスト仕様書づくり。<br />
ここでもれそうなものたち。</p>

<table cellspacing="2px" cellpadding="4px" border="1px" style="padding:4px;">
  <tr>
    <th bgcolor="#EEEEEE" scope="col"  style="padding:4px;">項目</th>
    <th bgcolor="#EEEEEE" scope="col"  style="padding:4px;">チェック</th>
    <th bgcolor="#EEEEEE" scope="col"  style="padding:4px;">備考</th>
  </tr>
  <tr>
    <td  style="padding:4px;">高解像度機種に入れてみてテスト</td  style="padding:4px;">
    <td  style="padding:4px;">OK・NG</td  style="padding:4px;">
    <td  style="padding:4px;">galaxy tabなど、画面が広がっても大丈夫か</td  style="padding:4px;">
  </tr>
  <tr>
    <td  style="padding:4px;">中解像度機種でテスト</td  style="padding:4px;">
    <td  style="padding:4px;">OK・NG</td  style="padding:4px;">
    <td  style="padding:4px;">サイズ以外に縦横比率のチェック</td  style="padding:4px;">
  </tr>
  <tr>
    <td  style="padding:4px;">SDカードがない・いっぱいの場合テスト</td  style="padding:4px;">
    <td  style="padding:4px;">OK・NG</td  style="padding:4px;">
    <td  style="padding:4px;">&nbsp;</td  style="padding:4px;">
  </tr>
  <tr>
    <td  style="padding:4px;">回線寸断テスト</td  style="padding:4px;">
    <td  style="padding:4px;">OK・NG</td  style="padding:4px;">
    <td  style="padding:4px;"><a href="https://market.android.com/details?id=de.j4velin.notificationToggle&hl=ja">これ</a>便利です</td  style="padding:4px;">
  </tr>
  <tr>
    <td  style="padding:4px;">GPSオフでのテスト</td  style="padding:4px;">
    <td  style="padding:4px;">OK・NG</td  style="padding:4px;">
    <td  style="padding:4px;">&nbsp;</td  style="padding:4px;">
  </tr>
  <tr>
    <td  style="padding:4px;">画面回転テスト</td  style="padding:4px;">
    <td  style="padding:4px;">OK・NG</td  style="padding:4px;">
    <td  style="padding:4px;">&nbsp;</td  style="padding:4px;">
  </tr>
  <tr>
    <td  style="padding:4px;">画面オフのテスト</td  style="padding:4px;">
    <td  style="padding:4px;">OK・NG</td  style="padding:4px;">
    <td  style="padding:4px;">&nbsp;</td  style="padding:4px;">
  </tr>
  <tr>
    <td  style="padding:4px;">再インストール時のテスト</td  style="padding:4px;">
    <td  style="padding:4px;">OK・NG</td  style="padding:4px;">
    <td  style="padding:4px;">&nbsp;</td  style="padding:4px;">
  </tr>
</table>

<p>だいたいこんな感じじゃないでしょうか。<br />
あとはおまけ。iPhone版が先にあって、移植する際に見直すポイント。</p>

<table cellspacing="2px" cellpadding="4px" border="1px" style="padding:4px;">
  <tr>
    <th bgcolor="#EEEEEE" scope="col"  style="padding:4px;">項目</th>
    <th bgcolor="#EEEEEE" scope="col"  style="padding:4px;">チェック</th>
    <th bgcolor="#EEEEEE" scope="col"  style="padding:4px;">備考</th>
  </tr>
  <tr>
    <td  style="padding:4px;">上部ボタンのチェック</td  style="padding:4px;">
    <td  style="padding:4px;">OK・NG</td  style="padding:4px;">
    <td  style="padding:4px;">戻るボタンは当たり前として、決定なども、そこでいいのか再考</td  style="padding:4px;">
  </tr>
  <tr>
    <td  style="padding:4px;">選択項目のUI</td  style="padding:4px;">
    <td  style="padding:4px;">OK・NG</td  style="padding:4px;">
    <td  style="padding:4px;">行って戻ってを繰り返すUIにしていないか</td  style="padding:4px;">
  </tr>
  <tr>
    <td  style="padding:4px;">不要な認証設定がないか</td  style="padding:4px;">
    <td  style="padding:4px;">OK・NG</td  style="padding:4px;">
    <td  style="padding:4px;">それShareでよくない？という検証</td  style="padding:4px;">
  </tr>
  <tr>
    <td  style="padding:4px;">設定項目のチェック</td  style="padding:4px;">
    <td  style="padding:4px;">OK・NG</td  style="padding:4px;">
    <td  style="padding:4px;">全般設定で行う項目の見直し</td  style="padding:4px;">
  </tr>
  <tr>
    <td  style="padding:4px;">標準UIの洗い出し</td  style="padding:4px;">
    <td  style="padding:4px;">OK・NG</td  style="padding:4px;">
    <td  style="padding:4px;">Android標準のものがイマイチだったら、デザインしてしまう検討も</td  style="padding:4px;">
  </tr>
</table>

<p><br />
ざっくりまとめてみてこんなところじゃないでしょうか。<br />
このあたり整理されているだけでもチーム内の意思疎通はだいぶうまくいくんじゃないかと。<br />
仕様書以前の確認もれ対策でした。</p>

<p>※対象機種などについては意図的に外してあります。<br />
　基本的にOSバージョンがOKならすべてで動く、というのが大前提なので。</p>

<p><a href="http://www.kayac.com/recruit/career"><big><strong>KAYACでは、わいわいアプリ作りたいエンジニアほかいろいろ、募集しています</strong></big></a></p>]]>
    </content>
</entry>

<entry>
    <title>&quot;動き&quot;の教え方</title>
    <link rel="alternate" type="text/html" href="http://level0.kayac.com/2011/09/post_112.php" />
    <id>tag:level0.kayac.com,2011://1.3297</id>

    <published>2011-09-01T13:22:22Z</published>
    <updated>2011-09-01T13:30:58Z</updated>

    <summary> ...</summary>
    <author>
        <name>shimada</name>
        
    </author>
    
        <category term="Animation" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="en" xml:base="http://level0.kayac.com/">
        <![CDATA[<p><br />
<embed height="400" width="550" align="middle" play="true" loop="true" salign="" menu="true" devicefont="false" wmode="window" quality="high" bgcolor="#000000" name="visibleSample" id="visibleSample" src="http://level0.kayac.com/shimada/swf/ugoki.swf" type="application/x-shockwave-flash"/></p>]]>
        
    </content>
</entry>

</feed>

