hi3103の備忘録

Sublime Text でファイルの差分比較ができるプラグイン。
以下2つのバージョンが存在する。
- Sublimerge 3
  - まだBeta版しかない。2018年10月を最後に動きなし。
  - Sublime Text 3 のみ対応
- Sublimerge 2 (Sublimerge Pro)
  - 安定版がリリースされている
  - Sublime Text 2 と 3 に対応

2023-09-23 追記

新しいPCを買ったのでセットアップしよーと思ったら、www.sublimerge.com 自体がなくなり、提供終了しておりました。悲しい。

手順

Package Controlで「Sublimerge Pro」を検索してインストール
購入済みのライセンスを有効化する
- ツールバー > Preferences > Package Settings > Sublimerge > Enter License を選択
- 画面下部に表示されたテキストボックスにライセンスキーを入力して Enter

使い方

開いているファイル同士を比較する場合

Ctrl + Shift + D で Sublimerge を実行
「Compare to View…」を選択
表示された候補から比較するファイルを選択
- 表示されない場合は、異なる Syntax が設定されている可能性あり
- Command Palette（Ctrl + Shift + P）の Set Syntax: 名前 で設定を変更してからリトライする
比較結果が表示される

クリップボードのテキストと比較する場合

Sublime Text 上に比較したいテキストを開く
- ファイルとして保存されていなくてもOK
Ctrl + Shift + D で Sublimerge を実行
「Compare to Clipboard」を選択
比較結果が表示される
- シンタックスハイライトは開いているファイルの Syntax 設定に応じて自動適用

参考URL

ファイル比較する方法 ~Sublimerge~

SublimeText に CSScomb を導入する

2017-03-28 12:00 2022-07-09 23:33

開発環境

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.

整列時の設定を変更する

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

写真.appについての覚書

2017-03-25 12:00 2022-07-09 23:33

Mac

macOS

メモ

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

ショートカットキー

新規作成
- スマートアルバム：option+cmd+N
- フォルダ：shift+cmd+N
編集
- 複製：cmd+D
表示
- キーワードマネージャ：cmd+K

存在しない

スマートアルバムを編集
アルバムを削除

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

スマートアルバム
タグ

考えられる理由

クラウドではなくハード側で都度絞込検索をかけている
- ハード側の性能が追いつかないため意図的に機能をつけていない

Sublime Text 3 に Emmet を導入する

2017-03-23 0:00 2022-08-21 11:31

開発環境

Emmetとは

Emmet — the essential toolkit for web-developers
https://emmet.io/

HTMLとCSSの記述を効率化するテキストエディタ用のプラグイン
2017年から利用しているが、いつだか仕様が変わり独自スニペットの登録などができなくなった（不便）
現在はHTMLを展開する用途でのみ使っている

手順

Package Controllから「Emmet」をインストール
Ctrl + E で展開できるように Key Binding を設定
展開時にコメントが挿入されるように Emmet のSetting – User を設定

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

2017-02-10 12:00 2022-07-09 23:33

開発環境

経緯

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

2018-10-24 追記

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

2020-07-08 追記

PackageDevの新規ファイル作成・コンバート手順・.YAML-tmLanguageファイルの書き方がちょっとわかったので使えるようになった。

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

2017-02-09 12:00 2022-07-09 23:33

Web

概要

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

成果物

https://hi3103.net/study/boxfilter_double/
https://hi3103.net/study/incboxfilter_double/
- incファイルの場合

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

式と演算子 – JavaScript | MDN

incboxfilter_select.js

2017-02-08 12:00 2022-07-09 23:33

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

change(fn) – jQuery 日本語リファレンス