私がプログラミングの勉強を始めて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"さんのこちらの動画を参考にさせてもらいました。 以上となります。

固定スタイルシート 常に適用させるスタイルシート。優先スタイルシートから代替スタイルシートに切り替えても、固定スタイルシートは適用される。 <link href="URL" rel="stylesheet" type="text/css" > 優先スタイルシート ページ読み込み時に、優先的に適用されるスタイルシート。 title属性に、優先スタイルシートのグループ名を指定する。同じグループ名のスタイルシートは、同時に適用される。 <link href="URL" rel="stylesheet" type="text/css" title="優先スタイルシートのグループ名"> 代替スタイルシート 優先スタイルシートの代替となるスタイルシート。ページ読み込み時には適用されず、ユーザーがブラウザを操作し、スタイルシートを切り替えたときに適用される。 rel属性に、stylesheet alternateを指定する。 title属性に、代替スタイルシートのグループ名を指定する。同じグループ名のスタイルシートは、同時に適用される。 <link href="URL" rel="stylesheet　alternate" type="text/css" title="代替スタイルシートのグループ名"> 最後に 間違っている点がありましたらご指摘お願いします。

はじめに 　プログラミングをする上でHTMLの基礎知識について理解する。 目次 カテゴリ メタデータコンテンツ フローコンテンツ セクショニングコンテンツ ヘディングコンテンツ フレージングコンテンツ エンべディッドコンテンツ インタラクティブコンテンツ コンテンツモデル トランスペアレントコンテンツ カテゴリ メタデータコンテンツ 　文書内のコンテンツの表示や動作を指定したり、ドキュメントの関連性を指定したり、文書のメタ情報などを指定したりする要素。 base、link、meta、noscript、script、style、template、title要素が該当する。 フローコンテンツ 　body要素内で使われるほとんどの要素は「フローコンテンツ」に分類される。 a、abbr、address、area、article、aside、audio、b、bdi、bdo、blockquote、br、button、canvas、cite、code、command、data、datalist、del、details、dfn、dialog、div、dl、embed、em、fieldset、figure、footer、form、h1〜h6、header、hgroup、hr、i、iframe、img、input、ins、kbd、keygen、label、main、map、mark、menu、meter、nav、noscript、ol、output、p、picture、pre、progress、q、ruby、s、samp、script、section、select、small、span、strong、sub、sup、table、template、textarea、time、u、ul、var、video、wbr要素が該当する。 セクショニングコンテンツ 　明示的にアウトラインを生成する要素。各セクショニングコンテンツは通常、見出しを伴って使用される。 article、aside、nav、section要素が該当する。 ヘディングコンテンツ 　セクションの見出しを定義する要素。また、暗黙的にアウトラインを生成する。 h1、h2、h3、h4、h5、h6要素が該当する。 フレージングコンテンツ 　文書を構成するテキストを表す要素。従来のHTMLでインライン要素と呼ばれていた分類に相当する。 a、abbr、area、audio、b、bdi、bdo、br、button、canvas、cite、code、command、data、datalist、del、dfn、embed、em、i、iframe、img、input、ins、kbd、keygen、label、map、mark、meter、noscript、object、output、progress、q、ruby、s、samp、script、select、small、span、strong、sub、sup、textarea、time、u、var、video、wbr、picture、templatey要素が該当する。 エンべディッドコンテンツ 　文書に他のリソースなどを埋め込む要素。 audio、canvas、embed、iframe、img、object、video、picture要素が該当する。 インタラクティブコンテンツ 　閲覧者が操作する要素。 a、audio、button、details、embed、iframe、img、input、keygen、label、menu、object、select、textarea、video要素が該当する。 その他 セクショニングルート 　独自のアウトラインを形成する要素です。ただし、セクショニングコンテンツと異なり、文書全体のアウトラインには影響を与えない。 body、blockquote、details、fieldset、figure、td要素が該当する。 パルパブルコンテンツ 　コンテンツモデルがフローコンテンツ、もしくはフレージングコンテンツとなる要素は「パルパブルコンテンツ」となる。パルパブルコンテンツに分類される要素は、hidden属性が指定されていない内容を最低でも1つは持つ必要がありる。 a、abbr、address、article、aside、audio、b、bdi、bdo、blockquote、button、canvas、cite、code、data、details、dfn、div、dl、embed、em、fieldset、figure、footer、form、h1〜h6、header、hgroup、i、iframe、img、input、ins、kbd、keygen、label、main、map、mark、menu、meter、nav、object、ol、output、p、pre、progress、q、ruby、s、samp、section、select、small、span、strong、sub、sup、table、textarea、time、u、ul、var、video要素が該当する。 スクリプト支援要素 　要素自体は何も表さず、スクリプトを操作するために利用される要素。 script、template要素が該当する。 置換要素と非置換要素 置換要素 　要素の内容が画像やアプリケーションなどの挿入されたコンテンツに置き換えられる要素は「置換要素」に分類される。 img、audio、video、embed、iframe、object、canvas要素やフォーム関連要素などが該当する。 非変換要素 置換要素に分類されない要素は「非置換要素」に分類される。非置換要素は、要素の内容となる文字などのデータがWebページにそのまま表示される。 コンテンツモデル ある要素がどの要素を内容として持つことができるか、つまり子要素とできるかというルールを表す。例えば、コンテンツモデルが「フローコンテンツ」のaside要素は、フローコンテンツに属するp要素などを内容として持てる。フローコンテンツに属していないlink要素などを内容として持つことはできない。 また、audio要素のように、属性と属性値の指定によってコンテンツモデルが変化する要素も存在する。なお、空要素のコンテンツモデルは「空」になる。 トランスペアレントコンテンツ a、audio、canvas、del、ins、map、noscript、video要素は、コンテンツモデルが「トランスペアレントコンテンツ」となっており、親要素のコンテンツモデルを受け継ぐ要素。例えば、親要素にaside要素を持つa要素は、aside要素のコンテンツモデルがフローコンテンツなので、コンテンツモデルを受け継ぎ、フローコンテンツを内容に持つことができる。 参考サイト できるネット 最後に 間違っている点がありましたらご指摘お願いします。

以下の続き。 前回までで、タスクの編集機能をつくった。 入門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の下にコピーしてきて編集。 これでログイン機能の実装も完了！

DrawioではHTMLファイルでの出力が可能であり リンク先を記載することでファイルをダウンロードが可能となる。 HTMLファイルが図形を書くことで作成されてしまうのが衝撃であった。 これを利用すればちょっとしたページが作成できてしまう。 仕事柄、環境が一律ではないため その都度リンク集なるものを作成していたがこれで非常に簡単に作成出来るようになる。 ※ちなみにHTMLファイルを開いてみたら図形ではないって怒られます。 HTMLファイルでチャートを作成し、ファイルのリンクを追加する方法 新規作成。 保存時にHTMLで保存する ダウンロードファイルのリンクを取得 例としてGoogleDriveのリンクを取得しました。 [右クリック]→[リンクを取得]から取得したURLの末尾を変更する必要があります。 変更：[/edit?usp=sharing]→[/export?format=txt] 　※もっと良いやり方があれば教えてほしいです。 リンクを編集 ブロックを右クリックからリンクの編集でURLを追加します。 適用を押したら保存します。 ※新規で作成した場合は[Ctrl+S]を押すとダウンロードされますが、ダウンロードされたファイルを編集することで次回から回避できます。 ダウンロード HTMLをブラウザで開き、リンクを追加したブロックをクリックするとファイルがダウンロードされます。