ポートフォリオとして制作したゴルフスクールの予約システムの制作過程をまとめました。 尚、ポートフォリオと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コマまで予約できるようにしたり、レッスン日が過ぎたら自動で日程をマイページ側から消したり、予約の変更機能だったりをつけてより本格的にしてみたい。

はじめに WEBアプリのモバイル化に成功した！...なのになぜだ！？全然インストールされない！！ 最近まさにそんな経験をしたんですが、ユーザの立場でよくよく考えてみると、アプリのインストールに至るにはいくつか障壁があるということに気が付きました。 リリースされたアプリの存在にそもそも気が付かない アプリのインストールがめんどくさい(ストアいってアプリ名検索して...など) なるべく障壁を低くしてユーザにアプリをインストールしてもらえる方法なんてあるのかよ...と頭を抱えたのですが、少しググったら?な解決策をみつけてしまいました。 それがスマートバナーです。 これ↓ 誰でも1回はみたことあると思います。 WEB版のアプリをスマホブラウザで開くと上部に表示されるアレですね。 というわけで今回はiOS, Androidでスマートバナーを出す方法をまとめました。 「WEB版からアプリへの導線を簡単につくりたい」 「iOSとAndroidの両方で導線をつくりたい」 という方に役立つ記事になると思います。 Safari(iOS) Safari(iOS)版のスマートバナーは、なんとAppleが公式で機能をだしています。 しかも使い方は超簡単。 以下のmetaタグをスマートバナーを表示したい画面のheadタグに埋め込むだけです。 <!-- Safari SmartBanner --> <meta name="apple-itunes-app" content="app-id=[app-id]"> appleのdeveloperアカウントで、自分のアプリの9-10桁のapp-idを確認することができるので、そこからコピペして利用します。 Apple公式スマートバナーのメリットとデメリットは以下になります。 メリット アプリのインストール有無によって表示が変わる(入手 - App Store or インストール済) 表示によってタッチしたときの導線が変わる(インストール済の場合はアプリを開く) app-idを指定するだけでアイコンやアプリ名を自動入力してくれる デメリット Androidでは使えない シミュレータには表示されないので実機での動作確認が必要 Android Androidの場合、iOSと異なり公式のスマートバナーは存在しません。 そのため、サードパーティのライブラリを使用する必要があります。 今回はこちらのライブラリを使用しました。 肝心の使い方なのですが、Safafiのときと同様にmetaタグをheadタグに埋め込むだけです。 <!-- Android SmartBanner --> <meta name="smartbanner:title" content=[アプリ名]> <meta name="smartbanner:author" content=[会社名]> <meta name="smartbanner:price" content=[アプリの値段]> <meta name="smartbanner:price-suffix-google" content=" - Google Play"> <!-- Android用suffix --> <meta name="smartbanner:icon-google" content=[アイコン画像のパス]> <meta name="smartbanner:button" content="開く"> <!-- ボタンの表示名 --> <meta name="smartbanner:button-url-google" content=[Google PlayのアプリURL]> <meta name="smartbanner:enabled-platforms" content="android"> <!-- スマートバナーを利用するOSの指定 --> <meta name="smartbanner:close-label" content="Close"> <link rel="stylesheet" href="css/smartbanner.min.css"> <script src="js/smartbanner.min.js"></script> これでスマートバナーが以下のように表示されます。 サードパーティのスマートバナーのメリットとデメリットは以下になります。 メリット 表示する文をカスタマイズすることができる AndroidとSafariの両方で使える デメリット インストール有無で表示ステータスを変えられない インストール済の場合でもアプリを直接開けない(ストアへの導線だけ) おわりに スマートバナーの導入を検討されている方は、こちらの記事を参考にしていただければ幸いです。

今日の活動 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制作のちょいテク詰め合わせ

HTMLで表現できるリストは、 箇条書きリスト、順序付きリスト、項目説明リストの３種類になります。 順を追って説明させていただきます。 1箇条書きリスト ulタグで全体を囲います。そこから子要素であるliタグで箇条書きにしたいものを 囲むと、黒点が文字の先頭について箇条書きとなります。 2順序つきリスト olタグで全体を囲います。そこから子要素であるliタグで連番にしたいものを囲います。 すると、文字の先頭に1,2,3とついて順番を表現できます。 3項目説明リスト dlタグで全体を囲います。そして、子要素として項目の方はdtタグで囲い、説明の方はddタグを使用します。これによりQ＆Aのような形にすることもできます。

