私がプログラミングの勉強を始めて2年くらい経ちましたが、昔初めて作ったWebアプリケーションのファイルが残っていたので、これについて記事にしていこうと思います。 「World Clock Maker」 今回紹介するものは、任意の国のアナログ時計とデジタル時計を一括表示するwebアプリケーションです。イメージは以下のような感じです。 Demoページは以下のリンクからどうぞ! 「World Clock Maker」- Display World Date & Time 仕様 使い方はDemoページに記されていますが、ここにも簡単に記しておきます。 Addボタンを押してタイムゾーンを選択する。 選択した後Addボタンをクリックすることで、その地域の日付、時刻を表示される。 削除する場合はDelete Allボタンをクリックする。 これだけなので、シンプルな仕組みだと思います。 作ったきっかけ きっかけはiPhoneにある「世界時計」をデジタルとアナログ両方の形式で表されるものを作ろうと思ったことです。これのおかげで、JavaScriptのいい勉強になったのではないかと思います。 作った時計の問題点 現状一つの問題があって、それは表示時刻が少しずつ遅延してしまうことです。 表示時刻の更新は1秒ごとにやっていますが、その際処理に若干時間がかかってしまいます。そのため、以下の図のようにわずかな遅延が積み重なってしまい正しい時間表示ができなくなっております。現在その解決策は検討できておりません。 コード 特にアップロードしませんが、ブラウザの「開発ツール」を開けば全て見れます。 JavaScript,HTML,CSSの3つを使って作っているためです。 興味のある方はそちらをどうぞ。 ※初心者が作成したものなので、コードの汚さはご了承いただければと思います(笑) 注意事項 Demoページで表示可能な時計の個数は無制限にしておりますが、あまりにも多く表示させるとPCのパフォーマンスに影響が出る場合がありますので、ご注意ください。 参考 アナログ時計の作り方は、YouTubeの"Online Tutorials"さんのこちらの動画を参考にさせてもらいました。 以上となります。

以下の続き。 前回までで、タスクの編集機能をつくった。 入門Laravelチュートリアル (8) ToDoアプリの認証機能を作る 認証機能の実装。 ・会員登録機能 ・ログイン機能 ・ログインしたユーザーは自分のフォルダのタスクだけを閲覧できる機能 ユーザーとフォルダの紐付け。 単純にFoldersテーブルにユーザーIDカラムを追加するだけだと既存データのNot Null制約が邪魔してうまくいかないので、以下コマンドでテーブルを作り直す。 php artisan migrate:fresh このコマンドでは、テーブルを全て削除してマイグレーションを実行し直す。 すると問題なくマイグレーションできる。なお、Usersテーブルは、既存の以下ファイルにて作成済み。 ・2014_10_12_000000_create_users_table.php ユーザーとフォルダは１対多（フォルダとタスクも１対多）の関係なので、ユーザーモデルにhasManyを付与。 public function folders() { return $this->hasMany('App\Folder'); } シーダーを用いたデータの準備と、ホームページを作成後、いよいよ登録機能に入る。 登録機能 ・Laravel には認証機能が最初から搭載されている。 ・認証機能を受け持つコントローラーは app/Http/Controllers/Auth ディレクトリにすでに用意されている。 　/app/Http/Controllers/Auth/ConfirmPasswordController.php 　/app/Http/Controllers/Auth/ForgotPasswordController.php 　/app/Http/Controllers/Auth/LoginController.php 　/app/Http/Controllers/Auth/RegisterController.php 　/app/Http/Controllers/Auth/ResetPasswordController.php 　/app/Http/Controllers/Auth/VerificationController.php ・ルーティングについても認証用の設定を吐き出すメソッドが用意されているので、基本的にはテンプレートを作成するだけでアプリケーションに認証機能を追加することができる。 では、実際に実装していく。 ①ルーティング設定 Auth::routes(); ⑧テンプレートの作成(register) resources/views/auth/register.blade.php メールアドレスとユーザー名、PW、PW(確認用)があるだけのシンプルな画面だが、ポイントは２点。 まず１点目。 <form action="{{ route('register') }}" method="POST"> 上記route関数の向き先って・・・？以下コマンドのName列を参照。 php artisan route:list +--------+----------+------------------------------------+------------------+------------------------------------------------------------------------+--------------------------------------------------+ | Domain | Method | URI | Name | Action | Middleware | +--------+----------+------------------------------------+------------------+------------------------------------------------------------------------+--------------------------------------------------+ | | POST | register | | App\Http\Controllers\Auth\RegisterController@register | web | | | | | | | App\Http\Middleware\RedirectIfAuthenticated | | | GET|HEAD | register | register | App\Http\Controllers\Auth\RegisterController@showRegistrationForm | web | | | | | | | App\Http\Middleware\RedirectIfAuthenticated | +--------+----------+------------------------------------+------------------+------------------------------------------------------------------------+--------------------------------------------------+ 以下のメソッドを見にいく。 RegisterController@showRegistrationForm 続いて２点目。 パスワード一致確認の書き方について。 Laravel には confirmed ルールというバリデーションルールが実装されている。このルールはある項目（仮に abc とします）とその項目名 + _confirmation という名前の項目（abc_confirmation）の入力値が一致することを検証する。 <input type="password" class="form-control" id="password-confirm" name="password_confirmation"> name="password_confirmation"とすることで、name="password"の項目と入力値が一致するか確認する。 テンプレートの記載が完了したところで、コントローラーの記述を見ていく。 さきほどもでてきたApp\Http\Controllers\Auth\RegisterControllerについて、登録完了後のリダイレクト先を以下のように修正。 protected $redirectTo = '/'; このままでも登録処理自体は問題なくできる。このようにLaravelの認証機能はそのままでも十分使える上に、カスタマイズもしやすい。 続いて、コントローラーのvalidatorメソッドに設定内容を書き込んでいく。 これまでバリデーションはFormRequestクラスを使って実装していたが、このようにコントローラーに記載しても実現可能。 protected function validator(array $data) { return Validator::make($data, [ 'name' => 'required|string|max:255', 'email' => 'required|string|email|max:255|unique:users', 'password' => 'required|string|min:6|confirmed', ], [], [ 'name' => 'ユーザー名', 'email' => 'メールアドレス', 'password' => 'パスワード', ]); } makeメソッドの第一引数は検証するデータ、第二引数がルール定義、第三引数がメッセージ定義、第四引数が項目名定義。第３引数のメッセージ定義は、validation.php で定義するので空の配列を渡し、第四引数で日本語の項目名を定義。 validation.phpは以下の通り編集。 'confirmed' => ':attribute が確認欄と一致していません。', 'email' => ':attribute には有効な形式のメールアドレスを入力してください。', 'min' => [ // 略 'string' => ':attribute は:min文字以上で入力してください。', // 略 ], 'string' => ':attribute には文字を入力してください。', 'unique' => '入力いただいた :attribute はすでに使用されています。', ログイン機能 ルーティング設定は登録機能と同じものでOKなので、テンプレートの修正をおこなっていく。 ⑧テンプレートの修正 resources/views/auth/login.blade.phpを修正していく。 メールアドレスとPWをいれて送信するだけの画面。パスワード変更はLaravelの機能で対応可能。 password.requestはApp\Http\Controllers\Auth\ForgotPasswordController@showLinkRequestFormをみている。 会員登録のときと同じように、ログインに成功したあとの遷移先を指定するため、app/Http/Controllers/Auth/LoginController.php を編集。 ログインメッセージはauth.phpで定義されているので、jpの下にコピーしてきて編集。 これでログイン機能の実装も完了！