落ちゲーアプリ作成14（残り秒数カウント導入）
当初、人にゲームをやってもらった時に「終わっちゃったんだけど。」と言われまして、10秒間しかないゲームですからやった感がだいぶ薄いんだろうなとは思っていました。せめて30秒くらいはいるかなと思っていましたが、まだ実装まではいきません。
しかし、残り秒数のカウントを入れることにより、元々10秒しかないんだとわかってもらうことができるので導入しました。
結果、本の記述を参考にして
const totalTime = 10000;
const oldTime = Date.now();
const timerId = setInterval(() => {
const currentTime = Date.now();
const diff = currentTime - oldTime;
const remainMSec = totalTime - diff;
const remainSec = Math.ceil(remainMSec/1000);
let label = `${remainSec}`
if (remainMSec <= 0) {
clearInterval(timerId);
label = '0';
}
document.querySelector('#last_time_s').innerHTML = label
},1000);
を導入し、10秒のカウントダウンの表示に成功しました。
setInterval と最後の列で1秒ごとに中身を繰り返しているようで、最初の時間 (oldTime) を関数式の外に定義することにより、現在時間 (currentTime) だけが進んでその差を利用して残り時間を表示するという形をとっています。
残り秒数は .ceil を利用して切り上げています。
clearInterval で0秒以下になった場合は、関数式を繰り返さないように指定しています。
以下の投稿を参考にしています。
【JavaScriptの基本】setTimeoutとsetIntervalによる関数スケジューリング | ワードプレステーマTCD
表示の結果は、左上の秒数カウントダウンです。
制限時間10秒だから本当は小数点以下を表示した方が良いかもしれません。
引き続き頑張っていきたいと思います。
落ちゲーアプリ作成13（ツイッター、インスタへの点数つぶやき挿入）
点数の結果表示画面からツイッターとインスタで結果をつぶやけるようにロゴとリンクを貼り付けました。
link_to と image_tag が同時に使えるか調べまして
rails5でlink_toとimage_tagを一緒に使う - Qiita
を参考に
<div class="url_image">結果をつぶやく<br>
</div>
という形で記述しました。クリックで別タグで開くように設定しています。
その時に URL をいじられないように以下の投稿を参考にしています。
[Rails] link_toのリンク先を別タブで表示させたい - Qiita
こんな感じになりました。
コードの差分の確認
少しご無沙汰してます。
就活の面接が続いています。準備し出すとキリがないですね。
今日は同じコードを打ってるはずなのに何故かエラーになったり、表示が違う時の確認方法です。
VSコードで以下を実行する
- 見本のコードをコピーする
- 自分のコードがあるファイルを開く
command + shift + Pでコマンドパレットを開く>に続けてcompareと入力し、Compare Active File With Clipboardを選択- 赤字でハイライトされている見本と異なる部分を確認する
- 編集したいファイルを選択して、誤字や抜けているコードを修正する
こうすることでコードの誤りを発見できます。
イメージはこんな感じです。
引き続き学習を進めていきます。
オリアプも少しずつ進めています。
また新しい発見がありましたらアップしていきます。
落ちゲーアプリ作成12（チェックボックスの大きさ変更、render で呼び出す要素の変更）
オリアプの進み具合は牛歩ですが、やはり少しやるだけでも学びがありますね。
ゲームで大事な見た目を整えており、今回はログイン画面を修正中。
devise の gem を利用してますが、チェックボックスの大きさを変えられないかとネットで検索したところ、以下の記事を参照し、
【Rails】check_boxを完全理解！画像と連動したチェックボックスを作成する方法（他のタグと紐づけて範囲を広くする＆DB連携）
,{ style: 'transform: scale(1.5);' }
をチェックボックスに追加したところ大きさを変更することに成功。
因みに transform がよくわかってなかったので検索したところ、また使えそうな記事を見つけたのであげておきます。
【CSS】transformの使い方を解説！要素の変形や回転も自由自在 | creive(クリーブ)
ボタン :hover で変わるのって面白いですよね。
もう一つ、 devise のログイン画面に、新規登録画面への遷移とパスワード忘れた場合のパスを設定してあるのですが、 link_to なので a 要素同士が margin が効かず、くっついて表示されていたのですが、これは呼び出している _html.erb で div で囲うことによって、解消されました。どこからどこまでを呼び出しているのかよくわからないので、その辺りはまた今後の課題としたいと思います。
落ちゲーアプリ作成11（表示するエラーメッセージについて）
ゲーム機能を先に作成できており、ログインについてはゲストログインで遊べるようにしていたため、新規登録とログイン画面の修正を後回しにしていました。
今回は新規登録画面を完成させました。
色合いを選ぶこと、フォームの場所の配置、幅の設定等試行錯誤の繰り返しですが、少しずつ良い感じの見た目に近づいて来たと思います。
そんな中、スクールのカリキュラムで利用してた CSS をコピー利用したら
.field_with_errors {
display: contents;
}
なる表現が。
html 内で検索しても同様のクラス名がないので消そうかと思いましたが、"errors" の文字が気になったので、消してみて更新してみるとフォントが崩れてしまいました。
調べてみると、
Railsのバリデーションエラーで、「field_with_errors」によるレイアウト崩れを防ぐ | yukimasablog
という記事を発見し、この CSS は残さないとなぁと思いました。
エラー文が黒文字の表示だったのでこの場に color: red ; を入力すると赤字のエラー表示になるかなと思いましたが、エラーになっている label 要素の文字が赤色になっていました。
まだ取り組んでないですが、エラーとなるフォームの枠を赤色にする方法の以下の記事も発見したので、今後の課題としたいと思います。
CSSの:invalidでエラーになった入力欄のスタイルを変える
戻りまして、エラー文の赤字表記ですが、これは簡単で render で呼び出している "_error_messages.html.erb" の要素に color: red ; を入力するだけで出来ました。
就職活動でなかなかオリアプ進んでませんが、これをやってる時間は楽しいので頑張って取り組めるように就職活動も頑張ります。
ではまた！
落ちゲーアプリ作成10
就職活動として PF を作成したり、README を修正したりでなかなかオリアプが進みません。
今日は2、3時間ほどオリアプ作成のための時間を作って取り組み、ゲーム性として大事な得点の記録機能を調べてチャレンジしていました。
ネット検索では関数宣言or関数式の中から出したい値を return で呼び出し、その関数名を利用することで値を呼び出す方法を掲示していました。
関数とスコープ · JavaScript Primer #jsprimer
僕の場合は addEventListner 内の関数宣言内の値を呼び出したかったので、addEventListner 関連の記事の中に、関数宣言を外に出す方法が記載されている以下の記事を発見したので、試してみると関数宣言を外に出すことは成功。
【JavaScript】addEventListenerで関数に引数をわたす｜北の南｜note
しかしながら、肝心の点数( clickCount と定義しています。)に関しては、その値を呼び出すことができませんでした。
// クリックカウント
const gamePoint = document.getElementById("game_point");
const resultPoint = document.getElementById("result_point");
const ninjas =document.getElementById("ninjas");
let clickCount = 0
function countUp(){
clickCount += 10;
gamePoint.innerHTML = `合計${clickCount}点`;
resultPoint.innerHTML = `総得点 ${clickCount} 点`;
return clickCount;
};
ninjas.addEventListener("click",countUp);
今のところこんな感じで、今までは最下段のninjas.addEventListner("click",
()=>{~});というような感じだったものを外に出した感じです。
どっちにしても clickCount が外に呼び出せなければ一緒なのですが。。
clickCount が外で呼び出せれば、倒す忍者毎に点数が変更できると思いますし、記録の登録もできるはずです。
ゲーム性を高めるためにここは絶対成し遂げたいのでヒントになりそうな本を買ってきました。勉強しながらこの機能は実装したいと思います。
一旦じゃ全く装飾がされてないページの手直しや合計点数を他の投稿サイトに気軽にアップできるようにロゴを添付するなどの機能から進めていこうと思います。
プログラミング用語まとめシリーズ①
面接対策として、簡単な用語についての理解を言語化してみました。
・MVCの仕組みについて
MVCとは、クライアントサイドからのリクエストに対して、レスポンスを返すために、データベースへのアクセスが必要なのか、必要でないのかをコントローラーに記載した決められた方法で判断し、必要であればモデルを通じてデータベースへのアクセスを行い、不要であればアクセスせずにビューを返すという仕組み。
・オブジェクト思考とは
ものと機能を分けて作ることで、開発が効率よく行えるようにすること。例えばボタンのコードを作成したときに、ボタンという要素と登録、更新、削除という機能を分けておくことで、違う機能のボタンを作成しやすくしたり、複数のボタンの大きさを同時に修正したりすることができるようにしておくこと。
・アジェイル型開発とは、利点、ウォーターフォール型開発との違い
アジャイル型開発の利点は、リリースまでの時間が早いことです。機能毎にイテレーションが行われることから全ての機能が開発される前にリリースすることが可能で、ユーザーの意見を反映しながら仕様を変更することが可能。ウォーターフォール型開発は、全体の企画、開発、実装、テストを順に行っていくことから開発途中での仕様の変更が難しいが、全体の進捗管理がしやすく、品質が担保される。主に大規模開発で利用され、時間が必要となるが、開発工程がしっかりと分かれているため専門の技術を利用する。
・Ruby の長所、短所
ruby はまつもとゆきひろさん（日本人）によって開発されており、自由度が高い、インプリタ式の言語。 Twitterやクックパッド、食べログの開発に利用されている。 自由度が高いゆえに他の人が見て分からない可能性があることと、インプリタ式の為速度が遅いことがデメリット。
とりあえずここまでが第一弾です。
まとめシリーズの次回のアウトプットの時期は未定ですが、早めにやりたいと思います。
