さくらVPSサーバー初期設定 – phpMyAdminのインストール
さくらVPSサーバー初期設定
Adobe Acrobatで見開きA3のPDFの右半分だけを印刷する方法
Sublime Text 3 に Sublimerge Pro を導入する
Sublimerge とは
Sublimerge
https://www.sublimerge.com/
- Sublime Text でファイルの差分比較ができるプラグイン。
- 以下2つのバージョンが存在する。
- Sublimerge 3
- まだBeta版しかない。2018年10月を最後に動きなし。
- Sublime Text 3 のみ対応
- Sublimerge 2 (Sublimerge Pro)
- 安定版がリリースされている
- Sublime Text 2 と 3 に対応
- Sublimerge 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
SublimeText に CSScomb を導入する
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についての覚書
メモ
- フォルダごと複製はできない。
- 「すべての写真」は「追加日降順」から変更できない。
- 「スクリーンショット」はおそらく「PNG」で引っ掛けてる。
ショートカットキー
-
新規作成
- スマートアルバム：option+cmd+N
- フォルダ：shift+cmd+N
-
編集
- 複製：cmd+D
-
表示
- キーワードマネージャ：cmd+K
存在しない
- スマートアルバムを編集
- アルバムを削除
iOSでiCloudフォトライブラリによる同期をしても使えない機能
- スマートアルバム
- タグ
考えられる理由
- クラウドではなくハード側で都度絞込検索をかけている
- ハード側の性能が追いつかないため意図的に機能をつけていない
Sublime Text 3 に Emmet を導入する
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 を使用してオリジナルのシンタックスハイライト設定を作る試み
経緯
はてな記法を使ってテキストエディタで文章を書くことが多いので、はてな記法用のシンタックスハイライトを作りたい。
- 2018-10-24 追記
- .YAML-tmLanguageファイルの書き方がガラリとかわっていたので、この記事の内容は使えない。後日再チャレンジする。
- 2020-07-08 追記
- PackageDevの新規ファイル作成・コンバート手順・.YAML-tmLanguageファイルの書き方がちょっとわかったので使えるようになった。
2つのプルダウンから要素の絞込表示をするjQuery – boxfilter_double.js
概要
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;
}