ポートフォリオとして制作したカード会社の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

はじめに こんにちは。 先日、文字コードをShift-JISで指定したHTMLファイルをブラウザで開いたところ、文字化けを起こしてしまいました。ここではその失敗談と解決策を書き留めます。 HTMLで文字コードを指定する方法 HTMLで文字コードを指定する方法は簡単。HTMLファイルのhead開始タグのあとに、文字コードを指定するための一文を書き加えます。たとえばutf-8で指定するならこのように、 <meta charset = "utf-8"> meta要素でcharset属性を使用することで、文字コードを指定できます。 実際に以下のHTMLファイル("makuranosousi.html")をブラウザで開いてみます。 makuranosousi.html <!DOCTYPE html> <html lang = "ja"> <head> <meta charset = "utf-8"> <title>枕草子</title> </head> <body> <p>春はあけぼの。やうやう白くなりゆく、山ぎはすこしあかりて、むらさきだちたる雲のほそくたなびきたる。</p> <p>夏は...</p> </body> </html> ブラウザで開くと、 しっかりと文字が表示されていることが確認できます。 文字化けの発生 つづいて、先程文字コードをutf-8で指定していたところを、Shift-JISに変えてブラウザで開いてみます。 <meta charset = "Shift-JIS"> これをブラウザで開いてみたところ、 見事に文字化けが発生してしまいました。 なぜShift-JISで文字コードをしっかりと指定したのに、文字化けしてしまったのでしょうか。 原因と解決策 この文字化けの原因は、 ファイルを保存する際に使用した文字コードと、ブラウザがファイルを読み込むために指定した文字コードが異なっていたことにありました。 私がmakuranosousi.htmlのファイルをutf-8で保存してしまっていたので、ブラウザで開くと文字化けが起きたというわけです。 これを解決するためには、 makuranosousi.htmlのファイルを文字コードShift-JISを使用して保存します。ファイル保存に使用する文字コードは、テキストエディタの設定から変更することができます。 ちなみにVScodeやAtomではファイルを開いた際に、右下のバーに使用している文字コードが表示されるので、そこをクリックして変更することができます。 お使いのテキストエディタの機能で確認してみてください。エディタでShift-JISに変更して保存したあと、再度ブラウザで読み込んでみると文字化けが解消されたことが確認できるはずです。 最近の文字コードではutf-8が主流なので、基本的にutf-8を選択しておくことをおすすめします。みなさんもファイルを保存する際の文字コードには気をつけましょう。 「HTMLファイルを保存する際に使用する文字コード」と、 「HTMLファイル内で指定する文字コード」 を一致させる。

