appcte

アプリ開発のネタのタネblog

面白アプリ情報や、アプリ開発ノウハウなどをお届けします!

2015年04月

23 4月

LINEスタンプ~企画からリリースまで~

11月から進めてきた「プルプルおばあちゃん」のLINEクリエイターズスタンプ制作。
シーティーイー企画、わるいだ~氏作画のもと、

4月26日(日)AM11時 

遂にリリースです!!

「ナウでヤングなおじいちゃんとおばあちゃん」
宣伝画像申請中


テーマは、「死語&若者語」

コンセプトはズバリ 、


「ギャップ!」




おばあちゃんおじいちゃんの、
こんなセリフや表情が見たい!という願望の元、
わるいだ~さんには、たくさんわがままを聞いていただきまして、
とても、かわいいスタンプが出来上がりました!!

わるいだ~さん、ありがとうございます!!


せっかくなので、
「企画~作成~申請~リジェクト~承認~リリース」
までをご紹介していきたいと思います。


 期間はこんな感じでした。
11月~  案出し、セリフ/イメージ決め
12月~  作画
1月9日  スタンプ申請
1月16日 リジェクト
1月26日 再申請
1月29日 審査待ち
2月3日  審査中
4月22日 承認


企画
アプリ事業部の皆さんに協力してもらい、案を出してもらいました。
・言いにくいセリフ特集、
・説教や小言、
・待ち合わせ、コンパ系、女子高生Ver
などなど面白い案がたくさん出ました。

その中から、わるいだ~さんと相談の上、
「日常で使うセリフの死語&若者語」ということに決定!

制作
細かい要望にも応えていただきながら、
わるいだ~さんに40個分のスタンプを制作していただきました。

 申請
いよいよ申請。
今回は死語という事で、ネタやパロディをいくつか使っていました。

こちらや

16 そんなの関係ねぇ



こちら、
6 バイバイキーン


さらにこちらも。
17 はーい注目!

20 ちょっ待てよ(修正)2



しかし、LINEのガイドラインをよく見ると、

5.2.権利の所在が明確でないもの(例:二次創作など)


と記されている事に気づきました。

明らかに引っ掛かるであろう、
「そんなの関係ねぇ」「バイバイキーン」  
は、さすがに差し替えたのですが、

 「ちょっ、待てよ」「はーい注目」はギリギリセーフなのでは?!
という事で試しに申請してみました。


そして、結果は・・・



「ちょっ、待てよ」 → 通過!

「はーい注目!」 →リジェクト!


うーーん。。。
基準はよく分かりません・・・


そして、「あざ~す」に変更して、再申請。
17 あざ_っす(修正)

これも際どい所なので、ドキドキしましたが。笑

結果、

「あざ~す」は 通過!!


承認~リリース
4月22日ついに承認されました!!
再申請してから2ヵ月半掛かりました。
待ち遠しかったです!!

あとはリリースボタンを押せばストアに上がる訳ですが。
せっかくなので、告知してから上げたいと思いまして。

告知させてください。

「ナウでヤングなおじいちゃんとおばあちゃん」

4月26日(日)発売!!!

 皆さま、どうぞ購入してくださいー!!

プルプルおばあちゃんのアプリもよろしくお願いします♪
 
18 4月

FlashとHTML5。そして……。

みなさま

お疲れ様です。
大澤です。

前回のブログの最後に「Flash CC(2014)のスタートアップスクリーンに「HTML5 Canvas」という表示が出てビックリ!」
と書きました。
今回はFlash CC(2014)で、従来通りの「Actionscript3.0」と、新規作成画面に表示される「HTML5 Canvas」でそれぞれ作成し、比較してみようと思います。

まずは従来の作成方法で新規作成画面から「ActionScript3.0」を選び、幅:550px、高さ400px、フレームレートは24fpsとします。
※フレームレートとは、24フレームで1秒のアニメーションということです。
01
下図のような星の図形をつくり、クリックすると左上から右下に移動するアニメーションを作ります。
02
タイムラインは以下のようにし、1フレーム目に静止した星を配置、クリックすると2フレームに移動するという仕組みにしました。
2フレームからは右下に移動するアニメーションにしてあります。
※2フレーム~25フレームなので、その間の24フレームを1秒とするようにしました(24fps)
03
1フレーム目のActionscriptは以下です。
  1. import flash.events.MouseEvent;
  2. stop();
  3. myStar.addEventListener(MouseEvent.CLICK,starClick);
  4. function starClick(e:MouseEvent):void{
  5.     gotoAndPlay(2);
  6. }

25フレーム目は、
  1. stop();

