ポートフォリオとして制作したゴルフスクールの予約システムの制作過程をまとめました。 尚、ポートフォリオとGitHubは下記でございます。 ポートフォリオ「ゴルフスクールの予約システム」URL https://www.golfchamp-reservation.com/login GitHub https://github.com/takayuki007/golfChamp-reservation 1、要件概要 導入 PHPのフレームワークであるLaravelを使ってゴルフレッスンの予約サイトを作ってみます。以前、作ったゴルフレッスンのサイトの予約システムです。 ゴルフレッスンサイトURL： https://takayuki007.github.io/golfChamp/index.html 参考にしたサイトは下記です。 ZERO FUSION https://www.zero-fusion.com/ 2、サービス概要 自分の希望日時と場所でゴルフの個人レッスンを受けるための予約が取れる。 要件定義(10分) ユーザー名、メールアドレスで登録できる。 ユーザー名とパスワードでログインすることができる。 レッスン日とコーチとレッスン場所を明確に。 マイページでレッスンの確認。 PCとスマホに対応。 ページ構成(5分) 新規登録ページ ログインページ マイページ 予約ページ 完了ページ 画面設計&デザイン作成 新規登録ページ（PC25分）（SP10分） ログインページ（PC5分）（SP5分） マイページ（PC10分）（SP5分） 予約ページ（PC10分）（SP5分） 予約確認ページ（PC10分）（SP15分） 完了ページ（PC5分）（SP5分） DB設計（20分） users id id name varchar email varchar password vaerchar email_verified_at timestamp remember_token varchar created_at timestamp updated_at timestamp deleted_at timestamp locations id int name varchar address varchar url text created_at timestamp updated_at timestamp deleted_at timestamp times id int time varchar created_at timestamp updated_at timestamp deleted_at timestamp coaches id int name varchar created_at timestamp updated_at timestamp deleted_at timestamp reservation id int date varchar user_id int location_id int coach_id created_at timestamp updated_at timestamp deleted_at timestamp クラス設計（15分） FLOCSSを採用 全体 app Foundation部分 _reset、_variables Layout部分 l-wrapper、l-site-width、l-margin、l-main、l-header Object部分 Component部分 c-btn-second、c-alert-success、c-btn-area、c-btn、c-form-check-area、c-form-check-label、c-form-group、c-form、c-from-check-input、c-heading、c-input-area、c-input、c-invalid-feedback、c-is-invalid、c-li、c-link、c-logo-link、c-logo、c-reservation-group、c-reservation-li、c-reservation-ul、c-reservation、c-text、c-title、c-ul、c-wrapper Project p-text-center Utility u-space-area、u-margin-top、u-login-link、u-color-red 環境構築(30分) Laravelをインストールし、サーバーを起動。 参考URL： https://readouble.com/laravel/5.8/ja/installation.html https://teratail.com/questions/285110 https://stackoverflow.com/questions/39098717/fatal-error-unable-to-create-lock-file-bad-file-descriptor-9-while-running https://stackoverflow.com/questions/17933882/php-bad-file-descriptor-error 3、実装 HTMLとCSSを同時に書いていく。 header(PC45分)（SP10分） 新規登録ページ(PC70分)（SP10分） ログインページ(PC20分)（SP0分） パスワードリセットリンク(PC15分)（SP0分） パスワードリセット画面(PC10分)（SP0分） 完了ページ(PC10分)（SP5分） 予約確認ページ(PC15分)（SP5分） マイページ(PC45分)（SP0分） 予約ページ（PC5分）（SP5分） 表示するためにコントローラーを通す（10分） 参考URL： https://readouble.com/laravel/5.5/ja/configuration.html https://readouble.com/laravel/5.4/ja/mix.html https://saruwakakun.com/html-css/basic/box-shadow HTML／CSSが完了したので、PHPの処理部分に入る。 usersテーブルの作成（5分） deleted_atのカラムを追加 参考URL： https://qiita.com/miriwo/items/5e5a47ece1b805266246 https://qiita.com/I-201/items/bfb4c216da196247e369 ログイン機能の確認（5分） ログイン後のヘッダー直し（10分） ログアウト後の戻りページ直し（5分） 参考URL： https://teratail.com/questions/259884 https://qiita.com/nekyo/items/d9413d8ae6dc9f3eb05d ログイン処理のエラー文字を赤色にする（5分） ログイン処理のエラー枠を赤色にする（5分） エラーメッセージを日本語にする（5分） 参考URL： https://qiita.com/samuraibrass/items/d71c08e144dbbf98e348 新規登録で確認メールを送信（30分） 参考URL： https://qiita.com/nekyo/items/03e50b4d0dd6f09287d6 https://qiita.com/yutaroshimamura/items/8a89fc57bd3c73a24c32 https://www.sejuku.net/blog/72944 https://stackoverflow.com/questions/50232314/laravel-5-5-missing-required-parameters-for-route-password-request 認証メールを日本語化（60分） 参考URL： https://webplus8.com/laravel-env-attention/ https://eigoswitch.com/eigo-regards#:~:text='Regards'%20%E3%82%92%E8%8B%B1%E8%AA%9E%E3%81%AB%E7%9B%B4%E8%A8%B3,%E3%81%AE%E5%90%8D%E5%89%8D%E3%82%92%E6%9B%B8%E3%81%8D%E3%81%BE%E3%81%99%E3%80%82 https://teratail.com/questions/217183 https://note.com/insectchan/n/n80de3ee6722b 苦労したこと 日本語に設定したが、なかなか反映しないので見落としがあるか何度もチェックすることで時間をかけてしまいました。ただ、その原因はキャッシュが残っていたことだったので、次からはそちらも見逃さず当たりをつけられるようにしたい。 パスワードリセットメールの日本語化（15分） コーチテーブルの作成&seederでのデータ挿入（15分） 時間テーブルの作成&seederでのデータ挿入（15分） レッスン場所テーブル＆seederでのデータ挿入（30分） 参考URL： https://stackoverflow.com/questions/59511459/how-to-get-website-url-in-laravel-seeder https://teratail.com/questions/864 https://qiita.com/Otake_M/items/3c761e1a5e65b04c6c0e 苦労したこと レッスン場所のマップをURLで入れる際の型とそれに必要な方法を調べるのに手間取ってしまった。調べたいことをすぐに言葉にできるように常に意識づけをしたい。 予約画面の作成（300分） 参考URL： http://hpscript.com/blog/php%E3%81%A7%E4%BA%88%E7%B4%84%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0%E3%82%92%E4%BD%9C%E3%81%8F%E3%82%8D%E3%81%862%E3%80%80%E4%BA%88%E7%B4%84%E7%94%BB%E9%9D%A2/ https://jqueryui.com/datepicker/ https://teratail.com/questions/31293 https://www.larajapan.com/2019/11/10/npm%E3%81%8B%E3%82%89%E3%83%91%E3%83%83%E3%82%B1%E3%83%BC%E3%82%B8%E3%82%92%E8%BF%BD%E5%8A%A0/ https://pointsandlines.jp/front-end/javascript/datepicker https://stackoverflow.com/questions/43823295/uncaught-typeerror-datepicker-is-not-a-function-at-htmldocument-anonymo/43823339 https://code-kitchen.dev/html/input-date/ https://takuya0805.hatenadiary.org/entry/20131023/1382505579 https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/date 苦労したこと カレンダーのようなUIがあれば利用者に分かりやすいと思いdatepickerを導入することにしましたが、datepickerが機能せずに苦労しました。初めはjQueryやjQuery-uiが読み込みできていないと思い、読み込み順序を確認したり、CDNで実験してみたりしましたがうまくいきませんでした。。クリックしたらアラートを出すような単純な処理を加えるときちんと反応していたので、そもそもdatepickerに問題があると思いましたが解決できませんでした。そこでinputのdateを使ってカレンダーのように表示し、登録できるようにしました。この一連の作業のため、かなり時間がかかってしまいました。 reservationsテーブルの作成（10分） 予約機能の実装（45分） マイページの実装（180分） 参考URL： https://blog.capilano-fw.com/?p=665 登録済のユーザーしか使えないようにページの表示をルーティングで調整（10分） 不要部分の削除、必要箇所にコメントを入れる（30分） 4、テスト(ローカル) 必要な要件はすべて実装し終えたので、テストをする。テストは単体テストと結合テストの2つを行う。単体テストは境界値テストとブラックボックステストを行う。結合テストでは、ページの遷移が正しいかなど、全体的な動作の確認を行う。 加えて、今回のテスト範囲は、PCは世界的にもっとも使われているGoogle Chrome、スマホはandroidとiOSの最新バージョンでテストをする。スマホのブラウザはSafariとGoogle Chromeにする。 尚、スマホについてはシミュレーターを使う。 単体テストケースの作成（100分） 結合テストケースの作成（10分） 単体テストの実施（240分） 機能名 No. 分類 テスト手順 想定結果 結果1 担当者1 実施日1 新規登録機能 1 異常系 名前欄、メールアドレス欄、パスワード欄、パスワード再入力欄に何も入力せず、登録ボタンを押す。 DBの登録処理は実施されず、名前欄のところに「このフィールドを入力してください」と表示される。 ○ 自分 3/26 2 異常系 名前欄に「test」を入力し、メールアドレス欄、パスワード入力欄、パスワード再入力欄は何も入力せず、登録ボタンを押す。 DBの登録処理は実施されず、メールアドレス欄に「このフィールドを入力してください」と表示される。 ○ 自分 3/26 3 異常系 名前欄に「test」を入力し、メールアドレス欄に「test@test.com」を入力し、パスワード入力欄、パスワード再入力欄は何も入力せず、登録ボタンを押す。 DBの登録処理は実施されず、パスワード入力欄にパスワードを提案される。 ○ 自分 3/26 4 異常系 名前欄に「test」を入力し、メールアドレス欄に「test@test.com」を入力し、パスワード入力欄に「aaaaaaaa」を入力し、パスワード再入力欄は何も入力せず、登録ボタンを押す。 DBの登録処理は実施されず、パスワード確認欄に「このフィールドを入力してください」と表示される。 ○ 自分 3/26 5 異常系 名前欄に「test」を入力し、メールアドレス欄に「＠test.com」を入力し、パスワード入力欄に「aaaaaaaa」を入力し、パスワード最入力欄に「aaaaaaaa」を入力し、登録ボタンを押す。 DBの登録処理は実施されず、メールアドレス入力欄の下に「「＠」の前の文字列を入力してください。「＠test.com」は完全なメールアドレスではありません。」と表示される。 ○ 自分 3/26 6 異常系 名前欄に「a」を256文字入力し、メールアドレス欄に「test@test.com」を入力し、パスワード入力欄に「aaaaaaaa」、パスワード再入力欄に「aaaaaaaa」を入力し、登録ボタンを押す。 DBの登録処理は実施されず、名前入力欄に「名前は255文字以下のみ有効です。」の赤文字と該当入力欄が赤色で囲われる。 ○ 自分 3/26 7 異常系 名前欄に「test」を入力し、メールアドレス欄にaを256文字、その後に@a.comというメールアドレスの形式を入力し、パスワード入力欄に「aaaaaaaa」、パスワード再入力欄に「aaaaaaaa」を入力し、登録ボタンを押す。 DBの登録処理は実施されず、メールアドレス入力欄に「メールアドレスは255文字以下のみ有効です。」の赤文字と該当入力欄が赤色で囲われる。 ○ 自分 3/26 8 異常系 名前欄に「test」を入力し、メールアドレス欄に「自分のメールアドレス」と入力し、パスワード入力欄に「aaaaaaaa」を入力し、パスワード再入力欄に「aaaaaaaa」を入力し、登録ボタンを押す。 DBの登録処理は実施されず、エラーメッセージも表示されない。 ○ 自分 3/26 9 異常系 名前欄に「test」を入力し、メールアドレス入力欄に「test@test.com」と入力し、パスワード入力欄に「aaaaaaa」を入力し、パスワード再入力欄に「aaaaaaa」を入力し、登録ボタンを押す。 DBの登録処理は実施されず、パスワード入力欄下に、「パスワードは8文字以上のみ有効です」の赤文字と該当入力欄が赤色で囲われる。 ○ 自分 3/26 10 異常系 名前欄に「test」を入力し、メールアドレス入力欄に「test@test.com」と入力し、パスワード入力欄にaを256文字入力し、パスワード再入力欄にaを256文字入力し、登録ボタンを押す。 DBの登録処理は実施されず、パスワード入力欄下に、「パスワードは255文字以下のみ有効です。」の赤文字と該当入力欄が赤色で囲われる。 ○ 自分 3/26 11 異常系 名前欄に「test」を入力し、メールアドレス入力欄に「test@test.com」と入力し、パスワード入力欄に「aaaaaaaa」と入力し、パスワード再入力欄に「bbbbbbbb」と入力し、登録ボタンを押す。 DBの登録処理は実施されず、パスワード入力欄下に、「パスワードは確認用と一致させてください」の赤文字と該当入力欄が赤色で囲われている。 ○ 自分 3/26 12 正常系 名前欄に「test」を入力し、メールアドレス入力欄「自分のメールアドレス」と入力し、パスワード入力欄に「aaaaaaaa」と入力し、パスワード再入力欄に「aaaaaaaa」と入力し、登録ボタンを押す。 確認メールが送信され、そのリンクをクリックするように案内する画面が表示される。実際に届いたメールをクリックしてDBに登録される。認証されたかどうかの確認は、email_verified_atに記録される。正しく登録されれば、マイページに遷移する。 ○ 自分 3/26 ログイン機能 13 異常系 メールアドレス欄、パスワード欄に何も入力せず、ログインボタンを押す。 ログイン処理は実施されず、メールアドレス入力欄に、「このフィールドを入力してください」と表示される。 ○ 自分 3/26 14 異常系 メールアドレス入力欄に「＠test.com」と入力し、パスワード欄に「aaaaaaaa」と入力し、ログインボタンを押す。 ログイン処理は実施されず、メールアドレス入力欄の下に「「＠」の前の文字列を入力してください。「＠test.com」は完全なメールアドレスではありません。」と表示される。 ○ 自分 3/26 15 正常系 メールアドレス入力欄「自分のメールアドレス」と入力し、パスワード入力欄に「aaaaaaaa」と入力し、っログインボタンを押す。 ログインが許可され、マイページ画面に遷移する。 ○ 三吉 3/26 パスワード変更機能 16 異常系 メールアドレス欄に「test@test.com」を入力し、送信ボタンを押す。 「ユーザーは存在しません。」と入力欄の下に表示される。 ○ 自分 3/26 17 異常系 メールアドレス入力欄に何も入力せず送信ボタンを押す。 メールアドレス入力欄の下に「このフィールドを入力してください」と表示される。 ○ 自分 3/26 18 異常系 メールアドレス欄に「＠test.com」を入力し、送信ボタンを押す。 メールアドレス入力欄の下に「「＠」の前の文字列を入力してください。「＠test.com」は完全なメールアドレスではありません。」と表示される。 ○ 自分 3/26 19 正常系 メールアドレス入力欄「自分のメールアドレス」と入力し、送信ボタンを押す。 確認メールが送信され、そのリンクをクリックし、パスワード更新画面に遷移する。そこで、メールアドレスは「自分のメールアドレス」、パスワードは「bbbbbbbb」、パスワード確認は「bbbbbbbb」を入力し、更新する。 ○ 自分 3/26 予約機能 20 異常系 何も入力せず予約ボタンを押す DBの登録処理はされず、日時欄に「このフィールドを入力してください」と表示される。 ○ 自分 3/26 21 異常系 日時(2021/4/4)を入力し、他は何も入力せず予約するボタンを押す。 DBの登録処理はされず、日時以外の入力部分の枠が赤くなり、入力欄の下に「～必須です。」と表示される。 ○ 自分 3/26 22 異常系 時間(9:00~10:00)を入力し、他は何も入力せず予約するボタンを押す。 DBの登録処理はされず、日時欄に「このフィールドを入力してください」と表示される。 ○ 自分 3/26 23 異常系 コーチ(ホセ・トドロギ)を入力し、他は何も入力せず予約するボタンを押す。 DBの登録処理はされず、日時欄に「このフィールドを入力してください」と表示される。 ○ 自分 3/26 24 異常系 レッスン場所(日吉ゴルフ練習場)を入力し、他は何も入力せず予約するボタンを押す。 DBの登録処理はされず、日時欄に「このフィールドを入力してください」と表示される。 ○ 自分 3/26 25 異常系 日時(2021/4/4)、時間(9:00~10:00)を入力し、他は何も入力せず予約するボタンを押す。 DBの登録処理はされず、日時、時間以外の入力部分の枠が赤くなり、入力欄の下に「～は必須です。」と表示される。 ○ 自分 3/26 26 異常系 日時(2021/4/4)、コーチ(ホセ・トドロギ)を入力し、他は何も入力せず予約するボタンを押す。 DBの登録処理はされず、日時、コーチ以外の入力部分の枠が赤くなり、入力欄の下に「～は必須です。」と表示される。 ○ 自分 3/26 27 異常系 日時(2021/4/4)、レッスン場所(日吉ゴルフ練習場)を入力し、他は何も入力せず予約するボタンを押す。 DBの登録処理はされず、日時、レッスン場所以外の入力部分の枠が赤くなり、入力欄の下に「～は必須です。」と表示される。 ○ 自分 3/26 28 異常系 時間(9:00~10:00)、コーチ(ホセ・トドロギ)を入力し、他は何も入力せず予約するボタンを押す。 DBの登録処理はされず、、日時欄に「このフィールドを入力してください」と表示される。 ○ 自分 3/26 29 異常系 時間(9:00~10:00)、レッスン場所(日吉ゴルフ練習場)を入力し、他は何も入力せず予約するボタンを押す。 DBの登録処理はされず、日時欄に「このフィールドを入力してください」と表示される。 ○ 自分 3/26 30 異常系 コーチ(ホセ・トドロギ)、レッスン場所(日吉ゴルフ練習場)を入力し、他は何も入力せず予約するボタンを押す。 DBの登録処理はされず、日時欄に「このフィールドを入力してください」と表示される。 ○ 自分 3/26 31 異常系 日時(2021/4/4)、時間(9:00~10:00)、コーチ(ホセ・トドロギ)を入力し、他は何も入力せず予約するボタンを押す。 DBの登録処理はされず、日時、時間、コーチ以外の入力部分の枠が赤くなり、入力欄の下に「レッスン場所は必須です。」と表示される。 ○ 自分 3/26 32 異常系 日時(2021/4/4)、時間(9:00~10:00)、レッスン場所(日吉ゴルフ練習場)を入力し、他は何も入力せず予約するボタンを押す。 DBの登録処理はされず、日時、時間、レッスン場所以外の入力部分の枠が赤くなり、入力欄の下に「コーチは必須です。」と表示される。 ○ 自分 3/26 33 異常系 時間(9:00~10:00)、コーチ(ホセ・トドロギ)、レッスン場所(日吉ゴルフ練習場)を入力し、他は何も入力せず予約するボタンを押す。 DBの登録処理はされず、日時欄に「このフィールドを入力してください」と表示される。 ○ 自分 3/26 34 正常系 日時(2021/4/4)、時間(9:00~10:00)、コーチ(ホセ・トドロギ)、レッスン場所(日吉ゴルフ練習場)を入力し、予約するボタンを押す。 DBの登録処理が行われ、reservationテーブルに予約した内容が表示される。 ○ 自分 3/26 結合テストの実施（30分） 機能名 No. 分類 テスト手順 想定結果 結果1 担当者1 実施日1 予約機能 1 正常系 日時(2021/4/4)、時間(9:00~10:00)、コーチ(ホセ・トドロギ)、レッスン場所(日吉ゴルフ練習場)を入力し、予約するボタンを押す。 DBの登録処理が行われ、マイページに遷移しマイページに先ほど予約した内容が表示される。 ○ 自分 3/26 2 正常系 マイページの予約一覧にあるGoogleMapのリンクをクリックし、日吉ゴルフ練習場、ゴルフ・コンフォート、バーディーゴルフ、それぞれ正しい情報に遷移する。 日吉ゴルフ練習場(名古屋市中村区岩塚神明西)、ゴルフ・コンフォート(名古屋市天白区中砂町549)、バーディーゴルフ(愛西市落合町上河原1510-1)の正しい地図情報が表示される。 ○ 自分 3/26 参考URL： https://xera.jp/entry/iphone-android-share https://www.atmarkit.co.jp/ait/articles/0607/22/news014.html https://qiita.com/unsoluble_sugar/items/f39bb5afae60f51ea7a4 5、本番デプロイ Xサーバーにデプロイする。（60分） 参考URL： https://naoya-ono.com/blog/deploy-laravel-xserver/ https://www.xserver.ne.jp/manual/man_server_htaccess.php バリュードメインでドメインを購入し、ネームサーバを設定。 Githubにソースコードをアップ。 各種設定をする。 6、テスト(本番) 本番テスト（30分） 本番環境できちんと動作するか確認する。 機能名 No. 分類 テスト手順 想定結果 結果1 担当者1 実施日1 結果2 担当者2 実施日2 新規登録機能 1 正常系 名前欄に「test」、メールアドレス入力欄「自分のメールアドレス」と入力し、パスワード入力欄に「aaaaaaaa」と入力し、パスワード再入力欄に「aaaaaaaa」と入力し、登録ボタンを押す。 確認メールが送信され、そのリンクをクリックするように案内する画面が表示される。実際に届いたメールをクリックしてDBに登録される。認証されたかどうかの確認は、email_verified_atに記録される。正しく登録されれば、マイページに遷移する。 × 自分 3/29 ○ 自分 3/29 ログイン機能 2 正常系 メールアドレス入力欄「自分のメールアドレス」と入力し、パスワード入力欄に「aaaaaaaa」と入力し、ログインボタンを押す。 ログインが許可され、マイページ画面に遷移する。 ○ 自分 3/29 パスワード変更機能 3 正常系 メールアドレス入力欄「自分のメールアドレス」と入力し、送信ボタンを押す。 確認メールが送信され、そのリンクをクリックし、パスワード更新画面に遷移する。そこで、「bbbbbbbb」を入力し、更新する。 ○ 自分 3/29 予約機能 4 正常系 日時(2021/4/4)、時間(9:00~10:00)、コーチ(ホセ・トドロギ)、レッスン場所(日吉ゴルフ練習場)を入力し、予約するボタンを押す。 DBの登録処理が行われ、マイページに遷移しマイページに先ほど予約した内容が表示される。 ○ 自分 3/29 5 正常系 マイページの予約一覧にあるGoogleMapのリンクをクリックし、日吉ゴルフ練習場、ゴルフ・コンフォート、バーディーゴルフ、それぞれ正しい情報に遷移する。 日吉ゴルフ練習場(名古屋市中村区岩塚神明西)、ゴルフ・コンフォート(名古屋市天白区中砂町549)、バーディーゴルフ(愛西市落合町上河原1510-1)の正しい地図情報が表示される。 ○ 自分 3/29 参考URL： https://qiita.com/takuma-jpn/items/f4e23bed778b17b52e36 7、まとめ 全体として1725分。1人日を8時間とした場合は、3.6人日での完成でした。 現状の予約システムはユーザーに日程を確認してもらって予約する仕組みになっているため、これをシステム側で制御して間違いがないように予約ができるようにしてみたい。また、1人3コマまで予約できるようにしたり、レッスン日が過ぎたら自動で日程をマイページ側から消したり、予約の変更機能だったりをつけてより本格的にしてみたい。

