プロジェクト4‐2:ブログクエストコロシアムを作成!

今回のまとめ

今回は、粕田埋蔵(かすたまいぞう)のブログカスタマイズ講座の第4‐2回として、新しく作成したゲーム”ブログクエストコロシアム”について説明したいと思います。


17/03/08 山田メール(世界初宝箱ファッション誌”TREASURE”登場)


ブログクエストコロシアム

ブログクエストコロシアムは中規模ゲームをつくりました。

ホームページの構造と訪問者の動きを考慮して、ブロクエキャラクターのじゃんけんトーナメントになっています。

また後日に説明しますが、ホームページにゲームを展開するenvというスクリプトを作ったので、それと連携できるようにしてあります。

ブログクエストコロシアムからはゲームに”フェーズ”という時間を導入しています。


画像で一言「世界初宝箱ファッション誌”TREASURE”登場」


17/03/09 山田メール(防水仕様で夏を遊べ)


復元できる乱数を作成

やっぱり新しい事を始めると次から次とアイデアが出てきますね。

あ~してこ~してと切りがりません。笑

復元できる乱数とは、Rで言う所の乱数seedのようなものです。

場合の数を使って、ランダムな数字から元のデータを復元しています。

詳しい解説はデバッグルームの方にアップしたので、興味がある方はご覧になってみてください。


画像で一言「防水仕様で夏を遊べ」


17/03/10 山田メール(中身は空がトレンド)


ボスキャラクターを追加

ボスキャラクターも追加しました。

ボスキャラクターはアイテムを無制限に使えるようになっています。

ただ、作っている時に思ったんですが、回復アイテムも無制限に使わせてしまうとマジで勝てなくなってしまうので、そういったアイテムは使えないようにしてあります。

FC2ブログに2MBのファイルをアップできるようになっていたので、2MBギリギリのサウンドファイルをアップしました。

いつもお世話になっている魔王魂さんのBGサウンドです。

ボス戦に使っているので、良かったら遊んでみてください。


画像で一言「中身は空がトレンド」


17/03/11 山田メール(秋モデルは金ぴかフレーム)


カスタマイズしやすい連想配列

大きな配列は二次元配列にした方が比較回数が減って処理速度が速くなるかと思ったんですが、全く逆みたいですね。

まあ、アップする頃にはどうなっているか分かりませんが、ブログクエストコロシアムもenvとセットで配布しようと思っているので、カスタマイズしやすいという意味ではいいかと思って二次元連想配列にする事にしました。

前にも話をしたと思いますが、jQueryも簡単に書けるというだけで処理速度が速くなる訳ではありません。

デバッグルームの方で参考サイトを紹介しているので、詳しくはそちらをご覧ください。

ココナラでよく「jQueryを使わないんですか?」みたいな事を聞かれるんですが、JavaScriptでできる事はなるべくJavaScriptで書くようにしています。

jQueryも全く使わない訳ではないんですけどね。笑


グラサン侍改め粕田埋蔵(かすたまいぞう)「ホームページにゲームを展開する環境”env”を作りました!」


画像で一言「秋モデルは金ぴかフレーム」




関連記事

プロジェクト4‐1:デバッグルームをオープン!

今回のまとめ

今回は、粕田埋蔵(かすたまいぞう)のブログカスタマイズ講座の第4‐1回として、新しくオープンしたデバッグルームというサイトについて説明したいと思います。


17/02/28 山田メール(こうして愛らしい猫の姿で猫とは思えない芸を披露した俺は一躍有名になった。)


新サイト”デバッグルーム”

はい、新しくデバッグルームというサイトをオープンしました。

GitHub的なバージョン管理を目的としています。

とは言っても、単なるアップデートの記録なんですが、失敗例は試す必要がない事、成功例はそのままアクセスアップの参考にしていただけます。

デバッグルームはブログではなくホームページにしたんですが、色々と分かった事があるので今回はその報告をしたいと思います。


画像で一言「こうして愛らしい猫の姿で猫とは思えない芸を披露した俺は一躍有名になった。」


17/03/01 山田メール(始めは困惑していたが、ある時気づいてしまった。猫は働く必要がない事に。笑)


ホームページとブログの勝手の違い

ブログと違ってホームページにはディレクトリーがあったりして勝手が違います。

