SublimeTextにCSScombを導入する

2017-03-28 12:00
WEB

CSScombとは

CSScomb is a coding style formatter for CSS.

You can easily write your own configuration to make your stylesheets beautiful and consistent.

GitHub – csscomb/sublime-csscomb: Sublime plugin for CSScomb—CSS coding style formatter

スタイルシートを指定した設定で一括整形できるパッケージ

事前準備

  • 動かすにはnode.jsが必要になるので、ダウンロードしてインストールする。
  • インストール完了時に以下の案内がでた。

This package has installed:

  • Node.js v8.12.0 to /usr/local/bin/node
  • npm v6.4.1 to /usr/local/bin/npm

Make sure that /usr/local/bin is in your $PATH.

整列時の設定を変更する

  1. Preferences > Package Settings > CSScomb > Settings – Default を開き、中身をコピー
  2. Preferences > Package Settings > CSScomb > Settings – User を開き、ペーストした内容を書き換えて保存

写真.appについての覚書

2017-03-25 12:00
Mac

メモ

  • フォルダごと複製はできない。
  • 「すべての写真」は「追加日降順」から変更できない。
  • 「スクリーンショット」はおそらく「PNG」で引っ掛けてる。

ショートカットキー

  • 新規作成
    • スマートアルバム:option+cmd+N
    • フォルダ:shift+cmd+N
  • 編集
    • 複製:cmd+D
  • 表示
    • キーワードマネージャ:cmd+K
存在しない
  • スマートアルバムを編集
  • アルバムを削除

iOSでiCloudフォトライブラリによる同期をしても使えない機能

  • スマートアルバム
  • タグ
考えられる理由
  • クラウドではなくハード側で都度絞込検索をかけている
    • ハード側の性能が追いつかないため意図的に機能をつけていない

SublimeTextにEmmetを導入する

2017-03-23 0:00
Mac

Emmetとは

Emmet — the essential toolkit for web-developers

https://emmet.io/

HTMLとCSSの記述を効率化するテキストエディタ用のプラグイン

手順

  1. Package Controllから「Emmet」をインストール
  2. SublimeText自体のSetting – Userにほかの動作との衝突を回避する設定を記述
  3. EmmetのSetting – Userに展開時の設定を記述
Read More

Sublime Text 3 に PackageDev を使用してオリジナルのシンタックスハイライト設定を作る試み

2017-02-10 12:00
Mac

経緯

はてな記法を使ってテキストエディタで文章を書くことが多いので、はてな記法用のシンタックスハイライトを作りたい。

【2018-10-24追記】.YAML-tmLanguageファイルの書き方がガラリとかわっていたので、この記事の内容は使えない。後日再チャレンジする。

Read More

2つのプルダウンから要素の絞込表示をするjQuery – boxfilter_double.js

2017-02-09 12:00
WEB

概要

incboxfilter_select.jsをさらに改造して、2つのプルダウンセレクターで要素の絞込表示をする。

成果物

HTML
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<script src="js/boxfilter_double.js"></script>
	<title>boxfilter_double.js</title>
</head>
<body>

	<select name="filter_area" class="filters">
		<option value="area_all" selected="selected">Show All Area</option>
		<option value="area_1">Show Area_1</option>
		<option value="area_2">Show Area_2</option>
		<option value="area_3">Show Area_3</option>
		<option value="area_4">Show Area_4</option>
	</select>

	<select name="filter_genre" class="filters">
		<option value="genre_all" selected="selected">Show All Genre</option>
		<option value="genre_1">Show Genre_1</option>
		<option value="genre_2">Show Genre_2</option>
		<option value="genre_3">Show Genre_3</option>
	</select>

	<div class="boxes">
		<a class="area_1 genre_1 genre_2" href="#">Box1</a>
		<a class="area_2 genre_1 genre_3" href="#">Box2</a>
		<a class="area_3 genre_2 genre_3" href="#">Box3</a>
		<a class="area_4 genre_3" href="#">Box4</a>
		<a class="area_1 genre_1 genre_2 genre_3" href="#">Box5</a>
		<a class="area_2 genre_1 genre_2" href="#">Box6</a>
		<a class="area_3 genre_1 genre_3" href="#">Box7</a>
		<a class="area_4 genre_1 genre_2 genre_3" href="#">Box8</a>
		<a class="area_1 genre_1 genre_3" href="#">Box9</a>
		<a class="area_2 genre_1 genre_2 genre_3" href="#">Box10</a>
		<a class="area_3 genre_3" href="#">Box11</a>
		<a class="area_4 genre_1 genre_2 genre_3" href="#">Box12</a>
		<a class="area_1 genre_1 genre_2 genre_3" href="#">Box13</a>
		<a class="area_2 genre_1 genre_3" href="#">Box14</a>
		<a class="area_3 genre_1 genre_2" href="#">Box15</a>
		<a class="area_4 genre_1 genre_3" href="#">Box16</a>
		<a class="area_1 genre_3" href="#">Box17</a>
		<a class="area_2 genre_1 genre_2 genre_3" href="#">Box18</a>
		<a class="area_3 genre_1 genre_2 genre_3" href="#">Box19</a>
		<a class="area_4 genre_1 genre_2" href="#">Box20</a>
	</div>
