2020-01-15：成し遂げたいamに出てみた感想
先日、お誘いいただいた成し遂げたいamのゲスト収録へ行ってきました。
リリースされたので…最初に紹介します！！！
Podcast生やして1か月以内にゲスト出演するという爆速でなんか進化してる感じの私……！
あんまり緊張しないタイプの私ですが、
さっすがに生まれてはじめての収録だったので
「マーライオンになりそう～」って言いながら…行ったのがいい思い出。
ラボに初めて伺った私の感想。
「秘密基地感すごい！！！！！！！！！！！」
主に私のノウハウで話せそうなお話を中心にお話させてもらいました。
（IT)技術の話はしてないけど、（コミュニケーション）技術の話はしたぞ！！！！！
tech系だぞ！！！！！（言い張る）
ぜひに…
聞いてもらいたいのですが……
私が衝撃だったのは
「子音を立てる」って言ったときに通じなかったときに
「！！！！！！！！！（そうかこれは専門用語なのか！！！）」
となってましたｗ
みんな結構意外と子音がおろそかになってるから、
「子音立てていこうねｗｗｗｗｗｗｗｗ」
暖かくむかえてくれた、なべくらさん、かねさんには感謝しかありません。
ほんとネタバレになるんで多くは語れないんですけど…
すごく楽しかったです！
----------------------
なお、うちのPodcastでもゲストをぬるぬる募集しています。
ちょっと10分くらい私がやる雑なしゃべり方講座（？）やって！から…雑談までぬるぬるしていきましょ～！
エンジニアさんでしたら「なんでエンジニアになったのーーーーーーー！！！！！」って質問投げるよー！そこから楽しくお話広げていきましょう！
色々私に教えてください！
お礼にしゃべり方講座（雑）をします。
必要なのは
「ディスコード」もしくは「Zoom」のアカウントがあって通話ができれば、後は私が気合で何とかしますー！
ご興味ある方は、
twitterフォローの上
（相互だったら）DM
（そうでなかったら）リプライでお話かけていただければと思います！！
2020‐01‐13：よりよいPodcastにしたくなった時に
みなさーん！わたしでーす！！ふぁんです。
先日、とあるPodcastの収録へお邪魔しに行ってきました。
そのPodcastに関しての日記は、無事に公開されたときに、振り返りの文章を書こうかなーと思っています。
※わたし、色々書いてるけど本業は生音の人だからこういう機材は弱いんです！今までの勉強の集大成ってことで、とりあえず読んでもらえるとよいな～と思ってます！◎
よりよいPodcastにしたときになったときに
ふぁんさんの知見を広めたら？
KANEさんとPodcast関連のやり取りをしていた時に、
「その知見をぜひ広めてもらいたい」みたいなことを言われたので
ふぁん「そんなに役に立つ話なのだろうか…」みたいな気分だったんですけど…
モノは試しなので、少し私が今までやってきたことのノウハウをまとめておこうとおもいます。
前提条件として
もし、初めてPodcastをやりたいと思ってる方がいたら
入門向けの本が存在しますので、まずそちらを見ながらやってみましょう！
私の今から書く話は、
現在podcastをやっていて、よりよいPodcastにするにはどうしたらいいのかな？と思っていらっしゃっている方向けのお話だったりします。
割と導入しやすい順番に紹介していく（つもりなので）
よければ見て頂ければなーと思います。
具体的に…
すぐにできそうな事
①マイクの位置を検討する
個人の環境によりけりなのですが、
私の周りのPodcast界隈でよく使われているマイクは
これっぽそうなのでこういったコンデンサーマイクを使われてるという事を前提にお話ししたいと思います。
→コンデンサーマイクを使っている場合（特にYeti)
みなさん、編集していて息の音が多く入って「ボフッ」みたいなことになったことはないですか？できればなんですけど、マイクとの距離…できれば近いほうがいいんです。反響音とかも入りづらいんです。その代わり吐息とか歯擦音がめっちゃ入るので②で紹介するポップガードを導入することをおススメしたい…！しかし、ポップガードを導入できない事情がある場合マイクの配置を変えるだけで少し抑えられる可能性があります。とりあえず言えるのはマイクの配置を口元より少し上げてあげる事でポップノイズが入りづらくなるのでぜひ知識として持っておきましょう。
公式が
こういうのを出す程度にはマイクの位置を上げる意味があるんです。
（でも、これ1万円超える代物でアレなので…）
こういうものもあるので検討してみるのもいいと思います。
注意：私…Yeti持ってないので確かなことは言えないのですが、一般的なコンデンサマイクなのでおそらくつくとは思うけどご自身でよく確認してからご購入ください。
----以下特にYetiを使っている方向けに----
◎モードがあるってご存知ですか？
→一人で収録するよ！
Yetiの場合、CARDIOID MODEなるものがあるようなのでこのモードにしましょう！
単一指向にすることによって余計なノイズが入る可能性が下がります。
→2人で収録するよ！
Yetiの場合だったら、BIDIRECTIONALこのモードがあるっぽいのでこれにして、対面になるように座って収録しましょう。双指向性なので、無指向よりはノイズが入る可能性が下がります。
→それ以上だ！
Yetiの場合使えるモードはOMNIDIRECTIONAL MODEですね。
無指向性なのでいろいろ環境音も拾ってしまいやすい感じにはなってしまいますが3人以上であればこのモードを使用するとよいかと思います。
単一指向性とか双指向性とか無指向性とかわかんない！って方は
オーテク先生がいい感じに記事書いてくれてるのでそれをご覧ください。
もし、yeti以外のコンデンサマイクをお使いの方の場合は
モードのところは特に気にせず、マイクの位置を気を付けるとよくなるんだなー。って思っていただければ幸いです。ただ、一人で収録する場合は単一指向性のコンデンサーマイクを、そうでない場合は無指向性のマイクを選んであげるとよいかもしれないです。
②ポップガードを用意する
個々人の録音環境によりけりなのですが、ポップガードというのを用意するといいのではないかと思っています。ポップノイズが抑えられる＋マイクとの距離を一定に保てるという意味で結構有効だったりします。
おひとり様で録音している場合
おひとり様だったら、こういう系のものがオススメです。
（実際に何を選ぶかは調べてね！あくまで、例示です。）
マイクの感度をうまく調整しながら、ポップガード前で話すようにすると環境音が入りづらく一定のボリューム感で録音できていい感じになると思います。
複数の場合
上のポップガードはつけられないので、
こういう系のものを使うと少しでもポップノイズが抑えられると思います。（これは使ったことないから何とも言えないけど、きっとないより断然いいはず）
あとはご一緒に出られる方に、できるだけマイクと自分の距離を一定に保つとよいかも…って言ってください。
ちなみに、近いほうがいいとは言ったはものの、複数人で音声収録する場合はそうも言ってられないので距離を一定に保つ努力をしてもらって、なるべく環境音が少ない状態にしてあげると後の編集作業がぐっと楽になると思います。
ちなみにマイクを上げるのと同時にやると効果アップです！
ちなみに、私夏場でコンデンサーマイク使うときはエアコンも扇風機も止めてやってました！！！！！！！！
③編集のためのソフトを検討してみる。
これは万人におススメできるわけではないのですが…
もし、よりよいクオリティのPodcastにしたいなあ…って思ったときには
Adobeのauditionというソフトがありますので、そちらを使用することも検討してみてください。
おそらく、無料のものでやれることともしかして変わりはないかもしれませんが、
同じことをやろうとしての作業スピードが変わります。
そして圧倒的にクオリティがあがります。
AdobeのCCに入ってない場合、単体でもサブスクできます。（約２５００円）
単純に収録回数が多い、多くはないけど編集の時間を短縮したいと思った場合はこのような手段もありますので是非覚えて頂ければと思います。
お前の環境教えて？
実はわたし、USB接続のコンデンサマイクじゃなくて
オーディオインターフェースにダイナミックマイク接続してしゃべってます…。
気を付けてることはあまり上記のこととかわりません。
マイクの位置、ポップガードを付けるなどなど。
利点としては、自分の声をモニターしながら収録出来る点は非常にいいなーと思ってます。（AG03・06の場合だけど）
移動に弱いですが、自宅で一人で収録することが多い方には
そういう機材を用意してやってみるってのも悪くはないと思います。
音に気を付ける意味
私もはじめはひどい音質でいろいろ生配信してました。
もうこれは放送事故だろみたいなことも何度もしています。
でも、そういう失敗から得たことがあって上記なようなことを気を付けるようになりました。
どんなにいい内容でも、音質の差で聞いてもらえなくなる可能性もあります。これは、残念ですが私も初期のころはよく無言で部屋から出られたこともたくさんあります。
でも、音質に気を付けるとそれだけでとりあえず「聞いてくれる」人が現れます。
それは生配信でもpodcastでもあまり変わりはないと思ってます。
まずはやってみて、自分で編集して、頑張ってみる。
すごいいいこと！
もし初心者の方でこの記事をよんで、
「そんなに気を付けなきゃいけないのか…」って思った方がいらっしゃったら、違います！
まずはやってみて、試してみてください。
失敗は怖くないです。（ちょっと恥ずかしいけど）
そして他の方の配信を聞いてください。
自身のと聞き比べて何が違うのかを考えてみてください。
よりよくするにはどうすればいいのだろう？
そういう反省を何回も繰り返すことによって成長して
少しでもいい配信になっていくと思うのです。
その成長をしたくなったときに、きっとこの日の私のブログが役に立つかもしれません。
2020-01-09 前へ進むために
前へ進むために
もしかしたら少し重たい話かもしれないけど、
見てもいいよって方がいたらそのまま読み続けていただければと思います。
自信がない
諸事情により１０年くらい何もできなかった人なので、
（いずれ詳細をお話する機会もあるとは思いますが取り合えずコレで！ｗ）
最近、社会に飛び出て色々やってはいるもののあんまり自信が無かったりします。
きっと私は普通の同年代の方に比べたら
ずっとずっと子供っぽいというか、おそらく知っているであろう常識を知らなかったりするんだろうな～って思ってます。
だから、最近いろんな人と接する機会が増えて
「わたしはこれで大丈夫なのだろうか。」って心配がすごくあります。
うまく振舞えてるだろうか
うまく伝えたいことを伝えられてるのだろうか
失礼なことはしてないだろうか…
いっぱいっぱいの不安があります。
でも、前に進みたいから。
不安はあります。
でも、私は前に進みたいんです。
普通という概念はすごく難しんですけど、とても難しいんですけど…
でも「普通の大人の女性」になってみたいって気持ちがすごくあるので
そのわからないことや、不安なことと向き合って
私は…
前に進みたい。
どっちが前かってのはわからないんですけど、
いろんな人と接しながら
時には悩みながら
それでもとにかくチャレンジしたいんです。
今、接してくれて
アドバイスを下さる先輩の皆様。
本当にありがとうございます。
私は私のできる限り前に進んでいこうと思ってます。
いずれ
前に進んでみたいけど、できないかもしれないって思ってる人がいたら
「失敗しながらだけど、少しずつ前に進めたよ。」
って言える人間になれたらなって思います。
いずれ、時期が来たら私の事をもう少し話そうかなって思ってます！
それまで期待しないで待っててください！笑
2020-01-05
驚いたこと
まず
最近、技術書を読んでいて以前は白目向いてわからないとなっていた部分が
「あれ…もしかしてこういうことが言いたいのかな？」となった。
最初は読んでも「？？？？？？？？？？？？？」だったんですけど、
プログラミングの学習を初めて1か月、
「あれ、もしかしてこういうことが言いたいのかな…」に変化してきました。
今頑張って読んでる本は、
コレなのですが今までバラバラとしていた知識が一つ一つ整理されていく感覚があり、少し自分が頑張ってきたんだなということが実感できるようになりました。
まだ2章までしか読み進められてないのですが、頑張って最後まで読んでみたいと思います。
（Twitterで前ちらっといったオブジェクト指向の本は知識不足が否めないのでもう少し知識がついたら読んでみようと思います）
次に
以前、私が紹介した神経衰弱アプリを見てくださった方がいらっしゃって、その方から連絡がありまして、「同人誌の寄稿をしていただけませんか？」とのことでした…。
丁度、私のような「はじめてアプリを開発した人」を探していたみたいです。
どんな文章になるかはわからないんですけど、精一杯書いてみるだけ書いてみようと思います。
ちゃんと入稿できたらどんな本に寄稿したかお話しようと思います◎
（プログラミング初めて約1か月の人が技術同人誌デビュー…だと…）と驚きを隠せませんでした…がんばる……
今年のざっくりした具体的な目標（ver.1.0)
＜上半期＞
―訓練施設にて
・イラレ・フォトショ系のコンテンツはある程度充実してるので、それは積極的に受講しておく
・余裕がありそうなら、訓練時間中に時間をもらってプログラミングの学習も進める。
―自宅にて
・（主に）JavaScript周辺知識（ライブラリ？とかも含む）を基礎固めをする。
＞神経衰弱ゲームのソースコードをクラスを使って書き換えられるように頑張る。
＞以前提案された電卓、もしくは何か別のアイディアがあれば何かアプリケーションを１～2個作りたい。
＜下半期＞
―訓練施設にて
・今まで習得した知識を使ってポートフォリオサイトを作る。
（デザイナーをやってる職員さんがいらっしゃるので少しだけ相談に乗ってもらう）
・就職活動に必要な書類作成をはじめる。
―自宅にて
・ポートフォリオサイトについてやれそうな作業をする。
・引き続きプログラミング関係の勉強は続ける。（何をするかは未定）
＞引き続きjsやるのか、別の言語に手を出してみるのか…学習状況で変化するけど、どうしようかな…。
＜1年通して＞
・アウトプット、発信をなるべく継続する。
・参加できそうな勉強会には参加をして、いろいろな意味での社会経験を積む。
私のような初学者でも行っていい勉強会があれば、教えていただけるとありがたいです。（できればTwitter等で面識ある方のほうが安心ですね…）
2020-01-01：今年の目標のはなし。
どうもです！ふぁんです～♪
2020年始まりましたね、どんな1年になるでしょうか…
先のことはよくわかんないけど、良い1年になってくれればいいなーと思ってます。
今年の目標
今年の目標はずばり、
社会に出てしっかりと働くことです。
12月31日の日記でも少し触れたんだけど、
私は病気で20代をほぼつぶしてしまいまして、まだ社会にちゃんと出たことの無い人だったりします。
現在は、主人のアシストもありだいぶ回復してきました。（ありがとう…）
昨年の9月ごろから、職業訓練をする場所に通い始め
体力づくり、技術習得、いろんな面で研鑽を積んでおります。
先に技術習得から話すと、
これからも研鑽を積んで色々できたものをGitHubに上げられたらいいなーと思ってます。
精一杯頑張る。
今はフロントエンド側のことが少しわかるようになった程度なのですが、
もっともっといろいろ勉強をして戦力になれるように頑張っていきたいです。
体力面では
まだまだ不安が多く、やっぱり20代をほぼ引きこもりみたいな生活してたから、どこかに定期的に通ったり、何かを定期的にすることが少し難しいなと感じてしまいます。とにかく「体力が足りない…」って感じですね。1日色々してるとばたんきゅ～してしまうのです。
ここはこの1年でしっかり習慣化して、社会復帰への小さく大きな一歩にしていきたい所存です。
この日記を見てくれてる方はそんなに多くないと思うので、
ちょっと具体的に書いておくと
私は障害を持ってたりします。
見た目ではわからない、内部障害を持っています。
職探しをするにしても「障害者雇用枠」での就労を目指したいと考えています。
うれしいことに、普通に働けるんじゃない？という言葉も頂くことも多いのですが、普通の雇用だとどうしてもフルタイムが中心ですし、私の苦手を事前にお伝えしておいて、企業と私、双方に無理のない形での就労が実現すればいいなーと思って、障害者雇用での就労を目指そうとかんがえています。
これは私の希望なのですが、
週20～25時間程度から始められて、
給料に関しては、相談して決められたらいいなと思ってます。
リモートワーク可だと非常にありがたく思います。
フルリモートでなくても構いませんが、ラッシュの電車に乗れないためそこだけご配慮いただけると幸いです。
技術は発展途上ですので、まだまだ教えていただくことも非常に多いかと思いますが
勉強することは苦ではなく、向上心はあるので、できる限り力になれるといいなと思っています。
と、書きましたが
まだまだ私は訓練施設でしっかりレベリングしてから就職活動をしようと考えてるので、すぐにこの条件で働ける場所を探しているわけではありません。
もし、「障害者雇用」を考えている企業さんなどがあれば
私のような人間がいて、しっかり準備ができた段階で就職活動をするんだなーと思っていただければ幸いです。
このブログに私の勉強の記録などつけていますし、
どんな感じの人なんだろう？と思ったら、Podcastを聞いていただければどんな感じにお話する人なのかは伝わると思います。（結構明るいおしゃべりな人だったりします）
もし、興味を持ってくれた方がいらっしゃったら
Twitterフォローやらこのブログの読者になっていただければ、情報発信していきますので是非によろしくお願いします。
（すぐには働くことはできませんが、興味あるよ！って方がいらっしゃったらDMでも頂ければご挨拶できますのでよろしくお願いします。）
まずはしっかりレベリング！
そして、いい出会いが待っていることを信じて頑張っていきたいです。
それでは長くなりましたが、今年もよろしくお願いします。
2019-12-31 2019年を振り返る
こんばんは！2019年も残りわずかですね～。
簡単にですが今年1年あった大きな出来事について触れておこうと思います。
※ちょっと技術と関係ないことも含まれてますが、こんなこともしてる人なんだなーと思っていただければ幸いです。
2019年を振り返る
上半期
上半期にあった一番大きな出来事といえば…
FF14というゲームの音楽を実際に演奏する団体（非公式・有志団体）の合唱部隊の一員としてステージに上がったことですね。
私は合唱の首席奏者をやらせていただました。
2018年の下半期の週末を練習に費やし、
私なりのメソッドで合唱隊の雰囲気を作ることに貢献できたのではないのかなーと当時のことを振り返ってます。
個人的に頑張ったことは、
本プログラムの最後の曲、最後のフレーズのソロを歌う機会を頂きまして、オーケストラ・合唱が盛り上がって…最後の最後無音になった後に私がソロを歌って、エピローグ的なフレーズに入るという重要な役をやらせていただきました。
オーケストラと合わせてソロをやるのがはじめてだったので、不安も一杯でしたがなんとかやり遂げることができてよかったです。
そこで得たことは、
チーム作りの難しさや先頭に立つ難しさを経験させてもらいました。
私のような人間ができるのだろうと不安だったのですが、ちゃんとやり遂げられてみんなとハグし合えた時に「ああ、よかった…」と自信になりました。
すごく大切なことを学んだ上半期でした。
下半期
長い期間病気をしていて、なかなか社会復帰することができず20代を過ごしてしまったのですが、「仕事をしたい」という願いを叶えるために職業訓練を行う場所に通い始めました。そこのスタッフさんは大変優しく、親身になって私の将来について考えてくれる素敵な人たちで、毎日一生懸命、楽しく（と言っていいのだろうか）訓練をしています。
12月に入り、プログラミングの学習も始め、そこで様々な出会いがありまして、私にない視点のアドバイスを頂戴したりしたりなど本当に素敵な出会いに恵まれているなあと思った1年でした。
新しい出会いを得たり、
前に向かうために一緒に並走してくれる場所と出会えたり
とにかく出会いの1年だったなあと思います。
詳しくは1月最初の日記に書こうと思うのですが
特殊な枠にはなってしまいますが、いずれ仕事を探せたりなどできるように
実績作りをつくり、実力をつけ
また、前へ進めるようになれたらいいなーと思ってます。
まとめ
今年はだいぶ前に進めるようになった1年だったように思えます。
私に出合ってくれた方に感謝しかありません。
本当にありがとうございます。
今年は大変なことも多い1年でしたが、来年2020年に向けての十分すぎる経験ができように思えます。
今年もありがとうございました。
良いお年をお迎えくださいませ。
ふぁん
2019-12-27：神経衰弱を作ってみる その３
こんにちは～～！
どんな記事にしようと悩んでたら、一日が終わってしまいました！
（あとデバック作業が思いのほか大変だった）
まずは…完成した神経衰弱ゲームを見てもらおうと思います！
fan-s-sinkeisuijaku.netlify.com
こんな感じのゲームになりました！
ソースコードとかの記事を書くのはじめてだから、
上手に書けないかもしれないのですが…温かい目で見てくれると嬉しいです！
全部のソースコードは解説できないとは思うのですが、頑張って書きます！！！
※かんたんモードを例に書いていこうと思います！
※できるだけ見やすくなるようにしてるので、実際のソースコードと抜粋してたり、順番が異なります。
解説できそうな部分のソースコードを解説してみる。
ルール説明画面→難易度選択
const okBtn = document.getElementById('okBtn'); const rule = document.getElementById('rule'); const levelChoice = document.getElementById('levelChoice'); okBtn.addEventListener('click', () => { rule.style.display = 'none'; levelChoice.style.display = 'block'; });
OKボタン押したら、ルール画面を消して、難易度選択画面を出す作業をしてます。まずはここから書き始めました。
難易度選択画面→ゲーム画面
const easyBtn = document.getElementById('easyBtn'); const normalBtn = document.getElementById('normalBtn'); const hardBtn = document.getElementById('hardBtn'); const startBtn = document.getElementById('startBtn'); let level = 1; easyBtn.addEventListener('click', () => { easyBtn.style.background = '#F4B2BA'; easyBtn.style.border = '2px solid black'; startBtn.style.pointerEvents = 'auto'; errorMsg.style.display = 'none'; level = 1; if (normalBtn.style.background = '#F4B2BA') { normalBtn.style.background = '#BDBDBD'; normalBtn.style.border = '1px solid black'; } if (hardBtn.style.background = '#F4B2BA') { hardBtn.style.background = '#BDBDBD'; hardBtn.style.border = '1px solid black'; } });
EASYボタンを選択したら、
EASYの色がピンクに、枠線を太くしています。
STARTボタンが選択できるよ！とわかりやすくなるように、pointer-events = "auto";にして、選択できるようになってることをわかりやすくしています。
そして「選んでね！」の文言を消してます。
level = 1 ;
つまり、簡単モードです。ってことを変数に入れてます。
以下、if文は、NORMAL,HARDを選択されたときは、
デフォルトの状態に戻すようにしています。
STARTボタンが押されたとき
const startBtn = document.getElementById('startBtn'); const backBtn = document.getElementById('backBtn'); const mainGameArea = document.getElementById('mainGameArea'); const levelChoice = document.getElementById('levelChoice'); const cardsArea = document.getElementById('cardsArea'); const mainGameArea = document.getElementById('mainGameArea'); startBtn.addEventListener('click', () => { //全般設定:難易度設定ボタン出現させます。 backBtn.style.display = 'block'; // 簡単モードの場合 if (level === 1) { // カードランダム生成をしている部分 cardShuffleEasy(); // カードの数字をdivに入れながら生成。 for (let i = 0; i < 4; i++) { createDiv(cardsNumEasy[i]); } // メインゲームエリアを表示、レベル選択画面を消す。 mainGameArea.style.display = 'block'; levelChoice.style.display = 'none'; // カード選択エリアの白背景のheight,margin-topを設定。 cardsArea.style.height = '150px'; cardsArea.style.marginTop = '50px'; // ピンク背景のアレを調整 mainGameArea.style.height = '300px'; mainGameArea.style.marginTop = '-150px'; // 難易度設定に戻るボタンの調整 backBtn.style.marginTop = '170px'; // ゲーム部分 gameStart(); } //中略 }
startボタンが押されたときに走る部分を書いています。
まず、難易度選択画面に戻るボタンを出現させてます。
（抜粋してるので簡単モードの場合だけ書いてるのですが、
cardShuffleEasy(); カードをシャッフルするための関数を走らせて、
for (let i = 0; i < 4; i++) { createDiv(cardsNumEasy[i]); }
簡単モードなので4枚、シャッフルしたカードのdivを生成してます。
その下の部分は、ゲーム画面の調整をしています。
そして
gameStart(); gameがスタートしますよ！という関数を走らせてます。
カードをシャッフルして、カードを並べる部分
cardShuffleEasy();
const cardsNumEasy = [1, 1, 2, 2] function cardShuffleEasy() { for (let j = cardsNumEasy.length - 1; j >= 0; j--) { let rand = Math.floor(Math.random() * (j + 1)); [cardsNumEasy[j], cardsNumEasy[rand]] = [cardsNumEasy[rand], cardsNumEasy[j],] } }
配列の中に１と２のカードを用意して、フィッシャー–イェーツのシャッフルというアルゴリズムでカードをシャッフルさせる関数です。
createDiv(cardText);
function createDiv(cardText) { const outsideCards = document.createElement('div'); const div = document.createElement('div'); outsideCards.className = ('outsideCard'); div.className = ('card'); div.textContent = cardText; cardsArea.appendChild(outsideCards); outsideCards.appendChild(div); }
カードを作る関数です。
上でシャッフルした数字を引数に入れて、その数字をcardの文字にしています。
それを先ほど上で紹介したfor文で指定の数だけカードを生成しています。
ゲームの中身！
const timer = document.getElementById('timer'); const finalResultTimer = document.getElementById('finalResultTimer'); const classOnOffCheck = document.getElementsByClassName('card'); const classCardAreas = document.getElementsByClassName('outsideCard'); const resultComment = document.getElementById('result-comment'); let gameCounter = 0; let firstNum = 0; let secondNum = 0; function gameStart() { // タイマー開始です。 startTime = Date.now(); countUp(); updateTimeText(); for (let i = 0; i < classCardAreas.length; i++) { classOnOffCheck[i].classList.add('yet-card'); classCardAreas[i].addEventListener('click', () => { // 1枚目の処理です。 if (gameCounter === 0) { gameCounter++; classOnOffCheck[i].classList.add('card-show'); firstNum = classOnOffCheck[i].textContent; classCardAreas[i].style.pointerEvents = 'none'; } else if (gameCounter === 1) { // 2枚目の処理 gameCounter++; classOnOffCheck[i].classList.add('card-show'); secondNum = classOnOffCheck[i].textContent; for (let j = 0; j < classCardAreas.length; j++) { classCardAreas[j].style.pointerEvents = 'none'; } checkMiniGameResult(firstNum, secondNum); } }); // リセットします。 firstNum = 0; secondNum = 0; if (level === 1) { resultComment.textContent = "EASY" } else if (level === 2) { resultComment.textContent = "NORMAL" } else if (level === 3) { resultComment.textContent = "HARD" } } }
タイマー周りの事はとりあえず置いておいて、
場にあるすべてのカードにCSSのクラス yet-cardを追加します。（まだのカードだよって言いたい）
配列の[i]番目のカードをクリックしたら以下の処理を走らせます。
gameCounter＝0の場合（1枚目のカードをめくったとき）
gameCounterを1回足して、
CSSのクラス card-showを追加します。（これでカードの数字が見えるようになります。）
変数のfirstNumには[i]番目のtextContentが入るんだよ！！！って書いてます。
一度押されたカードを再び押せないように、pointer-events="none";にしてます！
gameCounter=1の場合（2枚目のカードをめくったとき）
gameCounterを1回足して、
同じくカードの中身が見えるCSSクラスを追加しています。
変数secondNumに[i]番目のtextContentが入りますよ！って書いてます。
次のfor文で、全部のカードを押せないようにしています！
3枚目絶対にめくらせないマンです。
そして…
checkMiniGameResult(firstNum, secondNum);を走らせます。※以下解説
checkMiniGameResult();が終わったゲームのリセット作業をします。（一応）
ついでに、ここで選んだレベルによって最終結果で表示する難易度を設定しています。
checkMiniGameResult(n1, n2);
ここでは１枚目と２枚目が合ってるかどうかの判定と、あっていた時に行う処理、違ったときに行う処理を書いています。
（一度書いた定数は省略する）
function checkMiniGameResult(n1, n2) { for (let j = 0; j < classCardAreas.length; j++) { classCardAreas[j].style.pointerEvents = 'none'; } // もし、数字が一致してたら以下の処理をする。 if (firstNum === secondNum) { for (let i = 0; i < classOnOffCheck.length; ++i) { if (classOnOffCheck[i].classList.contains('card-show')) { classOnOffCheck[i].classList.remove('card-show'); classOnOffCheck[i].classList.remove('yet-card'); classOnOffCheck[i].classList.add('keep-show-card'); } } gameCounter = 0; // 一致してなかったら以下の処理をする。 } else if (firstNum !== secondNum) { // 1秒後に、一時表示クラスを外してウラ表示にする。 setTimeout(() => { for (let i = 0; i < classOnOffCheck.length; ++i) { if (classOnOffCheck[i].classList.contains('card-show')) { classOnOffCheck[i].classList.remove('card-show'); } } // ミスカウンターを＋1します。 missCounter++; gameCounter = 0; }, 1000); } for (let k = 0; k < classCardAreas.length; k++) { classCardAreas[k].style.pointerEvents = 'auto'; } ……（続）
ここの処理長いので分割して解説します。
引数n1 n2にはfirstNum secondNumがそれぞれ入ります。
絶対にカードを開かせないマンという強い意志を感じるpointer-events="none";
もしかしたらどっちかはいらないかもしれないですね…（遠い目）
１枚目、２枚目が一致してた時は
card-showが含まれているものにだけ処理を走らせます。
→card-show,yet-cardクラスを外します。
yet-cardが外れる＝表になったカードって意味です！
→keep-show-cardクラスを付けます。→オモテにしたままです！って意味です。
そして、ゲームカウンターをリセットます。
１枚目、２枚目が一致してない時は１秒後にcard-showクラスが付いているものだけに以下の処理を走らせます。
card-showを外してね！→裏返してね。
そしてmissCounterを＋１します。
最後に、カードを再び選択できるような状態にします。
（すべてにかけてますが、cssのkeep-show-cardにはpointer-Events=none;がついてるので選択できないようにしてます！）
続き
const backBtn = document.getElementById('backBtn'); let yetOpenCard // すでに開いているカードは0枚です。（初期値） yetOpenCard = 0; // yet-cardクラスがあるかどうかカードの数だけ確認します。 for (let i = 0; i < classOnOffCheck.length; i++) { if (classOnOffCheck[i].classList.contains('yet-card')) { yetOpenCard++; } } // 0枚だった場合は最終結果をチェックします。 if (yetOpenCard === 0) { backBtn.style.display = 'none'; // タイマーを止めてます。 clearTimeout(timerId); timeToadd += Date.now() - startTime; checkFinalResult(); } ……（続）
ここで、startボタンを押した時に発動する、CSSのyet-cardが役に立ちます！
カードの数だけ、変数：yetOpenCardの数を数えます。
yet-cardが０枚（すべてのカードが表になっている状態）の時だけ処理を走らせてます。
そして、checkFinalResult();へ…
続き
checkFinalResult();
const finalResult = document.getElementById('finalResult'); const missResult = document.getElementById('missResult'); let missCounter = 0; // 最終結果を確認しています。 // --------------------------------- // 関数：最終結果確認（上で使用しています） function checkFinalResult() { mainGameArea.style.display = 'none'; finalResult.style.display = 'block'; // ミスのリザルトを表示！ missResult.textContent = `おてつきは${missCounter}回でした！`; // いわゆる、リセットボタンです。 replay(); resetGame(); } // ---------------------------- // 関数：リセットボタン（上で使用しています） function replay() { // リプレイボタンを押した時の動き。 replayBtn.addEventListener('click', () => { // タイマーをリセットしています。 elapsedTime = 0; timeToadd = 0; // missCounterをリセットします。 missCounter = 0; // 画面を難易度選択にしています。 finalResult.style.display = 'none'; levelChoice.style.display = 'block'; }); } } *** resetGame();
ゲームエリアの表示を非表示にして、最終結果の画面に移行させます。
ミスの数を数えてあるので、それを表示してます◎
リプレイボタンを押した時には、いろいろリセットして、
最終結果画面から難易度選択画面に移行させてます。
最後！
// 関数：ゲーム終了時に流す、リセットするやつ。 function resetGame() { const removeCards = document.querySelectorAll('div.outsideCard'); for (let i = 0; i < removeCards.length; i++) { cardsArea.removeChild(removeCards[i]); } }
div.でかつCSSのクラスがoutsideCardのものを定義して、
その個数分だけ、cardsAreaから上のものを取り除いています。
まとめ
はじめてソースコードの説明をしたので、もしかしたらうまく説明できてなかったり、そもそも説明が間違ってたりするかもしれません。どうかそこはご容赦ください。
流れとしては、
最初にdivを生成て、配列の中をシャッフルする、それを頭から順番につっこんでいく。
（これでカードがバラバラになる）
一時的に表になっている状態のカードをCSSのクラスで判定して、
一致していれば、そのまま開け続けるクラスを付ける。
不一致であれば、一時的に表にするクラスを外すことで裏にしています。
最終的な判断は、最初につけたyet-card（まだ開いてないカードと言いたい）クラスで判定しています。
あとは一般的なタイマー機能を適宜つけ、ミスの回数も数えられるようにした感じです。
ここのロジックの部分は自分で考えたのですが、
うまく実現できなかったところは主人に助言をもらいました。
改めて、ゲームのリンクはこちらです。
fan-s-sinkeisuijaku.netlify.com
このゲームの全ソースコードはここで見られます。
github.com
感想
むずかしかったです。とにかくむずかしかった。
自分の中での解決する手段のパターンが少なすぎて、なかなかやりたいことの実現ができず、悔し涙を流しながら作ったゲームです。
でも、無事にできてよかったです。
おそらくきれいなコードじゃないけど、一生懸命作った大好きな神経衰弱です◎
遊んでくれた方、本当にありがとう。
感想をくれた方、本当に本当にありがとうございました！
また、何か作れたらお知らせさせてください！
長くなりました。
ここまで読んでくれてありがとうございますー！