ローカルでは動かないxmlHTTPRequestやjQueryのloadを動かせたりしますし、ディレクトリーさえ同じにしておけば相対パスを使ってローカルにほぼ完全なテスト環境を作れたりします。

ただ、ホームページは構造的に訪問者の動きが違います。

なので、今までブログに展開してきたゲームなどを、そのままホームページに移植しても同じようには楽しんでもらう事はできません。


画像で一言「始めは困惑していたが、ある時気づいてしまった。猫は働く必要がない事に。笑」


17/03/02 山田メール(調子に乗って開設した”吾輩は猫である”というブログは月間100万PVを達成、ファーストアルバム”猫踏んじゃった”はトータルで1000万回DLされ、YouTuberとしてもデビューした。)


次から次とアイデアが出てくる

新しい事を始めるという事は、同時に新しいアイデアを出すチャンスでもあります。

ずっと同じ事をしていると、慣れてきてルーティーン化してしまうからです。

デバッグルームをオープンしたのは1月5日ですが、オープン前後から数日間であっという間に数十のアイデアが出ました。

そちらで出たアイデアは、今後こちらのブログにも還元していこうと思っています。


画像で一言「調子に乗って開設した”吾輩は猫である”というブログは月間100万PVを達成、ファーストアルバム”猫踏んじゃった”はトータルで1000万回DLされ、YouTuberとしてもデビューした。」


17/03/03 山田メール(名前はタロー。ついにキダ・タロー、キタローと並んで世界三大タローになったのであった。)


全てカスタマイズできる

FC2ブログのいい所なんですが、本当に細かい部分までカスタマイズできるようになっているんですよ。

デバッグルームもFC2を利用していますが、他のブログサービスで同じようにカスタマイズするとしたら、ブログではなくホームページを作るしかないと思います。

まあ、PHPやSQL、CGIは使えませんが、ほとんどの事はJavaScriptでできてしまうので。

今さら流行るとも思えませんが、全て思いどおりのサイトを作りたい人にはホームページがお勧めです。


グラサン侍改め粕田埋蔵(かすたまいぞう)「3月3日ではなこさんのブログ2周年です。皆さん、はなこさんのブログにお祝いのメッセージを!」


画像で一言「名前はタロー。ついにキダ・タロー、キタローと並んで世界三大タローになったのであった。」




関連記事

プロジェクト3‐1:”Wikister”を作成!

今回のまとめ

今回は、粕田埋蔵(かすたまいぞう)のブログカスタマイズ講座の第3‐1回として、”Wikister”というプラグインについて説明したいと思います。


17/02/20 山田メール(朝目が覚めると猫になっていた。)


学習系Webアプリ”Wikister”

はい、xdomainajax.jsでWikipediaのページを取得しようと思ったんですが、これは流石にできませんよね。笑

ローカルでは取得できたんですが、仕方がないのでブックマークレットとインラインフレームを使う事に。

まあ、考えてもみれば分かる事だったんですが、当然Wikipediaでは実行できず、更にスマホChromeでも実行できなくなりました。

今はスマホからの方がアクセスが多いので、PC版でしか動作しないWebアプリを作りまくっても意味がないんですが、ちょっとコンセプトを見直す事にしました。


画像で一言「朝目が覚めると猫になっていた。」


17/02/21 山田メール(暗証番号は0299、”ニクキュー”って憶えてください。イエーーー、ジャスティス!)


もともとのコンセプト

もともとのコンセプトは、”Wikipediaのページの知識度を評価して、勉強しながらお宝ページを探す”というコンセプトだったんですが、対象をWikipediaからブログにする事にしました。

判定する要素はHTMLで指定できるようにしてあります。

できればWikiでやりたかったんですが、FC2Wikiくらいでしか動作しないと思います。

今、小遣い稼ぎWikiでチェックしてみたら、星8つになりました。笑

山田ブログは、何も指定していない状態で星2つです。

Wikipediaくらいになると、10以上になります。


画像で一言「暗証番号は0299、”ニクキュー”って憶えてください。イエーーー、ジャスティス!」


17/02/22 山田メール(とりあえず箱にでも入って状況を整理するか。)


”Wikister”の仕組み

仕組みは簡単なんですが、Wikiへのリンクを重複なくカウントして平方根+1を計算しています。

