HTMLエンティティを変換するツールです。
昨今、SNSやネットショップ会員など、やたらアカウント＆パスワードを作成する機会が多いですね。
その都度、パスワードを考えるのがめんどくさくて、簡単なパスワードを使いまわしていませんか？
私も毎回億劫に感じて、同じパスワードで登録していたのですが、セキュリティ的に絶対やってはいけません。
そこで簡易パスワード生成ツールを作成しました。
矢印や吹き出しの三角形部分を、CSSのafterやbeforeといった疑似要素で実装する機会が増えました。
毎度、細かい調整につまづいたりするので、ここでまとめておきます。
CSSで三角形を作る原理
まず、CSSで三角形を作る原理ですが、太いborderを引くと分かりやすいですよね。
width: 100px; height: 100px; border-top: 50px solid red; border-right: 50px solid yellow; border-bottom: 50px solid blue; border-left: 50px solid green;
統合開発環境「Atom」のインストール方法と、私が使用している便利なプラグイン一覧です。
Atomは2014年にGithubから公開された次世代のテキストエディタです。
Atom
個人的にはHTML、CSS、JavaScript、PHPなどの統合開発環境として、2015年ごろまではeclipseを使用していましたが、現在はAtomを重宝しています。
さすがはGithubから出てるだけあって、最小限必要なベースの部分はしっかりしており、特に不便を感じずにコーディングやプログラミングができます。
さらに、多くのプラグインが日々アップデートされており、機能が改善され、より便利になっていくようすも楽しいです。
2018年にMicrosoftによるGit買収の報道がありましたが、このまま使いやすいAtomであり続けてほしいと願っています。
Bootstrap4を導入した環境でplaceholderの文字色が濃く、薄くしようと以下のようにCSSを記述したのですが、効かず。。。
::placeholder{
color: #cccccc;
}
散々、試行錯誤したあげく、以下の方法で適用できることを知りました。
.form-control::placeholder{
color: #cccccc;
}
時間がかかったのでメモ。。。
GitのGUIクライアント「TortoiseGit」を使ってGitHubなどリモートGitサーバに接続する環境を作ります。
WindowsのコマンドプロンプトなどCUIからGitコマンドを実行するのもよいですが、ブランチやマージ履歴などGUIでビジュアルで確認できたほうがわかりやすいですよね
「SourceTree」などGUIクライアントソフトはいくつかありますが、今回はその中でも私が利用しているTortoiseGitの紹介です
環境構築にあたり、私のクライアント側の各ソフトのバージョンを記しておきます
| OS | Windows 11 Home 64bit |
|---|---|
| Git | 2.46.0 |
| TortoiseGit & Language Packs | 2.16.0 |
度々必要となる正規表現、その都度webで検索しては流用するということを続けていましたが、精度は異なれ毎回異なるコードをもってきているようで気持ち悪かったので、自身のサイトでまとめて管理、検証していこうと思います。
以下、目的別に分けて随時更新していきます。
数値のカンマ区切り
文字型の数値を下3桁ずつカンマで区切るフォーマット処理です。
str.replace(/(\d)(?=(\d{3})+$)/g, '$1,');
例えば「1000000」を「1,000,000」に置換します。
HTMLタグの削除
文字列からHTMLタグを除去する正規表現です。
str.replace(/<([^"'>]|"[^"]*"|'[^']*')*>/g,'');
例えば「<b>強調</b>」を「強調」に置換します。
少し前にWindowsのRubyでSassの環境を構築しました。
WindowsでRubyをインストールしてSassの環境を構築する
しばらく使ってみて、Sassで開発進めよう！という気にはなったのですが、手動でコマンドを実行しないといけない点や、ファイルごとにコマンドを実行する点、これを自動化できたらより作業が捗るだろうなと思い、Node.js + Atomの環境も試してみることにしました。
Atomは私が普段から使用しているエディタです。
Atomのプラグイン「sass-autocompile」を使えば、scssファイルを保存したと同時に自動でcssファイルにコンパイルしてくれるようです。
「sass-autocompile」はNode.jsとnode-sassを利用するプラグインなので、早速インストールします。
ちなみに、今回構築した環境は以下の通りです。
- Windows 10 Home 64bit
- Node.js 8.9.4 64bit
- Atom 1.23.3
個人で管理しているサイトのCSSをSass管理に切り替えてみようと思い、Windows上にSassの開発環境を構築します。
これまで、過去のプロジェクトの失敗から、Sassの導入には抵抗がありました。
SassはCSSを効率よく管理するしくみであり、作業者がSassを理解していることが前提条件です。そのため、Sassについて知識が乏しい人がメンバーにいると、逆に作業効率が低くなることがあります。また、Sassで出力したCSSファイルをクライアントなどが直接編集したりと、どうしてもSassによるプロジェクト管理は難しいというイメージがありました。
しかし、最近ではSassをうまく利用したプロジェクトを見かけるようにもなったので、技術習得の目的で、個人サイトで導入してみようと思いました。
ちなみに、今回構築した環境は以下の通りです。
- Windows 10 Home 64bit
- Ruby 2.4.3-1-x64
※現時点で2.5がリリースされていましたが、公式サイトにあるように、まだ不安定要素があるので2.4系を奨励とあったので、2.4.3にしました。実は初めに2.5のインストールにチャレンジしたのですが、エラーが発生しSassインストールは失敗しました。。
今回、改めてPHPのライブラリを使ってTwitter botを作る方法を調べます。
Twitter botと聞くとだいぶ懐かしいような感じもしますが、最新の技術動向もふまえて実装してみます。
PHPライブラリは最近、利用例をよく見かける「TwitterOAuth」を使ってみます。
TwitterOAuth
今回検証した環境は以下のとおりです
| PHP | 7.0.18 |
|---|---|
| TwitterOAuth | 0.7.4 |