山田
ブログリーダー

プロジェクト5:ホームページダンジョンを作成!

今回のまとめ

今回は、粕田埋蔵(かすたまいぞう)のブログカスタマイズ講座の第5回として、新しく作ったゲームホームページダンジョンについて説明したいと思います。


17/03/24 山田メール(絶好調~真冬の恋~スピードに乗って~)


ホームページダンジョン

ホームページをダンジョン化してゴールを目指すゲームを作りました。

ホームページダンジョンは元々はオンラインゲームの企画だったので、複数プレイヤーで同時に遊ぶ事を前提に作ってあります。

仕掛けの論理パズルは、このブログで以前に紹介した”狼と羊とキャベツの川渡り問題”を参考にしてライツアウトにしました。

押したスイッチと上下左右のスイッチが反転していって、1行オフにするごとに対応する扉が開きます。


画像で一言「絶好調~真冬の恋~スピードに乗って~」


17/03/25 山田メール(急上昇~熱いハート~溶けるほど恋したい~)


マップ生成システム

完成してみると、マップ生成システムの設計が一番大変でしたね~。

今後、何かの機会にオンラインゲームにするかもしれないので、その前提で考える必要があったんですよ。

ブログクエストコロシアムなどは通常のブラウザーゲームとして作ったため、後からオンラインゲーム化する事は難しい事が分かったので。

現時点でオンラインゲーム化する予定があるのかと言われると、今の所はありません。


画像で一言「急上昇~熱いハート~溶けるほど恋したい~」


17/03/26 山田メール(ブレイク寸前~幸せへのゴール~)


ライツアウトの導入

実は名前を知らなかったんですが、そういう有名なゲームがあったな~と思って、Googleで”タイル カラー 反転 パズル”と検索してみたら名前が出たんですよ。笑

便利な世の中になりましたね。

ライツアウトのプログラム自体は簡単なんですが、試しに4×4で作ってテストしてみると、ものすごく単純な方法で4手でクリアできる事が分かってしまいました。笑

”これじゃ駄目だ”と思って、5×5に作りなおすとちょっといい感じに。

もともと、数値部分を定数にして作っていたので、長さの定数に代入する値を交換するだけで済んだんですけどね。

大変だったのは、名前が出てこなかった間だけです。笑


画像で一言「ブレイク寸前~幸せへのゴール~」


17/03/27 山田メール(UKYOU‐AI:おやおや、ゲレンデに来て”ブレイク寸前”と言われるとかつての相棒”アキラ100%”を思いだします。彼はこんな冬の雪山でも服を着ないで捜査に参加していましたからね~。)


設計について

マップ生成システムとか設計が大変だったんですが、完成してからは大したバグもなくあっさりと公開できました。

最初に考えていた時にどう考えても合理的なシステムにならなかったので何度か考えなおしたんですが、あまり設計に時間を掛けても仕方がないので作りながら考える事に。

Cookieから渡されたデータを2次元配列に展開する辺りなんかは、もう少し合理的な設計があったかもしれません。

他にも少し複雑になってしまった部分がいくつかありますが、今後の開発のためにいい経験になったと思います。


グラサン侍改め粕田埋蔵(かすたまいぞう)「ココナラサービスの技術を検定・認定するサービス”山田ギルド”をオープンしました!」


画像で一言「UKYOU‐AI:おやおや、ゲレンデに来て”ブレイク寸前”と言われるとかつての相棒”アキラ100%”を思いだします。彼はこんな冬の雪山でも服を着ないで捜査に参加していましたからね~。」




関連記事

プロジェクト4‐2:ホームページにゲームを展開できる”env”を作成!

今回のまとめ

今回は、粕田埋蔵(かすたまいぞう)のブログカスタマイズ講座の第4‐3回として、ホームページにゲームを展開できる”env”スクリプトについて説明したいと思います。


17/03/16 山田メール(今だ、フォーメーション発動!)


ホームページにゲームを展開する”env”

さあ、張りきって書きますよ~!笑

まあ、デバッグルームの方に書いているので特に説明する事はないんですが、こちらではものづくり体験談をするんでしたね。

2、3日前に作ったのにすでにほとんどの事を忘れています。

て言うか、Googleの「httpsサイトを優先的にインデックスする作戦」って何か意味があるんですかね。

そんな事言ってみんなhttpsにしだしたら、マジで意味がなくなると思うんですけど。


画像で一言「今だ、フォーメーション発動!」


17/03/17 山田メール(えっ、あれは試合じゃマズくないすか?)


CSS階層メニュー

これははまりました。笑

何を思ったかチェックボックスで作ろうとして1時間くらい悩んだんですが、結論は”ラジオボタンで作ればいいじゃん”でした。

