CSSのpointer-eventでマウスイベントを制御

pointer-event: none; を使うと、CSSでクリックイベントを無効にできます。
工夫すれば、従来Javascriptを使用していた制御もCSSだけで実現できます。

pointer-eventは、最新ブラウザでは実装されています。
Internet Explorer 10未満でサポート外となっているので、レガシーな環境へ対応が必要なクライアントワークでは使うことができません。

参考:
Can I use… pointer-events

“CSSのpointer-eventでマウスイベントを制御”の続きを読む

Macの「写真」でシステムフォトライブラリを選べないとき

複数台あるMacで写真を共有したかったので
「写真」アプリの保存データであるフォトライブラリを共有ディスクに設置してみました。

がしかし。
公式のガイドでは、Optionキーを押しながら「写真」を起動すれば
「ライブラリ選択」というメニューが立ち上がるとあるのですが
これが何度やっても普通にしか立ち上がらない。

参考:
「写真」でシステムフォトライブラリを指定する

その時のシステム構成はこちら

  • MacOS Sierra 10.12
  • 写真 2.0

フォトライブラリから「写真」を起動

Optionキー押下で「写真」起動でフォトライブラリを切り替えることはできませんでしたが
フォトライブラリデータから、開くアプリケーションで「写真」を選ぶと成功しました。

ファインダーで、「写真」のデータ元としたいフォトライブラリデータがあるディレクトリまで移動し
フォトライブラリデータの「このアプリケーションで開く」から「写真」を選択。

「このアプリケーションで開く」を選択

すると、写真アプリが起動し
選択していた新しいフォトライブラリの内容が表示されました。

あとは、公式ガイドにある手順で
環境設定からシステムフォトライブラリを切り替えれば操作完了です。

ssh秘密鍵id_rsaのパーミッションは600

パソコンを初期化するなどの機会で、外部メディアへ秘密鍵のバックアップをとることがあるのですが
こうして保存してあった鍵を、外部メディアからコピー&ペーストで復元すると、鍵を認識してくれなくなることがあります。

この場合、permissionが不正で秘密鍵へのアクセスができないパターンが濃厚なので
まずは、秘密鍵id_rsaのpermissionを600に指定してみると良いです。

$ chmod 600 ~/.ssh/authorized_keys

webpackでSassのコンパイル

webpackというタスクランナーが良いと教えてもらったので、さわりだけ試してみました。
挑戦はしましたが、私の中ではこのようなふんわりした認識しかないので、解説は省略!

  • 環境構築がシンプル
  • WebAppを作るのに向いているらしい
  • モジュールごとに分かれているJavascriptを1このファイルにまとめられる

webpack自体については、既出のしっかりした記事が検索すればたくさん見つかりますので、そちらを参考にしてください。

現状のクライアントワークは、HTML+CSSでのコンテンツ制作をベースにJavascriptでの機能実装がほとんどなので
まずはHTML+CSSの快適さが気になる。
使用頻度の高いSassのコンパイル環境を作る手順を調べてみました。

過去の苦い経験から、納品後にちょっと手を加えたいからCSSの触りかたと場所を教えて…という連絡がないこともないので
webpackを使用しますが、SassはJavascriptではなくCSSとして書き出せるようにします。

参考記事:
Webpackで Browsersync + Sassコンパイルを試す
webpackを使ってsassをコンパイルできるようにしよう!

なお、私の記事は覚書と感想のようなものなので
環境構築の手順やポイントは参考記事のほうがためになります。どうもありがとうございました。

“webpackでSassのコンパイル”の続きを読む

記号(:や/)が連続するとword-bleak: break-all;の折り返しが効かない

最近知ってしまった真実…
一部のブラウザで、CSSの強制折り返しが効かないケースがあることがわかりました。

* {
	word-bleak: break-all;
}

こうしときゃ万能だろうという神話を信じていたのに、:(コロン)や/(スラッシュ)が連続している場合は折り返してもらえません。

2016年11月2日現在ではこうなっていました。

  • Safari 10.0.1 … OK
  • Chrome 54.0.2840.71 … NG
  • Internet Explorer 11 … NG

“記号(:や/)が連続するとword-bleak: break-all;の折り返しが効かない”の続きを読む

カラーコードの色を表示してくれるAtomのpigmentsが便利

2016年から、エディターをSublimeTextからAtomへ変えているのですが
その中でもすばらしいのが、プラグインのpigmentsです。

pigments

Atomで初期インストールするプラグインの記事をみても、軒並みエントリーされているプラグインなので
今更私がここで言うのもおこがましいのですが
とりあえず入れてみたら、これが便利でびっくり!

インストール方法や、機能説明については
既存ですばらしい紹介がたくさんあるので、割愛させていただき
クライアントワークで活用してみて、具体的にどんな場面で素晴らしいと感じたか簡単にまとめてみました。

そう、便利なんだけど、実際には全部の機能は使いこなしていないです。
Show Paletteも良さそうだけど、最初に「おー!」と開いたきりでした。

“カラーコードの色を表示してくれるAtomのpigmentsが便利”の続きを読む

currentTargetで無名関数を使わずイベントターゲットを取得

たとえば、jQueryでイベントを設定するとき、こんな書き方をしたことはありませんか?

// フォーカスが外れると改行を削除する
var deleteLinefeed = function(obj) {
	var v = obj.val();
	v = v.replace(/¥n/g, '');
	obj.val(v);
};
$('textarea').on('blur', function(){
	deleteLinefeed($(this));
});

この無名関数が冗長で気になる!
なにより、無名関数で紐付けたら、イベントリスナーを削除しにくいです。

そこで、イベントオブジェクトのcurrentTargetを活用すると
このようにスッキリさせられます。

// フォーカスが外れると改行を削除する
var deleteLinefeed = function(e) {
	var obj = $(e.currentTarget),
	v = obj.val();
	v = v.replace(/¥n/g, '');
	obj.val(v);
};
$('textarea').on('blur', deleteLinefeed);

currentTargetで取得するのは、イベントを紐付けてあるオブジェクトです。
これと似たtargetでは、イベントを発動させたオブジェクトを取得できます。

参考:
三章第五回 イベントオブジェクト — JavaScript初級者から中級者になろう — uhyohyo.net