でアニメーション終了です。

さて、次に「HTML5 Canvas」で新規作成します。
04

05
???
開いた画面を見ると、いつものFlashと同じで、不思議なことにActionscriptを書く「アクション」パネルもそのままです。
疑問に思いつつ、さきほどと同じ作り方をしてみました。
手間を省くため、さきほどのドキュメントからフレームごとコピーしペーストしましたが、
Actionscriptのフレームをペーストしたところ、出力パネルに、
「theStarHTML5_canvas.fla でのコピーまたは読み込み中に警告が生成されました :
* フレームスクリプトにコメントが追加されました」

と表示されActionscriptはコメントアウトされてしまいました。
06
とりあえず、コメントから外しパブリッシュ設定で「JavaScript/HTML」を選択、プレビューしてみました。
すると、以下のような表示が……。
「警告 :
EaselJS のフレーム番号は 1 ではなく 0 から始まっています。これは gotoAndStop や gotoAndPlay などのメソッドの呼び出しに影響します。
モーショントゥイーンはフレームアニメーションとしてパブリッシュされます。可能な場合はクラシックトゥイーンを使用してください。」


??
モーショントゥイーンではなくクラシックトゥイーンにすればいいの??
しかし、クラシックトゥイーンにしても
「警告 :
EaselJS のフレーム番号は 1 ではなく 0 から始まっています。これは gotoAndStop や gotoAndPlay などのメソッドの呼び出しに影響します。」

の表示は消えません。
仕方がない!
こうなったら「コードスニペット」の出番だ!
「コードスニペット」とはActionscript、Javascriptの入力補佐をしてくれる便利なコマンドセットです。
07
対象のオブジェクトを選択し、コードスニペットをダブルクリックで確定します。
今回は、1フレームに「クリックして特定のフレームに移動し、再生」
25フレームに「このフレームで停止」を入力しました。
08-1
▲1フレーム
08-2
▲25フレーム

便利なことに丁寧なコメントも記載してくれます。
プレビューしてみたところ、相変わらず警告は表示されますが、ブラウザによっては動いてくれました。
※ブラウザ別の動作結果は以下
 Google Chrome バージョン:42.0.2311.90 ×
 Opera バージョン:28.0 ×
 Safari バージョン:8.0.5 ◯
 Firefox バージョン:37.0.1 ◯

パブリッシュ設定により、flaファイルも含め書き出されるファイルは以下です。
09
書き出されたhtmlのソースは以下
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>theStarHTML5_canvas</title>
  6. <script src="http://code.createjs.com/easeljs-0.7.1.min.js"></script>
  7. <script src="http://code.createjs.com/tweenjs-0.5.1.min.js"></script>
  8. <script src="http://code.createjs.com/movieclip-0.7.1.min.js"></script>
  9. <script src="http://code.createjs.com/preloadjs-0.4.1.min.js"></script>
  10. <script src="theStarHTML5_canvas.js"></script>
  11. <script>
  12. var canvas, stage, exportRoot;
  13. function init() {
  14.     canvas = document.getElementById("canvas");
  15.     images = images||{};
  16.     var loader = new createjs.LoadQueue(false);
  17.     loader.addEventListener("fileload", handleFileLoad);
  18.     loader.addEventListener("complete", handleComplete);
  19.     loader.loadManifest(lib.properties.manifest);
  20. }
  21. function handleFileLoad(evt) {
  22.     if (evt.item.type == "image") { images[evt.item.id] = evt.result; }
  23. }
  24. function handleComplete() {
  25.     exportRoot = new lib.theStarHTML5_canvas();
  26.     stage = new createjs.Stage(canvas);
  27.     stage.addChild(exportRoot);
  28.     stage.update();
  29.     createjs.Ticker.setFPS(lib.properties.fps);
  30.     createjs.Ticker.addEventListener("tick", stage);
  31. }
  32. </script>
  33. </head>
  34. <body onload="init();" style="background-color:#D4D4D4">
  35.     <canvas id="canvas" width="550" height="400" style="background-color:#FFFFFF"></canvas>
  36. </body>
  37. </html>