ちょっと平方根のグラフが見つからなかったんですが、大体4つのリンクで星3つに、100以上で星11以上になります。

これをWikipediaを探検しながらやりたかったんですが、あちらでは実行できないのでブログバージョンを作ってみた訳です。笑

スマホでも実行できないので、xdomainajax.jsで直に広告を読みこんでもよかったんですが、スクリプトが長くなるので広告ページをHTMLファイルにしてインラインフレームで読みこむ事にしました。


画像で一言「とりあえず箱にでも入って状況を整理するか。」


17/02/23 山田メール(落ちつくな~。)


pスライダーにタイトルを追加

はい、ディスプレイに表示される内容を括っているタグか、その親タグにtitle属性がある場合、タイトルとして表示するようにしました。

どちらにもtitle属性がある場合は、ディスプレイに表示される内容自体を括っているタグ側のtitleが優先されます。

そう言えば以前に「タイトルを伏せられると何の事か分からなくなる」という話をしましたし、pスライダーにも追加する事にしました。

面倒な作業になるかと思ったんですが、JavaScriptとCSSを数行書きかえるだけで済みました。


グラサン侍改め粕田埋蔵(かすたまいぞう)「”山田デバッグルーム”更新中!」


画像で一言「落ちつくな~。」




関連記事

プロジェクト2‐1:”占いの館”を作成!

今回のまとめ

今回は、粕田埋蔵(かすたまいぞう)のブログカスタマイズ講座の第2‐1回として、”占いの館”というプラグインについて説明したいと思います。


17/02/08 山田メール(しまった!見つかったか?)


占いの館

奥様向けに作ってみたんですが、どうですかね~。

ベースになっているのはタロットです。

仕組みを説明すると、pスライダーに散らばった占い師(キャラクター)それぞれに12通りのアルゴリズムがあって、日付と選択したキャラクターの順番によって占い結果がかわります。

開始リンクの下に”シャッフル”というチェックボックスがあると思いますが、チェックを外して同じ日に同じ順でキャラクターを選択して占うと同じ結果が出るようになっています。

シャッフルのチェックを外して、キャラクターを選択せずに占うと必ず0(The Fool[正位置])が出ます。

同じキャラクターは2回選択できません。

また、全てのキャラクターを選択する必要もありません。

これ、データベースを作るのが大変だったんですよ。笑


画像で一言「しまった!見つかったか?」


17/02/09 山田メール(悪いがズラからせてもらうぜ!このお宝は渡せね~な)


一部の解釈を削除

占い開始リンクとpスライダーは、上部オーバレイメニューに移動しました。

占いスペースは、個別ページ末のトイカジノ2の上にあります。

タロットの説明文はWikipediaから引用しています。

しっかし、タロットは解釈がネガティブですね。

悪い結果が多すぎます。笑

”流産”などの表現があったので、一部の解釈を削除してあります。


画像で一言「悪いがズラからせてもらうぜ!このお宝は渡せね~な」


17/02/10 山田メール(撒いたか?)


BGサウンドを追加

BGサウンドとタロット一覧を追加しました。

BGサウンドは、お馴染みの”魔王魂”さんのものを使わせていただいています。

タロット画像には山田ブログのキャラクター達の色相を変更したものを使っています。

正位置、逆位置合わせて全部で44パターンあります。

一度手抜き画像をアップしてしまったので、上書きが大変でした。

後で思ったんですが、トランプの時みたいに1つの画像にして部分表示にした方が良かったかもしれませんね。


画像で一言「撒いたか?」


17/02/11 山田メール(この港から国外に逃亡だ!(”The宝箱4” ~このティッシュだけは渡さない~))


pスライダーの広告表示位置

PC版pスライダーのスポンサー広告をhoverで拡大表示に変更しました。

もともと、”おしゃべり河童君”に広告を入れる方法を考えていたんですが、そっちに入れるならpスライダーに入れた方がいいかと思って。

JavaScriptは上書きしてありますが、CSSの方もアップデートがあるので、お手数ですが利用したい方は説明書の方を再度ダウンロードしてください。

pスライダー配布ページは、小遣い稼ぎWikiの方にもあります。