今日の活動 Progate学習 フッターを作ろう！　　＞完 コンテンツを作ろう！　＞完 お問い合わせフォームを作ろう！　＞完 HTML & CSS中級編　＞未 所感 ようやくHTML&CSS初級編終了。 今回の学習を終えて一番の収穫は「プログラミングは楽しい、面白い」と思えたこと。 初歩的なことで理解に苦しんだり、ミスコードの原因が分からずに途方に暮れることも多いが、解決できた瞬間の喜びと達成感は非常に心地が良い。 学習に沿ったコードではあるが、0⇒1で出来上がっていく感動は初めての感覚で、今後の自分自身の成長が楽しみにもなる。 エンジニアを志したことが正解だったと証明できるよう、学習を続けていきたい。 一言 ミスコードの原因がほとんど終了タグの書き位置ミス、、、

ポートフォリオとして制作したゴルフレッスンの案内サイトの制作過程をまとめました。 尚、ポートフォリオとGitHubは下記でございます。 ポートフォリオ「Golf Champ」URL https://takayuki007.github.io/golfChamp/index.html GitHub https://github.com/takayuki007/golfChamp 1、要件概要 導入 HTML、CSSを使って複数ページのサイトを作ってみます。1ページではなく複数ページを作ることによりCSSの設計だったり、作業をより楽にするための方法を研究したいと思います。 そこで ゴルフレッスンのサイトを作ろうと思います。 同じようなところはあるか？ 参考にしたサイトは下記です。 ZERO FUSION https://www.zero-fusion.com/ 2、サービス概要 ゴルフレッスンを受けるための方法、このサービスの特徴と受ける理由が書かれている。 要件定義(5分) PC、タブレット、スマホでそれぞれ表示できるようにする。 機能一覧(5分) ヘッダーのナビメニューから各ページに遷移できるようにする。 フッターのナビメニューから各ページに遷移できるようにする。 ページ構成(5分) TOPページ スクールの特徴ページ レッスン内容&料金ページ コーチ紹介ページ レッスン場所ページ スケジュールページ 画面設計&デザイン作成(708分) PCデザイン TOP(210分) スクールの特徴(80分) レッスン内容&料金(50分) コーチ紹介(20分) レッスン場所(55分) スケジュール(90分) タブレットデザイン TOP(30分) スクールの特徴(30分) レッスン内容&料金(15分) コーチ紹介(3分) レッスン場所(10分) スケジュール(10分) スマホデザイン TOP(30分) スクールの特徴(30分) レッスン内容&料金(15分) コーチ紹介(10分) レッスン場所(10分) スケジュール(10分) 苦労したこと スケジュールのテーブルデザインを作るのは苦労しました。特にスマホの表示部分。間隔が狭くなってしまい、見にくくなることが予想されました。これは後ほど実装する段階で問題になりそうなので、この段階でスケジュール部分のみ画像表示するなどの対策を想定しておいた方が良いだろうと思いました。 クラス設計(60分) 複数ページの作成のため、使い回しやすいようにFLOCCS設計を採用。 全体 app Foundation部分 reset、variable Layout部分 l-header、l-main、l-footer、l-bg-white、l-bg-lightGreen Object部分 Component部分 c-about-area、c-about-img、c-btn、c-burger-line、c-burger-link、c-burger-ul、c-card-img、c-card-section、c-card、c-coach-area、c-coach-img、c-footer-imgArea、c-footer-li、c-footer-link、c-footer-logo、c-footer-ul、c-header-li、c-header-link、c-header-logo、c-header-ul、c-heading、c-img-area、c-introduction、c-lesson-area、c-lesson-img、c-link、c-location-area、c-location-img、c-main-pic、c-menu-cover、c-menu-torigger、c-reason-img、c-reason-section、c-reason、c-schedule-td、c-schedule-th、c-schedule-tr、c-scheduleText-area、c-school-area、c-shedule-table、c-text-area、c-text、c-textSection-area、c-title、c-topicPath-area、c-topicPath Project部分 p-footer-underline、p-heading-square、p-text-square Utility部分 u-blue、u-golf-ball、u-green、u-l-padding、u-link、u-margin-sp-top、u-margin-top、u-margin、u-red、u-schedule-text、u-sp-margin-bottom、u-sp-schedule-text-space、u-text-center、u-underline 苦労したこと UtilityにしようかComponentにしようか迷いました。追加する際に汎用的に使われるかどうかのジャッジが苦労しました。 環境構築(15分) CSSはSASS(node-sassでコンパイル)を使用。 ターミナルからnode-sassをインストールし、package.jsonに記載。 watchコマンドでscssファイルに変化があった場合は勝手にコンパイルされるようにするため、package.jsonにコマンドを追加。 3、実装 まずはHTMLを作成。 TOPページ(60分) スクールの特徴(30分) レッスン内容&料金(15分) コーチ紹介(10分) レッスン場所(15分) スケジュール(70分) 意識したこと タブレットやスマホにも対応するので、あらゆるところにスタイルを当てられるようにclassを設定しました。また、余白は可読性にも影響するので、余白を当てやすいようにレイアウトの塊ごとにdivで囲いました。 次にCSSを作成。 PC画面 TOPページ(180分) スクールの特徴ページ(105分) レッスン内容&料金(40分) コーチ紹介(30分) レッスン場所(30分) スケジュール(80分) タブレット画面 TOPページ(30分)＋ハンバーガーメニュー(230分) ヘッダーメニューをハンバーガーメニューにする。そちらの方が可読性が上がると判断。 苦労したこと ハンバーガーメニューは苦労しました。特に苦労したのが最初の画面でメニュー画面を表示しないように設置することです。試行錯誤して今の状態に落ち着きました。 参考URL： スクールの特徴ページ(30分) レッスン内容&料金(20分) コーチ紹介(10分) レッスン場所(15分) スケジュール(60分) スマホ画面 TOPページ(60分) スクールの特徴ページ(40分) 特徴のカード部分を縦に積むようにflexを変更。 意識したこと HTMLの構造は変えたくなかったので、flexでorderを使用し画像とテキストの順番を調整しました。もしorderで順番を調整していなかったら、画像→見出し→テキストの順番が見出し→テキスト→画像の順番になっていました。 参考URL： https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items https://qiita.com/YJ2222/items/cd6eebba95350a3b64a5 レッスン内容&料金ページ(40分) 意識したこと HTMLの構造は変えたくなかったので、flexでorderを使用し画像とテキストの順番を調整しました。もしorderで順番を調整していなかったら、画像→見出し→テキストの順番が見出し→テキスト→画像の順番になっていました。 コーチ紹介(5分) レッスン場所(5分) スケジュール(45分) 苦労したこと テーブルをスマホサイズにしたらテキストや余白が小さすぎて見にくくなってしまった。予想通りこれは画像などで代用した方が良いと思いました。ただし、今回の場合は、「こういったテーブルもレスポンシブにできますよ」ということをアピールするためにこのままにしておこうと思います。 4、テスト 表示崩れや見にくい部分がないかのテストを行う。テスト値は、スマホがiPhone X(375px)の横幅を基準、タブレットはiPad(768px)の横幅を基準とする。 テスト(315分) PC画面、タブレット画面、スマホ画面とそれぞれ確認を行う。 5、本番デプロイ 本来ならここで本番環境にデプロイをしますが、今回はGithub pagesを利用して公開することにしました。 Github pagesにデプロイ(10分) Githubにプッシュする。 Githubの設定からGithub pagesの設定をし、公開。 6、まとめ 全体として3081分。1人日を8時間とした場合は、6.5人日での完成でした。 ハンバーガーメニューと画像のリサイズに時間がかかりました。ハンバーガーメニューはほとんどのサイトで採用されている標準的なスタイルなので、もっと早く実装できるように練習したいです。