どういう事かというとCSS3の:checkedで、1回押したら1枚目のオーバーレイが、2回押したら2枚目のオーバーレイが開いて、3回押したら閉じるようにしたかったんですね。

恐らくチェックボックスでは不可能だと思いますが、なぜチェックボックスで作ろうとしたのかは自分でも謎です。笑


画像で一言「えっ、あれは試合じゃマズくないすか?」


17/03/18 山田メール(フォーメーション”ボックス‐1”発動!(二歩))


工夫した点

ゲームスクリプトからゲーム情報を受けとって待機リストに展開リンクを書きだそうと思って関数の存在確認をしようとしたんですが、変数の中に関数名を入れてtypeofでチェックしても変数の存在確認になっちゃうんですよ。

そこで変数の中に匿名関数を入れて、その中で関数の存在確認をする事にしたんですね。

デバッグルームの方にも書いたんですが、変数名の後ろに()をつければ代入した関数を呼びだせます。

まあ、あまり使う機会はないかもしれませんが、他に何に使えるかはこれから考えていこうと思います。笑


画像で一言「フォーメーション”ボックス‐1”発動!(二歩)」


17/03/19 山田メール(流石だぜ、安西先生。ここで”ボックス‐1”とは)


旧ゲームをenv対応にアップデート

カジノ2と占いの館、ブログクエストコロシアムをenv対応にアップデートしました。

pスライダーと連携している場合は、今まで通りに動作します。

年が明けてから暇さえあればJavaScriptを書いています。

”どんだけJavaScriptが好きなんだよ”って話ですよ。笑

これで違う言語でも使いはじめたらプログラミング漬けになりますね。


グラサン侍改め粕田埋蔵(かすたまいぞう)「ホームページダンジョンを作りました!」


画像で一言「流石だぜ、安西先生。ここで”ボックス‐1”とは」




関連記事

プロジェクト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を数行書きかえるだけで済みました。


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


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




関連記事

便利メニュー
携帯版山田ブログ(タグランキング)携帯版山田ブログ 更新情報メールボックス スターターガイドお役立ちツール集 ブックマークはてなブックマーク
お薦めポイントサイト1位
モッピー!お金がたまるポイントサイト
モッピー
14年注目度No1
ポイントレート 1ポイント=1円(1コイン=0.1円) 紹介制度 2ティア(40%) 最低換金額 300ポイント(300円)~ 換金上限 なし
げん玉
お薦めポイントサイト2位
毎日お得がいっぱい げん玉
げん玉
人気No1
こちらから登録で250Pがもらえます!
ポイントレート 1ポイント=0.1円 紹介制度 3ティア(最大35%) 最低換金額 3,000ポイント(300円)~ 換金上限 一日1万円まで
ハピタス(入門系)
3位
日々の生活にhappyをプラスする|ハピタス
ハピタス
入門的ポイントサイト
こちらから登録で30Pがもらえます!
ポイントレート 1ポイント=1円 紹介制度 2ティア(最大40%) 最低換金額 300ポイント(300円)~ 換金上限 一か月3万円まで
GetMoney!(メール受信系)
☆4位☆
お小遣い稼ぎなら最強ポイントサイトGetMoney!
GetMoney!
メール受信で稼ぐなら
ポイントレート 1ポイント=0.1円 紹介制度 2ティア(50%) 最低換金額 5,000ポイント(500円)~ 換金上限 なし
ポイントタウン
チャレンジ中
ポイントでお小遣い稼ぎ|ポイントタウン
ポイントタウン
コンテンツ量No1
こちらから登録で500Pがもらえます!
忍者AdMax(自動で稼ぐ系) ブックマークレット
山田バー t検定のピタゴラスイッチ ブログクエスト ブログクエスト(バトル) トイカジノ2(ポーカー) 山田フィッシング 山田城と不気味なスリラーナイト 山田城と不思議なクリスマスキャロル 山田城 山田城と麗らかな春 pスライダー 占いの館
相互リンクについて
当ブログは相互リンク歓迎です絵文字237
ただし、相互リンクは、
お小遣い稼ぎ情報を扱っていて、
お申し込みをいただいた時点で更新を続けられているサイト様
に限らせていただきます絵文字234
※こちらから申し込みをさせていただく場合は
この限りではありません絵文字203
リンクはこちらもそういたしますので、
トップページからしていただけると嬉しいです絵文字236
なお、内容について、
法律に反していたり、
モラルが欠けていたりする場合などは、
リンクをお断りさせていただく事があるので、ご了承ください絵文字183
横断検索サポートを始めました。
相互リンクをしている必要はありませんが、
サイドメニューで使われたい方はリンクをお願いします絵文字87
一言お声掛けいただければ、
こちらからもリンクいたします絵文字179
お申し込みは、
相互リンクの輪
コメントからお願いします絵文字228
相互リンクについて!◆星2つ