[PHP] 簡易ログインアカウント登録機能を実装してみた

### はじめに
前回の記事でログイン機能を実装しました。
**https://qiita.com/N46_myHearter/items/ae4f776790c4c4666a66**

この記事では、ログインする際に使用するアカウントをデータベースに登録する機能を実装してみたいと思います。

**基本的な流れ**
　1. 登録するユーザ情報(ID、パスワード、ユーザ名)を入力します。
　2. 入力値チェックを行う。
　3. ユーザ情報をDBに登録する。

簡易なので…笑笑

### データベース
今回は、MySQLを使用しています。
データ項目は、**ID**、**パスワード**、**ユーザ名**の3つのみで構成しています。
パスワードは、ハッシュ化で暗号化。(調べた時にハッシュ化だと簡単に出来たから笑笑)

### 該当ソースコード
#### 1. register.php

アカウントを登録するための入力画面です。
入力項目は、ID、名前、パスワード(確認のため2回入力)です。
入力項目すべて入力されているか、2回入力したパスワードが一致しているか、
パスワードの強度は大丈夫

光センサで遊ぶ「かくれんぼ」をobnizとp5jsで作ってみた

#かくれんぼしたい
皆さんは小学生の頃は何をして遊ぶ子供でしたか？
僕は__かくれんぼ（with DSのピクトチャット）__か__ドッジボール__か__デュエルマスターズ__をやっていました。
今考えると体力本当に無限大だったなあと懐かしい気分になります。

先日人生初のハッカソンに出場しまして、あるチームがobnizとp5jsとを組み合わせたゲームを作っていました。
obnizで物理的な動作を検知しインタラクティブにp5jsで描画する、という発想に関心が沸き、今回は勉強もかねて__自宅でも全力でかくれんぼ__できるゲームをp5jsで作ってみました。
ただのかくれんぼでもつまらないので、__背景に隠れながら逃げるかくれんぼ__を作ってみました。

コードはGistに載せてありますので是非是非実装してみてくださいね。
アプリもデプロイしたのでURLから遊びに行ってみてください。
obnizがあっても無くても遊べるようにしてます。

コード全体は⇒[こちら](https://gist.github.com/canonno/05fb889dc0bb80b79fdf8149f35c80f7)

個別のブラウザのみ適用のCSSの書き方

## Edgeのみに適用

“`sample.css
@supports (-ms-ime-align: auto) {
span {
color:#c00;
}
}
“`

## IEのみに適用

“`sample.css
@media all and (-ms-high-contrast: none) {
span {
color:#c00;
}
}
“`

## Firefoxのみに適用

“`sample.css
@-moz-document url-prefix() {
span {
color:#0c0;
}
}
“`

## Chromeのみに適用

“`sample.css
@media screen and (-webkit-min-device-pixel-ratio:0) {
span {
color:#00c;
}
}
“`

## Safariのみに適用

“`sample.css
::-webkit-full-page-media, :future, :root
span

モバイルブラウザのキーボードの種類は制御できない

スマートフォンなどのモバイル端末のブラウザでは、input要素をフォーカスするとキーボードが出現する。
このキーボードは、「英語」「日本語 – かな」などの種類があり、日本語利用者なら切り替えながら使っているだろう。

で、input要素をフォーカスした時に出てくるこのキーボードの種類を制御したい、という要望はままあるだろう。
たとえば、英数字のみからなる何らかのシリアルコードのようなものの入力欄は、日本語ではなく英語キーボードを表示させたいだろう。
結論からいうと、**キーボードの種類は制御できない。**
もう少し正確に言うと、**日本語ではなく英語キーボードを常に表示させるようにすることはできない。**

## type属性で制御できるのではないか
巷の技術系ブログなどではよく書かれている。

“`html

ストップウォッチ作ってみた(HTML,CSS,JavaScript)

# ストップウォッチ作ってみた

HTML,CSS(SCSS),JavaScript(not jQuery)でストップウォッチ作ってみました。ストップウォッチ作成は初心者が通り道らしいので私も通ってみました。どこか変なところやアドバイスがあればコメントお願いしますー！

ちなみにSCSSは特に解説してません。

## 完成形

こんな感じのができました。0.5 倍で見ると見やすいです。CodePen の埋め込み機能を使ってみましたがデフォルトで 0.5 倍にできたらいいんですけどやり方わかりませんでした(笑)

【Google HTML / CSSスタイルガイド】を初めて読んだので、一言で分かるようにまとめてみた -基本・HTML編-

# どうも7noteです。フロントエンジニア4年目です。

何万行とHTML・CSSを書いてきたので綺麗なソースにはそこそこ自信がありました。
ですが、[Google HTML / CSSスタイルガイド](https://google.github.io/styleguide/htmlcssguide.html)を読んで唖然・・・
できてない事多いなぁ。。。と。

あくまで参考程度でいいとは思うのですが、プロとしてはやっぱり推奨されている綺麗な書き方で書きたい！！
きっとこの記事を読んでくださっている方も、ソースは綺麗に書きたいと思っているはず！

class名の命名則やインデントについての書き方のルールを見直すきっかけになるかも！
またSEO対策には直接影響はないかもしれないが、**クローラーの最適化**にはなるようなので、知っていて損はない！！！

## というわけで、早速google翻訳に頼りながらガイドラインを読んでみた。↓

## 1.背景

> このドキュメントでは、HTMLとCSSのフォーマットとスタイルのルールを定義します。コラボレーション、コード品質の向上、サポート

元記事を表示

シンプルな申し込みフォームを作った

HTMLやCSSを勉強として、シンプルな申し込みフォームを作りました。
どんなフォームをどのように作ったかを簡潔にまとめました。

# 成果物

作ったものはこんな感じ。
会員制サイトにありそうなシンプルな申し込みフォームを作りました。

# HTML
“`

入会申し込み

入会するには、次のフォームに必要事項をご記入ください。

メールアドレス 必須

WebRTCで快適な画面共有を 基本編

友人にゲーム画面を共有することが多いのですが、SkypeでもDiscordでもZoomでもSteamのブロードキャストでも、低解像度だったり、解像度は取れていてもビットレートの関係で文字すら読めなかったり(画質が悪い)、遅延がそこそこ長かったりします。
配信知識ゼロから、この一週間で勉強したので、諸々まとめです。
**この記事はやり方を説明するものではないのであしからず。**
#高画質、低遅延配信がしたい！
まあ普通にYoutubeに限定配信してURLを友人に教えれば見る側で手軽に画質変えられるし便利なんですけれど…. なんか自分でやりたくなってしまいました。
ポートの開放ができるなら、RTMPをグローバルIPで外からアクセスさせたり、HLS,MPEG-DASHでCMAF chunkを活用したりと選択肢はあります。
しかし**自分の環境下ではポートの開放ができない**ので、動的に空いてるところを使ってもらうためにブラウザ上でWebRTCを試してみました。
WebRTCのページ共有にngrokを使いましたが、友人側にhtmlを渡してローカルサーバを立ててもらえば不要です。ローカルかh

Flexbox入門

Flexboxを使うと`float`で実現していたような縦並びや横並びのレイアウト、または折り返しのレイアウトを簡単に組むことができます。

#横並びにする `display: flex`
`display: flex`は指定した要素の子要素を横並びにします。

##使い方
横並びにしたい要素の親要素に`display: flex`を指定します。

“`index.html

• item1
• item2
• item3

“`

“`style.css
.flex-list {
display: flex;
}
“`

#子要素の幅を親要素に合わせて伸縮させる `flex: auto`
`flex: auto`は指定した要素の幅を親要素に合わせて伸縮させることができます。

“`index.html

• item1
• item2
• item3

“

子要素が全てfloatでも、親要素が子要素を含む高さを持つように設定する

親要素の高さは子要素を包む高さとなりますが、
子要素が全て`float`の時、親要素の高さは`0`となってしまいます。
これは、`float`が「浮いている」という意味で、親要素から見ると`float`の子要素は存在しないように見えるためです。

#`float`の解除
子要素が全て`float`でも、親要素が高さを持つように設定してみます。
`float`は`clear: left;`で「浮いている」状態を解除できます。
`clear: left;`を適用するためだけの空のタグを用意します。
空タグと`clear`で`float`を解除するのはよく使うテクニックらしいです。

“`index.html

…

…

“`

“`style.css
.float {
float: lef

Python初心者によるDjango超入門！その１「Hello World」とだけ書かれたHTMLページを表示させてみた

# 背景・目的
Udemyというオンライン講座でDjangoを学習しました。本記事は備忘録を兼ねたアウトプット目的のページです。初心者目線で分かりやすく書いてみようと思います。
参考にさせていただきました講座は以下の2つです。両方とも甲乙付けがたいとてもいい講座でした。

プログラミング初心者でも安心、Python/Django入門講座
【Python 3 x Django 2.0】作りながら覚えるDjango

# Djangoってなに？なぜDjangoなの？
ものすごく簡単に言いますと、Pythonの天才プログラマー達が自分のような初心者プログラマーでも簡単にWebサイトを構築できるように、必要なものを集めてくれた道具箱みたいなものです。カッコよく言うとWebフレームワークと言います。

Djangoの他にもJ

RaspberryPiでwindowsファイル共有を使ったお手軽練習用webサーバを作り公開する手順

#RaspberryPiで簡易的な練習用webサーバを作り公開する手順

##はじめに
HTML, CSS, Javascriptを学ぶために、普通はローカルでHTMLファイルを作成し、それをChromeなどに読み込ませる。
しかし、この方法だとwebページを公開している感じがしない。
このページでは、学習中のテストページをWANに公開しながら作成する方法を簡単に解説する。
これで、学習のモチベーションが保てたらいいんじゃないですかね。
ファイルのアップロードは、難しいことを考えずに、windowsのエクスプローラからできるようにします。
##目次
– RaspberryPiを購入
– RaspberryPiにOSをインストール
– 初期設定
– Wifi接続
– IP固定
– アップグレード
– ファイ

レスポンシブデザイン入門

#レスポンシブデザインとは
レスポンシブデザインとは、様々なデバイスや画面サイズに合わせて、コンテンツのレイアウトを調整するためのものです。

例えば、全体要素の幅を固定したサイトを作成した場合、それより画面幅が狭くなると、コンテンツの一部が隠れてしまいます。
ここにレスポンシブデザインを適用することで、画面のサイズに合わせて最適なレイアウトを組めるようになります。

#メディアクエリの利用

##メディアクエリ（Media Queries）とは
メディアクエリとは、ブラウザの画面サイズに応じてCSSのスタイルを設定できる手法です。

##利用方法

###viewportの設定
レスポンシブデザインを適用する準備として、``タグ内に`viewport`を設定しましょう。
`viewport`を設定しないと、スマートフォンやタブレットでの閲覧時にメディアクエリが正しく機能しません。

“`index.html

【初心者でもわかる】要素の順番をPCとスマホで変える方法（レスポンシブ）

# どうも7noteです。レスポンシブサイトを作る時、PCとスマホで要素の順番を入れ替える方法。

レスポンシブサイトを作る時、PCとスマホで要素の順番を変えたい時のCSSの書き方について記述していきます。
flexbox（フレックスボックス）を使って、順番を変更する方法です。

**PCデザイン**

**スマホデザイン**

## コーディング例

“`index.html

■レスポンシブデザインとは