「本当によくわかるHTML＆CSSの教科書」のサンプルサイトを模写コーディングした記録
こんにちは！ゆーるるです。
プログラミング勉強をJavaScript中心に進めていたのですが、ドットインストールでHTML/CSSの基礎をやり直したことで、一度も最後までやりきったことがないサイト模写をやりたいなという気持ちになり。
ちょうど「本当によくわかるHTML＆CSSの教科書」をしっかり読んでない状態で、参考にしやすそうなサンプルサイトが載っていたので、これを見た目だけでコーディングしてみよう！と思い立ち模写をしてみました。
結果、完成したサイトがこちら！ https://u-rr.github.io/marine_coffee/index.html
githubによくpushはしてますが、github.ioに上げたのも気になってて初めてできたので嬉しい〜(´ω`)
苦労した点や、教科書と見比べて大きく違っていた点、今後やりたいことなどをまとめてみました！
参考元のサイト
参考にしたサイトは、「本当によくわかるHTML＆CSSの教科書」に載っていたコーヒーショップのサンプルサイトです。
参考にしたサンプルファイルはこちら https://www.sbcr.jp/support/14778/
上記からファイルをダウンロードできたので、同じディレクトリ上にsampleフォルダを作って入れて、実際にブラウザ上で動きなどを確認しながら、見た目だけを参考にコーディングしてみました。
※画像サイズ・フォントサイズ・フォントカラー・レスポンシブのブレイクポイントの確認でchromeのデベロッパーツールは使いました。
制作時間
作り始めをカウントし忘れてしまったのですが、制作時間は約10時間ほどでした。
苦労したポイント
トップ画像の文字の置き方
メインビジュアルの中にテキストが入ってますが、「position: fixed;」とかで「画像の真ん中に置く」指示ができたっけ？としばらくググってみたんですがいまいち上手くいかず。。 結果的には、padding-topでいい感じに設置できました。
後述する見本と照らし合わせてもpadding-topで指定してたので正解だったようです。
メニューページの画像がウィンドウサイズを変えると大きくなる
最初設定したとき、ウィンドウサイズを大きくしても見本のようにサイズが変わらず困惑したのですが、画像読み込み時にwidthとheightをpx指定してたのが原因でした。 width="100%"に変更することで解決。
CSSグリッドに苦戦
ウィンドウサイズを変えると2カラム、3カラムと変わっていくのにCSSグリッドが適切だと思って使用したのですが、どうもメニューカード全体が右側に寄ってしまい調整に苦戦。
メニュー画像の設定をwidth="100%"にしたときに、htmlでの呼び出し元と、CSSの両方で指定していたのが影響していたようで、CSSのほうを削除したら綺麗に中央寄せになってくれました。
ある程度の大きさになるとwidthが固定になる
地図ページを作っているときに気づいたのですが、PCサイズにしたときにある時点からコンテナーの横幅が固定になっていました。
メディアクエリで、固定に変わるwindowサイズのときにコンテナーのwidthを指定することで実現しました。
メールフォームの送信ボタンをbuttonタグで作るとグレーがかった背景色がついてしまう
本来だとボタンはbuttunタグで作るのがスマートな気もするのですが、背景色を指定してもグレーがかってしまうのがわからず。
<input type="text">
で見本と同じ見た目にしました。
答え合わせしてみました。
完成まで全く教科書を見なかったので、せっかくなので答え合わせしてみました。
概ね問題なさそうだったのですが、大きく気になったところピックアップします。
見本ではheaderタグ使ってない
ヘッダー部分をheaderタグで作りましたが、見本だと
<div class="header">
で作ってました。
スマホ表示でヘッダーをdivで左右に分けなかった
見本では最初の時点でヘッダーを左右にfloatで分けてますが、自分はモバイルファーストで、スマホの見た目からコーディングしたので、スマホ表示ではロゴをdisplay: none;してるので左右に分ける必要がなく。 レスポンシブでロゴが出始めるところでfloat指定入れました。
メニューにulを使ってる
見本ではアンカーリンクだけで作ってました。 なんかメニューはulとliで作るって先入観あるけど必ずしもそうじゃないのかな？
http://www.htmq.com/html5/header.shtml でもここのリファレンスだとulとli使ってるので継続していこうかなと思います。
ヘッダーの背景色入れてない
デフォルトで白く見えるから入れなかったんですけど、必須なのかな？入れといたほうが確かに無難って感じしますね。
メニューホバーの範囲を広くする指定の仕方が違う
見本ではaタグにpadding指定しててそういう方法あったんだなーと。 私はliタグに対して高さはline-heightで、横の余白だけpaddingで作りました。 （paddingだけでできたんだろうか？と試してみたけど、微妙に下ずれして上手くいかなかった。。）
containerにmax-width入れてない
上述したように、メディアクエリの方で入れました。 max-widthのほうがスマートだったかも。
containerにauto入れてない
中央指定にするために見本ではauto入れてますが、必要性がなかったようで自分は入れてません。 margin: 0 30px で中央寄せが叶ってると思ってるけどあってるかな。。
floatのあとにclear指定入れてない
今回、float使ったのはヘッダーとフッターだけで、そのあとに続くコンテンツがなくて影響なかったこともあってclearタグ入れるの忘れてました。 htmlのほうで
<div class="clear">
で用意してたの参考にしようと思います。
共通部分が多いスタイルを一番上にしてなかった！
上から読み込まれるってプログラミングの大原則なのについ忘れてしまう！
共通CSSを切り出したんですが、本で推奨されてるように、共通部分が多いスタイルシートを最優先で読み込ませてなかったです。 どおりで効き方おかしい感じするときありました。。反省。
メニューのwidth:100%の指定場所が違う
私はhtmlのほうで指定しましたが、見本ではCSSのほうで指定。どっちがいいんだろう。CSS指定で統一したほうが管理はしやすいのかも。と思いました。
見本ではメニューの並びはフレックスボックス使用
使い勝手的にわたしはCSSグリッドで作ったので見本のほうはあんまり参考にならず。CSSグリッドのほうがスマートだって信じてるw
画像にaltタグ入れてない
模写だけが目的だったからっていうのもあって省略した部分だったりはするのですが、見本だと綺麗にaltタグ入れてたので。 癖つけるためにも今後はちゃんと指定しよーっと思いました。
サイト模写してみてよかったこと
模写自体は、Progateの道場コースを完走したあたりから、いつかやりたい、やらなきゃなーと思いつつなかなかできておらず、今回初めて0からのコーディングを完走しました。（メールフォームは使えない状態だけど。。）
夫と遊びで途中まで模写したことはあったりしたのですが、最後までやりきれてなかったのがもやもやしてて。
今回最初から最後まで1人でやりきったので、「自分にもできた！」と自信が少しつきました。
また、極力元コードを見ないで見た目だけで再現しようとしたので苦戦するポイントが多く、たくさんググりながらコーディングしたので、写経するよりも身になったと感じます。
ドットインストールで実用的な基礎編もやってたおかげで、ある程度正解のあたりをつけながらぐぐることもできるようになってました。
今後やりたいこと
シングルページサイトにする
今回参考にした本に、今回作ったサイトをシングルページサイトにしてみるチャレンジも載ってます。
最近よく見るシングルページサイトは一度は作ってみたかったので、まずはこれをやってみてまた答え合わせしようかなと。
JavaScriptを使ってみる
今回完成したサイトは、JavaScriptをまったく使っていないサイトです。
本当はJavaScriptマスターになりたいなと思ってるこの頃なのでw ハンバーガーメニュー作ったり、動きつけられるところつけたりしたいなと思ってます。 （生JSをたくさん書きたいけど、動き系はjQueryが主流っぽくて悩み中。。）
メールフォームを使えるようにする
メールフォームも送信機能はつけていないので、node.jsを学んで使えるメールフォームにしたいと思ってます。（JSを極めるためにnode.jsを学びたい！）
Vue.jsでSPA化やPWA化をする
最近Vue.jsの勉強もしている（そもそも、こっちが本命）ので、見た目はそのままでSPA化やPWA化してみるのも勉強になりそうだなーと思ってます。
まとめ
以上、はじめてのサイト模写の記録をまとめてみました。
初心者向けの見本サイトなので、実際に運用されている模写はきっともっと大変で勉強になるだろうと思います。 なのでもっといろんなサイトの模写してみたい！
けど、まずはこのサイトだけてもいろいろできることがありそうなので、アレンジしながら付随する勉強範囲を広げていこうかなーという計画です。
風疹ワクチンの予防接種後に妊娠がわかったけど妊娠継続を決めました
こんにちは！ゆーるるです。
現在妊娠中の第二子、妊娠経過はずっと順調で、おかげさまで無事に9ヶ月を迎えることができました。
実は風疹の予防接種直後に妊娠が判明した子です。
風疹ワクチンは、生ワクチンなので、原則妊娠中の予防接種は避けるようにと言われていて、接種前1ヶ月、接種後2ヶ月の避妊が義務付けられています。
なので当然、接種後は避妊をしていたのですが、接種前は1ヶ月確実に避妊をしたかわからない状態で予防接種を受けてしまいました。 （早めに2人目が欲しかったので、自然な状態ではありますが妊活していました。）
幸いにも、エコーでは異常は出ておらず、母子ともに健康な状態ということもあって出産は前向きな気持ちで考えていますが、「風疹ワクチンを受けた状態の子を妊娠している」今の気持ちを出産前にまとめておきたいなぁと思ってこのブログを書きました。
風疹の予防接種後に妊娠が発覚しても必ずしも堕胎はしなくて良い
ところで、妊娠に気づかずに風疹ワクチンを接種してしまった妊婦さんの前例は世界的にも報告があります。
妊娠中に風疹ワクチンを接種した場合の対応について、「厚生労働科学研究費補助金、新興再興感染症研究事業」が 2013年に発表している書面がこちら。 https://www.jpeds.or.jp/uploads/files/jyouhou_130524.pdf
この資料によると、
万が一、ワクチン接種した後に妊娠が分かった場合でも、世界的にみてもこれまでにワクチンによる先天性風疹症候群の発生報告はなく、その可能性は否定されているわけではありませんが、人工中絶等を考慮する必要はないと考えられます
とあるように、妊娠中の風疹ワクチンの接種により、先天性風疹症候群の子どもが生まれたという例は今のところ報告がないそうです。 （後述しますが、専門の先生にお話を聞いた今年現在でも、そういった報告はないと言っていました）
産婦人科で浮かない反応をされて心配になり紹介先の大学病院へ
「どうしようかな〜リスクあるね。難聴とか目が見えないとかだったら生まれてくるまでわからないけどどうする？」
風疹ワクチンを妊娠発覚直前に受けている、と先生に伝えたときの第一声です。
事前に、上記で紹介した厚労省が出している書面を調べて読んでいたので、不安は持ちながらも堕胎までは考えていなかったのですが、出産予定の医院では詳しい先生がいないせいか、このようにかなり心配そうな反応をされて一気に不安な気持ちに。
（2ヶ月は避妊って言われたでしょ？と責めるように言われてちょっとショックでした。接種後には避妊していたと伝えましたが）
その後、「専門の病院で先生からお話聞けるし、希望すれば検査もできるよ」と言われたので、予定していませんでしたが念のため行ってみることに。
※あとでわかりましたが、上記で紹介した書面でも紹介されているきちんとした専門の病院だったので、ちょうどよかったって感じでした。
「そっちの病院で問題なければこっちで引き続き検査だから母子手帳もらってきてね。基本は2週間後だけど、紹介先の先生次第だよ」
と言われて、思ってたより大ごとになったな〜と不安が増してきた瞬間でした。
専門の先生と話してみて、検査はせず妊娠継続の決意
紹介されてすぐに大学病院で専門の先生とお話しました。
内容としては、上記で紹介した資料と同じ見解で、
「風疹ワクチンを接種したことで、先天性風疹症候群の子どもが生まれたという例は今のところ世界的にも報告がないから、堕胎までは考えなくても基本的には大丈夫」
とのこと。
希望すれば検査も可能でしたが、
- 母体にリスクのある羊水検査が必要であること
- 陰性の結果が出ても、絶対じゃないこと（ワクチンではなく実際に風疹に掛かってしまい、羊水検査で陰性の結果が出たのに先天性風疹症候群の子どもが生まれた方のニュースも見たことがあります）
また、我が家では第一子のときも、「遺伝子検査で異常がわかったとしても堕胎を決意できないだろう」ということで出生前診断をやらない考え方を夫婦でしていたということもあったので、検査は行いませんでした。
追跡調査ができていない懸念もある
ただ一点気になるのは、「ある程度成長してから異常がわかったけど、追跡調査できてないケースがあるのでは？」ということ。
というのも、先天性風疹症候群の代表的な症状は「心疾患・難聴・白内障」の3つですが、特に耳と目の異常って、生後直後ではわからないですよね？
実際、1人目を今育てていて、どのくらい聞こえてるか、どのくらい見えているかってまだまだはっきりとはわからないなぁと思ってます。 （なんとなく遠くからでも見えてそう。音がしたらそっちを向くから聞こえてそう、というのはありますが）
先生にもその点を質問してみたところ、「確かにある程度の年齢を過ぎると小児科の範囲ではなくなるから、追跡ができない。なので、そのあと何かわかったとしても風疹ワクチンと関連づけられてないかもしれない可能性はある」との見解でした。
ただ、少なくとも出産直後に聴覚検査は受けることはできるので、そこで何か異常がわかれば早期に治療を開始することはできるよ、とのことでした。
風疹ワクチンの問題がなくても、障害が出る可能性ってあるよね
とはいえ、今回の私のように事前にリスクがわかってる場合じゃなくても、出産時に何かトラブルが起こる可能性もあるし、トラブルなく出産しても何かしらの障害が出てくることだって可能性は0じゃないですよね。
100%何事もない出産、子育てがレアなくらいで、問題が起こったときにどう対処するか、を考える心持ちでいるほうが健全なんじゃないでしょうか。
ということで、自分としては前向きな気持ちで、今回の妊娠継続を決意しました。
まとめ
そんな感じで、自分なりに葛藤を解決して、今は純粋に出産を楽しみにしています。
障害に関しては、今順調に成長してくれている息子に対しても妊娠中から心配だったし、これから発覚する可能性もあると思って過ごしています。 （今何か兆候があるとか、出産前から何か遺伝子上の懸念があったわけではないです）
できれば避けたいですが、事故で障害が残る可能性だってあります。
でも、「何も起こりませんように」じゃなくて、実際に何か判明したり事が起こったときに、適切に対処してあげられるよう知識をつけておいたり心構えをしておくことが、自分ができる最善のことだとずっと思っています。
なので、第二子に対しても同じ気持ちで向かい合う心持ちです。
とはいえ健康に生まれてきてくれることに越したことはないので、何事もなく出産を無事に終えられるように祈っています！
出産後の経過も落ち着いたら追記する予定です。
温かく見守っていただけたら幸いです。
Qiita参考に Vue CLI3でPWAサイトを立ち上げてみた
こんにちは！ゆーるるです。
最近プログラミング強化期間として、ブログ更新をお休みしてちょこちょこ勉強進めてます。
Twitterでは頻繁に呟いてますが、ぼちぼちブログにも勉強記録をアウトプットしていこうかなと思って浮上してきました。
今回はこちらのQiita記事を参考に、Vue CLI3を使ってPWAサイトを立ち上げてみました！
https://qiita.com/n11sh1/items/5d64c337ef927ac8d5d6
アレンジは全くせず、ホーム画面に追加、プッシュ通知などPWA独特の機能を試すだけだったのですが、プッシュ通知でかなり苦戦したので、ここに記録を残します。
苦戦ポイント
curlを使ってテスト通知を送るのですが、これが全くわからず。
どこで実行するかすらわからなかったのですが、ターミナルで実行すれば良いことはかろうじてわかりました。 （バージョン確認で使えることも把握）
なんとか試行錯誤繰り返し、最終的にはテスト送信に成功！
https://t.co/bxbUvWy0RR
— ゆーるる＠フロントエンド勉強中のワーママ👶1.3y🥚32w (@6u_rr6) September 5, 2019
の、プッシュ通知のテストが送れたぞー！！！！！
curlの使い方をさっぱり知らないとこからでなにもかもわかんなかったからできて嬉しい。。 pic.twitter.com/Ls8heSu5Zw
敗因としてはこんな感じでした。
敗因１：${↑のサーバーキー}のどこを書き換えればいいかわかってなかった。これ全部だった
— ゆーるる＠フロントエンド勉強中のワーママ👶1.3y🥚32w (@6u_rr6) September 5, 2019
敗因２：一部のダブルクォーテーションがいつの間にか全角になってた
敗因３：${5のトークン}に何を入れるのかわからなかった
敗因３に関しては、ぐぐってもぐぐってもわかんなくてエンジニアの夫に相談したら「console.log(token)で取得してるから、出力されたのを入れればいいんじゃないの？」っていわれて、その時点ではどこでそれを見ればいいのかわかってなかったんだけど、今日ピンときてやってみたらできた。
— ゆーるる＠フロントエンド勉強中のワーママ👶1.3y🥚32w (@6u_rr6) September 5, 2019
通知許可したときに謎の文字列出てるなーとは思ってたけど、これだった🤣 pic.twitter.com/1ZITj28O1z
— ゆーるる＠フロントエンド勉強中のワーママ👶1.3y🥚32w (@6u_rr6) September 5, 2019
送信先のトークンの確認方法がさっぱりわからなかったのが本当にネックでした。。
今思えば、console.log()使ってるんだから真っ先にコンソール見なよって感じですが笑
iPhoneのブラウザではプッシュ通知が飛ばせない学び
PCではキャプチャの通り無事に確認できたのですが、iPhoneで通知許可から出せないので、これまた何か間違ってるかなーといろいろ調べてたんですが、そもそもiPhoneではブラウザのプッシュ通知に現状は対応してないことが判明。（確かに日常使ってて出てきた場面なかった。。）
わざわざネイティブアプリをダウンロードしなくても、同じようなUXを体験できるところがPWAの魅力として感じていたのですが、iPhoneにプッシュ通知送りたいならネイティブアプリ化が必須なんだなーと改めて学びました。
まとめ
以上、まとめてみるとちょっとしたことですが、仕事しながらとはいえ数日間悩みまくっていたので、無事にテスト通知遅れたときには本当に感動しました！
こういうエラー解決の瞬間が、やっぱりプログラミング勉強の楽しいところだなーと思います。（プログラミングというほどのことしてないけど；）
いずれオリジナルアプリはPWAで作りたいなーと思っているのですが、理由としては、
- 動作が速くて好き
- UIが使いやすくて好き
- SwiftやKotlin、Javaを学んだりストアに申請を出す手間をかけずにネイティブアプリのようなものを作れるところが魅力的
って感じです。
でも今回、プッシュ通知を使いたいなら少なくともiPhoneではストア申請を避けられないことがわかったので、ネイティブアプリ化も勉強しなきゃなーと思ってます。
FP2級に4ヶ月で独学合格！無料サイトも活用した育休ママの合格体験記
こんにちは！ゆーるるです。
2018年1月27日に2級ファイナンシャル・プランニング技能士を受験し、無事に合格の結果が出ました！
点数は、
学科：54/60 実技：93/100
と、学科実技ともに9割の好成績！
ただし、合格ラインは6割なので、その先は完全に自己満足の世界なのですが。(´･∀･`)ﾊﾊﾊ…
今回も3級の時同様、
- 本
- アプリ
- 無料の過去問サイト
を駆使して独学で勉強しました。
- 使った教材の感想
- 無料解説サイトの比較感想
- 勉強していて感じた、試験内容の特徴
- 実際に試験を受けた感想
についてまとめてみました。
FP2級の勉強をしている、これから始める方の参考に少しでもなったら嬉しいです。
３級合格記はこちら>>>「育休中に40日の独学でFP3級取得！合格までの道のり」
本
FPの学校 2級・AFP きほんテキスト【オールカラー】 (ユーキャンの資格試験シリーズ)
'19~'20年版 FPの学校 2級・AFP きほんテキスト【オールカラー】 (ユーキャンの資格試験シリーズ)
数ページを42日間に分けて読み切る！というコンセプトになっていて、1日ごとに簡単な章末問題が付いています。
資格で有名なユーキャンが出版しているという安心感と、毎日少しずつ確実に進められる気軽さに惹かれて購入しました。
内容は、過不足なく網羅されている印象です。かわいいネコのキャラクターが解説をしてくれたり、カラフルに色付けされているので、気軽に読み進めることができました。
FPの学校 2級・AFP これだけ! 問題集【オリジナル予想模擬試験つき】 (ユーキャンの資格試験シリーズ)
'19~'20年版 FPの学校 2級・AFP これだけ! 問題集【オリジナル予想模擬試験つき】 (ユーキャンの資格試験シリーズ)
学科問題が、本を開いた左側に問題、右側に答えがあるので、ページをめくる前に赤シートを入れておかないと答えが見えてしまう、というのが面倒でしたが、答え合わせのときには問題と答えが隣合った状態で確認できるのでよかったかな、と思います。
学科の問題数は、各分野ごとに15〜16問を収録。
全体の問題数としては少なく感じますが、頻出問題や、重要問題を重点的に網羅しているところと、分野ごとに集中して対策できるのがよかったです。
実技問題は、5種類全ての実技試験に対応しているため、試験単位で見ると収録問題数が少ない
FP試験の実技試験には5種類あります。
- 個人資産相談業務（金財）
- 生保顧客資産相談業務（金財）
- 損保顧客資産相談業務（金財）
- 中小事業主資産相談業務（金財）
- 資産設計提案業務（FP協会）
「FPの学校 2級・AFP これだけ! 問題集」の実技問題は、このうち各試験から2〜3問ずつ抜き出して作られているので、受験する実技試験の種類が決まっている場合には、問題数が少なくておすすめできません。
例えば、私は資産設計提案業務での受験だったのですが、「答えを出す過程の式を明示する」というのは資産設計ではやらなくて良いので、ちょっと過剰な対策になるんですよね。
本質的には同じ知識を使って解くことになるので、全くの無駄ではありませんが(^_^;)
資産設計は特に、無料で利用できる過去問サイトがたくさんあったので、結局そちらのお世話になりました。
どの実技試験を受けるか決めていない段階の方には、試験問題を一度に見比べられることになるのでとても良い構成だと思います！
本の問題集を買うことのメリット
法改正に対応している
今は過去問に無料で解説をつけてくれている良心的なサイトがたくさんあるので、わざわざ書籍の問題集を買う必要性を感じなかったりしますよね。
でも、法改正へのフォローがされていないサイトで古すぎる問題に取り組むと、間違った知識を覚えてしまう危険性があります。
実際に過去の問題を無料サイトで解いていて、「これ、法改正された今では違うことになってない？」ということがちらほらありました。
正式に出版されてる本なら、法改正にも対応しているというのが最大の安心ポイントだと感じました。 ※もちろん、受ける予定の試験年度に対応した最新の本を購入することが前提です！
解説が選択肢全てに付いている
また、「FPの学校 2級・AFP これだけ! 問題集」では、選択肢全てにわかりやすい解説がつきます。
後述するスマホアプリやだと、正解の選択肢にしか解説がついていなかったり、無料サイトでは対応が追いついてなくて解説が充実していない年度があったりするんですよね。
ちょっとしたことですが、選択肢全てに解説がついていると、1問解くだけで、4倍の学びを得られることになるので「コスパがいい」です！
3級の時には買わなかった本の問題集を買った理由
3級のときは本の問題集は買わずに、スマホアプリ・動画・過去問サイトだけで対策してました。
育児しながらでは机で勉強する時間が取れないと思っていたからです。
しかし、2級の今回購入に至った理由はFP2級の問題文の量の多さです。
3級の学科問題は、○×問題と3つの選択肢から選ぶ2種類の形式なので、スマホ片手でも覚えられるレベル感でしたが、2級の学科は、1問につき長文の選択肢が4つあります。
単語が１つ違うだけだったり、単語が入れ替わっていて正解とは逆の意味になっていたり、選択肢を全て良く読まないと正解できないようになってるんです。
問題を読む労力が単純に4倍ほどになるので、スマホアプリで片手間にやろうとしても全く集中できず。
しかも読まなければいけない文章が多くなった分、スマホの小さい画面では読みづらいのも集中できないポイントでした。
結果的に、机に向かって腰を据えて勉強するのと労力が変わらないのでは？と感じたので、書籍を使っての勉強に切り替えました。
アプリ
FP2級 過去試験対策 問題集（有料）
収録問題数明示されているアプリが多い中、明示されていなかったので、問題数を知りたかったのと、価格が安かったので購入しました。
問題数は全部で120問です。個人的には物足りないかなーという印象でした。
解説が正解の選択肢にのみ表示されるので、他の選択肢のどこが間違っていたかがわからず、非効率だな〜と思ってすぐに使わなくなりました。
過去問.com（無料）
https://kakomonn.com/fp2/pt/620002/
スマホアプリではありませんが、アプリ感覚で問題を解けるサイトです。
学科は過去8回分、実技は過去6回分の問題に対応しています。
FP協会が公開している過去問と同じで一番古い試験が2016年で、このくらいなら法改正の影響を受けるものはなさそうでした。
なお、実技試験は資産設計提案業務のみです。
確認した限り、実技試験の問題をアプリ感覚で解ける唯一のサイトです。
実技試験は、通常は用意されていない選択肢の中から回答を選ぶ方式なので、これだけで本番に臨むのは危険ですが、片手間の復習にはとても使いやすかったです。
ちなみに、
- 2018年9月分のランダム回答で、資料が確認できず回答できない
- 最新年度の過去問は解説が追いついてないものもある
- 金の売買問題に関して、回答が誤っているものがあり（報告済み）
と、勉強に支障が出る点が少しありました。
やっぱりこのあたりは無料で恩恵を受けられる分仕方ない部分ですね。
FP2級ドットコム（無料）
https://fp2-siken.com/kakomon.php
こちらも過去問.com同様、アプリ感覚で問題を解けるサイトです。
学科試験のみ対応しています。
わたしが使っていたときには、2013年・2014年など古すぎる過去問だと、法改正で古くなった問題が出てきてしまうのが不満で使わなくなってしまったのですが、2019年2月8日のアップデートで、表示されないようになったようです。
「法令改正で古くなった問題も出題する」というチェックボックスがあるので、そこを空欄のままにしておけば法改正対応バージョンで問題を解けます！便利ですね( ´ ▽ ` )
過去問サイト
2級FP過去問解説（一部有料）
サイト上で問題を解く機能はありませんが、実技試験の過去問で最終的に
- FP協会が出している公式の過去問PDFを見て解く
- 答え合わせと回答を無料の過去問解説サイトで見る
というのがやりやすかったので、このサイトを重宝しました。
なんとこの解説と問題をセットにしたPDFも公開してくれています！
わたしが利用していたときには完全有料だったのですが、2019年4月10日現在では、無料公開をしています！
実技試験が金財・FP協会全てに対応しており、解説も充実している一番の過去問解説サイトではないかと思います。
FP試験ナビ（無料）
https://fp-navi.jp/fp2/mondai-2/
FP協会と金財から出ている過去問と模範回答のリンクが1ページにまとめられていて便利です。
解説が分野ごとにまとまっているので、分野別の弱点が見つけやすいなと思いました。
ただし実技の解説が無いので、他のサイトも合わせて参照する必要があるのが不便でした。
試験範囲や問題出題数、合格者エピソードなど、FP試験に関するコンテンツが網羅されているのは他のサイトにはない特徴です。
FP試験研究所（無料）
実技は資産設計提案業務と、個人資産相談業務の2つに対応。
回答が、ボタンを押さないと表示されないようになっているので、スマホから本番と同じ感覚で解けるのは便利です。
ただ、2018年9月分など、一部過去問で資料が表示されずに回答できないものがいくつかありました。 ※発見したものは管理者様に報告して修正対応していただきました。対応が早く、メールの返信もとても丁寧にいただけた上に、「試験がんばってください」と励ましのお言葉もあり、感動しました(´;ω;`)
最終的に、公式の過去問PDFを見ながら問題を解いて、解説だけを参照する方法を取ったので、ボタンを押さないと解説が表示されない形式がただのひと手間となってしまい、残念ながら使わなくなってしまいました。
資料が見られない問題が全て解決されていたら、スマホだけで隙間時間に過去問対策ができる優良サイトだと思います。
合計145時間（1日平均1.2時間）勉強しました。
総学習時間は145時間。4ヶ月を120日として単純に割ると、1日平均1.2時間の勉強時間ですね。
1月27日の試験に向けて、10月からテキストを読みはじめ、11月から問題集に取りかかりました。
3級直後に2級の過去問にチャレンジしたら5割程しか取れなかったのと、文章量の増加にびびってかなりガチで勉強してしまったのですが、勉強開始するのを1ヶ月遅らせていても良かったかなぁと感じました。
1月入る頃には問題集や過去問で7〜8割取れるようになっていたので危機感が少なく、かといってそこで力を抜いてしまうと覚えたものも忘れてしまうので、マンネリを感じながらも勉強を続けなきゃいけないのが苦しかったからですw
真剣に長い期間やりすぎて飽きてしまったのもあると思います。
とはいえ、育児中はイレギュラー的に勉強を中断せざるを得ないことが起きる可能性があるので、なかなか難しいところですね。
我が家の場合は、幸い毎日が順調だったので、余裕を見て早く取り掛かった分時間が余ってしまった感じです。
余裕を持って始めたほうが、勉強時間確保できなかった！という後悔はなくて良いのかもしれません。
勉強方法について
10月：「FPの学校 2級・AFP きほんテキスト」にしたがい、毎日1日分を読む
11月〜12月：「FPの学校 2級・AFP これだけ! 問題集」に取り掛かる（テキストで読んだ分野の問題を解く方法に切り替え）
1月：公式の過去問と無料の過去問解説サイトでひたすら過去問を繰り返し解く
1月は、過去問を解く→前日解いた過去問を全部復習というスパンでやってたので、かなりストイックでほんとに辛い瞬間もありましたw
わたしは合格ラインにギリギリ引っかかったような合格はしたくない！と思っていたのもあって頑張ったのですが、6割取れれば合格できるので、資格を取りたいだけだったらここまでしなくて全然いいと思います。
学科試験の特徴
純粋に知識量を問われる構成になっているので、幅広く正しく知識を蓄積しておく必要があります。
ただし、何回が過去問を解いていると、繰り返し出てくる問題のパターンが見えてきます。
また、一見見覚えがなくて難しそうな選択肢が並んでいても、基本がわかっていれば解ける（知っている選択肢を除外すれば答えが見えるものがある）ので、過去問を繰り返して慣れれば怖くないです。
実技試験の特徴
ほぼ同じパターンの繰り返しなので、過去問を数回やれば解けるようになってきます。
逆に、基礎的な知識だけだと解き難いものがあります。（家の購入価格から土地の価格を出すとか、不動産の物件表記の、徒歩時間のメートル換算とか）
この辺は、応用的な考えができる人なら苦じゃないのかもしれませんが、私は見事に引っかかったので、必ず過去問を解いて覚えることをお勧めします。
試験の時間配分
学科：2時間 実技：1時間30分
学科は、半分の1時間で解き終えましたが、見直しをしっかりして時間いっぱいでした。
実技もまずは全て解くことを優先して、1時間で大体解き終わったのですが、残りの30分で見直しと、わからなかった問題を解き続けたのですが、納得できる答えが出せる前に終了となってしまいました。
当たり前かもしれませんが、初めて見る問題が多いなと感じました。
3級同様、途中退出ができますが、3級のときほど退出者は多くなく、めいっぱい時間使う人が多い印象でした。
まとめ
以上、わたしのFP2級合格体験記でした。
正直、わたしが今働いている職場では役立つ機会のない資格だし、エンジニアになりたいと思っているのに、結果的に育休期間の殆どを費やしてまで取るような資格だったのかな・・・？と今になって感じる瞬間もあります。
でも、なんだかんだ今の日本で生きていくためには、お金って必要不可欠ですよね。
といったことを考えられるようになった（知らなければ考えることもできないですよね）のは大きく自分が成長できたポイントじゃないかと感じます。
それに今はフリーランスになる人が増えている時代ですが、自分や夫が独立する選択肢が現れた場合にも、会社員のときと何が違うのか、将来への備えや保障はどうすればいいか、と、考えるべきポイントがある程度わかっている状態から対応できるようになったこともメリットだと感じています。
金勘定が好き、家計管理が好き、家計管理者としての発言権を強めたい！って人には勉強して損のない資格だと思います。
この記事が、受験を考えている方のお力になれたら幸いです。
ゆーるるでした。
ママ友作りのマッチングサービス作成中だけど似たサービスを見つけてしまったのでまとめてみた
こんにちは、ゆーるるです。
約2ヶ月ぶりのブログです。
TOEIC試験が終わって以来、燃え尽き症候群になっておりましたが、そろそろブログ更新を再開しよう、と思い立ちました。
日の目を浴びてない下書きが溜まりに溜まっているのですが、リハビリがてら＆今最もタイムリーな話題で更新することにしました。
ずばり、「ママ友マッチングアプリ」の話です。
自分自身が外出めんどーな引きこもり体質＆ヲタ寄りなので、
趣味嗜好の合うママさんと友達になりたいけどどうやったらわからない〜pairsみたいなママ向けサービス使いたい〜
と思っているのですが、App Storeでは見つからず、無いなら自分で作ろう！と思って、夫の力を借りながら開発に着手し始めたところです。
でも、考えてみたらGoogleで検索したことはなかったんですよね。
せっかく良いものを作っても、全く同じものが既に世に出てたら意味ないよな、競合分析は基本だしな、と思って今日調べてみたら、ドンピシャなものを発見！
せっかくなので、まとめてみました。
- DearMAMA
- Peanut
- 番外編
- パパ向けのマッチングサービスは需要はあるんだろうか？
- DearMAMAに期待しつつ、自分のアプリ開発も進めます！
- 他にもママ向けマッチングサービスってあるのかな？
DearMAMA
※2020年3月現在、リンク切れです。企画なくなっちゃったのかな・・・
- 完全審査制
- アプリ内でメッセージが送れる
- ママの趣味や子供の月齢がわかった上で繋がれる
- 毎日10名ずつ趣味が合いそうなママをレコメンド
という特徴を持っていて、見た感じpairsやomiaiのような、いわゆるマッチングアプリと同じような操作感を目指しているのかな〜と感じます。（私はpairsとTinderしか知りませんが；；）
ママ同士で知り合える側面には、ママを狙った悪質な人が紛れ込む心配もあるので、セキュリティ面がとにかく課題だなと思っているのですが、完全審査制というのは大きな安心ポイントになりそうですね。
鋭意開発中のようで、現在は事前登録受付中です。
もちろん私も登録させてもらいました！
「ママ友 マッチングアプリ」でGoogle1位に出てきてるのも強いですね。
2017年末にユーザテストもやってたみたいです。知ってたら行きたかったな〜
最新のブログが2018年末。アイコンが決まっているとのことなので、そろそろなのかな？
期待大です。
Peanut
こちらも「ママ友 マッチングアプリ」の検索で出てきたサービスで、ロンドンの起業家ママさんが開発されたものです。
位置情報を元に、近所のママさんと繋がれるという、Tinder（男女の出会い向けマッチングアプリ）の仕組みに似ているようですが、ママの趣味や子供の年齢・特徴も見られるので、よりママ向けになっているそうです。
使ってみたいなと思ってApp storeを開いたものの、日本に対応していないようでダウンロードできずでした。残念。
余談ですが、DearMAMAもそうだし、自分のアプリも「mama」って文字を入れているので、ピーナッツって命名センスがすごい。さすが海外。。
向こうのママさん的には、ピーナッツって単語とママに関連性があるんだろうか？
番外編
ツイッターを眺めていて知ったサービスです。
マッチングサービスではないかな？と思ったので番外編としました。
OYABAKA
ダウンロードしてみました！
クローズドなSNSという印象。
インスタとツイッターを合わせたような使用感です。
子供の誕生日や現在地の情報（市区町村単位まで）を登録したのですが、その情報がマッチングに役立ってる感じがしません。これから実装予定なのかな？？
今のところはメッセージフィードや、インスタのような投稿写真欄を見て、趣味の合いそうな人を探す感じですね。
登録するとき、特にママであることを審査する過程がなかったので、嘘でも登録できちゃいそうな感じはありました。
- もう少しピンポイントな趣味で繋がりたい
- 近所のママさんと簡単に知り合いたい
と思っている私には、今のところフィットしませんでした。
カテマッチ
ブラウザ上で利用する、伝言掲示板みたいなサイトです。
募集を出して、それに反応がくるのを待つ仕組み。
募集できるカテゴリは以下。
- お食事に行きたい
- 趣味で繋がりたい
- 遊ばせたい
- 預けたい
- お迎えしてほしい
- 教えたい
- 教わりたい
- その他
意外と趣味友探しの書き込みがいくつかあり、うまく使えば趣味の合う友達見つかりそうです。
預けたい、お迎えして欲しい、あたりは「してほしい」人はいても「したい」人が自ら探すってシチュエーション想像できないなぁ〜とちょっと思いました。
募集に対してのコメントはアカウント登録しないと見られないようになっていますが、登録自体は誰でも簡単にできてしまうので、プライベートな連絡先をコメント欄でオープンにやり取りしないといけないのが少し心配です。
ツイッター、インスタ、FBあたりでつながるのが無難なのかなぁ。
あと、地域を都道府県以下の単位で検索できないようなので、市区町村単位で検索できるほうがありがたいなーと思いました。
と言いつつも、新たな出逢いを求めて募集出してみようかなーと思ってます( ´∀｀)
パパ向けのマッチングサービスは需要はあるんだろうか？
上で紹介した、Peanutのインタビュー記事でも見つけたお話ですが、パパ向けのマッチングサービスこそブルーオーシャンなのでは？とも思い始めました。
本当は、ママ・パパの区別なくコミュニケーションが取れたらいいんだろうなと思いますが、
子育てパパ（ママ）を偽ってママに近づく悪質な男性がいるかもしれない
というのが怖いなーと思ってます。
本当のママの中にだって悪質な人がいないわけではないでしょうけど。。
でも、シングルファザーはもちろん、ママがいてもパパも同じくらいかそれ以上に子育てにコミットしている人もいますよね。
パパが子育てをしていることがまだまだ当たり前じゃない世の中で、パパさんのほうが孤独や疎外感を感じる機会って多いんじゃないのかな？と思います。
保育園の健康診断や面談もほとんどママさんだったし。
まずはママ・パパ混合じゃなくてパパ限定のマッチングサービスから始めてみるのもありなのかなー
ってちょっと考え始めました。
DearMAMAに期待しつつ、自分のアプリ開発も進めます！
ゆーるるの状況はというと、夫の力を最大限借りながら、デザインスケッチとフロントデザインに着手し始めた状況です。
DearMAMAが良いサービスだったらぜひ活用したい！と思いつつも、求めている機能が実装されないかもしれないし、被ってしまったとしても自分のプログラミング・コーディングの勉強になると思うので、引き続きアプリ開発は進めていきたいなーと思っています。
他にもママ向けマッチングサービスってあるのかな？
私が調べた限り（2019/03/29現在）ではこの4つだけですが、他にもあるんでしょうか？
この記事をみてくださった方で、他にも知っている方がいらっしゃったら、コメント欄やお問い合わせフォームから教えていただけると嬉しいです！
もし教えていただけたら、自分でも調べてこの記事に追記します！
以上、ゆーるるでした。
WordPressが真っ白背景になってFTP情報を求められて大混乱した話
こんにちは！ゆーるるです。
先日、WordPressでプラグインの更新のあたりをいじっていたところ、突然背景が真っ白になって、FTP情報の入力を求められる画面で出てきてプチパニックを味わいました。
今はこの記事が更新できていることからもわかるように、無事に復帰しているのですが、完全解決には至っていません。。
なので、記事として公開するか迷ったのですが、学んだこともあったので勉強の記録として公開します。
恐怖の真っ白画面
FTP情報入れてね〜って出てるので、正真正銘の真っ白ではありませんが(￣▽￣;)
管理画面はもちろん、表側（ユーザとしてアクセスした場合）にも表示されていた＝サイトが完全に見れない状態になっていたので、パニックですよ。
このブログ、見よう見まねでGCP×KUSANAGI Runs on Dockerで立てたのですが、
関連記事>>>「GCPの無料枠でKUSANAGI Runs on Docker使ってWordPress構築した話」
どうやらKUSANAGI Runs on DockerにはデフォルトでFTPサーバー情報がないらしい？？
そのため、FTP情報を求められることを回避するコードは入れてるはずなんですよ。
wp-config.phpの最終行に「define(‘FS_METHOD’,’direct’);」を追加する。これでプラグイン・テーマを新規登録の不具合を回避することができる。
引用元：https://www.karelie.net/free-fast-wordpress-site-setting/はじめエラーに遭遇したときは、コードが間違っていたようで今は直した状態だったのですが、プラグインを更新して管理画面の別ページに遷移しようとしたらまた同じエラー画面が出ました。なぞ。
KUSANAGIの公式にFTP情報が載ってた
一生懸命ググッていたら、KUSANAGIの公式にFTP情報の記述を発見！
ホスト名：example.com(SSH接続時のホスト名と共通) ユーザー名：kusanagi パスワード：[インストール時に設定したユーザー「kusanagi」のパスワード]
引用元：https://kusanagi.tokyo/faq/WordPress上に表示されているフォームに入力してみたら、いつものログイン画面が出た！
kusanagiのパスワードとか設定した覚えない（実際、KUSANAGI Runs on Dockerでは設定しない）のですが、ダメ元で、真っ白画面に表示されているフォームに、ホスト名・ユーザ名・パスワード（思いついたもの）を指示通りに入れて、FTPSを選択して接続してみたら、いつも通りのログイン画面が出ました！
まじでこのときはホッとしました。
しかし、二度目の同じエラー画面で、試しに別のパスワード（可能性あるもの）を入れてみたら、これでも管理画面開けました。
なぞ。。。
おそらく、ログイン状態として認識されなければ、ログイン画面が出てくるはずなのでセキュリティ的には大丈夫だと思いますが(･_･;
今回の原因
原因は、完全にプラグインの更新によるものだと思います。
まだ根本解決できてないので、今後の課題ですね〜
ちなみに、幸いWordPress自体の更新は引っかからずにできました。よかった。
まとめ
以上、FTPエラー？奮闘記でした。
今までは情けないことに、サーバーに入れてもこのWordPressを構築しているファイルの見方がわからなかったりしたのですが、今回の件で夫に助けてもらってひとまずファイルを見る方法は把握できたので、今後はそちらから対処はしていけそうです。
KUSANAGI Runs on Dockerを利用した時点では、参考にしたサイトのやり方をまるまる真似ているだけで、どこかどうなってるのかって全然理解できてなかったのですが、今回の件や、メールサーバー設定を自分で対応したことで、改めて自分の環境を省みることになったので、理解が深まってきたのは良い経験だったなと思います。
WordPress運営って大変ですが、こういうのは楽しい！
関連記事>>>「【2019年最新版】WP Mail SMTPをGmailで設定するには2段階認証が必要だった！」
この記事を読んでいただいた方で、「この言い方は違うよ！」とか、「ここはこうやればいいんだよ！」っていうのが分かる方がいらっしゃいましたら、コメントからツッコミ入れていただけると幸いです(＞人＜;)
