Help us understand the problem. What is going on with this article?

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

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

https://www.clip-studio.com/clip_site/mypage/newsdetail?publish=201308&f=2013082001

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

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

インストール

$ npm i csnf

使用例

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

const CSNF = require('csnf')

// ドキュメント設定 
// 単位はpx。72dpiで、1pt=1pxです
// B4=投稿用(内枠18x27cm)
// A4=同人誌用(内枠15x22cm)
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')

スクリーンショット 2020-04-18 18.18.55.png

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

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

残りの2種類(ドローとノート)は、どちらもグレースケールのビットマップ用です。
とりあえず何か表示したいので、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')
  }
})

スクリーンショット 2020-04-18 18.47.15.png

というわけで

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

funige
よろしくお願いします。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした