開発環境まとめ
長文ではお久しぶりです、佐伯です。
ツイッターで「開発環境のまとめって要るか？」と聞いたところ同業者に「知りたいです」というお言葉を頂きましたので僭越ながら。
ついでに拡張機能とかもちょっとだけ載せようと思ってます。気力が続けば。
内容はこんな感じだドン
好きなとこだけ摘まんで食べて下さい。
PCスペック
そもそも論的に取り敢えずこれ。大事です。まあ正味言うてHTMLとCSS書くだけならそんなに要らないと思うんだよね、私。
ただそこからあれこれ凝り出すとなるとちょっと多めに積んであった方が安心かなと思う。
あとオーバースペックしてると動作がエグイ軽い。余裕を持って優雅たれって時臣パッパも言ってた気がする。
| 会社 | 自宅 | |
|---|---|---|
| OS | Win10Pro | Win10Home |
| RAM | 8GB | 16GB |
| SSD | - | 250GB |
| HDD | 1.5TB | 1TB |
| GPU | - | RTX2060 SUPER |
| Drive | C D G | C D G |
| モニター | 2 | 1 |
こんな感じ。繰り返すけどHTMLとCSSやるだけならめちゃくちゃオーバースペックです。特に自宅奴。ながら作業したい人はスペックは高ければ高いほど幸せになれると思っておくといいかも。特にRAM。
ブラウザ
Google Chrome
皆さんお馴染みのChrome。検証ツールが有能ちゃんちゃんこ。
ひとつ難点を上げるとすれば重てえんだよお前ということ。
マジでアホほど重い。本当に重い。タスクマネージャーで見て爆笑出来るレベル。
ダウンロード
Vivaldi
最近使い始めたっていうか佐伯の師匠がいいって言ってた。実際良い。かなり軽い。
Chrome重いんだけど💢💢💢のブチギレ勢にオススメ。
多分ドマイナーなのでどういうブラウザかっていうのをwikipediaより引用。
Vivaldi（ヴィヴァルディ）は、Operaからスピンアウトして設立されたVivaldi Technologiesによって開発されているウェブブラウザである。2016年に初公開された。後発のブラウザとして、Google ChromeとOperaの特徴を併せ持ち、軽量設計となっている。
つまりちょっと軽いChromeオルタ的な奴。は？最高かよ。でもまだちょっと慣れないのでChromeと併用。
ダウンロード
エディタ
本番はここからみたいなとこある。多分。
先に言っておくけどエディタは宗教だから自分に合ったやつ使うのが一番だと思ってる。マジで。マジで。
本体
Visual Studio Code
色々使ったけど最終的にここに落ち着いた。
同類のエディタとして大体列挙されるやつにATOMとBracketsがあるけど、3つの中で一番軽いらしい。
ATOM使って「は！？バリ重やん！！」となり次のvscode(Visual Studio Code の略称)で落ち着いたのでBracketsは使ったことないから重いらしいっていうのはお師匠曰くの話です。
有料エディタになるとsublimeとか秀丸とか入ってくるけど、多分有料エディタ使おうって人そんな居ないと思うので割愛。
ちなみにsublimeはちょっと触ったことあるけど佐伯はそんなに好きじゃなかった。
ちなみに特徴
・多言語対応
HTMLだけじゃなくて他の言語も対応出来る。
・拡張機能
後述。好きにカスタマイズしよう。
・emmet
入力を短縮したりする機能。
コーディングをサボって時短しよう。
・シンタックスハイライト
コードを着色して見やすくしてくれる。
ありがちな閉じ忘れを防ごう。
一応簡単に紹介
Brackets
Adobe産のテキストエディタ。NINA 管理人の十和子ちゃんはこっちって言ってた気がする。
使ったことないのでなんとも言えない。
Adobeに慣れてる人とかAdobeがお好きな人はこっち。
最初から日本語なのもやさしい。
Bracketsダウンロード
ATOM
周りで使ってる人見たことないけど機能は多分大差ない。
気狂い拡張機能がズバ抜けて多い。
個人的なお前なんなんだ？？拡張機能は「文字を打ち込む度に火花が散る」「エンターを押すと爆発する」あたり。使っててコーディング楽しくなるけどバチクソ重い。
ATOMダウンロード
拡張機能
vscodeを自分好みのオトコに育てる（？）ために好きに拡張しよう。私は今日から光源氏（？？？）
正直これが一番性格出るし一番楽しい作業だと思ってるんだけど、拡張機能入れたら入れるだけ重くなるので要注意。その辺は自分のPCと相談してほしい。
私ATOMのことめちゃ重いと思ってるけどひょっとしたら楽しくなってはちゃめちゃな拡張機能入れてたから重くなったような気がしなくもない。
一番最初に入れた方がいい
VScodeの日本語化
初期設定が英語なので公式が出してくれている日本語化プラグインを入れましょう。
じゃないと何書いてるか全然わからんと思う。私もわからん。
見た目系
Cobalt2 Theme Official
文字の色とか背景色とかを変える。
カラーテーマは他にも色々あるので自分が一番書きやすいと思うやつを選べばいい。
Material Icon Theme
ファイルの形式ごとについているアイコンを変えるやつ。
アイコンテーマは他にも以下略。
Guides
インデントに合わせて縦線を入れてくれる。ただそれだけ。
閉じタグどれやねん！！！！！！！！！！！となった時辿ればいいので安心する。
ただしインデントしっかり入れてないと途端に惑わす悪魔と化す。
HTML・CSS
HTML Snippets
タグの予測変換してくれるやつ。
キーボード叩く量がめっちゃ減る。
Auto Close Tag
タグの締め忘れを防ぐやつ。使うこともあるし使わないこともある。
この機能があることに慣れて来ると愛いやつ。
Auto Rename Tag
spanをdivに変えるとかした時にクローズタグも一緒に変えてくれる。
ちょいちょい誤差るけど、基本的には便利。
Color Highlight
カラーコードとカラーネームの背景に色を付けてくれる。
何色を指定しているのかが分かりやすくなるので捗る。
IntelliSense for CSS class names in HTML
CSSファイルと同期してHTMLにクラス名を打ち込む時にサジェストしてくれる。
このクラス名は大文字だったか小文字だったか…みたいな時に便利
Live Server
リアルタイムプレビューって言った方が分かりやすいかも。
実際に画面を見ながら調整出来るので「ここもうちょっと隙間欲しいかも」とかがその場で修正出来る。
ブラウザの検証ツールとかと一緒に使えば何も怖くない。
SCSS
Live Sass Compiler
SCSSのリアルタイムコンパイル。
SCSSとライブビューを使うときは必須。
起動し忘れてるとちょっとテンパる。
Bracket Pair Colorizer
対応するカッコ同士で色を付けてくれる。
HTML、CSSあたりだとほぼ使わないけどjsとSCSSはこれがないと死ぬ。
JavaScript
ESLint
リアルタイム解析で入力サポートしてくれる。
これがないとjs界で生きていけない。
導入にちょっと癖があったような気がしなくもないが遠い彼方のことなので思い出せないですね。
JavaScript (ES6) code snippets
jsのスニペットツール。入力する時に塊で出してくれたりする。便利。
入力例みたいなものも一緒に出て来るのでド忘れに優しい。
PHP
PHP Intelephense
PHPの入力補完してくれるや～つ
これがないとしんどいオブしんどいで全く書けない
どの言語書くにしてもまず補完ツール入れる病に掛かってるので……
これ使って書いてXAMPPで表示するような感じで書いてます
他言語ツール
XAMPP
PHPの開発環境オールインワン決定版。
これが無いとPHPの開発が出来ない。
バラバラで導入したりも出来るけどインストーラーでした方が圧倒的に楽だった。そりゃそうだよな、じゃなきゃオールインワン版なんて出ねえよな。
Apache と MySQL とphpMyAdminを一緒に入れてくれるのでとっても有難い。
導入にちょっと色々面倒な手順が必要なのでその辺は調べて欲しい。
ダウンロード
素材サイト
GoogleFonts
Leafscape
WEBフォント。フォントがないとなにも出来ない。マジで何も出来ない……助けて……
FontAwsome
アイコンタイプのWEBフォント。
CSS適用出来るからめっちゃ便利！！
Pexels
Unsplash
pixabay
写真素材のサイト。回ってるだけで楽しくなって気付いたら一日終わってる。
見て回ってるくせに写真使ってるテンプレ殆どないんだけどどうした？？？？？
icooon mono
アイコン素材いっぱいで大好き～～～！！！！！！！！
色変えてダウンロード出来る。
参考サイト
Easing Gradients
グラデーション書く時に使ってるやつ。
めっちゃ自然なグラデーション書いてくれるので有難い。
CSS Flexbox の基礎知識と使い方をやさしく解説
flexboxのプロパティをまとめてくれてる記事。
プロパティの組み合わせを試せるツールもあるのでめちゃくちゃ助かる。
MDN Web docs
HTML、CSS、jsのリファレンスガイド。
プロパティとかで困っときに見るやつ。
アニメーションのショートハンドでしょっちゅう見てる。
TinyPNG
画像の画質落とさずに容量の削減をしてくれる良いヤツ。
レンタルスペースの容量上限内に収めるのに必須。
もし上限内でも表示スピード早くさせるために縮小したりする。
原色大辞典
色選ぶ時に大体ここで選んでカラーコード弄ったりしてる。
色見本と一緒に並んでるのですげえ助かる。
まとめ
以上開発環境的なアレでした。
まあでも最終的には「自分のやりやすい環境でやる」っていうのが一番ですよね～！
今回紹介したのはあくまでも「私がやりやすい環境」なので千差万別色々あるかと思います
「どこから手つけたらいいか分からん！」とか「なにを揃えたらいいか分からん」とかの参考になったら幸いです
因みに最終的には取り敢えずググってみる、みたいなことになりがちです！！！！
限定コンテンツについて考える③
おはようございます、佐伯です。
寒くなって来たので毎朝布団とのEndlessBattle（流暢）を繰り返しています。
大分辛いオブ辛い…出社したくない…
今回は前回、前々回に続いて限定コンテンツの話。
saeki-memo.hatenablog.com
saeki-memo.hatenablog.com
前回は【下準備】まで終わったのでここから実装に入っていきます。
今更ながらおさらいを兼ねて作成の流れをお伝えして起きます。
●下準備（済）
・データベースの設定
・データベースの作成
・テーブルの作成
・define の作成
・function の作成
●会員登録ページを作る
●ログインページを作る
●ログアウトページを作る
●会員限定コンテンツの表示を作る
という流れで今回は【会員登録ページを作る】の部分になります。
取り敢えず外見
これは私が利用する手なんですけど、phpファイルはライブプレビューが出来なくて面倒です。
なので先にHTML、CSSをライブプレビューを使いながら作りこんで
出来上がったものをphpファイルに移植するのが結構簡単です。
今回も取り敢えず外面を作る⇒phpファイルに移植する
の手を取ろうと思います
というわけで、まずはHTMLで登録ページの外ヅラを作って行きます。
<div class="container"> <span class="title">LOGIN</span><br> <form action="" method="POST"> <input type="text" name="userid" id="" placeholser="userid"> <input type="text" name="password" id="" placeholder="password"> <input type="password" name="password2" id="" placeholder="re:password"> <input type="submit" value="submit" name="submit"> </form> </div>
最低限はこの程度でＯＫです！取り敢えず入力出来たら良いと思う。
デザインとかは好き好きCSSで触って下さい。
必要事項とかはがあればそれも随時足して下さい。
今回は
- ユーザーID
- パスワード
の二つを設定します。
前回の記事では三つあったんじゃない？と思った方、正解！
通し番号は自動採番って言ってたもんね、と思った方、大正解！！！！！！！！
ＩＤは自動採番のため勝手に番号が入ります。ので！設定しなくても大丈夫。
じゃあなんでパスワードが二つあるんや！と思った方は目敏くて素敵です。
パスワードが二つあるのはほら、よくある『同じものを二回入力してください』ってやつですね。メールアドレスとかにもよくあるやつ。
これで打ち間違いとか自動登録とかを弾いて行きます。
ここで重要なのはinputタグにname属性を設定することとformタグにmethod="POST"を設定しておくこと。
これが無いと機能として動きません！マジでただ入力出来るだけのおもちゃ。
phpの中身を作る
お待たせしました！！ではいよいよphpで中身を作っていきます。
HTMLを外ヅラとするならばphpは内側、発言と思惑みたいなもんですかね（？）
流れとしては
①フォームに入力された文字を受け取る
②パスワードの一致を確認したりする
③データベースに入れる
の三段階です。
ではまずざっくりとした部分を作って説明をしたいと思います。
<?php if(isset($_POST['submit'])){ // submitボタンが押された時 if(empty($_POST['userid'])){ // useridが空だった時 $error = 'IDが未入力です'; }elseif(empty($_POST['password']) || empty($_POST['password2'])){ // password,password2 が空だった時 $error = 'パスワードが未入力です'; }elseif($_POST['password'] !== $_POST['password2']){ // password,password2 が一致しなかった時 $error = 'パスワードが一致しません'; }else{ // ここから新規登録処理をする } } ?>
取り合えずここまで。
順を追って書いていくのでまだるっこしいわ！！！！という方は最後尾まで飛ばして下さい。
if(もしも文)を使ってエラーチェックをしていきます。
これをしないともうなんでもかんでもつっこめてしまうのでな。
if(isset($_POST['submit']))の部分でフォームの送信判定をします。
分かるか分からんか分からない例えをするとjsのクリックイベントみたいなもん。
とにかく「submitが押されたらこれを実行するぽよ！」という指示書きです。
二行目以降でエラーチェックを行います。
emptyは文字の通り『空だったら』という構文になります。
因みに今回は『入力されてなかったら？』と『パスワードが一致しなかったら？』だけを見ています。
$errorにエラー内容を書いていますが、これも後々使うので書いといてください、取り敢えず。取り敢えず！！！！！！！！！
因みに全文を日本語に直すと
「もしsubmitボタンが押された時にuseridが空っぽかpasswordもしくはpassword2が空っぽかpasswordとpassword2が一致しないかのどれかじゃなかったら新規登録するね！」
っていう感じです。
じゃあその新規登録の部分なんですけど取り敢えず書きます。
<?php if(isset($_POST['submit'])){ // submitボタンが押された時 if(empty($_POST['userid'])){ // useridが空だった時 $error = 'IDが未入力です'; }elseif(empty($_POST['password']) || empty($_POST['password2'])){ // password,password2 が空だった時 $error = 'パスワードが未入力です'; }elseif($_POST['password'] !== $_POST['password2']){ // password,password2 が一致しなかった時 $error = 'パスワードが一致しません'; }else{ $dbh = PDOconnect(); //① $sql = 'INSERT INTO '.TB_user.' (userID,password) VALUES (:userID,:password)'; //② $stmt = $dbh->prepara($sql); //③ $stmt -> execute(array( //④ ':userID' => $_POST['userid'], ':password' => $_POST['password'] )); } } ?>
こんな感じですかね。
これは全然関係ないけどprepare(プリペアだと思う)何回読んでも「プリパラ」って読んじゃう。
最終的な新規登録部分を書きました。
詳しい説明をすると逆にややこしいので取り敢えずこういうものとして覚えて貰えると良いかなと思います。
書いたものの流れをざっくり説明すると
①メソッドを使ってデータベースに接続する
②データベースに流すSQL文を設定する
③SQL文をデータベースにセットする
④フォームに入力された文字を代入してSQLを実行する
って感じでやって貰えればいいかなと思います。
正直佐伯も今でもよく分かってないけど使えてるから大丈夫。
色々合体させた結果
<?php session_start(); require_once(dirname(__FILE__) . "/class/define.php"); require_once(dirname(__FILE__) . "/class/function.php"); if(isset($_POST['submit'])){ // submitボタンが押された時 if(empty($_POST['userid'])){ // useridが空だった時 $error = 'IDが未入力です'; }elseif(empty($_POST['password']) || empty($_POST['password2'])){ // password,password2 が空だった時 $error = 'パスワードが未入力です'; }elseif($_POST['password'] !== $_POST['password2']){ // password,password2 が一致しなかった時 $error = 'パスワードが一致しません'; }else{ $dbh = PDOconnect(); //① $sql = 'INSERT INTO '.TB_user.' (userID,password) VALUES (:userID,:password)'; //② $stmt = $dbh->prepara($sql); //③ $stmt -> execute(array( //④ ':userID' => $_POST['userid'], ':password' => $_POST['password'] )); $error = '登録が完了しました！' } } ?> <div class="container"> <span class="title">LOGIN</span><br> <form action="" method="POST"> <input type="text" name="userid" id="" placeholser="userid"> <input type="text" name="password" id="" placeholder="password"> <input type="password" name="password2" id="" placeholder="re:password"> <input type="submit" value="submit" name="submit"> </form> </div> <div class="error"> <?php if(!empty($error)){ echo $error; } ?> </div>
最後の行にエラーコードを出力するようにしました。
ついでに新規登録が出来たら完了文言も出るようにしてあります。
これで出来てるかな？出来てないかな？と不安になることもないですね。
新規登録はここまで。お疲れ様でした！！
次回はログイン画面を作ります。
余談
MVCに則って作るのであれば佐伯はこう作ります。
// class/function.php <?php function PDOconnect(){ try { $dbh = new PDO('mysql:host=' . DB_HOST . ';dbname=' . DB_Main . ';charset=utf8', DB_USER, DB_PASS); } catch (PDOException $e) { var_dump($e); exit; } return $dbh; } function signUp($id,$pass){ $dbh = PDOconnect(); //① $sql = 'INSERT INTO '.TB_user.' (userID,password) VALUES (:userID,:password)'; //② $stmt = $dbh->prepara($sql); //③ $stmt -> execute(array( //④ ':userID' => $_POST['userid'], ':password' => $_POST['password'] )); } ?> // pages/model/signup.php <?php if(isset($_POST['submit'])){ if(empty($_POST['userid'])){ $error = 'IDが未入力です'; }elseif(empty($_POST['password']) || empty($_POST['password2'])){ $error = 'パスワードが未入力です'; }elseif($_POST['password'] !== $_POST['password2']){ $error = 'パスワードが一致しません'; }else{ $id = $_POST['userid']; $pass = $_POST['password']; signUp($id,$name) $error = '登録が完了しました！' } } ?> // pages/view/signup.php <div class="container"> <span class="title">LOGIN</span><br> <form action="" method="POST"> <input type="text" name="userid" id="" placeholser="userid"> <input type="text" name="password" id="" placeholder="password"> <input type="password" name="password2" id="" placeholder="re:password"> <input type="submit" value="submit" name="submit"> </form> </div> <div class="error"> <?php if(!empty($error)){ echo $error; } ?> </div> //index.php <?php session_start(); require_once(dirname(__FILE__) . "/class/define.php"); require_once(dirname(__FILE__) . "/class/function.php"); require_once("pages/model/signup.php"); require_once("pages/view/signup.php"); ?>
flexboxで個数を固定した正方形の高さについて考える
おはようございます、スマホを家に忘れた佐伯です。
ところで最近の若者はスマホを携帯とは呼ばないらしいですね。
佐伯はガラケーを使ったことがある世代なので携帯電話のイメージが根強いんですけど、実際のところがどうなのか。私、気になります。
今回は昨日ちょっとハマったところをメモ書きにしてのこしておこうと思います。
等間隔配置にはうってつけのflexbox
割と最近実装された機能みたいで、周りに聞いてみると『は？なんそれ』という人も多いみたいです。
『flexboxってなんぞや？』という方は下記を参考にしてみてください。
・CSS Flexbox の基礎知識と使い方を詳しく解説
今回の要件は
『flexboxでアイテム個数を限定した時に正方形にするには？』
です
htmlとcss
<div class="container"> <span class="flexItem" id="first"></span> <span class="flexItem"></span> <span class="flexItem"></span> <span class="flexItem"></span> <span class="flexItem"></span> <span class="flexItem"></span> <span class="flexItem"></span> <span class="flexItem"></span> </div>
.container{ box-sizing:border-box; display:flex; justify-content:space-around; } .flexItem{ display:inline-block; width:24%; }
まあ大体こんな感じ。稼働チェックしてません。
ようするに『４×２を作りたい』と思って下さい。
で、このflexItemを正方形で配置したいわけですけどここでクエスチョン。
いやちょっと待ってくれよ。
パーセント指定なのにどうやるの？？？？？？？？？
@media screen and (min-width:〇〇px)とブレークポイントごとにサイズを区切るのか？とも考えましたけど。
ブレークポイントから外れてるときは４×２にならない時も出て来ないか？？
少々脱線しますけど、スマホ（携帯ではない）の新作競争のおかげでブレークポイント業界ないしレスポンシブ業界はしっちゃかめっちゃかです。
因みにブレークポイントというのはレスポンシブデザインを組む際に切り替えの目安にする画面幅のことです。
なぜしっちゃかめっちゃかしているのかというとディスプレイのサイズが大きくなったり縦長になったりしてるタイプが出てきてるので、従来のブレークポイントが通用しなくなってきてるんですよね。
兎に角それが原因で固定値（height:〇〇pxと決め打ちしちゃう）のは上策とは言えない。
出来ることなら常にこの体裁を保っていたい、しかしパーセント表記…。しかも画面サイズはどうなるか分からない……。
そうだ、js使おう
結論から申し上げて佐伯的なベストは『Javascriptを使って横幅と高さを同じにしよう』でした。
さきにコードだけ書いてしまいます。
let wItem = document.getElementById("first").clientWidth; $(".flexItem").css("height", wItem + "px");
取り敢えず『４×２』だけに拘るならこれで問題はないです。
ただ拘るのであれば、あくまでも感覚的な話ですがこれでいくと画面幅が大きくなった時に「待て待て待て待てデカいよ！！！！！！」となってしまったのでdivの範囲を絞ったりだとかそういうね、アレが必要ですよね。
その辺は模索中なので載せてません。もうちょっとなんとかなるはずなんや……。
一列に並べる個数を絞りたい時は単純に『個数/100』で出たパーセンテージを指定したらいいだけなので試してみて下さい。
私は16個の配置で悩んでます。４×４か８×２しかない。４×４が見た目が良いので固定したいけど自分のモニターで見るとめっちゃバランス悪い。（モニターが1920pxくらいある）
結論出たらまた書きたいな～～って思います～～～！！！
ところでこれ書いてる間に通知音聞こえてハ？と思ったら携帯ありました。本の間に挟まってた。
