スマートフォンやhtml5+CSS3など新技術に四苦八苦。jQuery、AjaxなどJavaScriptも難しいですね。そんなWebに悩む人のネタ帳です。

毎度の事ですが、PHPでメールフォームなどのチェックを実装する場合に、
「selectの場合はこれでよかったっけ」、「checkboxの値の取り方は。。。」と調べなおしてしまいます。
分かっているつもりでも、仕事上、使う場面が頻繁でもないのでうっかり忘れてしまいます。

困ったときの手間を省くために、ここのメモに書き留めていきたいと思います。

Bootstrap4のsassを使った効率良いカスタマイズ方法です。

最近、Bootstrapをベースにしてサイトを開発することも多くなってきました。
これまでは何も考えずに、まずはbootstrap.cssを読み込んでから開発をスタートしてたんですが、経験を重ねることで、それがあまり効率が良くないことに気がつきました。

sassを使わないBootstrapのカスタマイズ

Bootstrapをカスタマイズするにあたり、まずは「bootstrap.css」を読み込み、その後に読み込む「style.css」などで上書いていました。
この手法だと「プライマリカラーを変更する」「マージントップを調整する」「角丸をあり(なし)にする」などといった基本的なカスタマイズをするときに、スタイルを上書く箇所の洗い出す作業に時間を取られたり、また、洗い出しの漏れがあって一部デザイン・レイアウトに崩れが発生したりと作業自体が煩雑になりがちでした。

ちなみに、1番初めにBootstrapを触ったときは「bootstrap.css」を直接編集してた気がしますが、言わずもがな問題外ということで。。

sassを使ったBootstrapのカスタマイズ

一方でBootstrapのsassを使うと、先ほどの基本的なカスタマイズがものすごく楽になります。

node-sassを使ってWindows上にsassをコンパイルする環境を構築します。

昨今、sassをコンパイルする環境は様々です。
中には環境構築が複雑でタスクランナーなどがエラーで走らなかったりと、そもそも効率悪くなってない?と疑問に思うこともありますが、今回はシンプルに「scssファイルをコンパイルする」ことだけに焦点を当てたいと思います。

導入した環境は以下の通りです。

Windows 10 Home 64bit
Node.js 10.14.1
node-sass 4.7.2

Node.jsをインストールする

まずはnode-sassを動作させるために必要なNode.jsをインストールします。
Node.js

最近、sassにもだいぶ慣れてきました。
コード管理をスマートにしてくれるsassですが、コードが大量になると流石に煩雑になりがちです。
そこで、大量のソースを複数ファイルに分割してインポートしてみます。

例えばsassの変数をまとめたファイル「_values.scss」を用意します。
ファイル名の先頭にアンダースコアを入れたものをパーシャルファイルといいます。
パーシャルファイルはsassコマンドを実行してもコンパイルされず、「values.css」は生成されません。importされる専用の外部ファイルとして扱われます。

$color-link: #2266bb;
$font-size-l: 2.0rem;

その他に、reset.cssの内容をまとめたファイル「_reset.scss」。

a{
	color: $color-link;
}

モジュールをまとめたファイル「_modules.scss」などを用意します。

.module01{
	font-size: $font-size-l;
}

PHPでカラーコード「HEX」を「RGB」に変換する方法です。

CMSで設定したテーマカラーなどに透過率を指定したく、既にHEXで設定されているカラーコードでは都合が悪かったので、システム内でRGBに変換しました。

HEXとRGBの違いについては、赤、緑、青の3原色を、それぞれ16進数、10進数で表現しています。
したがって、処理としてはシンプルに16進数を10進数に変換すればよいだけです。

例えば、任意の赤「#F44336」をRGBに変換します。

Ubuntu 16.04でタスクの自動実行を設定してみます。

Windowsではタスクスケジューラで、ウイルスチェックやファイルバックアップを定期的に実行しますが、Linuxではcron機能を追加ます。

昔ながらの「/etc/cron.d/」にあるファイルを直接編集する方法もありますが、今回はcrontabコマンドを使ったタスク管理の方法を確認します。

crontabコマンドを使うことで、直接ファイルを指定して編集することなく、また、ユーザ毎に設定を編集することができます。

cronタスクの確認

$ crontab -l

crontabの設定内容の確認方法です。
基本的には初期状態では何も設定されていないはずなので、「no crontab for user」というようなメッセージが帰ってくると思います。

昨今、SNSやネットショップ会員など、やたらアカウント&パスワードを作成する機会が多いですね。
その都度、パスワードを考えるのがめんどくさくて、簡単なパスワードを使いまわしていませんか?
私も毎回億劫に感じて、同じパスワードで登録していたのですが、セキュリティ的に絶対やってはいけません。

そこで簡易パスワード生成ツールを作成しました。

Monthly Archives