2019-12-25：神経衰弱を作ってみる その２
みなさーん！クリスマスですね！
今日も更新できそうなので、更新したいと思います！よろしくおねがいしまーす！
※今回の記事は画像が多いので、ご注意くださいませ……！
UIを実際に作ってみる
まずはイメージ画像！
実際にUIを作ってみることにしました◎
今回このアプリを作るのに向いてそうなソフトがあるので、そちらを利用することにしました。ずばり、Abobe XD！使ったことないから、上手にできるかわからないけど、とりあえず調べながらでもやってみよう～ということで、チャレンジしてみることにしました。
前回の日記（2019-12-24：神経衰弱を作ってみる その１)のラフな絵から画面に起こしていきます…
（色は相変わらずアレでソレ）
調べながら悪戦苦闘すること何時間か……
「こんなイメージになったらいいな！！！！」という私の願いが詰まったXDで作った画面が以下のものです。
あげてから気付いたけど、ズレてるやつあるじゃん！！！！！
むずかしいね…気持ちはそろってます、気持ちはそろってます……そろってます……。
HTMLとCSSで一生懸命作る
この画面みたいなヤツつくれたらいーなーと思って、一生懸命作りました。
HTMLとCSSでこれくらいシンプルな画面だったらたぶん私にも作れるぞ…たぶん…
と悪戦苦闘することまた数時間…出来上がった画面が以下のものとなります。
思ったよりそれっぽい感じかな………
けっこう頑張れた気がします！
2週間を振り返って
ブログ公開して、2週間……まさか私が2週間連続で更新すると思わなかったです。
（書く内容と時間があったからですね）
おそらく年末年始は忙しいのでどこかで更新が止まるかもしれません…！
来年は少しのんびりペースで更新出来たらいいな。
（書く内容があれば更新するだろうけど…！）
明日更新できそうだったら、中身を悪戦苦闘している様子でも書こうと思います！
それではまた◎
2019-12-24：神経衰弱を作ってみる その１
神経衰弱アプリを作る……
どのPodcastだったかうっかり失念しちゃったんだけど、
こんなもの作ってね！とかすでにあるものを変えられる人は多いけど「０から何か作って」って言って作れる人が減ってるってお話を聞いたような気がする…
完成品はすごい拙いものかもしれないけど、０から何かを生み出そうとしたりする経験ができてるのはすごく良いことなのかもしれない……と思ったり、思わなかったりしてます。
私「……どういう感じにしたらいい感じになるかな…。」
とうーんと悩みながらipadに向かって書き書き…
そして、書いたものが以下のものです。
まずはこんなことを実現したいという目標！
＊できたらいいな！こんなゲーム！（数字合わせGame編）
- 3段階の難易度変更ができるといいな！
｛Easy:4枚、Normal:8枚、Hard:16枚｝
- かかった時間を結果画面で出せるといいな！
- スマホでも遊べるようにしたいな！
次に、UI周りのことを日本語にしてみました。
- ルール説明画面
- 難易度choice&スタートボタン
- ゲーム画面
- 結果画面＆Replayボタン
※Replayボタンを押したら、②に戻る。
次に！UIを考えてみる……
中身について考える
次は…この画面をどうやったら実現できるか考えろ……
①ルール説明画面は、はじめから出しておく。
OK!を押すとその画面から、次の画面に切り替える。
②難易度選択をしてもらう。→選択したものには色を付ける。
START！を押すとTimerがはじまる。
選択されてないのに押されたら、STARTの下にエラーメッセージを出す。
（…と書いてあるのですが、コード書いてたら②をそのまま実現するのが難しかったので、実際は選択されてないとエラーメッセージが出て、難易度選択すると消えてSTARTボタンを押せる仕様にしました。）
③GAME START!
＊easy：4枚の場合＊
[前提条件]
const cards（仮称）=[0,0,1,1]
（※実際の制作時には、[1,1,2,2]にしてあります）
この配列をシャッフルして、ランダムで4枚並べます。
今回採用したシャッフル方法は…
フィッシャー–イェーツのシャッフル
って方法……
私は上手に説明できないのでとりあえずwikiのリンク張っておきます！
[1]
はじめは、全部ウラ表示（＝文字非表示）状態にしておく。
[2]-1
1枚目をクリックする。→オモテ表示（＝文字表示）状態にする。
[2]-2
2枚目をクリックする。→オモテ表示にする。
[3]
「1枚目と2枚目は同じ数字ですか？」
はい→オモテ表示のまま。
いいえ→2枚ともウラ表示にする
[4]
「全部表になりましたか？」
はい→Timerを止めて、結果画面へ…
いいえ→[2]-1に戻る。
＊normal：8枚の場合＊
[前提条件]が少しだけ変わります。
const cards（仮称）=[0,0,1,1,2,2,3,3]
(※実際の制作時には[1,1,2,2,3,3,4,4]にしてあります）
以下略
＊hard：16枚の場合＊
ここも[前提条件]の部分が変わります。
const cards（仮称）=[0,0,1,1,2,2,3,3,4,4,5,5,6,6,7,7]
(※実際の制作時には[1,1,2,2,3,3,4,4,5,5,6,6,7,7,8,8,]にしてあります）
以下略
④終了 Result画面
かかった時間を表示
Replay？ボタンを押すと②に戻る！
…ふぅ。
こんな感じだったらゲームになるのかな？わかんないけど！！！！！！！
ということで、今日はこんな感じに中身を色々考えてみた話を書いてみました！
ツッコミどころ満載かもしれませんけどね…！
明日はUIを実際に作ってみる話がかけたらいいな～と思ってます！
2019-12-23:初学者同士の意見交換会
奇跡的に今日もブログを更新できそうなのでブログを更新しようと思いますー！
きっかけは唐突に訪れる
いや、ほんといつもコレなんだけど……きっかけはいつも唐突に訪れちゃうんですね、はい……
空飛ぶ犬さん（Twitter：@flying_dog_s）からDMがきました。
ザックリ言うと…
本の執筆をしているので、同じような初学者から話を聞きたいのですが…
（ざっくりまとめすぎてる感あるけど）
とのことでした。
私なんかでいいんですか……初めて10日程度の超初学者ですよ？？？？？？？
職業エンジニアじゃないよ……まだただの主婦の趣味だよ……大丈夫…
有意義な話なんてできる気がしないよ？？？？？？？？？？？？？
と思いつつ、お返事したら
ザックリ言うと…
むしろ大歓迎です！始めたての人からお話聞きたいです。趣味でやってる人のほうが自学のウェイト高いしお話聞きたいです！
（またザックリ言ってるよ、私）
空飛ぶ犬さんの熱意を感じる…そして、同じような境遇の人とお話したい……すごく……と思いましてOK！ってお伝えしました。
どうやってMTGしよう？
通話でMTGしようってところまではあっさりきまったけど
スカイプ？ディスコード？？？どうしよう…
色々話した結果…
せっかくだから新しいZoomってのを使ってみよう！！！！
ホワイトボード機能あるらしいし、なんか便利そう！！！！！
お互い初学者だからどんどん新しいことためしていこう！！！！！！！
そしてMTGをする……
細かい話はあんまりできないんだけど、
インタビューの中身が上手にまとまってなかったみたいなのでアウトプットしてもらいながら一緒に整理することに……
まずこんな話をした。
- どんな本のどの部分を執筆するの？
- 私のどんな話聞きたい？
- こうするとイイ感じになるんじゃないかな？
そして始まるインタビュー
主に私の例のじゃんけんゲームのお話をしました。
（細かい話はできない）
話のなかで特に印象的だったのが、
UIから決めたのですか？なんでですか？
って言われたのが…びっくりしました。
みんな違うの！？！？！？！？？！？！？？！！？！？？！？！？
少なくとも空飛ぶ犬さんは違ったそうです。
空飛ぶ犬さんのほうがずっとずっと私よりできる人なのですが、
同じような「初学者」カテゴリーの人と話ができて発見しかない……
逆にお話を少し聞いてみる
空飛ぶ犬さんのはじめてのアプリ製作のお話を聞きました。
（詳しく話せない）
途中で爆笑したりしたり
すごい苦労があったんだなあと涙したり
空飛ぶ犬さん、そっちから作ったんだ！！！！！！！
って発見があったり……
もはやこれはインタビューという名のプチ勉強会状態！
空飛ぶ犬さんのDMのおかげですごく有意義な時間が過ごせました◎
まとめ
きっと、世の中のすごくできる人からしたら
「かわいいな～」とか思っちゃう話かもしれません……もしかしたら笑っちゃうかもしれません……
でも、私にとっては大きな大きな振り返りのMTG（勉強会）でした！
もっと私もインプット、そしてアウトプットして
みんなの話をもっと理解できるようになりたいし
頑張ればいつ始めても何かが実現するかもしれない！
何かができるようになるかもしれない！
と思わせるような人になりたいなあと思いました。
本当にありがとうございました◎
お互い切磋琢磨して、いろいろ実現していきたいものです！
空飛ぶ犬さんのブログはこちらです！
2019-12-22
インプットをしよ！
私「私にも何か読めそうな技術書、またはそれに準ずる何か良い本はありますか？」
主人「ふむふむ。ちょっと待っててくださいね。」
主人、書庫へ向かう……
そしてしばらくすると1冊の本を私に手渡してくれました。
その本にはリーダブルコードと書いてありました。
この本は…主人がすごーく前に購入した際に
私「音楽の本買ったの～？」と言った表紙の技術書じゃないですか！！！
主人「今のあなたなら、きっと何をやってるか少しわかると思いますよ。」
後ろを見ると「オライリー」って書いてある……
一緒に書店に行った際に「難しそうな本だね～？」って言ってた本…
わたしにも難しい本わかるのでしょうか…と不安だったのですが、
読んでみるとこれはすごく大事なことが書かれている気がする……
この本の冒頭に、読み方の案内があったのですが
「楽しく気軽に読んでね！」
とあったので楽しく気軽に読むことにしました。
借りてすぐに第２章までするする読んでしまいました。
今まで読んだところをざーっくりまとめると…
「名前を付ける際に後からわかりやすいモノにすると良いことが多いのです！」
といった内容なのかな？
実例付きで
「こうすることによって、こういうミスを発見しやすくなります。」
なるほど、なるほどー…確かにそうだよな、そういう工夫をすると後から見て見やすい命名をすると、たとえ一人で何か作ってても半年後の私がコードを読んで何をしたかったのかわかるよな…
と、今後の何かの制作するときに役に立ちそうなことがたくさん書いてありました。
他にも…
ゴソゴソしてるな…？と思ったら何冊も本を持ってきてくれました。
主人「これらの本もきっと今のあなたでも読める本ですね。直接関係ない本もありますが、きっと読んでおくと力になってくれると思いますよ。」
おお…あなたが神か…
今回もってきてくれた本を一覧にしておきます。
- リーダブルコード
- プリンシプルオブプログラミング
- 世界一やさしい問題解決の授業
- はじめよう！要件定義
- はじめよう！プロセス設計
- プレゼンテーションZen
- プレゼンテーションZen デザイン
- ずっと受けたかったソフトウェアエンジニアリングの新人研修
- ハッカーと画家
- ソフトウェア開発の名著
たくさん！
でもどれもお勉強になりそうな本ばかりです。
どの本も感想文をこのブログに上げておきたい感じですね！
（全部読めるかわからないけど、ゆっくりでもいいから読みたい）
次にやりたいことリスト
- ドットインストールの数字タッチゲームのソースコード1行1行に自分なりのコメントを記述する。
これは我が家での勉強法なのですが、コードを写経してやりっぱなしにしないようにしています。自分で考えて、自分で調べて「ここのコードはこういうことをやりたいんだと思う」ってことを1行1行コメントで書いてます。
そのコメントをもとに先生（＝主人）に「ここは、こういう動きをさせたくて…」とか「ここは定数で…」とかいろいろ説明して、ちゃんとコードを読めてるかどうか確認する作業をしています。
- 「神経衰弱（数字合わせ）ゲーム」を作る。
これは先生（＝主人）からの課題です。「今の技術でたぶん作れると思うので、頑張って作ってみましょうか」と言われたので、作りたいとおもいます。
ざっとやりたいことを忘れないようにメモしておこう。
-
3段階の難易度選択をできるようにすること。
-
スマホからでも遊べるデザインにできればいいな！（できるかはわからないけど）
まだ構想段階なので、これはまた別の日に報告しますね！
- 「電卓」を作る。
これはオンラインコミュニティの方から「電卓も作れそうですね」とアドバイスをいただいたので、是非にやってみたいことです。電卓ってなんだろう、って改めて考えさせられるものですね。
もし、このブログを読んでくれた方の中で私にアドバイスをしてもいいよ！という方がいらっしゃったら、プログラミング初学者でも作れそうなアプリがあったら教えていただけると嬉しいです。もしくは、初学者の時に実際に作ったアプリはこれでした！みたいな実体験でも…
連絡は
こちら
相互フォローの方はDMでこっそり教えてくれると嬉しいです。
もし、まだフォローしてないよ…？って方でしたらフォローしていただけると嬉しいです！
よろしくお願いしまーす♪
朝早い…誰も起きてない…雑音が少ない…
これはもしや……
Podcastを収録するチャンスなのでは……？？？？
まだ、内容そんなにたまってないけど収録しておこうかな……？
2019-12-21:Gitと格闘した日
今日も更新できそうだ…よろしくお願いします！
はじまりは突然に
先日行った勉強会にて…
オンラインコミュニティがあるんだけど、入ってみる？とすごくうれしいお誘いがありまして、もうこれは入ってみるしかないということで入ってみることにしました。
みなさん、お仕事としてプログラミングやらなんやらやってる方で、私は…ここに入っていいのだろうか…みたいな気分だったんですけど、初学者なのに優しく接してくれるので「勉強頑張って、みんなの話がもっと分かるようになりたい！」と思うようになりました◎
そこでは「分報」ってのがあって、自分のチャンネルがあるんですけど
Twitterみたいな感じです！と説明を受けて「なるほど～？」となってました。
上手に使えてるかわからないんですけど、こんなことします！とかこんなことしました！みたいな報告をそこに書いてます。
その分報に
私「Podcastを上げた話をブログに書きました。」
と書いたところ、ほかの方から反応がありましてその中から一つ……
Podcast Freaks に番組情報追加する（プルリクする）（といいんじゃないか）
どういうことだろう？と聞いてみたら、
「Githubプルリクを作ってくれると助かります！」
「gitはプログラミング始めて一週間の彼女が、使いこなせる？？？」
などと反応が来ましたが…
Githubは聞いたことある…けど….…………
使ったことないよ…できるかな…ぐぬぬ…
ですが、これはせっかくのチャンスです！！！！やってみるしかありません！！！！
勉強する機会になりそうだからがんばらせてください……….！
こう返事をして、Gitについての勉強をはじめることにしました。
まずは…何からやろう…と思ったら、
なんと、ドットインストールにGit入門という講座が…！
とりあえず全部一気にみて触りながらこんなものか～～～と理解。
次に、
こちらを見てもう少し理解を深める！！！！！！！！
でも、ほかの人のやつにかかわることだから怖いな…
プルリクよくわかんないな…と思ったので主人に相談することにしました◎
「プルリク、自信ないので横で見ててください……」
「うんうん。がんばってみようか。」
あなたは神か……！
主人「紙とペン…ある？」
と言ってきたのでipadを渡したところこんな図説をしてきました。
主人の文字が読めなさ過ぎて、たぶんこんなことが書きたいんだと思う程度のメモを書き直した感じだから間違ってたらごめんなさい。
主人「今からこんな感じの事をするよ」
私「は、はい…」
①ふぉーく！
主人「自分のところにリポジトリを作ってフォークするんだよ～。こんな感じ。」
私「おお…できた…」
②はい、クローン！
主人「次は、自分のローカルにクローン。はい、調べてみて！」
私「こうですか＞＜わかりません＞＜」
なんとかできました。
◎変更じゃ！
ここは、ちょっと難しそうだから私がお手伝いしますね。
といって、ちょっと手伝ってもらいました。
③よしゃー！プッシュ！
主人「プッシュできる？」
私「なんかさっき勉強した気がする！やってみる」
できたできた。
④プルリク！！！！！！
主人「申請したい相手のところから…、はいここを押してみましょう。」
私「いいんですか、怒られませんか？」
主人「怒られませんｗ」
そして、リクエストを送ります……
…
そしてしばらくすると…
マージしました！
ってのと、
完璧です！
ってコメントが！！！！！！！！！！！！
すごい！なんかすごいことできたよーーーー！！！！
すごいのはこのド素人に見事説明しきった主人だとは思うのですが…
なんとか私もプルリクできましたよ～◎
やったー！
復習をしてみよう
そして、ブログを書きながらせっかく学んだGitについて復習することにしました。
何かGithubに上げてみるといいのかな…
何か上げるものはないかな…と思ったところ…
あのじゃんけんゲームあげるか……？？？
はじめて作ったヤツだから全然スマートじゃないし
なんかすごい恥ずかしい感じするけど
どうせなら、中身のあるやつ上げたほうが良いよね…と思って…
あげてみました！
お時間ある方はぜひ、じゃんけんしてみてください◎
（もしかしたら間違ってるかもしれないけど、そのときはそっと教えてくださいませ……
追記
Githubに上げられたならたぶんNetlifyを使うと公開できますよ！
と言われて…
これでみんなじゃんけんできますね！！！！
2019-12-20
今から私は偉そうな事を言います…
「おい、初心者が何言ってるんだ～？」とか思われる方もいらっしゃるかもしれませんが…私の経験がもし誰かの役に立てばと思い書いてみようと思います……
私が番組作りをするときに意識していること
私は以前、某生配信サイトで雑談をしてたのです…。
大手ではなかったのですが、一定のリスナーさんが付く程度にはやらせてもらってました。
私はそこで
- ざっくりとした台本を書く
- 誰もいなくてもとにかくお話をし続ける
こんなことをやってる配信者は少なくて物珍しかったらしく「台本書いてます！」って言っただけで「気に入った！」って言ってもらえることも少なくなかったりしました。
リアルタイムで反応の返ってくるPodcastをやってるような感覚に近いな…と、実際にPodcastを作ってて思ってたりしました。
リアルタイムでの楽しさは、その場で反応が返ってくるので、多少台本をざっくり書いてもリスナーさんに助けられる場面も多く、思わぬ方向に話が進む点ですね。割とノリでなんとかなります。
難しかった点は所謂「荒らし」（雰囲気を壊そうとする人含む）も時には現れるので、そういう方々をいかに上手に「ここはそういうところじゃないですよ～」とうまく場を通常運転に保つ必要が出てくるところだったと思います。
Podcastを作ってみて楽しかったところは、番組の雰囲気を完全に自分で作れる点は楽しいな～と思いました。
逆に難しい点といえば、ある程度しっかり方針決めをしないと聞きづらいものになる可能性があるところですね。
様式美はあると思う。
私がリアルタイムで配信してた時は「形式」をすごく大事にしてました。
番組予定時間を「1時間」としたとき、
開始～10分：自己紹介、オープニングトーク
10分～30分：メイントーク①
30分～35分：小休止
35分～55分：メイントーク②（1の続きをすることも）
55分～60分：おしまいトーク
ざっくりこんな感じです。
リアルタイムで進むのでこのタイムスケジュール通りに進むわけではないんですけど、どんなに盛り上がっても、間に「小休止」を入れるようにしてました。これはリアルタイムならではなのですが、途中から聞き始めた人を置いていかないように、途中で「今までこういう話をしてましたよ。」って言うような時間を設けるように意識してました。
今回、Podcastを作ったときに意識したのは「小休止」をあえて作ってみよう！という点でした。まだ、Podcastを聞き始めて間もないのですが、（番組の性質上難しいのかもしれませんが）キリがいいところが分かりづらい…というところがちょっと気になりました。キリがいいところまで聞いて、別の事をしたいなって思ったけど、なかなかそれが分かり辛くてキリが悪いところで再生を止めざるを得なかったりして、ぐぬぬ…となってました。
私のラジオでは、そこの区切りが分かりやすいように（長さの改善は必要だとは思ってるけど）ジングルを入れてみたりなどしてみました。
番組の方針にもよるとは思うのですが、
20分～30分に1度くらい「小休止」（話の明確な区切り）のようなブレイクがあると長い番組でもより聞きやすくなりそうだな～ってなんとなく思いました。
※あくまで個人の意見です。
発声・発音のコツ
日本語っていう言語は口をそんなに動かさなくても一応聞き取れる言語だったりします。ラジオでは、いつもより発声・発音を意識したほうがより聞きやすくなるかなーと思います。
ざっくり解説
- 「さしすせそ」とか「たちつてと」とか「かきくけこ」のs音とかt音とかk音とかある音は少しオーバー気味に発声してあげるとおそらく聞き取りやすくなります。
- 鼻濁音を意識できると滑らかな日本語に聞こえるようになります。
例：その寿司は、わたし「が」食べました。
この「が」は鼻濁音ですね。すごーくオーバーに言うと「んが」に近い発声だったりします。詳しくは調べていただけると解説サイトがたくさん出てくるので、ぜひ調べてもらうとよいかもしれません。
あと、日本語はあんまり抑揚のない言語だったりするのですが、
いつもより少しオーバーかな？と思うくらいに付けてあげると聞きやすくなるんじゃないかなーと思ってます。
※私は声優とかアナウンサーとかの訓練は受けてないけど、歌の訓練はしてたのでその時の知識をもとに書いてます。
まとめ
ほんと偉そうな事いってすみません…（白目）
私が気を付けたことなどでした。
誰かの参考になればよいなーと思ってます………
2019-12-19：Podcastをやってみた
今日もブログを更新できそうなので、更新しようと思いまーす。
モノは試しに
Podcastの世界にハマりはじめ、色々と聞いていて楽しいな～って思ってる今日この頃…
（引き続きオススメのPodcastがあればぜひぜひ教えて頂けると嬉しいです！）
趣味の関係で、録音環境あるよな……と、ふと思ったのです。
よし、試しにPodcast録音してみるか……？
まず、先日の勉強会で頂いた本を読む
「ONESTOP PODCAST Podcastを始めよう」
（もくもくと読む………………）
なるほど、わかった！
環境を整理する
- マイク
Sennheiser e 935 :ゼンハイザージャパン株式会社 | SENNHEISER 製品 | e 9351 - ポップガード
型番わからなかった
編集は何使おうか…と悩んでたところ、
そういえばうちAdobeCCあるやんってことでコレを採用。
AUDITION使ったことないぞ…
困ったな……と思ってたらこんなチュートリアルが…！
Adobe先生、神すぎる……！
これを見て、何となくの操作方法をスピードラーニング。
番組内容を考える
準備はできた、後は内容さえあれば録音できるぞ…
内容…
内容…
このブログを感想言いながら読み上げるか。
アリなのかナシなのかというと……きわどい感じだけど
ある程度のボリュームがあって、私のことを知ってる人が関心のある話題（技術系）となるとコレしかない…
あとはオープニングの挨拶とエンディングの挨拶を考えて…
内容できた～～～～～
録音をする
チュートリアルで学んだやり方をそっくりそのまま真似て録音を開始！
（オープニングトークかみかみで3回録音しなおしたのはここだけのお話）
あとは１日ずつセクション分けして録音◎
ここは割とスムーズにできました。
あれ…
1日ごとに録音してたけど、つなぎ目ぶちぶちで聞きづらいな…
こういう時ラジオならどうするんだろう…
（考える）
ジングル入れるか
（ついでにBGMもいれちゃお☆）
ということで、フリーBGMのサイトからジングルをゲットすることに。
（私はこちらを利用しました。→ フリーBGM（音楽素材）無料ダウンロード｜DOVA-SYNDROME）
編集をする
聞きやすいオーディオにするコツがあるらしく、
音声の入りと終わりをフェードイン・アウトすると聞きやすくなるそう！
なるほど、やってみよう～ということでそれぞれのセクションを編集。
音声編集するときはヘッドホンを使ってるのですが、
イヤホンやスピーカーでも聞いてみて聞きやすい音量バランスに……
よし、アップロードだ！
今回はアップロードしやすそうなやり方である
Anchorにアップロードする
というやり方を採用しました。
英語ェ……となりながら
本を片手にアップロード。
そして、無事にちゃんとアップロードできました……
その番組がこちら↓
わ～い、できたできたーっ！
感想
私の場合、録音環境が整っていたので内容を考えるだけで番組が出来上がりました◎
アップロード自体はそこまで難しくないと思います！
ということで、
モノは試しって感じでPodcastを上げてみた感じでした～！
また、ブログの読み上げをするPodcastを上げるかもしれません。
その時はよろしくお願いしますー！
今日はこの辺で！
