矢印や吹き出しの三角形部分を、CSSのafterやbeforeといった疑似要素で実装する機会が増えました。
毎度、細かい調整につまづいたりするので、ここでまとめておきます。
まず、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;
}
時間がかかったのでメモ。。。
TortoiseGitを使って、Windows端末からリモートのGitサーバに接続する環境を作ってみます。
WindowsのコマンドプロンプトなどからGitコマンドを実行するのもよいですが、GitのブランチやマージなどGUIで確認できたほうがわかりやすいこともありますよね。
そこで今回は私も利用しているTortoiseGitの紹介です。
環境構築にあたり、私のクライアント側の各ソフトのバージョンを記しておきます。
| OS | Windows 10 Professional 64bit |
|---|---|
| Git | 2.17.0 |
| TortoiseGit & Language Packs | 2.6.0 |
度々必要となる正規表現、その都度webで検索しては流用するということを続けていましたが、精度は異なれ毎回異なるコードをもってきているようで気持ち悪かったので、自身のサイトでまとめて管理、検証していこうと思います。
以下、目的別に分けて随時更新していきます。
文字列からHTMLタグを除去する正規表現です。
str.replace(/<([^"'>]|"[^"]*"|'[^']*')*>/g,'');
少し前にWindowsのRubyでSassの環境を構築しました。
WindowsでRubyをインストールしてSassの環境を構築する
しばらく使ってみて、Sassで開発進めよう！という気にはなったのですが、手動でコマンドを実行しないといけない点や、ファイルごとにコマンドを実行する点、これを自動化できたらより作業が捗るだろうなと思い、Node.js + Atomの環境も試してみることにしました。
Atomは私が普段から使用しているエディタです。
Atomのプラグイン「sass-autocompile」を使えば、scssファイルを保存したと同時に自動でcssファイルにコンパイルしてくれるようです。
「sass-autocompile」はNode.jsとnode-sassを利用するプラグインなので、早速インストールします。
ちなみに、今回構築した環境は以下の通りです。
個人で管理しているサイトのCSSをSass管理に切り替えてみようと思い、Windows上にSassの開発環境を構築します。
これまで、過去のプロジェクトの失敗から、Sassの導入には抵抗がありました。
SassはCSSを効率よく管理するしくみであり、作業者がSassを理解していることが前提条件です。そのため、Sassについて知識が乏しい人がメンバーにいると、逆に作業効率が低くなることがあります。また、Sassで出力したCSSファイルをクライアントなどが直接編集したりと、どうしてもSassによるプロジェクト管理は難しいというイメージがありました。
しかし、最近ではSassをうまく利用したプロジェクトを見かけるようにもなったので、技術習得の目的で、個人サイトで導入してみようと思いました。
ちなみに、今回構築した環境は以下の通りです。
※現時点で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 |
WordPressでは通常の記事投稿や固定ページなどデフォルトの投稿タイプとは別に、自身で新しい投稿タイプを追加することができます。
最近ではWordPressをブログとしてだけではなく、本格的なCMSとして活用する場面も多くなってきました。そんな中で、店舗一覧、スケジュール一覧、商品一覧などオリジナルのカスタム投稿タイプを追加したい場合に、この方法は重宝します。
今回は例として、カスタム投稿タイプ「店舗一覧」を追加する想定で、コードを書いてみます。
WordPressでカスタム投稿タイプを設定するためには、function.phpなどにアクションフックを設置して、そこで関数「register_post_type」を記述することで実現できます。
カスタム投稿タイプ「店舗一覧」を追加するコードは以下のようになります。
function create_post_type(){
$args = array(
'label' => '店舗一覧',
'labels' => array(
'singular_name' => '店舗一覧',
'add_new_item' => '新規店舗を追加',
'add_new' => '新規追加',
'new_item' => '新規店舗',
'view_item' => '店舗を表示',
'not_found' => '店舗は見つかりませんでした',
'not_found_in_trash' => 'ゴミ箱に店舗はありません。',
'search_items' => '店舗を検索'
),
'public' => true,
'has_archive' => true,
'menu_position' => 5,
'supports' => array('title','editor','thumbnail','custom-fields')
);
register_post_type('shop', $args);
}
add_action('init', 'create_post_type');
PHPベースでCMSを構築する際に、アップロードされた画像をGDライブラリを利用してリサイズ、トリミング、圧縮などの画像処理をすることがよくあるのですが、改めてその性能について検証してみようと思います。
また、今回は画質がよいと言われているImageMagickライブラリもあわせてテストしてみます。
検証した環境は以下のとおりです。FuelPHPをベースとしたCMSで、GDライブラリとImageMagickライブラリの圧縮率をそれぞれ変えてみて、jpgファイルの品質を比較してみます。
テストに利用するのは以下の横幅720px、縦幅480pxの画像です。
オリジナル画像 720×480 (173KB)
この画像をそれぞれのライブラリで品質を100%、90%、80%、70%に設定して、サイズ640 x 480にトリミングしてみます。
処理結果は以下の通りです。