グラサン侍改め粕田埋蔵(かすたまいぞう)「まとめにしか登場してない...笑」


画像で一言「この港から国外に逃亡だ!(”The宝箱4” ~このティッシュだけは渡さない~)」




関連記事

プロジェクト1‐1:”おしゃべり河童君”を作成!

今回のまとめ

今回は、粕田埋蔵(かすたまいぞう)のブログカスタマイズ講座の第1‐1回として、”おしゃべり河童君”というプラグインを例にプラグイン作成の流れを説明したいと思います。


17/01/31 山田メール(シリーズ2作目にして、ついに主役に躍りでた宝箱)


”おしゃべり河童君”作成の流れ

遊園地のアトラクションに通りかかるタイミングでしゃべりだす人形ってあるじゃないですか。

GitHubでサウンドデータが手に入ったのでオルゴールを作っても良かったんですが、クリスマス向けのゲームで1度作っているので、サンプルとしてページを移動するごとにサイドメニューの河童アイコンに様々なメッセージをしゃべらせてみたいと思います。←テストで動作は確認してあるんですが、実際に設定はしてありません。

この関数にはidを2つ渡すんですが、1つ目は追記に書きこむ優先idで、2つ目はサイドメニューかテンプレートに書きこむ全体idになります。

idの中には、◆区切りでサウンドファイルを複数指定できて、河童アイコンにカーソルを乗せるとランダムに選んだサウンドを再生します。

色々とやっていますが、スクリプトは10行くらいで済んでいます。


画像で一言「シリーズ2作目にして、ついに主役に躍りでた宝箱」


17/02/01 山田メール(どんな困難も乗りこえる。そこに宝箱があるから)


配布について考える

次は、配布について考えてみましょうか。

こういう一言メッセージって、けっこう人気が出るんですよ。笑

もともと配布を前提に書いてあるので、スクリプトはそのままでいいんですが、個別ページごとに設定ができるので、そこだけで1つのコンテンツになりますから、広告を入れたりしてもいいかもしれませんね。

ユニクロのCMみたいな言い方になりますが、山田はいつもxdomainajax.jsを使っています。笑

スクリプトの読み書きができる人からしたらほとんど意味がないんですが、一応簡単なBAN設定もあった方がいいと思います。

とまあ、毎回そうしているとアップデートが大変になりますから、この辺りの機能はpスライダーにまとめます。


画像で一言「どんな困難も乗りこえる。そこに宝箱があるから」


17/02/02 山田メール(そして現れた最強の敵)


プラグインの組み込み

このプラグインは少し単純すぎますが、プラグインの中にもプラグインを組みこめるようにしておくと利用者に自由にカスタマイズを楽しんでもらう事もできるようになります。

プラグインを組みこめるようにする簡単な方法に、JavaScriptのtypeofがあります。

例えば、ifの中でtypeofを使ってymd_plugin1が存在するかどうかを確かめれば、”あれば実行、なければスルー”という処理ができます。

そこで、ymd_plugin1はこちらでは用意せずに利用者に作ってもらえば、こちらが作ったスクリプトの中に利用者が書いたスクリプトを組みこめる訳です。

1人で全ての機能を作るより、(広告ネットワークを作っておいて)利用者にプラグイン作成を許可した方が早く多くの人に配布する事ができます。


画像で一言「そして現れた最強の敵」


17/02/03 山田メール(さあ、鼻をかみなさない。(涙腺崩壊必至))


HTMLで設定ができるようにする

ブログを書いているという事は、だいたいHTMLくらいは使えるでしょうから、HTMLで設定ができるようにしてあげると利用者にとって使いやすくなります。

やり方は簡単なんですが、idを付けてdisplayをnoneにしたdivタグの中に設定を書きこめるようにするだけです。

スクリプト側では初期値は必要になりますが、ifの中でgetElementByIdを使ってidが存在するかどうかをチェックして、あったらinnerHTMLを変数に代入します。

初期値が必要になるのは、if文で確認するので、なかったらなかったでスルーするからです。

別のやり方もあるかもしれませんが、利用者にとっては分かりやすい方法だと思います。


グラサン侍改め粕田埋蔵(かすたまいぞう)「ぶっ、出番なし!」


画像で一言「さあ、鼻をかみなさない。(涙腺崩壊必至)」




関連記事