mashabow

こんにちは、ソーシャルPLUS でフロントエンド開発をしている id:mashabow です。ここ最近「issue の複製めんどくさいなー。もっと楽にできればいいのに」と思うことが多かったので、issue をまるっと複製してくれる GitHub Action「Issue Duplicator」を個人で作ってみました。というわけで、今回はこの Issue Duplicator の紹介です。github.comgithub.comちなみにこの記事は、Feedforce Group Advent Calendar 2022の 4 日目の記事です。3 日目は、かくさんの『セロペギアボッセリに学ぶ、鈴木さんとの接し方』でした。子育て 1 年目な自分にとっては「変数多すぎな。」がとても印象的でした。わかる。（そういう話じゃない？）Issue Duplicator でできること複製したい issue に /duplicate とだけ書いたコメントをつけると、その issue をまるっと複製した新しい issue を、同じリポジトリに作ってくれます。GitHub projects のカスタムフィールドも複製するので、project 上で見るとこんな感じ。複製される項目の詳細は、以下のとおりです。Title（issue のタイトル）Body（issue の本文）1AssigneesLabelsMilestoneその issue が紐付けられている GitHub projectsproject のカスタムフィールドの値も、すべてコピーされますなお、以下の項目は複製されません。issue についているコメントAuthor（アクションに設定する personal access token を発行したユーザーが Author になります）issue が open か closed か（常に open で作成されます）issue がロックされているか否か（非ロック状態で作成されます）Issue Duplicator の使い方Issue Duplicator を動かしたいリポジトリに、以下のワークフローを作成します。# .github/workflows/issue-duplicator.ymlname: Issue Duplicatoron:  issue_comment:    types: [created, edited]jobs:  run:    runs-on: ubuntu-latest    steps:      - uses: mashabow/issue-duplicator-action@v1        with:          github-token: ${{ secrets.ISSUE_DUPLICATOR_PAT }}次に、repo スコープと project スコープを持つ personal access token を発行しましょう。そして、その personal access token を、ISSUE_DUPLICATOR_PAT という名前でリポジトリのシークレットに登録すれば準備完了です。適当な issue に /duplicate というコメントを付けて、ちゃんと複製されるか確認しましょう！ 複製に成功すると、新しい issue へのリンクが追加されます。ログを確認したい場合は、リポジトリの Actions タブから。Issue Duplicator を作った経緯わたしの所属するソーシャル PLUS 開発チームでは、メンバーが増えてきたこともあって先月から大規模スクラム Large-Scale Scrum（LeSS） を導入しています。これを機に、今までのスクラムのやり方を見直し、改善することになりました。プロダクトバックログはもともと issue と GitHub projects で管理しており、それは引き続き使っていくんですが、1 スプリントでプロダクトバックログアイテムを 4 つほど消化できるように、アイテムの粒度をもっと細かくしたいリファインメントやプランニングの場で、どんどんプロダクトバックログアイテムを分割したいというのが変化点でした。LeSS を導入するにあたって『大規模スクラム Large-Scale Scrum（LeSS）―アジャイルとスクラムを大規模に実装する方法]』という本を読んだんですが、プロダクトバックログアイテムの分割については、9 章と 11 章で 20 ページほどを割いて、詳しく解説されています。大規模スクラム Large-Scale Scrum(LeSS) アジャイルとスクラムを大規模に実装する方法丸善出版Amazonさて、このプロダクトバックログアイテム（1つのアイテムを1つの issue として管理しています）をいざ分割しようとすると、次の手順を踏むことになります。分割元の issue とは別に、新しい issue を作る元の issue の本文を新しい issue の本文にコピペして、適宜編集する新しい issue にラベルやマイルストーンをつける新しい issue をプロダクトバックログの project に追加する新しい issue の、project のカスタムフィールド（優先度・ポイント・担当チームなど）を埋める……面倒ですよね。実際に何度か分割してみましたが、やっぱり面倒です。分割元の issue と、新しく作った issue とでは、ラベル・マイルストーン・Project のカスタムフィールドなどはだいたいが共通になるでしょう。もちろん、分割して別々のアイテムになったわけですから、細部は異なりますが。というわけで、「issue をまるっと複製してくれる便利ツールがあれば助かるのでは…？」と考えました。とりあえず複製して、変えたい箇所は手で編集すればいいか、と。調べてみたら Duplicate Issue という GitHub Action がありましたが、残念ながら GitHub projects には対応していません。じゃあいい機会だし作ってみるか、と自作することにしました。アクションを自作するアクションの作り方には何種類かありますが、普段 TypeScript を書いている身にとっては、JavaScript アクションというものを開発するのがとっつきやすそうでした。Creating a JavaScript action - GitHub DocsTypeScript で開発するためのテンプレートが公式で用意されていたので、今回はこちらを使ってみました。が、README に詳しいことが書かれていなかったり、ビルド済みのファイルをコミットする必要があったり、使い勝手は正直微妙です。github.comスクリプトの書き方はいたってシンプルで、入出力に @actions/core の関数を使う以外は、基本的には普通の Node.js のスクリプトと同じです。詳しい書き方については、公式のドキュメントもネット上の日本語記事も充実しているので、ここでは割愛します。今回は issue の複製をしたいので、GitHub の Web API を利用します。@actions/github を使うと、Octokit で簡単に API を叩くことができます。// Octokit を使って issue を複製するimport * as github from "@actions/github";const octokit = github.getOctokit(token);// https://docs.github.com/en/rest/issues/issues#create-an-issueconst { data: createdIssue } = await octokit.rest.issues.create({  owner: repository.owner.login,  repo: repository.name,  title: originalIssue.title,  body: originalIssue.body ?? undefined,  milestone: originalIssue.milestone?.number,  labels: originalIssue.labels,  assignees: originalIssue.assignees.map(({ login }) => login),});次に、新しく作った issue を GitHub project に追加したいわけですが、project 関連の API は REST では提供されていません。そのため、GraphQL の方を使う必要があります。オブジェクトの一覧を見ると、Project・ProjectV2・ProjectNext と似たようなオブジェクトが 3 つもありますが、今回使うのは ProjectV2 です。ややこしいですね。Project: 古いバージョンの project (classic)ProjectV2: 新しい高機能な projectProjectNext: ProjectV2 の以前の名前。廃止予定また、ProjectV2 の中のそれぞれのアイテム（issue・PR・ドラフト）は、ProjectV2Item という名前になっています。以下は Octokit で GraphQL API を叩く例です。// issue を project に追加するconst data = await octokit.graphql(  `  mutation addIssueToProject($input: AddProjectV2ItemByIdInput!) {    addProjectV2ItemById(input: $input) {      item {        id      }    }  }`,  { input: { projectId, contentId: issueId } });特にハマりどころもなく素直に使えますが、残念なことに、そのままでは引数や戻り値の型がつきません。octokit.graphql に型をつけるせっかく TypeScript で開発しているんですから、やっぱり型が欲しい。ということで、GraphQL Code Generator を使って型をつけてみました2。GraphQL Code Generator を以下のように設定して、// codegen.tsimport type {CodegenConfig} from '@graphql-codegen/cli'const config: CodegenConfig = {  overwrite: true,  schema: 'https://docs.github.com/public/schema.docs.graphql',  documents: 'src/**/*.graphql',  generates: {    'src/graphql/index.ts': {      plugins: [        'typescript',        'typescript-operations', // 各 operation から型を生成する        'typescript-generic-sdk' // SDK（各 operation を実行する関数群）を生成する      ],      config: {        documentMode: 'string' // operation の中身を文字列としてリクエスト関数に渡す      }    }  }}export default configGraphQL の operation のファイルを用意します。# src/graphql/addIssueToProject.graphqlmutation addIssueToProject($input: AddProjectV2ItemByIdInput!) {  addProjectV2ItemById(input: $input) {    item {      id    }  }}そして GraphQL Code Generator を実行。$ yarn graphql-codegen --config codegen.tsすると、以下のようなファイルが生成されます。// src/graphql/index.ts// この上にはスキーマから生成された型定義がひたすら書かれている（省略）// operation の変数の型export type AddIssueToProjectMutationVariables = Exact<{  input: AddProjectV2ItemByIdInput;}>;// operation の結果の型export type AddIssueToProjectMutation = { __typename?: 'Mutation', addProjectV2ItemById?: { __typename?: 'AddProjectV2ItemByIdPayload', item?: { __typename?: 'ProjectV2Item', id: string } | null } | null };// operation の中身そのものexport const AddIssueToProjectDocument = `    mutation addIssueToProject($input: AddProjectV2ItemByIdInput!) {  addProjectV2ItemById(input: $input) {    item {      id    }  }}    `;// リクエスト関数の型export type Requester<C = {}, E = unknown> = <R, V>(doc: string, vars?: V, options?: C) => Promise<R> | AsyncIterable<R>// リクエスト関数から SDK（各 operation を実行する関数群）を作る関数export function getSdk<C, E>(requester: Requester<C, E>) {  return {    addIssueToProject(variables: AddIssueToProjectMutationVariables, options?: C): Promise<AddIssueToProjectMutation> {      return requester<AddIssueToProjectMutation, AddIssueToProjectMutationVariables>(AddIssueToProjectDocument, variables, options) as Promise<AddIssueToProjectMutation>;    }    // この例では operation が1つだけだが、複数の operation があれば、関数がここに並ぶ  };}// SDK の型export type Sdk = ReturnType<typeof getSdk>;これだけだとどう使うのかわかりにくいかもしれませんが、以下の使用例を見ればイメージが付くんじゃないでしょうか。import { getSdk } from "./graphql";// octokit.graphql をリクエスト関数として利用する SDK を作るconst sdk = getSdk(octokit.graphql);// addIssueToProject を実行const data = await sdk.addIssueToProject({  input: { projectId, contentId: issueId },});もちろん、sdk.addIssueToProject の引数と戻り値にはちゃんと型が付きます！アクションを公開する今回は TypeScript で開発したので、公開する前にビルド（JavaScript へのトランスパイル）を行う必要があります。公式ドキュメントで紹介されていた JasonEtco/build-and-tag-action を使ってみましたが、以下のような少し癖のある動作をします。GitHub の Web UI から、ビルドしたいコミットを指定してリリースを作成するリリースが作成されると、JasonEtco/build-and-tag-action によって以下の処理が実行されるそのコミットのソースコードをビルドするビルドされた dist/index.js と action.yml だけ のコミットを、何のブランチにも属していない状態で新しく作る1 で作成したリリースを、その新しいコミットで置き換える1 で作成したリリースのバージョンに応じて、v1.2.3, v1.2, v1 などのタグを打つ（もしくは移動させる）これがドキュメントからは読み取りづらく、最初戸惑いました。ビルド後の新しいコミットに README.md が入っていないのも、いまいちな点です。作成したアクションは、審査不要で GitHub Marketplace に掲載することができます。こちらについては、ドキュメントと UI 上の案内に従っていけば、とても簡単に公開できました。GitHub Marketplaceでのアクションの公開 - GitHub Docsおわりにというわけで、Feedforce Group Advent Calendar 2022の 4 日目は Issue Duplicator を自作した話でした。github.com書いてから気づいたんですが、こんな真面目な記事じゃなくて、3 月に生まれた息子のかわいさをひたすら語る記事にすればよかったですね。明日はサラリーマン会計士のあの方が、テントサウナについて語ってくださるそうです。楽しみですね！note.com↩octokit.graphql に型をつける方法、需要は多いはずなんですが、調べ方が悪かったのか検索してもあまり出てきませんでした。定番の方法をご存じの方がいればぜひご教示ください。↩

GitHub の issue をまるっと複製する GitHub Action「Issue Duplicator」を自作した

<p>LINEで使える3種類の絵文字について、昨年末の<a href="https://developer.feedforce.jp/archive/category/FFTT">社内勉強会</a>でざっくりと解説しました。そのときのスライドを上げておきます。ざっくり概観なので、厳密でない表現や調査が不十分な箇所はありますが、雰囲気はつかめるんじゃないでしょうか。</p>

<iframe class="speakerdeck-iframe" style="border: 0px none; background: rgba(0, 0, 0, 0.1) none repeat scroll 0% 0% padding-box; margin: 0px; padding: 0px; border-radius: 6px; box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 40px; width: 560px; height: 314px;" src="https://speakerdeck.com/player/535cc3eccd204aeca4e9ce68e8175768" title="LINE絵文字概観 / FFTT #465" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true" data-ratio="1.78343949044586" frameborder="0"></iframe>


<h2>参考ページ</h2>

<ul>
<li><a href="https://linecorp.com/ja/pr/news/ja/2018/2160">【LINE】「デコ文字」に続き、トークがもっと楽しくなる新機能が登場　人気キャラクターが“絵文字”になった「LINE絵文字」を本日より発売開始 | ニュース | LINE株式会社</a></li>
<li><a href="https://linecorp.com/ja/pr/news/ja/2018/2410">【LINE Creators Market】LINE、「LINEクリエイターズ絵文字」を2018年11月中に販売開始、絵文字制作に関する申請ガイドラインを本日より公開 | ニュース | LINE株式会社</a></li>
<li><a href="https://linecorp.com/ja/pr/news/ja/2021/3898">LINE、メッセージ内で動く「アニメーション絵文字」を発売開始 | ニュース | LINE株式会社</a></li>
<li><a href="https://creator.line.me/ja/guideline/emoji/">絵文字 ―ガイドライン - LINE Creators Market</a></li>
<li><a href="https://unicode.org/emoji/charts/emoji-versions.html">Emoji Versions, v14.0</a></li>
<li><a href="https://unicode.org/emoji/charts/emoji-counts.html">Emoji Counts, v14.0</a></li>
<li><a href="https://developers.line.biz/ja/docs/messaging-api/emoji-list/">送信可能なLINE絵文字リスト | LINE Developers</a></li>
<li><a href="https://www.rfc-editor.org/rfc/rfc8259.html#section-8.1">8.1. Character Encoding ― RFC 8259: The JavaScript Object Notation (JSON) Data Interchange Format</a></li>
<li><a href="https://www.unicode.org/versions/Unicode14.0.0/ch23.pdf#page=23">23.5 Private-Use Characters ― The Unicode Standard Version 14.0</a></li>
<li><a href="https://store.line.me/emojishop/home/creators/ja">LINE クリエイターズ絵文字 - 話題の新着絵文字など | LINE STORE</a></li>
<li><a href="https://developers.line.biz/ja/docs/messaging-api/message-types/#text-messages">テキストメッセージ ― メッセージタイプ | LINE Developers</a>（送信側）</li>
<li><a href="https://developers.line.biz/ja/reference/messaging-api/#wh-text">テキスト ― Messaging APIリファレンス | LINE Developers</a>（受信側）</li>
<li><a href="https://store.line.me/emojishop/product/5bc84438031a6704f8cff722/ja">カナヘイのピスケ&amp;うさぎ 絵文字 2 - LINE絵文字 | LINE STORE</a></li>
<li><a href="https://emojipedia.org/shortcodes/">⏩ Emoji Shortcodes</a></li>
<li><a href="https://developers.line.biz/ja/news/2021/11/30/line-original-unicode-emojis-will-be-discontinued/">ニュース：2022年3月31日をもって、Messaging APIの「LINE独自のUnicode絵文字」を廃止します | LINE Developers</a></li>
</ul>



LINEで使える3種類の絵文字について、昨年末の社内勉強会でざっくりと解説しました。そのときのスライドを上げておきます。ざっくり概観なので、厳密でない表現や調査が不十分な箇所はありますが、雰囲気はつかめるんじゃないでしょうか。参考ページ【LINE】「デコ文字」に続き、トークがもっと楽しくなる新機能が登場　人気キャラクターが“絵文字”になった「LINE絵文字」を本日より発売開始 | ニュース | LINE株式会社【LINE Creators Market】LINE、「LINEクリエイターズ絵文字」を2018年11月中に販売開始、絵文字制作に関する申請ガイドラインを本日より公開 | ニュース | LINE株式会社LINE、メッセージ内で動く「アニメーション絵文字」を発売開始 | ニュース | LINE株式会社絵文字 ―ガイドライン - LINE Creators MarketEmoji Versions, v14.0Emoji Counts, v14.0送信可能なLINE絵文字リスト | LINE Developers8.1. Character Encoding ― RFC 8259: The JavaScript Object Notation (JSON) Data Interchange Format23.5 Private-Use Characters ― The Unicode Standard Version 14.0LINE クリエイターズ絵文字 - 話題の新着絵文字など | LINE STOREテキストメッセージ ― メッセージタイプ | LINE Developers（送信側）テキスト ― Messaging APIリファレンス | LINE Developers（受信側）カナヘイのピスケ&うさぎ 絵文字 2 - LINE絵文字 | LINE STORE⏩ Emoji Shortcodesニュース：2022年3月31日をもって、Messaging APIの「LINE独自のUnicode絵文字」を廃止します | LINE Developers

LINE絵文字概観

<p><img src="https://rewired.cloud/wp-content/uploads/2021/11/211108_appmenu_TITLE-520x300.png" class="webfeedsFeaturedVisual" width="520" height="300" /></p>こんにちは、mashabow です。LINE で CRM を実現する Shopify アプリ「ソーシャルPLUS」の、フロントエンド開発を担当しています。 アプリに機能が増えてくると、埋め込みアプリ（マーチャントの方に触 ... 

こんにちは、mashabow です。LINE で CRM を実現する Shopify アプリ「ソーシャルPLUS」の、フロントエンド開発を担当しています。 アプリに機能が増えてくると、埋め込みアプリ（マーチャントの方に触 ...

Shopifyの埋め込みアプリにメニューをつける方法

<p><a href="https://socialplus.jp/">ソーシャルPLUS</a> の <a href="http://blog.hatena.ne.jp/mashabow/" class="hatena-id-icon"><img src="https://cdn.profile-image.st-hatena.com/users/mashabow/profile.png" width="16" height="16" alt="" class="hatena-id-icon">id:mashabow</a> です。今回は、個人で開発している Slack アプリ <a href="https://github.com/mashabow/slack-rota">Rota</a> を OAuth に対応させたときに、へーっと思った話の紹介です。</p>

<p>ちなみにこの Rota は、指定した曜日・時間が来るたびに、ローテーションを順次お知らせしてくれる Slack アプリです。</p>

<p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/m/mashabow/20211025/20211025113857.png" alt="f:id:mashabow:20211025113857p:plain" width="1338" height="242" loading="lazy" title="" class="hatena-fotolife" itemprop="image"></span></p>

<p><iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fgithub.com%2Fmashabow%2Fslack-rota" title="GitHub - mashabow/slack-rota: 日々のローテーションをお知らせする Slack アプリ" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://github.com/mashabow/slack-rota">github.com</a></cite></p>

<h2>経緯</h2>

<p>この Slack アプリ Rota は、Slack 公式が出している <a href="https://slack.dev/bolt-js/ja-jp/tutorial/getting-started">Bolt</a> というフレームワークを使っています。</p>

<p><iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fslack.dev%2Fbolt-js%2Fja-jp%2Ftutorial%2Fgetting-started" title="Slack | Bolt for JavaScript" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://slack.dev/bolt-js/ja-jp/tutorial/getting-started">slack.dev</a></cite></p>

<p>Slack アプリを任意のワークスペースにインストールしてもらうためには、OAuth に対応させる必要があります。今回は Bolt のおかげで<a href="https://github.com/mashabow/slack-rota/issues/43">比較的簡単に対応できた</a>のですが、その中で出てきた <code>stateSecret</code> というオプションがどう使われるのか、いまいちわかりません。Bolt の<a href="https://slack.dev/bolt-js/ja-jp/reference#%E3%83%AC%E3%82%B7%E3%83%BC%E3%83%90%E3%83%BC%E3%82%AA%E3%83%97%E3%82%B7%E3%83%A7%E3%83%B3">リファレンス</a>には</p>

<blockquote><p>  CSRF 攻撃を防ぐために OAuth の設定時に渡すことができる、推奨のパラメーター（文字列）。</p></blockquote>

<p>と説明があるので、OAuth の <code>state</code> パラメータに関係がありそうですが……。</p>

<p>というわけで、気になって中身をのぞいてみました。</p>

<h2><code>state</code> パラメータのおさらい</h2>

<p>その前に、そもそも OAuth の <code>state</code> パラメータって何？という方もいるかもしれません。こちらの記事で非常にわかりやすく図解されているのですが、要は <strong>CSRF 対策</strong>のためのものです。</p>

<p><iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Ftech-lab.sios.jp%2Farchives%2F8492" title="OAuthやOpenID Connectで使われるstateパラメーターについて | SIOS Tech. Lab" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://tech-lab.sios.jp/archives/8492">tech-lab.sios.jp</a></cite></p>

<p>この記事に倣って図解すると、Slack アプリの場合はこういう関係ですね。</p>

<p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/m/mashabow/20211022/20211022222035.png" alt="f:id:mashabow:20211022222035p:plain" width="2000" height="1120" loading="lazy" title="" class="hatena-fotolife" itemprop="image"></span></p>

<p><code>state</code> パラメータを使うと 3. の前でチェックが入るため、このような CSRF 攻撃を防ぐことができます。</p>

<p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/m/mashabow/20211022/20211022222117.png" alt="f:id:mashabow:20211022222117p:plain" width="2000" height="1121" loading="lazy" title="" class="hatena-fotolife" itemprop="image"></span></p>

<h2>保存をしない state store…？</h2>

<p>話を戻して、Bolt の <code>stateSecret</code> オプションを追いかけてみます。Bolt の OAuth まわりの処理は、<a href="https://github.com/slackapi/node-slack-sdk/tree/%40slack/oauth%402.3.0/packages/oauth">@slack/oauth</a> というライブラリで実装されています。@slack/oauth の README を読んでみると、<a href="https://github.com/slackapi/node-slack-sdk/blob/%40slack/oauth%402.3.0/packages/oauth/README.md#using-a-custom-state-store">Using a custom state store</a> に説明がありました。</p>

<blockquote><p>A state store handles generating the OAuth <code>state</code> parameter in the installation URL for a given set of options, and verifying the <code>state</code> in the OAuth callback and returning those same options.</p></blockquote>

<p>ふむふむ。ここまでは上で確認したような話ですね。<code>state</code> パラメータを生成しておいて、コールバック（認可画面からのリダイレクト）のときにその値が正しいかチェックする。そして、@slack/oauth が <em>options</em> と呼んでいるオブジェクト（Slack ワークスペースの ID やスコープの情報が入る）を返します。このようなインターフェイスを、state store と言っているようです。</p>

<p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/m/mashabow/20211022/20211022222224.png" alt="f:id:mashabow:20211022222224p:plain" width="2000" height="1120" loading="lazy" title="" class="hatena-fotolife" itemprop="image"></span></p>

<p>次に行きます。state store のデフォルトの実装である <code>ClearStateStore</code>の説明です。</p>

<blockquote><p>The default state store, <code>ClearStateStore</code>, does not use any storage. Instead, it signs the options (using the <code>stateSecret</code>) and encodes them along with a signature into <code>state</code>. Later during the OAuth callback, it verifies the signature.</p></blockquote>

<p>なんと。state store という名前から「どこかに <code>state</code> パラメータと options の組を保存するんだろうな」と思っていたんですが、<code>ClearStateStore</code> では<strong>どちらも保存していない</strong>ようです。</p>

<h2>JWT を使った <code>ClearStateStore</code></h2>

<p>では、<code>ClearStateStore</code> の実装を見てみましょう。以下に出てくる <code>sign()</code> と <code>verify()</code> は、JWT を扱うための npm ライブラリ <a href="https://www.npmjs.com/package/jsonwebtoken">jsonwebtoken</a> の関数です。</p>

<p><a href="https://github.com/slackapi/node-slack-sdk/blob/%40slack/oauth%402.3.0/packages/oauth/src/index.ts#L17-L36">node-slack-sdk/index.ts at @slack/oauth@2.3.0 &middot; slackapi/node-slack-sdk &middot; GitHub</a></p>

<pre class="code lang-typescript" data-lang="typescript" data-unlink><span class="synStatement">public</span> <span class="synStatement">async</span> generateStateParam<span class="synStatement">(</span>installOptions: InstallURLOptions<span class="synStatement">,</span> now: <span class="synSpecial">Date</span><span class="synStatement">)</span>: <span class="synSpecial">Promise</span><span class="synStatement">&lt;</span><span class="synType">string</span><span class="synStatement">&gt;</span> <span class="synIdentifier">{</span>
  <span class="synStatement">return</span> sign<span class="synStatement">(</span><span class="synIdentifier">{</span> installOptions<span class="synStatement">,</span> now: now.toJSON<span class="synStatement">()</span> <span class="synIdentifier">}</span><span class="synStatement">,</span> <span class="synIdentifier">this</span>.stateSecret<span class="synStatement">);</span>
<span class="synIdentifier">}</span>
</pre>


<p>認可画面に遷移する際、<code>generateStateParam()</code> で  <code>state</code> パラメータを生成します。ここでは、options （上のコードでは <code>installOptions</code>）と時刻をペイロードとする JWT を生成して、返しています。冒頭で「なにこれ？」と思った <strong><code>stateSecret</code> は、JWT の署名に使う共通鍵</strong>だったんですね。</p>

<p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/m/mashabow/20211022/20211022222430.png" alt="f:id:mashabow:20211022222430p:plain" width="2000" height="1120" loading="lazy" title="" class="hatena-fotolife" itemprop="image"></span></p>

<pre class="code lang-typescript" data-lang="typescript" data-unlink><span class="synStatement">public</span> <span class="synStatement">async</span> verifyStateParam<span class="synStatement">(</span>_now: <span class="synSpecial">Date</span><span class="synStatement">,</span> state: <span class="synType">string</span><span class="synStatement">)</span>: <span class="synSpecial">Promise</span><span class="synStatement">&lt;</span>InstallURLOptions<span class="synStatement">&gt;</span> <span class="synIdentifier">{</span>
  <span class="synComment">// decode the state using the secret</span>
  <span class="synType">const</span> decoded: StateObj <span class="synStatement">=</span> verify<span class="synStatement">(</span>state<span class="synStatement">,</span> <span class="synIdentifier">this</span>.stateSecret<span class="synStatement">)</span> <span class="synStatement">as</span> StateObj<span class="synStatement">;</span>

  <span class="synComment">// return installOptions</span>
  <span class="synStatement">return</span> decoded.installOptions<span class="synStatement">;</span>
<span class="synIdentifier">}</span>
</pre>


<p>認可後のリダイレクトでは、<code>verifyStateParam()</code> で  <code>state</code> パラメータを検証します。ここでは、共通鍵 <code>stateSecret</code> で JWT の署名を検証しています。ペイロードが改竄されていればここでエラーになり、処理が中断されます。検証が通ったら、ペイロードの options を取り出して返します。</p>

<p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/m/mashabow/20211022/20211022222510.png" alt="f:id:mashabow:20211022222510p:plain" width="2000" height="1120" loading="lazy" title="" class="hatena-fotolife" itemprop="image"></span></p>

<h2>CSRF 対策になっていることを確認</h2>

<p>この <code>ClearStateStore</code> で本当に CSRF 攻撃が防げるのか、確認してみましょう。</p>

<p>まずは通常の攻撃シナリオ。悪い人が自分のワークスペースで認可を行い、リダイレクト URL を取得します（1.）。このリダイレクト URL には、<code>state</code> パラメータが含まれています。このリダイレクト URL をそのまま A さんに送りつけ、 A さんに踏ませる（2.）とどうなるでしょうか？</p>

<p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/m/mashabow/20211022/20211022222531.png" alt="f:id:mashabow:20211022222531p:plain" width="2000" height="1121" loading="lazy" title="" class="hatena-fotolife" itemprop="image"></span></p>

<p>Slack アプリの <code>ClearStateStore</code> は、まず  <code>state</code> パラメータの有効性を検証します（3.）。JWT の署名を検証するわけですが、このシナリオでは、悪い人の JWT は何も改竄されていません。したがって、<strong>JWT は有効</strong>だと判断され、処理は続行されます。次に、JWT から options を取り出し（4.）、これを使って Slack からアクセストークンを取得します（5.）。Slack からは悪い人のアクセストークンが返ってきますが、Slack アプリは<strong>それを悪い人のアクセストークンだとして（正しく）格納</strong>します（6.）。したがって、A さんには何も影響ありません。</p>

<p>別のシナリオも検討してみます。先ほどのシナリオで見たように、Slack アプリは JWT から options を取り出し、アクセストークンを取得・格納していました。JWT の中の options を書き換えれば、悪い人のアクセストークンを A さんのものとして格納できないでしょうか？</p>

<p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/m/mashabow/20211022/20211022222547.png" alt="f:id:mashabow:20211022222547p:plain" width="2000" height="1120" loading="lazy" title="" class="hatena-fotolife" itemprop="image"></span></p>

<p>はい、これは JWT の署名検証で引っかかるので、不可能ですね。</p>

<p>以上のことから、一般的な <code>state</code> パラメータの実装と同じく、<code>ClearStateStore</code> でも CSRF 対策になっていることがわかりました。</p>

<h2>まとめ</h2>

<p>というわけで、JWT をうまいこと使うと、<code>state</code> パラメータを OAuth クライアントに保存しておく必要がなくなります。通常の実装だと、生成した <code>state</code> パラメータを適当な key-value ストアなどに保存しますが、これが不要になるのは楽ですね。ステートレスになるので FaaS との相性もよくなります（とはいえもちろん、取得したアクセストークンはどこかに保存しておく必要があります）。</p>

<p>今回は Bolt を使って Slack アプリのインストール処理を実装しましたが、OAuth まわりの詳細についてはほとんど意識することなく実現でき、かなり楽ちんで快適でした。よく考えられてますね。</p>

<h2>おまけ</h2>

<p>ソーシャルPLUS では、現在フロントエンドエンジニア・バックエンドエンジニアを募集中です。Shopify アプリのリリースや LINE 社との業務提携を経て、やりたいことがますます盛りだくさんな状況です。</p>

<p><iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fopen.talentio.com%2F1%2Fc%2Ffeedforce%2Frequisitions%2Fdetail%2F21755" title="フロントエンドエンジニア【Shopifyアプリ開発/ID連携サービス/React/TypeScript】 / 株式会社フィードフォース" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://open.talentio.com/1/c/feedforce/requisitions/detail/21755">open.talentio.com</a></cite></p>

<p><iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fopen.talentio.com%2F1%2Fc%2Ffeedforce%2Frequisitions%2Fdetail%2F21802" title="Railsエンジニア【Shopify App開発/ID連携サービス】 / 株式会社フィードフォース" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://open.talentio.com/1/c/feedforce/requisitions/detail/21802">open.talentio.com</a></cite></p>

<p>ご興味ありましたら、カジュアル面談にぜひどうぞ！</p>


ソーシャルPLUS の id:mashabow です。今回は、個人で開発している Slack アプリ Rota を OAuth に対応させたときに、へーっと思った話の紹介です。ちなみにこの Rota は、指定した曜日・時間が来るたびに、ローテーションを順次お知らせしてくれる Slack アプリです。github.com経緯この Slack アプリ Rota は、Slack 公式が出している Bolt というフレームワークを使っています。slack.devSlack アプリを任意のワークスペースにインストールしてもらうためには、OAuth に対応させる必要があります。今回は Bolt のおかげで比較的簡単に対応できたのですが、その中で出てきた stateSecret というオプションがどう使われるのか、いまいちわかりません。Bolt のリファレンスには  CSRF 攻撃を防ぐために OAuth の設定時に渡すことができる、推奨のパラメーター（文字列）。と説明があるので、OAuth の state パラメータに関係がありそうですが……。というわけで、気になって中身をのぞいてみました。state パラメータのおさらいその前に、そもそも OAuth の state パラメータって何？という方もいるかもしれません。こちらの記事で非常にわかりやすく図解されているのですが、要は CSRF 対策のためのものです。tech-lab.sios.jpこの記事に倣って図解すると、Slack アプリの場合はこういう関係ですね。state パラメータを使うと 3. の前でチェックが入るため、このような CSRF 攻撃を防ぐことができます。保存をしない state store…？話を戻して、Bolt の stateSecret オプションを追いかけてみます。Bolt の OAuth まわりの処理は、@slack/oauth というライブラリで実装されています。@slack/oauth の README を読んでみると、Using a custom state store に説明がありました。A state store handles generating the OAuth state parameter in the installation URL for a given set of options, and verifying the state in the OAuth callback and returning those same options.ふむふむ。ここまでは上で確認したような話ですね。state パラメータを生成しておいて、コールバック（認可画面からのリダイレクト）のときにその値が正しいかチェックする。そして、@slack/oauth が options と呼んでいるオブジェクト（Slack ワークスペースの ID やスコープの情報が入る）を返します。このようなインターフェイスを、state store と言っているようです。次に行きます。state store のデフォルトの実装である ClearStateStoreの説明です。The default state store, ClearStateStore, does not use any storage. Instead, it signs the options (using the stateSecret) and encodes them along with a signature into state. Later during the OAuth callback, it verifies the signature.なんと。state store という名前から「どこかに state パラメータと options の組を保存するんだろうな」と思っていたんですが、ClearStateStore ではどちらも保存していないようです。JWT を使った ClearStateStoreでは、ClearStateStore の実装を見てみましょう。以下に出てくる sign() と verify() は、JWT を扱うための npm ライブラリ jsonwebtoken の関数です。node-slack-sdk/index.ts at @slack/oauth@2.3.0 · slackapi/node-slack-sdk · GitHubpublic async generateStateParam(installOptions: InstallURLOptions, now: Date): Promise<string> {  return sign({ installOptions, now: now.toJSON() }, this.stateSecret);}認可画面に遷移する際、generateStateParam() で  state パラメータを生成します。ここでは、options （上のコードでは installOptions）と時刻をペイロードとする JWT を生成して、返しています。冒頭で「なにこれ？」と思った stateSecret は、JWT の署名に使う共通鍵だったんですね。public async verifyStateParam(_now: Date, state: string): Promise<InstallURLOptions> {  // decode the state using the secret  const decoded: StateObj = verify(state, this.stateSecret) as StateObj;  // return installOptions  return decoded.installOptions;}認可後のリダイレクトでは、verifyStateParam() で  state パラメータを検証します。ここでは、共通鍵 stateSecret で JWT の署名を検証しています。ペイロードが改竄されていればここでエラーになり、処理が中断されます。検証が通ったら、ペイロードの options を取り出して返します。CSRF 対策になっていることを確認この ClearStateStore で本当に CSRF 攻撃が防げるのか、確認してみましょう。まずは通常の攻撃シナリオ。悪い人が自分のワークスペースで認可を行い、リダイレクト URL を取得します（1.）。このリダイレクト URL には、state パラメータが含まれています。このリダイレクト URL をそのまま A さんに送りつけ、 A さんに踏ませる（2.）とどうなるでしょうか？Slack アプリの ClearStateStore は、まず  state パラメータの有効性を検証します（3.）。JWT の署名を検証するわけですが、このシナリオでは、悪い人の JWT は何も改竄されていません。したがって、JWT は有効だと判断され、処理は続行されます。次に、JWT から options を取り出し（4.）、これを使って Slack からアクセストークンを取得します（5.）。Slack からは悪い人のアクセストークンが返ってきますが、Slack アプリはそれを悪い人のアクセストークンだとして（正しく）格納します（6.）。したがって、A さんには何も影響ありません。別のシナリオも検討してみます。先ほどのシナリオで見たように、Slack アプリは JWT から options を取り出し、アクセストークンを取得・格納していました。JWT の中の options を書き換えれば、悪い人のアクセストークンを A さんのものとして格納できないでしょうか？はい、これは JWT の署名検証で引っかかるので、不可能ですね。以上のことから、一般的な state パラメータの実装と同じく、ClearStateStore でも CSRF 対策になっていることがわかりました。まとめというわけで、JWT をうまいこと使うと、state パラメータを OAuth クライアントに保存しておく必要がなくなります。通常の実装だと、生成した state パラメータを適当な key-value ストアなどに保存しますが、これが不要になるのは楽ですね。ステートレスになるので FaaS との相性もよくなります（とはいえもちろん、取得したアクセストークンはどこかに保存しておく必要があります）。今回は Bolt を使って Slack アプリのインストール処理を実装しましたが、OAuth まわりの詳細についてはほとんど意識することなく実現でき、かなり楽ちんで快適でした。よく考えられてますね。おまけソーシャルPLUS では、現在フロントエンドエンジニア・バックエンドエンジニアを募集中です。Shopify アプリのリリースや LINE 社との業務提携を経て、やりたいことがますます盛りだくさんな状況です。open.talentio.comopen.talentio.comご興味ありましたら、カジュアル面談にぜひどうぞ！

OAuth の state パラメータに JWT を使ってステートレスにする

<p><img src="https://rewired.cloud/wp-content/uploads/2021/09/211001_day-to-date_title-520x300.jpg" class="webfeedsFeaturedVisual" width="520" height="300" /></p>　 「◯日後」を表現したいシーンは多い 製品ページや顧客へのメールに配送予定日を表示したり、レッスンや新商品の予約可能日を自動的に変更するなど、Eコマースのインターフェースで「今から◯日後」を表現したいシーンは多いと思い ... 

「◯日後」を表現したいシーンは多い 製品ページや顧客へのメールに配送予定日を表示したり、レッスンや新商品の予約可能日を自動的に変更するなど、Eコマースのインターフェースで「今から◯日後」を表現したいシーンは多いと思い ...

【Shopify】Liquid 上で「現在の日付から◯日後」を表現する方法

<p><img src="https://rewired.cloud/wp-content/uploads/2021/09/210908_customer_title-520x300.jpg" class="webfeedsFeaturedVisual" width="520" height="300" /></p>Shopify は 設定 &#62; チェックアウト から購入時のアカウント登録の要否を設定できます。 アカウントを無効化する ゲストとしてのみチェックアウトが可能 アカウントを任意にする ゲストとして、またはカスタマーア ... 

Shopify は 設定 > チェックアウト から購入時のアカウント登録の要否を設定できます。 アカウントを無効化する ゲストとしてのみチェックアウトが可能 アカウントを任意にする ゲストとして、またはカスタマーア ...

ゲスト購入時、Shopify は customer をどう扱っているのか

<p>こんにちは、ソーシャルPLUS チームの <a href="http://blog.hatena.ne.jp/mashabow/" class="hatena-id-icon"><img src="https://cdn.profile-image.st-hatena.com/users/mashabow/profile.png" width="16" height="16" alt="" class="hatena-id-icon">id:mashabow</a> です。</p>

<p>社内勉強会 <a href="https://developer.feedforce.jp/archive/category/FFTT">FFTT</a> のネタとして、ESP8266 で Wi-Fi 温湿度センサーを作り、グラフ化してみました。普段はフロントエンドの開発をしているんですが、ちょっと別のことをやってみようかと思いまして。電子工作に入門して、AWS IoT Core とか AWS Amplify を使ってみた記録です。</p>

<ul>
<li>グラフ：<a href="https://main.dt7p4lkfvt2c8.amplifyapp.com/">https://main.dt7p4lkfvt2c8.amplifyapp.com/</a></li>
<li>リポジトリ：<a href="https://github.com/mashabow/uchino-sensors">https://github.com/mashabow/uchino-sensors</a></li>
</ul>


<p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/m/mashabow/20210426/20210426193800.png" alt="f:id:mashabow:20210426193800p:plain:w300" width="1366" height="1018" loading="lazy" title="" class="hatena-fotolife" style="width:300px" itemprop="image"></span> <span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/m/mashabow/20210426/20210426193805.png" alt="f:id:mashabow:20210426193805p:plain:w330" width="1982" height="1332" loading="lazy" title="" class="hatena-fotolife" style="width:330px" itemprop="image"></span></p>

<p>詳しくはスライドをご覧ください。</p>

<script async class="speakerdeck-embed" data-id="92082383e7cc463dbb9ea18867036605" data-ratio="1.77777777777778" src="//speakerdeck.com/assets/embed.js"></script>


<h2>Q&amp;A</h2>

<p>勉強会で出た質問です。</p>

<ul>
<li>Q. Wi-Fi のパスワードってどうしてるんですか？

<ul>
<li>A. ESP8266 へ書き込むプログラムの中に、<a href="https://github.com/mashabow/uchino-sensors/blob/main/esp8266/src/secrets.h.template#L3-L4">そのまま埋め込んでいます</a>。</li>
</ul>
</li>
<li>Q. どれくらいのサイズのプログラムを書き込めるのかな

<ul>
<li>A. 今回は小さいプログラムなのであまり気にしていませんでしたが、<a href="https://www.mgo-tec.com/blog-entry-pointer-ini-arduino-esp8266.html#title04">ユーザーが使えるのは 50 KB 程度</a>らしいです。</li>
</ul>
</li>
<li>Q. すると timestamp は測定時点のものではないのか。数十ミリ秒くらいはズレているのかな

<ul>
<li>A. <a href="https://docs.aws.amazon.com/iot/latest/developerguide/iot-sql-functions.html#iot-function-timestamp">IoT Core のルールエンジンに届いた時刻</a>なので、正確ではないですね。10分間隔の測定で、かつセンサーの精度もそんなに無いので、まぁいいかなと。送信するメッセージに timestamp を入れるようにすればいい話ではあります（ESP8266 を書き変えるのが面倒だった 💦）。</li>
</ul>
</li>
<li>Q. AWS IoT Core とかってお高いんですか？

<ul>
<li>A. 個人で使う規模なら<a href="https://aws.amazon.com/jp/iot-core/pricing">激安</a>ですね 👀</li>
</ul>
</li>
<li>Q. 温度が急上昇してたら 119 しとけば良いですか？

<ul>
<li>A. よろしくおねがいします 🚒</li>
</ul>
</li>
</ul>


<h2>感想</h2>

<p>IoT っぽいものに初めて手を出してみたんですが、おもしろいですね。一番最初は用語も概念も調べ方もわからず、ネット上で情報収集しても「???」だったんですが、<a href="https://www.amazon.co.jp/dp/4789847047">本</a>を読んだら頭に入ってくるようになりました。</p>

<p>グラフも単なるグラフだろと思っていたんですが、自宅の実データをいざ視覚化してみると、自分だけにしか見えない様子ががいろいろ見えてきます。「あ、これ夕食を準備してたときだ」とか、ついついじっくり眺めてしまいますね。今回はセンサーだけでしたが、アクチュエーターに指示を出せば、さらにおもしろいものができそうです。</p>

<h2>リンク集</h2>

<p>スライドで触れたページや、実装にあたって参考にしたページです。</p>

<h3>1. Wi-Fi 温湿度センサーを作る</h3>

<ul>
<li><a href="https://akizukidenshi.com/catalog/g/gK-09758/">Wi-Fiモジュール ESP-WROOM-02 DIP化キット: 秋月電子通商-電子部品・ネット通販</a></li>
<li><a href="https://www.amazon.co.jp/dp/4789847047">超特急Web接続! ESPマイコン・プログラム全集 | 国野 亘 | Amazon</a>

<ul>
<li>組み立てや実装の参考にした本</li>
<li>[PDF] <a href="https://shop.cqpub.co.jp/hanbai/books/I/I000315/setsumei.pdf">IoT実習キット説明書・パーツリスト</a>

<ul>
<li>上記書籍の回路部分。基本的にはこれに倣った</li>
</ul>
</li>
</ul>
</li>
<li><a href="https://www.amazon.co.jp/dp/B010GXAH4E">HiLetgo 3個セット DHT11温度センサー | Amazon</a>

<ul>
<li>今回使った温湿度センサー</li>
</ul>
</li>
<li><a href="https://garretlab.web.fc2.com/arduino/">Arduinoで遊ぶページ</a>

<ul>
<li>Arduino 言語の参考に</li>
</ul>
</li>
<li><a href="https://platformio.org/">A professional collaborative platform for embedded development · PlatformIO</a>

<ul>
<li>使い慣れたエディタで Arduino の開発ができる。補完や依存管理ができて便利</li>
</ul>
</li>
<li><a href="https://bokunimo.net/blog/esp/784/">乾電池で本当に1年間動作するIoTセンサ ESP8266 - ボクにもわかる電子工作のブログ</a></li>
</ul>


<h3>2. 測定結果を受け取ってためる</h3>

<ul>
<li><a href="https://ambidata.io/">Ambient – IoTデータ可視化サービス</a>

<ul>
<li><a href="https://ambidata.io/docs/esp8266/">Arduino ESP8266で温度・湿度を測定し、Ambientに送ってグラフ化する – Ambient</a></li>
</ul>
</li>
<li><a href="https://machinist.iij.jp/">Machinist</a></li>
<li><a href="https://aws-iot-core-for-beginners.workshop.aws/">AWS IoT Core 初級ハンズオン :: AWS IoT Core 初級 ハンズオン</a></li>
<li><a href="https://github.com/debsahu/ESP-MQTT-AWS-IoT-Core">debsahu/ESP-MQTT-AWS-IoT-Core: Arduino examples of connecting ESP8266/ESP32 to AWS IOT Core</a></li>
<li><a href="https://flogics.com/wp/ja/2019/07/esp8266-arduino-aws-iot-mqtt/">TI DSP ソフトウェア設計のファームロジックス | ESP8266（Arduino環境）で AWS IoT（MQTT over TLS）にアクセスする</a>

<ul>
<li>最初 MQTT で接続できなくて悩んでいたが、NTP で時刻を合わせたら解決した</li>
</ul>
</li>
</ul>


<h3>3. 測定結果をグラフにする</h3>

<ul>
<li><a href="https://docs.amplify.aws/start/q/integration/react">Getting started - Amplify Docs</a></li>
<li><a href="https://github.com/aws-amplify/amplify-js/issues/6369">[Feedback] <code>API.graphql</code> return signature is hard to use in TypeScript · Issue #6369 · aws-amplify/amplify-js</a>

<ul>
<li>素の状態だと TS サポートがいまいちな件</li>
</ul>
</li>
<li><a href="https://apexcharts.com/docs/react-charts/">React-ApexChart - A React Chart wrapper for ApexCharts.js</a></li>
<li><a href="https://aws.amazon.com/jp/premiumsupport/knowledge-center/appsync-notify-subscribers-real-time/">AWS AppSync を使用して、外部データベースの更新をサブスクライバーにリアルタイムで通知する</a></li>
</ul>



こんにちは、ソーシャルPLUS チームの id:mashabow です。社内勉強会 FFTT のネタとして、ESP8266 で Wi-Fi 温湿度センサーを作り、グラフ化してみました。普段はフロントエンドの開発をしているんですが、ちょっと別のことをやってみようかと思いまして。電子工作に入門して、AWS IoT Core とか AWS Amplify を使ってみた記録です。グラフ：https://main.dt7p4lkfvt2c8.amplifyapp.com/リポジトリ：https://github.com/mashabow/uchino-sensors 詳しくはスライドをご覧ください。Q&A勉強会で出た質問です。Q. Wi-Fi のパスワードってどうしてるんですか？A. ESP8266 へ書き込むプログラムの中に、そのまま埋め込んでいます。Q. どれくらいのサイズのプログラムを書き込めるのかなA. 今回は小さいプログラムなのであまり気にしていませんでしたが、ユーザーが使えるのは 50 KB 程度らしいです。Q. すると timestamp は測定時点のものではないのか。数十ミリ秒くらいはズレているのかなA. IoT Core のルールエンジンに届いた時刻なので、正確ではないですね。10分間隔の測定で、かつセンサーの精度もそんなに無いので、まぁいいかなと。送信するメッセージに timestamp を入れるようにすればいい話ではあります（ESP8266 を書き変えるのが面倒だった 💦）。Q. AWS IoT Core とかってお高いんですか？A. 個人で使う規模なら激安ですね 👀Q. 温度が急上昇してたら 119 しとけば良いですか？A. よろしくおねがいします 🚒感想IoT っぽいものに初めて手を出してみたんですが、おもしろいですね。一番最初は用語も概念も調べ方もわからず、ネット上で情報収集しても「???」だったんですが、本を読んだら頭に入ってくるようになりました。グラフも単なるグラフだろと思っていたんですが、自宅の実データをいざ視覚化してみると、自分だけにしか見えない様子ががいろいろ見えてきます。「あ、これ夕食を準備してたときだ」とか、ついついじっくり眺めてしまいますね。今回はセンサーだけでしたが、アクチュエーターに指示を出せば、さらにおもしろいものができそうです。リンク集スライドで触れたページや、実装にあたって参考にしたページです。1. Wi-Fi 温湿度センサーを作るWi-Fiモジュール ESP-WROOM-02 DIP化キット: 秋月電子通商-電子部品・ネット通販超特急Web接続! ESPマイコン・プログラム全集 | 国野 亘 | Amazon組み立てや実装の参考にした本[PDF] IoT実習キット説明書・パーツリスト上記書籍の回路部分。基本的にはこれに倣ったHiLetgo 3個セット DHT11温度センサー | Amazon今回使った温湿度センサーArduinoで遊ぶページArduino 言語の参考にA professional collaborative platform for embedded development · PlatformIO使い慣れたエディタで Arduino の開発ができる。補完や依存管理ができて便利乾電池で本当に1年間動作するIoTセンサ ESP8266 - ボクにもわかる電子工作のブログ2. 測定結果を受け取ってためるAmbient – IoTデータ可視化サービスArduino ESP8266で温度・湿度を測定し、Ambientに送ってグラフ化する – AmbientMachinistAWS IoT Core 初級ハンズオン :: AWS IoT Core 初級 ハンズオンdebsahu/ESP-MQTT-AWS-IoT-Core: Arduino examples of connecting ESP8266/ESP32 to AWS IOT CoreTI DSP ソフトウェア設計のファームロジックス | ESP8266（Arduino環境）で AWS IoT（MQTT over TLS）にアクセスする最初 MQTT で接続できなくて悩んでいたが、NTP で時刻を合わせたら解決した3. 測定結果をグラフにするGetting started - Amplify Docs[Feedback] API.graphql return signature is hard to use in TypeScript · Issue #6369 · aws-amplify/amplify-js素の状態だと TS サポートがいまいちな件React-ApexChart - A React Chart wrapper for ApexCharts.jsAWS AppSync を使用して、外部データベースの更新をサブスクライバーにリアルタイムで通知する

ESP8266 で温湿度を測って、AWS IoT Core + Amplify でグラフにしてみる

こんにちは、id:mashabow です。この記事は、Shopify開発を盛り上げる Advent Calendar 2020 の 8 日目にあたります。昨日は minozo さんの「ShopifyでARを実装する方法(2020/12版)」でした。現在弊社では、ソーシャルPLUS の Shopify アプリ版を開発しており、わたしは埋め込みアプリ（Embedded App）のフロントエンド担当です。わかりやすく言えば、マーチャントの方に触っていただく設定画面を作っているわけです。そんな設定画面に必要不可欠で、かつ意外と厄介なのがフォームの実装です。今回は、フォームの状態管理に @shopify/react-form というライブラリを使ってみました。この記事では、その @shopify/react-form の使い方を紹介したいと思います。フォーム管理ライブラリを選ぶ前提として、フレームワークには React（Next.js）を、コンポーネントライブラリは Shopify 本家の Polaris を使用しています。Polaris はあくまでもコンポーネントライブラリなので、フォームの状態を管理するための機能は入っていません。useState を使うなり、他のフォーム管理ライブラリを使うなりして、自分でよしなに管理する必要があります。実は、最初は軽量・高速な React Hook Form を使おうかとぼんやり考えていました。しかしよくよく見てみると、Polaris のコンポーネントは React Hook Form に必要な ref を受け取ることができません。Controlled components として作られていますしね。一応、React Hook Form の Controller でラップして使う手があるようですが、それも手間がかかりそうです。とりあえず他の人のやり方を参考にしようか……と検索してみたところ、どこかで @shopify/react-form というライブラリを見つけました1。www.npmjs.comREADME を読むとThe hooks provided here also work swimmingly with @shopify/polaris.との言葉があり、期待が持てそうです。Shopify 公式サイトからの言及が皆無なのが謎で若干不安になりますが、Shopify 公式のパッケージです。なお、この記事の執筆時点では v0.9.0 が最新です。@shopify/react-form でフォームを定義する前置きが長くなりましたが、実際に使ってみましょう。使い方としては、Formik に似ています。詳しいところは README に譲るとして、まずは単純な例を用意しました。最初に、useForm でフォームの定義をします。その中では、useField を使って各フィールドの定義をしています。fields  のキー（下の例では name にしました）が、フィールドの識別子になります。  const { fields, submit } = useForm({    fields: {      // 「名前」フィールドの定義      name: useField({        value: "Shopify大好きパーソン", // 初期値        validates: [          notEmpty("必須項目です"),          lengthMoreThan(2, "3文字以上で入力してください")        ]      }),      ...    },    onSubmit: ...  });useField の引数の value は初期値です。実際には空 "" だったり、前回保存した値をバックエンド API から取ってきて入れたりすることが多いでしょう。validates には、バリデーションに使う関数を指定します。上の例では @shopify/react-form に組み込まれているバリデーション関数を使っていますが、種類はそれほど多くはありません。自作することもできます。useForm の onSubmit には submit 時の処理を書きますが、これは次節で説明します。さて、これでフォームの定義ができました。useForm の戻り値の fields に、各フィールドの状態やハンドラが入っているので、今度はこれを Polaris のコンポーネントに結びつけます。上の例では name という識別子のフィールドを定義したので、fields.name を spread して        <TextField label="名前" {...fields.name} />と渡してやるだけで  TextField コンポーネントが動作します。@shopify/react-form が、Polaris のインターフェイスに合わせて作られているおかげですね。べんり！また、先ほどバリデーション関数を指定したので、バリデーションもちゃんと動きます。blur 時にバリデーションが実行され、エラーが表示されているのがわかります。submit 処理を実装するフォームが一通りできたら、submit 時の処理を実装しましょう。useFleid の引数の onSubmit に、async で処理内容を書きます。各フィールドの値は、引数 fieldValues として  onSubmit に渡されます。以下に例を示します。実際のアプリでは、onSubmit の中で fieldValues をバックエンドに送信するケースがほとんどかと思いますが、今回はサンプルなので、「送信して結果が返ってきたつもり」の処理を入れています。  const { fields, submit } = useForm({    fields: {      name: useField({ ... }),      age: useField({ ... }),      christmas: useField({ ... }),    },    onSubmit: async (fieldValues) => {      console.log(fieldValues);      // => { name: "...", age: "...", christmas: "..." }      // 実際のアプリではバックエンドに送信するが、      // const result = await submitToBackend(fieldValues);      // 今回はサンプルなので、適当な待ち時間を挟んでここで結果を返す      await new Promise((resolve) => setTimeout(resolve, 1000));      return { status: "success" };    }  });onSubmit 関数の戻り値によって、submit が成功したか失敗したかを表現します。成功の場合は { status: "success" } を返すきまりになっています。失敗した場合は、{ status: "fail", errors: [...] } という形式ですが、こちらについては次の節で説明します。useForm の戻り値に、submit を実行する submit 関数が入っているので、Form コンポーネントの  onSubmit prop に渡します。これで、[保存] ボタンをクリックしたときに、先ほど実装した onSubmit 関数の処理が実行されるようになりました2。    <Form onSubmit={submit}>      <FormLayout>        <TextField label="名前" {...fields.name} />        <TextField label="年齢" type="number" {...fields.age} />        <Select          label="クリスマスといえば？"          options={christmasOptions}          {...fields.christmas}        />        <Button submit primary>保存</Button>      </FormLayout>    </Form>さらに使いやすくするために、submit 処理中は、[保存] ボタンを loading 状態にするどのフィールドも変更されていなれば、[保存] ボタンを disabled にするという制御を追加しましょう。useForm から submitting,  dirty という boolean 値が返ってくるので、それを使えば簡単に実装できます。  const { fields, submit, submitting, dirty } = useForm({ ... });        <Button submit primary loading={submitting} disabled={!dirty}>          保存        </Button>submit に失敗した場合実際のアプリでは、submit してもバックエンド側のバリデーションに弾かれたり、そもそもバックエンドが落ちていたりと、失敗するケースがいろいろあります。失敗時の処理はどうすればいいでしょうか？上で少し触れましたが、失敗した場合は { status: "fail", errors: [...] } という形式でエラーの内容を返すようにします。以下にサンプルを挙げました。「名前が  "Shopify大嫌いパーソン" だったらエラーを返す」ようなバックエンドを想像してみてください。  const { fields, submit, submitErrors, submitting, dirty } = useForm({    fields: {      name: useField({ ... }),      age: useField({ ... }),      christmas: useField({ ... }),    },    onSubmit: async (fieldValues) => {      // 今回はサンプルなので、適当な待ち時間を挟んでここで結果を返す      await new Promise((resolve) => setTimeout(resolve, 1000));      const result =        fieldValues.name === "Shopify大嫌いパーソン"          ? // submit 失敗の例            {              status: "fail" as const,              errors: [                // 特定のフィールドにひもづかないエラー                { message: "なんか失敗しました" },                // 特定のフィールドにひもづくエラー                { message: "この名前は使えません", field: ["name"] }              ]            }          : // submit 成功の例            { status: "success" as const };      return result;    }  });このように、errors には複数のエラーを含めることができます。また、field プロパティによって、エラーとフィールドをひもづけることもできます。このひもづけを行うと、フィールドの傍にエラーメッセージが表示されるようになります。一方、フィールドにひもづかないエラーは、そのままでは UI 上に何も表示されません。useForm の戻り値の submitErrors には、（フィールドにひもづくか否かに関わらず）すべてのエラーが入っているので、これを Banner コンポーネントに表示させてみましょう。    <Form onSubmit={submit}>      <FormLayout>        {submitErrors.length > 0 && (          <Banner status="critical">            <p>保存に失敗しました。</p>            <ul>              {submitErrors.map(({ message }, i) => (                <li key={i}>{message}</li>              ))}            </ul>          </Banner>        )}        {/* 略（フォームの中身） */}      </FormLayout>    </Form>これでいい感じのフォームができあがりました！ さわって試してみてください。おまけの補足Checkbox や RadioButton に props を渡す場合は、asChoiceField を使う必要があります。実際の埋め込みアプリのフォームでは、さらに App Bridge の ContextualSaveBar を併用するのがおすすめです。機能としては Polaris の ContexualSaveBar と似ていますが、App Bridge の ContextualSaveBar を使った方が、一貫した UI/UX を提供できます。おわりにというわけで、@shopify/react-form を簡単に紹介しました。Shopify 公式が開発しているだけあって、手軽に Polaris と組み合わせられるところが嬉しいですね。明日のアドベントカレンダーは mixlogue さんによる「サードパーティクッキーの問題を解決するApp Bridgeの新しい仕様、セッショントークンに対応する（Next.js版）」です。ちょうど弊アプリもセッショントークンを採用したところなので、mixlogue さんがどのように実装されたのか、とても気になります！ではでは。よく覚えていませんが、おそらくここ？ ↩ただし、onSubmit 関数が実行される前にクライアントサイドバリデーションが走ります。クライアントサイドバリデーションに引っかかった場合は、onSubmit 関数の中身は実行されません。↩

Shopify 埋め込みアプリのフォームを @shopify/react-form で作る

<p>新聞の題字が一覧できるサイト・<a href="https://daipeta.com">題字ペタペタ</a>を、<a href="https://twitter.com/nekonopen">ねこぺん</a>と作って公開しました。</p>

<p><iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fdaipeta.com" title="題字ペタペタ - 日本の新聞の題字あつめました" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://daipeta.com">daipeta.com</a></cite></p>

<p>こんな感じで、いろいろな新聞の題字を掲載しています。絞り込み検索もできます。</p>

<p><figure class="figure-image figure-image-fotolife" title="題字ペタペタのトップページ"><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/m/mashabow/20200914/20200914200511.png" alt="f:id:mashabow:20200914200511p:plain" title="f:id:mashabow:20200914200511p:plain" class="hatena-fotolife" itemprop="image"></span><figcaption>題字ペタペタのトップページ</figcaption></figure></p>

<p>この題字ペタペタができるまでの話を、社内勉強会で発表しました。スライドを置いておきますので、どうぞご覧ください。</p>

<p><iframe id="talk_frame_665734" src="//speakerdeck.com/player/3d8da29756b4456e89023932c5a61853" width="710" height="399" style="border:0; padding:0; margin:0; background:transparent;" frameborder="0" allowtransparency="true" allowfullscreen="allowfullscreen" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe> <cite class="hatena-citation"><a href="https://speakerdeck.com/mashabow/fftt-number-409">speakerdeck.com</a></cite></p>

<p>技術的には、<a href="https://www.contentful.com/">Contentful</a> に入れたデータをもとに <a href="https://www.gatsbyjs.com/">Gatsby</a> でページを生成し、<a href="https://www.netlify.com/">Netlify</a> で<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%DB%A5%B9%A5%C6%A5%A3%A5%F3%A5%B0">ホスティング</a>しています。ここ最近よく見かける定番の構成ですね。</p>

<p>また、Web フォントサービス <a href="https://www.realtype.jp/">REALTYPE</a> を利用して、<a href="https://www.iwatafont.co.jp/font/ud_news.html">イワタ UD 新聞明朝 や イワタ UD 新聞ゴシック</a>で組んでいます。簡単に使えるだろうと甘く見ていたら、これになかなか苦労したんですが、それについてはまた別の記事で。</p>

<p>デザインについては、主にねこぺんが担当してくれました。素人ながらかなり頑張って、いいサイトができあがったんじゃないかと思います。慣れない<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%BF%A5%D6%A5%EC%A5%C3%A5%C8">タブレット</a>と格闘しながら、かわいいイラストも描いてくれました。</p>

<p>ひとまず完成はしましたが、これからも少しずつ拡充していきますので、題字ペタペタをどうぞごひいきに。</p>

<h3>参考書籍</h3>

<ul>
<li><a href="https://booth.pm/ja/items/1312387">GatsbyJS Guidebook - mottox2（つのぶえ出版） - BOOTH</a>

<ul>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/Gatsby">Gatsby</a> や Contentful に触り始めたころに参考にしました。入門者向け。</li>
</ul>
</li>
<li><a href="https://amzn.to/3bWrocJ">UIデザインの教科書［新版］マルチデバイス時代のインターフェース設計</a>

<ul>
<li>Web デザインの基礎を押さえるためにふたりで読みました。実例の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%AF%A5%EA%A1%BC%A5%F3%A5%B7%A5%E7%A5%C3%A5%C8">スクリーンショット</a>が多くてわかりやすい内容です。</li>
</ul>
</li>
</ul>



新聞の題字が一覧できるサイト・題字ペタペタを、ねこぺんと作って公開しました。daipeta.comこんな感じで、いろいろな新聞の題字を掲載しています。絞り込み検索もできます。題字ペタペタのトップページこの題字ペタペタができるまでの話を、社内勉強会で発表しました。スライドを置いておきますので、どうぞご覧ください。 speakerdeck.com技術的には、Contentful に入れたデータをもとに Gatsby でページを生成し、Netlify でホスティングしています。ここ最近よく見かける定番の構成ですね。また、Web フォントサービス REALTYPE を利用して、イワタ UD 新聞明朝 や イワタ UD 新聞ゴシックで組んでいます。簡単に使えるだろうと甘く見ていたら、これになかなか苦労したんですが、それについてはまた別の記事で。デザインについては、主にねこぺんが担当してくれました。素人ながらかなり頑張って、いいサイトができあがったんじゃないかと思います。慣れないタブレットと格闘しながら、かわいいイラストも描いてくれました。ひとまず完成はしましたが、これからも少しずつ拡充していきますので、題字ペタペタをどうぞごひいきに。参考書籍GatsbyJS Guidebook - mottox2（つのぶえ出版） - BOOTHGatsby や Contentful に触り始めたころに参考にしました。入門者向け。UIデザインの教科書［新版］マルチデバイス時代のインターフェース設計Web デザインの基礎を押さえるためにふたりで読みました。実例のスクリーンショットが多くてわかりやすい内容です。

題字ペタペタができるまで

<p>最近の Web アプリはどんどんリッチになっていっていますが、ネイティブアプリとは違って、「ローカルフォント<a href="#f-5ce9b760" name="fn-5ce9b760" title="ユーザーの端末にインストールされているフォント。デバイスフォントと呼ばれることも。">*1</a>を列挙してユーザーに選択させ、それを表示に使う」といったことは仕様上不可能です。</p>

<p>例えば、画像に文字を入れる Web アプリを考えてみます。文字の描画自体は <a href="https://developer.mozilla.org/ja/docs/Drawing_text_using_a_canvas">canvas の <code>ctx.fillText()</code></a> が使えますが、問題はフォントの指定です。<a href="https://developer.mozilla.org/ja/docs/Web/API/CanvasRenderingContext2D/font"><code>ctx.font</code></a> にローカルフォントを指定するためには、そのローカルフォントのフォント名を知っている必要があります。OS にプリインストールされているフォントでなどであれば、「Web アプリ側であらかじめフォント名のリストを用意しておき、実際にインストールされているかどうかをチェック<a href="#f-dbf8c6ce" name="fn-dbf8c6ce" title="適当な文字列のダミー要素を不可視状態で用意 → 要素にチェックしたいフォントを指定 → 指定前後で要素の幅が変わったかチェック、というのが常套手段でしょう。後述のフィンガープリンティングでも使われる手法です。">*2</a>してからユーザーに選択させる」という手段がとれますが、「自分でインストールしたこのフォントが使いたい！」という要求に応えるのは現実的ではありません。</p>

<h2>提案中の2つの <a class="keyword" href="http://d.hatena.ne.jp/keyword/API">API</a></h2>

<p><span itemscope itemtype="http://schema.org/Photograph"><a href="http://f.hatena.ne.jp/mashabow/20191014220905" class="hatena-fotolife" itemprop="url"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/m/mashabow/20191014/20191014220905.png" alt="f:id:mashabow:20191014220905p:image:w300" title="f:id:mashabow:20191014220905p:image:w300" class="hatena-fotolife" style="width:300px" itemprop="image"></a></span></p>

<p>現在、Font Enumeration <a class="keyword" href="http://d.hatena.ne.jp/keyword/API">API</a>・Font Table <a class="keyword" href="http://d.hatena.ne.jp/keyword/Access">Access</a> <a class="keyword" href="http://d.hatena.ne.jp/keyword/API">API</a> という <a class="keyword" href="http://d.hatena.ne.jp/keyword/API">API</a> が提案されています。まだまだ検討中のようですが、もし標準化までたどり着けば、この状態が解消されそうです。</p>

<ul>
<li><a href="https://inexorabletash.github.io/font-enumeration/">Font Enumeration API</a></li>
<li><a href="https://inexorabletash.github.io/font-table-access/">Font Table Access API</a></li>
</ul>


<p>Font Enumeration <a class="keyword" href="http://d.hatena.ne.jp/keyword/API">API</a> が、ローカルフォントを列挙するための <a class="keyword" href="http://d.hatena.ne.jp/keyword/API">API</a> です。先ほどの例でやりたかったことは、これで実現できそうです。一方の Font Table <a class="keyword" href="http://d.hatena.ne.jp/keyword/Access">Access</a> <a class="keyword" href="http://d.hatena.ne.jp/keyword/API">API</a> は、ローカルフォントのテーブルのバイナリにアクセスするための <a class="keyword" href="http://d.hatena.ne.jp/keyword/API">API</a> です。どちらも単機能で、かなりシンプルな構成になっています。</p>

<p><a href="https://github.com/inexorabletash/font-enumeration/tree/5c480d2fd6e301c0501134dc1055358b19d0441c#whats-all-this-then">GitHub リポジトリの README</a> によると、提案の動機としては以下のような感じです。</p>

<ol>
<li>プロ品質のデザインツールを Web 上に作ろうとすると、以下のような障害がある

<ul>
<li>Web アプリからはローカルフォントの列挙ができない</li>
<li>ブラウザは OS のフォントエンジンを使って描画するので、OS 間で差が生じる</li>
<li>（ネイティブアプリを Web アプリに移植する場合）自前のフォントエンジンはたいてい生のフォントデータを要求するものだが、Web フォントの仕様ではフォントのバイナリにアクセスできない</li>
</ul>
</li>
<li>Font Enumeration <a class="keyword" href="http://d.hatena.ne.jp/keyword/API">API</a> と Font Table <a class="keyword" href="http://d.hatena.ne.jp/keyword/Access">Access</a> <a class="keyword" href="http://d.hatena.ne.jp/keyword/API">API</a> を提供して、このような状況を解消したい</li>
</ol>


<p>この記事では <a class="keyword" href="http://d.hatena.ne.jp/keyword/API">API</a> の詳細には触れませんが、HarfBuzz/<a class="keyword" href="http://d.hatena.ne.jp/keyword/FreeType">FreeType</a> を WASM に乗せて、それにフォントデータを食わせて描画する、というような<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%E6%A1%BC%A5%B9%A5%B1%A1%BC%A5%B9">ユースケース</a>も<a href="https://inexorabletash.github.io/font-table-access/#examples">挙げられています</a>。</p>

<p>ちなみにこれらの <a class="keyword" href="http://d.hatena.ne.jp/keyword/API">API</a>、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Chrome">Chrome</a>（<a class="keyword" href="http://d.hatena.ne.jp/keyword/Chromium">Chromium</a>）では8月下旬に "Intent to Implement" になったようです。</p>

<ul>
<li><a href="https://groups.google.com/a/chromium.org/d/msg/blink-dev/XfkSdpMWNik/IX67fOTLAQAJ">Intent to Implement: Font Enumeration</a></li>
<li><a href="https://groups.google.com/a/chromium.org/d/msg/blink-dev/-8wPGNpuV2Y/C5wdLebLAQAJ">Intent to Implement: Font Table Access</a></li>
<li><a href="https://www.chromestatus.com/feature/6234451761692672">Font Enumeration - Chrome Platform Status</a></li>
<li><a href="https://www.chromestatus.com/feature/5082047209013248">Font Table Access - Chrome Platform Status</a></li>
</ul>


<h2>ローカルフォントとプライバシー</h2>

<p>しかしながら、ローカルフォントの情報は、個人を識別・同定しようとするフィンガープリンティングへの利用が懸念されます。従来では、例えば<a href="https://github.com/Valve/fingerprintjs2/blob/54e89b2ebdbf33853a85a7be43bd17e8b859cfc6/fingerprint2.js#L524-L711">こんなふうに</a>「フォント名のリストを決め打ちしておき、そのフォントがインストールされているか順次試す」というようなことしかできませんでした。ところが、Font Enumeration <a class="keyword" href="http://d.hatena.ne.jp/keyword/API">API</a> と Font Table <a class="keyword" href="http://d.hatena.ne.jp/keyword/Access">Access</a> <a class="keyword" href="http://d.hatena.ne.jp/keyword/API">API</a> が利用可能になると、情報をまるまる吸い出すことが可能になってしまいます。インストールの有無だけでなく、<code>head</code> テーブルや <code>name</code> テーブルから、フォントのバージョンを取得することもできます<a href="#f-d7613141" name="fn-d7613141" title="フィンガープリンティングが目的であるなら、そんな丁寧なことをしなくても、バイナリのハッシュをまるごと取ってしまえば十分そうですが。">*3</a>。フォントの販売・<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B5%A5%D6%A5%B9%A5%AF%A5%EA%A5%D7%A5%B7%A5%E7%A5%F3">サブスクリプション</a>方式によっては、ユーザー情報や固有識別子をフォントファイルに埋め込むものもあるでしょう。そうすると、ほとんど確実に個人を識別できてしまいます。</p>

<p>フィンガープリンティングへの懸念は、提案されている仕様書にも<a href="https://inexorabletash.github.io/font-enumeration/#privacy">記述があります</a>。また、「会社の PC にコーポレートフォントをインストールしていると、それだけで会社が特定できちゃうよね」というような例も挙げられています。</p>

<p>これらのプライバシー対策として、Font Enumeration <a class="keyword" href="http://d.hatena.ne.jp/keyword/API">API</a> と Font Table <a class="keyword" href="http://d.hatena.ne.jp/keyword/Access">Access</a> <a class="keyword" href="http://d.hatena.ne.jp/keyword/API">API</a> は、<strong><a href="https://developer.mozilla.org/ja/docs/Web/API/Permissions_API">Permissions API</a> でユーザーの許可を得てからローカルフォントにアクセスする設計</strong>になっています。本当に「プロ品質のデザインツール」だけが使うのであれば、これで落ち着くかもしれません。しかし万が一、いろんなサイトでやたらめったら濫用されるようになってしまったとしたら、許可を求めるダイアログがポコポコ出てきて、なかなかうるさい未来になるかもしれません。</p>

<h2><a class="keyword" href="http://d.hatena.ne.jp/keyword/Flash">Flash</a> 時代のローカルフォント</h2>

<p>ところで、過去はどうだったんでしょう？　実は、<a class="keyword" href="http://d.hatena.ne.jp/keyword/ActionScript">ActionScript</a> には Font Enumeration <a class="keyword" href="http://d.hatena.ne.jp/keyword/API">API</a> のようなものがありました。<a href="https://help.adobe.com/ja_JP/FlashPlatform/reference/actionscript/3/flash/text/Font.html#enumerateFonts(%29"><code>Font.enumerateFonts(true)</code></a> を実行すると、ローカルフォントも含めてフォントを列挙することができました。このおかげで <a class="keyword" href="http://d.hatena.ne.jp/keyword/Flash">Flash</a> 時代の画像加工ツールは、ローカルフォントによる文字入れが可能だったのですが、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Flash">Flash</a> の衰退・サポート終了によって不可能になり、表現力が落ちてしまいました。もちろん、プライバシー面では向上したのですが。</p>

<p>ちなみに、<a class="keyword" href="http://d.hatena.ne.jp/keyword/ActionScript">ActionScript</a> の <a href="https://help.adobe.com/ja_JP/as3/dev/WS5b3ccc516d4fbf351e63e3d118a9b90204-7cb2.html"><code>ExternalInterface</code></a> を使うと、「<a class="keyword" href="http://d.hatena.ne.jp/keyword/ActionScript">ActionScript</a> で取得したフォント名を<a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a> に渡して要素のスタイルに指定する」というようなこともできました。<a class="keyword" href="http://d.hatena.ne.jp/keyword/ActionScript">ActionScript</a> 側は<a href="https://github.com/Valve/fingerprintjs2/blob/54e89b2ebd/flash/FontList.as">これと同じ感じのコード</a>になります。実際に自分自身、内製ツールの開発で使ったこともあります。</p>

<p>ちなみにちなみに、当時は事実上、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Flash">Flash</a> がどこでも勝手に実行されるような状況だったので、「ページを踏んだ人のローカルフォントを列挙してこっそりサーバーに送信」というようなことが可能でした。フォント名を送信するだけでなく、「ローカルフォントで描画して送信」までしてしまえばさらに強烈ですね。フォント制作においては、制作中のフォントを自分の PC にインストールしてテストすることが多々あります。そのような状態で、悪意をもったページを踏んだ場合、制作中のフォントの情報が漏れてしまいます。言うまでもなく、わたしはやったことありませんが。</p>

<p>Font Enumeration <a class="keyword" href="http://d.hatena.ne.jp/keyword/API">API</a> と Font Table <a class="keyword" href="http://d.hatena.ne.jp/keyword/Access">Access</a> <a class="keyword" href="http://d.hatena.ne.jp/keyword/API">API</a> があれば、過去に <a class="keyword" href="http://d.hatena.ne.jp/keyword/Flash">Flash</a> で実現されていた表現力を取り戻し、さらに高度な文字組みなどを発展させることができます。アクセスにはユーザーの許可が必要になるので、プライバシー面もある程度担保されます。ただし、「このフォントは OK だけどこれはダメ」のようなアクセス制御は今のところできそうにないので、フォント制作者はうかつに [許可する] を押せなくなるかもしれません…笑</p>

<h2>その他雑感</h2>

<ul>
<li>Font Enumeration <a class="keyword" href="http://d.hatena.ne.jp/keyword/API">API</a> で取得したフォントのリストを元に、ユーザーにフォントを選択させる場合、並べ方が大変そう

<ul>
<li>各 OS のネイティブのフォント選択ダイアログがそもそもバラバラでわりと混乱している</li>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/Adobe">Adobe</a> 製品もまた独自だったり</li>
</ul>
</li>
<li>前節で書いたように、フォントごとのアクセス制御ができない

<ul>
<li>いっそのこと OpenType 仕様の方に「このフォントは Web <a class="keyword" href="http://d.hatena.ne.jp/keyword/API">API</a> からアクセスしちゃダメ」フラグを新設するとか？ :P</li>
</ul>
</li>
<li>OS 間の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EC%A5%F3%A5%C0%A5%EA%A5%F3%A5%B0">レンダリング</a>の差がなくなったとしても、互換性のためには全く同じバージョンのフォントが各端末にインストールされている必要がある。となると、ローカルフォントだけでなく、Web フォントとの連携も考えた方がよさそう？

<ul>
<li>現状の Font Table <a class="keyword" href="http://d.hatena.ne.jp/keyword/Access">Access</a> <a class="keyword" href="http://d.hatena.ne.jp/keyword/API">API</a> <code>getTables()</code> は <q>This method is only usable for local fonts, and will throw an exception if called for a web font.</q> と<a href="https://inexorabletash.github.io/font-table-access/#fontface-additions">書かれている</a></li>
</ul>
</li>
<li>プライバシーまわりの懸念点がどう決着つくのか気になる</li>
</ul>


<p>実現すればおもしろいことはいろいろできそうですが、どうなるんでしょうね。</p>
<div class="footnote">
<p class="footnote"><a href="#fn-5ce9b760" name="f-5ce9b760" class="footnote-number">*1</a><span class="footnote-delimiter">:</span><span class="footnote-text">ユーザーの端末にインストールされているフォント。デ<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D0%A5%A4%A5%B9">バイス</a>フォントと呼ばれることも。</span></p>
<p class="footnote"><a href="#fn-dbf8c6ce" name="f-dbf8c6ce" class="footnote-number">*2</a><span class="footnote-delimiter">:</span><span class="footnote-text">適当な文字列のダミー要素を不可視状態で用意 → 要素にチェックしたいフォントを指定 → 指定前後で要素の幅が変わったかチェック、というのが常套手段でしょう。後述のフィンガープリンティングでも使われる手法です。</span></p>
<p class="footnote"><a href="#fn-d7613141" name="f-d7613141" class="footnote-number">*3</a><span class="footnote-delimiter">:</span><span class="footnote-text">フィンガープリンティングが目的であるなら、そんな丁寧なことをしなくても、バイナリのハッシュをまるごと取ってしまえば十分そうですが。</span></p>
</div>

最近の Web アプリはどんどんリッチになっていっていますが、ネイティブアプリとは違って、「ローカルフォント*1を列挙してユーザーに選択させ、それを表示に使う」といったことは仕様上不可能です。例えば、画像に文字を入れる Web アプリを考えてみます。文字の描画自体は canvas の ctx.fillText() が使えますが、問題はフォントの指定です。ctx.font にローカルフォントを指定するためには、そのローカルフォントのフォント名を知っている必要があります。OS にプリインストールされているフォントでなどであれば、「Web アプリ側であらかじめフォント名のリストを用意しておき、実際にインストールされているかどうかをチェック*2してからユーザーに選択させる」という手段がとれますが、「自分でインストールしたこのフォントが使いたい！」という要求に応えるのは現実的ではありません。提案中の2つの API現在、Font Enumeration API・Font Table Access API という API が提案されています。まだまだ検討中のようですが、もし標準化までたどり着けば、この状態が解消されそうです。Font Enumeration APIFont Table Access APIFont Enumeration API が、ローカルフォントを列挙するための API です。先ほどの例でやりたかったことは、これで実現できそうです。一方の Font Table Access API は、ローカルフォントのテーブルのバイナリにアクセスするための API です。どちらも単機能で、かなりシンプルな構成になっています。GitHub リポジトリの README によると、提案の動機としては以下のような感じです。プロ品質のデザインツールを Web 上に作ろうとすると、以下のような障害があるWeb アプリからはローカルフォントの列挙ができないブラウザは OS のフォントエンジンを使って描画するので、OS 間で差が生じる（ネイティブアプリを Web アプリに移植する場合）自前のフォントエンジンはたいてい生のフォントデータを要求するものだが、Web フォントの仕様ではフォントのバイナリにアクセスできないFont Enumeration API と Font Table Access API を提供して、このような状況を解消したいこの記事では API の詳細には触れませんが、HarfBuzz/FreeType を WASM に乗せて、それにフォントデータを食わせて描画する、というようなユースケースも挙げられています。ちなみにこれらの API、Chrome（Chromium）では8月下旬に "Intent to Implement" になったようです。Intent to Implement: Font EnumerationIntent to Implement: Font Table AccessFont Enumeration - Chrome Platform StatusFont Table Access - Chrome Platform Statusローカルフォントとプライバシーしかしながら、ローカルフォントの情報は、個人を識別・同定しようとするフィンガープリンティングへの利用が懸念されます。従来では、例えばこんなふうに「フォント名のリストを決め打ちしておき、そのフォントがインストールされているか順次試す」というようなことしかできませんでした。ところが、Font Enumeration API と Font Table Access API が利用可能になると、情報をまるまる吸い出すことが可能になってしまいます。インストールの有無だけでなく、head テーブルや name テーブルから、フォントのバージョンを取得することもできます*3。フォントの販売・サブスクリプション方式によっては、ユーザー情報や固有識別子をフォントファイルに埋め込むものもあるでしょう。そうすると、ほとんど確実に個人を識別できてしまいます。フィンガープリンティングへの懸念は、提案されている仕様書にも記述があります。また、「会社の PC にコーポレートフォントをインストールしていると、それだけで会社が特定できちゃうよね」というような例も挙げられています。これらのプライバシー対策として、Font Enumeration API と Font Table Access API は、Permissions API でユーザーの許可を得てからローカルフォントにアクセスする設計になっています。本当に「プロ品質のデザインツール」だけが使うのであれば、これで落ち着くかもしれません。しかし万が一、いろんなサイトでやたらめったら濫用されるようになってしまったとしたら、許可を求めるダイアログがポコポコ出てきて、なかなかうるさい未来になるかもしれません。Flash 時代のローカルフォントところで、過去はどうだったんでしょう？　実は、ActionScript には Font Enumeration API のようなものがありました。Font.enumerateFonts(true) を実行すると、ローカルフォントも含めてフォントを列挙することができました。このおかげで Flash 時代の画像加工ツールは、ローカルフォントによる文字入れが可能だったのですが、Flash の衰退・サポート終了によって不可能になり、表現力が落ちてしまいました。もちろん、プライバシー面では向上したのですが。ちなみに、ActionScript の ExternalInterface を使うと、「ActionScript で取得したフォント名をJavaScript に渡して要素のスタイルに指定する」というようなこともできました。ActionScript 側はこれと同じ感じのコードになります。実際に自分自身、内製ツールの開発で使ったこともあります。ちなみにちなみに、当時は事実上、Flash がどこでも勝手に実行されるような状況だったので、「ページを踏んだ人のローカルフォントを列挙してこっそりサーバーに送信」というようなことが可能でした。フォント名を送信するだけでなく、「ローカルフォントで描画して送信」までしてしまえばさらに強烈ですね。フォント制作においては、制作中のフォントを自分の PC にインストールしてテストすることが多々あります。そのような状態で、悪意をもったページを踏んだ場合、制作中のフォントの情報が漏れてしまいます。言うまでもなく、わたしはやったことありませんが。Font Enumeration API と Font Table Access API があれば、過去に Flash で実現されていた表現力を取り戻し、さらに高度な文字組みなどを発展させることができます。アクセスにはユーザーの許可が必要になるので、プライバシー面もある程度担保されます。ただし、「このフォントは OK だけどこれはダメ」のようなアクセス制御は今のところできそうにないので、フォント制作者はうかつに [許可する] を押せなくなるかもしれません…笑その他雑感Font Enumeration API で取得したフォントのリストを元に、ユーザーにフォントを選択させる場合、並べ方が大変そう各 OS のネイティブのフォント選択ダイアログがそもそもバラバラでわりと混乱しているAdobe 製品もまた独自だったり前節で書いたように、フォントごとのアクセス制御ができないいっそのこと OpenType 仕様の方に「このフォントは Web API からアクセスしちゃダメ」フラグを新設するとか？ :POS 間のレンダリングの差がなくなったとしても、互換性のためには全く同じバージョンのフォントが各端末にインストールされている必要がある。となると、ローカルフォントだけでなく、Web フォントとの連携も考えた方がよさそう？現状の Font Table Access API getTables() は This method is only usable for local fonts, and will throw an exception if called for a web font. と書かれているプライバシーまわりの懸念点がどう決着つくのか気になる実現すればおもしろいことはいろいろできそうですが、どうなるんでしょうね。*1:ユーザーの端末にインストールされているフォント。デバイスフォントと呼ばれることも。*2:適当な文字列のダミー要素を不可視状態で用意 → 要素にチェックしたいフォントを指定 → 指定前後で要素の幅が変わったかチェック、というのが常套手段でしょう。後述のフィンガープリンティングでも使われる手法です。*3:フィンガープリンティングが目的であるなら、そんな丁寧なことをしなくても、バイナリのハッシュをまるごと取ってしまえば十分そうですが。

ブラウザからローカルフォントにアクセスする：Font Enumeration API と Font Table Access API

<p>いまの勤務先にはエンジニア・デザイナーが持ち回りで発表する<a href="https://developer.feedforce.jp/archive/category/FFTT">社内勉強会（FFTT）</a>があるんですが、今週がわたしの当番だったので、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D9%A5%B8%A5%A8%B6%CA%C0%FE">ベジエ曲線</a>のなめらかさの話をしました。</p>

<p><iframe id="talk_frame_517211" src="//speakerdeck.com/player/23ed0505118c483f9aa8a343eacc648c" width="710" height="532" style="border:0; padding:0; margin:0; background:transparent;" frameborder="0" allowtransparency="true" allowfullscreen="allowfullscreen" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe><cite class="hatena-citation"><a href="https://speakerdeck.com/mashabow/bezier-smoothness">speakerdeck.com</a></cite></p>

<ul>
<li>デモページ：<a href="https://mashabow.github.io/bezier-smoothness/">https://mashabow.github.io/bezier-smoothness/</a></li>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EA%A5%DD%A5%B8%A5%C8%A5%EA">リポジトリ</a>：<a href="https://github.com/mashabow/bezier-smoothness">https://github.com/mashabow/bezier-smoothness</a></li>
</ul>


<p>デモとスライドを行き来しつつ、30分ほどの発表でした。</p>

<h3>内容の補足</h3>

<h4>p. 10: <i>G</i><sup>1</sup> 連続（接線連続）</h4>

<p><a class="keyword" href="http://d.hatena.ne.jp/keyword/Illustrator">Illustrator</a> などには「スムーズポイント」という種類のアンカーポイント（始点・終点）がありますが、これは両方のハンドルが常に一直線になって動くので、<i>G</i><sup>1</sup> 連続ということですね。</p>

<h4>p. 14: 急カーブ注意の標識と曲率半径</h4>

<p><a href="https://www.google.com/search?tbm=isch&amp;q=%E9%81%93%E8%B7%AF%E6%A8%99%E8%AD%98+R+%E3%82%AB%E3%83%BC%E3%83%96">「道路標識 R カーブ」あたりで画像検索する</a>とわかりやすいかと思います。「R = 500 m」のように書いてあったりします。</p>

<h4>p. 18: フォントエディタに搭載された曲率の櫛（curvature comb）</h4>

<p>2017 年にリリースされた FontLab VI には標準搭載されています。<i>G</i><sup>2</sup> 連続になるように、うまいこと自動調整してくれる機能もついています。</p>

<iframe width="560" height="315" src="https://www.youtube.com/embed/Cj8GQiDnyq8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>


<p>Glyphs や RoboFont では <a href="https://yanone.de/software/speedpunk/">Speed Punk</a> という<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D7%A5%E9%A5%B0%A5%A4%A5%F3">プラグイン</a>が有名ですね。もともと、こちらの方が早くから開発されています。</p>

<iframe src="https://player.vimeo.com/video/38586215" width="640" height="480" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>


<h4>デモの [<i>G</i><sup>0</sup> 連続], [<i>G</i><sup>1</sup> 連続], [<i>G</i><sup>2</sup> 連続] ボタン</h4>

<p>片方の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D9%A5%B8%A5%A8%B6%CA%C0%FE">ベジエ曲線</a>を調整して <i>G</i><sup>0</sup>, <i>G</i><sup>1</sup>, <i>G</i><sup>2</sup> 連続にする機能で、<a href="https://github.com/mashabow/bezier-smoothness/blob/f60c28887f7d55713166c93b60c3d038044ba242/src/calc.ts#L88-L177">calc.ts</a> に実装があります。安直でナイーブな実装になっているので、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D9%A5%B8%A5%A8%B6%CA%C0%FE">ベジエ曲線</a>の形や配置によっては、思わぬ結果になります。コーナーケースも考慮していません。</p>

<p>実際のデザイン支援に使うためには、ユーザーの意図に寄り添った「もっと頭のいい調整方法」が必要になります。</p>

<h4><i>G</i><sup>0</sup>, <i>G</i><sup>1</sup>, <i>G</i><sup>2</sup>, … 連続</h4>

<p>英語では geometic continuity といい、その頭文字をとって <i>G</i><sup><i>n</i></sup> と呼ぶようです。</p>

<p><a href="https://en.wikipedia.org/wiki/Smoothness#Geometric_continuity">Smoothness: Geometric continuity - Wikipedia</a></p>

<p>一般の <i>n</i> について、ちゃんとした定義をあまり把握していなかったのですが、弧長パラメータで <i>n</i> 回連続<a class="keyword" href="http://d.hatena.ne.jp/keyword/%C8%F9%CA%AC">微分</a>可能であれば <i>G</i><sup><i>n</i></sup> 連続、という理解でいいんでしょうか。</p>

<p>ちなみに、日本語のブログ記事などでは「ある程度の誤差を許した <i>C</i><sup><i>n</i></sup> 連続のことを <i>G</i><sup><i>n</i></sup> 連続と呼ぶ」という解説が散見されますが、こちらはちょっとあやしそうです。</p>

<h3>雑感</h3>

<p>フォントエンジニアにとっては常識レベルの内容だとはいえ、ブラウザ上ででグラフィカルにぐりぐり動かせるデモを作ってみるとやっぱり楽しいですね。今回の話、社内の業務にはまったく直結しないのですが、みなさんに興味深く聞いてもらえたようです。</p>

<p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D9%A5%B8%A5%A8%B6%CA%C0%FE">ベジエ曲線</a>を自由自在に使いこなしているデザイナーさんからも「なるほど！」「こういうことだったんか」というような反応をいただいて、発表した甲斐がありました 🍮</p>


いまの勤務先にはエンジニア・デザイナーが持ち回りで発表する社内勉強会（FFTT）があるんですが、今週がわたしの当番だったので、ベジエ曲線のなめらかさの話をしました。speakerdeck.comデモページ：https://mashabow.github.io/bezier-smoothness/リポジトリ：https://github.com/mashabow/bezier-smoothnessデモとスライドを行き来しつつ、30分ほどの発表でした。内容の補足p. 10: G1 連続（接線連続）Illustrator などには「スムーズポイント」という種類のアンカーポイント（始点・終点）がありますが、これは両方のハンドルが常に一直線になって動くので、G1 連続ということですね。p. 14: 急カーブ注意の標識と曲率半径「道路標識 R カーブ」あたりで画像検索するとわかりやすいかと思います。「R = 500 m」のように書いてあったりします。p. 18: フォントエディタに搭載された曲率の櫛（curvature comb）2017 年にリリースされた FontLab VI には標準搭載されています。G2 連続になるように、うまいこと自動調整してくれる機能もついています。Glyphs や RoboFont では Speed Punk というプラグインが有名ですね。もともと、こちらの方が早くから開発されています。デモの [G0 連続], [G1 連続], [G2 連続] ボタン片方のベジエ曲線を調整して G0, G1, G2 連続にする機能で、calc.ts に実装があります。安直でナイーブな実装になっているので、ベジエ曲線の形や配置によっては、思わぬ結果になります。コーナーケースも考慮していません。実際のデザイン支援に使うためには、ユーザーの意図に寄り添った「もっと頭のいい調整方法」が必要になります。G0, G1, G2, … 連続英語では geometic continuity といい、その頭文字をとって Gn と呼ぶようです。Smoothness: Geometric continuity - Wikipedia一般の n について、ちゃんとした定義をあまり把握していなかったのですが、弧長パラメータで n 回連続微分可能であれば Gn 連続、という理解でいいんでしょうか。ちなみに、日本語のブログ記事などでは「ある程度の誤差を許した Cn 連続のことを Gn 連続と呼ぶ」という解説が散見されますが、こちらはちょっとあやしそうです。雑感フォントエンジニアにとっては常識レベルの内容だとはいえ、ブラウザ上ででグラフィカルにぐりぐり動かせるデモを作ってみるとやっぱり楽しいですね。今回の話、社内の業務にはまったく直結しないのですが、みなさんに興味深く聞いてもらえたようです。ベジエ曲線を自由自在に使いこなしているデザイナーさんからも「なるほど！」「こういうことだったんか」というような反応をいただいて、発表した甲斐がありました 🍮

ベジエ曲線のなめらかさについて社内勉強会で語った

<p>年末に発売されていたので読みました。</p>

<p><div class="hatena-asin-detail"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4297102919/msb2-22/"><img src="https://images-fe.ssl-images-amazon.com/images/I/51vqn-2eVKL._SL160_.jpg" class="hatena-asin-detail-image" alt="[改訂新版]プログラマのための文字コード技術入門 (WEB+DB PRESS plusシリーズ)" title="[改訂新版]プログラマのための文字コード技術入門 (WEB+DB PRESS plusシリーズ)"></a><div class="hatena-asin-detail-info"><p class="hatena-asin-detail-title"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4297102919/msb2-22/">[改訂新版]プログラマのための文字コード技術入門 (WEB+DB PRESS plusシリーズ)</a></p><ul><li><span class="hatena-asin-detail-label">作者:</span> 矢野啓介</li><li><span class="hatena-asin-detail-label">出版社/メーカー:</span> <a class="keyword" href="http://d.hatena.ne.jp/keyword/%B5%BB%BD%D1%C9%BE%CF%C0%BC%D2">技術評論社</a></li><li><span class="hatena-asin-detail-label">発売日:</span> 2018/12/28</li><li><span class="hatena-asin-detail-label">メディア:</span> 単行本（ソフトカバー）</li><li><a href="http://d.hatena.ne.jp/asin/4297102919/msb2-22" target="_blank">この商品を含むブログを見る</a></li></ul></div><div class="hatena-asin-detail-foot"></div></div></p>

<ul>
<li><a href="https://gihyo.jp/book/2019/978-4-297-10291-3">［改訂新版］プログラマのための文字コード技術入門：書籍案内｜技術評論社</a></li>
<li><a href="http://yanok.net/2018/12/post-349.html">『［改訂新版］プログラマのための文字コード技術入門』発売! - yanok.net</a></li>
</ul>


<h3>どんな感じの本だかざくっと</h3>

<p>タイトルに「<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D7%A5%ED%A5%B0%A5%E9%A5%DE">プログラマ</a>のための」あるように、プログラミング経験者がターゲットになっています。ビット・バイト、2進数・16進数、ファイル、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D7%A5%ED%A5%C8%A5%B3%A5%EB">プロトコル</a>のような「常識」についてはさらっとした説明で済まされているので、その分、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%CA%B8%BB%FA%A5%B3%A1%BC%A5%C9">文字コード</a>の本質的な部分・実践的な部分の密度が高くなっています。文章が平易なので、読み進めやすいかと思います。</p>

<p>さらに内容をはっきりさせるのであれば、『「<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B8%BD%C2%E5%C6%FC%CB%DC">現代日本</a>の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D7%A5%ED%A5%B0%A5%E9%A5%DE">プログラマ</a>のための」<a class="keyword" href="http://d.hatena.ne.jp/keyword/%CA%B8%BB%FA%A5%B3%A1%BC%A5%C9">文字コード</a>技術入門』といったところでしょうか。この本は、日本で現在使われている<a class="keyword" href="http://d.hatena.ne.jp/keyword/%CA%B8%BB%FA%A5%B3%A1%BC%A5%C9">文字コード</a>の話が中心です。世界各地の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%CA%B8%BB%FA%A5%B3%A1%BC%A5%C9">文字コード</a>だったり、歴史的な文字の符号化などにもおもしろい話はたくさんあるのですが、そこには深入りせず、実用的なテーマに絞って解説されています。国内での業務にすぐ役立ちそうな内容です。</p>

<p>第7章「<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D7%A5%ED%A5%B0%A5%E9%A5%DF%A5%F3%A5%B0%B8%C0%B8%EC">プログラミング言語</a>と<a class="keyword" href="http://d.hatena.ne.jp/keyword/%CA%B8%BB%FA%A5%B3%A1%BC%A5%C9">文字コード</a>」では <a class="keyword" href="http://d.hatena.ne.jp/keyword/Java">Java</a> と <a class="keyword" href="http://d.hatena.ne.jp/keyword/Ruby">Ruby</a> が題材になっていますが、他の言語でも基本的な概念は共通しています。それ以外の章では <a class="keyword" href="http://d.hatena.ne.jp/keyword/Java">Java</a> や <a class="keyword" href="http://d.hatena.ne.jp/keyword/Ruby">Ruby</a> の知識はまったく要求されませんので、馴染みがなくても大丈夫です。その前の第6章が Web の話だということもあり、個人的には <a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a> も取り上げてほしいところですが。</p>

<h3>初版との比較</h3>

<p>この本（改訂新版）は第2版にあたります。初版は2010年2月に発行されています。</p>

<p><div class="hatena-asin-detail"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/477414164X/msb2-22/"><img src="https://images-fe.ssl-images-amazon.com/images/I/51O0rI1KItL._SL160_.jpg" class="hatena-asin-detail-image" alt="プログラマのための文字コード技術入門 (WEB+DB PRESS plus) (WEB+DB PRESS plusシリーズ)" title="プログラマのための文字コード技術入門 (WEB+DB PRESS plus) (WEB+DB PRESS plusシリーズ)"></a><div class="hatena-asin-detail-info"><p class="hatena-asin-detail-title"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/477414164X/msb2-22/">プログラマのための文字コード技術入門 (WEB+DB PRESS plus) (WEB+DB PRESS plusシリーズ)</a></p><ul><li><span class="hatena-asin-detail-label">作者:</span> 矢野啓介</li><li><span class="hatena-asin-detail-label">出版社/メーカー:</span> <a class="keyword" href="http://d.hatena.ne.jp/keyword/%B5%BB%BD%D1%C9%BE%CF%C0%BC%D2">技術評論社</a></li><li><span class="hatena-asin-detail-label">発売日:</span> 2010/02/18</li><li><span class="hatena-asin-detail-label">メディア:</span> 単行本（ソフトカバー）</li><li><span class="hatena-asin-detail-label">購入</span>: 34人 <span class="hatena-asin-detail-label">クリック</span>: 578回</li><li><a href="http://d.hatena.ne.jp/asin/477414164X/msb2-22" target="_blank">この商品を含むブログ (129件) を見る</a></li></ul></div><div class="hatena-asin-detail-foot"></div></div></p>

<p>初版と改訂新版、左右に並べて目で diff をとりながら読みました。<a class="keyword" href="http://d.hatena.ne.jp/keyword/Unicode">Unicode</a> をはじめ、各規格・ツールの更新に合わせた細かな対応がなされていますが、こうして見比べてみると、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%CA%B8%BB%FA%A5%B3%A1%BC%A5%C9">文字コード</a>の本質的な部分についてはほとんど変わらないことが分かります。<a class="keyword" href="http://d.hatena.ne.jp/keyword/Unicode">Unicode</a> 絵文字（2010年〜）についての記述も増えていますが、ここ数年の世界的な普及を見ると、第3版ではもっともっとページ数が割かれるもしれません(笑)</p>

<p>この期間における最大の変化は、<a class="keyword" href="http://d.hatena.ne.jp/keyword/UTF-8">UTF-8</a> の圧倒的な普及でしょうか。初版では、著者の「<a class="keyword" href="http://d.hatena.ne.jp/keyword/JIS%20X%200213">JIS X 0213</a> 推し」な雰囲気が端々から伝わってきましたが、<a class="keyword" href="http://d.hatena.ne.jp/keyword/UTF-8">UTF-8</a> の普及がそれを取り込む・呑み込むかたちになりました。Web <a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D6%A5%E9%A5%A6%A5%B8%A5%F3%A5%B0">ブラウジング</a>で文字化けに遭遇するようなこともめっきり減り、たまに出会うと懐かしさすら感じます。<a class="keyword" href="http://d.hatena.ne.jp/keyword/Shift_JIS">Shift_JIS</a> や <a class="keyword" href="http://d.hatena.ne.jp/keyword/EUC">EUC</a>-JP や <a class="keyword" href="http://d.hatena.ne.jp/keyword/ISO-2022-JP">ISO-2022-JP</a> を知らずに、<a class="keyword" href="http://d.hatena.ne.jp/keyword/UTF-8">UTF-8</a> 一本で暮らしていける世代がすでに出てきているはずです。「レガシー」<a class="keyword" href="http://d.hatena.ne.jp/keyword/%CA%B8%BB%FA%A5%B3%A1%BC%A5%C9">文字コード</a>から解放される一方で、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Unicode">Unicode</a> の孕んだ複雑さと向き合う場面が増えそうですが……</p>

<p>ただし、「<a class="keyword" href="http://d.hatena.ne.jp/keyword/UTF-8">UTF-8</a> の圧倒的な普及」という印象は、自分が仕事で新しめの Web アプリケーションを触っているから、というのもあるかもしれません。大企業や役所の業務システムはいまどんな感じなんでしょうか。</p>

<h3>メモと補足</h3>

<h4>p. 9 図 1.2</h4>

<blockquote><p>亜 哀 愛 悪 握 圧 扱 安 … 惑 枠 湾 腕</p></blockquote>

<p>となっていますが、これは「旧」<a class="keyword" href="http://d.hatena.ne.jp/keyword/%BE%EF%CD%D1%B4%C1%BB%FA">常用漢字</a>の先頭部分と末尾部分ですね。2010年の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%BE%EF%CD%D1%B4%C1%BB%FA">常用漢字</a>改定によって、「亜 哀 <strong>挨</strong> 愛 <strong>曖</strong> 悪 握 圧 … 惑 枠 湾 腕」という並びになりました。</p>

<h4>p. 193</h4>

<blockquote><p>IANA の登録簿には、……実際に使われている <a class="keyword" href="http://d.hatena.ne.jp/keyword/JIS%20X%200213">JIS X 0213</a> の符号化方式が登録されていないという問題もあります。</p></blockquote>

<p>登録されていなかったんですね、知りませんでした。</p>

<p><a href="https://www.iana.org/assignments/character-sets/character-sets.xhtml">https://www.iana.org/assignments/character-sets/character-sets.xhtml</a></p>

<p>需要がなかったのでしょうか……；；</p>

<h4>p. 206</h4>

<blockquote><p>HTML の<a class="keyword" href="http://d.hatena.ne.jp/keyword/DTD">DTD</a> において、「copy という名前は <code>&amp;#169;</code> を表す」という定義がなされているため、……</p></blockquote>

<p>このあたりは HTML 4.01 の話です。<a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a> に <a class="keyword" href="http://d.hatena.ne.jp/keyword/DTD">DTD</a> は存在しません。</p>

<h4>p. 208</h4>

<blockquote><p><a class="keyword" href="http://d.hatena.ne.jp/keyword/Shift_JIS">Shift_JIS</a> を用いる場合はリスト 6.1 の例の「<a class="keyword" href="http://d.hatena.ne.jp/keyword/UTF-8">UTF-8</a>」の部分を「<a class="keyword" href="http://d.hatena.ne.jp/keyword/Shift_JIS">Shift_JIS</a>」に、<a class="keyword" href="http://d.hatena.ne.jp/keyword/EUC">EUC</a>-JP の場合は「<a class="keyword" href="http://d.hatena.ne.jp/keyword/EUC">EUC</a>-JP」にします。</p></blockquote>

<p>HTML の <code>&lt;meta charset="hogehoge"&gt;</code> を説明している箇所です。ただし、この本が参照している HTML 5.2 には</p>

<blockquote><p>Authors should use <a class="keyword" href="http://d.hatena.ne.jp/keyword/UTF-8">UTF-8</a>. Conformance checkers may advise authors against using legacy encodings.</p></blockquote>

<p><a href="https://www.w3.org/TR/html52/document-metadata.html#specifying-the-documents-character-encoding">という説明</a>があり、「<a class="keyword" href="http://d.hatena.ne.jp/keyword/UTF-8">UTF-8</a> を使用すべき」となっています。一方、HTML Living Standard ではさらに進んで</p>

<blockquote><p>The Encoding standard requires use of the <a class="keyword" href="http://d.hatena.ne.jp/keyword/UTF-8">UTF-8</a> character encoding and requires use of the "<code>utf-8</code>" encoding label to identify it. Those requirements necessitate that the document's character encoding declaration, if it exists, specifies an encoding label using an ASCII <a class="keyword" href="http://d.hatena.ne.jp/keyword/case-insensitive">case-insensitive</a> match for "<code>utf-8</code>". Regardless of whether a character encoding declaration is present or not, the actual character encoding used to encode the document must be <a class="keyword" href="http://d.hatena.ne.jp/keyword/UTF-8">UTF-8</a>.</p></blockquote>

<p><a href="https://html.spec.whatwg.org/multipage/semantics.html#charset">という記述になっており</a>、「<a class="keyword" href="http://d.hatena.ne.jp/keyword/UTF-8">UTF-8</a> を使用しなければならない」ことになりました。</p>

<h4>p. 216</h4>

<blockquote><p>URL の中に、予約されている記号や、ASCII で表現できない文字を書きたいときには、<strong>URL 符号化</strong>という方法が使われます。</p></blockquote>

<p>この本では触れられていませんが、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C9%A5%E1%A5%A4%A5%F3">ドメイン</a>名部分は <a href="https://ja.wikipedia.org/wiki/Punycode">Punycode</a> によって符号化されます。例えば、<a href="https://%E6%97%A5%E6%9C%AC%E8%AA%9E.jp"><code>https://日本語.jp</code></a> は <a href="https://xn--wgv71a119e.jp"><code>https://xn--wgv71a119e.jp</code></a> になります。</p>

<h4>p. 222</h4>

<blockquote><p>クライアントからの送信に使われる<a class="keyword" href="http://d.hatena.ne.jp/keyword/%CA%B8%BB%FA%A5%B3%A1%BC%A5%C9">文字コード</a>は、HTML の form 要素の accept-charset 属性で明示的に指定することもできます。<code>accept-charset="Shift_JIS"</code> と指定すれば <a class="keyword" href="http://d.hatena.ne.jp/keyword/Shift_JIS">Shift_JIS</a> で送信するということです。</p></blockquote>

<p>HTML 5.2 では</p>

<blockquote><p>[...] each token must be an ASCII <a class="keyword" href="http://d.hatena.ne.jp/keyword/case-insensitive">case-insensitive</a> match for one of the labels of an ASCII-compatible encoding.</p></blockquote>

<p><a href="https://www.w3.org/TR/html52/sec-forms.html#element-attrdef-form-accept-charset">となっています</a>。一方、HTML Living Standard では</p>

<blockquote><p>If specified, the <a class="keyword" href="http://d.hatena.ne.jp/keyword/value">value</a> must be an ASCII <a class="keyword" href="http://d.hatena.ne.jp/keyword/case-insensitive">case-insensitive</a> match for "<code>UTF-8</code>".</p></blockquote>

<p><a href="https://html.spec.whatwg.org/multipage/forms.html#attr-form-accept-charset">と規定されており</a>、こちらも <a class="keyword" href="http://d.hatena.ne.jp/keyword/UTF-8">UTF-8</a> 固定になりました。</p>

<h4>p. <a class="keyword" href="http://d.hatena.ne.jp/keyword/226">226</a></h4>

<blockquote><p>最後に、これからの日本語メールの符号化がどうあるべきかを考察しました。</p></blockquote>

<p>初版の名残です。初版では今後についての考察があったのですが、<a class="keyword" href="http://d.hatena.ne.jp/keyword/UTF-8">UTF-8</a> の普及により、改訂新版ではこれが削除されています。</p>

<h4>p. 293 表 8.1</h4>

<p>表のタイトルが「ベンダー依存の変換の問題の発生する代表的な文字」になっていますが、おそらく表 8.2からの編集ミスです。</p>

<hr />

<p><div class="hatena-asin-detail"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4297102919/msb2-22/"><img src="https://images-fe.ssl-images-amazon.com/images/I/51vqn-2eVKL._SL160_.jpg" class="hatena-asin-detail-image" alt="[改訂新版]プログラマのための文字コード技術入門 (WEB+DB PRESS plusシリーズ)" title="[改訂新版]プログラマのための文字コード技術入門 (WEB+DB PRESS plusシリーズ)"></a><div class="hatena-asin-detail-info"><p class="hatena-asin-detail-title"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4297102919/msb2-22/">[改訂新版]プログラマのための文字コード技術入門 (WEB+DB PRESS plusシリーズ)</a></p><ul><li><span class="hatena-asin-detail-label">作者:</span> 矢野啓介</li><li><span class="hatena-asin-detail-label">出版社/メーカー:</span> <a class="keyword" href="http://d.hatena.ne.jp/keyword/%B5%BB%BD%D1%C9%BE%CF%C0%BC%D2">技術評論社</a></li><li><span class="hatena-asin-detail-label">発売日:</span> 2018/12/28</li><li><span class="hatena-asin-detail-label">メディア:</span> 単行本（ソフトカバー）</li><li><a href="http://d.hatena.ne.jp/asin/4297102919/msb2-22" target="_blank">この商品を含むブログを見る</a></li></ul></div><div class="hatena-asin-detail-foot"></div></div></p>

<p><div class="hatena-asin-detail"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/B07M98R3S5/msb2-22/"><img src="https://images-fe.ssl-images-amazon.com/images/I/51M4td-sVGL._SL160_.jpg" class="hatena-asin-detail-image" alt="［改訂新版］プログラマのための文字コード技術入門 WEB+DB PRESS plus" title="［改訂新版］プログラマのための文字コード技術入門 WEB+DB PRESS plus"></a><div class="hatena-asin-detail-info"><p class="hatena-asin-detail-title"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/B07M98R3S5/msb2-22/">［改訂新版］プログラマのための文字コード技術入門 WEB+DB PRESS plus</a></p><ul><li><span class="hatena-asin-detail-label">作者:</span> 矢野啓介</li><li><span class="hatena-asin-detail-label">出版社/メーカー:</span> <a class="keyword" href="http://d.hatena.ne.jp/keyword/%B5%BB%BD%D1%C9%BE%CF%C0%BC%D2">技術評論社</a></li><li><span class="hatena-asin-detail-label">発売日:</span> 2018/12/22</li><li><span class="hatena-asin-detail-label">メディア:</span> <a class="keyword" href="http://d.hatena.ne.jp/keyword/Kindle">Kindle</a>版</li><li><a href="http://d.hatena.ne.jp/asin/B07M98R3S5/msb2-22" target="_blank">この商品を含むブログを見る</a></li></ul></div><div class="hatena-asin-detail-foot"></div></div></p>


年末に発売されていたので読みました。[改訂新版]プログラマのための文字コード技術入門 (WEB+DB PRESS plusシリーズ)作者: 矢野啓介出版社/メーカー: 技術評論社発売日: 2018/12/28メディア: 単行本（ソフトカバー）この商品を含むブログを見る［改訂新版］プログラマのための文字コード技術入門：書籍案内｜技術評論社『［改訂新版］プログラマのための文字コード技術入門』発売! - yanok.netどんな感じの本だかざくっとタイトルに「プログラマのための」あるように、プログラミング経験者がターゲットになっています。ビット・バイト、2進数・16進数、ファイル、プロトコルのような「常識」についてはさらっとした説明で済まされているので、その分、文字コードの本質的な部分・実践的な部分の密度が高くなっています。文章が平易なので、読み進めやすいかと思います。さらに内容をはっきりさせるのであれば、『「現代日本のプログラマのための」文字コード技術入門』といったところでしょうか。この本は、日本で現在使われている文字コードの話が中心です。世界各地の文字コードだったり、歴史的な文字の符号化などにもおもしろい話はたくさんあるのですが、そこには深入りせず、実用的なテーマに絞って解説されています。国内での業務にすぐ役立ちそうな内容です。第7章「プログラミング言語と文字コード」では Java と Ruby が題材になっていますが、他の言語でも基本的な概念は共通しています。それ以外の章では Java や Ruby の知識はまったく要求されませんので、馴染みがなくても大丈夫です。その前の第6章が Web の話だということもあり、個人的には JavaScript も取り上げてほしいところですが。初版との比較この本（改訂新版）は第2版にあたります。初版は2010年2月に発行されています。プログラマのための文字コード技術入門 (WEB+DB PRESS plus) (WEB+DB PRESS plusシリーズ)作者: 矢野啓介出版社/メーカー: 技術評論社発売日: 2010/02/18メディア: 単行本（ソフトカバー）購入: 34人 クリック: 578回この商品を含むブログ (129件) を見る初版と改訂新版、左右に並べて目で diff をとりながら読みました。Unicode をはじめ、各規格・ツールの更新に合わせた細かな対応がなされていますが、こうして見比べてみると、文字コードの本質的な部分についてはほとんど変わらないことが分かります。Unicode 絵文字（2010年〜）についての記述も増えていますが、ここ数年の世界的な普及を見ると、第3版ではもっともっとページ数が割かれるもしれません(笑)この期間における最大の変化は、UTF-8 の圧倒的な普及でしょうか。初版では、著者の「JIS X 0213 推し」な雰囲気が端々から伝わってきましたが、UTF-8 の普及がそれを取り込む・呑み込むかたちになりました。Web ブラウジングで文字化けに遭遇するようなこともめっきり減り、たまに出会うと懐かしさすら感じます。Shift_JIS や EUC-JP や ISO-2022-JP を知らずに、UTF-8 一本で暮らしていける世代がすでに出てきているはずです。「レガシー」文字コードから解放される一方で、Unicode の孕んだ複雑さと向き合う場面が増えそうですが……ただし、「UTF-8 の圧倒的な普及」という印象は、自分が仕事で新しめの Web アプリケーションを触っているから、というのもあるかもしれません。大企業や役所の業務システムはいまどんな感じなんでしょうか。メモと補足p. 9 図 1.2亜 哀 愛 悪 握 圧 扱 安 … 惑 枠 湾 腕となっていますが、これは「旧」常用漢字の先頭部分と末尾部分ですね。2010年の常用漢字改定によって、「亜 哀 挨 愛 曖 悪 握 圧 … 惑 枠 湾 腕」という並びになりました。p. 193IANA の登録簿には、……実際に使われている JIS X 0213 の符号化方式が登録されていないという問題もあります。登録されていなかったんですね、知りませんでした。https://www.iana.org/assignments/character-sets/character-sets.xhtml需要がなかったのでしょうか……；；p. 206HTML のDTD において、「copy という名前は &#169; を表す」という定義がなされているため、……このあたりは HTML 4.01 の話です。HTML5 に DTD は存在しません。p. 208Shift_JIS を用いる場合はリスト 6.1 の例の「UTF-8」の部分を「Shift_JIS」に、EUC-JP の場合は「EUC-JP」にします。HTML の <meta charset="hogehoge"> を説明している箇所です。ただし、この本が参照している HTML 5.2 にはAuthors should use UTF-8. Conformance checkers may advise authors against using legacy encodings.という説明があり、「UTF-8 を使用すべき」となっています。一方、HTML Living Standard ではさらに進んでThe Encoding standard requires use of the UTF-8 character encoding and requires use of the "utf-8" encoding label to identify it. Those requirements necessitate that the document's character encoding declaration, if it exists, specifies an encoding label using an ASCII case-insensitive match for "utf-8". Regardless of whether a character encoding declaration is present or not, the actual character encoding used to encode the document must be UTF-8.という記述になっており、「UTF-8 を使用しなければならない」ことになりました。p. 216URL の中に、予約されている記号や、ASCII で表現できない文字を書きたいときには、URL 符号化という方法が使われます。この本では触れられていませんが、ドメイン名部分は Punycode によって符号化されます。例えば、https://日本語.jp は https://xn--wgv71a119e.jp になります。p. 222クライアントからの送信に使われる文字コードは、HTML の form 要素の accept-charset 属性で明示的に指定することもできます。accept-charset="Shift_JIS" と指定すれば Shift_JIS で送信するということです。HTML 5.2 では[...] each token must be an ASCII case-insensitive match for one of the labels of an ASCII-compatible encoding.となっています。一方、HTML Living Standard ではIf specified, the value must be an ASCII case-insensitive match for "UTF-8".と規定されており、こちらも UTF-8 固定になりました。p. 226最後に、これからの日本語メールの符号化がどうあるべきかを考察しました。初版の名残です。初版では今後についての考察があったのですが、UTF-8 の普及により、改訂新版ではこれが削除されています。p. 293 表 8.1表のタイトルが「ベンダー依存の変換の問題の発生する代表的な文字」になっていますが、おそらく表 8.2からの編集ミスです。[改訂新版]プログラマのための文字コード技術入門 (WEB+DB PRESS plusシリーズ)作者: 矢野啓介出版社/メーカー: 技術評論社発売日: 2018/12/28メディア: 単行本（ソフトカバー）この商品を含むブログを見る［改訂新版］プログラマのための文字コード技術入門 WEB+DB PRESS plus作者: 矢野啓介出版社/メーカー: 技術評論社発売日: 2018/12/22メディア: Kindle版この商品を含むブログを見る

『[改訂新版] プログラマのための文字コード技術入門』を読んだ

<h3>はじめに</h3>

<p>この記事は、<a href="https://adventar.org/calendars/3235">Feedforce Advent Calendar 2018</a> の 23 日目の記事です。前日は、あおいさんによる「<a href="https://note.mu/pnao/n/n4f31c41633b5">平成の終わりに非ヲタに聴いてほしいハロプロソング5選</a>」でした。<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%CF%A5%ED%A5%D7%A5%ED">ハロプロ</a>……自分が音楽に疎すぎて話が広げられないのですが、あれですよね、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A1%EE-ute">℃-ute</a> が話題になって来たころ、こう<a class="keyword" href="http://d.hatena.ne.jp/keyword/%CA%B8%BB%FA%A5%B3%A1%BC%A5%C9">文字コード</a>的にチャレンジングなユニット名だな、などと考えていたのが記憶に残っています。</p>

<p>さて、ここから本題で、今回はとりとめもなく type について書いてみます。</p>

<h3>type</h3>

<p>type とはそのまま「型」なんですが、文字界隈のみなさんはご存じのとおり、活字だったり、その書体だったり、そのへんのものをざっくり type と呼びます。もう少しきっちり言うと、活字（スタンプみたいなあれです）は <a class="keyword" href="http://d.hatena.ne.jp/keyword/movable%20type">movable type</a> で、いろいろ並べ替えて使える文字の型、といった感じでしょうか。活字を組む（並べる）ことは<a class="keyword" href="http://d.hatena.ne.jp/keyword/%C1%C8%C8%C7">組版</a> typesetting ですし、活字の表面に凸状に浮かび上がっている文字の形は書体 typeface といいます。まんまですね。</p>

<p>活字を組んできれいな版面を作る技術が<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%BF%A5%A4%A5%DD%A5%B0%A5%E9%A5%D5%A5%A3">タイポグラフィ</a> typography で、誤植の <a class="keyword" href="http://d.hatena.ne.jp/keyword/typo">typo</a> は typographic error の略らしいです。会社名や商品名の「ロゴ」は<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%ED%A5%B4%A5%BF%A5%A4%A5%D7">ロゴタイプ</a> logotype の略ですね。活字で文書を書く機械はタイプライター typewriter ですし、タイプライターを打つことはタイピング typing です。タイプライターを電信（電気通信）と組み合わせたシステムが<a href="https://ja.wikipedia.org/wiki/%E3%83%86%E3%83%AC%E3%82%BF%E3%82%A4%E3%83%97%E7%AB%AF%E6%9C%AB">テレタイプ</a> teletype で、そこから来た TTY という略称・概念は、今でも <a class="keyword" href="http://d.hatena.ne.jp/keyword/Unix">Unix</a> 系のシステムで目にします<a href="#f-fc4466bd" name="fn-fc4466bd" title="テレタイプは文字コードの歴史的にもおもしろいので、興味のある方は『文字符号の歴史―欧米と日本編』あたりをどうぞ。">*1</a>。</p>

<p>あ、ちなみに金属活字は、<a href="https://www.youtube.com/watch?v=rDZ0bxPoefY">母型（ぼけい）という鋳型に鉛合金を流し込んで鋳造する</a>んですが、母<b>型</b>といっても英語では matrix ですね。</p>

<p><figure class="figure-image figure-image-fotolife" title="金属活字とその母型"><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/m/mashabow/20181223/20181223233559.jpg" alt="f:id:mashabow:20181223233559j:plain" title="f:id:mashabow:20181223233559j:plain" class="hatena-fotolife" itemprop="image"></span><figcaption>金属活字とその母型<a href="#f-dbf09dd2" name="fn-dbf09dd2" title="2017年3月11日に開催された《タイポグラフィの世界5 戦後日本の金属活字》で展示されていたものです。">*2</a></figcaption></figure></p>

<p>現代のデジタルフォントはデータ以外に実体がありませんが、そのフォントフォーマットには TrueType や OpenType という名前がつけられています。フォントのデザイナーは type designer ですし、フォントを制作している会社は type foundry（つまり活字鋳造所）と今でも呼ばれます。わたしは前職、<a href="http://typeproject.com/">タイププロジェクト</a>という会社でフォントのエンジニアをしていました<a href="#f-d4db3462" name="fn-d4db3462" title="NHK 美の壺 取材こぼれ話 のページの《2018年6月22日放送 「心を伝える フォント」こぼれ話》という項に、タイププロジェクトの職場の様子（と自分の顔面）がちらっと載っています。">*3</a>。</p>

<p>さてさて。</p>

<p>7月にそのタイププロジェクトを退職し、現在<a href="https://www.feedforce.jp/">フィードフォース</a>でフロントエンドエンジニア修行中です。自分が所属しているプロダクトで、TypeScript を導入しようということになり<a href="#f-41cf73fb" name="fn-41cf73fb" title="正確に言うと、Flow から TypeScript への移行です。">*4</a>、ここしばらく TypeScript と格闘しています。</p>

<p>TypeScript。<a class="keyword" href="http://d.hatena.ne.jp/keyword/Microsoft">Microsoft</a> が TypeScript を公開した2012年にこんなことをつぶやいていたのですが、</p>

<p><blockquote class="twitter-tweet" data-lang="HASH(0xf50d7a8)"><p lang="ja" dir="ltr">TypeScript って文字に関係してそうで別に関係してない</p>&mdash; mashabow (@mashabow) <a href="https://twitter.com/mashabow/status/253060102263812096?ref_src=twsrc%5Etfw">October 2, 2012</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script></p>

<p>結局今年の夏まで勉強せずに来てしまったため、上記の type 好きとしては若干引け目を感じておりました。ちなみに文字界隈で script といえば「<a href="http://d.hatena.ne.jp/keyword/%CD%D1%BB%FA%B7%CF">用字系</a>」の意味ですね。</p>

<p>導入時の設定（tsconfig.<a class="keyword" href="http://d.hatena.ne.jp/keyword/json">json</a>, TSLint, Babel, Webpack, …）に慣れていなくて苦労しましたが、文法や概念自体は比較的すんなり飲み込めた感触です。昔ちょっと触った <a class="keyword" href="http://d.hatena.ne.jp/keyword/C%23">C#</a> や <a class="keyword" href="http://d.hatena.ne.jp/keyword/ActionScript">ActionScript</a> をふわっと思い出しました。入門者向けのガイドだと、ES201x 側の機能の説明にページが割かれているものが多かったんですが、その点、@vvakame さんの以下のサイトはコンパクトで、手っ取り早く学ぶにはちょうどよい感じでした。</p>

<ul>
<li><a href="http://typescript.ninja/typescript-in-definitelyland/">Revised Revised 型の国のTypeScript | Revised Revised TypeScript in Definitelyland</a></li>
</ul>


<p>入門レベルを脱した後も、Qiita 上の <a href="https://qiita.com/search?utf8=%E2%9C%93&amp;sort=created&amp;q=user%3Avvakame+typescript+%E5%A4%89%E6%9B%B4%E7%82%B9">TypeScript x.y.z 変更点</a> 記事にはいつもお世話になっています。</p>

<p>で、静的型付けや<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B7%BF%BF%E4%CF%C0">型推論</a>、やっていることや仕組みはなんとなくわかるのですが、ちゃんとした仕組みについてはそういえば理解していませんでした。また、社内の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B4%D8%BF%F4%B7%BF%A5%D7%A5%ED%A5%B0%A5%E9%A5%DF%A5%F3%A5%B0">関数型プログラミング</a>に強いエンジニアから<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B4%D8%BF%F4%B7%BF%A5%D7%A5%ED%A5%B0%A5%E9%A5%DF%A5%F3%A5%B0">関数型プログラミング</a>圧を感じることもあり、いい加減そのへん勉強しようかと、適当に検索して出てきた筑波大の講義資料でも読んでみました。</p>

<ul>
<li><a href="http://www.cs.tsukuba.ac.jp/~kam/complogic/">計算論理学</a></li>
</ul>


<p>そしたら、なかなかおもしろいんです。型なしラムダ計算のあたりは自分も学部時代に講義でやって、おもしろいー！と思っていたんですが、その自然な延長で型付け・<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B7%BF%BF%E4%CF%C0">型推論</a>ができるんですね。この次は何を読めばいいのかな、と思って「おすすめの（<b>わかりやすい</b>）本などあったら教えてください 🙏」と社内のフロントエンドミーティングで聞いてみたところ、以下のふたつをおすすめされました。</p>

<ul>
<li><a href="https://github.com/MostlyAdequate/mostly-adequate-guide">MostlyAdequate/mostly-adequate-guide: Mostly adequate guide to FP (in javascript)</a></li>
<li><a href="https://amzn.to/2BMyMGf">『すごい Haskell たのしく学ぼう！』</a></li>
</ul>


<p>前者はちょうど読み終えたところなんですが、演習問題があって回答を自動で採点してくれるところがおもしろいですね。<a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a> は分かっている人向けです。英語の言い回しがちょっと難しい気がしますが、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B4%D8%BF%F4%B7%BF%A5%D7%A5%ED%A5%B0%A5%E9%A5%DF%A5%F3%A5%B0">関数型プログラミング</a>に対する苦手感（昔 <a class="keyword" href="http://d.hatena.ne.jp/keyword/Lisp">Lisp</a> を触ろうとしてどうも馴染めなかった）はだいぶ解消されました。この調子で、後者のすごいH本もこれから読もうかと思います。</p>

<h3>おわりに</h3>

<p>というわけで、近況報告も兼ねて、とりとめのない type の話でした。そのうち、「どちらの type にも詳しいです！！！」と言えるようになりたいですね。</p>

<p>明日の <a href="https://adventar.org/calendars/3235">Feedforce Advent Calendar 2018</a> は <a href="https://twitter.com/meihong">@meihong</a> さんです。なにやら、なにかしらハートフルな内容を書いてくださるようです。それでは良い休日を！</p>
<div class="footnote">
<p class="footnote"><a href="#fn-fc4466bd" name="f-fc4466bd" class="footnote-number">*1</a><span class="footnote-delimiter">:</span><span class="footnote-text">テレタイプは<a class="keyword" href="http://d.hatena.ne.jp/keyword/%CA%B8%BB%FA%A5%B3%A1%BC%A5%C9">文字コード</a>の歴史的にもおもしろいので、興味のある方は『<a href="https://amzn.to/2BMr279">文字符号の歴史―欧米と日本編</a>』あたりをどうぞ。</span></p>
<p class="footnote"><a href="#fn-dbf09dd2" name="f-dbf09dd2" class="footnote-number">*2</a><span class="footnote-delimiter">:</span><span class="footnote-text">2017年3月11日に開催された《<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%BF%A5%A4%A5%DD%A5%B0%A5%E9%A5%D5%A5%A3">タイポグラフィ</a>の世界5 戦後日本の金属活字》で展示されていたものです。</span></p>
<p class="footnote"><a href="#fn-d4db3462" name="f-d4db3462" class="footnote-number">*3</a><span class="footnote-delimiter">:</span><span class="footnote-text"><a href="http://www4.nhk.or.jp/tsubo/179/">NHK 美の壺 取材こぼれ話</a> のページの《2018年6月22日放送 「心を伝える フォント」こぼれ話》という項に、タイププロジェクトの職場の様子（と自分の顔面）がちらっと載っています。</span></p>
<p class="footnote"><a href="#fn-41cf73fb" name="f-41cf73fb" class="footnote-number">*4</a><span class="footnote-delimiter">:</span><span class="footnote-text">正確に言うと、<a href="https://flow.org/">Flow</a> から TypeScript への移行です。</span></p>
</div>

はじめにこの記事は、Feedforce Advent Calendar 2018 の 23 日目の記事です。前日は、あおいさんによる「平成の終わりに非ヲタに聴いてほしいハロプロソング5選」でした。ハロプロ……自分が音楽に疎すぎて話が広げられないのですが、あれですよね、℃-ute が話題になって来たころ、こう文字コード的にチャレンジングなユニット名だな、などと考えていたのが記憶に残っています。さて、ここから本題で、今回はとりとめもなく type について書いてみます。typetype とはそのまま「型」なんですが、文字界隈のみなさんはご存じのとおり、活字だったり、その書体だったり、そのへんのものをざっくり type と呼びます。もう少しきっちり言うと、活字（スタンプみたいなあれです）は movable type で、いろいろ並べ替えて使える文字の型、といった感じでしょうか。活字を組む（並べる）ことは組版 typesetting ですし、活字の表面に凸状に浮かび上がっている文字の形は書体 typeface といいます。まんまですね。活字を組んできれいな版面を作る技術がタイポグラフィ typography で、誤植の typo は typographic error の略らしいです。会社名や商品名の「ロゴ」はロゴタイプ logotype の略ですね。活字で文書を書く機械はタイプライター typewriter ですし、タイプライターを打つことはタイピング typing です。タイプライターを電信（電気通信）と組み合わせたシステムがテレタイプ teletype で、そこから来た TTY という略称・概念は、今でも Unix 系のシステムで目にします*1。あ、ちなみに金属活字は、母型（ぼけい）という鋳型に鉛合金を流し込んで鋳造するんですが、母型といっても英語では matrix ですね。金属活字とその母型*2現代のデジタルフォントはデータ以外に実体がありませんが、そのフォントフォーマットには TrueType や OpenType という名前がつけられています。フォントのデザイナーは type designer ですし、フォントを制作している会社は type foundry（つまり活字鋳造所）と今でも呼ばれます。わたしは前職、タイププロジェクトという会社でフォントのエンジニアをしていました*3。さてさて。7月にそのタイププロジェクトを退職し、現在フィードフォースでフロントエンドエンジニア修行中です。自分が所属しているプロダクトで、TypeScript を導入しようということになり*4、ここしばらく TypeScript と格闘しています。TypeScript。Microsoft が TypeScript を公開した2012年にこんなことをつぶやいていたのですが、TypeScript って文字に関係してそうで別に関係してない— mashabow (@mashabow) October 2, 2012結局今年の夏まで勉強せずに来てしまったため、上記の type 好きとしては若干引け目を感じておりました。ちなみに文字界隈で script といえば「用字系」の意味ですね。導入時の設定（tsconfig.json, TSLint, Babel, Webpack, …）に慣れていなくて苦労しましたが、文法や概念自体は比較的すんなり飲み込めた感触です。昔ちょっと触った C# や ActionScript をふわっと思い出しました。入門者向けのガイドだと、ES201x 側の機能の説明にページが割かれているものが多かったんですが、その点、@vvakame さんの以下のサイトはコンパクトで、手っ取り早く学ぶにはちょうどよい感じでした。Revised Revised 型の国のTypeScript | Revised Revised TypeScript in Definitelyland入門レベルを脱した後も、Qiita 上の TypeScript x.y.z 変更点 記事にはいつもお世話になっています。で、静的型付けや型推論、やっていることや仕組みはなんとなくわかるのですが、ちゃんとした仕組みについてはそういえば理解していませんでした。また、社内の関数型プログラミングに強いエンジニアから関数型プログラミング圧を感じることもあり、いい加減そのへん勉強しようかと、適当に検索して出てきた筑波大の講義資料でも読んでみました。計算論理学そしたら、なかなかおもしろいんです。型なしラムダ計算のあたりは自分も学部時代に講義でやって、おもしろいー！と思っていたんですが、その自然な延長で型付け・型推論ができるんですね。この次は何を読めばいいのかな、と思って「おすすめの（わかりやすい）本などあったら教えてください 🙏」と社内のフロントエンドミーティングで聞いてみたところ、以下のふたつをおすすめされました。MostlyAdequate/mostly-adequate-guide: Mostly adequate guide to FP (in javascript)『すごい Haskell たのしく学ぼう！』前者はちょうど読み終えたところなんですが、演習問題があって回答を自動で採点してくれるところがおもしろいですね。JavaScript は分かっている人向けです。英語の言い回しがちょっと難しい気がしますが、関数型プログラミングに対する苦手感（昔 Lisp を触ろうとしてどうも馴染めなかった）はだいぶ解消されました。この調子で、後者のすごいH本もこれから読もうかと思います。おわりにというわけで、近況報告も兼ねて、とりとめのない type の話でした。そのうち、「どちらの type にも詳しいです！！！」と言えるようになりたいですね。明日の Feedforce Advent Calendar 2018 は @meihong さんです。なにやら、なにかしらハートフルな内容を書いてくださるようです。それでは良い休日を！*1:テレタイプは文字コードの歴史的にもおもしろいので、興味のある方は『文字符号の歴史―欧米と日本編』あたりをどうぞ。*2:2017年3月11日に開催された《タイポグラフィの世界5 戦後日本の金属活字》で展示されていたものです。*3:NHK 美の壺 取材こぼれ話 のページの《2018年6月22日放送 「心を伝える フォント」こぼれ話》という項に、タイププロジェクトの職場の様子（と自分の顔面）がちらっと載っています。*4:正確に言うと、Flow から TypeScript への移行です。

type の話

<p><a class="keyword" href="http://d.hatena.ne.jp/keyword/Twitter">Twitter</a> 上でとある鍵アカ氏が「このツール知らなかった！ 使ってみたらべんり！ 楽しい！」的なことをつぶやいていました。フォントの世界にはお役立ちツールがいろいろとあるのですが、日本語での情報が少ないこともあり、とっかかりが難しいかもしれません。そこでこの記事では、「ツールを探すならまずはここから」という定番の情報源を3つ紹介しておきます。</p>

<h3>1. awesome-typography</h3>

<p><iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fgithub.com%2FJolg42%2Fawesome-typography" title="Jolg42/awesome-typography" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://github.com/Jolg42/awesome-typography">github.com</a></cite></p>

<p>フォント関連のさまざまなツールがリストアップされたリンク集です。ツールだけでなく、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%AA%A1%BC%A5%D7%A5%F3%A5%BD%A1%BC%A5%B9">オープンソース</a>のフォントや、フォント関連のドキュメントなども一緒に挙げられています。</p>

<p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D7%A5%ED%A5%B0%A5%E9%A5%DF%A5%F3%A5%B0%B8%C0%B8%EC">プログラミング言語</a>別に並んでおり、ごく簡単な説明もついていますので、「この言語でうまいことあれをやってくれるツールないかなー？」というときには真っ先にチェックすべきページです。</p>

<h3>2. 技術カンファレンスの動画</h3>

<p>フォント関係のカンファレンスというと <a href="https://www.atypi.org/conferences">ATypI</a> が有名ですが、<a href="https://www.typotalks.com/labs/">TYPO Labs</a> や <a href="http://typemedia.org/robothon/">Robothon</a> のように、技術的側面に特化したカンファレンスも開催されています。定番ツールから尖ったツールまで、作者の解説や実演デモをじっくり見ることができます。以下のように動画が公開されており、カンファレンスに行かずとも視聴できるのが嬉しいところです。</p>

<ul>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/TYPO">TYPO</a> Labs: <a href="https://www.typotalks.com/videos/?talk_event=TYPO%20Labs%202018&amp;talk_langs[en]=en&amp;talk_langs[de]=de">2018</a>, <a href="https://www.typotalks.com/videos/?talk_event=TYPO%20Labs%202017&amp;talk_langs[en]=en&amp;talk_langs[de]=de">2017</a>, <a href="https://www.typotalks.com/videos/?talk_event=TYPO%20Labs%202016&amp;talk_langs[en]=en&amp;talk_langs[de]=de">2016</a></li>
<li>Robothon: 2018 <a href="https://www.facebook.com/RoyalAcademyKABK/videos/1613161622101814/">[1]</a> <a href="https://www.facebook.com/RoyalAcademyKABK/videos/1614287785322531/">[2]</a> <a href="https://www.facebook.com/RoyalAcademyKABK/videos/1614395861978390/">[3]</a>; <a href="https://vimeo.com/robothon">2015/2012/2009</a></li>
</ul>


<h3>3. TypeDrawers</h3>

<p><a href="https://typedrawers.com/">TypeDrawers</a> は、書体制作やレタリング、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%BF%A5%A4%A5%DD%A5%B0%A5%E9%A5%D5%A5%A3">タイポグラフィ</a>に関する<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B7%C7%BC%A8">掲示</a>板です。プロの書体デザイナーや開発者が多く、活発な議論がなされています。いくつかのカテゴリーに分かれていますが、ツールの話題を探すのであれば、下の2つがメインになるでしょう。</p>

<ul>
<li><a href="https://typedrawers.com/categories/type-design-software">Type Design Software — TypeDrawers</a></li>
<li><a href="https://typedrawers.com/categories/font-technology">Font Technology — TypeDrawers</a></li>
</ul>


<p>いろいろなスレッドが立ちますので、全部追いかけようとすると大変かもしれませんが、最新の動向や界隈の評判などをチェックすることができます。フォント界の Stack Overflow のような存在です。アカウント登録をして、やりとりに参加するのも良いかもしれません。</p>

<h3>その先へ</h3>

<p>以上、3つのソースをさらっと紹介しました。気になるツールや愛用のツールが出てきたら、そのツールの<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EA%A5%DD%A5%B8%A5%C8%A5%EA">リポジトリ</a>／フォーラムを覗いたり、作者の <a class="keyword" href="http://d.hatena.ne.jp/keyword/Twitter">Twitter</a> をフォローしたりすると、芋づる式に世界が広がっていきます。巨人の肩の上に乗って満喫しましょう。</p>

<p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%C4%C9%B5%AD">追記</a>：OpenType の仕様に興味が出てきたら以下の記事もどうぞ。</p>

<ul>
<li><a href="https://shiromoji.hatenablog.jp/entry/2016/06/21/003529">OpenType の仕様策定の議論をのぞくには - しろもじメモランダム</a></li>
</ul>



Twitter 上でとある鍵アカ氏が「このツール知らなかった！ 使ってみたらべんり！ 楽しい！」的なことをつぶやいていました。フォントの世界にはお役立ちツールがいろいろとあるのですが、日本語での情報が少ないこともあり、とっかかりが難しいかもしれません。そこでこの記事では、「ツールを探すならまずはここから」という定番の情報源を3つ紹介しておきます。1. awesome-typographygithub.comフォント関連のさまざまなツールがリストアップされたリンク集です。ツールだけでなく、オープンソースのフォントや、フォント関連のドキュメントなども一緒に挙げられています。プログラミング言語別に並んでおり、ごく簡単な説明もついていますので、「この言語でうまいことあれをやってくれるツールないかなー？」というときには真っ先にチェックすべきページです。2. 技術カンファレンスの動画フォント関係のカンファレンスというと ATypI が有名ですが、TYPO Labs や Robothon のように、技術的側面に特化したカンファレンスも開催されています。定番ツールから尖ったツールまで、作者の解説や実演デモをじっくり見ることができます。以下のように動画が公開されており、カンファレンスに行かずとも視聴できるのが嬉しいところです。TYPO Labs: 2018, 2017, 2016Robothon: 2018 [1] [2] [3]; 2015/2012/20093. TypeDrawersTypeDrawers は、書体制作やレタリング、タイポグラフィに関する掲示板です。プロの書体デザイナーや開発者が多く、活発な議論がなされています。いくつかのカテゴリーに分かれていますが、ツールの話題を探すのであれば、下の2つがメインになるでしょう。Type Design Software — TypeDrawersFont Technology — TypeDrawersいろいろなスレッドが立ちますので、全部追いかけようとすると大変かもしれませんが、最新の動向や界隈の評判などをチェックすることができます。フォント界の Stack Overflow のような存在です。アカウント登録をして、やりとりに参加するのも良いかもしれません。その先へ以上、3つのソースをさらっと紹介しました。気になるツールや愛用のツールが出てきたら、そのツールのリポジトリ／フォーラムを覗いたり、作者の Twitter をフォローしたりすると、芋づる式に世界が広がっていきます。巨人の肩の上に乗って満喫しましょう。追記：OpenType の仕様に興味が出てきたら以下の記事もどうぞ。OpenType の仕様策定の議論をのぞくには - しろもじメモランダム

フォントまわりのツールの探し方

<p>2018年7月10日付けで<a href="http://typeproject.com/">タイププロジェクト株式会社</a>を退職しました。</p>

<p>大学在学中の2012年8月からタイププロジェクトの仕事をするようになり、その後タイプエンジニア（フォントエンジニア）として<a href="https://shiromoji.hatenablog.jp/entry/20150419/1429456773">2015年4月に入社しました</a>。あわせると、6年近くにわたってお世話になったことになります。</p>

<p>タイププロジェクトがコンパクトなチームだったこともあり、製品版フォントのプロダクション、フォーマット変換やカスタマイズ、内製ツールの開発、制作ワークフローの自動化・省力化、イントラの管理などなど、とにかくいろいろなことに携わることができました。仕事を始めた当初はほとんど何もわかっていなかったのですが<a href="#f-dedeb0f6" name="fn-dedeb0f6" title="Python を身に着けたのも実はこのときです。">*1</a>、おかげさまで随分いろいろなことができるようになり、自信もつきました。フォントへの興味がますます深まったのは、言うまでもありません。</p>

<p>タイププロジェクトに参加するまであまり想像していなかったのですが、実際の仕事では、タイプデザイナーなど他のメンバーとのコミュニケーションが頻繁に発生します。「こういう機能がほしい」「こんな感じならできるけど」とやりとりしながら開発を進めていく過程は、なかなか楽しいものでした。まわりの方が協力的で、この点において恵まれた環境だったと感じます。</p>

<p>ちなみに、明日からは別の会社にフロントエンドエンジニアとして入社します。文字関係の仕事ではありません。エンジニアとしてあらためて基礎固めを行い、実践的なチーム開発のスキルを身につけることができれば、と考えています。</p>

<p>仕事としては文字から離れることになりますが、あいかわらず興味は尽きませんので、これからもこのまま趣味として続けていきたいと思います。今後ともどうぞよろしくお願いいたします。</p>
<div class="footnote">
<p class="footnote"><a href="#fn-dedeb0f6" name="f-dedeb0f6" class="footnote-number">*1</a><span class="footnote-delimiter">:</span><span class="footnote-text"><a class="keyword" href="http://d.hatena.ne.jp/keyword/Python">Python</a> を身に着けたのも実はこのときです。</span></p>
</div>

2018年7月10日付けでタイププロジェクト株式会社を退職しました。大学在学中の2012年8月からタイププロジェクトの仕事をするようになり、その後タイプエンジニア（フォントエンジニア）として2015年4月に入社しました。あわせると、6年近くにわたってお世話になったことになります。タイププロジェクトがコンパクトなチームだったこともあり、製品版フォントのプロダクション、フォーマット変換やカスタマイズ、内製ツールの開発、制作ワークフローの自動化・省力化、イントラの管理などなど、とにかくいろいろなことに携わることができました。仕事を始めた当初はほとんど何もわかっていなかったのですが*1、おかげさまで随分いろいろなことができるようになり、自信もつきました。フォントへの興味がますます深まったのは、言うまでもありません。タイププロジェクトに参加するまであまり想像していなかったのですが、実際の仕事では、タイプデザイナーなど他のメンバーとのコミュニケーションが頻繁に発生します。「こういう機能がほしい」「こんな感じならできるけど」とやりとりしながら開発を進めていく過程は、なかなか楽しいものでした。まわりの方が協力的で、この点において恵まれた環境だったと感じます。ちなみに、明日からは別の会社にフロントエンドエンジニアとして入社します。文字関係の仕事ではありません。エンジニアとしてあらためて基礎固めを行い、実践的なチーム開発のスキルを身につけることができれば、と考えています。仕事としては文字から離れることになりますが、あいかわらず興味は尽きませんので、これからもこのまま趣味として続けていきたいと思います。今後ともどうぞよろしくお願いいたします。*1:Python を身に着けたのも実はこのときです。

タイププロジェクト株式会社を退職しました

<p>AFDKO の新バージョン 2.7.0 が先週リリースされました。AFDKO は、フォント開発のための <a class="keyword" href="http://d.hatena.ne.jp/keyword/Adobe">Adobe</a> 製<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B3%A5%DE%A5%F3%A5%C9%A5%E9%A5%A4%A5%F3">コマンドライン</a>ツール集です。</p>

<p><iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fgithub.com%2Fadobe-type-tools%2Fafdko" title="adobe-type-tools/afdko" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://github.com/adobe-type-tools/afdko">github.com</a></cite></p>

<h3><a class="keyword" href="http://d.hatena.ne.jp/keyword/Python">Python</a> パッケージ化</h3>

<p>今回の大きな変更点は、AFDKO の中身がひとつの <a class="keyword" href="http://d.hatena.ne.jp/keyword/Python">Python</a> パッケージへと、がらっと再構成された点です。</p>

<blockquote><p>The AFDKO has been restructured so that it can be installed as a <a class="keyword" href="http://d.hatena.ne.jp/keyword/Python">Python</a> package. It now depends on the user's <a class="keyword" href="http://d.hatena.ne.jp/keyword/Python">Python</a> <a class="keyword" href="http://d.hatena.ne.jp/keyword/interpreter">interpreter</a>, and no longer contains its own <a class="keyword" href="http://d.hatena.ne.jp/keyword/Python">Python</a> <a class="keyword" href="http://d.hatena.ne.jp/keyword/interpreter">interpreter</a>.</p></blockquote>

<p><a href="https://github.com/adobe-type-tools/afdko/tree/2.7.0#major-changes">https://github.com/adobe-type-tools/afdko/tree/2.7.0#major-changes</a></p>

<p>すでに <a class="keyword" href="http://d.hatena.ne.jp/keyword/PyPI">PyPI</a> へ <a href="https://pypi.org/project/afdko/">afdko パッケージ</a>がアップロードされていますので、普段の <a class="keyword" href="http://d.hatena.ne.jp/keyword/Python">Python</a> パッケージと同じく、以下のコマンドでインストールすることができます。</p>

<pre class="code" data-lang="" data-unlink>$ pip install afdko</pre>


<p>従来（2.5 まで）の AFDKO は、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%AF%A5%EA%A5%D7%A5%C8">スクリプト</a>やバイナリ等が <a class="keyword" href="http://d.hatena.ne.jp/keyword/Python">Python</a> <a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%F3%A5%BF%A5%D7%A5%EA%A5%BF">インタプリタ</a>とともに ZIP で固められて配布されており、AFDKO 中の <a class="keyword" href="http://d.hatena.ne.jp/keyword/Python">Python</a> <a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%AF%A5%EA%A5%D7%A5%C8">スクリプト</a>は、必ずこの<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%F3%A5%BF%A5%D7%A5%EA%A5%BF">インタプリタ</a>を使って実行されるようになっていました。また、これを実現するためにインストール方法やパスの管理が独自のものになっており、少々扱いづらい面がありました。</p>

<p><a class="keyword" href="http://d.hatena.ne.jp/keyword/Python">Python</a> パッケージへの再構成作業は2017年末ごろからスタートし、ベータ期間（2.6 がこれに相当）を経て、今回の 2.7.0 をもってめでたく正式リリースとなったようです。この <a class="keyword" href="http://d.hatena.ne.jp/keyword/Python">Python</a> パッケージ化によって、以下のようなメリットが享受できそうです。</p>

<ul>
<li>インストール／アンインストール／更新が、おなじみの pip で行えるようになる</li>
<li>バージョンの固定や切り替えが容易になる</li>
<li>他の <a class="keyword" href="http://d.hatena.ne.jp/keyword/Python">Python</a> パッケージと組み合わせて使いやすくなる</li>
<li>パッケージのビルド方法やテスト方法が整備・明文化される</li>
</ul>


<h3>AFDKO 開発の盛り上がり</h3>

<p>AFDKO の開発は、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Adobe">Adobe</a> のエンジニアが中心となって進められていますが、昨年まではあまり活発には見えませんでした。バリアブルフォントへの対応などは進められていたようですが、発展著しい <a href="https://github.com/fonttools/fonttools">fontTools</a> などと比べてしまうと、地味な印象がありました。また、AFDKO には</p>

<ul>
<li>コードの可読性が低い</li>
<li>テストがほどんどない</li>
<li>古い C のコードが多い</li>
<li>バグ報告やプルリク<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A8%A5%B9">エス</a>トがなかなか対応されない</li>
<li>バグがあっても自分では直しにくい</li>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/Python">Python</a> 2</li>
</ul>


<p>などのつらい面も多々あり、個人的にはここ数年、fontTools の方を利用する機会が圧倒的に多くなっていました。</p>

<p>しかしながら、昨秋ごろから開発が加速し、現在に至るまで活発な状態が続いています。</p>

<p><a href="https://github.com/adobe-type-tools/afdko/graphs/contributors"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/m/mashabow/20180516/20180516224554.png" class="hatena-fotolife" itemprop="image"></a></p>

<p>内容としては、コードの<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EA%A5%D5%A5%A1%A5%AF%A5%BF%A5%EA%A5%F3%A5%B0">リファクタリング</a>やテスト・CIの整備といった基礎的な部分の改善が大きくなっており、前述の <a class="keyword" href="http://d.hatena.ne.jp/keyword/Python">Python</a> パッケージ化も、その流れの中で実施されたように見えます。<a class="keyword" href="http://d.hatena.ne.jp/keyword/Python">Python</a> 3 をサポートするための作業も始まり、明るい未来が見えてきた感じがします。</p>

<p>期待を込めつつ、これからも引き続き AFDKO の動きに注目していこうと思います。</p>


AFDKO の新バージョン 2.7.0 が先週リリースされました。AFDKO は、フォント開発のための Adobe 製コマンドラインツール集です。github.comPython パッケージ化今回の大きな変更点は、AFDKO の中身がひとつの Python パッケージへと、がらっと再構成された点です。The AFDKO has been restructured so that it can be installed as a Python package. It now depends on the user's Python interpreter, and no longer contains its own Python interpreter.https://github.com/adobe-type-tools/afdko/tree/2.7.0#major-changesすでに PyPI へ afdko パッケージがアップロードされていますので、普段の Python パッケージと同じく、以下のコマンドでインストールすることができます。$ pip install afdko従来（2.5 まで）の AFDKO は、スクリプトやバイナリ等が Python インタプリタとともに ZIP で固められて配布されており、AFDKO 中の Python スクリプトは、必ずこのインタプリタを使って実行されるようになっていました。また、これを実現するためにインストール方法やパスの管理が独自のものになっており、少々扱いづらい面がありました。Python パッケージへの再構成作業は2017年末ごろからスタートし、ベータ期間（2.6 がこれに相当）を経て、今回の 2.7.0 をもってめでたく正式リリースとなったようです。この Python パッケージ化によって、以下のようなメリットが享受できそうです。インストール／アンインストール／更新が、おなじみの pip で行えるようになるバージョンの固定や切り替えが容易になる他の Python パッケージと組み合わせて使いやすくなるパッケージのビルド方法やテスト方法が整備・明文化されるAFDKO 開発の盛り上がりAFDKO の開発は、Adobe のエンジニアが中心となって進められていますが、昨年まではあまり活発には見えませんでした。バリアブルフォントへの対応などは進められていたようですが、発展著しい fontTools などと比べてしまうと、地味な印象がありました。また、AFDKO にはコードの可読性が低いテストがほどんどない古い C のコードが多いバグ報告やプルリクエストがなかなか対応されないバグがあっても自分では直しにくいPython 2などのつらい面も多々あり、個人的にはここ数年、fontTools の方を利用する機会が圧倒的に多くなっていました。しかしながら、昨秋ごろから開発が加速し、現在に至るまで活発な状態が続いています。内容としては、コードのリファクタリングやテスト・CIの整備といった基礎的な部分の改善が大きくなっており、前述の Python パッケージ化も、その流れの中で実施されたように見えます。Python 3 をサポートするための作業も始まり、明るい未来が見えてきた感じがします。期待を込めつつ、これからも引き続き AFDKO の動きに注目していこうと思います。

Python パッケージとして再構成された AFDKO 2.7 がリリース

先日 Twitter で、「グリフのアウトラインの座標列を取りたいんだけど」「それ pen protocol でできるよ！」というやりとりをしました。この記事では、pen protocol に対応したペンでアウトラインを取得する方法について、具体的に解説してみます。フォントとかについてベジエのアウトラインの法線方向に制御点を移動することでアウトラインを太らせたり細らせたりする処理を思ひついたんだけど、テスト環境構築するのが面倒。フォントファイルから制御点の座標列を取り出し、それを描画する処理ができないとだめ感。なにかいいのあるかな…。— にせねこ (@nixeneko) 2017年11月8日目的はもう果たせたようですが、グリフのアウトラインを Python で読み書き加工するのであれば、(segment) pen protocol https://t.co/kR5gvCz5kY や point pen protocol https://t.co/JvIUdqkEfu が標準的です。慣れるまでちょっと癖はあるものの、いろいろと応用が利きます。— mashabow (@mashabow) 2017年11月8日pen protocol とペンさて、そもそも pen protocol とは何でしょう？　今回はプロトコルの詳細には触れず、概観だけ説明します。フォント界隈では Python が共通言語になっています。しかし、グリフを表すためのオブジェクトは、フォントエディタ（Glyphs, RoboFont, FontLab, ...）やライブラリ（fontTools, ufoLib, defcon, fontParts, ...）ごとにそれぞれ独自に定義されています。ざっくり言ってしまうと、「どんなグリフオブジェクトであれ、共通のインターフェイスでアウトラインを読み書きできると楽だよね」「SVG や PDF やいろんな描画 API にも対応したいよね」というのが pen protocol の発想です。pen protocol によってグリフからアウトラインを得たり、アウトラインを描いたりするためのオブジェクトをペン（pen）と呼びます。pen protocol が広まった結果、現在までにいろいろなペンが実装されてきました。以下にいくつか例を挙げますが、これ以外にも存在しています。fontTools.pens.*fontPens.*ufoLib.pointPen.*なお、pen protocol には segment pen protocol と point pen protocol の2系統があり、前者に対応したペンは HogePen、後者は HogePointPen のようなクラス名になっているのが通例です。この記事では、前者 segment pen protocol のペンをとり上げます*1。フォントを読み込んでグリフを準備する以下、環境は Python 3.6.3, fontTools 3.20.1 です。fontTools は $ pip install fonttools でインストールできます。ペンのことは一旦あと回しにして、まずはフォントファイルを読み込みます。今回は例として、源ノ角ゴシック Regular SourceHanSans-Regular.otf を使いました。from fontTools.ttLib import TTFontfont = TTFont('SourceHanSans-Regular.otf')次に、glyphSet と呼ばれる辞書様オブジェクトと、cmap（文字コードとグリフ名の対応）を取得しておきます。後者に関しては、従来 cmap テーブル font['cmap'] からサブテーブルを選んで辿っていく必要がありましたが、最近追加されたお手軽便利メソッド getBestCmap() でいい感じに取得できます。glyph_set = font.getGlyphSet()  # {グリフ名: グリフ} っぽいオブジェクトcmap = font.getBestCmap()       # {Unicode: グリフ名}これらを使って、文字 char に対応したグリフオブジェクトを返す関数を作ります。def get_glyph(glyph_set, cmap, char):    glyph_name = cmap[ord(char)]    return glyph_set[glyph_name]例として、文字 "L" に対応するグリフオブジェクトを、 L としておきましょう。L = get_glyph(glyph_set, cmap, 'L')これでグリフの準備はできました。RecordingPen でアウトラインの内容を得るさて、アウトラインの内容を取得するためには、fontTools に同梱されている RecordingPen というペンを使います。まずはペンのインスタンスを作成します。from fontTools.pens.recordingPen import RecordingPenrecording_pen = RecordingPen()次に、このペンをグリフ上で動かします。pen protocol に対応したグリフオブジェクトは draw() メソッドを持っていますので、これにペンを渡して実行します。先ほどの "L"のグリフ L を使ってみましょう。L.draw(recording_pen)ペンで "draw" と言われると、どこかに描く・書き込むのかと思ってしまいがちですが、ここではグリフのアウトラインを「なぞる」行為のことだと捉えてください。この RecordingPen では value 属性になぞった結果が入っていますので、見てみましょう。print(recording_pen.value)[('moveTo', ((100, 0),)), ('lineTo', ((513, 0),)), ('lineTo', ((513, 79),)), ('lineTo', ((193, 79),)), ('lineTo', ((193, 733),)), ('lineTo', ((100, 733),)), ('closePath', ())]目的どおりアウトラインの内容が出てきました。"L" の左下の点からスタートし、反時計回りにパスが構成されているのが分かります。もうひとつ、"い" のグリフで試してみるとこうなります。い = get_glyph(glyph_set, cmap, 'い')recording_pen = RecordingPen()い.draw(recording_pen)print(recording_pen.value)[('moveTo', ((226, 696),)), ('lineTo', ((130, 698),)), ('curveTo', ((135, 674), (136, 633), (136, 610))), ('curveTo', ((136, 552), (137, 432), (147, 346))), ('curveTo', ((174, 89), (264, -4), (357, -4))), ('curveTo', ((425, -4), (486, 53), (545, 221))), ('lineTo', ((482, 293),)), ('curveTo', ((456, 193), (410, 91), (359, 91))), ('curveTo', ((289, 91), (241, 200), (225, 366))), ('curveTo', ((218, 447), (217, 538), (218, 600))), ('curveTo', ((219, 626), (222, 672), (226, 696))), ('closePath', ()), ('moveTo', ((742, 669),)), ('lineTo', ((664, 642),)), ('curveTo', ((758, 526), (818, 330), (835, 152))), ('lineTo', ((916, 184),)), ('curveTo', ((902, 351), (831, 554), (742, 669))), ('closePath', ())]曲線を中心とした、2つのパスで構成されています。SVGPathPen を利用してSVGを作成する今度は応用として、SVGPathPen というペンを使ってみましょう。このペンは、SVGのパスデータ文字列を組み立ててくれます。SVGPathPen のコンストラクタは引数に glyphSet をとりますので、最初の方で用意した glyph_set を渡します。from fontTools.pens.svgPathPen import SVGPathPensvg_path_pen = SVGPathPen(glyph_set)グリフ L をなぞった後、getCommands() メソッドでパスデータ文字列を取得します。L.draw(svg_path_pen)print(svg_path_pen.getCommands())M100 0H513V79H193V733H100Zパスデータ文字列が表示されました。左下の点 100 0 からスタートし、水平線 H と垂直線 V でパスが構成されています。以下のようにガワを手書きして、独立したSVGファイルを作ります。<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">    <path d="M100 0H513V79H193V733H100Z"/></svg>このSVGファイルをブラウザで表示してみると、こんな感じです。一応「L」のグリフが表示できました。が、上下逆さです。OpenType の座標系では y 軸が上方向に延びていますが、SVG では下方向に延びているため、そのままだと上下がひっくり返ってしまいます。transform 属性で上下を逆にし、viewBox 属性も調整しましょう。<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -1000 1000 1000">    <path d="M100 0H513V79H193V733H100Z" transform="scale(1, -1)"/></svg>これで正立しました。最後に、もうちょっといい感じのSVGファイルを生成する関数を定義してみます。from textwrap import dedentdef save_as_svg(font, char, output_path):    '''TTFont オブジェクトを受け取り、指定した文字のグリフを SVG として保存する'''        glyph_set = font.getGlyphSet()    cmap = font.getBestCmap()        # グリフのアウトラインを SVGPathPen でなぞる    glyph = get_glyph(glyph_set, cmap, char)    svg_path_pen = SVGPathPen(glyph_set)    glyph.draw(svg_path_pen)    # メトリクスを取得    ascender = font['OS/2'].sTypoAscender    descender = font['OS/2'].sTypoDescender    width = glyph.width    height = ascender - descender        content = dedent(f'''\        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 {-ascender} {width} {height}">            <g transform="scale(1, -1)">                                <rect x="0" y="{descender}" width="{width}" height="{height}"                    stroke="cyan" fill="none"/>                                <circle cx="0" cy="0" r="5" fill="blue"/>                                <path d="{svg_path_pen.getCommands()}"/>            </g>        </svg>    ''')        with open(output_path, 'w') as f:        f.write(content)"L" と "い" で実行してみます。save_as_svg(font, 'L', 'L.svg')save_as_svg(font, 'い', 'い.svg')こんな感じの SVG ファイルができました。めでたしめでたし。おわりにこの記事では pen protocol の概要を説明し、ペンを使ってアウトラインを取得したり、SVG として表示する方法について見てきました。一方、今回触れなかった話題としては、pen protocol の詳細とペンの定義方法グリフへの書き込みペンを利用したアウトラインの加工さまざまなペンの紹介などがあります。これらに関しては、またいずれ気が向いたときに記事を書くかもしれません。なお、今回のファイルは以下のリポジトリにまとめておきました。どうぞご利用ください。github.com*1:若干紛らわしいのですが、segment pen protocol は単に pen protocol と呼ばれることがあります。

fontTools のペンを使ってグリフのアウトラインを取得する

<p><iframe src="//hatenablog-parts.com/embed?url=https%3A%2F%2Fgithub.com%2Ffonttools%2Ffonttools" title="fonttools/fonttools" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://github.com/fonttools/fonttools">github.com</a></cite></p>

<p>仕事場／プライベート問わずに大活躍の fontTools ですが、その中でも頻出なのが「フォントファイルを TTX で<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C0%A5%F3">ダン</a>プして中身をチラ見したい」という場面です。</p>

<pre class="code lang-sh" data-lang="sh" data-unlink>$ ttx <span class="synSpecial">-o</span> out.ttx <span class="synStatement">[</span>オプション<span class="synStatement">]</span> font.otf
$ <span class="synStatement">less</span> out.ttx
</pre>


<p>つい最近まで、上のようにしてごく普通に中身を見ていたのですが、何度もやっているといい加減めんどくさくなってきます。そこで、<code>.zshrc</code>（適宜 <code>.bashrc</code> などに読み替えてください）に簡単なシェル関数を定義してみました。</p>

<pre class="code lang-sh" data-lang="sh" data-unlink><span class="synIdentifier">tl() {</span>
    ttx <span class="synSpecial">-q</span> <span class="synSpecial">-o</span> - <span class="synPreProc">$*</span> <span class="synStatement">|</span> <span class="synStatement">source</span>-highlight <span class="synSpecial">-s</span> xml <span class="synSpecial">-f</span> esc <span class="synStatement">|</span> <span class="synStatement">less</span>
<span class="synIdentifier">}</span>
</pre>


<p>関数名はなんでもいいのですが、<code>ttx</code> で <code>less</code> なので短く <code>tl</code> にしておきました。途中の <code>source-highlight</code> は <a href="https://www.gnu.org/software/src-highlite/">GNU Source-highlight</a> という<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B7%A5%F3%A5%BF%A5%C3%A5%AF%A5%B9">シンタックス</a>ハイライトの定番ツールです。こうしておけば、</p>

<pre class="code lang-sh" data-lang="sh" data-unlink>$ tl <span class="synStatement">[</span>オプション<span class="synStatement">]</span> font.otf
</pre>


<p>とするだけでちょっといい感じに中身がチラ見できるようになります。べんり。</p>

<p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/m/mashabow/20170111/20170111232302.gif" alt="f:id:mashabow:20170111232302g:plain" title="f:id:mashabow:20170111232302g:plain" class="hatena-fotolife" itemprop="image"></span></p>


github.com仕事場／プライベート問わずに大活躍の fontTools ですが、その中でも頻出なのが「フォントファイルを TTX でダンプして中身をチラ見したい」という場面です。$ ttx -o out.ttx [オプション] font.otf$ less out.ttxつい最近まで、上のようにしてごく普通に中身を見ていたのですが、何度もやっているといい加減めんどくさくなってきます。そこで、.zshrc（適宜 .bashrc などに読み替えてください）に簡単なシェル関数を定義してみました。tl() {    ttx -q -o - $* | source-highlight -s xml -f esc | less}関数名はなんでもいいのですが、ttx で less なので短く tl にしておきました。途中の source-highlight は GNU Source-highlight というシンタックスハイライトの定番ツールです。こうしておけば、$ tl [オプション] font.otfとするだけでちょっといい感じに中身がチラ見できるようになります。べんり。

TTXによるフォントのチラ見をちょっといい感じにする設定

<p>OpenType は1997年に <a class="keyword" href="http://d.hatena.ne.jp/keyword/Microsoft">Microsoft</a> と <a class="keyword" href="http://d.hatena.ne.jp/keyword/Adobe">Adobe</a> が策定したフォントフォーマットで、現在の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C7%A5%D5%A5%A1%A5%AF%A5%C8%A5%B9%A5%BF%A5%F3%A5%C0%A1%BC%A5%C9">デファクトスタンダード</a>になっています<a href="#f-b01003c3" name="fn-b01003c3" title="ややこしいので詳細は省きますが、今どきの TrueType は OpenType に含まれます。また、Web フォントで使われる WOFF は、ざっくり言えば OpenType を zlib 圧縮したものです。">*1</a>。仕様は <a class="keyword" href="http://d.hatena.ne.jp/keyword/Microsoft">Microsoft</a> のサイトで公開されており、興味があればだれでもすぐに読むことができます。</p>

<ul>
<li><a href="https://www.microsoft.com/en-us/Typography/OpenTypeSpecification.aspx">Microsoft Typography - OpenType Specification</a></li>
</ul>


<p>この OpenType の仕様はときたま改定されており、今のところは2015年3月に発表された v1.7 が最新バーションです。</p>

<p>ところで、この仕様の改定はどこで議論されているんでしょう？　UCS/<a class="keyword" href="http://d.hatena.ne.jp/keyword/Unicode">Unicode</a> や各種 Web 標準などは策定プロセスがオープンになっていますが、OpenType の仕様はどこで議論が進んでいるのか、ぱっと見ただけではよくわかりません。日本語の情報もほとんど見つかりません。というわけで、この記事でその一端を紹介したいと思います。</p>

<h3>OpenType <a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%E1%A1%BC%A5%EA%A5%F3%A5%B0%A5%EA%A5%B9%A5%C8">メーリングリスト</a></h3>

<p>実は、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Microsoft">Microsoft</a> のサイトにこの<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%E1%A1%BC%A5%EA%A5%F3%A5%B0%A5%EA%A5%B9%A5%C8">メーリングリスト</a>（ML）の案内がちゃんと載っています。</p>

<ul>
<li><a href="https://www.microsoft.com/typography/otspec/otlist.htm">OpenType discussion forum</a></li>
</ul>


<blockquote><p>An e-mail based discussion forum has been set up specifically to help people working on the development of OpenType fonts and associated technologies.</p>

<ul>
<li>To subscribe to the OpenType Mailing List, send e-mail to: <a href="&#x6d;&#x61;&#x69;&#x6c;&#x74;&#x6f;&#x3a;&#x73;&#x75;&#98;&#x73;&#99;&#114;&#105;&#x62;&#101;&#45;&#x6f;&#112;&#101;&#x6e;&#116;&#x79;&#x70;&#101;&#64;&#x69;&#x6e;&#100;&#x78;&#x2e;&#x63;&#111;&#46;&#117;&#x6b;">&#115;&#x75;&#x62;&#x73;&#x63;&#114;&#105;&#x62;&#101;&#x2d;&#111;&#112;&#101;&#110;&#116;&#121;&#112;&#x65;&#x40;&#105;&#x6e;&#100;&#x78;&#x2e;&#99;&#x6f;&#x2e;&#117;&#x6b;</a></li>
<li>To remove yourself from this mailing list, send e-mail to: <a href="&#x6d;&#97;&#x69;&#x6c;&#x74;&#x6f;&#58;&#x75;&#x6e;&#115;&#x75;&#98;&#115;&#x63;&#x72;&#105;&#x62;&#x65;&#45;&#x6f;&#112;&#x65;&#110;&#116;&#121;&#112;&#101;&#x40;&#x69;&#x6e;&#x64;&#120;&#x2e;&#99;&#x6f;&#46;&#x75;&#107;">&#x75;&#110;&#115;&#117;&#x62;&#115;&#x63;&#114;&#105;&#98;&#x65;&#45;&#x6f;&#x70;&#x65;&#110;&#x74;&#121;&#112;&#101;&#x40;&#x69;&#x6e;&#100;&#x78;&#46;&#x63;&#x6f;&#46;&#117;&#x6b;</a></li>
</ul>
</blockquote>

<p>載っているのですが、<code>indx.co.uk</code> という馴染みのない<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C9%A5%E1%A5%A4%A5%F3">ドメイン</a>だったり、登録前に ML の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A2%A1%BC%A5%AB%A5%A4%A5%D6">アーカイブ</a>が見れなかったり、ページのフッタに <q>This page was last updated 9 August 2004.</q> と書いてあったりと、登録に躊躇してしまう要素が満載です。</p>

<p>が、これでも現役でちゃんと生きている公式 ML です。<q>to help people working on the development of OpenType fonts and associated technologies</q> と書かれていてスコープが少しぼんやりとしていますが、OpenType の仕様に関する話題が現在中心になっています。</p>

<p>この ML へ登録するためには、<a href="&#x6d;&#x61;&#x69;&#x6c;&#116;&#x6f;&#58;&#115;&#x75;&#98;&#x73;&#x63;&#114;&#105;&#x62;&#101;&#x2d;&#x6f;&#112;&#x65;&#110;&#x74;&#121;&#x70;&#101;&#64;&#105;&#x6e;&#100;&#120;&#46;&#x63;&#x6f;&#x2e;&#117;&#x6b;">&#115;&#117;&#x62;&#x73;&#x63;&#114;&#x69;&#x62;&#101;&#45;&#x6f;&#112;&#x65;&#x6e;&#x74;&#x79;&#112;&#101;&#64;&#105;&#110;&#100;&#120;&#x2e;&#x63;&#111;&#46;&#117;&#107;</a> にメールを送ります<a href="#f-dc71ee9e" name="fn-dc71ee9e" title="一時期は opentype-migration-sub@indx.co.uk というアドレスだったようです（参考）。">*2</a>。このとき空メールではだめで、メールの本文が必要です。自己紹介や「登録したいんだけど」みたいなことを1, 2文書いておけば大丈夫なはずです。ML 管理者の承認が降りれば、数日後に通知のメールが来ますので、これで登録完了です。過去の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A2%A1%BC%A5%AB%A5%A4%A5%D6">アーカイブ</a>は、ML 登録完了後に<a href="http://www.indx.co.uk/biglistarchive/">このページ</a>からたどれます。ただしシステムが古いようで、使い勝手は残念な感じです。</p>

<p>なお、この ML から配信されるメールは、件名の頭に <code>[OpenType]</code> がついています。</p>

<h3><a class="keyword" href="http://d.hatena.ne.jp/keyword/mpeg">mpeg</a>-OTspec <a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%E1%A1%BC%A5%EA%A5%F3%A5%B0%A5%EA%A5%B9%A5%C8">メーリングリスト</a></h3>

<p>世の中には ISO/IEC 14496-22 Open Font Format (OFF) という規格があります。といっても OpenType と中身は同じ…というか、OpenType をそのまま公的な国際規格にしたのがこの OFF です。<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C7%A5%B8%A5%E5%A1%BC%A5%EB">デジュール</a>標準というやつです。ISO が規格票を無料で公開しており、以下のページからPDFのダウンロードが可能です。ちなみに、ISO/IEC 14496-22:2015 が OpenType v1.7 に対応します。</p>

<ul>
<li><a href="http://standards.iso.org/ittf/PubliclyAvailableStandards/index.html">Freely Available Standards</a></li>
</ul>


<p>そして、この規格について議論するための ML が米 <a class="keyword" href="http://d.hatena.ne.jp/keyword/Yahoo%21">Yahoo!</a> Groups に用意されています。これが <a class="keyword" href="http://d.hatena.ne.jp/keyword/mpeg">mpeg</a>-OTspec ML です。</p>

<ul>
<li><a href="https://groups.yahoo.com/neo/groups/mpeg-OTspec/info">MPEG(SC29/WG11) Open Font Format - Yahoo Groups</a></li>
</ul>


<p>こちらの ML は <a href="&#x6d;&#97;&#105;&#x6c;&#x74;&#111;&#58;&#109;&#x70;&#x65;&#103;&#x2d;&#111;&#116;&#115;&#x70;&#101;&#x63;&#x2d;&#115;&#117;&#98;&#115;&#99;&#114;&#x69;&#x62;&#101;&#64;&#121;&#97;&#x68;&#111;&#x6f;&#103;&#x72;&#x6f;&#x75;&#x70;&#115;&#46;&#99;&#x6f;&#x6d;">&#109;&#x70;&#101;&#103;&#45;&#111;&#116;&#115;&#112;&#x65;&#x63;&#45;&#115;&#117;&#98;&#115;&#99;&#x72;&#x69;&#98;&#101;&#64;&#121;&#x61;&#x68;&#x6f;&#x6f;&#x67;&#x72;&#111;&#117;&#112;&#x73;&#x2e;&#99;&#x6f;&#x6d;</a> に空メールを送信するだけですぐに参加できるので、OpenType ML と比べるととっつきやすいかもしれません。過去の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A2%A1%BC%A5%AB%A5%A4%A5%D6">アーカイブ</a>や添付ファイルの閲覧には米 <a class="keyword" href="http://d.hatena.ne.jp/keyword/Yahoo%21">Yahoo!</a> のアカウントが必要になりますので、アカウントを持っていなければ作っておきましょう。</p>

<p>なお、この ML から配信されるメールは、件名の頭に <code>[mpeg-OTspec]</code> がついています。</p>

<p>ちなみに、<a class="keyword" href="http://d.hatena.ne.jp/keyword/mpeg">mpeg</a>-OTspec ML の近年の流量は以下のとおりで、話題があるときとないときでムラがあります。これは OpenType ML の方も同様です。</p>

<p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/m/mashabow/20160621/20160621000505.png" alt="f:id:mashabow:20160621000505p:plain" title="f:id:mashabow:20160621000505p:plain" class="hatena-fotolife" itemprop="image"></span></p>

<p>また、両 ML 間では転送や<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%AF%A5%ED%A5%B9%A5%DD%A5%B9%A5%C8">クロスポスト</a>が多く、両方とも登録していると若干カオスです。</p>

<h3>おまけ</h3>

<p>最後におまけとして、以下の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EA%A5%DD%A5%B8%A5%C8%A5%EA">リポジトリ</a>を紹介しておきます。位置づけがまだよくわかりませんが、OpenType レイアウトに関する追加仕様のドラフトのようです。</p>

<p><iframe src="//hatenablog-parts.com/embed?url=https%3A%2F%2Fgithub.com%2FOpenType%2Fopentype-layout" title="OpenType/opentype-layout" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://github.com/OpenType/opentype-layout">github.com</a></cite></p>
<div class="footnote">
<p class="footnote"><a href="#fn-b01003c3" name="f-b01003c3" class="footnote-number">*1</a><span class="footnote-delimiter">:</span><span class="footnote-text">ややこしいので詳細は省きますが、今どきの TrueType は OpenType に含まれます。また、Web フォントで使われる WOFF は、ざっくり言えば OpenType を zlib 圧縮したものです。</span></p>
<p class="footnote"><a href="#fn-dc71ee9e" name="f-dc71ee9e" class="footnote-number">*2</a><span class="footnote-delimiter">:</span><span class="footnote-text">一時期は opentype-<em>migration</em>-sub@indx.co.uk というアドレスだったようです（<a href="http://blog.typekit.com/2008/01/29/opentype_15_draft/" title="The Typekit Blog | OpenType 1.5 draft &amp; 1.6 suggestions">参考</a>）。</span></p>
</div>

OpenType は1997年に Microsoft と Adobe が策定したフォントフォーマットで、現在のデファクトスタンダードになっています*1。仕様は Microsoft のサイトで公開されており、興味があればだれでもすぐに読むことができます。Microsoft Typography - OpenType Specificationこの OpenType の仕様はときたま改定されており、今のところは2015年3月に発表された v1.7 が最新バーションです。ところで、この仕様の改定はどこで議論されているんでしょう？　UCS/Unicode や各種 Web 標準などは策定プロセスがオープンになっていますが、OpenType の仕様はどこで議論が進んでいるのか、ぱっと見ただけではよくわかりません。日本語の情報もほとんど見つかりません。というわけで、この記事でその一端を紹介したいと思います。OpenType メーリングリスト実は、Microsoft のサイトにこのメーリングリスト（ML）の案内がちゃんと載っています。OpenType discussion forumAn e-mail based discussion forum has been set up specifically to help people working on the development of OpenType fonts and associated technologies.To subscribe to the OpenType Mailing List, send e-mail to: subscribe-opentype@indx.co.ukTo remove yourself from this mailing list, send e-mail to: unsubscribe-opentype@indx.co.uk載っているのですが、indx.co.uk という馴染みのないドメインだったり、登録前に ML のアーカイブが見れなかったり、ページのフッタに This page was last updated 9 August 2004. と書いてあったりと、登録に躊躇してしまう要素が満載です。が、これでも現役でちゃんと生きている公式 ML です。to help people working on the development of OpenType fonts and associated technologies と書かれていてスコープが少しぼんやりとしていますが、OpenType の仕様に関する話題が現在中心になっています。この ML へ登録するためには、subscribe-opentype@indx.co.uk にメールを送ります*2。このとき空メールではだめで、メールの本文が必要です。自己紹介や「登録したいんだけど」みたいなことを1, 2文書いておけば大丈夫なはずです。ML 管理者の承認が降りれば、数日後に通知のメールが来ますので、これで登録完了です。過去のアーカイブは、ML 登録完了後にこのページからたどれます。ただしシステムが古いようで、使い勝手は残念な感じです。なお、この ML から配信されるメールは、件名の頭に [OpenType] がついています。mpeg-OTspec メーリングリスト世の中には ISO/IEC 14496-22 Open Font Format (OFF) という規格があります。といっても OpenType と中身は同じ…というか、OpenType をそのまま公的な国際規格にしたのがこの OFF です。デジュール標準というやつです。ISO が規格票を無料で公開しており、以下のページからPDFのダウンロードが可能です。ちなみに、ISO/IEC 14496-22:2015 が OpenType v1.7 に対応します。Freely Available Standardsそして、この規格について議論するための ML が米 Yahoo! Groups に用意されています。これが mpeg-OTspec ML です。MPEG(SC29/WG11) Open Font Format - Yahoo Groupsこちらの ML は mpeg-otspec-subscribe@yahoogroups.com に空メールを送信するだけですぐに参加できるので、OpenType ML と比べるととっつきやすいかもしれません。過去のアーカイブや添付ファイルの閲覧には米 Yahoo! のアカウントが必要になりますので、アカウントを持っていなければ作っておきましょう。なお、この ML から配信されるメールは、件名の頭に [mpeg-OTspec] がついています。ちなみに、mpeg-OTspec ML の近年の流量は以下のとおりで、話題があるときとないときでムラがあります。これは OpenType ML の方も同様です。また、両 ML 間では転送やクロスポストが多く、両方とも登録していると若干カオスです。おまけ最後におまけとして、以下のリポジトリを紹介しておきます。位置づけがまだよくわかりませんが、OpenType レイアウトに関する追加仕様のドラフトのようです。github.com*1:ややこしいので詳細は省きますが、今どきの TrueType は OpenType に含まれます。また、Web フォントで使われる WOFF は、ざっくり言えば OpenType を zlib 圧縮したものです。*2:一時期は opentype-migration-sub@indx.co.uk というアドレスだったようです（参考）。

OpenType の仕様策定の議論をのぞくには

<h2>TL;DR</h2>

<p>東京築地活版製造所『二号明朝活字書体見本』（明治26年／1893年）の画像を <a href="https://www.flickr.com/photos/95996414@N02/albums/72157662791750695/with/23854153892/" title="二号明朝活字書体見本 | Flickr - Photo Sharing!">Flickr で公開</a>しました。</p>

<p><a data-flickr-embed="true"  href="https://www.flickr.com/photos/95996414@N02/albums/72157662791750695" title="二号明朝活字書体見本"><img src="https://farm6.staticflickr.com/5836/23335632243_f2937a602a.jpg" width="316" height="500" alt="二号明朝活字書体見本"></a><script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script></p>

<p>PDF 版がほしい方は下のページから。</p>

<ul>
<li><a href="http://shiromoji.net/pd/" title="資料置き場 - しろもじ作業室">資料置き場 - しろもじ作業室</a></li>
</ul>


<h2>いきさつ</h2>

<p>先月末、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Twitter">Twitter</a> でこんなやりとりをしていました。</p>

<p><blockquote class="twitter-tweet" data-lang="HASH(0x9f16ef0)"><p lang="ja" dir="ltr">手持ちの資料をネットに目録作って、私設図書館みたいな感じで参照したい人に情報を渡せる様にするといいのかもしれない。</p>&mdash; にせねこ (@nixeneko) <a href="https://twitter.com/nixeneko/status/670617740391116800">November 28, 2015</a></blockquote><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
<blockquote class="twitter-tweet" data-lang="HASH(0x9f16ef0)"><p lang="ja" dir="ltr">手持ちの資料、紙モノまでは整理できてないけど、本とか冊子レベルのものならここに登録してる ⁑ しろもじライブラリ - <a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%E1%A5%C7%A5%A3%A5%A2%A5%DE%A1%BC%A5%AB%A1%BC">メディアマーカー</a> <a href="https://t.co/Pe8M3kdVOk">https://t.co/Pe8M3kdVOk</a></p>&mdash; mashabow (@mashabow) <a href="https://twitter.com/mashabow/status/670619379537731585">November 28, 2015</a></blockquote><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
<blockquote class="twitter-tweet" data-lang="HASH(0x9f16ef0)"><p lang="ja" dir="ltr"><a href="https://twitter.com/mashabow">@mashabow</a> うわっ、1893明26の「二号明朝総数見本 全」って、小宮山大明神の明25総数見本と同じ構成か、実はその1年で違ってたりするのか、激しく気になるんですが！！！</p>&mdash; <a class="keyword" href="http://d.hatena.ne.jp/keyword/UA">UA</a> (3.1) ⿴囗図デコ大好き (@uakira2) <a href="https://twitter.com/uakira2/status/670622647710011392">November 28, 2015</a></blockquote><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
<blockquote class="twitter-tweet" data-lang="HASH(0x9f16ef0)"><p lang="ja" dir="ltr"><a href="https://twitter.com/uakira2">@uakira2</a> なんでしたらお貸ししますよ（そしてあわよくば撮影をお願いして…</p>&mdash; mashabow (@mashabow) <a href="https://twitter.com/mashabow/status/670624285619314688">November 28, 2015</a></blockquote><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
<blockquote class="twitter-tweet" data-lang="HASH(0x9f16ef0)"><p lang="ja" dir="ltr"><a href="https://twitter.com/mashabow">@mashabow</a> 撮影ご依頼、喜んで！！</p>&mdash; <a class="keyword" href="http://d.hatena.ne.jp/keyword/UA">UA</a> (3.1) ⿴囗図デコ大好き (@uakira2) <a href="https://twitter.com/uakira2/status/670625789008879617">November 28, 2015</a></blockquote><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
<blockquote class="twitter-tweet" data-lang="HASH(0x9f16ef0)"><p lang="ja" dir="ltr"><a href="https://twitter.com/uakira2">@uakira2</a> どうもありがとうございます！（ちなみにわたしの<a class="keyword" href="http://d.hatena.ne.jp/keyword/Twitter">Twitter</a>のヘッダ画像はその見本帳の一部です</p>&mdash; mashabow (@mashabow) <a href="https://twitter.com/mashabow/status/670626922150383616">November 28, 2015</a></blockquote><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script></p>

<p>この『二号明朝活字書体見本 全』というのは、2年半ほど前にたまたま運良く入手した活字見本帳です。自分の本棚に古い見本帳があるというのは、もちろん飛び上がるほど嬉しいわけですが、それをそのまましまっておくのもどうももったいない。どうせなら、文字に興味を持ったいろいろな人に見てもらいたい<a href="#f-954870e2" name="fn-954870e2" title="というかそもそも自分自身、ほかの人が持っている見本帳をいろいろ見たくてしょうがなかった">*1</a>。……などということを以前から考えていました。</p>

<p>そんな中でこのやりとりがあり、チャンスだと思って（ずうずうしくも）撮影をお願いしてみました。この内田（<a href="https://twitter.com/uakira2" title="UA (3.1) ⿴囗図デコ大好き(@uakira2)さん | Twitter">@uakira2</a>）さんは以前、<a href="http://f.hatena.ne.jp/uakira/S11%E7%AF%89%E5%9C%B0%E4%BA%94%E5%8F%B7/" title="S11築地五号 - uakira's fotolife">築地五号の見本帳のスキャン</a>や、<a href="http://f.hatena.ne.jp/HikariwokakaguruHitobito/%E6%97%A5%E6%9C%AC%E3%81%AE%E6%B4%BB%E5%AD%97/" title="日本の活字 - HikariwokakaguruHitobito's fotolife">『光をかかぐる人々』の撮影</a>をされています。ありがたいことに、今回快く撮影を引き受けてくださり、こうして『二号明朝活字書体見本 全』の画像を公開することができました。下の Filckr アルバムで全ページ閲覧できますので、どうぞご覧ください。表紙を含めて画像は88枚あります。</p>

<p><a data-flickr-embed="true"  href="https://www.flickr.com/photos/95996414@N02/albums/72157662791750695" title="二号明朝活字書体見本"><img src="https://farm6.staticflickr.com/5836/23335632243_f2937a602a.jpg" width="316" height="500" alt="二号明朝活字書体見本"></a><script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script></p>

<p>いつものように PDF 版も用意してあります。</p>

<ul>
<li><a href="http://shiromoji.net/pd/" title="資料置き場 - しろもじ作業室">資料置き場 - しろもじ作業室</a></li>
</ul>


<h2>見本帳概観</h2>

<p><a data-flickr-embed="true"  href="https://www.flickr.com/photos/95996414@N02/23594561499/in/album-72157662791750695/" title="二号明朝活字書体見本_16"><img src="https://farm6.staticflickr.com/5809/23594561499_63930a6c9d_n.jpg" width="316" height="500" alt="二号明朝活字書体見本_16"></a><script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script></p>

<p>この見本帳の8割以上は、漢字のページで占められています。字種数はまだ数えていませんが、総数見本帳だけあってさまざまな字種が載っています。その分、整ったデザインの活字（頻出する漢字）から、その場しのぎっぽいバランス悪い活字（あまり出てこない漢字）まで、クオリティもさまざまです。</p>

<p><a data-flickr-embed="true"  href="https://www.flickr.com/photos/95996414@N02/23936334066/in/album-72157662791750695/" title="二号明朝活字書体見本_76"><img src="https://farm6.staticflickr.com/5776/23936334066_13cd76846e_n.jpg" width="316" height="500" alt="二号明朝活字書体見本_76"></a><script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script></p>

<p>部首順に並んだ漢字が終わると、次は分合活字（この見本帳では「分合文字」とよぶ）のページに移ります。横幅が1/3, 2/3の2種類の活字があり、この両者を偏旁として組み合わせ、漢字1字を組み立てるようになっています。</p>

<p><a data-flickr-embed="true"  href="https://www.flickr.com/photos/95996414@N02/23962423875/in/album-72157662791750695/" title="二号明朝活字書体見本_81"><img src="https://farm2.staticflickr.com/1636/23962423875_da16ffd2cf_n.jpg" width="316" height="500" alt="二号明朝活字書体見本_81"></a><script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script></p>

<p>その次はかな類が続きます。カタカナ・ひらがなともに、非常に洗練された細身のデザインです。上のツイートにあるように、<a href="https://twitter.com/mashabow" title="mashabow(@mashabow)さん | Twitter">自分の Twitter</a> のヘッダ画像にはこのひらがな部分の写真を使っていますが、プロフィールページを開くたびについつい見とれてしまいます。</p>

<p>あとは記号類が少し並んで終わりです。全84ページ。奥付は以下のようになっています。</p>

<blockquote><p>明治廿六年六月六日印刷<br>
明治廿六年六月十日出版</p>

<p>　　　日本<a class="keyword" href="http://d.hatena.ne.jp/keyword/%C5%EC%B5%FE%BB%D4">東京市</a>京橋區築地二丁目拾七番地<br>
　　　　　印刷者　　曲田　成<br>
　　　　　印刷所　　東京築地活版製造所</p></blockquote>

<p>というわけで、どうぞご活用ください。</p>
<div class="footnote">
<p class="footnote"><a href="#fn-954870e2" name="f-954870e2" class="footnote-number">*1</a><span class="footnote-delimiter">:</span><span class="footnote-text">というかそもそも自分自身、ほかの人が持っている見本帳をいろいろ見たくてしょうがなかった</span></p>
</div>

TL;DR東京築地活版製造所『二号明朝活字書体見本』（明治26年／1893年）の画像を Flickr で公開しました。PDF 版がほしい方は下のページから。資料置き場 - しろもじ作業室いきさつ先月末、Twitter でこんなやりとりをしていました。手持ちの資料をネットに目録作って、私設図書館みたいな感じで参照したい人に情報を渡せる様にするといいのかもしれない。— にせねこ (@nixeneko) November 28, 2015手持ちの資料、紙モノまでは整理できてないけど、本とか冊子レベルのものならここに登録してる ⁑ しろもじライブラリ - メディアマーカー https://t.co/Pe8M3kdVOk— mashabow (@mashabow) November 28, 2015@mashabow うわっ、1893明26の「二号明朝総数見本 全」って、小宮山大明神の明25総数見本と同じ構成か、実はその1年で違ってたりするのか、激しく気になるんですが！！！— UA (3.1) ⿴囗図デコ大好き (@uakira2) November 28, 2015@uakira2 なんでしたらお貸ししますよ（そしてあわよくば撮影をお願いして…— mashabow (@mashabow) November 28, 2015@mashabow 撮影ご依頼、喜んで！！— UA (3.1) ⿴囗図デコ大好き (@uakira2) November 28, 2015@uakira2 どうもありがとうございます！（ちなみにわたしのTwitterのヘッダ画像はその見本帳の一部です— mashabow (@mashabow) November 28, 2015この『二号明朝活字書体見本 全』というのは、2年半ほど前にたまたま運良く入手した活字見本帳です。自分の本棚に古い見本帳があるというのは、もちろん飛び上がるほど嬉しいわけですが、それをそのまましまっておくのもどうももったいない。どうせなら、文字に興味を持ったいろいろな人に見てもらいたい*1。……などということを以前から考えていました。そんな中でこのやりとりがあり、チャンスだと思って（ずうずうしくも）撮影をお願いしてみました。この内田（@uakira2）さんは以前、築地五号の見本帳のスキャンや、『光をかかぐる人々』の撮影をされています。ありがたいことに、今回快く撮影を引き受けてくださり、こうして『二号明朝活字書体見本 全』の画像を公開することができました。下の Filckr アルバムで全ページ閲覧できますので、どうぞご覧ください。表紙を含めて画像は88枚あります。いつものように PDF 版も用意してあります。資料置き場 - しろもじ作業室見本帳概観この見本帳の8割以上は、漢字のページで占められています。字種数はまだ数えていませんが、総数見本帳だけあってさまざまな字種が載っています。その分、整ったデザインの活字（頻出する漢字）から、その場しのぎっぽいバランス悪い活字（あまり出てこない漢字）まで、クオリティもさまざまです。部首順に並んだ漢字が終わると、次は分合活字（この見本帳では「分合文字」とよぶ）のページに移ります。横幅が1/3, 2/3の2種類の活字があり、この両者を偏旁として組み合わせ、漢字1字を組み立てるようになっています。その次はかな類が続きます。カタカナ・ひらがなともに、非常に洗練された細身のデザインです。上のツイートにあるように、自分の Twitter のヘッダ画像にはこのひらがな部分の写真を使っていますが、プロフィールページを開くたびについつい見とれてしまいます。あとは記号類が少し並んで終わりです。全84ページ。奥付は以下のようになっています。明治廿六年六月六日印刷　　　日本東京市京橋區築地二丁目拾七番地というわけで、どうぞご活用ください。*1:というかそもそも自分自身、ほかの人が持っている見本帳をいろいろ見たくてしょうがなかった

二号明朝活字書体見本（明治26年）

<p>前回の記事「<a href="http://shiromoji.hatenablog.jp/entry/2015/11/16/003831">同型類字集 等線体</a>」のつづきです。</p>

<p>『同型類字集 等線体』の方は<a class="keyword" href="http://d.hatena.ne.jp/keyword/%BE%BC%CF%C217%C7%AF">昭和17年</a>（1942年）12月発行でしたが、こちらの『同型類字集 <a class="keyword" href="http://d.hatena.ne.jp/keyword/%CC%C0%C4%AB%C2%CE">明朝体</a>』は3ヶ月後の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%BE%BC%CF%C218%C7%AF">昭和18年</a>（1943年）3月発行となっています。等線体が<a class="keyword" href="http://d.hatena.ne.jp/keyword/%CC%C0%C4%AB%C2%CE">明朝体</a>になっている以外は、まったく同じ体裁・内容のようです。</p>

<p><a data-flickr-embed="true"  href="https://www.flickr.com/photos/95996414@N02/albums/72157658898415004" title="同型類字集 明朝体"><img src="https://farm6.staticflickr.com/5811/22412698983_585e1fe075_c.jpg" width="800" height="534" alt="同型類字集 明朝体"></a><script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script></p>

<p>上の画像をクリックすると、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Flickr">Flickr</a> でファイルが閲覧できます。例によって PDF にまとめたものも用意しましたので、必要な方は下のページからどうぞ。</p>

<ul>
<li><a href="http://shiromoji.net/pd/" title="資料置き場 - しろもじ作業室">資料置き場 - しろもじ作業室</a></li>
</ul>


<p>例示されている<a class="keyword" href="http://d.hatena.ne.jp/keyword/%CC%C0%C4%AB%C2%CE">明朝体</a>を見てみると、やや直線的で整理された感じの雰囲気になっています。字体の省略や簡略化も見られますが、この処理は等線体のものと完全に一致しているようで、字体の整理・統一への意識が読み取れます。</p>

<p><a data-flickr-embed="true"  href="https://www.flickr.com/photos/95996414@N02/22412698983/in/album-72157658898415004/" title="同型類字集_明朝体_02"><img src="https://farm6.staticflickr.com/5811/22412698983_585e1fe075_c.jpg" width="800" height="534" alt="同型類字集_明朝体_02"></a><script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script></p>

<p>他の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%CC%C0%C4%AB%C2%CE">明朝体</a>と比べて特徴的なのは、撥ねの処理でしょうか。上の画像でわかるように、「力」や「巾」の撥ねが省略され、終筆を止めています。その一方で、「刂」や「寸」の撥ねはそのままの形で残っており、ちょっと不統一な感じもします。この撥ねる・撥ねないの間に、なにか法則性はあるんでしょうか…？　わかる方いましたらぜひ教えてください。</p>

<p><a data-flickr-embed="true"  href="https://www.flickr.com/photos/95996414@N02/23020355232/in/album-72157658898415004/" title="同型類字集_明朝体_01"><img src="https://farm1.staticflickr.com/676/23020355232_b1c6fe656c_c.jpg" width="800" height="534" alt="同型類字集_明朝体_01"></a><script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script></p>

<p>さて、上の画像の左ページは表紙裏にあたる箇所ですが、ここにはこんな注意書きが書かれています。</p>

<blockquote><p>一、一般字典ノ例ニ拠ルコトナク結体又ハ点画ヲ同シウスルモノニ分類編纂シ以テ練習ニ便ナラシム</p>

<p>二、本所載以外ノ文字ヲ必要トスル場合ハ末尾ニ添付シアル扁旁部首ニヨリ所要ノ扁旁冠脚等ニ供シ得ル文字ヲ選出シ適宜組成スルモノトス<br>
煩字及略字ハ別ニ示ス</p>

<p>備考<br>
本類字集ノ字画ハ普通大ノ註記ニ適用スル為メ定メタルモノニシテ字高大ナル註記ニ在リテハ字典ヲ参照シ点画ヲ適宜粉飾スルコトヲ得</p></blockquote>

<p>といっても、個人的に気になるのはその内容ではなく、印刷されている文字の方です。地図や海図の製作には早くから写植が導入されていたようですが、このページの文字も写植で打たれており<a href="#f-2e730007" name="fn-2e730007" title="巻末の「扁旁部首」もそうです。">*1</a>、写真植字機研究所（のちの写研）の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%CC%C0%C4%AB%C2%CE">明朝体</a>のように見えます。しかしよく見てみると、2行目の「習」や3行目の「場」など、普通の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%CC%C0%C4%AB%C2%CE">明朝体</a>とはちょっと変わっていませんか…？</p>

<p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/m/mashabow/20151206/20151206142130.jpg" alt="f:id:mashabow:20151206142130j:plain" title="f:id:mashabow:20151206142130j:plain" class="hatena-fotolife" itemprop="image"></span></p>

<p>どうもこれは、この『同型類字集 <a class="keyword" href="http://d.hatena.ne.jp/keyword/%CC%C0%C4%AB%C2%CE">明朝体</a>』で示されているとおりに、写植の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%CC%C0%C4%AB%C2%CE">明朝体</a>を修整しているようなのです。さらによく見てみると、1行目の「據」や2行目「編」などの撥ねも、しっかり取り除かれていることがわかります。写植で普通に印字したものを器用に修整したんでしょうか。それとも独自仕様の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%CC%C0%C4%AB%C2%CE">明朝体</a>の文字盤なんてものがあったんでしょうか。いずれにせよ、なかなかのこだわりです。</p>

<p>この『同型類字集』と関係あるのかないのか、『地図用文字』なる本があると知ったので、こちらも気になる今日このごろです。</p>

<blockquote class="twitter-tweet" lang="ja"><p lang="ja" dir="ltr">機械彫刻標準書体がまたプチ盛り上がりをしてたようなので、たしか昔見本帳買ったような……と思ったら全然違った。『地図用文字』だった。地図に使われる書体は「等線体」といって均等な太さの線で書かれた文字ですが郡名には隷体を使うみたい <a href="https://t.co/kAH0y4Jhb9">pic.twitter.com/kAH0y4Jhb9</a></p>&mdash; <a class="keyword" href="http://d.hatena.ne.jp/keyword/%A4%D0%A4%EB%A4%DC%A4%E9">ばるぼら</a> (@bxjp) <a href="https://twitter.com/bxjp/status/669209443838529536">2015, 11月 24</a></blockquote>


<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

<div class="footnote">
<p class="footnote"><a href="#fn-2e730007" name="f-2e730007" class="footnote-number">*1</a><span class="footnote-delimiter">:</span><span class="footnote-text">巻末の「扁旁部首」もそうです。</span></p>
</div>

前回の記事「同型類字集 等線体」のつづきです。『同型類字集 等線体』の方は昭和17年（1942年）12月発行でしたが、こちらの『同型類字集 明朝体』は3ヶ月後の昭和18年（1943年）3月発行となっています。等線体が明朝体になっている以外は、まったく同じ体裁・内容のようです。上の画像をクリックすると、Flickr でファイルが閲覧できます。例によって PDF にまとめたものも用意しましたので、必要な方は下のページからどうぞ。資料置き場 - しろもじ作業室例示されている明朝体を見てみると、やや直線的で整理された感じの雰囲気になっています。字体の省略や簡略化も見られますが、この処理は等線体のものと完全に一致しているようで、字体の整理・統一への意識が読み取れます。他の明朝体と比べて特徴的なのは、撥ねの処理でしょうか。上の画像でわかるように、「力」や「巾」の撥ねが省略され、終筆を止めています。その一方で、「刂」や「寸」の撥ねはそのままの形で残っており、ちょっと不統一な感じもします。この撥ねる・撥ねないの間に、なにか法則性はあるんでしょうか…？　わかる方いましたらぜひ教えてください。さて、上の画像の左ページは表紙裏にあたる箇所ですが、ここにはこんな注意書きが書かれています。一、一般字典ノ例ニ拠ルコトナク結体又ハ点画ヲ同シウスルモノニ分類編纂シ以テ練習ニ便ナラシム二、本所載以外ノ文字ヲ必要トスル場合ハ末尾ニ添付シアル扁旁部首ニヨリ所要ノ扁旁冠脚等ニ供シ得ル文字ヲ選出シ適宜組成スルモノトス備考といっても、個人的に気になるのはその内容ではなく、印刷されている文字の方です。地図や海図の製作には早くから写植が導入されていたようですが、このページの文字も写植で打たれており*1、写真植字機研究所（のちの写研）の明朝体のように見えます。しかしよく見てみると、2行目の「習」や3行目の「場」など、普通の明朝体とはちょっと変わっていませんか…？どうもこれは、この『同型類字集 明朝体』で示されているとおりに、写植の明朝体を修整しているようなのです。さらによく見てみると、1行目の「據」や2行目「編」などの撥ねも、しっかり取り除かれていることがわかります。写植で普通に印字したものを器用に修整したんでしょうか。それとも独自仕様の明朝体の文字盤なんてものがあったんでしょうか。いずれにせよ、なかなかのこだわりです。この『同型類字集』と関係あるのかないのか、『地図用文字』なる本があると知ったので、こちらも気になる今日このごろです。機械彫刻標準書体がまたプチ盛り上がりをしてたようなので、たしか昔見本帳買ったような……と思ったら全然違った。『地図用文字』だった。地図に使われる書体は「等線体」といって均等な太さの線で書かれた文字ですが郡名には隷体を使うみたい pic.twitter.com/kAH0y4Jhb9— ばるぼら (@bxjp) 2015, 11月 24*1:巻末の「扁旁部首」もそうです。

同型類字集 明朝体

<p>何ヶ月か前に、『同型類字集 等線体』『同型類字集 <a class="keyword" href="http://d.hatena.ne.jp/keyword/%CC%C0%C4%AB%C2%CE">明朝体</a>』という小冊子を入手しました。
<a href="https://ja.wikipedia.org/wiki/%E9%99%B8%E5%9C%B0%E6%B8%AC%E9%87%8F%E9%83%A8" title="陸地測量部 - Wikipedia">陸地測量部</a>が戦時中に作ったもので、地図に書き入れる文字のレタリング見本・字体見本のようです。</p>

<p>冊子を綴じてあったホチキスが錆びていたこともあり、せっかくなのでスキャンして公開してみることにしました。今日はまず、昭和17年（1942年）12月発行の『同型類字集 等線体』です。部屋にある家庭用<a class="keyword" href="http://d.hatena.ne.jp/keyword/%CA%A3%B9%E7%B5%A1">複合機</a>（ブラザー DCP-J940N）を使い、600 dpi のグレースケールでスキャンしました。</p>

<p><a data-flickr-embed="true"  href="https://www.flickr.com/photos/95996414@N02/albums/72157661240115675" title="同型類字集 等線体"><img src="https://farm6.staticflickr.com/5817/22412436603_240016723f_c.jpg" width="800" height="534" alt="同型類字集 等線体"></a><script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script></p>

<p>上の画像をクリックすると、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Flickr">Flickr</a> でファイルが閲覧できます。なお、入手時点で冊子末尾の数ページが欠落していたため、「扁旁部首」の6画の途中で終わっています。PDF にまとめたものも用意しましたので、下のページからダウンロードしてください。</p>

<ul>
<li><a href="http://shiromoji.net/pd/" title="資料置き場 - しろもじ作業室">資料置き場 - しろもじ作業室</a></li>
</ul>


<p>この等線体は見ての通り、ポキポキとした直線的な感じの書体になっています。フトコロも広く、払いがぐっと左右外側に向かっているのも特徴的です。昔のレタリング文字ではよく見ますが、そういえば現代のフォントにはこういうデザインあまりないですね。字体に関していえば、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%BE%EF%CD%D1%B4%C1%BB%FA">常用漢字</a>ほどではありませんが、ちょこちょこと省略・簡略化がみられます。違いがさりげなさすぎて見落としそうなものも……。</p>

<p>次回は『同型類字集 <a class="keyword" href="http://d.hatena.ne.jp/keyword/%CC%C0%C4%AB%C2%CE">明朝体</a>』の予定です。（→ <a href="http://shiromoji.hatenablog.jp/entry/2015/11/28/235613">書きました</a>）</p>


何ヶ月か前に、『同型類字集 等線体』『同型類字集 明朝体』という小冊子を入手しました。陸地測量部が戦時中に作ったもので、地図に書き入れる文字のレタリング見本・字体見本のようです。冊子を綴じてあったホチキスが錆びていたこともあり、せっかくなのでスキャンして公開してみることにしました。今日はまず、昭和17年（1942年）12月発行の『同型類字集 等線体』です。部屋にある家庭用複合機（ブラザー DCP-J940N）を使い、600 dpi のグレースケールでスキャンしました。上の画像をクリックすると、Flickr でファイルが閲覧できます。なお、入手時点で冊子末尾の数ページが欠落していたため、「扁旁部首」の6画の途中で終わっています。PDF にまとめたものも用意しましたので、下のページからダウンロードしてください。資料置き場 - しろもじ作業室この等線体は見ての通り、ポキポキとした直線的な感じの書体になっています。フトコロも広く、払いがぐっと左右外側に向かっているのも特徴的です。昔のレタリング文字ではよく見ますが、そういえば現代のフォントにはこういうデザインあまりないですね。字体に関していえば、常用漢字ほどではありませんが、ちょこちょこと省略・簡略化がみられます。違いがさりげなさすぎて見落としそうなものも……。次回は『同型類字集 明朝体』の予定です。（→ 書きました）

同型類字集 等線体

<p>いままでこのブログは<a href="http://d.hatena.ne.jp/">はてなダイアリー</a>というサービスを使っていましたが、同社の後継サービスである<a href="http://hatenablog.com/">はてなブログ</a>の機能が充実してきたようなので、こちらに引っ越してきました。URL は以下のように変更になります。</p>

<ul>
<li>旧：<a href="http://d.hatena.ne.jp/mashabow/">http://d.hatena.ne.jp/mashabow/</a></li>
<li><strong>新：<a href="http://shiromoji.hatenablog.jp/">http://shiromoji.hatenablog.jp/</a></strong></li>
</ul>


<p>過去記事はもちろんのこと、記事へ寄せていただいたコメントや<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A4%CF%A4%C6%A5%D6">はてブ</a>・<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A4%CF%A4%C6%A4%CA%A5%B9%A5%BF%A1%BC">はてなスター</a>も、一緒に移行されているはずです。
また、旧URLへアクセスすると、自動的に新URLにリダイレクトされるようになっています。
昔の記事については、いま読み返してみるといろいろとはずかしいことが書いてあったりしそうですが（読み返せてない）、恥を忍んでそのまま晒しておくことにします。
リンク切れや古い情報もそのままになっていますので、ご注意ください。</p>

<p>引っ越してきたのでこれからバリバリ記事書きます！！などというわけでもないのですが、よろしくお願いいたします。</p>


いままでこのブログははてなダイアリーというサービスを使っていましたが、同社の後継サービスであるはてなブログの機能が充実してきたようなので、こちらに引っ越してきました。URL は以下のように変更になります。旧：http://d.hatena.ne.jp/mashabow/新：http://shiromoji.hatenablog.jp/過去記事はもちろんのこと、記事へ寄せていただいたコメントやはてブ・はてなスターも、一緒に移行されているはずです。また、旧URLへアクセスすると、自動的に新URLにリダイレクトされるようになっています。昔の記事については、いま読み返してみるといろいろとはずかしいことが書いてあったりしそうですが（読み返せてない）、恥を忍んでそのまま晒しておくことにします。リンク切れや古い情報もそのままになっていますので、ご注意ください。引っ越してきたのでこれからバリバリ記事書きます！！などというわけでもないのですが、よろしくお願いいたします。

はてなブログに引っ越してきました

<p>おひさしぶりです。mashabow です。</p><p>4月15日付けで<a href="http://typeproject.com/">&#x30BF;&#x30A4;&#x30D7;&#x30D7;&#x30ED;&#x30B8;&#x30A7;&#x30AF;&#x30C8;&#x682A;&#x5F0F;&#x4F1A;&#x793E;</a>に入社しました。AXISフォントやTP明朝を作っているフォントメーカーです。数年前からバイトのようなかたちでちょこっと仕事をしていましたが、そのまま正社員として働くことになりました。</p><p>職種としては、タイプエンジニア（フォントエンジニアとも）というものになります。裏方的な役割なのであまり聞き慣れないかもしれません。具体的には、デザイナーが作ったグリフをまとめてちゃんと動くフォントファイルを作ったり、フォント制作で使うお役立ち<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C4%A1%BC%A5%EB">ツール</a>を作ったり、……といったもろもろをする仕事です。自分自身でデザインをするわけではありませんが、デザイナーをはじめ他のスタッフとともに、すばらしいフォントを世の中に送り出していきたいと思います。</p>

<div class="section">
    <h4>その他のご報告</h4>
    
<div class="section">
    <h5>大学を卒業しました</h5>
    <p>3月でようやく大学を卒業しました。<a href="http://togetter.com/li/213879">87&#x5E74;&#x751F;&#x307E;&#x308C;</a>なので、とっくの昔に卒業していたはずなんですが、おかしいな…。ちなみに、<a href="http://www.gavo.t.u-tokyo.ac.jp/">&#x5E83;&#x702C;&#x30FB;&#x5CEF;&#x677E;&#x7814;&#x7A76;&#x5BA4;</a>というところで、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%BC%EA%BD%F1%A4%AD">手書き</a>漢字フォントの生成について研究をしていました。いずれどこかで発表できたらと思います。</p>

</div>
<div class="section">
    <h5>右足首を骨折しました</h5>
    <p>先月の話ですが、確定申告に行く途中に階段ですっころんで右足首を骨折しました。手術とリハビリのおかげで、ようやく普通に歩けるようになってきたところです。痛みはそれほどでもありませんでしたが、右足が使えずなかなかに不便でした。卒業式に出られなかったり、4月1日の入社がズレたりというのは、すべてコイツのせいです。ご迷惑をおかけしました。みなさまもどうぞお気をつけください。</p>

</div>
<div class="section">
    <h5>4月23日（木）にトークショーがあります</h5>
    <p>今週の23日に、タイププロジェクト代表の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%CE%EB%CC%DA%B8%F9">鈴木功</a>が、長谷川踏太さんと対談を行います。</p>

<ul>
<li><a href="http://www.pen-online.jp/news/info/Pen-Type-Project-DAIKANYAMA-T-SITE/">Pen&times;Type Project 4&#x6708;23&#x65E5;&#xFF08;&#x6728;&#xFF09; DAIKANYAMA T-SITE&#x306B;&#x3066;&#x3001;&#x516C;&#x958B;&#x30AF;&#x30EA;&#x30A8;&#x30FC;&#x30BF;&#x30FC;&#x5BFE;&#x8AC7;&#x958B;&#x50AC;&#xFF01; | News | Pen Online</a></li>
</ul>
    <blockquote cite="http://www.pen-online.jp/news/info/Pen-Type-Project-DAIKANYAMA-T-SITE/">
        <p>「フォントをデザインする人、フォントでデザインする人。」</p><p>「AXIS Font」や「TP明朝」など、革新的なフォントを生みだすタイププロジェクト代表・タイプディレクターの<a class="keyword" href="http://d.hatena.ne.jp/keyword/%CE%EB%CC%DA%B8%F9">鈴木功</a>氏と、インターネット広告や<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B3%A1%BC%A5%DD%A5%EC%A1%BC%A5%C8%A5%A2%A5%A4%A5%C7%A5%F3%A5%C6%A5%A3%A5%C6%A5%A3">コーポレートアイデンティティ</a>などの分野で<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%F3%A5%BF%A5%E9%A5%AF%A5%C6%A5%A3%A5%D6">インタラクティブ</a>な作品を発表し続けるクリエイティブディレクターの長谷川踏太氏。おふたりによるトークショーを、DAIKANYAMA T-SITE GARDEN GALLERYにて4月23日（木）に開催します。当日は、書体とメガネの機能的・デザイン的な共通点に着想を得て、長谷川氏が立ち上げた話題のメガネブランド「TYPE」や、タイププロジェクトが提案する「都市フォント」プロジェクトなど、フォントをめぐる様々なトークを展開。また、コーポレート<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D6%A5%E9%A5%F3%A5%C7%A5%A3%A5%F3%A5%B0">ブランディング</a>に向けたタイププロジェクトの試みなども語られる予定です。私たちの暮らしを彩るフォントの奥深さに気づかせてもらえる貴重なクロストーク。入場は無料となっていますので、ぜひご参加ください。（Pen編集部）</p>

        <cite><a href="http://www.pen-online.jp/news/info/Pen-Type-Project-DAIKANYAMA-T-SITE/">Pen&times;Type Project 4&#x6708;23&#x65E5;&#xFF08;&#x6728;&#xFF09; DAIKANYAMA T-SITE&#x306B;&#x3066;&#x3001;&#x516C;&#x958B;&#x30AF;&#x30EA;&#x30A8;&#x30FC;&#x30BF;&#x30FC;&#x5BFE;&#x8AC7;&#x958B;&#x50AC;&#xFF01;</a></cite>
    </blockquote>
<p>先週末時点ではまだ空きがあるとのことだったので、興味ある方はぜひどうぞ。応募フォームは上記告知ページの記事末尾から。入場無料でおまけがついてくるみたいです。</p>

</div>
</div>
<div class="section">
    <h4>というわけで</h4>
    <p>今回のご報告は以上です。ここしばらくはイベントや<a class="keyword" href="http://d.hatena.ne.jp/keyword/Twitter">Twitter</a>・ブログなどから遠ざかっていましたが、またぼちぼち顔を出していければと思います。今後ともどうぞよろしくお願いいたします。</p>

</div>

おひさしぶりです。mashabow です。4月15日付けでタイププロジェクト株式会社に入社しました。AXISフォントやTP明朝を作っているフォントメーカーです。数年前からバイトのようなかたちでちょこっと仕事をしていましたが、そのまま正社員として働くことになりました。職種としては、タイプエンジニア（フォントエンジニアとも）というものになります。裏方的な役割なのであまり聞き慣れないかもしれません。具体的には、デザイナーが作ったグリフをまとめてちゃんと動くフォントファイルを作ったり、フォント制作で使うお役立ちツールを作ったり、……といったもろもろをする仕事です。自分自身でデザインをするわけではありませんが、デザイナーをはじめ他のスタッフとともに、すばらしいフォントを世の中に送り出していきたいと思います。その他のご報告大学を卒業しました3月でようやく大学を卒業しました。87年生まれなので、とっくの昔に卒業していたはずなんですが、おかしいな…。ちなみに、広瀬・峯松研究室というところで、手書き漢字フォントの生成について研究をしていました。いずれどこかで発表できたらと思います。右足首を骨折しました先月の話ですが、確定申告に行く途中に階段ですっころんで右足首を骨折しました。手術とリハビリのおかげで、ようやく普通に歩けるようになってきたところです。痛みはそれほどでもありませんでしたが、右足が使えずなかなかに不便でした。卒業式に出られなかったり、4月1日の入社がズレたりというのは、すべてコイツのせいです。ご迷惑をおかけしました。みなさまもどうぞお気をつけください。4月23日（木）にトークショーがあります今週の23日に、タイププロジェクト代表の鈴木功が、長谷川踏太さんと対談を行います。Pen×Type Project 4月23日（木） DAIKANYAMA T-SITEにて、公開クリエーター対談開催！ | News | Pen Online「フォントをデザインする人、フォントでデザインする人。」「AXIS Font」や「TP明朝」など、革新的なフォントを生みだすタイププロジェクト代表・タイプディレクターの鈴木功氏と、インターネット広告やコーポレートアイデンティティなどの分野でインタラクティブな作品を発表し続けるクリエイティブディレクターの長谷川踏太氏。おふたりによるトークショーを、DAIKANYAMA T-SITE GARDEN GALLERYにて4月23日（木）に開催します。当日は、書体とメガネの機能的・デザイン的な共通点に着想を得て、長谷川氏が立ち上げた話題のメガネブランド「TYPE」や、タイププロジェクトが提案する「都市フォント」プロジェクトなど、フォントをめぐる様々なトークを展開。また、コーポレートブランディングに向けたタイププロジェクトの試みなども語られる予定です。私たちの暮らしを彩るフォントの奥深さに気づかせてもらえる貴重なクロストーク。入場は無料となっていますので、ぜひご参加ください。（Pen編集部）Pen×Type Project 4月23日（木） DAIKANYAMA T-SITEにて、公開クリエーター対談開催！    先週末時点ではまだ空きがあるとのことだったので、興味ある方はぜひどうぞ。応募フォームは上記告知ページの記事末尾から。入場無料でおまけがついてくるみたいです。というわけで今回のご報告は以上です。ここしばらくはイベントやTwitter・ブログなどから遠ざかっていましたが、またぼちぼち顔を出していければと思います。今後ともどうぞよろしくお願いいたします。

タイププロジェクト株式会社に入社しました

<p>去年の11月、<a href="http://kindai.ndl.go.jp/">&#x8FD1;&#x30C7;&#x30B8;</a>で『<a href="http://kindai.ndl.go.jp/info:ndljp/pid/1459197">&#x5185;&#x95A3;&#x5370;&#x5237;&#x5C40;&#x4E03;&#x5341;&#x5E74;&#x53F2;</a>』という本をパラパラ見ていたら、こんなことが書いてあった（強調は引用者）。</p>

    <blockquote cite="http://kindai.ndl.go.jp/info">
        <p>其の後三十一年十一月<a class="keyword" href="http://d.hatena.ne.jp/keyword/%C6%E2%B3%D5%C9%DC">内閣府</a>官報局と併合してより、更に活<a class="keyword" href="http://d.hatena.ne.jp/keyword/%BB%FA%CA%EC">字母</a>型の改造に努む。三十六年二月<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%E9%A5%A4%A5%CE%A5%BF%A5%A4%A5%D7">ライノタイプ</a>を購入設備し欧文印刷の便を図る。又<em>四十五年以来<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B9%AF%DF%E6%BB%FA%C5%B5">康煕字典</a>の字体を基礎として活字字体の改造を企て、殿版<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B9%AF%DF%E6%BB%FA%C5%B5">康煕字典</a>に依ることとし</em>、同時に鋳造方法の改良をも計画し独逸及び米国より母型彫刻機四台を購入し、繁雑なる旧式方法を廃しニツケルと銅との合成金に直接彫刻して母型を得、之に依りて鋳造するの方法に革め、大いに製造能率の増進を見たり。而して官報印刷に使用する活字の如きは、専ら此の方法に依りて鋳造したるものを用ふ。又大正五六年の頃「ポイント」式活字の鋳造に着手せしが、七年十二月に至り五号活字に代はるべき九「ポイント」活字成り、八年末六号活字に代はべき<a href="#f-27c32a01" name="fn-27c32a01" title="ママ">*1</a>八「ポイント」活字の新造に尋いで十一年十二「ポイント」新活字等完成す。<em>此等の活字は何れも前記字典の文字を写真に依り縮写したる当局独特のものにして、字画正確、字体鮮明なるのみならず、一種の風韻を持するの故を以て大いに識者の好評を得たり</em>。</p>

        <cite><a href="http://kindai.ndl.go.jp/info:ndljp/pid/1459197/82">&#x300E;&#x5185;&#x95A3;&#x5370;&#x5237;&#x5C40;&#x4E03;&#x5341;&#x5E74;&#x53F2;&#x300F;&#x5185;&#x95A3;&#x5370;&#x5237;&#x5C40;&#x3001;1943&#x5E74;&#x3001;pp. 114&ndash;115</a></cite>
    </blockquote>
<p>そんな活字があっただなんて寡聞にして知らなかったので、へーと思って <a class="keyword" href="http://d.hatena.ne.jp/keyword/Twitter">Twitter</a> でつぶやいた。</p><p><script>    window.twttr = (function(d, s, id) {        var js, fjs = d.getElementsByTagName(s)[0],            t = window.twttr || {};        if (d.getElementById(id)) return t;        js = d.createElement(s);        js.id = id;        js.src = "https://platform.twitter.com/widgets.js";        fjs.parentNode.insertBefore(js, fjs);        t._e = [];        t.ready = function(f) {            t._e.push(f);        };        return t;    }(document, "script", "twitter-wjs"));</script><script>    twttr.ready(function (twttr) {        var el = document.getElementsByClassName('twitter-syntax-tweet-id-271917646210035713');        for (var i=0;i<el.length;i++) {            if (!!el[i].getAttribute('data-is-tweet-loaded')){                continue;            }            el[i].setAttribute('data-is-tweet-loaded', '1');            twttr.widgets.createTweet('271917646210035713',el[i],{});        }    });</script><div class="twitter-syntax-tweet-id-271917646210035713"></div><script>    window.twttr = (function(d, s, id) {        var js, fjs = d.getElementsByTagName(s)[0],            t = window.twttr || {};        if (d.getElementById(id)) return t;        js = d.createElement(s);        js.id = id;        js.src = "https://platform.twitter.com/widgets.js";        fjs.parentNode.insertBefore(js, fjs);        t._e = [];        t.ready = function(f) {            t._e.push(f);        };        return t;    }(document, "script", "twitter-wjs"));</script><script>    twttr.ready(function (twttr) {        var el = document.getElementsByClassName('twitter-syntax-tweet-id-271919839289954305');        for (var i=0;i<el.length;i++) {            if (!!el[i].getAttribute('data-is-tweet-loaded')){                continue;            }            el[i].setAttribute('data-is-tweet-loaded', '1');            twttr.widgets.createTweet('271919839289954305',el[i],{});        }    });</script><div class="twitter-syntax-tweet-id-271919839289954305"></div></p><p>で、その後ろくに調べもせずほったらかしにしていた。</p><p>ときは流れて8ヶ月後。</p><p><a href="http://moji.gr.jp/gakkou/kouza/digitalib/">&#x3008;&#x6D3B;&#x5B57;&#x3009;&#x4E2D;&#x6BD2;&#x8005;&#x306E;&#x30C7;&#x30B8;&#x30BF;&#x30EB;&#x56F3;&#x66F8;&#x9928;&#x63A2;&#x8A2A;</a>の懇親会で「そういえば」と思い出し、「そんな活字あったんですか？」と<a href="http://d.hatena.ne.jp/uakira/">&#x5185;&#x7530;&#x3055;&#x3093;</a>に伺ってみた。そしたらすぐに、「実際に一時期官報に使われていました」「<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B9%AF%DF%E6%BB%FA%C5%B5">康煕字典</a>そのままのデザインです」とのお答え。さすが内田さん！</p><p>帰宅してさっそく<a href="http://dl.ndl.go.jp/">&#x56FD;&#x7ACB;&#x56FD;&#x4F1A;&#x56F3;&#x66F8;&#x9928;&#x30C7;&#x30B8;&#x30BF;&#x30EB;&#x5316;&#x8CC7;&#x6599;</a>にアクセスし、大正期の官報を漁ってみたところ、ほどなくして使用例に到達。ざっと見てみたところでは、<a href="http://dl.ndl.go.jp/info:ndljp/pid/2954038">&#x5927;&#x6B63;8&#x5E74;&#xFF08;1919&#x5E74;&#xFF09;1&#x6708;4&#x65E5;&#x767A;&#x884C;&#x306E;&#x5B98;&#x5831;&#x7B2C;1924&#x53F7;</a>が初出のようだった。2ページ目の省令欄をはじめとして、いろいろな記事が<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B9%AF%DF%E6%BB%FA%C5%B5">康煕字典</a>活字<a href="#f-c0de137f" name="fn-c0de137f" title="と勝手にこのエントリでは呼んでいますが、正式名称や通称があったりするんでしょうか？">*2</a>で組まれている。</p><p><span itemscope itemtype="http://schema.org/Photograph"><a href="http://f.hatena.ne.jp/mashabow/20130728032926" class="hatena-fotolife" itemprop="url"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/m/mashabow/20130728/20130728032926.png" alt="f:id:mashabow:20130728032926p:image:w600" title="f:id:mashabow:20130728032926p:image:w600" class="hatena-fotolife" style="width:600px" itemprop="image"></a></span></p><p>ここのデジタル化資料は解像度がそれほど高くないこともあって、細部のデザインまでは読み取れない。ただ、それでもあの<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B9%AF%DF%E6%BB%FA%C5%B5">康煕字典</a>っぽい独特な雰囲気はよく伝わってくる。実のところ、今回これを見るまでは</p>

<ul>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/%B9%AF%DF%E6%BB%FA%C5%B5">康煕字典</a>を写真で撮るって、それでうまく活字ができるんだろか？</li>
<li>組んだときにちゃんと字面揃うの？</li>
<li>「一種の風韻を持する〜」ってちょっと話を盛ってるんじゃ…</li>
</ul><p>などと、どれぐらいの品質なのか正直疑問だった。しかし、このように官報のデジタル化資料を見てみたところでは、結構いい感じに仕上がっているようにも思える。</p><p>また、どうやらこの活字はカタカナ部分の字幅（縦方向の長さ）が漢字より小さいようだ。そのおかげで、カタカナの字面が小ぶりなのにも関わらず、組み上がりはパラパラとした印象にはなっていない。</p><p>暇なときに一度、デジタル化資料ではなく実物の方でも見てみたい。</p>

<div class="section">
    <h4>附記</h4>
    <p>とここまで書いたあと、もう一度近デジの方をちらほら見ていたら、『<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B0%F5%BA%FE%B6%C9">印刷局</a>長年報書 第45回』の中にこの活字についての言及があった。</p>

    <blockquote cite="http://kindai.ndl.go.jp/info">
        <p>大正八年一月四日</p><p>官報ハ従来二段組ナリシヲ三段組ニ改メ又五号活字ニ代フルニ<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B9%AF%DF%E6%BB%FA%C5%B5">康煕字典</a>ノ文字ヲ基礎トシテ新鋳シタル九ポイント活字ヲ用ヰタリ……</p>

        <cite><a href="http://kindai.ndl.go.jp/info:ndljp/pid/932384/16">&#x300E;&#x5370;&#x5237;&#x5C40;&#x9577;&#x5E74;&#x5831;&#x66F8; &#x7B2C;45&#x56DE;&#x300F;&#x5370;&#x5237;&#x5C40;&#x3001;1920&#x5E74;&#x3001;p. 25</a></cite>
    </blockquote>
<p>さらに、『<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B0%F5%BA%FE%B6%C9">印刷局</a>五十年略史』には次のように書かれている。（というか、この本自体がまるまるこの<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B9%AF%DF%E6%BB%FA%C5%B5">康煕字典</a>活字で組まれている。上で引いた官報が漢字カタカナ交じりだったのに対し、こちらは漢字ひらがな交じり文。）</p>

    <blockquote cite="http://kindai.ndl.go.jp/info">
        <p>尚&#29574;に活字鋳造に就いて一言せざる可らざることあり、従来本邦の活字製作方法は先づ黄楊材に手刻したる原字を蝋型に取り、電気装置によりて銅を其凹所に集積せしめ、木材原字と同一の銅字を得て更に電気装置により始めて銅<a class="keyword" href="http://d.hatena.ne.jp/keyword/%BB%FA%CA%EC">字母</a>を作り、之を母型として活字を鋳造したるのものなり。当局に於ては明治四十五年以来独逸及米国より母型彫刻機四台を購入し、繁雑なる旧式の手続を取らずニッケルと銅との合成金に直接彫刻して母型を得、之に依りて鋳造する事とせり。現在官報印刷に使用する活字の如き此機械によりて鋳造したるものなり。上述の新活字は<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B9%AF%DF%E6%BB%FA%C5%B5">康煕字典</a>の文字を写真により縮写したるものにして字画正確書体鮮明なる九ポイント活字なり。此新漢字活字を採用すると同時に仮名活字をも改鋳し、漢字に比し十と八との割合に縮め、以て字間の空白を減じ行数の節約を得る事とせり。</p>

        <cite><a href="http://kindai.ndl.go.jp/info:ndljp/pid/1874804/27">&#x300E;&#x5370;&#x5237;&#x5C40;&#x4E94;&#x5341;&#x5E74;&#x7565;&#x53F2;&#x300F;&#x5370;&#x5237;&#x5C40;&#x3001;1921&#x5E74;&#x3001;p. 29</a></cite>
    </blockquote>

    <blockquote cite="http://kindai.ndl.go.jp/info">
        <p>八年一月従来二段組なりし官報を三段組に改め新鋳九ポイント活字を使用し、以て大に紙面の節約と印刷の鮮明とを図り、日に月に増大堆積する記載事項の停滞を防ぐを得たり、……</p>

        <cite><a href="http://kindai.ndl.go.jp/info:ndljp/pid/1874804/34">&#x540C;&#x3001;p. 42</a></cite>
    </blockquote>
<p>とあり、まとめると結局</p>

<ul>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/%C2%E7%C0%B58%C7%AF">大正8年</a>（1919年）1月4日の官報から<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B9%AF%DF%E6%BB%FA%C5%B5">康煕字典</a>活字を使った</li>
<li>このときの活字のサイズは9ポイントで、のちに他のサイズも製作</li>
<li>漢字は方形だが仮名は80％平体。これによって紙面節約</li>
</ul><p>ということらしい。近デジすごい。</p>

</div>
<div class="section">
    <h4>追記</h4>
    <p>「<a class="keyword" href="http://d.hatena.ne.jp/keyword/%C2%E7%C0%B58%C7%AF">大正8年</a>（1919年）1月4日の官報から<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B9%AF%DF%E6%BB%FA%C5%B5">康煕字典</a>活字を使った」と書いたが、もう少し前から使われていたらしい。</p><p><blockquote class="twitter-tweet" data-lang="HASH(0xe9488a8)"><p lang="ja" dir="ltr"><a class="keyword" href="http://d.hatena.ne.jp/keyword/%B0%F5%BA%FE%B6%C9">印刷局</a>が<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B9%AF%DF%E6%BB%FA%C5%B5">康煕字典</a>体活字を使い始めるの、「70年史」の記録と違って<a class="keyword" href="http://d.hatena.ne.jp/keyword/%C2%E7%C0%B58%C7%AF">大正8年</a>1月4日付官報からじゃなく、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%C2%E7%C0%B57%C7%AF">大正7年</a>12月27日付「<a class="keyword" href="http://d.hatena.ne.jp/keyword/%BD%B0%B5%C4%B1%A1">衆議院</a>第41回本会議第1号」からだ <a href="https://t.co/6sZgeVcQFp">https://t.co/6sZgeVcQFp</a> っていう件、判りやすいようにツイートしてなかった <a href="https://t.co/MQGISd6XSU">https://t.co/MQGISd6XSU</a> ので、自分でも捜すの苦労した。</p>&mdash; UCHIDA <a class="keyword" href="http://d.hatena.ne.jp/keyword/Akira">Akira</a> (@uakira2) <a href="https://twitter.com/uakira2/status/1082894613210226688?ref_src=twsrc%5Etfw">January 9, 2019</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script></p><p>上記スレッドに情報がまとまっている。</p>

</div><div class="footnote">
<p class="footnote"><a href="#fn-27c32a01" name="f-27c32a01" class="footnote-number">*1</a><span class="footnote-delimiter">:</span><span class="footnote-text">ママ</span></p>
<p class="footnote"><a href="#fn-c0de137f" name="f-c0de137f" class="footnote-number">*2</a><span class="footnote-delimiter">:</span><span class="footnote-text">と勝手にこのエントリでは呼んでいますが、正式名称や通称があったりするんでしょうか？</span></p>
</div>

去年の11月、近デジで『内閣印刷局七十年史』という本をパラパラ見ていたら、こんなことが書いてあった（強調は引用者）。其の後三十一年十一月内閣府官報局と併合してより、更に活字母型の改造に努む。三十六年二月ライノタイプを購入設備し欧文印刷の便を図る。又四十五年以来康煕字典の字体を基礎として活字字体の改造を企て、殿版康煕字典に依ることとし、同時に鋳造方法の改良をも計画し独逸及び米国より母型彫刻機四台を購入し、繁雑なる旧式方法を廃しニツケルと銅との合成金に直接彫刻して母型を得、之に依りて鋳造するの方法に革め、大いに製造能率の増進を見たり。而して官報印刷に使用する活字の如きは、専ら此の方法に依りて鋳造したるものを用ふ。又大正五六年の頃「ポイント」式活字の鋳造に着手せしが、七年十二月に至り五号活字に代はるべき九「ポイント」活字成り、八年末六号活字に代はべき*1八「ポイント」活字の新造に尋いで十一年十二「ポイント」新活字等完成す。此等の活字は何れも前記字典の文字を写真に依り縮写したる当局独特のものにして、字画正確、字体鮮明なるのみならず、一種の風韻を持するの故を以て大いに識者の好評を得たり。『内閣印刷局七十年史』内閣印刷局、1943年、pp. 114–115    そんな活字があっただなんて寡聞にして知らなかったので、へーと思って Twitter でつぶやいた。    window.twttr = (function(d, s, id) {        var js, fjs = d.getElementsByTagName(s)[0],            t = window.twttr || {};        if (d.getElementById(id)) return t;        js = d.createElement(s);        js.id = id;        js.src = "https://platform.twitter.com/widgets.js";        fjs.parentNode.insertBefore(js, fjs);        t._e = [];        t.ready = function(f) {            t._e.push(f);        };        return t;    }(document, "script", "twitter-wjs"));    twttr.ready(function (twttr) {        var el = document.getElementsByClassName('twitter-syntax-tweet-id-271917646210035713');        for (var i=0;i    window.twttr = (function(d, s, id) {        var js, fjs = d.getElementsByTagName(s)[0],            t = window.twttr || {};        if (d.getElementById(id)) return t;        js = d.createElement(s);        js.id = id;        js.src = "https://platform.twitter.com/widgets.js";        fjs.parentNode.insertBefore(js, fjs);        t._e = [];        t.ready = function(f) {            t._e.push(f);        };        return t;    }(document, "script", "twitter-wjs"));    twttr.ready(function (twttr) {        var el = document.getElementsByClassName('twitter-syntax-tweet-id-271919839289954305');        for (var i=0;iで、その後ろくに調べもせずほったらかしにしていた。ときは流れて8ヶ月後。〈活字〉中毒者のデジタル図書館探訪の懇親会で「そういえば」と思い出し、「そんな活字あったんですか？」と内田さんに伺ってみた。そしたらすぐに、「実際に一時期官報に使われていました」「康煕字典そのままのデザインです」とのお答え。さすが内田さん！帰宅してさっそく国立国会図書館デジタル化資料にアクセスし、大正期の官報を漁ってみたところ、ほどなくして使用例に到達。ざっと見てみたところでは、大正8年（1919年）1月4日発行の官報第1924号が初出のようだった。2ページ目の省令欄をはじめとして、いろいろな記事が康煕字典活字*2で組まれている。ここのデジタル化資料は解像度がそれほど高くないこともあって、細部のデザインまでは読み取れない。ただ、それでもあの康煕字典っぽい独特な雰囲気はよく伝わってくる。実のところ、今回これを見るまでは康煕字典を写真で撮るって、それでうまく活字ができるんだろか？組んだときにちゃんと字面揃うの？「一種の風韻を持する〜」ってちょっと話を盛ってるんじゃ…などと、どれぐらいの品質なのか正直疑問だった。しかし、このように官報のデジタル化資料を見てみたところでは、結構いい感じに仕上がっているようにも思える。また、どうやらこの活字はカタカナ部分の字幅（縦方向の長さ）が漢字より小さいようだ。そのおかげで、カタカナの字面が小ぶりなのにも関わらず、組み上がりはパラパラとした印象にはなっていない。暇なときに一度、デジタル化資料ではなく実物の方でも見てみたい。附記とここまで書いたあと、もう一度近デジの方をちらほら見ていたら、『印刷局長年報書 第45回』の中にこの活字についての言及があった。大正八年一月四日官報ハ従来二段組ナリシヲ三段組ニ改メ又五号活字ニ代フルニ康煕字典ノ文字ヲ基礎トシテ新鋳シタル九ポイント活字ヲ用ヰタリ……『印刷局長年報書 第45回』印刷局、1920年、p. 25    さらに、『印刷局五十年略史』には次のように書かれている。（というか、この本自体がまるまるこの康煕字典活字で組まれている。上で引いた官報が漢字カタカナ交じりだったのに対し、こちらは漢字ひらがな交じり文。）尚玆に活字鋳造に就いて一言せざる可らざることあり、従来本邦の活字製作方法は先づ黄楊材に手刻したる原字を蝋型に取り、電気装置によりて銅を其凹所に集積せしめ、木材原字と同一の銅字を得て更に電気装置により始めて銅字母を作り、之を母型として活字を鋳造したるのものなり。当局に於ては明治四十五年以来独逸及米国より母型彫刻機四台を購入し、繁雑なる旧式の手続を取らずニッケルと銅との合成金に直接彫刻して母型を得、之に依りて鋳造する事とせり。現在官報印刷に使用する活字の如き此機械によりて鋳造したるものなり。上述の新活字は康煕字典の文字を写真により縮写したるものにして字画正確書体鮮明なる九ポイント活字なり。此新漢字活字を採用すると同時に仮名活字をも改鋳し、漢字に比し十と八との割合に縮め、以て字間の空白を減じ行数の節約を得る事とせり。『印刷局五十年略史』印刷局、1921年、p. 29    八年一月従来二段組なりし官報を三段組に改め新鋳九ポイント活字を使用し、以て大に紙面の節約と印刷の鮮明とを図り、日に月に増大堆積する記載事項の停滞を防ぐを得たり、……同、p. 42    とあり、まとめると結局大正8年（1919年）1月4日の官報から康煕字典活字を使ったこのときの活字のサイズは9ポイントで、のちに他のサイズも製作漢字は方形だが仮名は80％平体。これによって紙面節約ということらしい。近デジすごい。追記「大正8年（1919年）1月4日の官報から康煕字典活字を使った」と書いたが、もう少し前から使われていたらしい。印刷局が康煕字典体活字を使い始めるの、「70年史」の記録と違って大正8年1月4日付官報からじゃなく、大正7年12月27日付「衆議院第41回本会議第1号」からだ https://t.co/6sZgeVcQFp っていう件、判りやすいようにツイートしてなかった https://t.co/MQGISd6XSU ので、自分でも捜すの苦労した。— UCHIDA Akira (@uakira2) January 9, 2019上記スレッドに情報がまとまっている。*1:ママ*2:と勝手にこのエントリでは呼んでいますが、正式名称や通称があったりするんでしょうか？

官報に使われた印刷局の康煕字典活字

<p><a href="http://d.hatena.ne.jp/mashabow/20130426/1366986649">5&#x6708;3&#x65E5;&#x306E;&#x52C9;&#x5F37;&#x4F1A;</a>で発表する「TTXによるフォントのぞき基礎」の資料です。</p>

<div class="section">
    <h4>スライド</h4>
    <p>勉強会終了後に公開する予定です。<strong>→ 公開しました。</strong>（2013-05-04）</p>

<ul>
<li><a href="http://shiromoji.net/font/mojiben0503/fontnozoki-with-ttx/">TTX &#x306B;&#x3088;&#x308B;&#x30D5;&#x30A9;&#x30F3;&#x30C8;&#x306E;&#x305E;&#x304D;&#x57FA;&#x790E; - &#x3057;&#x308D;&#x3082;&#x3058;&#x4F5C;&#x696D;&#x5BA4;</a></li>
</ul><p>勉強会のスライドを少々手直ししてアップロードしました。スペースキーを押すと進みます。Esc キーで俯瞰になります（が、うちのPCでは動作が重いです）。今回は初めて <a href="https://github.com/hakimel/reveal.js">reveal.js</a> という<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D5%A5%EC%A1%BC%A5%E0%A5%EF%A1%BC%A5%AF">フレームワーク</a>を使って作成してみました。<a class="keyword" href="http://d.hatena.ne.jp/keyword/Firefox">Firefox</a> で表示確認をしています。</p>

</div>
<div class="section">
    <h4>ツイートまとめ</h4>
    
<ul>
<li><a href="http://togetter.com/li/497859">&#x30D5;&#x30A9;&#x30F3;&#x30C8;&#x95A2;&#x4FC2;&#x306E;&#x52C9;&#x5F37;&#x4F1A; #mojiben0503 &#x307E;&#x3068;&#x3081; - Togetter</a></li>
</ul>
</div>
<div class="section">
    <h4>TTXをインストールする</h4>
    
<ul>
<li><a href="http://d.hatena.ne.jp/mashabow/20130427/1367046740">TTX&#x306E;&#x30A4;&#x30F3;&#x30B9;&#x30C8;&#x30FC;&#x30EB;&#x65B9;&#x6CD5; - &#x3057;&#x308D;&#x3082;&#x3058;&#x30E1;&#x30E2;&#x30E9;&#x30F3;&#x30C0;&#x30E0;</a></li>
</ul>
</div>
<div class="section">
    <h4>参加者向けファイル</h4>
    <p>ノートPC持参で参加される方は、以下の2つのファイルをダウンロード・展開しておいてください。（一応、これらのファイルを入れた<a class="keyword" href="http://d.hatena.ne.jp/keyword/USB%A5%E1%A5%E2%A5%EA">USBメモリ</a>をわたしの方で用意しておきます。）</p>

<div class="section">
    <h5>サンプル用フォントファイル</h5>
    
<ul>
<li><a href="http://shiromoji.net/font/mojiben0503/sample.zip">http://shiromoji.net/font/mojiben0503/sample.zip</a></li>
</ul><p><a href="http://ossipedia.ipa.go.jp/ipafont/ipafont/download.html">IPA&#x660E;&#x671D;</a> と <a href="http://sourceforge.net/projects/sourcesans.adobe/?source=recommended">Source Sans Pro</a> の一部をそのまま再配布しているだけです。</p>

</div>
<div class="section">
    <h5>OpenType Specification</h5>
    
<ul>
<li><a href="http://www.microsoft.com/typography/otspec/">Microsoft Typography - OpenType Specification</a></li>
</ul><p>"Download full specification" から ZIP がダウンロードできます。</p>

</div>
</div>

5月3日の勉強会で発表する「TTXによるフォントのぞき基礎」の資料です。スライド勉強会終了後に公開する予定です。→ 公開しました。（2013-05-04）TTX によるフォントのぞき基礎 - しろもじ作業室勉強会のスライドを少々手直ししてアップロードしました。スペースキーを押すと進みます。Esc キーで俯瞰になります（が、うちのPCでは動作が重いです）。今回は初めて reveal.js というフレームワークを使って作成してみました。Firefox で表示確認をしています。ツイートまとめフォント関係の勉強会 #mojiben0503 まとめ - TogetterTTXをインストールするTTXのインストール方法 - しろもじメモランダム参加者向けファイルノートPC持参で参加される方は、以下の2つのファイルをダウンロード・展開しておいてください。（一応、これらのファイルを入れたUSBメモリをわたしの方で用意しておきます。）サンプル用フォントファイルhttp://shiromoji.net/font/mojiben0503/sample.zipIPA明朝 と Source Sans Pro の一部をそのまま再配布しているだけです。OpenType SpecificationMicrosoft Typography - OpenType Specification"Download full specification" から ZIP がダウンロードできます。

「TTXによるフォントのぞき基礎」の資料【5/4更新：スライド公開】

<p>TTXは、TTX/FontTools に含まれている<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B3%A5%DE%A5%F3%A5%C9%A5%E9%A5%A4%A5%F3">コマンドライン</a><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C4%A1%BC%A5%EB">ツール</a>です。この TTX/FontTools は <a class="keyword" href="http://d.hatena.ne.jp/keyword/SourceForge">SourceForge</a> で公開されており、2013年4月現在 v2.3 が最新のバージョンです。</p>

<ul>
<li><a href="http://sourceforge.net/projects/fonttools/">http://sourceforge.net/projects/fonttools/</a></li>
</ul><p>この記事では、TTXのインストール方法を次の3通りに分けて紹介します。</p>

<ul>
<li><a href="#afdko">A. AFDKOでまとめてインストールする</a></li>
<li><a href="#direct">B. TTXを直接インストールする</a></li>
<li><a href="#setup">C. setup.py でインストールする</a></li>
</ul><p>一長一短ありますが、とりあえず A が無難なような気がします。もっとうまいやり方があるようでしたら、ぜひご教示ください :)</p>

<div class="section">
    <h4><a name="afdko">A.</a> AFDKOでまとめてインストールする</h4>
    <p>AFDKO (<a class="keyword" href="http://d.hatena.ne.jp/keyword/Adobe">Adobe</a> Font Development Kit for OpenType; 通称あふでこ) は <a class="keyword" href="http://d.hatena.ne.jp/keyword/Adobe">Adobe</a> が提供しているフォント開発用の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C4%A1%BC%A5%EB">ツール</a>群で、業界で広く使われているようです。<a class="keyword" href="http://d.hatena.ne.jp/keyword/Windows">Windows</a> と <a class="keyword" href="http://d.hatena.ne.jp/keyword/Mac">Mac</a> に対応しています<a href="#f-fef4a6c0" name="fn-fef4a6c0" title="[http://blogs.adobe.com/CCJKType/2012/02/afdko-for-other-platforms.html:title=Linux などに対応する可能性が無いわけではない]ようですが、残念ながら今のところリリースされていません。">*1</a>。</p>

<ul>
<li><a href="http://www.adobe.com/devnet/opentype/afdko.edu.html">Adobe Font Development Kit for OpenType | Adobe Developer Connection</a></li>
</ul><p>TTXはこの中に収録されているため、AFDKOをインストールすればTTXが使えるようになります。AFDKOにはいろいろな<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C4%A1%BC%A5%EB">ツール</a>が入っていますし、とりあえずインストールしておいて損はないでしょう<a href="#f-5648a567" name="fn-5648a567" title="といいつつわたしはそれほど活用できていませんが……">*2</a>。手間もあまりかかりません。</p>

<div class="section">
    <h5>インストール方法</h5>
    
<ol>
<li><a href="http://www.adobe.com/devnet/opentype/afdko/eula.html">&#x3053;&#x306E;&#x30DA;&#x30FC;&#x30B8;&#x306E; License Agreement</a> を読み、内容に同意します。</li>
<li>ページ下部のリンクからZIPをダウンロードします。<a class="keyword" href="http://d.hatena.ne.jp/keyword/Windows">Windows</a> 版は FDK-25-WIN.zip、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Mac">Mac</a> 版は FDK-25-<a class="keyword" href="http://d.hatena.ne.jp/keyword/MAC">MAC</a>.zipです。</li>
<li>ダウンロードしたZIPを展開します。</li>
<li>展開してできた FDK/Read_Me_First.html を開き、<q>2. AFDKO Installation Guide</q> の指示に従ってインストールします。指示の内容を大雑把に要約すると以下のとおりです。
<ol>
<li>FDKフォルダを好きな場所に移動する</li>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B3%A5%DE%A5%F3%A5%C9%A5%D7%A5%ED%A5%F3%A5%D7%A5%C8">コマンドプロンプト</a>やターミナルから FDK/FinishInstallWindows.cmd あるいは FDK/FinishInstallOSX を実行する</li>
<li>（<q>For installing the AFDKO FontLab macros</q> の部分は今回は関係ありません）</li>
</ol></li>
</ol><p>これでインストール完了です。ちなみにAFDKOの現在のバージョンは v2.5 Feb 26 2013 change number 60418 で、これをインストールすると TTX v2.3 が入ります。</p>

</div>
</div>
<div class="section">
    <h4><a name="direct">B.</a> TTXを直接インストールする</h4>
    
<div class="section">
    <h5><a class="keyword" href="http://d.hatena.ne.jp/keyword/Windows">Windows</a> の場合</h5>
    <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%F3%A5%B9%A5%C8%A1%BC%A5%E9">インストーラ</a>などで普通に単独インストールできれば楽なのですが、残念なことに公式からは <a href="http://sourceforge.net/projects/fonttools/files/2.0b1/">v2.0b1&#xFF08;2002&#x5E74;&#x30EA;&#x30EA;&#x30FC;&#x30B9;&#xFF09;</a>のものしか配布されていません。</p><p>Typophile の <a href="http://typophile.com/node/67406">TTX 2.3 installer?</a> というスレッドにいろいろと情報が載っていますが、その中で <a href="http://typophile.com/node/67406#comment-469074">v2.3 &#x306E;ZIP&#x3078;&#x306E;&#x30EA;&#x30F3;&#x30AF;&#x304C;&#x6295;&#x7A3F;&#x3055;&#x308C;&#x3066;&#x3044;&#x307E;&#x3059;</a>。このZIPを好きな場所に展開し、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B4%C4%B6%AD%CA%D1%BF%F4">環境変数</a>PATHにそのディレクトリを追加すれば完了です。</p>

</div>
<div class="section">
    <h5><a class="keyword" href="http://d.hatena.ne.jp/keyword/Mac">Mac</a> の場合</h5>
    <p>自宅に <a class="keyword" href="http://d.hatena.ne.jp/keyword/Mac">Mac</a> がないのでよく調べていません :(<br />
こちらもバイナリは v2.0b1 のものしか配布されていません。</p>

</div>
<div class="section">
    <h5>その他 <a class="keyword" href="http://d.hatena.ne.jp/keyword/Linux">Linux</a> など</h5>
    <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C7%A5%A3%A5%B9%A5%C8%A5%EA%A5%D3%A5%E5%A1%BC%A5%B7%A5%E7%A5%F3">ディストリビューション</a>によってはパッケージが提供されています。例えば <a class="keyword" href="http://d.hatena.ne.jp/keyword/Ubuntu">Ubuntu</a> であれば</p>

<pre>$ sudo apt-get install fonttools
</pre><p>で最新の v2.3 をインストールすることができます。</p>

</div>
</div>
<div class="section">
    <h4><a name="setup">C.</a> setup.py でインストールする</h4>
    <p>これが本来のインストール方法ですが、この方法はちょっと面倒な気がします。前提として、<a href="http://www.python.org/download/">Python 2</a> と <a href="http://www.numpy.org/">NumPy</a> をインストールしておく必要があります。</p><p><a href="http://sourceforge.net/projects/fonttools/files/">TTX/FontTools &#x306E;&#x914D;&#x5E03;&#x30DA;&#x30FC;&#x30B8;</a>から fonttools-2.3.tar.gz をダウンロードし、展開します。そして fonttools-2.3 ディレクトリの中に入り、</p>

<pre>$ (sudo) <a class="keyword" href="http://d.hatena.ne.jp/keyword/python">python</a> setup.py install
</pre><p>などとすれば良いようです。</p><p>このあと <a class="keyword" href="http://d.hatena.ne.jp/keyword/Windows">Windows</a> の場合、</p>
<pre class="code lang-dosbatch" data-lang="dosbatch" data-unlink>@<span class="synIdentifier">echo</span><span class="synStatement"> off</span>
python C:\Python27\Scripts\ttx <span class="synIdentifier">%*</span>
</pre><p>のような内容のファイルを ttx.bat という名前で作成し、これをパスの通った場所に入れておけばOKです。</p><p>また、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Mac">Mac</a> では</p>

<pre>$ defaults write com.apple.versioner.<a class="keyword" href="http://d.hatena.ne.jp/keyword/python">python</a> Prefer-32-Bit -bool yes
</pre><p>と設定する必要があるかもしれません<a href="#f-ece7a60e" name="fn-ece7a60e" title="http://forum.fontlab.com/index.php?topic=7305.0">*3</a>。</p><br />
<p>以上、インストール方法を3通りに分けて紹介しました。てきとうなフォントファイル <a class="keyword" href="http://d.hatena.ne.jp/keyword/hoge">hoge</a>.ttf<a href="#f-27f61b08" name="fn-27f61b08" title="和文フォントなど、ファイルサイズが大きいものだとちょっと時間がかかります。なお、.otf でもかまいません。">*4</a> に対して</p>
<pre class="code lang-sh" data-lang="sh" data-unlink>$ ttx hoge.ttf
</pre><p>としたときに <a class="keyword" href="http://d.hatena.ne.jp/keyword/hoge">hoge</a>.ttx が生成されるようであれば、TTXは正常にインストールされています。</p><p>TTXの使い方については、<a href="http://d.hatena.ne.jp/mashabow/20130426/1366986649">5&#x6708;3&#x65E5;&#x306E;&#x52C9;&#x5F37;&#x4F1A;</a>で紹介する予定です。</p><p>2013-05-04 追記：勉強会で使ったスライドをアップロードしました。</p>

<ul>
<li><a href="http://d.hatena.ne.jp/mashabow/20130502/1367500832">&#x300C;TTX&#x306B;&#x3088;&#x308B;&#x30D5;&#x30A9;&#x30F3;&#x30C8;&#x306E;&#x305E;&#x304D;&#x57FA;&#x790E;&#x300D;&#x306E;&#x8CC7;&#x6599; - &#x3057;&#x308D;&#x3082;&#x3058;&#x30E1;&#x30E2;&#x30E9;&#x30F3;&#x30C0;&#x30E0;</a></li>
</ul>
</div><div class="footnote">
<p class="footnote"><a href="#fn-fef4a6c0" name="f-fef4a6c0" class="footnote-number">*1</a><span class="footnote-delimiter">:</span><span class="footnote-text"><a href="http://blogs.adobe.com/CCJKType/2012/02/afdko-for-other-platforms.html">Linux &#x306A;&#x3069;&#x306B;&#x5BFE;&#x5FDC;&#x3059;&#x308B;&#x53EF;&#x80FD;&#x6027;&#x304C;&#x7121;&#x3044;&#x308F;&#x3051;&#x3067;&#x306F;&#x306A;&#x3044;</a>ようですが、残念ながら今のところリリースされていません。</span></p>
<p class="footnote"><a href="#fn-5648a567" name="f-5648a567" class="footnote-number">*2</a><span class="footnote-delimiter">:</span><span class="footnote-text">といいつつわたしはそれほど活用できていませんが……</span></p>
<p class="footnote"><a href="#fn-ece7a60e" name="f-ece7a60e" class="footnote-number">*3</a><span class="footnote-delimiter">:</span><span class="footnote-text"><a href="http://forum.fontlab.com/index.php?topic=7305.0">http://forum.fontlab.com/index.php?topic=7305.0</a></span></p>
<p class="footnote"><a href="#fn-27f61b08" name="f-27f61b08" class="footnote-number">*4</a><span class="footnote-delimiter">:</span><span class="footnote-text">和文フォントなど、ファイルサイズが大きいものだとちょっと時間がかかります。なお、.otf でもかまいません。</span></p>
</div>

TTXは、TTX/FontTools に含まれているコマンドラインツールです。この TTX/FontTools は SourceForge で公開されており、2013年4月現在 v2.3 が最新のバージョンです。http://sourceforge.net/projects/fonttools/この記事では、TTXのインストール方法を次の3通りに分けて紹介します。A. AFDKOでまとめてインストールするB. TTXを直接インストールするC. setup.py でインストールする一長一短ありますが、とりあえず A が無難なような気がします。もっとうまいやり方があるようでしたら、ぜひご教示ください :)A. AFDKOでまとめてインストールするAFDKO (Adobe Font Development Kit for OpenType; 通称あふでこ) は Adobe が提供しているフォント開発用のツール群で、業界で広く使われているようです。Windows と Mac に対応しています*1。Adobe Font Development Kit for OpenType | Adobe Developer ConnectionTTXはこの中に収録されているため、AFDKOをインストールすればTTXが使えるようになります。AFDKOにはいろいろなツールが入っていますし、とりあえずインストールしておいて損はないでしょう*2。手間もあまりかかりません。インストール方法このページの License Agreement を読み、内容に同意します。ページ下部のリンクからZIPをダウンロードします。Windows 版は FDK-25-WIN.zip、Mac 版は FDK-25-MAC.zipです。ダウンロードしたZIPを展開します。展開してできた FDK/Read_Me_First.html を開き、2. AFDKO Installation Guide の指示に従ってインストールします。指示の内容を大雑把に要約すると以下のとおりです。FDKフォルダを好きな場所に移動するコマンドプロンプトやターミナルから FDK/FinishInstallWindows.cmd あるいは FDK/FinishInstallOSX を実行する（For installing the AFDKO FontLab macros の部分は今回は関係ありません）これでインストール完了です。ちなみにAFDKOの現在のバージョンは v2.5 Feb 26 2013 change number 60418 で、これをインストールすると TTX v2.3 が入ります。B. TTXを直接インストールするWindows の場合インストーラなどで普通に単独インストールできれば楽なのですが、残念なことに公式からは v2.0b1（2002年リリース）のものしか配布されていません。Typophile の TTX 2.3 installer? というスレッドにいろいろと情報が載っていますが、その中で v2.3 のZIPへのリンクが投稿されています。このZIPを好きな場所に展開し、環境変数PATHにそのディレクトリを追加すれば完了です。Mac の場合自宅に Mac がないのでよく調べていません :(その他 Linux などディストリビューションによってはパッケージが提供されています。例えば Ubuntu であれば$ sudo apt-get install fonttoolsで最新の v2.3 をインストールすることができます。C. setup.py でインストールするこれが本来のインストール方法ですが、この方法はちょっと面倒な気がします。前提として、Python 2 と NumPy をインストールしておく必要があります。TTX/FontTools の配布ページから fonttools-2.3.tar.gz をダウンロードし、展開します。そして fonttools-2.3 ディレクトリの中に入り、$ (sudo) python setup.py installなどとすれば良いようです。このあと Windows の場合、@echo offpython C:\Python27\Scripts\ttx %*のような内容のファイルを ttx.bat という名前で作成し、これをパスの通った場所に入れておけばOKです。また、Mac では$ defaults write com.apple.versioner.python Prefer-32-Bit -bool yesと設定する必要があるかもしれません*3。以上、インストール方法を3通りに分けて紹介しました。てきとうなフォントファイル hoge.ttf*4 に対して$ ttx hoge.ttfとしたときに hoge.ttx が生成されるようであれば、TTXは正常にインストールされています。TTXの使い方については、5月3日の勉強会で紹介する予定です。2013-05-04 追記：勉強会で使ったスライドをアップロードしました。「TTXによるフォントのぞき基礎」の資料 - しろもじメモランダム*1:Linux などに対応する可能性が無いわけではないようですが、残念ながら今のところリリースされていません。*2:といいつつわたしはそれほど活用できていませんが……*3:http://forum.fontlab.com/index.php?topic=7305.0*4:和文フォントなど、ファイルサイズが大きいものだとちょっと時間がかかります。なお、.otf でもかまいません。

TTXのインストール方法

<p>2013-05-06 追記：今回の関連ツイートをまとめました。</p>

<ul>
<li><a href="http://togetter.com/li/497859">&#x30D5;&#x30A9;&#x30F3;&#x30C8;&#x95A2;&#x4FC2;&#x306E;&#x52C9;&#x5F37;&#x4F1A; #mojiben0503 &#x307E;&#x3068;&#x3081; - Togetter</a></li>
</ul><p><br />
読者・フォロワー各位：</p><p>突然ですが、5月3日にちょっとした勉強会をやってみようかと思います。</p>

<div class="section">
    <h4>日時</h4>
    <p>5月3日（金・祝） 13:00〜17:00</p>

</div>
<div class="section">
    <h4>場所</h4>
    <p><a href="http://www.toshima-mirai.jp/center/e_komagome/#nav_access">&#x99D2;&#x8FBC;&#x5730;&#x57DF;&#x6587;&#x5316;&#x5275;&#x9020;&#x9928;</a>　4階・第4会議室<br>山手線<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B6%F0%B9%FE%B1%D8">駒込駅</a>北口より徒歩2分</p>

</div>
<div class="section">
    <h4>内容</h4>
    
<div class="section">
    <h5>1. TTXによるフォントのぞき基礎</h5>
    <p><a href="http://sourceforge.net/projects/fonttools/">TTX</a>の使い方を紹介し、OpenType の基本的な部分を簡単に説明します。「TTX使ったことない」「OpenType の中身に興味はあるけどどこから手をつけていいのかよく分からん」というような初心者を主なターゲットにします。30分程度？</p><p>下記補足も参照してください。</p>

</div>
<div class="section">
    <h5>2.『ヘルベチカ 世界を魅了する書体』鑑賞</h5>
    <p>みんなでDVDみるだけです。2007年イギリス制作のドキュメンタリーで、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%BE%AE%CE%D3%BE%CF">小林章</a>さん監修の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%C6%FC%CB%DC%B8%EC%BB%FA%CB%EB">日本語字幕</a>がついています。本編80分＋特典95分。</p>

<ul>
<li><a href="http://helveticafilm.com/">http://helveticafilm.com/</a></li>
</ul>
</div>
</div>
<div class="section">
    <h4>申し込み方法</h4>
    <p>タイトルを「5/3参加希望」として、mashabow<あっと>shiromoji.net へメールをお送りください。定員は10人弱で、先着順です。前日（5月2日）の20時に一旦締め切ります。</p><p>申し込みメールには、遅くとも翌日にはこちらから返信をします。万一返信のない場合には、お手数ですがお問い合わせください。</p>

</div>
<div class="section">
    <h4><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%CF%A5%C3%A5%B7%A5%E5%A5%BF%A5%B0">ハッシュタグ</a></h4>
    
<ul>
<li><a href="https://twitter.com/search/realtime?q=%23mojiben0503&src=hash">#mojiben0503</a></li>
</ul>
</div>
<div class="section">
    <h4>問い合わせ先</h4>
    
<ul>
<li><span data-unlink>Twitter</span>: <a href="https://twitter.com/mashabow">@mashabow</a></li>
<li>メール: mashabow<あっと>shiromoji.net</li>
</ul>
</div>
<div class="section">
    <h4>補足：TTXによるフォントのぞき基礎 について</h4>
    <p>このあたり、興味ない方にとっては<em>非常につまらない内容</em>だと思うので、そういう場合は気にせず「ヘルベチカ〜」だけご参加ください。</p><p>参加される方は、TTXをインストールしたノートPCの持参をおすすめします。インストール方法については、下の記事にまとめてみました。</p>

<ul>
<li><a href="http://d.hatena.ne.jp/mashabow/20130427/1367046740">TTX&#x306E;&#x30A4;&#x30F3;&#x30B9;&#x30C8;&#x30FC;&#x30EB;&#x65B9;&#x6CD5; - &#x3057;&#x308D;&#x3082;&#x3058;&#x30E1;&#x30E2;&#x30E9;&#x30F3;&#x30C0;&#x30E0;</a></li>
</ul><p>なお、残念ながら会場には有線／<a class="keyword" href="http://d.hatena.ne.jp/keyword/%CC%B5%C0%FELAN">無線LAN</a>の設備はありません。</p><p>2013-05-04 追記：発表に使ったスライドを公開しました。</p>

<ul>
<li><a href="http://d.hatena.ne.jp/mashabow/20130502/1367500832">&#x300C;TTX&#x306B;&#x3088;&#x308B;&#x30D5;&#x30A9;&#x30F3;&#x30C8;&#x306E;&#x305E;&#x304D;&#x57FA;&#x790E;&#x300D;&#x306E;&#x8CC7;&#x6599; - &#x3057;&#x308D;&#x3082;&#x3058;&#x30E1;&#x30E2;&#x30E9;&#x30F3;&#x30C0;&#x30E0;</a></li>
</ul><p><br />
というわけで、参加お待ちしています。</p><p>以前から「若い人が主体になって文字関係のゆるい勉強会みたいなのできないかなー」と考えてい（ながら行動に移していなかっ）たんですが、今回はそのお試し版みたいな位置づけになります。気軽に顔を出してもらえれば幸いです。</p>

</div>

2013-05-06 追記：今回の関連ツイートをまとめました。フォント関係の勉強会 #mojiben0503 まとめ - Togetter突然ですが、5月3日にちょっとした勉強会をやってみようかと思います。日時5月3日（金・祝） 13:00〜17:00場所駒込地域文化創造館　4階・第4会議室山手線駒込駅北口より徒歩2分内容1. TTXによるフォントのぞき基礎TTXの使い方を紹介し、OpenType の基本的な部分を簡単に説明します。「TTX使ったことない」「OpenType の中身に興味はあるけどどこから手をつけていいのかよく分からん」というような初心者を主なターゲットにします。30分程度？下記補足も参照してください。2.『ヘルベチカ 世界を魅了する書体』鑑賞みんなでDVDみるだけです。2007年イギリス制作のドキュメンタリーで、小林章さん監修の日本語字幕がついています。本編80分＋特典95分。http://helveticafilm.com/申し込み方法タイトルを「5/3参加希望」として、mashabowshiromoji.net へメールをお送りください。定員は10人弱で、先着順です。前日（5月2日）の20時に一旦締め切ります。申し込みメールには、遅くとも翌日にはこちらから返信をします。万一返信のない場合には、お手数ですがお問い合わせください。ハッシュタグ#mojiben0503問い合わせ先Twitter: @mashabowメール: mashabowshiromoji.net補足：TTXによるフォントのぞき基礎 についてこのあたり、興味ない方にとっては非常につまらない内容だと思うので、そういう場合は気にせず「ヘルベチカ〜」だけご参加ください。参加される方は、TTXをインストールしたノートPCの持参をおすすめします。インストール方法については、下の記事にまとめてみました。TTXのインストール方法 - しろもじメモランダムなお、残念ながら会場には有線／無線LANの設備はありません。2013-05-04 追記：発表に使ったスライドを公開しました。「TTXによるフォントのぞき基礎」の資料 - しろもじメモランダム以前から「若い人が主体になって文字関係のゆるい勉強会みたいなのできないかなー」と考えてい（ながら行動に移していなかっ）たんですが、今回はそのお試し版みたいな位置づけになります。気軽に顔を出してもらえれば幸いです。

5月3日にフォント関係の勉強会やります


<ul>
<li><a href="http://pingmag.jp/jp/2013/03/18/pingmag-is-back/">PingMag &#x5FA9;&#x520A;&#xFF01; | PingMag : &#x65E5;&#x672C;&#x767A;&#x3000;&#x30A2;&#x30FC;&#x30C8;&#x3001;&#x30C7;&#x30B6;&#x30A4;&#x30F3;&#x3001;&#x304F;&#x3089;&#x3057;</a></li>
</ul><p><a href="http://pingmag.jp/jp/2008/12/31/important-notice/">2008&#x5E74;&#x3044;&#x3063;&#x3071;&#x3044;&#x3067;&#x4F11;&#x520A;</a>となっていた <a href="http://pingmag.jp/jp/">PingMag</a> が復活したようです。</p><p>おぉ、なつかしーと思って過去記事をちょっと漁っていたんですが、せっかくなのでここに文字関係の記事を10本ピックアップしておきます。</p>

<ol>
<li><a href="http://pingmag.jp/jp/2006/03/03/handwritten-japanese-fonts/">&#x66F8;&#x304D;&#x6587;&#x5B57;</a></li>
<li><a href="http://pingmag.jp/jp/2006/03/24/akira-kobayashi-transcending-typographic-boundaries/">&#x5C0F;&#x6797; &#x7AE0;&#xFF1A;&#x30BF;&#x30A4;&#x30DD;&#x30B0;&#x30E9;&#x30D5;&#x30A3;&#x30FC;&#x306E;&#x5883;&#x754C;&#x3092;&#x8D85;&#x3048;&#x3066;</a></li>
<li><a href="http://pingmag.jp/jp/2006/06/30/shock-of-the-neue-graffiti-fonts-by-graffiti-writers/">&#x30B0;&#x30E9;&#x30D5;&#x30A3;&#x30C6;&#x30A3;&#x30FB;&#x30E9;&#x30A4;&#x30BF;&#x30FC;&#x306B;&#x3088;&#x308B;&#x30B0;&#x30E9;&#x30D5;&#x30A3;&#x30C6;&#x30A3;&#x30FB;&#x30D5;&#x30A9;&#x30F3;&#x30C8;</a></li>
<li><a href="http://pingmag.jp/jp/2006/07/03/dry-cleaning-typography/">&#x30AF;&#x30EA;&#x30FC;&#x30CB;&#x30F3;&#x30B0;&#x5C4B;&#x3055;&#x3093;&#x306E;&#x30BF;&#x30A4;&#x30DD;&#x30B0;&#x30E9;&#x30D5;&#x30A3;&#x30FC;</a></li>
<li><a href="http://pingmag.jp/jp/2006/09/27/handmade-balinese-typography/">&#x30D0;&#x30EA;&#x306E;&#x624B;&#x63CF;&#x304D;&#x30BF;&#x30A4;&#x30DD;&#x30B0;&#x30E9;&#x30D5;&#x30A3;&#x30FC;</a></li>
<li><a href="http://pingmag.jp/jp/2006/12/11/iranian-typography-now/">&#x30A4;&#x30E9;&#x30CB;&#x30A2;&#x30F3;&#x30FB;&#x30BF;&#x30A4;&#x30DD;&#x30B0;&#x30E9;&#x30D5;&#x30A3;&#x30FC;&#x306E;&#x4ECA;</a></li>
<li><a href="http://pingmag.jp/jp/2007/04/20/dainippon-type-organization/">&#x6587;&#x5B57;&#x306E;&#x9054;&#x4EBA;&#x3001;&#x5927;&#x65E5;&#x672C;&#x30BF;&#x30A4;&#x30DD;&#x7D44;&#x5408;</a></li>
<li><a href="http://pingmag.jp/jp/2007/08/30/gaffer-tape-guide/">&#x30AC;&#x30E0;&#x30C6;&#x30FC;&#x30D7;&#x306E;&#x9053;&#x6848;&#x5185;</a></li>
<li><a href="http://pingmag.jp/jp/2007/10/05/veb-typoart-the-east-german-type-betriebsstatte/">VEB&#x30BF;&#x30A4;&#x30DD;&#x30A2;&#x30FC;&#x30C8;&#xFF1A;&#x6771;&#x30C9;&#x30A4;&#x30C4;&#x306E;&#x6D3B;&#x5B57;&#x92F3;&#x9020;&#x6240;</a></li>
<li><a href="http://pingmag.jp/jp/2008/05/01/bunshi/">&#x4F1D;&#x7D71;&#x3092;&#x5207;&#x308A;&#x958B;&#x3044;&#x305F;&#x6587;&#x5FD7;&#x6D41;&#x6C5F;&#x6238;&#x6587;&#x5B57;</a></li>
</ol><p>昔の記事ということで画像が粗かったりするのは残念ですが、おもしろい記事がいろいろとあります。文字以外にも。おすすめ。</p>


PingMag 復刊！ | PingMag : 日本発　アート、デザイン、くらし2008年いっぱいで休刊となっていた PingMag が復活したようです。おぉ、なつかしーと思って過去記事をちょっと漁っていたんですが、せっかくなのでここに文字関係の記事を10本ピックアップしておきます。書き文字小林 章：タイポグラフィーの境界を超えてグラフィティ・ライターによるグラフィティ・フォントクリーニング屋さんのタイポグラフィーバリの手描きタイポグラフィーイラニアン・タイポグラフィーの今文字の達人、大日本タイポ組合ガムテープの道案内VEBタイポアート：東ドイツの活字鋳造所伝統を切り開いた文志流江戸文字昔の記事ということで画像が粗かったりするのは残念ですが、おもしろい記事がいろいろとあります。文字以外にも。おすすめ。

 PingMag復刊らしいのでアーカイブから文字関係の記事を10本ほど

<p><a class="keyword" href="http://d.hatena.ne.jp/keyword/Microsoft">Microsoft</a> の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%BB%A5%DF">セミ</a>ナーに行ってきた。</p>

<ul>
<li><a href="http://www.microsoft.com/ja-jp/mic/seminar/interop_unicode.aspx">&#x6587;&#x5B57;&#x30B3;&#x30FC;&#x30C9;&#x3068;&#x7570;&#x4F53;&#x5B57;&#x3068; Unicode IVS &#x301C; &#x60C5;&#x5831;&#x30B7;&#x30B9;&#x30C6;&#x30E0;&#x306B;&#x304A;&#x3051;&#x308B;&#x65E5;&#x672C;&#x8A9E;&#x51E6;&#x7406; &#x301C; | &#x30B9;&#x30AD;&#x30EB;&#x30A2;&#x30C3;&#x30D7; &#x30AB;&#x30EA;&#x30AD;&#x30E5;&#x30E9;&#x30E0; - &#x30DE;&#x30A4;&#x30AF;&#x30ED;&#x30BD;&#x30D5;&#x30C8; &#x30A4;&#x30CE;&#x30D9;&#x30FC;&#x30B7;&#x30E7;&#x30F3; &#x30BB;&#x30F3;&#x30BF;&#x30FC;</a></li>
</ul><p>目新しい情報はあまりなかったが、イベントレポート書いて的な圧力を <a class="keyword" href="http://d.hatena.ne.jp/keyword/Twitter">Twitter</a> 上で受けてしまったので、ここに雑感を書いてお茶を濁したいと思う。</p><p>今回の内容は</p>

<ul>
<li>前半：これまでの<a class="keyword" href="http://d.hatena.ne.jp/keyword/%CA%B8%BB%FA%A5%B3%A1%BC%A5%C9">文字コード</a>・漢字施策の変遷に関する、ざっくりとした説明</li>
<li>後半：IVS自体と <a class="keyword" href="http://d.hatena.ne.jp/keyword/Windows">Windows</a> 上におけるIVS対応についての、ざっくりとした説明</li>
</ul><p>という感じだった。幅広い内容をたったの2時間で扱わなければならないので、どうしてもざっくりになってしまう。ある程度の基礎知識がある人であれば、「あーそうだったよね」と自分の頭の中を整理しつつ、まとめ・おさらい的な感覚で聞けると思うが、逆にまったくの初心者がこの2時間だけで理解するのは難しいと思う。<a class="keyword" href="http://d.hatena.ne.jp/keyword/%CA%B8%BB%FA%A5%B3%A1%BC%A5%C9">文字コード</a>マニヤ(笑)な人は「ここの説明が不十分」とか「これはこう説明した方が…」とかツッコみながら聞いていたのかもしれない。</p><p>個人的に興味があったのは、<a class="keyword" href="http://d.hatena.ne.jp/keyword/MS-DOS">MS-DOS</a>/<a class="keyword" href="http://d.hatena.ne.jp/keyword/Windows">Windows</a> はこれまでどのように対応してきたかという点。Shift JIS の誕生からIVS対応まで、今回の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%BB%A5%DF">セミ</a>ナーでも各所で触れられていた。ただ、そのまわり（＋裏？）には語り尽くせないぐらいのいろいろなエピソードがあると思うので、そのへんを何かの機会にまとめて教えてくれたらおもしろいんだけどなー、と感じる。</p><p>Window 8 上の<a class="keyword" href="http://d.hatena.ne.jp/keyword/IME">IME</a>におけるIVS対応については、<a href="http://d.hatena.ne.jp/mashabow/20120302/1330712411">Consumer Preview &#x7248;&#x306E;&#x3068;&#x304D;</a>と同じくデフォルトではオフ（IVS入りの候補は出てこない）になっている。「頻繁に使用される名前、地名はIVSを含む単語として<a class="keyword" href="http://d.hatena.ne.jp/keyword/IME">IME</a>の辞書に搭載」<a href="#f-2904b3b2" name="fn-2904b3b2" title="配布資料 p. 40">*1</a>してあるとのことで、設定をオン<a href="#f-254c750f" name="fn-254c750f" title="「変換文字制限をしない」">*2</a>にして、例えば<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A1%D6%A4%AF%A4%BA%A1%D7">「くず」</a>を変換すると、</p>

<ul>
<li>葛 [U+845B]：<a class="keyword" href="http://d.hatena.ne.jp/keyword/Windows%20Vista">Windows Vista</a> 以降のフォントでは<a class="keyword" href="http://d.hatena.ne.jp/keyword/JIS2004">JIS2004</a>字形</li>
<li>葛&#xE0100; [U+845B U+E0100]：<a class="keyword" href="http://d.hatena.ne.jp/keyword/Adobe">Adobe</a>-Japan1 コレクション収録のJIS90字形</li>
</ul><p>の両方が候補に出てくる。完璧を期すのであれば、これに加えて<a class="keyword" href="http://d.hatena.ne.jp/keyword/JIS2004">JIS2004</a>字形を明示的に指定する</p>

<ul>
<li>葛&#xE0101; [U+845B U+E0101]：<a class="keyword" href="http://d.hatena.ne.jp/keyword/Adobe">Adobe</a>-Japan1 コレクション収録の<a class="keyword" href="http://d.hatena.ne.jp/keyword/JIS2004">JIS2004</a>字形</li>
</ul><p>も候補に出してほしいところだが、<a class="keyword" href="http://d.hatena.ne.jp/keyword/MS-IME">MS-IME</a>の辞書ではそうはなっていない。</p><p>ちなみに、「いばら」を変換すると</p>

<ul>
<li>茨 [U+8328]</li>
<li>茨&#xE0100 [U+8328 U+E0100]<a href="#f-76366657" name="fn-76366657" title="変換候補の「単漢字…」の中にある。">*3</a></li>
</ul><p>の両者が出てくるが、「いばらき」では</p>

<ul>
<li>茨城 [U+8328 U+57CE] </li>
</ul><p>だけであって、IVSを使ったJIS90字形の</p>

<ul>
<li>茨&#xE0100城 [U+8328 U+E0100 U+57CE] </li>
</ul><p>は出てこない。これについては、「<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B0%F1%BE%EB%B8%A9">茨城県</a>などは<a class="keyword" href="http://d.hatena.ne.jp/keyword/JIS2004">JIS2004</a>字形を使っているので、JIS90字形は辞書に入れていない」という、わかるようなわからないような説明があった。</p><p>IVS/IVDのコレクションの違いについてほとんど触れられておらず、これはどうなんだろう…という感もある。ただ普通のアプリケーションにとってみれば、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Adobe">Adobe</a>-Japan1 であれ Hanyo-Denshi であれ、どちらもIVSとしての扱い方に差はないので、ここらへんのややこしい話にあまり深入りする必要はないかもしれない。</p><p>なお、『<a class="keyword" href="http://d.hatena.ne.jp/keyword/Unicode">Unicode</a> IVS/IVD入門』という本が先日発売されたが、今日の講師の方は「届いたばかりでまだ詳しく読んでいない」とおっしゃっていた。</p>

<ul>
<li><a href="http://ec.nikkeibp.co.jp/item/books/P94830.html">&#x65E5;&#x7D4C;BP&#x66F8;&#x5E97;&#xFF5C;&#x5546;&#x54C1;&#x8A73;&#x7D30;&#x3000;-&#x3000;Unicode IVS/IVD&#x5165;&#x9580;</a></li>
</ul><p><div class="hatena-asin-detail"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4822294838/msb2-22/"><img src="https://images-fe.ssl-images-amazon.com/images/I/51ZrcRm4-xL._SL160_.jpg" class="hatena-asin-detail-image" alt="Unicode IVS/IVD入門" title="Unicode IVS/IVD入門"></a><div class="hatena-asin-detail-info"><p class="hatena-asin-detail-title"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4822294838/msb2-22/">Unicode IVS/IVD入門</a></p><ul><li><span class="hatena-asin-detail-label">作者:</span> 田丸健三郎,小林龍生</li><li><span class="hatena-asin-detail-label">出版社/メーカー:</span> <a class="keyword" href="http://d.hatena.ne.jp/keyword/%C6%FC%B7%D0BP">日経BP</a>社</li><li><span class="hatena-asin-detail-label">発売日:</span> 2013/02/28</li><li><span class="hatena-asin-detail-label">メディア:</span> 単行本</li><li><span class="hatena-asin-detail-label">購入</span>: 1人 <span class="hatena-asin-detail-label">クリック</span>: 20回</li><li><a href="http://d.hatena.ne.jp/asin/4822294838/msb2-22" target="_blank">この商品を含むブログ (6件) を見る</a></li></ul></div><div class="hatena-asin-detail-foot"></div></div></p><p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%BB%A5%DF">セミ</a>ナー後は、小形さんはじめ文字に詳しそうなみなさんと昼食をご一緒させていただいた。そこでのお話（IVSとは関係ない）も非常におもしろかったので、このあたりの内容、まとめて本なり何なりにならないかな…と思う。</p><p>そんな一日でした。レポートおわり。</p>
<div class="footnote">
<p class="footnote"><a href="#fn-2904b3b2" name="f-2904b3b2" class="footnote-number">*1</a><span class="footnote-delimiter">:</span><span class="footnote-text">配布資料 p. 40</span></p>
<p class="footnote"><a href="#fn-254c750f" name="f-254c750f" class="footnote-number">*2</a><span class="footnote-delimiter">:</span><span class="footnote-text">「変換文字制限をしない」</span></p>
<p class="footnote"><a href="#fn-76366657" name="f-76366657" class="footnote-number">*3</a><span class="footnote-delimiter">:</span><span class="footnote-text">変換候補の「単漢字…」の中にある。</span></p>
</div>

Microsoft のセミナーに行ってきた。文字コードと異体字と Unicode IVS 〜 情報システムにおける日本語処理 〜 | スキルアップ カリキュラム - マイクロソフト イノベーション センター目新しい情報はあまりなかったが、イベントレポート書いて的な圧力を Twitter 上で受けてしまったので、ここに雑感を書いてお茶を濁したいと思う。今回の内容は前半：これまでの文字コード・漢字施策の変遷に関する、ざっくりとした説明後半：IVS自体と Windows 上におけるIVS対応についての、ざっくりとした説明という感じだった。幅広い内容をたったの2時間で扱わなければならないので、どうしてもざっくりになってしまう。ある程度の基礎知識がある人であれば、「あーそうだったよね」と自分の頭の中を整理しつつ、まとめ・おさらい的な感覚で聞けると思うが、逆にまったくの初心者がこの2時間だけで理解するのは難しいと思う。文字コードマニヤ(笑)な人は「ここの説明が不十分」とか「これはこう説明した方が…」とかツッコみながら聞いていたのかもしれない。個人的に興味があったのは、MS-DOS/Windows はこれまでどのように対応してきたかという点。Shift JIS の誕生からIVS対応まで、今回のセミナーでも各所で触れられていた。ただ、そのまわり（＋裏？）には語り尽くせないぐらいのいろいろなエピソードがあると思うので、そのへんを何かの機会にまとめて教えてくれたらおもしろいんだけどなー、と感じる。Window 8 上のIMEにおけるIVS対応については、Consumer Preview 版のときと同じくデフォルトではオフ（IVS入りの候補は出てこない）になっている。「頻繁に使用される名前、地名はIVSを含む単語としてIMEの辞書に搭載」*1してあるとのことで、設定をオン*2にして、例えば「くず」を変換すると、葛 [U+845B]：Windows Vista 以降のフォントではJIS2004字形葛󠄀 [U+845B U+E0100]：Adobe-Japan1 コレクション収録のJIS90字形の両方が候補に出てくる。完璧を期すのであれば、これに加えてJIS2004字形を明示的に指定する葛󠄁 [U+845B U+E0101]：Adobe-Japan1 コレクション収録のJIS2004字形も候補に出してほしいところだが、MS-IMEの辞書ではそうはなっていない。ちなみに、「いばら」を変換すると茨 [U+8328]茨󠄀 [U+8328 U+E0100]*3の両者が出てくるが、「いばらき」では茨城 [U+8328 U+57CE] だけであって、IVSを使ったJIS90字形の茨󠄀城 [U+8328 U+E0100 U+57CE] は出てこない。これについては、「茨城県などはJIS2004字形を使っているので、JIS90字形は辞書に入れていない」という、わかるようなわからないような説明があった。IVS/IVDのコレクションの違いについてほとんど触れられておらず、これはどうなんだろう…という感もある。ただ普通のアプリケーションにとってみれば、Adobe-Japan1 であれ Hanyo-Denshi であれ、どちらもIVSとしての扱い方に差はないので、ここらへんのややこしい話にあまり深入りする必要はないかもしれない。なお、『Unicode IVS/IVD入門』という本が先日発売されたが、今日の講師の方は「届いたばかりでまだ詳しく読んでいない」とおっしゃっていた。日経BP書店｜商品詳細　-　Unicode IVS/IVD入門Unicode IVS/IVD入門作者: 田丸健三郎,小林龍生出版社/メーカー: 日経BP社発売日: 2013/02/28メディア: 単行本購入: 1人 クリック: 20回この商品を含むブログ (6件) を見るセミナー後は、小形さんはじめ文字に詳しそうなみなさんと昼食をご一緒させていただいた。そこでのお話（IVSとは関係ない）も非常におもしろかったので、このあたりの内容、まとめて本なり何なりにならないかな…と思う。そんな一日でした。レポートおわり。*1:配布資料 p. 40*2:「変換文字制限をしない」*3:変換候補の「単漢字…」の中にある。

「Windows 8 で変わる文字 - 異体字と Unicode IVS」雑感

<p><a class="keyword" href="http://d.hatena.ne.jp/keyword/Ubuntu">Ubuntu</a> で <a class="keyword" href="http://d.hatena.ne.jp/keyword/FontForge">FontForge</a> をぼちぼち使うので、自分は Unity のランチャー<a href="#f-2526fd8e" name="fn-2526fd8e" title="画面左端にある、アプリケーションのショートカットアイコンが並んでいるあれ。">*1</a>に <a class="keyword" href="http://d.hatena.ne.jp/keyword/FontForge">FontForge</a> のショートカットも登録している。フォントファイルをここにドラッグ&ドロップすれば、<a class="keyword" href="http://d.hatena.ne.jp/keyword/FontForge">FontForge</a> でそのファイルを開くことができる……と便利なのだが、なぜか <a class="keyword" href="http://d.hatena.ne.jp/keyword/FontForge">FontForge</a> のショートカットはそうはなっておらず、知らんぷりして「フォントを開く」ダイアログが出てくるだけになっている。</p><p><span itemscope itemtype="http://schema.org/Photograph"><a href="http://f.hatena.ne.jp/mashabow/20130112194313" class="hatena-fotolife" itemprop="url"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/m/mashabow/20130112/20130112194313.png" alt="f:id:mashabow:20130112194313p:image" title="f:id:mashabow:20130112194313p:image" class="hatena-fotolife" itemprop="image"></a></span></p><p>最近たびたびこのドラッグ&ドロップをやってしまって残念な気持ちになっていたので、これに対処する。ショートカットアイコンの実体は /usr/share/applications/<a class="keyword" href="http://d.hatena.ne.jp/keyword/fontforge">fontforge</a>.desktop なので、これを ~/.local/share/applications/<a href="#f-468e6fee" name="fn-468e6fee" title="なければ作成する。">*2</a> にコピーしていじればいいらしい。</p>

<pre>$ cd ~/.local/share/applications/
$ cp /usr/share/applications/<a class="keyword" href="http://d.hatena.ne.jp/keyword/fontforge">fontforge</a>.desktop .
</pre><p>コピーした <a class="keyword" href="http://d.hatena.ne.jp/keyword/fontforge">fontforge</a>.desktop をエディタで開いてみると、11行目が</p>

<pre>Exec=<a class="keyword" href="http://d.hatena.ne.jp/keyword/fontforge">fontforge</a>
</pre><p>となっているので、末尾に %F（ドロップされた全ファイルのパスに展開される）をつけて</p>

<pre>Exec=<a class="keyword" href="http://d.hatena.ne.jp/keyword/fontforge">fontforge</a> <strong>%F</strong>
</pre><p>として保存。</p>

<pre>$ chmod +x <a class="keyword" href="http://d.hatena.ne.jp/keyword/fontforge">fontforge</a>.desktop
</pre><p>とすると、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Nautilus">Nautilus</a> での表示が下のような <a class="keyword" href="http://d.hatena.ne.jp/keyword/FontForge">FontForge</a> のアイコンになる。</p><p><span itemscope itemtype="http://schema.org/Photograph"><a href="http://f.hatena.ne.jp/mashabow/20130112202229" class="hatena-fotolife" itemprop="url"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/m/mashabow/20130112/20130112202229.png" alt="f:id:mashabow:20130112202229p:image" title="f:id:mashabow:20130112202229p:image" class="hatena-fotolife" itemprop="image"></a></span></p><p>これをランチャーにドラッグ&ドロップして追加すれば完了<a href="#f-304fff98" name="fn-304fff98" title="もともと FontForge をランチャーに登録していた場合には、古い方のアイコンは右クリックして削除。">*3</a>。</p><p>新しくランチャーに登録したアイコンへフォントファイルをドラッグ&ドロップすれば、ちゃんと <a class="keyword" href="http://d.hatena.ne.jp/keyword/FontForge">FontForge</a> で開けるようになる。<a class="keyword" href="http://d.hatena.ne.jp/keyword/%CA%A3%BF%F4">複数</a>のファイルをまとめてドラッグ&ドロップしても、これまたちゃんとすべて開いてくれる。</p>
<div class="footnote">
<p class="footnote"><a href="#fn-2526fd8e" name="f-2526fd8e" class="footnote-number">*1</a><span class="footnote-delimiter">:</span><span class="footnote-text">画面左端にある、アプリケーションのショートカットアイコンが並んでいるあれ。</span></p>
<p class="footnote"><a href="#fn-468e6fee" name="f-468e6fee" class="footnote-number">*2</a><span class="footnote-delimiter">:</span><span class="footnote-text">なければ作成する。</span></p>
<p class="footnote"><a href="#fn-304fff98" name="f-304fff98" class="footnote-number">*3</a><span class="footnote-delimiter">:</span><span class="footnote-text">もともと <a class="keyword" href="http://d.hatena.ne.jp/keyword/FontForge">FontForge</a> をランチャーに登録していた場合には、古い方のアイコンは右クリックして削除。</span></p>
</div>

Ubuntu で FontForge をぼちぼち使うので、自分は Unity のランチャー*1に FontForge のショートカットも登録している。フォントファイルをここにドラッグ&ドロップすれば、FontForge でそのファイルを開くことができる……と便利なのだが、なぜか FontForge のショートカットはそうはなっておらず、知らんぷりして「フォントを開く」ダイアログが出てくるだけになっている。最近たびたびこのドラッグ&ドロップをやってしまって残念な気持ちになっていたので、これに対処する。ショートカットアイコンの実体は /usr/share/applications/fontforge.desktop なので、これを ~/.local/share/applications/*2 にコピーしていじればいいらしい。$ cd ~/.local/share/applications/$ cp /usr/share/applications/fontforge.desktop .コピーした fontforge.desktop をエディタで開いてみると、11行目がExec=fontforgeとなっているので、末尾に %F（ドロップされた全ファイルのパスに展開される）をつけてExec=fontforge %Fとして保存。$ chmod +x fontforge.desktopとすると、Nautilus での表示が下のような FontForge のアイコンになる。これをランチャーにドラッグ&ドロップして追加すれば完了*3。新しくランチャーに登録したアイコンへフォントファイルをドラッグ&ドロップすれば、ちゃんと FontForge で開けるようになる。複数のファイルをまとめてドラッグ&ドロップしても、これまたちゃんとすべて開いてくれる。*1:画面左端にある、アプリケーションのショートカットアイコンが並んでいるあれ。*2:なければ作成する。*3:もともと FontForge をランチャーに登録していた場合には、古い方のアイコンは右クリックして削除。

フォントファイルをFontForgeのアイコンにドラッグ&ドロップして開きたい

<p>米 O'Reilly のアカウントを作って手持ちの紙本（同社から出ている英語版に限る）を登録すると、その<a class="keyword" href="http://d.hatena.ne.jp/keyword/%C5%C5%BB%D2%BD%F1%C0%D2">電子書籍</a>版が$4.99/冊で買えるらしい。自宅には CJKV Information Processing（第2版）と Fonts & Encodings があり、どちらもいろいろと役に立っているが、さすがにこれを持ち運ぼうと思うとつらい。</p><p><span itemscope itemtype="http://schema.org/Photograph"><a href="http://f.hatena.ne.jp/mashabow/20121219014418" class="hatena-fotolife" itemprop="url"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/m/mashabow/20121219/20121219014418.jpg" alt="f:id:mashabow:20121219014418j:image:w500" title="f:id:mashabow:20121219014418j:image:w500" class="hatena-fotolife" style="width:500px" itemprop="image"></a></span></p><p>というわけで<a class="keyword" href="http://d.hatena.ne.jp/keyword/%C5%C5%BB%D2%BD%F1%C0%D2">電子書籍</a>版をさっそく買ってしまった。タイトルによっては eBub や mobi フォーマットも選択できるようだが、この2冊はPDF版のみ。残念ながら errata は反映されていない様子。</p>

<div class="section">
    <h4>余白の除去</h4>
    <p>このPDFは版面の上下左右に余白が大きく取られているため、これをそのまま<a class="keyword" href="http://d.hatena.ne.jp/keyword/%C5%C5%BB%D2%BD%F1%C0%D2">電子書籍</a>端末で読もうとしても読みづらい。ググってみたところ、PDF内部の CropBox の値を書き換えて余白を除去する方法があった。</p>

<ul>
<li><a href="http://sakanaya.kir.jp/ymnet/diary/d/20110330">&#x308F;&#x3044;&#x3048;&#x3080;&#x306D;&#x3063;&#x3068; - 2011/03/30</a></li>
</ul><p>このページの<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%AF%A5%EA%A5%D7%A5%C8">スクリプト</a>にすこし手を加え、次のようにしてみた。</p>
<pre class="code lang-perl" data-lang="perl" data-unlink><span class="synPreProc">#!/usr/bin/perl</span>
<span class="synComment"># crop_pdf.pl - PDFの余白を除去</span>

<span class="synStatement">use utf8</span>;
<span class="synStatement">use strict</span>;
<span class="synStatement">use warnings</span>;

<span class="synComment"># 余白除去を行わずにスキップするページ数</span>
<span class="synStatement">my</span> <span class="synIdentifier">$skip_page</span> = <span class="synConstant">2</span>;  <span class="synComment"># 先頭の2ページ（表紙と裏表紙）</span>

<span class="synStatement">die</span> <span class="synConstant">&quot;Usage: </span><span class="synIdentifier">$0</span><span class="synConstant"> file top right bottom left</span><span class="synSpecial">\n</span><span class="synConstant">&quot;</span> <span class="synStatement">unless</span> <span class="synIdentifier">@ARGV</span> == <span class="synConstant">5</span>;
<span class="synStatement">my</span> <span class="synIdentifier">$filename_in</span> = <span class="synIdentifier">$ARGV[</span><span class="synConstant">0</span><span class="synIdentifier">]</span>;

<span class="synComment"># CropBox に合わせて格納（left, bottom, right, top）</span>
<span class="synStatement">my</span> <span class="synIdentifier">@offset</span> = (<span class="synIdentifier">$ARGV[</span><span class="synConstant">4</span><span class="synIdentifier">]</span>, <span class="synIdentifier">$ARGV[</span><span class="synConstant">3</span><span class="synIdentifier">]</span>, -<span class="synIdentifier">$ARGV[</span><span class="synConstant">2</span><span class="synIdentifier">]</span>, -<span class="synIdentifier">$ARGV[</span><span class="synConstant">1</span><span class="synIdentifier">]</span>);

<span class="synStatement">open</span> <span class="synStatement">my</span> <span class="synIdentifier">$in</span>, <span class="synConstant">'&lt;'</span>, <span class="synIdentifier">$filename_in</span> <span class="synStatement">or</span> <span class="synStatement">die</span>;
(<span class="synStatement">my</span> <span class="synIdentifier">$filename_out</span> = <span class="synIdentifier">$filename_in</span>) =~ <span class="synStatement">s/</span><span class="synSpecial">(.*)(\.</span><span class="synConstant">pdf</span><span class="synSpecial">)</span><span class="synConstant">$</span><span class="synStatement">/</span><span class="synIdentifier">$1</span><span class="synConstant">-cropped</span><span class="synIdentifier">$2</span><span class="synStatement">/</span>;
<span class="synStatement">open</span> <span class="synStatement">my</span> <span class="synIdentifier">$out</span>, <span class="synConstant">'&gt;'</span>, <span class="synIdentifier">$filename_out</span> <span class="synStatement">or</span> <span class="synStatement">die</span>;

<span class="synStatement">binmode</span> <span class="synIdentifier">$in</span>;
<span class="synStatement">binmode</span> <span class="synIdentifier">$out</span>;

<span class="synStatement">my</span> <span class="synIdentifier">$page</span> = <span class="synConstant">0</span>;
<span class="synStatement">while</span> (&lt;<span class="synIdentifier">$in</span>&gt;) {
    <span class="synStatement">s/</span><span class="synSpecial">(\/</span><span class="synConstant">CropBox</span><span class="synSpecial">\s*\[\s*(</span><span class="synConstant">[^</span><span class="synSpecial">\[</span><span class="synConstant">]</span><span class="synSpecial">+)\])</span><span class="synStatement">/</span><span class="synConstant">crop(</span><span class="synIdentifier">$1</span><span class="synConstant">, </span><span class="synIdentifier">$2</span><span class="synConstant">)</span><span class="synStatement">/eg</span>;
    <span class="synStatement">print</span> <span class="synIdentifier">$out</span> <span class="synIdentifier">$_</span>;
}

<span class="synStatement">sub </span><span class="synIdentifier">crop </span>{
    <span class="synIdentifier">$page</span>++;
    <span class="synStatement">return</span> <span class="synIdentifier">$_[</span><span class="synConstant">0</span><span class="synIdentifier">]</span> <span class="synStatement">if</span> <span class="synIdentifier">$page</span> &lt;= <span class="synIdentifier">$skip_page</span>;

    <span class="synStatement">my</span> <span class="synIdentifier">@offset</span> = <span class="synIdentifier">@offset</span>;
    <span class="synStatement">my</span> <span class="synIdentifier">@pos</span> = <span class="synStatement">map{int</span> <span class="synIdentifier">$_</span> + <span class="synStatement">shift</span> <span class="synIdentifier">@offset</span><span class="synStatement">}</span> <span class="synStatement">split</span> <span class="synStatement">/</span><span class="synSpecial">\s+</span><span class="synStatement">/</span>, <span class="synIdentifier">$_[</span><span class="synConstant">1</span><span class="synIdentifier">]</span>;

    <span class="synStatement">my</span> <span class="synIdentifier">$crop</span> = <span class="synStatement">sprintf</span> <span class="synConstant">'/CropBox[%d %d %d %d]'</span>, <span class="synIdentifier">@pos</span>;

    <span class="synStatement">my</span> <span class="synIdentifier">$blank</span> = <span class="synStatement">length</span>(<span class="synIdentifier">$_[</span><span class="synConstant">0</span><span class="synIdentifier">]</span>) - <span class="synStatement">length</span> <span class="synIdentifier">$crop</span>;
    <span class="synStatement">warn</span> <span class="synIdentifier">$_[</span><span class="synConstant">0</span><span class="synIdentifier">]</span> <span class="synStatement">and</span> <span class="synStatement">return</span> <span class="synIdentifier">$_[</span><span class="synConstant">0</span><span class="synIdentifier">]</span> <span class="synStatement">if</span> <span class="synIdentifier">$blank</span> &lt; <span class="synConstant">0</span>;

    <span class="synStatement">return</span> <span class="synIdentifier">$crop</span>.(<span class="synConstant">' '</span> x <span class="synIdentifier">$blank</span>);
}
</pre><p>これを</p>

<pre>$ <a class="keyword" href="http://d.hatena.ne.jp/keyword/perl">perl</a> crop_pdf.pl Fonts_and_Encodings.pdf 70 110 140 95
</pre><p>などとして実行すれば、余白が除去されたPDFファイル Fonts_and_Encodings-cropped.pdf が生成される。なお、余白除去量の指定順序は、自分でわかりやすいように上から時計回り（<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>と同じ）とした。<a class="keyword" href="http://d.hatena.ne.jp/keyword/kobo%20glo">kobo glo</a> での閲覧を考えると、なるべく大きく表示させるために上下の余白をギリギリまで切り詰めたい。何度か試してみた結果、とりあえず以下のパラメータに落ち着いた。</p>

<ul>
<li>CJKV Information Processing: 40 50 30 50</li>
<li>Fonts & Encodings: 70 110 140 95<a href="#f-01a4e8e7" name="fn-01a4e8e7" title="一部のページで下が切れてしまうが、これで妥協。">*1</a></li>
</ul>
</div>
<div class="section">
    <h4>書名・著者名の追加</h4>
    <p>このPDFの<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%E1%A5%BF%A5%C7%A1%BC%A5%BF">メタデータ</a>には書名や著者名が入っていないため、<a class="keyword" href="http://d.hatena.ne.jp/keyword/kobo">kobo</a> では「untitled」「著者不明」などと表示されてしまう。今回は <a href="http://www.pdflabs.com/tools/pdftk-the-pdf-toolkit/">pdftk</a> でこれを編集してみた。</p>

<pre>$ pdftk orig.pdf dump_data_utf8 > metadata.txt
</pre><p>とすると、orig.pdf の書名・著者名・しおりなどの<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%E1%A5%BF%A5%C7%A1%BC%A5%BF">メタデータ</a>が metadata.txt に書き出される。これを編集し、例えば</p>

<pre>InfoKey: Title
InfoValue: CJKV Information Processing, 2nd Edition
InfoKey: Author
InfoValue: <a class="keyword" href="http://d.hatena.ne.jp/keyword/Ken%20Lunde">Ken Lunde</a>
（以下略）
</pre><p>のように書き換える（該当部分がなければ追加する）。あとは</p>

<pre>$ pdftk orig.pdf update_info_utf8 metadata.txt output new.pdf
</pre><p>とすれば、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%E1%A5%BF%A5%C7%A1%BC%A5%BF">メタデータ</a>だけが書き換わったPDFファイル new.pdf が生成される。</p>

</div>
<div class="section">
    <h4>まとめ</h4>
    <p>以上の余白除去と書名・著者名の追加あたりをやっておけば、一応はまずまず使えるようになる。もっとも、<a class="keyword" href="http://d.hatena.ne.jp/keyword/kobo">kobo</a> のPDF対応は、検索ができない・しおりの階層が無視される・操作性が悪いなど、不満な点も多々あるのが現状。</p><p>というわけで、みなさんもぜひ CJKV Information Processing と Fonts & Encodings のPDFを買って携帯しましょう！</p><p><div class="hatena-asin-detail"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/0596514476/msb2-22/"><img src="https://images-fe.ssl-images-amazon.com/images/I/51jJqVHlF%2BL._SL160_.jpg" class="hatena-asin-detail-image" alt="CJKV Information Processing: Chinese, Japanese, Korean, and Vietnamese Computing" title="CJKV Information Processing: Chinese, Japanese, Korean, and Vietnamese Computing"></a><div class="hatena-asin-detail-info"><p class="hatena-asin-detail-title"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/0596514476/msb2-22/">CJKV Information Processing: Chinese, Japanese, Korean, and Vietnamese Computing</a></p><ul><li><span class="hatena-asin-detail-label">作者:</span> <a class="keyword" href="http://d.hatena.ne.jp/keyword/Ken%20Lunde">Ken Lunde</a></li><li><span class="hatena-asin-detail-label">出版社/メーカー:</span> O'Reilly Media</li><li><span class="hatena-asin-detail-label">発売日:</span> 2009/01/08</li><li><span class="hatena-asin-detail-label">メディア:</span> ペーパーバック</li><li> <span class="hatena-asin-detail-label">クリック</span>: 6回</li><li><a href="http://d.hatena.ne.jp/asin/0596514476/msb2-22" target="_blank">この商品を含むブログ (11件) を見る</a></li></ul></div><div class="hatena-asin-detail-foot"></div></div><div class="hatena-asin-detail"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/0596102429/msb2-22/"><img src="https://images-fe.ssl-images-amazon.com/images/I/51HDrORdUsL._SL160_.jpg" class="hatena-asin-detail-image" alt="Fonts & Encodings: From Advanced Typography to Unicode and Everything in Between" title="Fonts & Encodings: From Advanced Typography to Unicode and Everything in Between"></a><div class="hatena-asin-detail-info"><p class="hatena-asin-detail-title"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/0596102429/msb2-22/">Fonts & Encodings: From Advanced Typography to Unicode and Everything in Between</a></p><ul><li><span class="hatena-asin-detail-label">作者:</span> Yannis Haralambous</li><li><span class="hatena-asin-detail-label">出版社/メーカー:</span> O'Reilly Media</li><li><span class="hatena-asin-detail-label">発売日:</span> 2007/10/06</li><li><span class="hatena-asin-detail-label">メディア:</span> ペーパーバック</li><li><span class="hatena-asin-detail-label">購入</span>: 3人 <span class="hatena-asin-detail-label">クリック</span>: 42回</li><li><a href="http://d.hatena.ne.jp/asin/0596102429/msb2-22" target="_blank">この商品を含むブログ (11件) を見る</a></li></ul></div><div class="hatena-asin-detail-foot"></div></div></p>

</div><div class="footnote">
<p class="footnote"><a href="#fn-01a4e8e7" name="f-01a4e8e7" class="footnote-number">*1</a><span class="footnote-delimiter">:</span><span class="footnote-text">一部のページで下が切れてしまうが、これで妥協。</span></p>
</div>

米 O'Reilly のアカウントを作って手持ちの紙本（同社から出ている英語版に限る）を登録すると、その電子書籍版が$4.99/冊で買えるらしい。自宅には CJKV Information Processing（第2版）と Fonts & Encodings があり、どちらもいろいろと役に立っているが、さすがにこれを持ち運ぼうと思うとつらい。というわけで電子書籍版をさっそく買ってしまった。タイトルによっては eBub や mobi フォーマットも選択できるようだが、この2冊はPDF版のみ。残念ながら errata は反映されていない様子。余白の除去このPDFは版面の上下左右に余白が大きく取られているため、これをそのまま電子書籍端末で読もうとしても読みづらい。ググってみたところ、PDF内部の CropBox の値を書き換えて余白を除去する方法があった。わいえむねっと - 2011/03/30このページのスクリプトにすこし手を加え、次のようにしてみた。#!/usr/bin/perl# crop_pdf.pl - PDFの余白を除去use utf8;use strict;use warnings;# 余白除去を行わずにスキップするページ数my $skip_page = 2;  # 先頭の2ページ（表紙と裏表紙）die "Usage: $0 file top right bottom left\n" unless @ARGV == 5;my $filename_in = $ARGV[0];# CropBox に合わせて格納（left, bottom, right, top）my @offset = ($ARGV[4], $ARGV[3], -$ARGV[2], -$ARGV[1]);open my $in, '<', $filename_in or die;(my $filename_out = $filename_in) =~ s/(.*)(\.pdf)$/$1-cropped$2/;open my $out, '>', $filename_out or die;binmode $in;binmode $out;my $page = 0;while (<$in>) {    s/(\/CropBox\s*\[\s*([^\[]+)\])/crop($1, $2)/eg;    print $out $_;}sub crop {    $page++;    return $_[0] if $page <= $skip_page;    my @offset = @offset;    my @pos = map{int $_ + shift @offset} split /\s+/, $_[1];    my $crop = sprintf '/CropBox[%d %d %d %d]', @pos;    my $blank = length($_[0]) - length $crop;    warn $_[0] and return $_[0] if $blank < 0;    return $crop.(' ' x $blank);}これを$ perl crop_pdf.pl Fonts_and_Encodings.pdf 70 110 140 95などとして実行すれば、余白が除去されたPDFファイル Fonts_and_Encodings-cropped.pdf が生成される。なお、余白除去量の指定順序は、自分でわかりやすいように上から時計回り（CSSと同じ）とした。kobo glo での閲覧を考えると、なるべく大きく表示させるために上下の余白をギリギリまで切り詰めたい。何度か試してみた結果、とりあえず以下のパラメータに落ち着いた。CJKV Information Processing: 40 50 30 50Fonts & Encodings: 70 110 140 95*1書名・著者名の追加このPDFのメタデータには書名や著者名が入っていないため、kobo では「untitled」「著者不明」などと表示されてしまう。今回は pdftk でこれを編集してみた。$ pdftk orig.pdf dump_data_utf8 > metadata.txtとすると、orig.pdf の書名・著者名・しおりなどのメタデータが metadata.txt に書き出される。これを編集し、例えばInfoKey: TitleInfoValue: CJKV Information Processing, 2nd EditionInfoKey: AuthorInfoValue: Ken Lunde（以下略）のように書き換える（該当部分がなければ追加する）。あとは$ pdftk orig.pdf update_info_utf8 metadata.txt output new.pdfとすれば、メタデータだけが書き換わったPDFファイル new.pdf が生成される。まとめ以上の余白除去と書名・著者名の追加あたりをやっておけば、一応はまずまず使えるようになる。もっとも、kobo のPDF対応は、検索ができない・しおりの階層が無視される・操作性が悪いなど、不満な点も多々あるのが現状。というわけで、みなさんもぜひ CJKV Information Processing と Fonts & Encodings のPDFを買って携帯しましょう！CJKV Information Processing: Chinese, Japanese, Korean, and Vietnamese Computing作者: Ken Lunde出版社/メーカー: O'Reilly Media発売日: 2009/01/08メディア: ペーパーバック クリック: 6回この商品を含むブログ (11件) を見るFonts & Encodings: From Advanced Typography to Unicode and Everything in Between作者: Yannis Haralambous出版社/メーカー: O'Reilly Media発売日: 2007/10/06メディア: ペーパーバック購入: 3人 クリック: 42回この商品を含むブログ (11件) を見る*1:一部のページで下が切れてしまうが、これで妥協。

米O'Reillyで買ったPDF本をkobo gloでも読めるように加工する

<p><a class="keyword" href="http://d.hatena.ne.jp/keyword/Twitter">Twitter</a> を見ていて、あーそういやそんなもんあったなーと思いだしたのですが、以前 svivs という<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C4%A1%BC%A5%EB">ツール</a>を作りました。</p>

<ul>
<li><a href="http://shiromoji.net/tool/svivs/">IVS&#xFF08;&#x7570;&#x4F53;&#x5B57;&#x30B7;&#x30FC;&#x30B1;&#x30F3;&#x30B9;&#xFF09;&#x5165;&#x529B;&#x30C4;&#x30FC;&#x30EB; svivs - &#x3057;&#x308D;&#x3082;&#x3058;&#x4F5C;&#x696D;&#x5BA4;</a></li>
</ul>
<div class="section">
    <h4>現状</h4>
    <p>当時は更新・拡張したい点などいくつかあったわけですが、結局のところ今まで放置状態になっています。理由としては、</p>

<ul>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/Ubuntu">Ubuntu</a> をメインで使うようになったが、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Adobe%20AIR">Adobe AIR</a> の開発・実行環境は <a class="keyword" href="http://d.hatena.ne.jp/keyword/Linux">Linux</a> に対応していない</li>
<li>当時はIVSをサポートするOS・ブラウザ・その他アプリケーションが少なかったため、多くの環境で比較的確実に利用できる <a class="keyword" href="http://d.hatena.ne.jp/keyword/Adobe%20AIR">Adobe AIR</a> を使っていたが、現在ではサポートが進んで問題にならなくなってきた</li>
<li>そもそも、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Adobe%20AIR">Adobe AIR</a> 自体が結局世間ではあまり使われていない気がする</li>
<li>めんど(ry</li>
</ul><p>といったあたりで、残念ながら今後も放置状態が続くかと思われます。また、svivs 内部で利用しているIVDのバージョンが古いこともあり、今後の svivs の利用は<strong>推奨しません</strong>。次項の作業によってIVDを更新することは可能ですが、このような現状を把握した上で、自己責任でお願いします。</p>

</div>
<div class="section">
    <h4>svivs で使われているIVDを更新するには</h4>
    <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/Unicode%20Consortium">Unicode Consortium</a> の公開するIVDは、これまで何回かアップデートが行われてきました。</p>

<ul>
<li><a href="http://www.unicode.org/ivd/">Ideographic Variation Database</a></li>
</ul><p>svivs は当時最新版であった2010-11-14版のIVDを利用していますが、その後 <a class="keyword" href="http://d.hatena.ne.jp/keyword/Adobe">Adobe</a>-Japan1 と Hanyo-Denshi の両方のコレクションにIVSが追加された、2012-03-02版が出ています。これに対応させたい場合には、以下の作業を行なう必要があります<a href="#f-4c4f26a9" name="fn-4c4f26a9" title="パスは Windows 7 64bit 環境での例。自分の環境に合わせて適宜読み替えてください。">*1</a>。</p>

<ol>
<li><a href="http://www.unicode.org/ivd/#versions">Versions of the IVD</a> のリンクから、最新版の IVD_Sequences.txt をダウンロードする</li>
<li>\Program Files (<a class="keyword" href="http://d.hatena.ne.jp/keyword/x86">x86</a>)\svivs\IVD_Sequences.txt を、ダウンロードした IVD_Sequences.txt で上書きする</li>
<li>\Users\{ユーザ名}\AppData\Roaming\net.shiromoji.Svivs\ivd.<a class="keyword" href="http://d.hatena.ne.jp/keyword/sqlite">sqlite</a> を削除する</li>
<li>svivs を起動する</li>
</ol><p><a class="keyword" href="http://d.hatena.ne.jp/keyword/Adobe">Adobe</a>-Japan1, Hanyo-Denshi 以外のコレクションが新設されるなどした場合には対応できませんので、ご注意ください。</p>

</div><div class="footnote">
<p class="footnote"><a href="#fn-4c4f26a9" name="f-4c4f26a9" class="footnote-number">*1</a><span class="footnote-delimiter">:</span><span class="footnote-text">パスは <a class="keyword" href="http://d.hatena.ne.jp/keyword/Windows%207">Windows 7</a> 64bit 環境での例。自分の環境に合わせて適宜読み替えてください。</span></p>
</div>

Twitter を見ていて、あーそういやそんなもんあったなーと思いだしたのですが、以前 svivs というツールを作りました。IVS（異体字シーケンス）入力ツール svivs - しろもじ作業室現状当時は更新・拡張したい点などいくつかあったわけですが、結局のところ今まで放置状態になっています。理由としては、Ubuntu をメインで使うようになったが、Adobe AIR の開発・実行環境は Linux に対応していない当時はIVSをサポートするOS・ブラウザ・その他アプリケーションが少なかったため、多くの環境で比較的確実に利用できる Adobe AIR を使っていたが、現在ではサポートが進んで問題にならなくなってきたそもそも、Adobe AIR 自体が結局世間ではあまり使われていない気がするめんど(ryといったあたりで、残念ながら今後も放置状態が続くかと思われます。また、svivs 内部で利用しているIVDのバージョンが古いこともあり、今後の svivs の利用は推奨しません。次項の作業によってIVDを更新することは可能ですが、このような現状を把握した上で、自己責任でお願いします。svivs で使われているIVDを更新するにはUnicode Consortium の公開するIVDは、これまで何回かアップデートが行われてきました。Ideographic Variation Databasesvivs は当時最新版であった2010-11-14版のIVDを利用していますが、その後 Adobe-Japan1 と Hanyo-Denshi の両方のコレクションにIVSが追加された、2012-03-02版が出ています。これに対応させたい場合には、以下の作業を行なう必要があります*1。Versions of the IVD のリンクから、最新版の IVD_Sequences.txt をダウンロードする\Program Files (x86)\svivs\IVD_Sequences.txt を、ダウンロードした IVD_Sequences.txt で上書きする\Users\{ユーザ名}\AppData\Roaming\net.shiromoji.Svivs\ivd.sqlite を削除するsvivs を起動するAdobe-Japan1, Hanyo-Denshi 以外のコレクションが新設されるなどした場合には対応できませんので、ご注意ください。*1:パスは Windows 7 64bit 環境での例。自分の環境に合わせて適宜読み替えてください。

svivs の現状について

IVSやら何やら他の話題に飛びついていたので間が空いてしまったが、明朝かな書体制作のつづき。前回はアウトラインを作ったので、今回はここからフォントを生成したい。SVGの分割hiragana_1.svgまず、これがアウトラインのファイル。Inkscape で作成し、SVGとして保存した。アウトラインは outline という名前のレイヤーの中に作っている。仮想ボディのサイズは100pxとした。これをグリフごとに分割し、1文字1ファイルにする。今回は（も？）Perl で簡単なスクリプトを書き、これを利用した。単純なものなので、path 要素以外の要素（グループも含む）に対応していないなどいろいろと制限はある。また XML::Simple を利用しているので、実行するには XML::Simple のインストールが必要。split_svg.pl#!/usr/bin/perl## SVGをグリフごとに分割# usage: perl split_svg.pl svg_sheet.svg list.txtuse strict;use warnings;use autodie;use utf8;use 5.010;binmode STDOUT, ":utf8";use constant OUT_DIR => "glyphs";use constant PIXELS_PER_EM =>  100;use constant UNITS_PER_EM  => 1000;use XML::Simple;my ($svg_file, $list_file) = @ARGV;# SVG 読み込みmy $svg = XMLin($svg_file, forcearray => 1, keyattr => []);# 行数・列数を求めるmy $row_max = int ($svg->{height} / PIXELS_PER_EM) - 1;my $col_max = int ($svg->{width} / PIXELS_PER_EM) - 1;# outline レイヤーを探すmy $groups = $svg->{g};my $group_outline;foreach my $group (@$groups) {  if ($group->{'inkscape:label'} eq "outline") {    $group_outline = $group;    last;  }}die "outlineレイヤーが存在しません" unless defined $group_outline;# 変換行列を求めるmy $transform = $group_outline->{transform};my ($a, $b, $c, $d, $e, $f) = (1, 0, 0, 1, 0, 0);if (!defined $transform) {  # noop} elsif ($transform =~ m/translate$(?<tx>-?\d+(.\d+)?(e-?\d+)?),(?<ty>-?\d+(.\d+)?(e-?\d+)?)$/) {  $e = $+{tx};  $f = $+{ty};} elsif ($transform =~ m/matrix$(?<a>-?\d+(.\d+)?(e-?\d+)?),(?<b>-?\d+(.\d+)?(e-?\d+)?)$,(?<c>-?\d+(.\d+)?(e-?\d+)?),(?<d>-?\d+(.\d+)?(e-?\d+)?),(?<e>-?\d+(.\d+)?(e-?\d+)?),(?<f>-?\d+(.\d+)?(e-?\d+)?)/) {  $a = $+{a};  $c = $+{c};  $e = $+{e};  $b = $+{b};  $d = $+{d};  $f = $+{f};} else {  die "未対応のtransformです: $transform"}# グリフごとに path を格納する変数my @glyphs = ();foreach my $row (0 .. $row_max) {  foreach my $col (0 .. $col_max) {    $glyphs[$row][$col] = [];  }}# @glyphs にパスを格納my $paths = $group_outline->{path};foreach my $path (@$paths) {  my @data_args = split /\s+/, $path->{d};  my $new_data = "";  my ($col, $row);  my $is_moveto_point = 1;  foreach my $data_arg (@data_args) {    if ($data_arg =~ m/(?<x>-?\d+(.\d+)?),(?<y>-?\d+(.\d+)?)/) {      my $x = $+{x};      my $y = $+{y};      if ($is_moveto_point) {        $x = $a * $x + $c * $y + $e;        $y = $b * $x + $d * $y + $f;        $col = int ($x / PIXELS_PER_EM);        $row = int ($y / PIXELS_PER_EM);        $x %= PIXELS_PER_EM;        $y %= PIXELS_PER_EM;        $is_moveto_point = 0;      }      $x *= UNITS_PER_EM / PIXELS_PER_EM;      $y *= UNITS_PER_EM / PIXELS_PER_EM;      $data_arg = "$x,$y"    }    $new_data .= "$data_arg ";  }   next if ($col < 0 || $col_max < $col || $row < 0 || $row_max < $row);  $path->{d} = $new_data;  push @{$glyphs[$row][$col]}, $path;}# リスト読み込みmy @glyphname_list = ();open my $fh_list, '<:utf8', $list_file;while (my $line = <$fh_list>) {  chomp $line;  my @list = map { sprintf "u%x", (unpack "U*", $_) } split / +/, $line;  push @glyphname_list, \@list;}close $fh_list;# 各グリフの SVG を生成mkdir OUT_DIR if !-d OUT_DIR;foreach my $row (0 .. $row_max) {  foreach my $col (0 .. $col_max) {    my $svg;    $svg->{'xmlns:sodipodi'} = "http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd";    $svg->{'xmlns:inkscape'} = "http://www.inkscape.org/namespaces/inkscape";    $svg->{width} = UNITS_PER_EM;    $svg->{height} = UNITS_PER_EM;    $svg->{path} = $glyphs[$row][$col];    my $svg_string = '<?xml version="1.0" encoding="UTF-8"?>';    $svg_string .= "\n" . XMLout($svg, RootName => "svg");    my $glyphname = $glyphname_list[$row][$col];    next if (!defined $glyphname || $glyphname eq "u3000"); # u3000：全角スペース    open my $fh_out, '>', OUT_DIR . "/$glyphname.svg";    print $fh_out $svg_string;    close $fh_out;  }}exit 0;SVGのどのマスがどのグリフか、割り当て表も用意しておく。hiragana_list.txtあ い う え おか き く け こさ し す せ そた ち つ て とな に ぬ ね のは ひ ふ へ ほま み む め もや 　 ゆ 　 よら り る れ ろわ ゐ ん ゑ をこれを例えば> perl split_svg.pl hiragana_1.svg hiragana_list.txtとして実行すれば、glyphs ディレクトリに一字一字のSVGが生成される。FontForge でフォント化そして、このバラしたSVGファイルを FontForge に取り込み、フォントを生成する。FontForge ではSVGの1pxがフォントの1ユニットに相当する。また、OpenType の標準は1000ユニット/emなので、インポート元のSVGを1000×1000pxにしておくとちょうど良い。今回は、split_svg.pl でバラすときにSVGのサイズを1000×1000pxへ変換しているので、あとはそのままインポートするだけでよい。generate.pe#!/usr/bin/fontforge -scriptif ($argc != 2)  Print("usage: fontforge -script " + $0 + " [version]")  Quit()endif_version      = $1_fontfilename = "zeromin_" + _version + ".otf"_importfiles  = "glyphs/u*.svg"New()# .notdef作成Select(0x0000)SetWidth(1000)SetGlyphName(".notdef")# エンコードにUnicodeを指定Reencode("unicode")# SVGをすべてインポートImport(_importfiles, 0)# 自動ヒントづけOFFSelectAll()DontAutoHint()# パスの統合RemoveOverlap()# 整数値に丸めるRoundToInt()# 半角スペース作成Select(0u0020)SetWidth(500)# 全角スペース作成Select(0u3000)SetWidth(1000)# フォント情報設定SetFontNames("ZeroMin",\             "ZeroMin",\             "ZeroMin",\             "Regular",\             "© 2012 mashabow",\             _version) SetOS2Value("WinAscent", 880)SetOS2Value("WinDescent", 120)SetOS2Value("HHeadAscent", 880)SetOS2Value("HHeadDescent", -120)# OTF生成Generate(_fontfilename)Print("generated: "+ _fontfilename)Close()Quit()このスクリプトを FontForge で動かせば*1、とりあえずはフォントが生成される。最初の明朝体ということで「ZeroMin」と仮に名付けてみた。試し打ち出来上がったフォントをインストールして、さっそく試し打ち。sample_0.100.pdfんー。初めてにしてはまずまずなような気もしないでもないけど、やっぱり字面の大きさや寄り引き、太さなんかのバラつきが目立つ。実用にはちょっと堪えない。というわけで、まだまだ先は長そう。*1:unofficial fontforge-cygwin でのスクリプトの動かし方はこの記事を参照。

アウトラインのSVGからフォントを生成 #かな書いてみる

<p><a href="http://d.hatena.ne.jp/mashabow/20111222/1324570126">&#x6628;&#x5E74;12&#x6708;&#x306B;&#x5C0F;&#x6797;&#x3055;&#x3093;&#x306E;&#x8B1B;&#x6F14;&#x3092;&#x805E;&#x3044;&#x305F;</a>とき、<a class="keyword" href="http://d.hatena.ne.jp/keyword/JIS%20X%200213">JIS X 0213</a> が近々改正されるというようなことをおっしゃっていた。そんなことはほとんど忘れていたのだが、</p>

    <blockquote cite="http://toro.2ch.net/test/read.cgi/tech/1306595564/">
        <p><b>584 デフォルトの名無しさん 2012/03/11(日) 13:26:15.37</b><br />
　そういや結局0213って改正するの？ <a class="keyword" href="http://d.hatena.ne.jp/keyword/%BE%EF%CD%D1%B4%C1%BB%FA">常用漢字</a>の関係で <br />
 <br />
<b>588 デフォルトの名無しさん 2012/03/11(日) 16:02:37.18</b><br />
　JISCのサイト言ったらいつのまにか改正されててワロタ<br>　誰も気づかなかったのか…</p>

        <cite><a href="http://toro.2ch.net/test/read.cgi/tech/1306595564/">&#x6587;&#x5B57;&#x30B3;&#x30FC;&#x30C9;&#x7DCF;&#x5408;&#x30B9;&#x30EC; part7</a></cite>
    </blockquote>
<p>な、なんだってー！(AAry</p><p><a href="http://www.jisc.go.jp/app/JPS/JPSO0020.html">JISC&#x306E;&#x30B5;&#x30A4;&#x30C8;</a>で調べてみると、たしかに2012年2月20日付で <a class="keyword" href="http://d.hatena.ne.jp/keyword/JIS%20X%200208">JIS X 0208</a> と <a class="keyword" href="http://d.hatena.ne.jp/keyword/JIS%20X%200213">JIS X 0213</a> が改正され、<a class="keyword" href="http://d.hatena.ne.jp/keyword/JIS%20X%200208">JIS X 0208</a>:2012 と <a class="keyword" href="http://d.hatena.ne.jp/keyword/JIS%20X%200213">JIS X 0213</a>:2012 になっている。それぞれ第5次規格、第3次規格にあたる。どちらも追補の形で出されており、PDFでは後ろ2ファイルが改正分になっている。</p><p>改正点はざっとこんな感じ。</p>

<ul>
<li>6.6.2「字体の表現としての字形」において、旧<a class="keyword" href="http://d.hatena.ne.jp/keyword/%BE%EF%CD%D1%B4%C1%BB%FA%C9%BD">常用漢字表</a>「（付）字体についての解説 第1 <a class="keyword" href="http://d.hatena.ne.jp/keyword/%CC%C0%C4%AB%C2%CE">明朝体</a>活字のデザインについて」から引用していた「例」を削除し、代わりに新<a class="keyword" href="http://d.hatena.ne.jp/keyword/%BE%EF%CD%D1%B4%C1%BB%FA%C9%BD">常用漢字表</a>から引用。</li>
<li>附属書6（参考）「漢字の分類及び配列」の（旧）常用音訓を示す「[常]」を削除。（0208のみ）</li>
<li>附属書12（参考）「この規格と<a class="keyword" href="http://d.hatena.ne.jp/keyword/%BE%EF%CD%D1%B4%C1%BB%FA%C9%BD">常用漢字表</a>との対応」を追加。区点位置・例示字体・音訓を示す。</li>
</ul><p>というわけで、2010年11月30日の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%BE%EF%CD%D1%B4%C1%BB%FA%C9%BD">常用漢字表</a>改定に合わせた小さな改正になっている。規格の内容自体に関しては、実質的な変更はない。</p>


昨年12月に小林さんの講演を聞いたとき、JIS X 0213 が近々改正されるというようなことをおっしゃっていた。そんなことはほとんど忘れていたのだが、584 デフォルトの名無しさん 2012/03/11(日) 13:26:15.37常用漢字の関係で 588 デフォルトの名無しさん 2012/03/11(日) 16:02:37.18　誰も気づかなかったのか…文字コード総合スレ part7    な、なんだってー！(AAryJISCのサイトで調べてみると、たしかに2012年2月20日付で JIS X 0208 と JIS X 0213 が改正され、JIS X 0208:2012 と JIS X 0213:2012 になっている。それぞれ第5次規格、第3次規格にあたる。どちらも追補の形で出されており、PDFでは後ろ2ファイルが改正分になっている。改正点はざっとこんな感じ。6.6.2「字体の表現としての字形」において、旧常用漢字表「（付）字体についての解説 第1 明朝体活字のデザインについて」から引用していた「例」を削除し、代わりに新常用漢字表から引用。附属書6（参考）「漢字の分類及び配列」の（旧）常用音訓を示す「[常]」を削除。（0208のみ）附属書12（参考）「この規格と常用漢字表との対応」を追加。区点位置・例示字体・音訓を示す。というわけで、2010年11月30日の常用漢字表改定に合わせた小さな改正になっている。規格の内容自体に関しては、実質的な変更はない。

JIS X 0208 と JIS X 0213 が改正されていた件

<p>ブラウザ上で<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B0%DB%C2%CE%BB%FA">異体字</a>を表示するには、2つの方法がある。<a href="http://ja.wikipedia.org/wiki/%E7%95%B0%E4%BD%93%E5%AD%97%E3%82%BB%E3%83%AC%E3%82%AF%E3%82%BF">&#x7570;&#x4F53;&#x5B57;&#x30BB;&#x30EC;&#x30AF;&#x30BF;</a>を使ってIVSで<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B0%DB%C2%CE%BB%FA">異体字</a>を表現する方法と、CSS3の font-feature-settings プロパティを使って OpenType feature tag によるグリフ置換をする方法だ。今回、<a href="http://shiromoji.net/font/HanaMinOT/">&#x82B1;&#x5712;&#x660E;&#x671D;OT</a>を Web フォントとして利用し、この2つの方法で<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B0%DB%C2%CE%BB%FA">異体字</a>の表示テストを行った。</p>

<div class="section">
    <h4>方法の具体的な解説</h4>
    
<div class="section">
    <h5>IVSによる方法</h5>
    <p>IVS（Ideographic Variation Sequence）は親字（基底文字）にVS（Variation Selector; U+E0100&#8211;U+E01EF）をつけて<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B0%DB%C2%CE%BB%FA">異体字</a>を表現する。詳しくは下の <a class="keyword" href="http://d.hatena.ne.jp/keyword/Wikipedia">Wikipedia</a> の記事などを参照。</p>

<ul>
<li><a href="http://ja.wikipedia.org/wiki/%E7%95%B0%E4%BD%93%E5%AD%97%E3%82%BB%E3%83%AC%E3%82%AF%E3%82%BF">&#x7570;&#x4F53;&#x5B57;&#x30BB;&#x30EC;&#x30AF;&#x30BF; - Wikipedia</a></li>
</ul><p>この方法で表現される<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B0%DB%C2%CE%BB%FA">異体字</a>は、基底文字の包摂範囲内に含まれることになっている。プレーンテキストとして扱えるので、HTMLで表示したければそのままIVS（＝基底文字＋VS）を書けばよい。通常の文字と同様、数値<a class="keyword" href="http://d.hatena.ne.jp/keyword/%CA%B8%BB%FA%BB%B2%BE%C8">文字参照</a>を使って書くこともできる。フォントやOS、アプリケーションが対応していない場合には、通常の基底文字のグリフが単に表示される（ことが望まれるが、VSが豆腐などで表示されてしまうことが多い）。</p><p>例えばHTMLで</p>
<pre class="code lang-html" data-lang="html" data-unlink>葛　葛<span class="synSpecial">&amp;#xe0100;</span>　葛<span class="synSpecial">&amp;#xe0101;</span>
</pre><p>と書けば、</p>

<pre>葛　葛&#xe0100;　葛&#xe0101;
</pre><p>のように表示される。</p>

</div>
<div class="section">
    <h5>OpenType feature tag による方法</h5>
    <p><a href="http://www.microsoft.com/typography/otspec/featurelist.htm">OpenType &#x306B;&#x306F;&#x3044;&#x308D;&#x3044;&#x308D;&#x306A;&#x30BF;&#x30B0;&#x304C;&#x5B9A;&#x7FA9;&#x3055;&#x308C;&#x3066;&#x3044;&#x308B;</a>が、漢字に関係するタグは expt, hojo, jp78, jp83, jp90, nlck, trad, aalt などである。あるグリフから別のグリフへ、一対一や一対多で置換できる。<a class="keyword" href="http://d.hatena.ne.jp/keyword/Mac%20OS%20X">Mac OS X</a> や <a class="keyword" href="http://d.hatena.ne.jp/keyword/InDesign">InDesign</a>、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Illustrator">Illustrator</a> などでは以前から使われているが、それ以外の環境ではでは対応が進んでいないため、あまり使われていない。圧→壓 のように、包摂範囲外のグリフへの置換も定義されている。</p><p>プレーンテキストでは扱えないため、HTMLではCSS3の <a href="http://dev.w3.org/csswg/css3-fonts/#font-feature-settings-prop">font-feature-settings</a> プロパティを利用してタグを指定する。これはまだドラフト段階なので、実際にはベンダー接頭辞をつけて利用することになる。</p>

<ul>
<li><a href="https://developer.mozilla.org/en/CSS/-moz-font-feature-settings">font-feature-settings - MDN</a></li>
<li><a href="http://blogs.msdn.com/b/ie_ja/archive/2012/01/17/css.aspx">CSS &#x30B3;&#x30FC;&#x30CA;&#x30FC;: &#x30D5;&#x30A9;&#x30F3;&#x30C8;&#x306E;&#x5168;&#x8981;&#x7D20;&#x3092;&#x4F7F;&#x7528;&#x3059;&#x308B; - IEBlog &#x65E5;&#x672C;&#x8A9E;</a></li>
<li><a href="http://maniac-chef.blogspot.com/2011/10/opentype-features-support-on-chrome.html">Maniac Chef: OpenType features support on Chrome</a></li>
</ul><p>例えば、jp90 タグを有効にするためには次のように指定する。</p>
<pre class="code lang-css" data-lang="css" data-unlink>hoge <span class="synIdentifier">{</span>
  <span class="synType">font</span>-feature-settings:         <span class="synConstant">&quot;jp90&quot;</span> <span class="synConstant">1</span>;
  -moz-<span class="synType">font</span>-feature-settings:    <span class="synConstant">&quot;jp90=1&quot;</span>;
  -ms-<span class="synType">font</span>-feature-settings:     <span class="synConstant">&quot;jp90&quot;</span> <span class="synConstant">1</span>;
  -webkit-<span class="synType">font</span>-feature-settings: <span class="synConstant">&quot;jp90&quot;</span> <span class="synConstant">1</span>;
<span class="synIdentifier">}</span>
</pre><p>aalt のような一対多の置換を含むタグにおいて、n 番目のグリフに置換したい場合には、上の 1 の部分に n を指定する。</p>
<ins datetime="2013-05-04T12:57:44+09:00"><p>2013-05-03追記：この記事を書いた時点では -moz-font-feature-settings だけ指定方法が異なっていた（"jp90=1"）が、現在では他と同じ形式（"jp90" 1）に変更されている。</p>
</ins>
</div>
</div>
<div class="section">
    <h4>表示のテスト</h4>
    
<ul>
<li><a href="http://shiromoji.net/font/HanaMinOT/webfonttest/">&#x82B1;&#x5712;&#x660E;&#x671D;OT&#xFF0B;Web &#x30D5;&#x30A9;&#x30F3;&#x30C8;&#x306B;&#x3088;&#x308B; OpenType feature tag &#x3068;IVS&#x306E;&#x8868;&#x793A;&#x30C6;&#x30B9;&#x30C8; - &#x3057;&#x308D;&#x3082;&#x3058;&#x4F5C;&#x696D;&#x5BA4;</a></li>
</ul><p><a href="http://shiromoji.net/font/HanaMinOT/">&#x82B1;&#x5712;&#x660E;&#x671D;OT</a> ver. 0.510 を Web フォントとして利用し、表示テストを行った。フォントフォーマットはOTFとWOFF（Web Open Font Format）。OTFからWOFFへの変換については、武蔵システムの<a href="http://musashi.or.tv/woffconv.htm">WOFF&#x30B3;&#x30F3;&#x30D0;&#x30FC;&#x30BF;</a>を利用した。</p><p>表示テストは <a class="keyword" href="http://d.hatena.ne.jp/keyword/Firefox">Firefox</a>, <a class="keyword" href="http://d.hatena.ne.jp/keyword/Safari">Safari</a>, <a class="keyword" href="http://d.hatena.ne.jp/keyword/Chrome">Chrome</a>, <a class="keyword" href="http://d.hatena.ne.jp/keyword/Opera">Opera</a>, IE8 の各ブラウザで行い、すべて最新版を用いた。OSは <a class="keyword" href="http://d.hatena.ne.jp/keyword/Windows%20XP">Windows XP</a> SP3（そろそろ潮時ですかね…）。参考までに先日インストールした <a class="keyword" href="http://d.hatena.ne.jp/keyword/Windows%208">Windows 8</a> Comsumer Preview 上でもテストをしたが、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Opera">Opera</a> と<a class="keyword" href="http://d.hatena.ne.jp/keyword/IE">IE</a>以外では差が見られなかった。</p><p>下の画像は、最も対応状況が優れていた <a class="keyword" href="http://d.hatena.ne.jp/keyword/Firefox">Firefox</a> での表示例。</p><p><a class="hatena-fotolife" target="_blank" href="http://cdn-ak.f.st-hatena.com/images/fotolife/m/mashabow/20120308/20120308161106_original.png"><img class="hatena-fotolife" src="http://cdn-ak.f.st-hatena.com/images/fotolife/m/mashabow/20120308/20120308161106.png?1331190697" alt=""><br>▲ クリックで拡大</a><br />
</p>

</div>
<div class="section">
    <h4>結果一覧</h4>
    
<table>
    <tr>
    <th>ブラウザ</th>
    <th>OS</th>
    <th>OTF</th>
    <th>WOFF</th>
    <th>IVS</th>
    <th>tag</th>
    </tr>
    <tr>
    <td><a class="keyword" href="http://d.hatena.ne.jp/keyword/Firefox">Firefox</a> 9.0</td>
    <td>Win XP</td>
    <td>○</td>
    <td>○</td>
    <td>○</td>
    <td>○</td>
    </tr>
    <tr>
    <td><a class="keyword" href="http://d.hatena.ne.jp/keyword/Safari">Safari</a> 5.1</td>
    <td>Win XP</td>
    <td>○</td>
    <td>○</td>
    <td>×</td>
    <td>×</td>
    </tr>
    <tr>
    <td><a class="keyword" href="http://d.hatena.ne.jp/keyword/Chrome">Chrome</a> 17.0</td>
    <td>Win XP</td>
    <td>○</td>
    <td>○</td>
    <td>×</td>
    <td>×<sup>*</sup></td>
    </tr>
    <tr>
    <td><a class="keyword" href="http://d.hatena.ne.jp/keyword/Opera">Opera</a> 11.61</td>
    <td>Win XP</td>
    <td>△<sup>†</sup></td>
    <td>△<sup>†</sup></td>
    <td>×<sup>‡</sup></td>
    <td>×</td>
    </tr>
    <tr>
    <td><a class="keyword" href="http://d.hatena.ne.jp/keyword/IE">IE</a> 8.0</td>
    <td>Win XP</td>
    <td>×</td>
    <td>×</td>
    <td>×</td>
    <td>×</td>
    </tr>
    <tr>
    <td><a class="keyword" href="http://d.hatena.ne.jp/keyword/IE">IE</a> 10.0</td>
    <td>Win 8 CP</td>
    <td>○</td>
    <td>○</td>
    <td>○</td>
    <td>△<sup>§</sup></td>
    </tr>
</table>
<div class="section">
    <h5>OTF</h5>
    
<ul>
<li>○：OpenType フォーマットのフォントファイルを Web フォントとして利用できる。</li>
<li>×：対応しておらず、他のフォントで表示される。</li>
</ul>
</div>
<div class="section">
    <h5>WOFF</h5>
    
<ul>
<li>○：WOFFフォーマットのフォントファイルを Web フォントとして利用できる。</li>
<li>×：対応しておらず、他のフォントで表示される。</li>
</ul>
</div>
<div class="section">
    <h5>IVS</h5>
    
<ul>
<li>○：適切な<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B0%DB%C2%CE%BB%FA">異体字</a>グリフが選択されて表示される。</li>
<li>×：VSが豆腐や中黒、空白として表示されてしまう。</li>
</ul>
</div>
<div class="section">
    <h5>tag</h5>
    
<ul>
<li>○：OpenType feature tag が利用できる。</li>
<li>×：対応しておらず、無視される。</li>
</ul>
</div>
</div>
<div class="section">
    <h4>結果一覧の註</h4>
    
<div class="section">
    <h5>* <a class="keyword" href="http://d.hatena.ne.jp/keyword/Chrome">Chrome</a> における OpenType feature tag 対応</h5>
    <p><span itemscope itemtype="http://schema.org/Photograph"><a href="http://f.hatena.ne.jp/mashabow/20120308160703" class="hatena-fotolife" itemprop="url"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/m/mashabow/20120308/20120308160703.png" alt="f:id:mashabow:20120308160703p:image" title="f:id:mashabow:20120308160703p:image" class="hatena-fotolife" itemprop="image"></a></span></p><p>expt, hojo, jp78, jp83, jp90, nlck の各タグについては、指定するとデフォルトのフォントで描画されてしまうという不具合がある。trad, aalt については、無視される（これは対応していない場合に期待される動作）。expt, hojo, jp78, jp83, jp90, nlck はすべて一対一の置換である一方、trad, aalt には一対多の置換も含まれるという共通点がある。が、これが原因かどうかははっきりしない。</p>

</div>
<div class="section">
    <h5>† <a class="keyword" href="http://d.hatena.ne.jp/keyword/Opera">Opera</a> における OpenType/WOFF 対応</h5>
    <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/Opera">Opera</a> は <a href="http://dev.opera.com/articles/view/introducing-woff-web-open-font-format/">TrueType, OpenType, SVG&#x30D5;&#x30A9;&#x30F3;&#x30C8;, WOFF&#x306E;&#x5404;&#x5F62;&#x5F0F;&#x306B;&#x5BFE;&#x5FDC;&#x3057;&#x3066;&#x3044;&#x308B;&#x3068;&#x8B33;&#x3063;&#x3066;&#x3044;&#x308B;</a>が、花園明朝OTでは表示できなかった。<a href="http://musashi.or.tv/woffbrowser.htm">&#x6B66;&#x8535;&#x30B7;&#x30B9;&#x30C6;&#x30E0;&#x306E;&#x30B5;&#x30A4;&#x30C8;&#x306E;&#x60C5;&#x5831;</a>でも、和文 OpenType や、そこから変換したWOFFは×になっている。CFFアウトラインの和文フォントがダメなんだろうか。</p>

</div>
<div class="section">
    <h5>‡ <a class="keyword" href="http://d.hatena.ne.jp/keyword/Opera">Opera</a> におけるIVS対応</h5>
    <p>引用元が消えているが、<a href="http://ja.wikipedia.org/wiki/%E7%95%B0%E4%BD%93%E5%AD%97%E3%82%BB%E3%83%AC%E3%82%AF%E3%82%BF#cite_ref-59">Wikipedia &#x306B;&#x3088;&#x308C;&#x3070; Windows 7 &#x4E0A;&#x306E; Opera &#x3067;IVS&#x304C;&#x8868;&#x793A;&#x3067;&#x304D;&#x308B;</a>らしい。表には載せなかったが、今回 <a class="keyword" href="http://d.hatena.ne.jp/keyword/Windows%208">Windows 8</a> Comsumer Preview 上の <a class="keyword" href="http://d.hatena.ne.jp/keyword/Opera">Opera</a> で表示できることを確認した。</p>

</div>
<div class="section">
    <h5>§ IE10 における OpenType feature tag 対応</h5>
    <p>expt, hojo, jp78, jp83, jp90, nlck の各タグは正常に機能しグリフ置換が行われるが、trad, aalt については無視される。</p><p>また、IE10で花園明朝OTを表示させるとディセンダが大きく空いてしまうが、原因不明。</p>

</div>
</div>
<div class="section">
    <h4>というわけで</h4>
    <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/Firefox">Firefox</a> がかなりいい感じ。他のブラウザの実装がいまいちなこともあり、実際に「使える」かどうかは疑問だが、覚えておくと何かの役に立つ……かも……？</p>

</div>

ブラウザ上で異体字を表示するには、2つの方法がある。異体字セレクタを使ってIVSで異体字を表現する方法と、CSS3の font-feature-settings プロパティを使って OpenType feature tag によるグリフ置換をする方法だ。今回、花園明朝OTを Web フォントとして利用し、この2つの方法で異体字の表示テストを行った。方法の具体的な解説IVSによる方法IVS（Ideographic Variation Sequence）は親字（基底文字）にVS（Variation Selector; U+E0100–U+E01EF）をつけて異体字を表現する。詳しくは下の Wikipedia の記事などを参照。異体字セレクタ - Wikipediaこの方法で表現される異体字は、基底文字の包摂範囲内に含まれることになっている。プレーンテキストとして扱えるので、HTMLで表示したければそのままIVS（＝基底文字＋VS）を書けばよい。通常の文字と同様、数値文字参照を使って書くこともできる。フォントやOS、アプリケーションが対応していない場合には、通常の基底文字のグリフが単に表示される（ことが望まれるが、VSが豆腐などで表示されてしまうことが多い）。例えばHTMLで葛　葛&#xe0100;　葛&#xe0101;と書けば、葛　葛󠄀　葛󠄁のように表示される。OpenType feature tag による方法OpenType にはいろいろなタグが定義されているが、漢字に関係するタグは expt, hojo, jp78, jp83, jp90, nlck, trad, aalt などである。あるグリフから別のグリフへ、一対一や一対多で置換できる。Mac OS X や InDesign、Illustrator などでは以前から使われているが、それ以外の環境ではでは対応が進んでいないため、あまり使われていない。圧→壓 のように、包摂範囲外のグリフへの置換も定義されている。プレーンテキストでは扱えないため、HTMLではCSS3の font-feature-settings プロパティを利用してタグを指定する。これはまだドラフト段階なので、実際にはベンダー接頭辞をつけて利用することになる。font-feature-settings - MDNCSS コーナー: フォントの全要素を使用する - IEBlog 日本語Maniac Chef: OpenType features support on Chrome例えば、jp90 タグを有効にするためには次のように指定する。hoge {  font-feature-settings:         "jp90" 1;  -moz-font-feature-settings:    "jp90=1";  -ms-font-feature-settings:     "jp90" 1;  -webkit-font-feature-settings: "jp90" 1;}aalt のような一対多の置換を含むタグにおいて、n 番目のグリフに置換したい場合には、上の 1 の部分に n を指定する。2013-05-03追記：この記事を書いた時点では -moz-font-feature-settings だけ指定方法が異なっていた（"jp90=1"）が、現在では他と同じ形式（"jp90" 1）に変更されている。表示のテスト花園明朝OT＋Web フォントによる OpenType feature tag とIVSの表示テスト - しろもじ作業室花園明朝OT ver. 0.510 を Web フォントとして利用し、表示テストを行った。フォントフォーマットはOTFとWOFF（Web Open Font Format）。OTFからWOFFへの変換については、武蔵システムのWOFFコンバータを利用した。表示テストは Firefox, Safari, Chrome, Opera, IE8 の各ブラウザで行い、すべて最新版を用いた。OSは Windows XP SP3（そろそろ潮時ですかね…）。参考までに先日インストールした Windows 8 Comsumer Preview 上でもテストをしたが、Opera とIE以外では差が見られなかった。下の画像は、最も対応状況が優れていた Firefox での表示例。▲ クリックで拡大結果一覧ブラウザ    OS    OTF    WOFF    IVS    tag    Firefox 9.0    Win XP    ○    ○    ○    ○    Safari 5.1    Win XP    ○    ○    ×    ×    Chrome 17.0    Win XP    ○    ○    ×    ×*    Opera 11.61    Win XP    △†    △†    ×‡    ×    IE 8.0    Win XP    ×    ×    ×    ×    IE 10.0    Win 8 CP    ○    ○    ○    △§    OTF○：OpenType フォーマットのフォントファイルを Web フォントとして利用できる。×：対応しておらず、他のフォントで表示される。WOFF○：WOFFフォーマットのフォントファイルを Web フォントとして利用できる。×：対応しておらず、他のフォントで表示される。IVS○：適切な異体字グリフが選択されて表示される。×：VSが豆腐や中黒、空白として表示されてしまう。tag○：OpenType feature tag が利用できる。×：対応しておらず、無視される。結果一覧の註* Chrome における OpenType feature tag 対応expt, hojo, jp78, jp83, jp90, nlck の各タグについては、指定するとデフォルトのフォントで描画されてしまうという不具合がある。trad, aalt については、無視される（これは対応していない場合に期待される動作）。expt, hojo, jp78, jp83, jp90, nlck はすべて一対一の置換である一方、trad, aalt には一対多の置換も含まれるという共通点がある。が、これが原因かどうかははっきりしない。† Opera における OpenType/WOFF 対応Opera は TrueType, OpenType, SVGフォント, WOFFの各形式に対応していると謳っているが、花園明朝OTでは表示できなかった。武蔵システムのサイトの情報でも、和文 OpenType や、そこから変換したWOFFは×になっている。CFFアウトラインの和文フォントがダメなんだろうか。‡ Opera におけるIVS対応引用元が消えているが、Wikipedia によれば Windows 7 上の Opera でIVSが表示できるらしい。表には載せなかったが、今回 Windows 8 Comsumer Preview 上の Opera で表示できることを確認した。§ IE10 における OpenType feature tag 対応expt, hojo, jp78, jp83, jp90, nlck の各タグは正常に機能しグリフ置換が行われるが、trad, aalt については無視される。また、IE10で花園明朝OTを表示させるとディセンダが大きく空いてしまうが、原因不明。というわけでFirefox がかなりいい感じ。他のブラウザの実装がいまいちなこともあり、実際に「使える」かどうかは疑問だが、覚えておくと何かの役に立つ……かも……？

花園明朝OT＋Web フォントによるIVSと OpenType feature tag の表示テスト

<p><a class="keyword" href="http://d.hatena.ne.jp/keyword/Adobe">Adobe</a>-Japan1-6 準拠の漢字フォント・花園明朝OTを ver. 0.510 に更新。</p>

<ul>
<li><a href="http://shiromoji.net/font/HanaMinOT/">&#x82B1;&#x5712;&#x660E;&#x671D;OT - &#x3057;&#x308D;&#x3082;&#x3058;&#x4F5C;&#x696D;&#x5BA4;</a></li>
</ul><p>以下、主な変更点について解説。</p>

<div class="section">
    <h4>IVD 2012-03-02 版に対応</h4>
    <p>今月2日に<a href="http://www.unicode.org/ivd/">IVD&#xFF08;Ideographic Variation Database&#xFF09;</a>の最新版が公開され、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Adobe">Adobe</a>-Japan1 に32個、Hanyo-Denshi<a href="#f-75c27c15" name="fn-75c27c15" title="こちらは花園明朝OTには収録していない。">*1</a> に8,850個のIVSが追加された。この追加により、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Adobe">Adobe</a>-Japan1-6 に含まれる14,664個の漢字グリフすべてがIVSでアクセスできるようになった。花園明朝OTは今回これに対応。</p><p><a class="keyword" href="http://d.hatena.ne.jp/keyword/Adobe">Adobe</a>-Japan1 コレクションに追加されたIVSについては、以下のページに詳しい。</p>

<ul>
<li><a href="http://blogs.adobe.com/CCJKType/2012/03/new-ivd-version.html">IVD Version 2012-03-02 Released &laquo; CJK Type</a></li>
<li><a href="http://www.unicode.org/ivd/pri/pri183/">Ideographic Variation Database - PRI 183</a></li>
<li><a href="http://d.hatena.ne.jp/NAOI/20110623/1308817376">PRI 183&#x306B;&#x3064;&#x3044;&#x3066;&#x306E;&#x30E1;&#x30E2; - Mac OS X&#x306E;&#x6587;&#x5B57;&#x30B3;&#x30FC;&#x30C9;&#x554F;&#x984C;&#x306B;&#x95A2;&#x3059;&#x308B;&#x30E1;&#x30E2;</a></li>
</ul>
</div>
<div class="section">
    <h4>CMap を UniJIS2004-UTF32-H ver. 1.011 に更新</h4>
    <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%CA%B8%BB%FA%A5%B3%A1%BC%A5%C9">文字コード</a>とグリフ（CID）との対応表である CMap を、最新バージョンの1.011に更新した。1.010からの変更点は以下の通り。</p>

<ul>
<li>U+9FCC（&#40908;）→ CID+20156 の対応が追加された</li>
<li>U+2329, 232A（&#9001;, &#9002;）→ CID+682, 683 の対応が追加された</li>
</ul><p>花園明朝OTは漢字フォントなので、関係するのは前者のみ。U+9FCC（&#40908;）は1月31日リリースの <a href="http://www.unicode.org/versions/Unicode6.1.0/">Unicode 6.1.0</a> で追加された統合漢字。</p>

</div>
<div class="section">
    <h4>スペースのグリフを少し追加</h4>
    <p>CID+1（欧文スペース）, CID+3000（和文スペース）, CID+8720（CID+1 の vrt2 置換先グリフ）を追加した。CID+1, CID+8720 の文字幅はとりあえず半角として実装した。CID+8720 を追加した理由は次の項で。</p>

</div>
<div class="section">
    <h4><a class="keyword" href="http://d.hatena.ne.jp/keyword/Firefox">Firefox</a> において Web フォントに使用できない問題を解消</h4>
    <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/Firefox">Firefox</a> で花園明朝OTを Web フォントとして使おうとしても、ファイルのダウンロード自体は行われるものの花園明朝OTで描画されない問題があった。</p>

<ul>
<li><a href="http://d.hatena.ne.jp/mashabow/20110807/1312725162">&#x82B1;&#x5712;&#x660E;&#x671D;OT&#x304C; web font &#x3067;&#x4F7F;&#x3048;&#x306A;&#x3044;&#x3063;&#x307D;&#x3044; - &#x3057;&#x308D;&#x3082;&#x3058;&#x30E1;&#x30E2;&#x30E9;&#x30F3;&#x30C0;&#x30E0;</a></li>
</ul><p>これについて、上の記事のコメントでえむけいさんから次のような情報をいただいた（ありがとうございます）。</p>

    <blockquote cite="http://d.hatena.ne.jp/mashabow/20110807/1312725162#c1320299028">
        <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/Windows">Windows</a>では、CFFアウトラインの<a class="keyword" href="http://d.hatena.ne.jp/keyword/OpenType%A5%D5%A5%A9%A5%F3%A5%C8">OpenTypeフォント</a>のGSUBテーブルにvrt2 featureが定義されていないのにvhea/vmtxテーブルがあると、OSに不正なフォントして弾かれます。インストールすれば使えるようですが、Webフォントをロードするための<a class="keyword" href="http://d.hatena.ne.jp/keyword/API">API</a>はWebから任意のデータを受け取る可能性があって、フォント<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EC%A5%F3%A5%C0%A5%EA%A5%F3%A5%B0">レンダリング</a>エンジンの<a class="keyword" href="http://d.hatena.ne.jp/keyword/%C0%C8%BC%E5%C0%AD">脆弱性</a>も実際に何度か発見されているので、チェックが厳しくなっているようです。 <br />
縦書きグリフを追加するか、vhea/vmtxテーブルを削除してください。</p>

        <cite><a href="http://d.hatena.ne.jp/mashabow/20110807/1312725162#c1320299028">&#x82B1;&#x5712;&#x660E;&#x671D;OT&#x304C; web font &#x3067;&#x4F7F;&#x3048;&#x306A;&#x3044;&#x3063;&#x307D;&#x3044; - &#x3057;&#x308D;&#x3082;&#x3058;&#x30E1;&#x30E2;&#x30E9;&#x30F3;&#x30C0;&#x30E0;</a></cite>
    </blockquote>
<p>このアドバイスに従い、縦書きグリフ CID+8720 を追加して以下のように vrt2 feature を定義した。</p>

<pre>feature vrt2 {
  sub \1 by \8720;
} vrt2;
</pre><p>これにより、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Firefox">Firefox</a> での問題は解消されたようだ。縦書きグリフを追加するのではなく vhea/vmtx テーブルを削除する方法もあるが、これを試したところ <a class="keyword" href="http://d.hatena.ne.jp/keyword/Microsoft">Microsoft</a> Word で縦書きができなくなった（花園明朝OTを指定してもMS明朝で描画される）ので採らなかった。</p><p>なお、上の記事では「<a class="keyword" href="http://d.hatena.ne.jp/keyword/Chrome">Chrome</a> で試したら『エラー　このページの表示中に問題が発生しました』云々と出てページすら表示されなかった」と書いたが、こちらについては <a class="keyword" href="http://d.hatena.ne.jp/keyword/Chrome">Chrome</a> のアップデートの過程で解消されていた様子。</p>

</div><div class="footnote">
<p class="footnote"><a href="#fn-75c27c15" name="f-75c27c15" class="footnote-number">*1</a><span class="footnote-delimiter">:</span><span class="footnote-text">こちらは花園明朝OTには収録していない。</span></p>
</div>

Adobe-Japan1-6 準拠の漢字フォント・花園明朝OTを ver. 0.510 に更新。花園明朝OT - しろもじ作業室以下、主な変更点について解説。IVD 2012-03-02 版に対応今月2日にIVD（Ideographic Variation Database）の最新版が公開され、Adobe-Japan1 に32個、Hanyo-Denshi*1 に8,850個のIVSが追加された。この追加により、Adobe-Japan1-6 に含まれる14,664個の漢字グリフすべてがIVSでアクセスできるようになった。花園明朝OTは今回これに対応。Adobe-Japan1 コレクションに追加されたIVSについては、以下のページに詳しい。IVD Version 2012-03-02 Released « CJK TypeIdeographic Variation Database - PRI 183PRI 183についてのメモ - Mac OS Xの文字コード問題に関するメモCMap を UniJIS2004-UTF32-H ver. 1.011 に更新文字コードとグリフ（CID）との対応表である CMap を、最新バージョンの1.011に更新した。1.010からの変更点は以下の通り。U+9FCC（鿌）→ CID+20156 の対応が追加されたU+2329, 232A（〈, 〉）→ CID+682, 683 の対応が追加された花園明朝OTは漢字フォントなので、関係するのは前者のみ。U+9FCC（鿌）は1月31日リリースの Unicode 6.1.0 で追加された統合漢字。スペースのグリフを少し追加CID+1（欧文スペース）, CID+3000（和文スペース）, CID+8720（CID+1 の vrt2 置換先グリフ）を追加した。CID+1, CID+8720 の文字幅はとりあえず半角として実装した。CID+8720 を追加した理由は次の項で。Firefox において Web フォントに使用できない問題を解消Firefox で花園明朝OTを Web フォントとして使おうとしても、ファイルのダウンロード自体は行われるものの花園明朝OTで描画されない問題があった。花園明朝OTが web font で使えないっぽい - しろもじメモランダムこれについて、上の記事のコメントでえむけいさんから次のような情報をいただいた（ありがとうございます）。Windowsでは、CFFアウトラインのOpenTypeフォントのGSUBテーブルにvrt2 featureが定義されていないのにvhea/vmtxテーブルがあると、OSに不正なフォントして弾かれます。インストールすれば使えるようですが、WebフォントをロードするためのAPIはWebから任意のデータを受け取る可能性があって、フォントレンダリングエンジンの脆弱性も実際に何度か発見されているので、チェックが厳しくなっているようです。 花園明朝OTが web font で使えないっぽい - しろもじメモランダム    このアドバイスに従い、縦書きグリフ CID+8720 を追加して以下のように vrt2 feature を定義した。feature vrt2 {  sub \1 by \8720;} vrt2;これにより、Firefox での問題は解消されたようだ。縦書きグリフを追加するのではなく vhea/vmtx テーブルを削除する方法もあるが、これを試したところ Microsoft Word で縦書きができなくなった（花園明朝OTを指定してもMS明朝で描画される）ので採らなかった。なお、上の記事では「Chrome で試したら『エラー　このページの表示中に問題が発生しました』云々と出てページすら表示されなかった」と書いたが、こちらについては Chrome のアップデートの過程で解消されていた様子。*1:こちらは花園明朝OTには収録していない。

mashabow

GitHub の issue をまるっと複製する GitHub Action「Issue Duplicator」を自作した

LINE絵文字概観

Shopifyの埋め込みアプリにメニューをつける方法

OAuth の state パラメータに JWT を使ってステートレスにする

【Shopify】Liquid 上で「現在の日付から◯日後」を表現する方法

ゲスト購入時、Shopify は customer をどう扱っているのか

ESP8266 で温湿度を測って、AWS IoT Core + Amplify でグラフにしてみる

Shopify 埋め込みアプリのフォームを @shopify/react-form で作る

題字ペタペタができるまで

ブラウザからローカルフォントにアクセスする：Font Enumeration API と Font Table Access API

ベジエ曲線のなめらかさについて社内勉強会で語った

『[改訂新版] プログラマのための文字コード技術入門』を読んだ

type の話

フォントまわりのツールの探し方

タイププロジェクト株式会社を退職しました

Python パッケージとして再構成された AFDKO 2.7 がリリース

fontTools のペンを使ってグリフのアウトラインを取得する

TTXによるフォントのチラ見をちょっといい感じにする設定

OpenType の仕様策定の議論をのぞくには

二号明朝活字書体見本（明治26年）

同型類字集明朝体

同型類字集等線体

はてなブログに引っ越してきました

タイププロジェクト株式会社に入社しました

官報に使われた印刷局の康煕字典活字

「TTXによるフォントのぞき基礎」の資料【5/4更新：スライド公開】

TTXのインストール方法

5月3日にフォント関係の勉強会やります

PingMag復刊らしいのでアーカイブから文字関係の記事を10本ほど

「Windows 8 で変わる文字 - 異体字と Unicode IVS」雑感

フォントファイルをFontForgeのアイコンにドラッグ&ドロップして開きたい

米O'Reillyで買ったPDF本をkobo gloでも読めるように加工する

GitHub の issue をまるっと複製する GitHub Action「Issue Duplicator」を自作した

LINE絵文字概観

Shopifyの埋め込みアプリにメニューをつける方法

OAuth の state パラメータに JWT を使ってステートレスにする

【Shopify】Liquid 上で「現在の日付から◯日後」を表現する方法

ゲスト購入時、Shopify は customer をどう扱っているのか

ESP8266 で温湿度を測って、AWS IoT Core + Amplify でグラフにしてみる

Shopify 埋め込みアプリのフォームを @shopify/react-form で作る

題字ペタペタができるまで

ブラウザからローカルフォントにアクセスする：Font Enumeration API と Font Table Access API

ベジエ曲線のなめらかさについて社内勉強会で語った

『[改訂新版] プログラマのための文字コード技術入門』を読んだ

type の話

フォントまわりのツールの探し方

タイププロジェクト株式会社を退職しました

Python パッケージとして再構成された AFDKO 2.7 がリリース

fontTools のペンを使ってグリフのアウトラインを取得する

TTXによるフォントのチラ見をちょっといい感じにする設定

OpenType の仕様策定の議論をのぞくには

二号明朝活字書体見本（明治26年）

同型類字集 明朝体

同型類字集 等線体

はてなブログに引っ越してきました

タイププロジェクト株式会社に入社しました

官報に使われた印刷局の康煕字典活字

「TTXによるフォントのぞき基礎」の資料【5/4更新：スライド公開】

TTXのインストール方法

5月3日にフォント関係の勉強会やります

PingMag復刊らしいのでアーカイブから文字関係の記事を10本ほど

「Windows 8 で変わる文字 - 異体字と Unicode IVS」雑感

フォントファイルをFontForgeのアイコンにドラッグ&ドロップして開きたい

米O'Reillyで買ったPDF本をkobo gloでも読めるように加工する

同型類字集明朝体

同型類字集等線体