TinyMCE でペースト時に不要なスタイルを削除する

TinyMCE | Content Filtering によると、TinyMCE を初期化する際に valid_styles または invalid_styles オプションを指定することで、不要なスタイルを削除できると書かれている。

tinymce.init({
	selector: 'textarea',  // change this value according to your HTML
	valid_styles: {
		'*': 'border,font-size',
		'div': 'width,height'
	}
});

しかしながらこの機能、エディタの初期化にしか効かないようで、Web ページや文書作成アプリケーションから貼り付けたときには不要なスタイルがついたままになってしまう。

これを解決するには TinyMCE の API を使用して

1. ペーストイベントを補足
2. コンテンツを走査
3. それぞれの要素に対して不要なスタイルを除去

という手順が必要になる。

具体的には初期化時に setup オプションを指定し、エディタごとにこの処理を登録してやればよい。

tinymce.init({
	selector: 'textarea',  // change this value according to your HTML
	valid_styles: {
		'*': 'border,font-size',
		'div': 'width,height'
	},
	setup: function(editor) {
		editor.on("paste", function(e) {
			// ペースト後に実行
			setTimeout(function() {
				// Styles クラスの機能に不要スタイルの除去がある
				var Styles = new tinymce.html.Styles({}, editor.schema);

				// TreeWalker を使用してすべての要素に対して操作を行う
				var walker = new tinymce.dom.TreeWalker(editor.getBody());
				do {
					var el = walker.current();
					if (!el.getAttribute) {
						continue;
					}
					// 各要素の style 属性を Styles クラスで解析すると
					// valid_styles, invalid_styles が適用されるので、
					// それをふたたび style 属性に書き込む
					var styleString = el.getAttribute("style");
					if (!styleString) {
						continue;
					}
					var s = Styles.parse(styleString);
					el.setAttribute("style", Styles.serialize(s, el.nodeName));
				} while (walker.next());
			});
		});
	},
});

iiiiiiii.com ooooiiii.com dabadabadab.com lalalaa.com で流れている音楽の元ネタ

目次

iiiiiiii

www.youtube.com
חוה אלברשטיין (Chava Alberstein) という歌手の בלדה על סוס עם כתם על המצח (額に斑のある馬のバラード) という曲

ooooiiii

www.youtube.com
イスラエルの טיפקס (Teapacks) というバンドの הרבי ג'ו כפרה (Harabi Joe Capara) という曲

Daba Daba Dab

www.youtube.com
イスラエルのソングライター Jonathan Geffen の Small Talk という曲。dabadabadab.com は現在ドメインの有効期限が切れている

Lalalaa

調べきれず

SVG ファイルをドロップするだけで最適化する (Windows)

Adobe Illustrator で SVG ファイルを書き出すと、次のように作成アプリケーションやレイヤーに関する情報など、余計なデータが含まれている。

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
	 y="0px" width="60px" height="60px" viewBox="0 0 60 60" enable-background="new 0 0 60 60" xml:space="preserve">
<g>
...

このような不要データを削除するツールとしておすすめなのが、その名も svgcleaner。同じようなツールである svgo や scour よりも SVG が壊れにくく、処理時間も短い。

• GitHub - RazrFalcon/svgcleaner: svgcleaner could help you to clean up your SVG files from the unnecessary data.

Linux, macOS, Windows 用のバイナリが配布されており Releases からダウンロードできる。

ためしに手元の SVG ファイル 9 個を最適化したところ、28,306 バイトあったデータが 20,533 バイト（73%）になった。

Windows でドロップレットを作る

最適化するファイル数が少ない場合はタスクランナー等をいちいち設定するより、ドラッグ・アンド・ドロップするだけで最適化を行えるドロップレットを作るのが便利だ。

Windows 版のバイナリはインストーラになっているので、まずはインストールする。そして次の内容の CleanSVG.bat というファイルを作成して適当なディレクトリに置く。

@echo off

set executable=C:\Program Files (x86)\SVG Cleaner\svgcleaner-cli.exe
set outdir=cleanSVG

:start

set dir=%~d1%~p1%outdir%
if exist %dir% goto clean
mkdir %dir%

:clean

"%executable%" %1 "%dir%\%~n1%~x1"

shift
if NOT x%1==x goto start

アイコンを変えたい場合は .bat へのショートカットを作るとよい。

また、エクスプローラーで SVG を縮小表示したい場合は svg-explorer-extension を使用するとよい。

• GitHub - maphew/svg-explorer-extension

Atom パッケージが公開できないときに

症状

Windows 10 環境で次のコマンドを使ってパッケージを公開しようとしたが失敗する。

> apm publish minor
Preparing and tagging a new version done
Pushing v0.1.0 tag failed

環境は次の通り。

> apm -v
apm  1.19.0
npm  3.10.10
node 6.9.5 x64
atom 1.29.0
python
git 2.17.1.windows.2
visual studio

解決法

手動で gitタグをプッシュして、タグを指定して公開する。

% git tag -a v0.1.0 -m 'First release'
% git push origin v0.1.0

なお apm コマンドは Linux subsystem 上ではなく Windows のコマンドプロンプト上で動かす必要があった。

> apm publish --tag v0.1.0
Publishing zap-to-char@v0.1.0 done

参考

• apm publishコマンドでAtomパッケージが公開できないときのトラブルシューティング
• git tagの使い方まとめ

商標登録・意匠登録できるフォント、できないフォント

フォント製品によってはフォントを使用したロゴタイプを商標登録したり、フォントを使用したパッケージやウェブサイト等を意匠登録することができないことがある。

代表的なフォントパッケージについて調べてみたところ、商標登録・意匠登録できないフォントパッケージは次のものがあった（2018年8月24日現在）。

• Morisawa Passport
• モトヤ LETS（別途契約で可）
• 字游工房 全製品
• 砧書体制作所 全製品（別途契約で可）

参照した使用許諾と商標登録の可否は以下の通り。

Adobe

• 可 Typekit
• 可 その他アドビ製品
  • アドビが所有する約 100 ファミリーに関しては可。他は不明

モリサワ

• 不可 Morisawa Passport
• 可 それ以外の買い切り製品
  • パスポートと違い禁止事項として明記されていない

フォントワークス

LETS 使用許諾

• 可 LETS, イワタ LETS, Monotype LETS
• 不可 モトヤ LETS
  • ロゴマークを商標登録する場合、申請前の契約（有償）および図案の提出が必要

Mojimo (-manga, -kirei, -kawaii, -oishii)

• 可 Mojimo-manga Mojimo-kirei Mojimo-kawaii Mojimo-oishii

字游工房

• 不可 游書体ライブラリー

砧書体制作所（旧カタオカデザインワークス）

• 不可 砧書体制作所
  • 商標登録には別途契約が必要

Axis Font

• 可 Axis Font

タイプラボ

• 可 タイプラボ

デザインシグナル

• 可 DS セレクト版
• 可 Font 1000 版