Javascriptのソースは以下
  1. (function (lib, img, cjs) {
  2. var p; // shortcut to reference prototypes
  3. var rect; // used to reference frame bounds
  4. // library properties:
  5. lib.properties = {
  6.     width: 550,
  7.     height: 400,
  8.     fps: 24,
  9.     color: "#FFFFFF",
  10.     manifest: [
  11.         {src:"images/star.png", id:"star"}
  12.     ]
  13. };
  14. // symbols:
  15. (lib.star = function() {
  16.     this.initialize(img.star);
  17. }).prototype = p = new cjs.Bitmap();
  18. p.nominalBounds = new cjs.Rectangle(0,0,100,100);
  19. (lib.starObj = function() {
  20.     this.initialize();
  21.     // レイヤー 1
  22.     this.instance = new lib.star();
  23.     this.instance.setTransform(-50,-50);
  24.     this.addChild(this.instance);
  25. }).prototype = p = new cjs.Container();
  26. p.nominalBounds = rect = new cjs.Rectangle(-50,-50,100,100);
  27. p.frameBounds = [rect];
  28. // stage content:
  29. (lib.theStarHTML5_canvas = function(mode,startPosition,loop) {
  30. if (loop == null) { loop = false; }    this.initialize(mode,startPosition,loop,{});
  31.     // timeline functions:
  32.     this.frame_0 = function() {
  33.         /* クリックして特定のフレームに移動し、再生
  34.         特定のシンボルインスタンス上でクリックすると、再生ヘッドがタイムラインの指定フレームに移動し、そのフレームから再生が継続されます。
  35.         メインタイムラインまたはムービークリップタイムライン上で使用できます。
  36.         
  37.         手順 :
  38.         1. 以下のコード内の数値 5 を、シンボルインスタンスのクリック時に再生ヘッドが移動するフレームの番号に置き換えます。
  39.         2. EaselJS のフレーム番号は、1 ではなく 0 から始まります。
  40.         */
  41.         this.stop();
  42.         this.myStar.addEventListener("click", fl_ClickToGoToAndPlayFromFrame_2.bind(this));
  43.         
  44.         function fl_ClickToGoToAndPlayFromFrame_2()
  45.         {
  46.             this.gotoAndPlay(1);
  47.         }
  48.     }
  49.     this.frame_24 = function() {
  50.         /* このフレームで停止
  51.          タイムラインは、このコードが挿入されたフレームで停止 / 一時停止します。
  52.         ムービークリップのタイムラインの停止 / 一時停止にも使用できます。
  53.         */
  54.         
  55.         this.stop();
  56.     }
  57.     // actions tween:
  58.     this.timeline.addTween(cjs.Tween.get(this).call(this.frame_0).wait(24).call(this.frame_24).wait(1));
  59.     // 星のオブジェクト
  60.     this.myStar = new lib.starObj();
  61.     this.myStar.setTransform(50,50);
  62.     this.timeline.addTween(cjs.Tween.get(this.myStar).wait(1).to({x:500,y:350},23).wait(1));
  63. }).prototype = p = new cjs.MovieClip();
  64. p.nominalBounds = rect = new cjs.Rectangle(275,200,100,100);
  65. p.frameBounds = [rect, rect, new cjs.Rectangle(294.6,213.1,100,100), new cjs.Rectangle(314.2,226.1,100,100), new cjs.Rectangle(333.7,239.2,100,100), new cjs.Rectangle(353.3,252.2,100,100), new cjs.Rectangle(372.9,265.2,100,100), new cjs.Rectangle(392.4,278.3,100,100), new cjs.Rectangle(412,291.3,100,100), new cjs.Rectangle(431.5,304.4,100,100), new cjs.Rectangle(451.1,317.4,100,100), new cjs.Rectangle(470.7,330.5,100,100), new cjs.Rectangle(490.2,343.5,100,100), new cjs.Rectangle(509.8,356.5,100,100), new cjs.Rectangle(529.4,369.6,100,100), new cjs.Rectangle(548.9,382.6,100,100), new cjs.Rectangle(568.5,395.7,100,100), new cjs.Rectangle(588.1,408.7,100,100), new cjs.Rectangle(607.6,421.8,100,100), new cjs.Rectangle(627.2,434.8,100,100), new cjs.Rectangle(646.8,447.8,100,100), new cjs.Rectangle(666.3,460.9,100,100), new cjs.Rectangle(685.9,473.9,100,100), new cjs.Rectangle(705.5,487,100,100), new cjs.Rectangle(725,500,100,100)];
  66. })(lib = lib||{}, images = images||{}, createjs = createjs||{});
  67. var lib, images, createjs;

これらを踏まえ、HTML5 Canvas作成の補佐的な役割と考えた方が良さそうですね。
さらにHTML5、CSS3、Javascriptの勉強を続けたいと思います。

