Webブラウザの文字組版を改善するjQueryプラグインを開発したので、社内勉強会用に作成方法などをまとめました。 GitHubページ https://github.com/hokkey/jquery.yakumono ライブデモ http://codepen.io/hokkey/pen/zNzwQL

1. P R E S E N T A T I O N :
フロントエンドエンジニア 堀 祐磨(ほりでー)
約物アキを調整するjQuery
プラグインを作ってみた

2. 約物アキを調整するjQueryプラグインを作ってみた
何をするプラグインなのか
2

3. 約物アキを調整するjQueryプラグインを作ってみた3
https://github.com/hokkey/jquery.yakumono

4. 約物アキを調整するjQueryプラグインを作ってみた
「約物のアキ量」
4

5. 約物アキを調整するjQueryプラグインを作ってみた5
二分
アキ
全角 全角 半角
二分
アキ
「
全角 全角半角

6. 約物アキを調整するjQueryプラグインを作ってみた6
二分
アキ
全角 全角半角
二分
アキ
全角 全角 半角
全角 全角半角
二分
アキ
全角 全角 半角
。 」二分
アキ

7. 約物アキを調整するjQueryプラグインを作ってみた7
二分
アキ
｡ 」二分
アキ

8. 約物アキを調整するjQueryプラグインを作ってみた8

9. 約物アキを調整するjQueryプラグインを作ってみた9

10. 約物アキを調整するjQueryプラグインを作ってみた
トラッキング
カーニング
プロポーショナルメトリクス
…などとは関係のない、
日本語組版独自のルールが
「約物のアキ量」
10

11. 約物アキを調整するjQueryプラグインを作ってみた
InDesignの
「文字組みアキ量設定」
11

12. 約物アキを調整するjQueryプラグインを作ってみた12

13. 約物アキを調整するjQueryプラグインを作ってみた
機能要件
特定の文字列を持ったテキストノードに、CSS
からその文字の約物の種類や前後の文字との関
係を判断できるクラス名を付与する
行頭･行末を判定してクラス名を付与する
CSSで任意のセレクタに下記を適用する
font-feature-settings: "halt" 1;
13

14. 約物アキを調整するjQueryプラグインを作ってみた
jQueryプラグインの作り方
14

15. 約物アキを調整するjQueryプラグインを作ってみた
frontplate-cli + babel
15
https://github.com/frontainer/frontplate
※frontplateとはLIGが使用しているフロントエンド開発テンプレートのこと

16. jQueryプラグイン
Webpackしたくない!
16

17. 約物アキを調整するjQueryプラグインを作ってみた
package.jsonにbabelタスクを追記
17
これも

18. 約物アキを調整するjQueryプラグインを作ってみた
commonJS対応
(requireできるようにする)
18

19. 約物アキを調整するjQueryプラグインを作ってみた
commonJS対応
19
http://mae.chab.in/archives/2537
jQueryプラグインのCommonJS
モジュール化からnpmに公開する
までの方法
“

20. 約物アキを調整するjQueryプラグインを作ってみた
commonJS対応
20
http://mae.chab.in/archives/2537

21. 約物アキを調整するjQueryプラグインを作ってみた
実装
21

22. 約物アキを調整するjQueryプラグインを作ってみた
思ったよりも簡単に作れるよ!
22

23. 約物アキを調整するjQueryプラグインを作ってみた
プライベートメソッド:
ローカルなオブジェクトにぶらさげる。
パブリックメソッド:
「$.fn.プラグイン名」にぶらさげる
デフォルト設定オブジェクト:
「$.fn.プラグイン名.default」にぶらさげる
最後にthisを返してメソッドチェーンを有効にする
23

24. Thank you!
http://media-massage.net/
デザインとWeb開発とその他諸々。