今回はKintone Portal Designer でサンプルのHTMLの文言変更＆コピペするだけでOK!なカスタマイズをしてみたいと思います。 Kintone Portal Designer の準備 以下リンク先を上から順番にインストールして、「テンプレートを読み込む」のところで「basic-1column」を選択してください。 インポートするとこんなコードが表示されます。 HTMLの構成 HTMLのコードと、画面はこんなふうに対応しています。 セクション 3つのセクション（Apps、Spaces、Heading1 ）があります。 セクションはsectionタグで囲まれている部分です。 <section class="basic-container"> ～～セクションの中身～～ </section> セクションのタイトルは<h3 class="basic-heading1">Apps</h3> のAppsの部分です <section class="basic-container"> <h3 class="basic-heading1">Apps</h3>　← Appsを変更すればタイトルも変わる <ul class="basic-appSet"> ～～～～～～ </section> セクションのタイトルを変更するとこのようになります。 <h3 class="basic-heading1">変更後のタイトル</h3> セクションを増やしたい場合は <section class="basic-container">～</section> をコピーして <section>の上か、</section>の下に貼り付けましょう。 「変更後のタイトル」のセクションの上にコピペしてみました。 ※コードは折りたたんでいます。 ↓するとこのようになります。 アイコンの変更 アイコン画像 アイコン画像はsvgタグに囲まれている部分です。 使いたいアイコンに対応するsvgタグを↓のサイトからコピーして使います。 使いたいアイコンの隣のリンクをクリックすると、コードが表示されます。 コードをコピーして、 もともとの<svg>タグの部分を消して、コピーしてきたコードを貼り付けます。 ↓コピーして貼り付けたばかりのコード <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M20.622 17.4C17.689 17.4 19.668 8.102 15.56 5.616C14.994 5.273 14.999 4.888 15 4.2C15 3.1 13.9 2 12.8 2C11.7 2 10.6 3.1 10.6 4.2C10.601 4.888 10.606 5.273 10.039 5.616C5.932 8.102 7.911 17.4 4.978 17.4C4.438 17.4 4 17.892 4 18.5C4 19.107 4.438 19.6 4.978 19.6H20.622C21.162 19.6 21.6 19.107 21.6 18.5C21.6 17.892 21.162 17.4 20.622 17.4ZM13.9 4.2C13.9 4.808 13.408 5.3 12.8 5.3C12.192 5.3 11.7 4.808 11.7 4.2C11.7 3.592 12.192 3.1 12.8 3.1C13.408 3.1 13.9 3.592 13.9 4.2ZM9.5 20.7C10.6 20.7 15 20.7 16.1 20.7C16.1 22.523 14.623 24 12.8 24C10.977 24 9.5 22.523 9.5 20.7Z" fill="black"/> </svg> 次に class="basic-app-icon-img"を追加して pathタグ内のfill="black" を消します ↓class="basic-app-icon-img"を追加して、pathタグ内のfill="black" を消したコード <svg class="basic-app-icon-img" width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M20.622 17.4C17.689 17.4 19.668 8.102 15.56 5.616C14.994 5.273 14.999 4.888 15 4.2C15 3.1 13.9 2 12.8 2C11.7 2 10.6 3.1 10.6 4.2C10.601 4.888 10.606 5.273 10.039 5.616C5.932 8.102 7.911 17.4 4.978 17.4C4.438 17.4 4 17.892 4 18.5C4 19.107 4.438 19.6 4.978 19.6H20.622C21.162 19.6 21.6 19.107 21.6 18.5C21.6 17.892 21.162 17.4 20.622 17.4ZM13.9 4.2C13.9 4.808 13.408 5.3 12.8 5.3C12.192 5.3 11.7 4.808 11.7 4.2C11.7 3.592 12.192 3.1 12.8 3.1C13.408 3.1 13.9 3.592 13.9 4.2ZM9.5 20.7C10.6 20.7 15 20.7 16.1 20.7C16.1 22.523 14.623 24 12.8 24C10.977 24 9.5 22.523 9.5 20.7Z"/> </svg> ↓アイコンの設置操作 アイコンの背景色の変更 アイコンの背景色は<div class="basic-app-icon basic-app-icon--blue">のクラス名、basic-app-icon--blueを変更したらOK <!-- FAQ icon --> <li class="basic-app"> <a class="basic-app-link" href="#"> <div class="basic-app-icon basic-app-icon--blue"> ←ここ ~~~~ </div> <p class="basic-app-name">変更後の名前</p> </a> </li> クラス名 色 basic-app-icon--blue 青 basic-app-icon--pink ピンク basic-app-icon--green 緑 basic-app-icon--purple 紫 basic-app-icon--orange オレンジ アイコンのタイトル アイコンのタイトルは<p class="basic-app-name"></p>で囲まれたの部分を変更します。 <p class="basic-app-name">FAQ</p> ←FAQの部分を変更する 変更後 <p class="basic-app-name">変更後の名前</p> アイコンクリック時のリンク先 アイコンクリック時のリンク先は、<a class="basic-app-link" href="#"> の#をURLに変更します。 変更前 <a class="basic-app-link" href="#"> 変更後(例：アプリIDが319のアプリに飛びたい場合) <a class="basic-app-link" href="/k/319/"> アイコンを増やしたい場合 アイコンを増やしたい場合は、<li class="basic-app">～</li>の部分をコピーして、追加したい部分(<li>タグの前か、</li>のすぐ後がよいです)に貼り付けます。<!-- FAQ icon -->の等のコメントタグも一緒にコピーして貼り付けておくと便利かも ] コピーペーストで増えた様子 アイコンを増やしたら、タイトルや画像、リンク先を変更すればバッチリですね！ アイコンをアプリアイコンにしたい 最後にちょっと重めのコピペカスタマイズです。 ポータルに表示するアイコン、アプリアイコンにしたいですよね。 まずCSSをちょっといじる必要があります。 CSSの追加 CSSの255行目に .designportal .basic-app-icon-img-app { display: block; width: 100px; height: 100px; fill: #FFFFFF; } と追加します。 アプリアイコンのURLをゲットする 使いたいアイコンの画像を右クリックして、 「検証」をクリックします。 するとこんな感じにspanタグ部分が選ばれた状態になります。 コレを右クリックでCopy → Copy element と選択し、コピーしてメモ帳に貼り付けます。 /k/～～～～～;.png までコピーします。コレがアイコン画像のURLになります。 HTMLを書く コチラをコピペして、 アプリID、コピーしたアイコン画像のURL、アプリの名前などを書き換えればOKです。 <!-- ○○アプリ icon --> <li class="basic-app"> <a class="basic-app-link" href="/k/アプリID"> <div class="basic-app-icon "> <img class="basic-app-icon-img-app" src="コピーしたアイコン画像のURL"> </div> <p class="basic-app-name">アプリの名前</p> </a> </li> 実際に入力したらこんな感じになります。 <!-- 素敵アプリ icon --> <li class="basic-app"> <a class="basic-app-link" href="/k/320/"> <div class="basic-app-icon "> <img class="basic-app-icon-img-app" src="/k/api/app/icon.do/-/app.png?app=320&size=NORMAL&hash=45902608266627f4d3c4d27aa7318556a13bd220&.png"> </div> <p class="basic-app-name">素敵アプリ</p> </a> </li> わぁい！きとみちゃんアイコン！ まとめ コピペでもある程度のポータルのカスタマイズができそうです。 HTMLやCSSが読めたり書けたりすると、もっと自由にカスタマイズすることもできるので、 入門サイトなどで挑戦してみるのもいいかもしれません✨レッツチャレンジ！

