ケース解説:17年2月までにココナラであった相談まとめ!

今回のまとめ

今回は、17年2月までにココナラであった相談のまとめになります。


17/03/28 山田メール(あ~っと、幕之内、ここに来てデンプシーロールを始めたー!高速ウィービングで相手に的を絞らせない~)


75:smoothproductsの使い方

jQueryのsmoothproductsの使い方を教えてほしいという依頼です。

smoothproductsは、画像の拡大縮小ができるサムネイルみたいですね。

使い方については特に難しい点はなかったんですが、当時かなり長い間にわたって風邪を引いていて、手の甲に帯状疱疹が出てしまっていました。

この依頼をいただいた後にリピート依頼をいただいたんですが、痛くてタイピングもできないほどだったのでお断りする事に。

その後、しばらくの間はココナラの仕事を休養していました。


画像で一言「あ~っと、幕之内、ここに来てデンプシーロールを始めたー!高速ウィービングで相手に的を絞らせない~」


17/03/29 山田メール(あ~っと、千堂もデンプシーロールだー)


82:FC2ブログのヘッダー下に画像を置きたい

以前にテンプレートの作成依頼を受けた方からのリピート依頼です。

ヘッダー下に画像で作ったメッセージカードを置きたいとの事。

以前の依頼時に大分おひねりをいただいてしまって、アップデートは無料にするつもりだったので、無料枠で受けたんですが、今回もおひねりをいただいてしまう結果に。笑

確かココナラの規約的には違反だったと思うんですが、そういう場合はダイレクトメッセージだけで解決してしまった方がいいのかもしれませんね。

自分で作ったテンプレートなので、1分もしないで片付きました。


画像で一言「あ~っと、千堂もデンプシーロールだー」


17/03/30 山田メール(千堂:幕之内、肖像権死守やで~!ぶるぶるぶるぶる~)


83:期間限定でコメントを受けつけたい

82件目の相談者からの追加依頼です。

前回の依頼を完了した後、すぐに追加の依頼があったので、前回の反省を生かしてトークルームを開かない事に。

案の定、完了後に「お礼はどうしたらいいですか?」と聞かれたので、「お礼は結構です。そのためにトークルームを開きませんでした。」と念を押すと、なんとかご納得いただけました。

作業の内容もコメントリンクの文字色をリンクカラーに直しただけだったので。


画像で一言「千堂:幕之内、肖像権死守やで~!ぶるぶるぶるぶる~」


17/03/31 山田メール(取材陣:す、すいません、記者会見なんであんまり動かないでもらえますか?)


84:FC2ブログにタブメニューを設置したい

はい、FC2ブログにタブメニューを設置したいという依頼ですね。

元々、headertabテンプレートや直近のCSSサムネイルなどでタブメニューはよく作っていて、ちょうどリクエストがあったので応募してみました。

話を伺うと、記事本文中に設置してスマホでも表示されるようにしたいとの事でした。

スマホでの表示にはメディアクエリを使って画面サイズごとにタブメニューのスタイルを切りかえる事で対応しました。

デバッグルームの方にも書きましたが、FC2ブログで自動改行が設定されていて、記事本文中に設置する場合はHTMLソースコードの改行をすべて削除して1行にしなくてはなりません。

タブメニューにはCSSの”+”を使っていて、ブログに自動改行が設定されている場合、改行が自動でbrタグに置きかえられてしまうので、スタイルを切りかえるHTMLタグの手前にbrタグが入って動作しなくなってしまうからです。


画像で一言「取材陣:す、すいません、記者会見なんであんまり動かないでもらえますか?」



忍者AdMax

にほんブログ村 小遣いブログ ポイントサイトへ FC2おこづかい稼ぎランキング

プロジェクト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%”を思いだします。彼はこんな冬の雪山でも服を着ないで捜査に参加していましたからね~。」




にほんブログ村 小遣いブログ ポイントサイトへ FC2おこづかい稼ぎランキング

プロジェクト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”とは」




にほんブログ村 小遣いブログ ポイントサイトへ FC2おこづかい稼ぎランキング

プロジェクト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”を作りました!」


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




にほんブログ村 小遣いブログ ポイントサイトへ FC2おこづかい稼ぎランキング

プロジェクト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周年です。皆さん、はなこさんのブログにお祝いのメッセージを!」


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




にほんブログ村 小遣いブログ ポイントサイトへ FC2おこづかい稼ぎランキング