7-3.Monaca開発(結果をつぶやくTwitterボタン)

今回のアプリいやいや期物語では、最終ページに「結果をツイートする」ボタンをつけてみました。

aa.jpg


Monacaの開発ドキュメントにもあるとおり、Monacaでは、ツイッターと連携するアプリもつくることができます。

Twitterクライアントアプリでも作るなら、上記リンク先にあるような本格的に連携する手法をとればいいと思うのですが、
私の場合、ただ結果をツイートしたいだけなので、いちいち認証の設定とかしたくない。
というわけで、もっと簡単な方法はないかとググってみたところ、ありました。

twitter公式のつぶやくボタンをブログやWEBサイトなどに設置する機能が使えるみたいです。
twitter公式のボタンの設置方法はこちらのサイトを参考にしました。

最後のページにこんな感じで設置しました。


<a href="#" onclick="twi();">結果をツイートする(Twitterサイトを開く)</a>
<script>

function twi(){
var twilinkhref= "http://twitter.com/share?url="
        + getURL() + "&text=" + getKiroku() + "&";
window.open(twilinkhref);
}
</script>


あら簡単。
クリックすると、端末にインストールされているブラウザを開くような仕掛けができました。

私の端末でクリックすると、複数インストールされているブラウザのうち、どれで開きますか?みたいなダイアログが出てきます。
ブラウザで開くとツイッターのつぶやく画面が出てきて、TwitterのIDとパスワードを入れるとつぶやけました。
一応成功かな?
他の端末ではどうなるか試せてないので、もし誰か試してみて失敗した方などいらしたら、教えてください。


ちなみに、
getURL() でこのアプリを公開しているURLが取得されます。
getKiroku() でゲームの結果が取得されます。

つぶやきを見た人が、これはなんのアプリの結果なのか、たどっていけるという仕組みです。
私の作ったゲームは点数制ではないのですが、
点数がつくゲームなんかはこうやって結果を友達とつぶやき合ってもらって、
ゲームの結果を競ったりするのに使えます。
-----------------------------------

-----------------------------------
応援はこちらのクリックをお願いします。
にほんブログ村 IT技術ブログ iPhoneアプリ開発へ
にほんブログ村
にほんブログ村 IT技術ブログ Androidアプリ開発へ
にほんブログ村
スポンサーサイト

7-2.Monaca開発(配列を保存する機能)

3作目のアプリいやいや期物語の作りについて少し解説をしますね。

今回工夫したのは何回も楽しめるゲームにすることです。
分岐がたくさんあるので、めったな確率では起こらないと思うのですが、
最初っからたまたま運よく一番いいエンディングにたどり着いてしまったら、
ああ簡単だった、と終わってしまい、もうそれ以降楽しく遊べません。

なので例えば初期状態でこんな感じでゲームが進み、
エンディングが3種類用意されている。

┌────────────┐      
│     分岐     │
└────────────┘
    ↓    ↓
┌─────┐┌────┐
│ 分岐  ││ 分岐 │
└─────┘└────┘
 ↓   ↓  ↓  ↓  
┌───┐┌───┐┌───┐
│終了1││終了2││終了3│
└───┘└───┘└───┘


でもって3種類のエンディングをクリアしたらゲームの分岐が増えて
こんな感じで新たなエンディングを見ることができるような状態になる。

┌─────────────────┐
│     分岐          │
└─────────────────┘
    ↓    ↓     ↓
┌─────┐┌────┐┌────┐
│ 分岐  ││ 分岐 ││ 分岐 │
└─────┘└────┘└────┘
 ↓   ↓  ↓  ↓  ↓  ↓
┌───┐┌───┐┌───┐┌───┐
│終了1││終了2││終了3││終了4│
└───┘└───┘└───┘└───┘

もうちょっと複雑なんですが、簡単に言うとこんな工夫をして、
何度もゲームが楽しめるようにしました。

この仕組みをどうやって作ったかというと、前にも説明したlocalStorageという機能で端末に「今どこまでクリアした状態か」ということを
保存するようにしました。

単純な1つの値を保存する方法は6-2.Monaca開発(データを保存する機能)のページで解説しています。

今回は保存する値を
・終了1をクリアしたか
・終了2をクリアしたか
・終了3をクリアしたか
という3つの値を保存したいので配列を保存することにしました。

ソースはこんな感じです。
----------------------------

//データ(配列)を取得
function getDataArray() {
if(localStorage.getItem("data_array")==null){
return new Array(0,0,0);
}
else
{
var data = JSON.parse(localStorage.getItem("data_array"));
return data;
}
}
//データ(配列)を保存
function saveDataArray(data) {
try {
localStorage.setItem("data_array", JSON.stringify(data));
} catch (e) {
alert('Error saving to storage.');
throw e;
}
}
//データ(配列)を削除
function delDataArray() {
window.localStorage.clear();
}

//加算
function addData(val) {
var data = getDataArray();
data[val] = data[val] + 1;
saveDataArray(data);
}

//取得
function getData(val) {
var data = getDataArray();
return data[val];
}


----------------------------


ポイントは、前回と異なる部分、
ローカルストレージから値を取得する部分
var data = JSON.parse(localStorage.getItem("data_array"));

ローカルストレージに値を保存する部分
localStorage.setItem("data_array", JSON.stringify(data));

この2点です。
こちらのページを参考にしました。
配列をそのまま保存してもうまくいかないのですが、JSON.parseとJSON.stringifyを使って文字列に変換してから保存するとうまくいくようです。