ちなみに、色々なサイトを参考にシンプルに書いてみました。
※一応、動いてくれますが、勉強中のため記述に間違いもあるかも知れません。
 ベンダープレフィックスを付与してあるので、上記の全てのブラウザで動きました。
  1. <!DOCTYPE HTML>
  2. <html lang="ja">
  3. <head>
  4.  <meta charset="UTF-8">
  5.  <style type="text/css">
  6.   body{
  7.     margin: 0;
  8.     padding: 0;
  9.     width:550px;
  10.     height:400px;
  11.     border:solid 1px #000000;
  12.   }
  13.   .target02{/*1秒で移動*/
  14.     -moz-transition: 1s linear;
  15.     -webkit-transition: 1s linear;
  16.     -o-transition: 1s linear;
  17.     -ms-transition: 1s linear;
  18.   }
  19.   .target02.on{/*到達座標、ステージ - 星の大きさ*/
  20.     -moz-transform: translate(450px,300px);
  21.     -webkit-transform: translate(450px,300px);
  22.     -o-transform: translate(450px,300px);
  23.     -ms-transform: translate(450px,300px);
  24.   }
  25. </style>
  26. <script type="text/javascript">
  27.   function starAction() {/*クリックすると動き出す関数定義*/
  28.     var target = document.querySelector('.target'),
  29.     target02 = document.querySelector('.target02'),
  30.     countNum02 = 0,
  31.     trnstnCountNum02 = 0;
  32.     target02.addEventListener('click', starMove);
  33.     function starMove(e) {/*移動する関数定義*/
  34.       countNum02 ++;
  35.       target02.classList.add('on');
  36.     }
  37.   }
  38.   document.addEventListener('DOMContentLoaded', starAction);
  39. </script>
  40. </head>
  41. <body>
  42.   <img src="star.png" class="target02"></div>
  43. </body>
  44. </html>

長くなりました。
今回はこのくらいにし……。
…と、言いつつ「One More Thing」w

InDesignで同じアニメーションを作ってみます。
InDesignでもCS5から「インタラクティブ」機能が搭載され、簡単なアニメーションが作成できるようになりました。
11
▲ウィンドウメニューから、インタラクティブ→アニメーションを選択します。
 他にも色々なインタラクティブ機能があります。
12
▲アニメーションパネルが表示されるので任意の動きを選択します。
 今回は「右に移動」を選択します。
13
▲イベントで、アニメーションのトリガーになる項目を選択します。
14
▲モーションパスをカスタマイズし、動かしたい方向、距離などを調節します。
 動作する時間なども、ここで設定します。
15
▲最後にファイルメニューよりSWF書き出しを選択し、任意設定をします。
 HTMLファイルも書き出してブラウザで確認してみましょう。

おもしろいですね。
長くなり、失礼いたしました。
最後まで読んで下さり、心より感謝いたします。
8 4月

期間限定!「いしきりんもぐもぐ商店街」がPSO2とコラボ★

去年7月にリリースしたスマートフォン向け無料アプリ「いしきりんもぐもぐ商店街」がなんと!

4月~8月末までの期間限定でSEGA「PSO2(ファンタシースターオンライン2)」とのコラボが決まり、無事、4月5日にリリースすることが出来ました!

アプリの「難しいモード」で50枚以上の葉っぱを獲得すると、ゲーム内にPSO2ステージが出現し、PSO2でおなじみのキャラクター達が登場します!

また、PSO2ステージで100枚以上の葉っぱを獲得すると、何かが起こるかも!? 

期間限定!人気キャラクター「フォニュエール」の衣装に身を包んだ、いしきりんをどうぞご堪能ください★★★


コラボ期間:2015年4月5日(土)~8月31日(月)

ダウンロード:

【App Store】iPhoneはこちらから

【Google Play】 Androidはこちらから

いしきりんアプリPR動画(30秒)



【松竹芸能様HP】
スマートフォン向けアプリ「いしきりんもぐもぐ商店街」に「PSO2」ⓒSEGAステージが出現
http://www.shochikugeino.co.jp/topics/2015/04/pso2sega.html


記事検索
ギャラリー
  • 行ってきました「IGAS2015」!
  • 行ってきました「IGAS2015」!
  • 行ってきました「IGAS2015」!
  • 行ってきました「IGAS2015」!
  • 行ってきました「IGAS2015」!
  • 行ってきました「IGAS2015」!
  • 行ってきました「IGAS2015」!
  • 行ってきました「IGAS2015」!
  • 行ってきました「IGAS2015」!
  • 行ってきました「IGAS2015」!
  • 行ってきました「IGAS2015」!
  • 行ってきました「IGAS2015」!
  • 行ってきました「IGAS2015」!
  • ちょっとWEBのお話…。~Emmet編~
  • ちょっとWEBのお話…。~Emmet編~