tag:blogger.com,1999:blog-65735797506208208242024-03-13T17:07:03.112+09:00TSUKISHIMA BLOGスマホアプリ開発やアナログゲームを製作している月島ファクトリーの公式ブログです。月島ファクトリーhttp://www.blogger.com/profile/07339592049671359509noreply@blogger.comBlogger11125tag:blogger.com,1999:blog-6573579750620820824.post-37223444782601390232024-02-05T18:28:00.005+09:002024-02-05T18:44:09.994+09:00Unity公式ドキュメントを通して読んでみた<p>つよつよエンジニアになるには、公式ドキュメントを読むことが大事だと、誰かが言っていた。</p><p>というわけで、仕事で主に扱っている『Unity』の公式ドキュメントを通読してみた。</p><p>→実際読んだのは<a href="https://docs.unity3d.com/ja/2021.3/Manual/"><span style="color: #2b00fe;">コチラ</span></a>(2021.3)</p><p></p><div class="separator" style="clear: both; text-align: center;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEikB9Nalq9uW9m9tVndw5TVdL_P7YvxGp-vukJvS0tV9n26YN63FES-1YliwnLk5wWGAUKsUxu-KkLn7TCFS2P_JDZfkXGZy4HOwcw3nioAjme3EMtuPvgr3fYKjWddZZZgUZsQbyRwenb_tXS-U1if7wjmEM_7sDhtMkz8CpEKwHg77EtsOXRFLJMsu6c" style="margin-left: 1em; margin-right: 1em;"><img data-original-height="1032" data-original-width="1920" height="215" src="https://blogger.googleusercontent.com/img/a/AVvXsEikB9Nalq9uW9m9tVndw5TVdL_P7YvxGp-vukJvS0tV9n26YN63FES-1YliwnLk5wWGAUKsUxu-KkLn7TCFS2P_JDZfkXGZy4HOwcw3nioAjme3EMtuPvgr3fYKjWddZZZgUZsQbyRwenb_tXS-U1if7wjmEM_7sDhtMkz8CpEKwHg77EtsOXRFLJMsu6c=w400-h215" width="400" /></a></div><br /></div><p></p><p>サイドバーには23の項目があるが、それぞれの項目に深いネストがあり、機械的に計測すると1960のページがあるよう……。</p><p>関係ないところは飛ばしつつ、1か月以上かけて流し読みしたので、役立ちそうな部分や面白かった部分を紹介してみます。</p><p><br /></p><p>読んでいる際の筆者の指向性は以下の3点。</p><p>・Unityならではの仕組みを勉強し直す。</p><p>・Unityを使ってAndroid+iOSのアプリを作ることを想定(ゲームに限らず)</p><p>・個人的に面白いと思ったことは調べてみる。</p><p><br /></p><p>では、おすすめのページを以下に記していきます。</p><p><br /></p><p style="text-align: left;"><span style="font-size: medium;">〇<a href="https://docs.unity3d.com/ja/current/Manual/EditingValueProperties.html" rev="en_rl_none"><span style="color: #2b00fe;">プロパティの編集</span></a></span></p><div>特にNumeric field expressionsについて。</div><div>複数のオブジェクトを規則的に並べたいとき、例えば、position.xにL(0,10)に入力すると、その範囲で規則的に配置してくれる。</div><div>手動でUIを均等配置したいとき、覚えておくと使えそう。</div><div><br /></div><p style="text-align: left;"><span style="font-size: medium;">〇<a href="https://docs.unity3d.com/ja/current/Manual/performance-garbage-collection-best-practices.html" rev="en_rl_none"><span style="color: #2b00fe;">ガベージコレクションのベストプラクティス<br /></span></a>〇<a href="https://docs.unity3d.com/ja/current/Manual/BestPracticeUnderstandingPerformanceInUnity.html" rev="en_rl_none"><span style="color: #2b00fe;">Unityにおける最適化</span></a></span></p><div>Unityのパフォーマンスを上げるうえでの基礎知識。</div><div>中でも「<a href="https://docs.unity3d.com/ja/current/Manual/BestPracticeUnderstandingPerformanceInUnity5.html" rev="en_rl_none"><span style="color: #2b00fe;">文字列とテキスト</span></a>」の文字列の連結処理に関する注意書きは、自分でも引っかかったので感慨深い。</div><div>for文などで、str += "add string" のようなコードをループ処理すると、大量のメモリを消費するため、GCが起きて一瞬止まることになる。</div><div>そういうときはStringBuilderを使いましょう。</div><div><br /></div><p style="text-align: left;"><span style="font-size: medium;">〇<a href="https://docs.unity3d.com/ja/current/Manual/SpecialFolders.html" rev="en_rl_none"><span style="color: #2b00fe;">特殊なフォルダ名</span></a></span></p><div>Assets</div><div>Editor</div><div>Resources</div><div>StreamingAssets</div><div>など、見たことあるフォルダ名は、Unityの予約語でした。</div><div>どういう役割や機能を持っていたのか、</div><div>もしも知らずに名前変えてしまうと痛い目に合いそうなので、1度目を通しておくと安心です。</div><div><br /></div><p style="text-align: left;"><span style="font-size: medium;">〇<a href="https://docs.unity3d.com/ja/2019.4/Manual/PluginsForIOS.html" rev="en_rl_none"><span style="color: #2b00fe;">iOS用のプラグインをビルド</span></a></span></p><div>iOS用プラグインのお作法について。</div><div>プラグインをそのまま使うならいいけど、改造するときなどは最初のとっかかりとして、この辺りを知っておきたい。</div><div><br /></div><div><p><span style="font-size: medium;">〇<a href="https://docs.unity3d.com/ja/current/Manual/ScriptingConcepts.html" rev="en_rl_none"><span style="color: #2b00fe;">スクリプティングの概念</span></a></span></p><div>おそらくプログラマの本業にもっとも使う領域</div><div>実務経験があるなら、ほとんど知っているとは思うが、</div><div>せめてこのカテゴリ以下については目を通しておきたい。</div><div><br /></div><div><span style="font-size: medium;">〇<a href="https://docs.unity3d.com/ja/current/Manual/class-Mathf.html" rev="en_rl_none"><span style="color: #2b00fe;">重要なクラス - Mathf</span></a></span></div><div>この項目を知らなくてもコードは書ける。</div><div>だが、知らずに自分でcommon関数を作らないためにも見ておきたい。</div><div>例えば、「ある数値をmin-maxの間に納めたい」という場合、</div><div></div><blockquote><div>if(x < min){ x = min; }</div><div>if(x > max){ x = max; }</div></blockquote><div></div><div>みたいなコードを書くこともできますが、</div><div>実はそういうユーティリティは、ここに入ってるので、下記関数で一発。</div><div><blockquote>x = Mathf.Clamp(x,min,max);</blockquote></div><div>(私はこれまで、Clamp関数を何度も自作しました……。反省。)</div></div><div><br /></div><div><br /></div><div><br /></div><div><br /></div><div><br /></div><div>ー番外編ー</div><div>プログラマは触らないかもだけど、個人的に面白かった仕組み2戦。</div><div><br /></div><p style="text-align: left;"><span style="font-size: medium;">〇<a href="https://docs.unity3d.com/ja/current/Manual/StandardShaderMaterialParameterNormalMap.html" rev="en_rl_none"><span style="color: #2b00fe;">法線マップ(バンプマップ)</span></a></span></p><div>3D空間を扱うとき「ポリゴンが形を作って、テクスチャを張り付けて」というのが基本のイメージだけど、細かい凹凸パターンをポリゴンで真面目に作るとデータ量がマッハ。</div><div>大まかな形はポリゴンで作り、テクスチャ側で凹凸をつける仕組みが法線マップ。</div><div>ポリゴン上は平面なのに、ちゃんと影ができるぞ!</div><div><br /></div><p style="text-align: left;"><span style="font-size: medium;">〇<a href="https://docs.unity3d.com/ja/current/Manual/LinearLighting.html" rev="en_rl_none"><span style="color: #2b00fe;">色空間</span></a></span></p><div>リニア色空間とガンマ色空間について。</div><div>光の強さを0.0から1.0まで均等に割り振ったのがリニア色空間ですが、</div><div>人間の目は、明るさに対してよく反応するため、白が強く見えてしまいます。</div><div>そこに補正を加えたものがガンマ色空間です。</div><div>「なんか思ったより明るい/暗い」という時には、この辺りが怪しいかも。</div><div><br /></div><div><br /></div><div>以上。</div><div><br /></div><div>他にもシェーダとか、URPとか、知っておきたい項目はいろいろあるので、</div><div>通読でなくても、ちょこちょこ公式ドキュメントを読みましょう。</div><div>今すぐどこかで使えるものではないけども、いつかどこかで役に立つはず。</div><div>どんな分野にも基礎練習ってあると思いますが、プログラムにおいてはこういうことなのかも?</div><div><br /></div><p><br /></p>MtFormhttp://www.blogger.com/profile/11827834530078186680noreply@blogger.com0tag:blogger.com,1999:blog-6573579750620820824.post-8044496348630137122020-05-07T19:55:00.002+09:002020-05-13T20:08:17.976+09:00【RSS】Bloggerの更新情報を表示する<h2>
<span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;">これは、Bloggerの更新情報を取得して、HPにブログの最新記事情報を載せた時のお話です。</span></h2>
<div>
<span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;"><br /></span></div>
<b style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13.2px;"><span style="color: #6aa84f;">ある日の出来事…</span></b><br />
<b style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13.2px;"><span style="color: #6aa84f;"><br /></span></b>
<b style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13.2px;"><span style="color: orange;">*:.。..。.:+·゚·✽:.。..。.:+·゚·✽:.。..。.:+·゚·✽:.。..。.:+·゚·*:.。..。.:+</span></b><br />
<br />
<span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;">(会</span><span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;">・ω・</span><span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;">社) HPに自社ブログの最新情報のせてよ。</span><br />
<span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;"><br /></span>
<span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;">(´・ω・`) 御意。</span><br />
<span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;"><br /></span>
<span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;">(´・ω・`) </span><span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;">…</span><span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;">ぽちぽち</span><span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;">💻</span><span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;">。</span><br />
<span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;"><br /></span>
<span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;">(´・ω・`)つ できました。</span><br />
<span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;"><br /></span>
<br />
<table cellpadding="0" cellspacing="0"><tbody>
<tr>
<td>変更前<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIb8kXoGAXXItwx4YsCyJYhXc6zw5iPM_-9lXTHgETugfp3TWerC6C-aRFT5RHa0nEpyl9mIhtuIkHC_8_i_wFn5jVb10GFYSJIxuDiUQaZkt4rqVGvfmM357IgLfQsTt1bCZajK9vP4rW/s1600/HP%25E3%2583%2596%25E3%2583%25AD%25E3%2582%25B0%25E4%25BB%2598%25E3%2581%2591%25E3%2582%258B%25E5%2589%258D.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="HPにブログ記事を載せる前" border="0" data-original-height="942" data-original-width="887" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIb8kXoGAXXItwx4YsCyJYhXc6zw5iPM_-9lXTHgETugfp3TWerC6C-aRFT5RHa0nEpyl9mIhtuIkHC_8_i_wFn5jVb10GFYSJIxuDiUQaZkt4rqVGvfmM357IgLfQsTt1bCZajK9vP4rW/s200/HP%25E3%2583%2596%25E3%2583%25AD%25E3%2582%25B0%25E4%25BB%2598%25E3%2581%2591%25E3%2582%258B%25E5%2589%258D.png" title="HPにブログ記事を載せる前" width="188" /></a></div>
</td>
<td>変更後<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEj5WcC6EL1iDMqUqb4SPM6RfnVponskm1brSNPyRvx4jK9Y2-PVOWEh8i0ErOuGTNP0zmjmpjleIFR0YmINp38luYswfIf4m3WnfkxkqgkQGG8fML51lbrkaZK773IuD70mZWVk98UuN9/s1600/%25E3%2583%2596%25E3%2583%25AD%25E3%2582%25B0%25E5%25A4%2589%25E6%259B%25B4%25E5%2589%258D%25EF%25BC%2588%25E9%259B%2586%25E4%25B8%25AD%25E7%25B7%259A%25EF%25BC%2589.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="HPにブログ記事を載せた後(iflame)" border="0" data-original-height="942" data-original-width="875" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEj5WcC6EL1iDMqUqb4SPM6RfnVponskm1brSNPyRvx4jK9Y2-PVOWEh8i0ErOuGTNP0zmjmpjleIFR0YmINp38luYswfIf4m3WnfkxkqgkQGG8fML51lbrkaZK773IuD70mZWVk98UuN9/s200/%25E3%2583%2596%25E3%2583%25AD%25E3%2582%25B0%25E5%25A4%2589%25E6%259B%25B4%25E5%2589%258D%25EF%25BC%2588%25E9%259B%2586%25E4%25B8%25AD%25E7%25B7%259A%25EF%25BC%2589.jpg" title="HPにブログ記事を載せた後(iflame)" width="186" /></a></div>
</td>
</tr>
</tbody></table>
<span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;"><br />(会</span><span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;">・ω・</span><span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;">社) ・・・なにこれ。</span><br />
<span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;"><span style="font-size: 13.2px;">(´・ω・`) iframe に スマホサイトぶち込みました。</span></span><br />
<span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;"><span style="font-size: 13.2px;"><br /></span></span>
<span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;"></span>
<span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;">(会👁</span><span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;">ω</span><span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;"><span style="font-size: 13.2px;">👁</span>社) ・・・。</span><br />
<span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;"><span style="font-size: 13.2px;">(´<span style="font-size: 13.2px;">・ω・</span>`) はい。ごめんなさい。ほんと、ごめんなさい。</span></span><br />
<span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;"><span style="font-size: 13.2px;"><br /></span></span>
<span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;"><span style="font-size: 13.2px;"><b style="font-size: 13.2px;"><span style="color: orange;">*:.。..。.:+·゚·✽:.。..。.:+·゚·✽:.。..。.:+·゚·✽:.。..。.:+·゚·*:.。..。.:+</span></b></span></span><br />
<span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;"><span style="font-size: 13.2px;"><b style="font-size: 13.2px;"><span style="color: orange;"><br /></span></b></span></span>
<span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;">こんにちは👀</span><br />
<span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;">月島ファクトリープログラマー(?)のmotchyと申します👶</span><br />
<span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;">冒頭の経緯から、BloggerのRSS情報の取得~表示を行いました。</span><br />
<span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;"><br /></span>
<span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;">BloggerのRSS情報を取得するのに便利なライブラリに出会いましたので、今回はそちらのライブラリをご紹介します。</span><br />
<span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;"><br /></span>
<span style="font-family: "source sans pro" , "lucida grande" , sans-serif; font-size: 24px; font-weight: 600; letter-spacing: -0.8px; white-space: nowrap;">rss-parser</span><br />
<a href="https://www.npmjs.com/package/rss-parser%20font-size:%2013.2px;">https://www.npmjs.com/package/rss-parser</a><br />
<br />
<span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;"><a href="https://www.npmjs.com/package/rss-parser#web">ココ</a>のとおりに実装するとアラ便利。</span><br />
<span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;">タイトル・日付・リンクがとれるとれる。</span><br />
<span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;">ひゃっほー</span><span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;">(´・ω・`)🎵</span><br />
<span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;"><br /></span>
<span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;">ということで、変更後が下記になります。</span><br />
<span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;">とってもスッキリしました。</span><br />
<span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;"><br /></span>
<br />
<table cellpadding="0" cellspacing="0"><tbody>
<tr>
<td>変更前<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJvh1tuYvQ1bZIC9PTAiymy4tU-WTtQdEb8N8gLI-ZCdZVHLXzW13QvusDaLGAaisWqSvRCvX9g5bDeqzXfIVq0CKnK8vGvwDnV9uHu2n6ZtDM_3HGnJJBTmdiIAdv-YBQcD51C_sK2Qh7/s1600/%25E3%2583%2596%25E3%2583%25AD%25E3%2582%25B0%25E5%25A4%2589%25E6%259B%25B4%25E5%2589%258D.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="HPにブログ記事を載せた後(iflame)" border="0" data-original-height="942" data-original-width="875" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJvh1tuYvQ1bZIC9PTAiymy4tU-WTtQdEb8N8gLI-ZCdZVHLXzW13QvusDaLGAaisWqSvRCvX9g5bDeqzXfIVq0CKnK8vGvwDnV9uHu2n6ZtDM_3HGnJJBTmdiIAdv-YBQcD51C_sK2Qh7/s200/%25E3%2583%2596%25E3%2583%25AD%25E3%2582%25B0%25E5%25A4%2589%25E6%259B%25B4%25E5%2589%258D.png" title="HPにブログ記事を載せた後(iflame)" width="186" /></a></div>
</td>
<td>変更後(すっきり)<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc4XVgBDyqo3x5tMiHEcCbkG6B5DBk3vybAweb7hnStrU-hEUDiIBedc6O0YZPvtV0YyUvedpSi__m2cxepB4nUqjF7Diy22d3QbT4f635O_chlRP86C0Kk7dw-WcDj5FarvN7_ssecL77/s1600/%25E3%2583%2596%25E3%2583%25AD%25E3%2582%25B0%25E5%25A4%2589%25E6%259B%25B4%25E5%25BE%258C2.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="HPにブログ記事を載せた後(RSS)" border="0" data-original-height="942" data-original-width="879" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc4XVgBDyqo3x5tMiHEcCbkG6B5DBk3vybAweb7hnStrU-hEUDiIBedc6O0YZPvtV0YyUvedpSi__m2cxepB4nUqjF7Diy22d3QbT4f635O_chlRP86C0Kk7dw-WcDj5FarvN7_ssecL77/s200/%25E3%2583%2596%25E3%2583%25AD%25E3%2582%25B0%25E5%25A4%2589%25E6%259B%25B4%25E5%25BE%258C2.png" title="HPにブログ記事を載せた後(RSS)" width="187" /></a></div>
</td>
</tr>
</tbody></table>
<span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;"><br /></span><span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;">現在は、新着5件だけ表示するだけなのですが、そのうち「and more」的なおしゃれな英語使って、10件づつ動的にとれるようにできたらいいなと思ってます。</span><br />
<span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;"><br /></span>
<span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;">思った以上にお手軽に対応できたので、WEBサイトにブログ埋め込みたいんじゃーな人は、rss-parser是非使ってみてください。</span><br />
<span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;"><br /></span>
<span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;"><br /></span>
<span style="font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;"><b>【参考にさせていただいたサイト】</b></span><br />
<span style="font-size: 13.2px;"><span style="font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif;"><a href="http://t-n-clark.hatenadiary.jp/entry/2019/05/30/113000">やっぱりはてなブログを自分のホームページに埋め込みたい</a></span></span><br />
<span style="font-size: 13.2px;"><span style="font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif;"><a href="https://feed.mikle.com/ja/support/google-blogger-rss/#headline002">Blogger用のブログパーツを作成する</a></span></span><br />
<span style="font-size: 13.2px;"><br /></span>
<span style="font-size: 13.2px;"><span style="font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif;"><br /></span></span>motchyhttp://www.blogger.com/profile/05178822391380919338noreply@blogger.com0tag:blogger.com,1999:blog-6573579750620820824.post-47738753186877138372019-11-21T14:06:00.000+09:002019-11-21T14:06:26.902+09:00【JavaScript】コーディング規約を選定した話<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?lang=vb&lang=css&skin=desert" type="text/javascript"></script>
<br />
初めまして、MtFormです。<br />
今回はVue.jsのプロジェクトのコーディング規約を定めるにあたっていろいろ迷ったお話です。<br />
<br />
<br />
<h2>
コーディング規約とは(ざっくり概念)</h2>
<div>
<br /></div>
プログラムって、同じ動作をする場合でも異なる書き方ができますよね。<br />
例えば、<br />
<pre class="prettyprint lang-js linenums">let a,b,c;
</pre>
と書くか、<br />
<pre class="prettyprint lang-js linenums">let a;
let b;
let c;
</pre>
と書くか。<br />
<br />
このあたりは個人の好みで書き方が分かれてしまうので、複数人でコードを書くとバラバラの記法になって、バグの原因になったりします。<br />
そこで、コードの書き方を統一するためのルールを定めることにしました、これがコーディング規約です。<br />
<br />
<br />
<br />
<br />
<h2>
メジャーなJSコーディング規約</h2>
<div>
<br /></div>
コーディング規約を1から全部決めるのは大変なので、大手の企業が公開しているコーディング規約を使わせていただきます。(場合によってはカスタマイズします)<br />
今回は3つの候補に絞りました。<br />
<br />
<h3>
JavaScript Standard Style</h3>
<br />
<div>
・2015年に提唱された。ESLintのサブセットである(カスタマイズ済のESLint)</div>
<div>
・行末のセミコロン禁止のため、人によっては受け入れられない。</div>
<div>
※セミコロンを必須とした「JavaScript Semi-Standard Style」もある。</div>
<div>
<br /></div>
<h3>
Google JavaScript Style Guide</h3>
<div>
・ESLintの候補として表示されるほど標準的なスタイル</div>
<div>
・AngularやGWTなどを開発しているGoogle製</div>
<div>
<br /></div>
<h3>
Airbnb JavaScript Style Guide</h3>
<div>
・ESLintで候補として表示されるほど標準的なスタイル</div>
<div>
・GitHub上で最も人気のあるスタイル(starが90kで第1位、第2位は22.7k:2019年11月現在)</div>
<div>
・オープンな議論を通じてスタイルが決定している。</div>
<div>
・スタイルについてパフォーマンスに関するエビデンスがある。</div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<h2>
選ばれたのはAirbnbでした</h2>
</div>
<div>
<br /></div>
<div>
どのスタイルガイドもESLint(JSの構文チェッカー)に対応しているのですが、パフォーマンスに対するエビデンスがあるということで、Airbnb JavaScript Style Guide を利用することにしました。</div>
<div>
<br /></div>
<div>
今回のプロジェクトはVue-CLIで作られていたので、導入は次のコマンドでOK</div>
<span style="color: rgba(0 , 0 , 0 , 0.8); font-family: "fira mono" , "andale mono" , "consolas" , monospace; font-size: 14px; white-space: nowrap;">$ yarn add</span><span style="color: rgba(0 , 0 , 0 , 0.8); font-family: "fira mono" , "andale mono" , "consolas" , monospace; font-size: 14px; white-space: nowrap;"> </span><span style="color: rgba(0 , 0 , 0 , 0.8); font-family: "fira mono" , "andale mono" , "consolas" , monospace; font-size: 14px; white-space: nowrap;">@vue/eslint-config-airbnb -dev</span><br />
<div>
これでESLintの設定がvue.jsとAirbnb JavaScript Style Guideに対応してくれました。</div>
<div>
<br />
構文チェックは次のコマンド<br />
<span style="color: rgba(0 , 0 , 0 , 0.8); font-family: "fira mono" , "andale mono" , "consolas" , monospace; font-size: 14px; white-space: nowrap;">$ yarn lint --no-fix</span><br />
試してみると50個くらいエラーが検出されて焦りましたが、--no-fixオプションを外して実行するとlint側で勝手にコードを修正してくれるのでエラーは5個くらいまで減り、<br />
残りも日本語のリファレンスを見ながら修正できました。<br />
<br />
<br />
<br />
<h2>
苦戦したポイント</h2>
個人的に引っかかった部分は次の2点。<br />
<h3>
<span style="color: #010101; font-family: "lucida console"; font-size: 9pt; min-height: 9pt;"><br /></span></h3>
<h4>
<span style="color: #010101; font-family: "lucida console"; font-size: large; min-height: 9pt;">comma-dangle</span></h4>
<span style="color: #010101; font-family: "lucida console"; font-size: 9pt; min-height: 9pt;">(</span><a href="https://mitsuruog.github.io/javascript-style-guide/#commas--dangling">https://mitsuruog.github.io/javascript-style-guide/#commas--dangling</a><span style="color: #010101; font-family: "lucida console"; font-size: 9pt;">)</span><br />
<span style="color: #010101; font-family: "lucida console"; font-size: 9pt;"><br /></span>
配列の末尾には、カンマが必須らしい!<br />
末尾カンマはJSONだとエラーになるから気持ち悪いなあと思いつつリファレンスを読んでみると、<br />
・末尾コンマはbabelが自動的に消してくれる<br />
・gitの差分がきれいになる</div>
<div>
とのこと。<br />
確かに、差分はこっちのほうが断然わかりやすい!<br />
スタイルガイドはgit管理の部分まで視野に入ってるんですね。<br />
<br />
BAD<br />
<pre class="prettyprint lang-js linenums">const array = [
apple,
banana,
chocolate
];</pre>
<br />
GOOD<br />
<pre class="prettyprint lang-js linenums">const array = [
apple,
banana,
chocolate,
];</pre>
<br />
<br />
<h4>
<span style="color: #010101; font-family: "lucida console"; font-size: large; min-height: 9pt;">operator-linebreak</span></h4>
(<a href="https://mitsuruog.github.io/javascript-style-guide/#variables--linebreak">https://mitsuruog.github.io/javascript-style-guide/#variables--linebreak</a>)<br />
代入で=の前後に改行を入れてはいけない。<br />
でも、そこを直したらmax-lenの100文字に引っかかってエラーになるんだけど……。<br />
という板挟みの状況に陥ったわけですが、リファレンスにはちゃんと書いてありました。<br />
<br />
そういう場合は、「値を丸括弧で囲むこと」だそうです。<br />
<br />
BAD<br />
<pre class="prettyprint lang-js linenums">const text =
'superLongText';</pre>
<br />
GOOD<br />
<pre class="prettyprint lang-js linenums">const text = (
'superLongText'
);</pre>
<br />
<h3>
<br /></h3>
<h3>
結論</h3>
Airbnb JavaScript Style Guideは、リファレンスが丁寧!!<br />
以上です、ありがとうございました。<br />
<br />
<h3>
参考サイト</h3>
<span></span><br />
<div style="-en-clipboard: true;">
・JavaScriptのスタイルガイドまとめ(おすすめ4選)</div>
<div>
<a href="https://qiita.com/takeharu/items/dee0972e5f39bfd4d7c8">https://qiita.com/takeharu/items/dee0972e5f39bfd4d7c8</a></div>
<div>
・JavaScript Standard Styleのススメ</div>
<div>
<a href="https://arui.tech/recommendation-of-standard-js/">https://arui.tech/recommendation-of-standard-js/</a></div>
<div>
・セミコロンは省略?人気スタイルガイドに学ぶJavaScriptのコーディング規則</div>
<div>
<a href="https://www.webprofessional.jp/why-use-javascript-style-guide/">https://www.webprofessional.jp/why-use-javascript-style-guide/</a></div>
<div>
・JavaScriptの有名なコーディングスタンダードまとめ</div>
<div>
<a href="https://blog.htmlhifive.com/2017/09/12/javascript-style-guide/">https://blog.htmlhifive.com/2017/09/12/javascript-style-guide/</a></div>
<div>
・ESLintをAtomに導入し、Reactの構文にも対応したAirbnbのJSスタイルガイドを使う</div>
<div>
<a href="https://mae.chab.in/archives/2874">https://mae.chab.in/archives/2874</a></div>
<div>
<br /></div>
<br /></div>
MtFormhttp://www.blogger.com/profile/11827834530078186680noreply@blogger.com0tag:blogger.com,1999:blog-6573579750620820824.post-54839841001072742492019-06-13T19:51:00.002+09:002019-06-13T19:51:48.046+09:00【facebook】Messengerプラットフォーム<b><span style="color: #6aa84f;"><br /></span></b>
<b><span style="color: #6aa84f;">ある日の出来事…</span></b><br />
<b><span style="color: orange;">*:.。..。.:+·゚·✽:.。..。.:+·゚·✽:.。..。.:+·゚·✽:.。..。.:+·゚·*:.。..。.:+</span></b><br />
<br />
インスタントゲームを作ったはいいが、ゲームのリテンションが低すぎてつらいよお…あれ、facebookさんがコッチを見ている…(´;ω;`)ウッ<br />
<br />
(face・ω・book)つ …スッ「<a href="https://developers.facebook.com/docs/games/instant-games/getting-started/bot-setup">再エンゲージメントのためにゲームボットを設定する</a>」<br />
<br />
(´;ω;`)!!<br />
<br />
<b><span style="color: orange;">*:.。..。.:+·゚·✽:.。..。.:+·゚·✽:.。..。.:+·゚·✽:.。..。.:+·゚·*:.。..。.:+</span></b><br />
<b><span style="color: orange;"><br /></span></b>
こんにちは👀<br />
<br />
月島ファクトリープログラマーのmotchyと申します👶<br />
<br />
冒頭の経緯から、インスタントゲームでボットを使用したいと考え、facebookのMessengerプラットフォームを使用しました。<br />
<br />
今回は、インスタントゲームでMessengerプラットフォームを使用するまでの過程について投稿させていただきます。<br />
<div>
以下、3つのステップでご説明します。</div>
<div>
<br /></div>
<div>
<ol>
<li>Facebookページを作成しよう!</li>
<li>Webhookを設定しよう!</li>
<li>Messengerプラットフォームを使えるように申請しよう!</li>
</ol>
</div>
<div>
<br /></div>
<div>
<b>1.Facebookページを作成しよう!</b></div>
<div>
ゲームボットを使用するには、インスタントゲームと連動するFacebookページが必要になります。なので、まずはゲーム用のページを作成しましょう😃</div>
<div>
<b><br /></b></div>
<div>
<b>2.Webhookを設定しよう!</b></div>
<div>
ゲームとFacebookページを連動させることによって、メッセンジャーを使用してメッセージの送受信を行った際、バックエンドにHTTPコールが送信されます。</div>
<div>
サーバーのエンドポイントをページのイベントと紐づけるために、Webhookの設定をします。</div>
<div>
<span style="font-family: "hiragino kaku gothic pron" , "meiryo" , "helvetica" , "arial" , sans-serif;"><span style="background-color: white;">facebookのチュートリアルは正直わかりにくかったので、わたしは下記サイトを参考にし(て、インフラの方に設定してもらい)ました。</span></span></div>
<div>
「<a href="https://ledge.ai/facebookbot_exp/">Facebook Messengerでチャットボットを作ってみる手順まとめ【保存版】</a>」</div>
<div>
「<a href="https://kekaku.addisteria.com/wp/20180601192333#Webhooks">Facebookページのメッセンジャーボットを自作しよう~ボットの設置まで~</a>」</div>
<div>
<span style="background-color: white; font-family: "hiragino kaku gothic pron" , "meiryo" , "helvetica" , "arial" , sans-serif; font-size: 16px;"><br /></span></div>
<div>
<span style="background-color: white; font-family: "hiragino kaku gothic pron" , "meiryo" , "helvetica" , "arial" , sans-serif; font-size: 16px;"><b>3.Messengerプラットフォームを使えるように申請しよう!</b></span></div>
<div>
Messengerプラットフォームを使用するには、pages_messagingというSend APIの承認が必要になります。アプリダッシュボードの「Messengerのアプリレビュー」から簡単に申請することができます。</div>
<div>
<br /></div>
<div>
上記の手順を行うと、プレイヤーがインスタントゲームを終了するたびに、「2.Webhookを設定しよう!」で用意したサーバーにPOSTリクエストが飛んできます。</div>
<div>
このPOSTリクエストから、プレイヤーにメッセージを送信するためのPSIDを含んだ下記のユーザー情報が取得できます。</div>
<div>
「<a href="https://developers.facebook.com/docs/messenger-platform/reference/webhook-events/messaging_game_plays/">messaging_game_plays Webhook Event Reference</a>」</div>
<div>
<br /></div>
<div>
これでユーザーにゲームやれやれってメッセージを送り放題だ👿👿👿</div>
<div>
わーい👿👿👿</div>
<div>
<br /></div>
<div>
…は、facebookさんは許さない。もうひと手間。</div>
<div>
<br /></div>
<div>
設定は3ステップで終了ですが、ボットを受け取るか受け取らないかはユーザー次第です。</div>
<div>
<br /></div>
<div>
2019年1月以降の新規ユーザーについては、ユーザーボットがデフォルトで無効に設定されるようになりました。</div>
<div>
そのため、インスタントゲームに、ゲームボットを承認してくれるかユーザーに問う処理を実装してください。</div>
<div>
「<a href="https://www.facebook.com/fbgaminghome/blog/important-game-bots-update">Important Game Bots Update</a>」</div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<span style="color: #6aa84f;"><b>★最後に</b></span><br />
<b><span style="color: orange;">*:.。..。.:+·゚·✽:.。..。.:+·゚·✽:.。..。.:+·゚·✽:.。..。.:+·゚·*:.。..。.:+</span></b><br />
<br />
Messengerプラットフォームの対応については、設定のフェーズでかなり時間がかかった印象だったことから今回の投稿内容に至りました。<br />
<br />
ただ、思い返して書き起こしてみたはいいものの、そんなに難しいことしてないので、ちょっと悔しいです。(facebookのチュートリアルきらいだ…(´・ω・`)ボソ。)<br />
<br />
また何か新しい機能を使用した際には、ブログ更新したいと思います。<br />
<br />
以上です。<br />
最後まで読んでいただき、ありがとうございました。<br />
<br />
<b><span style="color: orange;">*:.。..。.:+·゚·✽:.。..。.:+·゚·✽:.。..。.:+·゚·✽:.。..。.:+·゚·*:.。..。.:+</span></b></div>
<div>
<h3 style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; margin: 0px; position: relative;">
</h3>
<br style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13.2px;" /></div>
motchyhttp://www.blogger.com/profile/05178822391380919338noreply@blogger.com0tag:blogger.com,1999:blog-6573579750620820824.post-14133561034880035162018-12-04T16:54:00.000+09:002019-06-13T17:33:27.581+09:00【facebook】インスタントゲーム広告実装について<br />
こんにちは👀<br />
月島ファクトリープログラマーのmotchyと申します👶<br />
<br />
このたび、弊社で作成したfacebookインスタントゲームに広告表示対応を行いました。<br />
今回は、この対応に伴い使用したAudience Networkや広告表示の実装方法についてご紹介させていただきます。<br />
<br />
<br />
<b><span style="color: orange;">*:.。..。.:+·゚·✽:.。..。.:+·゚·✽:.。..。.:+·゚·✽:.。..。.:+·゚·*:.。..。.:+</span></b><br />
<b><br /></b>
<br />
<h3>
<b><span style="color: #6aa84f;">★広告を表示したゲーム</span></b></h3>
<br />
弊社では現在、「Space Evaders」「Fruit Paradise」と2つのインスタントゲームをfacebookにあげております。<br />
<br />
今回は、「Fruit Paradise」に広告表示対応を行いました。<br />
<br />
※ゲームをプレイしてみたい人はコチラからドウゾヽ(゙·ω·゙)人(゙·ω·゙)ゝ<br />
<a href="https://www.facebook.com/Space-Evaders-1899161283492814/">「Space Evaders」</a><br />
<a href="https://www.facebook.com/FruitParadiseM/?modal=admin_todo_tour">「Fruit Paradise」</a><br />
<br />
※ゲームの開発記が気になる方はコチラをドウゾヽ(゙·ω·゙)人(゙·ω·゙)ゝ<br />
<a href="https://moonislandfactory.blogspot.com/2018/09/space-evaders_5.html">「Space Evaders」</a><br />
<a href="https://moonislandfactory.blogspot.com/2018/08/facebookfruit-paradise.html">「Fruit Paradise」</a><br />
<br />
<br />
<b><span style="color: orange;">*:.。..。.:+·゚·✽:.。..。.:+·゚·✽:.。..。.:+·゚·✽:.。..。.:+·゚·*:.。..。.:+</span></b><br />
<b><br /></b>
<br />
<h3>
<b><span style="color: #6aa84f;">★インスタントゲームの広告の種類</span></b></h3>
<br />
2018/12現在、facebookのインスタントゲームでは、下記の種類の広告を配信することができます。今回弊社では、リワード動画の表示対応を行いました。<br />
<br />
・インタースティシャル動画広告<br />
スキップ可能、完全視聴で収益発生<br />
<br />
・リワード動画<br />
スキップ不可能、完全視聴で収益発生<br />
<br />
<br />
<b style="background-color: white;"><span style="color: orange;">*:.。..。.:+·゚·✽:.。..。.:+·゚·✽:.。..。.:+·゚·✽:.。..。.:+·゚·*:.。..。.:+</span></b><br />
<b><br /></b>
<br />
<h3>
<b><span style="color: #6aa84f;">★開発手順</span></b></h3>
<br />
広告配信はfacebookのAudience Networkを使用して対応しました。<br />
そもそも、Audience Network・・・って、ナニ_φ(·ω·` )?<br />
という感じですが、すごくざっくりいうと、facebookが提供している広告配信サービス的なものな認識。<br />
<br />
対応は、下記URLの手順と要件を参考に実施しました。<br />
<a href="https://www.facebook.com/help/publisher/355647874927053">「Audience Networkでインスタントゲームの収益化を始める」</a><br />
<br />
以下、上記の手順に沿って行った実装~リリースについて、順を追ってご説明させていただきます。<br />
<br />
<h4>
<b>1.Facebookアプリにインスタントゲームを設定</b></h4>
<div>
<b><br /></b></div>
今回は、既存のゲームに対して広告対応を行うため、ここはパス。<br />
まずはゲームを作ってねということです。<br />
<br />
<h4>
<b>2.アプリダッシュボードからAudience Networkの利用を開始</b></h4>
<div>
<b><br /></b></div>
<a href="https://www.facebook.com/help/publisher/355647874927053">「Audience Networkでインスタントゲームの収益化を始める」</a>の「Audience Networkの利用開始」という項目に、とっても丁寧に書いてくれてます。<br />
ただ、アプリ管理者の権限がないと実施できない項目なので、この設定ができないときは、権限を付与してもらうか、アプリ管理者に実施してもらいましょう。<br />
アプリを作った本人ならば大丈夫です。<br />
<br />
<h4>
<b>3.収益化マネージャを使用して、Audience Network広告の配置を作成</b></h4>
<div>
<b><br /></b></div>
作成方法や各項目の役割については下記を参照してください。<br />
<a href="https://www.facebook.com/help/publisher/237715376723234/">「広告スペースについて」</a><br />
<a href="https://www.facebook.com/help/publisher/138453180084706/">「広告スペースを作成する」</a><br />
<br />
<h4>
<b>4.支払い情報の追加</b></h4>
<div>
<b><br /></b></div>
言葉のままです。Audience Networkからの支払いを受けるために必要な設定項目です。<br />
納税者識別番号や納税関連書類について入力や提出が求められるので、企業で使用する場合は、偉い人に設定してもらうようお願いしましょう。<br />
<a href="https://www.facebook.com/help/publisher/103628146695524?helpref=faq_content">「支払い情報の追加」</a><br />
ここまで設定をすると、実装後に広告が見れるようになります。<br />
<br />
<h4>
<b>5.インスタントゲームのソースコードに広告配置を統合</b></h4>
<div>
<b><br /></b></div>
3 の工程で設定される配置IDを使用して、広告配置の実装を行います。<br />
下記のURLから、実装するにあたっての前提条件の記載やデモソースが見れるので、こちらを参考にするといいと思います。<br />
<a href="https://developers.facebook.com/docs/games/instant-games/guides/ads-monetization">「Monetizing your game with Audience Network」</a><br />
<br />
実装工程は、インスタンスの生成⇒ロード⇒表示 これだけです。<br />
なお、わたしは、下記リファレンスの例に沿って実装しました。<br />
<a href="https://developers.facebook.com/docs/games/instant-games/sdk/fbinstant6.2">「API Reference v6.2」</a><br />
<br />
<b><span style="color: magenta;">2019/6/12:追記</span></b><br />
下記状況を考慮した実装について<br />
<u>⓵PCから広告表示をしようとした場合</u><br />
後続の「6.テスト」にも記載していますが、インスタントゲームの広告はPCでは表示できません。この場合、getSupportedAPIs( ) の引数に広告取得APIを渡し、広告を取得するAPIがサポートされているか否かを確認する必要があります。<br />
サポートされていない場合(PCの場合)にはそれ相応の実装を行う必要があります。<br />
わたしは、PCからは広告は見れない旨のメッセージと、通常プレイボタンを表示する対応をおこないました。<br />
<u>⓶<b>超</b>新規で作成したユーザーで広告表示をしようとした場合</u><br />
facebookでは、ユーザー情報等からターゲティングを行い表示する広告を配信しています。そのため、facebookに登録したばかりのユーザー等はターゲティングが行えず表示する広告を取得できません。<br />
この場合は「表示できる広告がありませんよー」という例外がスローされます。<br />
わたしは、表示できる広告がない旨のメッセージと、通常プレイボタンを表示する対応をおこないました。<br />
<br />
<a href="https://developers.facebook.com/docs/games/instant-games/guides/ads-monetization">「Monetizing your game with Audience Network」</a>の、「ベストプラクティスとトラブルシューティング」の対応をちゃんとしていれば、エラーハンドリングについて改めて意識することはないですが、ターゲティングができていないユーザーに対して例外がスローされることにちょっと感動したので、追記させていただきました。<br />
いじょ。<br />
<br />
<h4>
<b>6.テスト</b></h4>
<div>
<b><br /></b></div>
<a href="https://developers.facebook.com/docs/games/instant-games/guides/ads-monetization">「Monetizing your game with Audience Network」</a>にも記載がありますが、広告表示のテストは、デスクトップやエミュレーターでは実施できません。<br />
そのため、広告表示のテストは、モバイルデバイスからテストを実施する必要があります。<br />
<br />
【課題】<br />
上記に伴い、テスト時は修正した資産のアップロード⇒テストを繰返し実施していたのですが、修正がはいるたびにアップロードをしたため、必要以上にバージョンがあがってしまいました。<br />
対象のアプリに紐付くテスト用のアプリを作成してみましたが、テスト用のアプリIDに対して資産をアップロードしても、紐付いている本番用のアプリのバージョンも一緒にあがってしまいました。<br />
今回は暫定対応として、改修対象のアプリと紐付かないまったく別のアプリをテスト用に登録し、広告表示のテストはそちらでおこないました。<br />
<br />
んー、まわりくどい・・・めんどくさい(´·ω·`)<br />
<br />
テスト方法については、もっといい方法があると思うのですが・・・模索中です。<br />
いい方法をご存知の方がいらっしゃったら、コメントをください・・・(´·ω·`)<br />
バージョンをバカバカ上げるような修正をしなければいいじゃないか。。。というコメントはご勘弁ください・・・( ノД`)ワーン。<br />
<br />
<h4>
<b>7.リリース</b></h4>
<div>
<b><br /></b></div>
ここで少し要注意。<br />
広告の審査とアプリの審査は、別で実施しているようです。<br />
facebook for developersの申請が通っても、facebook for businessのレビューが承認されないと、広告の表示はされません。<br />
<br />
<br />
<b><span style="color: orange;">*:.。..。.:+·゚·✽:.。..。.:+·゚·✽:.。..。.:+·゚·✽:.。..。.:+·゚·*:.。..。.:+</span></b><br />
<br />
<h3>
<span style="color: #6aa84f;">★全体を通して</span></h3>
<br />
初めてだらけだったので、時間もかかり、戸惑う部分も多かったですが、振り返ってみると、広告表示って思ったよりも簡単にできるんだなと思いました。<br />
小規模ゲームでも、さくっと広告がつけられるのはとっても魅力的なサービスだなと思います。<br />
設定がすこーしだけ面倒ですが、実装自体は簡単なので、インスタントゲームを作るならば、広告表示は入れたほうがいいと思います。<br />
<br />
今後は、より効率よく収益が上げられるように、収益化マネージャーの設定等もお勉強してみたいと思います。(いまはほとんどデフォルト)<br />
なにか面白いことがあったら、ブログに書こうかな。<br />
<br />
<br />
以上です。<br />
最後まで読んでいただき、ありがとうございました。<br />
<br />
<div>
<br /></div>
motchyhttp://www.blogger.com/profile/05178822391380919338noreply@blogger.com0tag:blogger.com,1999:blog-6573579750620820824.post-91500390540296047402018-09-05T19:48:00.000+09:002018-09-05T19:48:06.945+09:00「Space Evaders」開発後記月島ファクトリープログラマーのLeeです。<br />
<br />
このたびFacebook Instant Gameを開発したので、簡単にまとめます。<br />
<br />
<h2>
「Space Evaders」紹介</h2>
はじめに、今回開発した「<a href="https://www.facebook.com/Space-Evaders-1899161283492814/">Space Evaders</a>」を紹介いたします。<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen='allowfullscreen' webkitallowfullscreen='webkitallowfullscreen' mozallowfullscreen='mozallowfullscreen' width='320' height='266' src='https://www.blogger.com/video.g?token=AD6v5dwsOEI0LPhYR8SLib0hDJYw6HG7z5kYsqVGx9ggA4-fy8rT76bZi8gkDgU63SALpG_XQMrxKSeiy53nAokF1g' class='b-hbp-video b-uploaded' frameborder='0'></iframe></div>
<br />
左右にタップして落ちてくる隕石をよけてハイスコアを目指すゲームです。<br />
隕石の数が増えればよけるのが難しい時がありますが、そういう時はバリアを活用して乗り切ることができるようになっています。<br />
<br />
ゲーム自体はよくある避けゲーなのですが、難易度調整をシビアにしてあるのと、隕石どうしのあたり判定をつけることで予測しづらく、緊張感があって他と差別化できたんじゃないかと思っています。<br />
<br />
50点で出現する巨大隕石が現れてからは、バリアをうまく活用しないと厳しくなりますので、だいたい70点あたりを目安に遊んでみてください。<br />
<br />
<h2>
フレームワークについて</h2>
<div>
Facebook Instant GameはHtml5での開発になるため、必然的にjsのフレームワークから選ぶ必要がありました。<br />
<br />
Facebookでは対応している<a href="https://developers.facebook.com/docs/games/instant-games/compatible-engines">フレームワーク一覧</a>を掲載しているので、この中から気に入ったものを選ぶだけで特に問題ありませんでした。<br />
<br />
今回は、「Phaser」という、2Dゲーム特化のフレームワークを選定しました。<br />
理由としては、コミュニティーが調べた中では最も活発で(英語のみですが)今後もサポートが長続きしそうと判断したためです。<br />
また、公式のサンプルも相当な数用意されていたびで開発が容易にできると考えました。<br />
<br />
実際、開発においてフレームワークの問題でつまったところはほとんどありませんでした。<br />
<br />
・シーン管理<br />
<br />
<div style="background-color: #151718; color: #d4d7d6; font-family: inconsolata; font-size: 14px; line-height: 19px; white-space: pre;">
<div style="line-height: 19px;">
<div style="line-height: 19px;">
<div style="line-height: 19px;">
<div>
<span style="color: #00a452;">game</span><span style="color: #cbaf6c;">.</span><span style="color: #00a452;">state</span><span style="color: #cbaf6c;">.</span><span style="color: #a074c4;">add</span>(<span style="color: #55b5db;">"scenename"</span>, <span style="color: #00a452;">scene</span>.<span style="color: #aa00aa;">scenename</span>)<span style="color: #858d8a; font-weight: bold;">;</span></div>
<div>
<span style="color: #00a452;">scene</span>.<span style="color: #55b5db;">scenename</span> <span style="color: #9fca56;">=</span> <span style="color: #e6cd69;">function</span> <span style="color: #55b5db;">()</span> {}<span style="color: #858d8a; font-weight: bold;">;</span></div>
<div>
<span style="color: #00a452;">scene</span>.<span style="color: #00a452;">scenename</span>.prototype <span style="color: #9fca56;">=</span> {</div>
<div>
<span style="color: #55b5db;">preload</span>: <span style="color: #e6cd69;">function</span><span style="color: #55b5db;">()</span> {</div>
<div>
},</div>
<div>
<span style="color: #55b5db;">create</span>: <span style="color: #e6cd69;">function</span> <span style="color: #55b5db;">()</span> {</div>
<div>
},</div>
<div>
<span style="color: #55b5db;">update</span>: <span style="color: #e6cd69;">function</span><span style="color: #55b5db;">()</span> {</div>
<div>
},</div>
<div>
}</div>
<div>
<span style="color: #00a452;">game</span><span style="color: #cbaf6c;">.</span><span style="color: #55b5db;">start</span>(<span style="color: #55b5db;">"scenename"</span>)<span style="color: #858d8a; font-weight: bold;">;</span></div>
</div>
</div>
</div>
</div>
<br />
上記のテンプレートを追記していくだけでシーン管理を行うことができます。<br />
基本関数として、下記3つを利用することができ、新規関数もここに追記していくだけで実装できます。<br />
<br />
preload - 素材の読み込み<br />
create - シーンのはじめに一度実行<br />
update - 毎フレーム実行<br />
<br />
・画面表示<br />
<br />
デバイスの大きさに合わせてゲーム画面を表示したい場合、ゲーム初期化時に下記を実行することにより勝手に合わせてくれます。<br />
<br />
<div style="background-color: #151718; color: #d4d7d6; font-family: inconsolata; font-size: 14px; line-height: 19px; white-space: pre;">
<div>
<span style="color: #00a452;">game</span>.<span style="color: #00a452;">scale</span>.<span style="color: #aa00aa;">scaleMode</span> <span style="color: #9fca56;">=</span> <span style="color: #00a452;">Phaser</span>.<span style="color: #00a452;">ScaleManager</span>.<span style="color: #ffa325; font-weight: bold;">SHOW_ALL</span><span style="color: #858d8a; font-weight: bold;">;</span></div>
<div>
<span style="color: #00a452;">game</span>.<span style="color: #00a452;">scale</span>.<span style="color: #aa00aa;">pageAlignHorizontally</span> <span style="color: #9fca56;">=</span> <span style="color: #cd3f45;">true</span><span style="color: #858d8a; font-weight: bold;">;</span></div>
<div>
<span style="color: #00a452;">game</span>.<span style="color: #00a452;">scale</span>.<span style="color: #aa00aa;">pageAlignVertically</span> <span style="color: #9fca56;">=</span> <span style="color: #cd3f45;">true</span><span style="color: #858d8a; font-weight: bold;">;</span></div>
<div>
<span style="color: #00a452;">game</span>.<span style="color: #00a452;">stage</span>.<span style="color: #aa00aa;">disableVisibilityChange</span> <span style="color: #9fca56;">=</span> <span style="color: #cd3f45;">true</span><span style="color: #858d8a; font-weight: bold;">;</span></div>
</div>
<br />
ゲーム画面内でオブジェクトを適切に配置したい場合は、<br />
game.world.centerX<br />
game.world.centerY<br />
ワールドの中央値を取得できるので、そこからどのあたりに表示するか設定することで異なる大きさの画面でも適切に配置することが可能となります。<br />
<br />
<h2>
苦労した点について</h2>
</div>
<div>
最も苦労したのはレベルデザインでした。<br />
<br /></div>
<div>
避けゲーは一歩間違うと退屈になるので、個人的には難易度高い方が面白いとおもうのですが、絶対に不可能な箇所ができてはまずいためその間をとる調整が大変でした。</div>
<div>
<br /></div>
<div>
隕石同士のあたり判定を実装したところ、予測不能な点は面白かったのですが、真横からのスマッシュがたまに発生して無理ゲーになることもあり...</div>
<div>
<br /></div>
<div>
結局、隕石同士のあたり判定は実装し、バリアでしのぐことのできる機能でバランスを取りました。</div>
<div>
<br /></div>
<h2>
まとめ</h2>
<div>
実装に関して、やりたかったことがほとんど公式のサンプルの組み合わせと、少しのコミュニティの調査で済んだためコストもかからずうまくいったと感じています。</div>
<div>
Phaserはコミュニティがほとんど英語なのが玉に瑕ですが、チュートリアルがしっかりしているため初めてのHTML5ゲーム開発にとても向いていると感じました。</div>
<div>
一度使ってみて基本的な部分は慣れたので、次に開発する際はより早くうまく開発できそうです。</div>
<br />
<div>
</div>
<br />
<div>
<br />
最後まで読んでいただき、ありがとうございました。</div>
<br />
<div style="height: 0px;">
</div>
<br />
<div style="-webkit-text-stroke-width: 0px; color: black; font-family: Meiryo; font-size: medium; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: 400; height: 0px; letter-spacing: normal; orphans: 2; text-align: start; text-decoration-color: initial; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;">
<div style="margin: 0px;">
</div>
</div>
Leehttp://www.blogger.com/profile/12349935769016862474noreply@blogger.com0tag:blogger.com,1999:blog-6573579750620820824.post-39298458878827430412018-08-31T13:50:00.000+09:002018-09-03T10:58:26.876+09:00Facebookインスタントゲーム「Fruit Paradise」開発ブログこんにちは、月島ファクトリープログラマのOgaです。<br />
<br />
今回はFacebookのインスタントゲームを作成しましたので、ご紹介します。<br />
<br />
ゲーム名は「Fruit Paradise」<br />
ゲーム仕様はフルーツをタップして高スコアを目指す単純なものです。<br />
フルーツ以外の物(肉・魚等)をタップするとゲームオーバーになります!<br />
<br />
アプリページのURLはこちら→<a href="https://www.facebook.com/Fruit-Paradise-253787672143143/?modal=admin_todo_tour">Fruit Paradise</a><br />
プレイ動画はこちら↓<br />
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen='allowfullscreen' webkitallowfullscreen='webkitallowfullscreen' mozallowfullscreen='mozallowfullscreen' width='320' height='266' src='https://www.blogger.com/video.g?token=AD6v5dz4B-eq0qUbIsAWCaXVvLtj_B1sEXpNj8rHVnVQMb_ueiDpMRiydE4nzq9QwYQSBv40vfIoNsMdsDw6IgRxuQ' class='b-hbp-video b-uploaded' frameborder='0'></iframe></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
スコアが上がってくるとゲームスピードが速くなりフルーツの個数アップ、フルーツ以外の個数がアップして難しくなってきます。<br />
時間つぶしの他に動体視力と集中力を測定することもできるかと思います!<br />
<br />
クリアはありませんが、スコア目安は120~150くらいです。<br />
これくらい取れれば動体視力と集中力は死んでいないと思います!<br />
時間制限は無いので、高スコアを目指してみてください<span style="background-color: white; font-family: "lucida grande" , "hiragino kaku gothic pron" , "meiryo" , sans-serif; font-size: 14px;">(=゚ω゚)ノ</span><br />
<br />
今回はゲームリリースまでの手順と苦労した点を書いていきます<span style="background-color: white; font-family: "lucida grande" , "hiragino kaku gothic pron" , "meiryo" , sans-serif; font-size: 14px;">φ(・ω・ )</span><br />
<br />
必読な公式ドキュメントは下記です。<br />
https://developers.facebook.com/docs/games/instant-games/<br />
<br />
<h2>
<b>【おおまかな開発手順】</b></h2>
<ol>
<li>Facebookアプリ開発用にアカウントを作成(既にある場合は不要です)</li>
<li>アプリを作成する(WEB上で設定をするだけ)</li>
<li>デモアプリをダウンロードする</li>
<li>デモアプリを元にアプリを開発</li>
<li>ローカル環境で動作確認</li>
<li>アプリをアップロード</li>
<li>Facebook申請</li>
<li>公開</li>
</ol>
<h2>
【開発詳細】</h2>
<span style="font-weight: normal;"><span style="font-size: large;">1.Facebookアプリ開発用にアカウントを作成</span></span><br />
<br />
https://www.facebook.com/<br />
上記にアクセスし、Facebookのアカウントを作成します。<br />
リアルなフレンドと繋がったアカウントを使いたくない場合、開発用のアカウントを作成します。<br /><br />
ただし、Facebookが複数アカウントを容認していないため、変なプロフィールにするとアカウントが凍結される場合はあります。<br />
私は名前を英語表記にしていたら凍結されました。。<br /><br />
2018年1月に複数アカウント使用が緩和されたらしいですが、私はBANされました(ꐦ°д°)クソガー<br />
<br />
<span style="font-size: large;">2.アプリを作成する</span><br />
<br />
https://developers.facebook.com/apps/<br />
上記にアクセスし、アプリを作成します。<br />
これはゲームロジックをアップロードする場所を作成するようなイメージです。<br />
後に作成したソースコードをアップロードします。<br />
<br />
<span style="font-size: large;">3.デモアプリをダウンロードする</span><br />
<br />
私が開発しているときは「tic-tac-toe」というデモアプリがzipでダウンロードできました。中にREADME.mdがあり、ミドルウェアのインストール方法、実行手順が書かれています。<br /><br />
tic-tac-toeというアプリは三目並べで、実行するにはフレンドが必須なようです。<br />
開発アカウントなので、フレンドいないからプレイできない(ꐦ°д°)クソガー<br /><br />
とりあえずデモアプリの起動自体はできたのでOK。
<br /><br />
<span style="font-size: large;">4.デモアプリを元にアプリを作成</span><br />
<br />
今回はjavascriptのフレームワークとして、CreateJSを使ってみました。<br />
選定理由としては..<br />
<ol>
<li>フレームワークが軽量であること</li>
<li>直観的なAPIで学習コストが低いこと</li>
</ol>
Flash開発者の方の会社が作成していることもあり、API名がFlashとほぼ一緒なので、Flash開発を行ったことがある方はスムーズに開発に入れると思います。<br />
私はFlash知らないけどな( ゚∀゚)エヘッ<br />
<br />
最初はenchant.jsをカスタマイズしたものを作成して動かそうとしましたが、Facebookと相性が悪いらしく動かなかった(ꐦ°д°)クソガー<br />
<br />
おとなしくFacebookが対応しているフレームワークを使用しましょう。。<br />
https://developers.facebook.com/docs/games/instant-games/compatible-engines<br />
<br />
(・´д)開発で苦労した点(д`・)<br />
1.BGMがバックグラウンドで流れてる・・!<br />
<br />
iPhone6s以前とAndroidで発生<br />
アプリを起動中にホームボタンを押してバックグラウンド実行にしても音が鳴り続ける・・<br />
iPhone7以降は端末側の制御で勝手に止まるっぽい(ꐦ°д°)クソガー<br />
<br />
対応方法は下記になります。<br />
<pre class="prettyprint">
document.addEventListener("visibilitychange", handler);
function handler() {
if (document.visibilityState == "visible") {
// 見えているときの記述
createjs.Sound.muted = false;
} else {
// 見えていないときの記述
createjs.Sound.muted = true;
}
}
</pre>
<br />
これを書けば意図的に音をミュートにできます(◎´∀`)b<br />
<br />
2.クリックイベントが無限に作成される・・!<br />
<br />
addEventListenerのコールバック関数を即時関数にしてしまうとクリックイベントが無限に追加されてしまいました。。<br />
実行しているとメモリがどんどん減っていきます。<br />
<pre class="prettyprint">
hogeObj.addEventListener('mousedown', function() {
console.log('hoge');
} );
</pre>
下記のようにすると問題ありません。
<br />
<pre class="prettyprint">
function hogeFunction(event) {
console.log('hoge');
}
hogeObj.addEventListener("mousedown", hogeFunction, false);
</pre>
<br />
コールバック関数に即時関数を使用するのはやめましょうφ(・ω・ )<br />
<br />
<span style="font-size: large;">5.ローカル環境で動作確認</span><br />
<br />
「yarn mock」というコマンドでモック実行ができます。<br />
「yarn test」というコマンドで実際のFacebook上に近い環境で実行できます。<br />
注意点:デバッグをたくさん行いますが、「yarn test」を実行しすぎると「利用しすぎです」のようなFacebookエラーが返される事がありました(ꐦ°д°)クソガー<br />
<br />
ローカルテストはなるべく「yarn mock」で行うことをお勧めします。<br />
また、「yarn test」を実行後、立ち上がったブラウザに何も表示されないことがあります。<br />
テストブラウザとしてChromeを使用している場合、「http://localhost:8000」にアクセスして例外を許可しないとページが表示されないようです(ꐦ°д°)クソガー<br />
<br />
この設定は時間が経つと元に戻るので、2日に1回くらい「http://localhost:8000」の例外許可を実施してください。<br />
<br />
<span style="font-size: large;">6.アプリをアップロード</span><br />
<br />
ローカルから「yarn push」というコマンドでアップロードします。<br />
アップロードが成功した後、ウェブホスティングページが立ち上がるので、☆マークをクリックして状態をスタンバイからプロダクションにします。<br />
<br />
プロダクションになったらFacebookのMessengerアプリで動作確認できます<br />ε=ε=ε=┏(*´∀`)┛<br />
<br />
<span style="font-size: large;">7.Facebook申請</span><br />
https://developers.facebook.com/apps/%APP_ID%/review-status/<br />
「アイテムを審査に送信」を行います。<br />
<br />
申請後1日でフィードバックがありました。<br />
<br />
リジェクト(゚∀゚;)<br />
<br />
内容はアプリの説明文が日本語だったことでした。<br />
英語にして再申請したらあっさり通過しました(´∀`艸)<br />
<br />
公式ドキュメントにある禁止事項さえしなければ大丈夫そうです!<br />
<br />
<span style="font-size: large;">8.公開</span><br />
<br />
https://developers.facebook.com/apps/%APP_ID%/review-status/<br />
「%APP_NAME%を公開しますか?」で「はい」に変更します。<br />
<br />
ゲームの一覧にはしばらく出てこないようなので、直接ゲームにアクセスします。<br />
https://developers.facebook.com/apps/%APP_ID%/settings/basic/<br />
「FacebookウェブゲームページのURL」にあるURLにアクセスすれば直接ゲームができます!<br />
<br />
<span style="font-size: x-small;"><span style="font-size: large; font-weight: 400;">- 総括 -</span></span><br />
<br />
端末別の問題点が少しありましたが、全体的にはサクサク開発できました。<br />
CreateJSは中規模以上の開発には向かなそうですが、学習コストが低いので小規模ゲームの開発には良いのではないでしょうか。<br />
<br />
ある程度人気があれば広告を仕込んで広告収入も得られるようなので、気軽にゲームを出してみたい方はやってみてはいかがでしょうか。<br />
<br />
最後まで読んでいただき、ありがとうございました。<br />
Ogahttp://www.blogger.com/profile/04321666805366800704noreply@blogger.com0tag:blogger.com,1999:blog-6573579750620820824.post-49534260275120387002015-08-25T10:43:00.000+09:002015-08-25T10:43:13.389+09:00Rinkaが「AndroidView」で紹介されました!Rinkaがアンドロイドアプリ紹介サイト「AndroidView」にて紹介されました。ゲームの遊び方や、おすすめポイントなども詳細に掲載されています。ぜひチェックしてみてくださいね!<br />
<br />
詳細記事はこちら<br />
<a href="http://androidview.jp/archives/13567">http://androidview.jp/archives/13567</a>月島ファクトリーhttp://www.blogger.com/profile/07339592049671359509noreply@blogger.com0tag:blogger.com,1999:blog-6573579750620820824.post-30362499266750834832015-08-21T14:50:00.000+09:002015-08-21T14:50:57.626+09:00Rinkaがアプリ紹介サイト「Appliv」に紹介されました!<span style="font-family: Arial, Helvetica, sans-serif;">Rinkaがアプリ紹介サイト「Appliv」に紹介されました。</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">プレイ写真とともに、詳しい操作感や遊んでみたレビューが掲載されています。</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;"><a href="http://app-liv.jp/1003165345/" target="_blank">Rinka</a> (iOS版)</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><a href="http://android.app-liv.jp/002334794/" target="_blank">Rinka</a> Android版)</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;">詳細記事はこちら</span><br />
<a href="http://comm.app-liv.jp/002329647/community/article/6194" target="_blank"><span style="font-family: Arial, Helvetica, sans-serif;">ホタルの光を見てる気分。ゆったり癒される洞窟探検の旅に出かけよう</span></a>月島ファクトリーhttp://www.blogger.com/profile/07339592049671359509noreply@blogger.com0tag:blogger.com,1999:blog-6573579750620820824.post-79936859732272347892015-07-30T20:11:00.000+09:002015-07-30T20:12:02.878+09:00「Rinka」リリース開始!<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;">皆さまお待たせいたしました。カジュアルゲームアプリ「Rinka」は、本日7月30日(木)にリリースいたしました!</span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;">Rinkaは、タップして光の妖精を導く浮遊系アクションゲームです。妖精の源となる光のオーブを獲得しながら最高得点を目指します。ゲームの面白さは得点を狙うだけでなく、妖精の光の大きさや色がさまざまに変化したり、ステージが進むにつれて海底や古代遺跡といった世界をさまようことができます。</span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;">今年の夏は、家族や友人と一緒に「Rinka」をプレイしてみよう!</span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;">ゲームのダウンロードはこちらから!</span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;">iOS:</span><a class="" href="https://itunes.apple.com/jp/app/id1003165345?ls=1&mt=8" style="font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', メイリオ, Meiryo, 'MS Pゴシック', Helvetica, Arial, Verdana, sans-serif; font-size: 12px; line-height: 18px;">https://itunes.apple.com/jp/app/id1003165345?ls=1&mt=8</a></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;">Android:</span><span class="" style="color: #3a88fe; font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', メイリオ, Meiryo, 'MS Pゴシック', Helvetica, Arial, Verdana, sans-serif; font-size: 12px; line-height: 18px;"><a class="" href="https://play.google.com/store/apps/details?id=com.moonisland.rinka&hl=ja" style="font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', メイリオ, Meiryo, 'MS Pゴシック', Helvetica, Arial, Verdana, sans-serif; font-size: 12px; line-height: 18px;">https://</a><a href="http://play.google.com/store/apps/details?id=com.moonisland.rinka&hl=ja">play.google.com/store/apps/details?id=com.moonisland.rinka&hl=ja</a></span></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/Jl6aHi9aN9E/0.jpg" frameborder="0" height="266" src="https://www.youtube.com/embed/Jl6aHi9aN9E?feature=player_embedded" width="320"></iframe></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="" style="font-family: Helvetica; font-size: 12px;">
【ゲーム概要】</div>
<div class="" style="font-family: Helvetica; font-size: 12px;">
アプリ名称 :Rinka(りんか)</div>
<div class="" style="font-family: Helvetica; font-size: 12px;">
提供先ストア :iTunes Store / Google Play Store</div>
<div class="" style="font-family: Helvetica; font-size: 12px;">
登録カテゴリ :カジュアルゲーム</div>
<div class="" style="font-family: Helvetica; font-size: 12px;">
利用料金 :無料</div>
<div class="" style="font-family: Helvetica; font-size: 12px;">
開発者名 :<span class="" style="background-color: white; font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', メイリオ, Meiryo, 'MS Pゴシック', Helvetica, Arial, Verdana, sans-serif; line-height: 18px;">TSUKISHIMA FACTORY Inc.</span></div>
<div class="" style="font-family: Helvetica; font-size: 12px;">
<span class="" style="background-color: white; font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', メイリオ, Meiryo, 'MS Pゴシック', Helvetica, Arial, Verdana, sans-serif; line-height: 18px;"></span><br />
<div class="" style="font-family: Helvetica; line-height: normal;">
<span class="" style="background-color: white; font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', メイリオ, Meiryo, 'MS Pゴシック', Helvetica, Arial, Verdana, sans-serif; line-height: 18px;"><span class="" style="font-size: 10pt;">ウェブサイト :</span><span class="" style="color: #3a88fe; font-family: Lucida Grande;"><a class="" href="http://moonisland.jp/">http://moonisland.jp/</a></span></span></div>
<span class="" style="background-color: white; font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', メイリオ, Meiryo, 'MS Pゴシック', Helvetica, Arial, Verdana, sans-serif; line-height: 18px;">
</span>
<div class="" style="font-family: Helvetica; line-height: normal;">
<span class="" style="background-color: white; font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', メイリオ, Meiryo, 'MS Pゴシック', Helvetica, Arial, Verdana, sans-serif; line-height: 18px;">Facebook : <span class="" style="color: #3a88fe; font-family: Lucida Grande;"><a class="" href="https://www.facebook.com/moonisland.co.jp">https://www.facebook.com/moonisland.co.jp</a></span></span></div>
<span class="" style="background-color: white; font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', メイリオ, Meiryo, 'MS Pゴシック', Helvetica, Arial, Verdana, sans-serif; line-height: 18px;">
<div class="" style="font-family: Helvetica; line-height: normal;">
Twitter : <span class="" style="color: #3a88fe; font-family: Lucida Grande;"><a class="" href="https://twitter.com/moonisland_f">https://twitter.com/moonisland_f</a></span></div>
</span></div>
月島ファクトリーhttp://www.blogger.com/profile/07339592049671359509noreply@blogger.com0tag:blogger.com,1999:blog-6573579750620820824.post-69618662229968041772015-07-27T13:44:00.004+09:002015-07-27T13:49:49.974+09:00小さな光の妖精の、果てしない試練の旅「Rinka」<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTm2fucwK4yyt_c6A5FhH11MwldakTdjrECePxzXxBcrHOqXH-_MZxHRBwPuRxbQZJv8iMqyG6o5IcCMEoO6bA8vAE-v5N7Mc7IiG9TrkH8F7wjDKN2zh9CsTPyU317V7yLgM_rnFgTx7A/s1600/%25E3%2583%258F%25E3%2582%2599%25E3%2583%258A%25E3%2583%25BC960x400A.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="166" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTm2fucwK4yyt_c6A5FhH11MwldakTdjrECePxzXxBcrHOqXH-_MZxHRBwPuRxbQZJv8iMqyG6o5IcCMEoO6bA8vAE-v5N7Mc7IiG9TrkH8F7wjDKN2zh9CsTPyU317V7yLgM_rnFgTx7A/s400/%25E3%2583%258F%25E3%2582%2599%25E3%2583%258A%25E3%2583%25BC960x400A.png" width="400" /></a></div>
<div style="text-align: justify;">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span></div>
<div class="separator" style="clear: both; font-size: 12px; text-align: justify;">
<b><span style="font-family: Arial, Helvetica, sans-serif;">* 新作アプリのお知らせ *</span></b></div>
<div class="separator" style="clear: both; font-size: 12px; text-align: justify;">
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<div class="separator" style="clear: both; font-size: 12px; text-align: justify;">
<span style="font-family: Arial, Helvetica, sans-serif;">この度 月島ファクトリーでは、iOS / Android 用カジュアルゲームアプリ「Rinka」の事前予約を受付中です。夏休み中は、家族や友達と「Rinka」で遊んで、楽しい思い出をつくろう!</span></div>
<div class="separator" style="clear: both; font-size: 12px; text-align: justify;">
<span style="font-family: Arial, Helvetica, sans-serif;">▽ 予約トップ10 ▽</span></div>
<div class="separator" style="clear: both; font-size: 12px; text-align: justify;">
<span style="font-family: Arial, Helvetica, sans-serif;">iOS : <a href="https://yoyaku-top10.jp/u/a/MTI3MTQ">https://yoyaku-top10.jp/u/a/MTI3MTQ</a></span></div>
<div class="separator" style="clear: both; font-size: 12px; text-align: justify;">
<span style="font-family: Arial, Helvetica, sans-serif;">Android : <a href="https://yoyaku-top10.jp/u/a/MTI3MTU">https://yoyaku-top10.jp/u/a/MTI3MTU</a></span></div>
<div class="separator" style="clear: both; font-size: 12px; text-align: justify;">
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<div class="separator" style="clear: both; font-size: 12px; text-align: justify;">
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<div class="MsoNormal" style="font-size: 12px;">
<div style="text-align: justify;">
<span style="font-family: Arial, Helvetica, sans-serif;">【ゲーム説明】</span></div>
</div>
<div class="MsoNormal" style="font-size: 12px;">
<div style="text-align: justify;">
<span style="font-family: Arial, Helvetica, sans-serif;">Rinka(りんか)は、タップして光の妖精を導く浮遊系アクションゲーム。妖精の源となる光のオーブを獲得しながら最高得点を目指します。真っ暗で危険な洞窟を、どこまで進むことができるかチャレンジです。</span></div>
</div>
<div class="MsoNormal" style="font-size: 12px;">
<div style="text-align: justify;">
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
</div>
<div class="MsoNormal" style="font-size: 12px;">
<div style="text-align: justify;">
<span style="font-family: Arial, Helvetica, sans-serif;"><span style="mso-bidi-font-style: normal;"><span style="font-family: "MS ゴシック"; mso-ascii-theme-font: major-fareast; mso-fareast-theme-font: major-fareast; mso-hansi-theme-font: major-fareast;"><b>"うつろいゆく景色"</b></span></span></span></div>
</div>
<div class="MsoNormal" style="font-size: 12px;">
<div style="text-align: justify;">
<span style="font-family: Arial, Helvetica, sans-serif; mso-ascii-theme-font: major-fareast; mso-fareast-theme-font: major-fareast; mso-hansi-theme-font: major-fareast;">妖精はオーブを獲得することで、様々な色の光に輝きます。やわらかな光は周囲を照らし、洞窟や森の風景を映し出します。さらに妖精が探検を進めると、景色が徐々に変化していきます。バリエーション豊かな美しい世界をご堪能ください。<span lang="EN-US"><o:p></o:p></span></span></div>
</div>
<div class="MsoNormal" style="font-size: 12px;">
<div style="text-align: justify;">
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
</div>
<div class="MsoNormal" style="font-size: 12px;">
<div style="text-align: justify;">
<span style="font-family: Arial, Helvetica, sans-serif;"><span style="mso-bidi-font-style: normal;"><span lang="EN-US" style="font-family: "MS ゴシック"; mso-ascii-theme-font: major-fareast; mso-fareast-theme-font: major-fareast; mso-hansi-theme-font: major-fareast;"><b> " </b></span></span><span style="mso-bidi-font-style: normal;"><span style="font-family: "MS ゴシック"; mso-ascii-theme-font: major-fareast; mso-fareast-theme-font: major-fareast; mso-hansi-theme-font: major-fareast;"><b>特徴 "</b></span></span></span></div>
</div>
<div class="MsoNormal" style="font-size: 12px;">
<div style="text-align: justify;">
<span style="font-family: Arial, Helvetica, sans-serif; mso-ascii-theme-font: major-fareast; mso-fareast-theme-font: major-fareast; mso-hansi-theme-font: major-fareast;">・危険な洞窟を進み続けることで、ハラハラドキドキする緊張感が味わえます。<span lang="EN-US"><o:p></o:p></span></span></div>
</div>
<div class="MsoNormal" style="font-size: 12px;">
<div style="text-align: justify;">
<span style="font-family: Arial, Helvetica, sans-serif; mso-ascii-theme-font: major-fareast; mso-fareast-theme-font: major-fareast; mso-hansi-theme-font: major-fareast;">・シンプルな操作で、子どもから大人まで幅広い年代の方にお楽しみいただけます。<span lang="EN-US"><o:p></o:p></span></span></div>
</div>
<div class="MsoNormal" style="font-size: 12px;">
<div style="text-align: justify;">
<span style="font-family: Arial, Helvetica, sans-serif; mso-ascii-theme-font: major-fareast; mso-fareast-theme-font: major-fareast; mso-hansi-theme-font: major-fareast;">・何度も挑戦できるので、時間を忘れて熱中してしまいます。<span lang="EN-US"><o:p></o:p></span></span></div>
</div>
<div class="separator" style="clear: both; font-size: 12px; text-align: justify;">
</div>
<div style="font-size: 12px; line-height: 16px;">
<div>
<span style="font-family: Arial, Helvetica, sans-serif; mso-ascii-theme-font: major-fareast; mso-fareast-theme-font: major-fareast; mso-hansi-theme-font: major-fareast;">・美しい光に心が安らぎ、癒されます。</span></div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
<br />
</span><br />
<div style="font-family: HiraKakuProN-W3; font-size: 12px; line-height: 16px;">
<div>
<span style="font-family: Arial, Helvetica, sans-serif;">アプリ名 :<span lang="EN-US">Rinka<o:p></o:p></span></span></div>
</div>
<div style="font-family: HiraKakuProN-W3; font-size: 12px; line-height: 16px;">
<div>
<span style="font-family: Arial, Helvetica, sans-serif;">配信開始予定日 :<span lang="EN-US">2015</span>年<span lang="EN-US">7</span>月下旬<span lang="EN-US"><o:p></o:p></span></span></div>
</div>
<div style="font-family: HiraKakuProN-W3; font-size: 12px; line-height: 16px;">
<div>
<span style="font-family: Arial, Helvetica, sans-serif;">販売価格 :無料<span lang="EN-US"><o:p></o:p></span></span></div>
</div>
<div style="font-family: HiraKakuProN-W3; font-size: 12px; line-height: 16px;">
<span style="font-family: Arial, Helvetica, sans-serif;">対応機種 <span lang="EN-US"> </span>:<span lang="EN-US">iOS6.0以降</span>, Android 3.2 HoneyComb以降対応</span></div>
<div style="font-family: HiraKakuProN-W3; font-size: 12px; line-height: 16px;">
<div>
<span style="font-family: Arial, Helvetica, sans-serif;">公式サイト :<span lang="EN-US"><a href="http://rinka.moonisland.jp/">http://rinka.moonisland.jp/</a><u><span style="color: blue;"><o:p></o:p></span></u></span></span></div>
</div>
<div style="font-family: HiraKakuProN-W3; font-size: 12px; line-height: 16px;">
<div>
<span style="font-family: Arial, Helvetica, sans-serif;"><span lang="EN-US">Facebook</span>ペー <span lang="EN-US">: <a href="https://www.facebook.com/moonisland.co.jp">https://www.facebook.com/moonisland.co.jp</a><o:p></o:p></span></span></div>
</div>
<div style="font-family: HiraKakuProN-W3; font-size: 12px; line-height: 16px;">
</div>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;"><span style="font-family: Arial, Helvetica, sans-serif; mso-ascii-theme-font: major-fareast; mso-fareast-theme-font: major-fareast; mso-hansi-theme-font: major-fareast;"></span><br /></span></div>
<div style="font-family: HiraKakuProN-W3; font-size: 12px; line-height: 16px;">
<div>
<span style="font-family: Arial, Helvetica, sans-serif;"><span lang="EN-US">Twitter</span>アカウント<span lang="EN-US">: <a href="https://twitter.com/Moonisland_F">https://twitter.com/Moonisland_F</a></span></span></div>
</div>
</div>
月島ファクトリーhttp://www.blogger.com/profile/07339592049671359509noreply@blogger.com0