ふむふむ、勉強になりました。


なので初期状態は 「new Array(0,0,0);」こうなので、要はこんな感じですね。

┌─┬─┬─┐
│0 │0 │0 │
└─┴─┴─┘

エンディング1をクリアしたら
addData(0);
と実行して

┌─┬─┬─┐
│1 │0 │0 │
└─┴─┴─┘

さらにエンディング2をクリアしたら
addData(1);
と実行して

┌─┬─┬─┐
│1 │1 │0 │
└─┴─┴─┘

さらにエンディング3をクリアしたら
addData(2);
と実行して

┌─┬─┬─┐
│1 │1 │1 │
└─┴─┴─┘

という様に使ってみました。
で、すべての値が1以上になったら、これまでは選べなかった選択肢を表示させる、というわけです。

本当はもうちょっと複雑にしたのですが、簡単に説明するとこんな感じです。
「配列って慣れてない!難しい」という初心者の方は、もちろん
localStorage.setItem("kiroku1", 値1);
localStorage.setItem("kiroku2", 値2);
localStorage.setItem("kiroku3", 値3);
と色んなキーで保存してもOKですけどね。
-----------------------------------

-----------------------------------
応援はこちらのクリックをお願いします。
にほんブログ村 IT技術ブログ iPhoneアプリ開発へ
にほんブログ村
にほんブログ村 IT技術ブログ Androidアプリ開発へ
にほんブログ村

7-1.いやいや期物語(3作目のアプリ)をリリースしました

3作目のアプリいやいや期物語をリリースしました。

a1530_000074.jpg


「ときめきメモリアル」とか「かまいたちの夜」とかああいうやつ、
(もしや、例としてチョイスするゲームで年齢が感じられる?)
いわゆるノベルゲームゲームです。
文章でストーリーを読み進めていってときどき選択肢があらわれて、
お話が分岐する。
選んだ選択肢によって、ハッピーエンドになったり、
嫌な終わり方をしたり、みたいなゲームです。


今回はenchant.jsという「ゲーム開発用フレームワーク」を使ってみました。
これは商用でも自由に使ってよくて、ソースも誰でも見れる、
書き換えも可能というもので、
これを使って色んな人がゲームを作っているらしいです。
HTML5とJavaScriptを使ったソースなので、アプリ開発だけでなく、
WEBサイト上で実行するゲームとかも作れるというもの。


で、enchant.jsを使ったゲームのソースサンプルとかもいろんな人が
いろんなところで公開しています。
こんな感じのページで作りたいゲームに類似したソースを拾ってきて、
大いに参考にしてください。
「enchant サンプル」ググッたら山ほど出てきます。


で、私は今回はノベルゲームを作りました。
こことかこことかを参考に、ノベルゲームの基本的なソースを組んで、あとはシナリオ作成、画像作成をしました。
サンプルがあったのでコーディングはさほど苦労せずに完了。
ここでは解説しません。
サンプルのサイトを参照してください。
「ノベルゲーム enchant 」でググったら参考になるサンプルソースが
見つかると思います。


シナリオは分岐分岐で書く量がどんどん増えていくので、結構大変でした。
ストーリーはまた育児関連ですね。
主婦なので得意分野で勝負するしかない。
2歳児育児で「あるある!」なことといえば「いやいや期」です。
魔の2歳児とかもよく言われます。

ええと反抗期みたいな感じで何でもかんでもイヤイヤ言う時期があるんですね。
これはもう、体験した人にしかわからないすさまじい時期です。

この「イヤイヤ期」をテーマにした超大作(?)を書き上げ、
分岐などもソースに組み込みました。

「あれもイヤ、これもイヤ」というこの時期の子供の理不尽さがゲーム化されていて、
「あるある!」「そうそう!」と共感してくれるんじゃないかな、と思っています。
きっと子育て中の人なら共感してくれるはず。
というか何とかイヤイヤ期をがんばって乗り越えてほしいという思いから
励まし小説として書きました。
分岐によっては最後はホッコリ、ちょっと感動するというもの。


で、「イヤイヤ期」とはある意味、親にとっては「恐怖の時期」なので、
ちょっとホラー風なアイコンや画像を作ってみました。
ちょっと「かまいたちの夜」風?


画像の加工はいつものJTrimです。
シルエットと背景の合成方法とかこちらのページが役に立ちました。
親切だなぁ。
背景の写真は写真素材足成というサイトさんでダウンロードしました。
商用利用可。登録不要。加工も自由とのこと。ありがたや。


というわけで今回はストーリー作成がメインの作業でした。


あと工夫したのは、一度ハッピーエンドで終わると、
その次のプレイで新しく選択肢が出てくるとか、
何度も楽しめる工夫をしました。
データを保存する機能の記事でも書いた、localStorageに保存する機能を使って、
どのエンディングをプレイしたことがあるかを保存しておき、
それによって選択肢を出すか出さないか判定したりします。

こちらからダウンロードできます↓
いやいや期物語

1作目はほとんどダウンロードされなかったので、
これに関しては、トイトレくまちゃんとあわせて、
フェイスブックなどで少し宣伝してみる予定です。
-----------------------------------

-----------------------------------
応援はこちらのクリックをお願いします。
にほんブログ村 IT技術ブログ iPhoneアプリ開発へ
にほんブログ村
にほんブログ村 IT技術ブログ Androidアプリ開発へ
にほんブログ村

| ホーム |
Page Top↑
▲ Page Top