CSNF(CLIP STUDIOネームファイル)を作る

2013年にワコムが発売したAndroid搭載の液晶タブレット Cintiq Companion Hybrid には、専用アプリが何本かプリインストールされていました。その中の一つ「Wacom Manga Canvas」という漫画のネーム作成ツールのために作られたのが、CSNFというフォーマットです。拡張子は.csnf。

もう使ってる人もいないのでは？　と思うのですが、最新版のクリスタでも問題なく [ファイル]->[開く] で読み込むことができます（EX版限定ですが）。

せっかく使えるのに、誰も使わないのはもったいないですよね。
ワコムの代わりに、誰かが最高にクールなネーム作成ツールを開発しちゃえばいいと思うのですが……まあ……とりあえず、npmにCSNFのライブラリがあるので、これを広めていきたいと思います。
CLIP STUDIO PAINT EX のユーザーで興味のある方は、お試しを。

##インストール

$ npm i ｃsnf

##使用例
まずテキストとフレームを表示する例です。

const CSNF = require('csnf')

// ドキュメント設定 
// 単位はpx。72dpiで、1pt=1pxです
// B4=投稿用（内枠18x27cm）
// A4=同人誌用（内枠１５x２２cm）
const csnf = new CSNF({ template: 'B4' })

// 最初のページを作成
const page = csnf.addPage()
 
// テキストレイヤーを追加
const size = 12 // フォントサイズ
const vert = true // 縦書き
page.addTextLayer([
  csnf.text([100, 100], size, vert, '縦書き\nテスト'),
  csnf.text([200, 100], size, vert, 'わからない……\n文化が違う!')
])

// フレームレイヤーを追加
const rect = csnf.baseframeRect() // 基本枠
const lineWidth = 4 // 枠線の太さ
page.addFrameLayer([
  csnf.polygon(lineWidth,
    [rect.x, rect.y],
    [rect.x + rect.width, rect.y],
    [rect.x + rect.width, rect.y + rect.height],
    [rect.x, rect.y + rect.height])
])

// ファイルに書き出し
csnf.writeFile('test.csnf')

簡単ですね。
CSNFのレイヤーは、用途別にテキスト、フレーム、ドロー、ノートの４種類があって、各3枚、最大12枚まで表示できます。レイヤーの色は、ドキュメント設定で変更することができます。

  const csnf = new CSNF({
    frameColor: '#86ae00',
    textColor: ['#bf0058', 'red', 'black'], // 複数の場合は配列で
  })

残りの２種類（ドローとノート）は、どちらもグレースケールのビットマップ用です。
とりあえず何か表示したいので、get-pixels で適当な画像を取得して、ドローレイヤーに表示してみます。

const CSNF = require('csnf')
cosnt getPixels = require('get-pixels')

const csnf = new CSNF()
const page = csnf.addPage() 

const file = "stayhome.png" // 適当な画像
getPixels(file, (err, pixels) => {
  if (!err) {
    // グレースケールに変換
    const bitmap = CSNF.Bitmap.fromNdarray(pixels)
    page.addDrawLayer(bitmap)

    // ファイルに書き出し
    csnf.writeFile('test2.csnf')
  }
})

##というわけで
ネームファイルと言っても、ルビや縦中横などの書式設定はできないようで、未完成というか、あんまり実用性はないのかなあと思います。このへんがもっと整備されて、ツールとか開発者が増えてくると個人的には嬉しいのですが。