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

昨今、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;
}

時間がかかったのでメモ。。。

少し前に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インストールは失敗しました。。

Instagram APIを使って、投稿された写真を取得、表示してみたいと思います。

個人的には乗り遅れているInstagramブーム、単体の盛り上がりは感じていますが、それを活用したWebサービス事例などはあまり見かけないような気がします。
今回はその可能性を検証するため、Instagram APIの利用方法などを調べてみます。

アカウント登録

Instagram APIを利用するためには、まずInstagramアカウント登録が必要です。

Instagramアカウントがない場合は、公式サイトからアカウント登録します。
Instagram

Atomで作業を進めていると、「UTF-8」のファイルが何故か「windows1252」で開かれてしまうことがあります。

特に日本語を少しだけ含む場合に発生するケースが多いようです。
「少しだけ」というのが厄介で、本来UTF-8であるはずのその日本語部分がwindows1252で文字化けして表示されてしまいます。その上、そのまま気づかずに上書きしてしまい、展開してしまうという危険なケースも実際に起こりました。

以前はそんなことなかったのですが、最近は頻繁に発生しているような気がします。

解決方法について、普段は私は日本語ファイルに対応するためにauto-encodingというプラグインを利用しているのですが、その設定で回避できるようです。

Monthly Archives