どうも7noteです。行数が違っても高さを揃える方法について 行数が違うけど横並びにするようなレイアウトってうまく作らないとブサイクになってしまいます。 これを背景色やborderありでもきれいに並べる方法を紹介していきます。 フレックスボックスを使うのですが、フレックスボックス特有の注意点もあるので最後まで読んでくださいね！ ・[ 失敗 ] display: inline-block;で並べた場合。 ・[ 失敗 ] display: inline-block;で並べて高さも指定した場合。 ・[ 成功 ] display: flex;を使えば簡単！ 行数が違うコンテンツの横並びをフレックスボックスで対応する index.html <ul class="box"> <li>1行の文。</li> <li>ここには2行くらいの文章。</li> <li>ここには3行くらいのながーーーーい文章が入りますよ。</li> </ul> style.css .box { display: flex; /* 子要素をフレックスボックスで横並びにする */ justify-content: space-around; /* 等間隔で左右に並べる */ } .box li { width: 150px; /* 幅を適度な大きさに指定 */ background: #ddd; /* 背景色をグレーに指定 */ border: 1px solid #000; /* borderを引く */ } 結果 ※ 等間隔で並べているので、親要素が大きすぎると広がり過ぎてしまうので、そんなときは以下の対策がベストだと思います。 ・親要素に幅を指定する ・子要素の幅を30%などにして可変にする フレックスボックスを使うときの注意 フレックスボックスには上下位置を指定するプロパティ（align-items）が存在します。これを指定してしまうと、高さが揃わなくなってしまうので指定しないように注意！ ・ 要素を上下中央にしようとした場合、高さが揃わなくなる style.css .box { /* 以下の１行を追加してしまった場合 */ align-items: center; } こういう使い方をしたいときはもちろん使ってOK! まとめ フレックスボックスの基礎はプロゲートとかでも学べるので、そもそもまだフレックスボックスやったことないよという方は、プロゲートなどで基本をインプットすることをオススメします！ そしてこのようなフレックスボックスの具体的な使い方や注意点などはプロゲートだけで学習するには難しく、実際にやってみないとわからないことも多いので、参考サイトで調べたり記事を見て情報を得るか、先輩となるような人に教えてもらうしかないのでどんどんいろんなことに挑戦してみるのがいいと思います！ おそまつ！ ~ Qiitaで毎日投稿中!! ~ 【初心者向け】WEB制作のちょいテク詰め合わせ

ポートフォリオとして制作したカード会社のLPの制作過程をまとめました。 尚、ポートフォリオとGitHubは下記でございます。 ポートフォリオ「Roman Card」URL https://takayuki007.github.io/RomanCard/ GitHub https://github.com/takayuki007/RomanCard 1、要件定義 導入 プログラミングの基礎であるHTML、CSS、jQueryを用いて販売のための1ページサイトであるLPを作成します。 そこで 紹介する商品は私が興味のあるクレジットカードにします。私はクレジットカードの特典やポイントの還元率などの違いを比較しながら紹介するサイトやYoutubeを見るのが好きなので、それを形にしようと思います。 同じようなところはあるか？ 今回作成するLPは高級感のあるクレジットカードをイメージしています。したがってライバル商品となるカードのイメージは、アメリカンエクスプレスのプラチナカードやマスターカードブランドのラグジュアリーカードとします。 アメリカンエクスプレスプラチナカード https://www.americanexpress.com/jp/credit-cards/platinum-card/ ラグジュアリーカード https://www.luxurycard.co.jp/blackcard 2、サービス概要 高級感を感じさせるイメージで顧客メリットもしっかり追求しているものを作りたい。 要件定義(5分) PC、タブレット、スマホのサイズでレスポンシブとする。 ページ構成(5分) TOPページ 画面設計&デザイン作成(310分) デザインはPCとタブレット、スマホの3つを用意しました。 PCデザインに240分 タブレットデザインに30分 スマホデザインに40分 かかりました。 意識したこと 高級感を出すために白と黒を基調とし、フォントを明朝とした。高級感のあるデザインは色とフォントが白と黒と明朝が使われていることが多いので(時計がデザインされたポスターなど)、取り入れました。 苦労したこと レイアウトを整理しユーザーに見やすくなるような配置には苦労しました。PCだけでなく、今ではスマホでも見るので、その部分を意識した配置は特に難しかったです。そのため、自分のイメージだけでなくピンタレストなどを参考に多くのLPやサイトを見て良い部分は取り入れました。特に参考にしたのが下記のLPです。 ReaderStore https://ebookstore.sony.jp/introduction/ 環境構築(15分) CSSはSASS(node-sassでコンパイル)を使用し、JavaScriptはjQuery(CDNを利用)を使用しました。 ターミナルからnode-sassをインストールし、package.jsonに記載されるようにしました。 watchコマンドでscssファイルに変化があった場合は勝手にコンパイルされるようにするため、package.jsonにコマンドを追加しました。 3、実装 まずはHTMLのみ実装。CSSはHTMLが全て書き終わってから実装することにしました。理由は、CSSで1番時間を取るのが余白の調整、つまり見え方の調整です。これは全体が完成しないと調整できないことなので、最後にCSSを実装した方が効率が良いことが多いです。そのため、CSSは最後としました。 HTML(80分) ヘッダーからフッターまでHTMLを実装。 意識したこと 手直しをするのが1番時間がかかってしまうので、あらかじめデザインからCSSを当てるべきところ、flexを使ってレイアウトを並列にするところには細かくclassを設定し、自在にスタイルを当てられるようにしました。また、余白や行間などの部分が見やすさに直結するため、ある程度のまとまりをdivで囲うなどして、レイアウトを整えやすいようにしました。 CSS(385分) PCのスタイルを当てるのに195分 タブレットのスタイルを当てるのに90分 スマホのスタイルを当てるのに60分 それぞれかかりました。 苦労したこと 見出しとボタンの位置をデバイスにあわせて中央に配置するようにしたことが苦労しました。今ではタブレットやスマホのサイズはたくさんあり全てのデバイスで綺麗に見られるようにするのは、物理的に不可能です。そのため、もしこれがクライアントワークなら必ず標準デバイスや対応デバイスの範囲を決めるようにリードし、クライアントに納得してもらうことが重要だと感じました。ここを蔑ろにすると必ずトラブルになることが予想されました。 参考URL： jQuery(40分) 動きのあるサイトにもしたかったので、ここでは他のLPやホームページによく見られるスクロールすると表示部分がフェードインしてくる動きを追加しました。 この動きはViewの階層で区切られているところをまとめて表示させるようにしました。 タブレットとスマホでは、mainView以外表示されないようになってしまうので、不良サイトと判断されかねないようにこのフェードインの動きは行わないようにしました。 4、テスト 表示崩れや見にくい部分がないかのテストを行いました。そしてPCの画面のみjQueryが正しく動作しているかもチェックしました。テスト値は、スマホがiPhone X(375px)の横幅を基準、タブレットはiPad(768px)の横幅を基準としました。 テスト(45分) PC画面 PC画面を中心にHTMLを組んだり、CSSを当てたので崩れているところはなし。また、jQueryも正しく動作していた。ここは修正の必要がありませんでした。 タブレット画面 「空港ラウンジへのアクセス」の見出しがカードの横幅いっぱいに広がり少し窮屈感があったので、これをゆとりを持たせるためにタブレットの画面の時だけこのテキストを改行しました。 上記の改行により下のテキスト部分が他のカードのテキスト部分と平行に揃わなくなってしまったので、このカードの見出し部分の下の余白を狭くすることによって、平行に揃えました。 特典部分の4つのテキストの行間が狭く窮屈に感じるので、line-height:1.5emを設定し行間を広げました。 参考URL： スマホ画面 メインコピーの「非日常をあなたへ」とボタンが中心からずれていたので、中央に寄せました。 firstViewのタイトルである「全ての支払いをこの1枚で」というテキストが左寄せだったものが不自然に感じるので、スマホでの表示の際は中央に寄せるようにしました。 5、本番デプロイ 本来ならここで本番環境にデプロイをしますが、今回はGithub pagesを利用して公開することにしました。 Github pagesにデプロイ(10分) Githubにプッシュする。 Githubの設定からGithub pagesの設定をし、公開。 6、まとめ 全体として895分。1人日を8時間とした場合は、2人日での完成でした。 画面設計とデザインは設計の部分なので時間がかかるのはしょうがないが、実装の部分ではもう少し、スピーディにできるようになりたいと思いました。目標は1人日で作業できるようになりたいです。

2021/04/05 簡単な紹介 1988生まれの32歳。2020年にサイバー大学(ソフトバンク)を卒業。 AIの知識を深めるべく受講を決意 なぜアイデミープレミアムプランにしたのか 完全オンラインで全てを完結できる 社会人+田舎に住んでおり完全オンラインはマストで、完全オンラインは受講開始当時結構レアでした。(コロナ前) 完全オンラインの破壊力を試してみて下さい。 経済産業省第四次産業革命スキル習得認定講座 ちゃんと履修し卒業すれば半額は国が補助してくれる(最大70%の補助 条件あり) 今がチャンスと思い入校 画像認識が学べること 画像認識専用のコースがあり、さらに料金は同じでデータサイエンスやその他のコースも学べる 伝えたいこと 機械学習を学びたいが田舎に住んでいる、社会人だから時間がないという方は読んでください アイデミーさんでの体験談・学んだこと 技術的な内容にはあまり触れません アイデミーでの学習振り返り 私はアイデミープレミアムプランの6ヶ月コースを選択しました。(最短は3ヶ月) 1ヶ月目 環境設定-Pythonや機械学習を自分のパソコンでするための設定をしていきます。 ここでも結構つまづきやすいのですが、もちろんここからサポートしてくれます。 Pythonも基礎から習得できるようにカリキュラムが設定されていたので安心して受講できました。 Pythonの使い方を履修したら順次ライブラリを扱えるようになるためのクラスをこなしていきます。 PythonのライブラリNumpyの習得。こちらも別途カリキュラムが設定されています。個別のライブラリにスポットを当てていくのは珍しいなと感じましたがとても大事なライブラリですので素晴らしいですよね。 PythonのライブラリPandasの習得。 PythonのライブラリMatplotlibの習得。 2ヶ月目 ここからAIらしい授業内容になっていきます。データクレンジング手法を習得。 機械学習概論を履修。 ついに人工知能の実装のフェーズです。教師あり学習を習得。 スクレイピングを実装。 3ヶ月目 ディープラーニング基礎を履修。 CNNを実装 4ヶ月目 アイデミーのウェブサイトで紹介されていた男女認識を実装。 HTML/CSSの使い方を履修。WEBアプリ作成時に使用するため。 フレームワークFlaskを履修。 MNISTを使い手書き文字認識アプリの作成。今まで学んできた内容をフルに使いアプリの作成をしていきます。 5ヶ月目 最後に自分自身でアプリを作成。 コマンドラインの使い方を習得。 Gitの使い方を履修。 デプロイの仕方を履修。ついに自分で作ったアプリを全世界に公開します。(感動) 6ヶ月目 他のコースも無料で受講できるのでデータ分析講座を履修させてもらいました。 ※他にも自然言語やAIマーケティングなどもあります。 作成したもの アイデミーさんの授業の中では実装することができるが目的になっていると思います。 ですのでそれぞれの授業の中ではAIの認識精度を上げる方法は学べても実際は試しません。 (すごい時間がかかってしまうため) そこで今まで作ったアプリを高性能にしたらどうなるのかと気になっていたので既存のMNIST手書き文字認識アプリを高性能にしてみました。 ※機械学習では精度が良ければ良い(過学習)というものではありません 一度試していただけたら幸いです。 今後の活用 最近ではDXやAIなど避けては通れませんよね。でも学校ではほとんど教えてくれなかったという世代の方におすすめです。今後の活用で考えているのはドローンでの配送や倉庫の自動化です。日本では人口の減少は確実です。アイデミーさんでは実装を目的としたカリキュラムですので現場で使う目的にはあっていると思います。その代わりアルゴリズムの中身がどのような仕組みで動いているかには注力していません。知っていても損はしませんが現場ではあまり必要ないかもしれませんね。 おわりに 注意：ここまでアイデミーさんの良いとこばかり書いてきたような気がしますが私は一人の受講者でアイデミーさんとは利害関係にありません。 というのは講師の方々のサポートがとても良かったです。Slack上で質疑応答をしていく感じですが順次質問に対応していく感じなので即座に返信っていう感じではありません。しかし、どんな簡単な内容でも必ず返信していただけて親切に答えてくれます。(恐縮な質問を何回もしました)　受講中は様々なエラーに直面します。そんな中とっても頼りになるのが講師の方々です。こういったスクールでは1番肝心な部分かもしれませんね。

※ ファイル選択ボタンの「選択されていません」を消したいとか https://into-the-program.com/customize-input-type-file/ http://fanblogs.jp/to70/archive/262/0

今回は配列の繰り返し処理のforEach文について学習していきます。 まず、一般的使わえる繰り返し分は以下になります。 index.js <script> 'use strict' const cities = ["東京", "大宮", "横浜"] for (let i=0; i<cities.length; i++) { document.write(city[i]); } </script> *length　▶主に文字列の長さや配列の要素数を取得することができるプロパティになります。 この記述でもいいのですがもう少し簡単に書くことができます。 index.js cities.forEach((city,index) => { document.write(`都市${index}: ${city}`); }); forEachの引数には、cityとindexを入れました。 そして下の方でそれぞれを呼び出してもらいます。 要素の数がなくなるまで、繰り返し処理することができます?

はじめに 今回はスワイプ機能の実装の際に使った、transformプロパティについてまとめていきます。 transformプロパティとは 与えられた要素を回転、拡大縮小、傾斜、移動することできます。 今回は要素の「移動」についてまとめていきます。 translate 要素の表示位置を移動させる際に使用します。 種類 translate(X方向の距離, Y方向の距離) 　（translate()関数では、X方向とY方向の距離で2D移動を指定します。） translateX(X方向の距離) translateY(Y方向の距離) translateZ()関数にはパーセンテージ値を指定することができない translate3d(X方向の距離, Y方向の距離, Z方向の距離) 　（X方向とY方向とZ方向の距離で3D移動を指定します。） 初期値・適用対象・値の継承 初期値：none 適用対象：ブロックレベル要素、インライン要素 値の継承：しない 構文 transform: translate(12px, 50%); transform: translateX(2em); transform: translateY(3in); transform: translateZ(2px); transform: translate3d(12px, 50%, 3em); （※数値と単位は変更可） 参考記事 http://www.htmq.com/css3/transform_translate.shtml https://developer.mozilla.org/ja/docs/Web/CSS/transform

今回は、JSで配列を作っていきます！ 配列 index.js <body> <script> 'use strict' const fruits = ["バナナ", "りんご", "みかん"] document.write(fruits); </script> </body> 定数にフルーツを代入していきます。今回は、バナナとりんごとみかんを並べました。 ブラウザで表示すると以下のようになります。 取り出す では、この配列から１つ取り出して行きたいと思います。 配列は、左から順番に0番目と考えます。 今回は、りんごを取り出したいと思います。 index.js <script> 'use strict' const fruits = ["バナナ", "りんご", "みかん"] document.write(fruits[1]); </script> 今回のりんごは1番目の配列になります。 追加、削除 次に、この配列に追加と削除をしていきたいと思います。 index.js <script> 'use strict' const fruits = ["バナナ", "りんご", "みかん"] // document.write(fruit); // document.write(fruit[1]); fruits.pop(); fruits.push("もも"); document.write(fruits); </script> popで末尾のみかんを削除して、pushで末尾にももを追加しました。 index.js const fruits = ["バナナ", "りんご", "みかん"] fruits.shift(); fruits.unshift("マンゴー") document.write(fruits); 文頭のバナナを削除し、マンゴーを追加しました。 *pushとunshifyは一度に複数の要素を追加することができます。 途中の要素を追加、削除 削除数よりも多い数を追加する場合に使います。 index.js <script> 'use strict' const fruits = ["バナナ", "りんご", "みかん"] fruits.shift(); fruits.unshift("マンゴー"); fruits.splice(1,2,"さくらんぼ","ぶどう"); document.write(fruits); </script> 以下のようになりました！！

LPやHPが寂しい時にボタンを大きくするって考えがちですよね。 それの良し悪しは置いといて、マウスホバー時にCSSでボタンを大きくする方法を見ていきましょう。 CSSでボタンを大きくする まずはボタンのHTMLです。 index.html <button class="btn">ボタン</button> 次にcssです。 styel.css .btn{ /*btnを大きくする処理*/ transition: all 0.3s ease; /*btnのcss*/ width: 200px; height: 60px; background: aqua; color: black; border: none; } .btn:hover{ /*btnを大きくする処理*/ transform: scale(1.15,1.15); /*btnのcss*/ cursor: pointer; } 以上がマウスホバー時にボタンを大きくする方法です。 ブラウザによってはスタイルが当たらない場合があるので、その際はブラウザごとに必要なwebkitなどの処理を追加してください。

今日の予定 Progate フッターを作ろう！ コンテンツを作ろう！ お問い合わせフォームを作ろう！ HTML & CSS中級編