</body>
</html>
boxfilter_double.js
$(document).ready(function(){

	var $boxes = $('.boxes a');

	$('select.filters').change(function () {
		$boxes.removeClass('match');

		$('select[name=filter_area] option:selected').each(function () {
			var $sa = $(this).attr('value');
			if($sa == 'area_all'){
				$boxes.addClass('match');
			}else if($boxes.hasClass($sa)){
				$boxes.filter('.'+$sa).addClass('match');
			}
		});
		$('select[name=filter_genre] option:selected').each(function () {
			var $sg = $(this).attr('value');
			if($sg != 'genre_all' && $boxes.hasClass('match')){
				$boxes.filter(':not(.'+$sg+')').removeClass('match');
			}
		});

		$boxes.fadeOut().promise().done(function() {
			$boxes.filter('.match').fadeIn();
		});
	});
});
style.CSS
@charset "UTF-8";

a {
	display: inline-block;
	text-decoration: none;
	text-align: center;
	margin-bottom: 1em;
	margin-right: 1em;
}

.boxes a {
	width: 10em;
	color:#CCC;
}

.area_1{ border: 2px solid gold; }
.area_2{ border: 2px solid lightblue; }
.area_3{ border: 2px solid lightgreen; }
.area_4{ border: 2px solid pink; }

.match{
	background-color: #000;
	color: #FFF;
}

参考URL

incboxfilter_select.js

2017-02-08 12:00
WEB

概要

読み込んだincファイルの要素を絞込表示するjQuery – incboxfilter.jsをプルダウンセレクターにしたバージョン。

スタイルもシンプルにした。

成果物

http://hi3103.net/study/incboxfilter_select/

HTML
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<script src="js/incboxfilter_select.js" charset="UTF-8"></script>
	<title>incboxfilter_select.js</title>
</head>
<body>

	<select name="filter">
		<option value="all" selected="selected">Show All</option>
		<option value="green">Show Green Boxes</option>
		<option value="blue">Show Blue Boxes</option>
		<option value="red">Show Red Boxes</option>
		<option value="hoge">Show Hoge Boxes</option>
	</select>

	<div class="boxes"></div>
</body>
</html>
incboxfilter_select.js
$(function(){
	$('.boxes').load('inc/box.inc', null, function() {
		var $filters = $('select[name=filter]');
		var $boxes = $('.boxes a');

		$filters.change(function () {
			$('select option:selected').each(function () {
				var $filterColor = $(this).attr('value');

				if ($filterColor == 'all') {
					$boxes.fadeOut().promise().done(function() {
						$boxes.fadeIn();
					});
				} else {
					$boxes.fadeOut().promise().done(function() {
						$boxes.filter('.'+$filterColor).fadeIn();
					});
				}
			});
		});
	});
});
box.inc
<a class="red" href="#">Box1</a>
<a class="green" href="#">Box2</a>
<a class="blue hoge" href="#">Box3</a>
<a class="green" href="#">Box4</a>
<a class="red" href="#">Box5</a>
<a class="green" href="#">Box6</a>
<a class="blue" href="#">Box7</a>
<a class="red hoge" href="#">Box8</a>
<a class="green" href="#">Box9</a>
<a class="blue" href="#">Box10</a>
<a class="red" href="#">Box11</a>
<a class="green hoge" href="#">Box12</a>
<a class="blue hoge" href="#">Box13</a>
<a class="green" href="#">Box14</a>
<a class="red" href="#">Box15</a>
<a class="blue" href="#">Box16</a>
style.css
@charset "UTF-8";

a {
	display: inline-block;
	text-decoration: none;
	text-align: center;
	margin-bottom: 1em;
	margin-right: 1em;
}

.boxes a {
	width: 10em;
	color:#FFF;
}

.green{
	background: lightgreen;
}
.blue{
	background: lightblue;
}
.red{
	background: lightcoral;
}
.hoge{
	border: 2px solid #000;
}

参考URL