今回は、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> 以下のようになりました！！

はじめに システム開発においてのデザインの重要性は言うに及ばないと思います。 最近では業務システム（社内システム）であってもデザインを疎かにせず、デザイン会社に発注する場合もあります。 デザインの外注が当たり前となった現在、開発者として何を観点に納品物をチェックした方が良いのかをまとめたいと思います。 「POSTリクエストの『登録』ボタンがaタグになっていた！！」なんてことを納品チェック後に言わないために。 （いや、別にaタグの押下がトリガーでもPOSTしようと思えば出来ますけど・・・） チェックの前に 発注の方法によって変わるとは思いますが、大抵の場合は叩き台としてのレイアウトと画面項目の一覧を渡してのデザイン依頼になると思います。 デザイン会社はその「開発者が作ったお粗末なレイアウト」をUI/UXを意識した素晴らしい物へと昇華させてくれます。 素晴らしい物になってはいるはずですが、当然納品物の確認は必要です。そして、納品物のチェックに入る前に以下の質問をする必要があります。 なぜそうデザインしたのか 特に叩き台レイアウトと差が大きい箇所でこの質問をする必要があります。 デザイナーはデザインのプロです。 「なんとなく」でデザインを決めているわけではありません。 意図をこちらがわからずに修正依頼を出すことで、優れたUI/UXが潰されてしまう可能性があります。 こちらが指摘をした際にデザインの意図を説明してくれる場合は問題ないのですが、あくまでも「お客さん」という立場のため、「客要望」として指摘をそのまま取り込んでしまう可能性があります。 なので、なぜそうしたのかをこちらから確認する必要があるのです。これは私たちの勉強にもなるので一石二鳥でもあります。 デザインのチェック まずはデザイン自体のチェックです。 ☑１．画面項目の漏れがないか ☑２．誤字脱字はないか 特に専門性の高いシステムの場合、一般的に使用しない単語を使うこともあるので注意が必要です。 ☑３．表記ゆれがないか 過去にあった例ですが、画面によって「歳」と「才」で表記ゆれがありました。 他にも「yyyy年MM月dd日」と「yyyy/MM/dd」といったバラつきも注意する必要があります。 数値や英字の半角・全角も統一していなければいけません。 ☑４．文字サイズは適切か ☑５．文字間隔は適切か ☑６．余白は適切か ☑７．フォントは統一されているか ☑８．項目を増やしても減らしてもレイアウトが崩れないか 検索条件や検索結果一覧などで項目を増やしてレイアウトが崩れないかをチェックします。 検索結果一覧では件数0件の場合もレイアウトが崩れないか確認します。 ☑９．最小・最大文字でレイアウト崩れが起こらないか ブラウザの開発者ツールでHTMLを変更しながら確認すると効率良くチェック出来ます。 ☑１０．文字の折り返しが適切か 最大許容文字数が多すぎる場合、文字の折り返しがないと見づらい画面になってしまいます。 「レイアウト崩れが起こらないか」という観点だけでなく適切な折り返しがされるかもチェックします。 その際に「半角英数だけ」で最大許容文字数の文字を入力してみてください。 実装によって「半角英数だけ」の場合に折り返しが効かないことがあります。 ☑１１．異なるブラウザでレイアウトの差異が出ないか 事前に合意したすべてのブラウザでのレイアウト確認をするべきです。 ☑１２．指定幅でレイアウトが変わるか（レスポンシブの場合） コーディングのチェック 次にコーディングのチェックです。 ☑１３．ブラウザのエラーが発生しないか 大前提です。 ブラウザで開発者ツールを立ち上げて、コンソールを確認しエラーが発生していないかをチェックします。 ☑１４．全イベントが動作するか ボタンやチェックボックス等すべてブラウザエラーを出さずに動作するかチェックします。 欲を言えばデザイン会社がコーディングしたJavascriptはすべて動かしておきたいです。 ☑１５．GET/POSTを意識したコントロールになっているか これは一番の落とし穴かもしれません。意外と見落としがちで、修正も面倒です。 「POST送信するイベントのボタンがaタグになっていた」など良く聞く話です。 aタグをボタンのように見せる場合はGETリクエストの場合だけにしましょう。 ☑１６．nam・id・class属性が適切な命名になっているか 特にnameはPOST時にパラメータとして使用されるため重要です。 item1,item2,item3・・・のような命名になっていると開発時に修正しなくてはなりません。 ☑１７．CSS・Javascriptは適切な粒度で分かれているか ひとつの画面でしか使わないスタイルやJavascript関数を共通部品に書くべきではないです。 画面固有のCSS・Javascriptの外部ファイルを作成するべきです。 ☑１８．CSSにて隣接セレクタを多用していないか これは個人的に悩まされたことがあるので観点に入れています。 隣接セレクタが悪いと言うわけではないのですが、コーディング中に独自にdivタグ等を入れたくなる場合があります。 意図を持ってタグを追加した際に隣接セレクタを多用したデザインだとレイアウトが崩れてしまいます。 ☑１９．そのデザインは実現可能か 「jQuery.validationEngine」等の入力内容のリアルタイムチェックを例に説明します。 入力内容のリアルタイムチェックを行うサイトが増えていますが、入力チェックにDBの様々なレコードをチェックしてそれなりに時間がかかる場合があります。「Ajaxで通信⇒DBから値を取得⇒チェック処理⇒結果を返却」の一連の流れで1秒ほどかかるとしましょう。そうした場合にリアルタイムチェックだと入力してから入力結果が表示されるまでタイムラグが発生します。 このように、開発者目線での実現可能かのチェックは必須です。 ☑２０．コーディングしやすいソースになっているか 「このデザインに動的処理を実装するなら」を良く考えながらチェックすれば良いと思います。 これは具体例をあげるのが難しいですが、例えばコンボボックスをdivタグだけで作っていたらコーディングしづらいとわかると思います。 そのようにチェック時にその後の工程であるコーディングを意識するべきです。 さいごに 上記のチェック項目はデザイン発注時に予めデザイン会社に共有しておくと手戻りを減らせるかもしれません。 他にも思い出したら追記しようと思います。 「こんな観点でも見た方が良いよ」というアドバイスがございましたらコメントください。 以上です。

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