Skip to content

satopian/axnospaint_for_Petit_Note

BranchesTags

Repository files navigation

AXNOS Paint

概要

AXNOS Paint（アクノスペイント）は「お絵かき掲示板サイト」での利用を想定したペイントツールです。画像掲示板サービス運営者向けに設計しておりますが、ローカル環境で使用することも可能です。

  • JavaScript(Vanilla JS)ライブラリとして提供しています。
  • 機能を基本的なものに限定し、知識や熟練を必要としないお絵かき環境を提供します。
  • 扱うことができる画像サイズは8×8～600×600です。（※起動オプションで1000×1000まで拡張可能）
  • 画像の自動バックアップ機能、一時保存機能を搭載しています。
  • ローカルファイルの保存／読込、クリップボードからの貼り付けなどの機能は意図的に排除しています。
  • サーバー側で指定した画像を下書きとして読み込む機能を持ちます。
  • 投稿用のインターフェースとして、タイトルと本文を入力するフォームを備えています。
  • 投稿処理（サーバーとの通信部分）はライブラリに含まれません。ユーザーが独自に組み込む必要があります。

動作環境

  • Edge, Safari, Chrome, Firefox, Opera いずれかの最新版。
  • スマートフォンでの利用はサポート対象外とします。

動作サンプル

Sample Image

機能マニュアル

使用ライブラリ

導入

ファイル構成

Releasesから最新版をダウンロードし、/dist/内の以下のファイルをサーバーに配置してください。

index.html（起動用htmlファイル）
axnospaint-lib-2.x.x.min.js（ビルド済jsファイル。バージョンによってxの数値は変動します）

起動用htmlファイル

最小構成の例を以下に示します。提供するサービスに合わせて後述のオプションを指定してください。

<head>
    <script defer="defer" src="axnospaint-lib-2.x.x.min.js"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            new AXNOSPaint({
                bodyId: 'axnospaint_body',
            });
        });
    </script>
</head>
<body>
    <div id="axnospaint_body"></div>
</body>

起動オプション

AXNOS Paintのインスタンス作成時に以下のオプションを指定することができます。 bodyId以外の項目は省略が可能です。省略した場合、初期値が適用されます。

オプション名 内容 初期値
bodyId AXNOS Paintの画面を展開するdiv要素のid属性。指定必須
minWidth キャンバスの最小サイズ（横）。単位はピクセル。最小8～最大1000。 8
minHeight キャンバスの最小サイズ（縦）。単位はピクセル。最小8～最大1000。 8
maxWidth キャンバスの最大サイズ（横）。単位はピクセル。最小8～最大1000。 600
maxHeight キャンバスの最大サイズ（縦）。単位はピクセル。最小8～最大1000。 600
width キャンバスの初期サイズ（横）。単位はピクセル。最大最小の範囲外の場合、範囲内に修整されます。 317
height キャンバスの初期サイズ（縦）。単位はピクセル。最大最小の範囲外の場合、範囲内に修整されます。 317
oekakiURL 下書き機能(1)で使用する画像が配置されているURLパス名。URLパラメータoekaki_idと組み合わせて使用する。詳細は下書き機能の項(1)で解説。
draftImageFile 下書き機能(2)で読み込む画像ファイル名。このオプションはURLパラメータを使用しない。詳細は下書き機能の項(2)で解説。
oekakiTimeout 下書き機能(1)(2)の画像読込タイムアウト時間。単位はミリ秒。 15000
checkSameBBS 自動保存からの復元またはロード機能を使用する際、同一の掲示板の画像であるかをチェックします。
詳細は下書き機能使用時の同一掲示板チェックの項で解説。		 false
restrictDraftCanvasResizing 下書き機能(1)または(2)の使用時に、キャンバスサイズの変更ができないように制限します。 false
restrictPost 投稿タブを開けないようにします。何らかの理由で投稿機能を無効化したいときに使用します。 false
headerText ヘッダーのテキスト表示領域に表示する文字列。最大1024文字まで。超過する場合は切り捨て。
「投稿先の掲示板名」が指定されることを想定しています。
expansionTab ユーザーが任意で追加することができる拡張タブ定義。
「ヘルプページへのリンク」が指定されることを想定しています。
詳細は拡張タブの項で解説。
dictionary ユーザー辞書JSONファイル。
UI表示のカスタマイズに使用します。nullを指定した場合、辞書ファイルを使用しません。
詳細はユーザー辞書の項で解説。
post 投稿処理で呼び出すユーザー関数定義。
詳細は投稿機能の項で解説。
postForm 投稿用フォームのユーザーカスタマイズ定義。
詳細は投稿用フォームのカスタマイズの項で解説。
  • bodyId,minWidth,minHeight,maxWidth,maxHeight,postFormの指定に誤りがある場合、エラーを表示して強制終了します。
  • キャンバスの最小～最大サイズの範囲外のセーブデータをロードした場合、エラーを表示してロードを中止します。このケースはサービス運用開始後に最小～最大サイズの設定を変更した場合に発生する可能性があります。

URLパラメータ指定

AXNOS Paintは起動時に以下のURLパラメータを受け取ります。

パラメータ名 内容
oekaki_id oekaki_id.png を下書きとして読み込みます。起動オプションのoekakiURLで画像のパスが指定されている必要があります。
oekaki_width 起動オプションのwidthと同様。同時に指定した場合はURLパラメータの値が優先。
oekaki_height 起動オプションのheightと同様。同時に指定した場合はURLパラメータの値が優先。

例）キャンバスサイズ横600、縦400でAXNOS Paintを起動

https://www.axnospaint.jp/index.html?oekaki_width=600&oekaki_height=400

下書き機能

ツール起動時に指定の画像を下書きとして読み込み、初期レイヤーにする機能です。 ２通りの指定方法があり、どちらか一方を選択して使用することができます。（※同時に指定した場合、2.が優先されます）

  1. URLパラメータ指定(PNG形式専用)
    起動オプションoekakiURLに、画像が配置されているURLパス名を指定する。
    起動オプションにoekakiURLを指定しなかった場合、URLパラメータ指定による読み込み機能は無効になります。

     new AXNOSPaint({
     // 中略
     oekakiURL: 'https://www.axnospaint.jp/oekaki/',
 });

    URLパラメータoekaki_idに画像ファイル名（拡張子を除く）を指定して起動する。

    https://www.axnospaint.jp/index.html?oekaki_id=12345

    この時、起動オプションoekakiURLで指定されているパスを参照し、https://www.axnospaint.jp/oekaki/12345.pngを読み込みます。

  2. 起動オプション指定
    起動オプションdraftImageFileに、画像ファイルを指定する。

     new AXNOSPaint({
     // 中略
     draftImageFile: 'https://www.axnospaint.jp/oekaki/12345.jpg',
 });

    この方式では、PNG形式以外のファイルも読み込み可能ですが、ツールが出力する画像はPNG形式に変換されます。

下書き機能を使用し、画像の読み込みに成功した場合、以下のルールが適用されます。

  • 起動オプションrestrictDraftCanvasResizingにtrueを指定している場合、キャンバスサイズの変更機能が使用不可になります。
  • 画像サイズに合わせてキャンバスサイズが変更されます。サイズが規定値を超える場合、超過分は切り捨てられます。
  • 同一生成元ポリシーに違反する画像を指定した場合、セキュリティエラーが発生します。
  • 画像が読み込めなかった場合、エラーメッセージを表示し、新規キャンバスとして起動します。
  • 投稿情報のoekaki_idまたはdraftImageFileに値が設定されます。（下書きを利用した投稿であることを示す）
  • 下書き機能を利用したセーブデータは、ロード画面上で、oekaki_idまたは、draftImageFileで指定されたファイル名が表示されます。

これらのルールは、新規キャンバス作成または別の画像のロードにより、下書き画像との関係性が無くなったタイミングで撤廃されます。 逆に、起動時に下書き機能を使用していなくても、下書き機能を利用したセーブデータをロードしたタイミングでルールが再適用されます。

下書き機能使用時の同一掲示板チェック

下書き機能を利用して、一度投稿された画像を（別の投稿者が）他の掲示板へ転載したり、新規と偽って投稿する行為を予防（※完全ではありません）する仕組みです。
起動オプションのcheckSameBBSにtrue（有効）を指定した場合、適用される機能です。

new AXNOSPaint({
    // 中略
    checkSameBBS: true,
});

AXNOS Paintでは下書き機能を使用した際に、以下の情報を記憶します。

  1. URLパス名（url.pathname）
  2. 読み込み画像ファイル情報（oekaki_idまたはdraftImageFile）
  3. 起動ページの<title>要素の文字列

AXNOS Paintで自動保存からの復元またはロード機能を使用する際、URLパス名が一致しない（＝下書き画像が投稿された掲示板とは違う掲示板でロードを行った）場合に、ロードをキャンセルし、同一の掲示板でロードしてもらうことを促すメッセージを表示します。（この時、3.の<title>要素の文字列をメッセージの文言に使用します。この理由から、起動ページの<title>要素には、予め掲示板を一意に特定できるタイトルを指定しておくことが望ましいです）

このルールは下書きを使用しない画像の投稿には適用していません。これは投稿者自身であれば、投稿済みのセーブデータをロードすることで、自由に掲示板を再選択して何度でも再投稿できることを意味します。
仮にここに制限をかけてしまうと「〇〇の掲示板に投稿するつもりだったのに、うっかり△△の掲示板で描き始めてしまった」「〇〇の掲示板で描いている途中に掲示板が削除／閉鎖されてしまった」といったケースで問題が発生することになり、ユーザーの不利益になることが予想されるためです。
投稿者自身による多重投稿については、セーブデータや自動バックアップデータが既に投稿されたものであるかの判定が現実的に困難であり、障害発生で画像が消失してしまうリスクがあるため、こちらについてはAXNOS Paintでは制限を設けず、サービス管理者に対処を一任するものとします。

投稿機能

AXNOS Paint上でユーザーが投稿操作を行ったとき、起動オプションのpostに指定された関数を呼び出します。この関数内にサーバーとの通信処理を記述することで、サーバー側に投稿情報を渡すことができます。
この時ツール側は、投稿ボタン連打による二重送信を防ぐために、awaitでPromiseの処理結果を待機します。通信処理が完了したタイミングで、resolve()で待機状態を終了させてください。

new AXNOSPaint({
    // 中略
    post: axnospaint_post,
});
// 投稿処理
function axnospaint_post(postObj) {
    return new Promise(resolve => {
        // ここにサーバーとの通信処理を記述
        console.log(postObj);
        alert('サンプルのため、投稿機能は動作しません。');
        // resolve()で待機状態が終了し、再び投稿ボタンが押せるようになる（二重送信防止用）
        resolve();
    });
}

投稿情報オブジェクト

AXNOS Paintはサーバーとのインターフェースとして、以下のメンバ変数をもつObject型データを関数に受け渡します。本文などの項目を入力必須にしたい場合は、次項で解説する起動オプションのisInputRequiredにtrueを指定してください。

メンバ変数名 内容
strName 投稿者名。trim()メソッドで文字列の両端の空白を削除済。デフォルト設定では省略可
strTitle タイトル。trim()メソッドで文字列の両端の空白を削除済。デフォルト設定では省略可
strMessage 本文。trim()メソッドで文字列の両端の空白を削除済。デフォルト設定では省略可
strWatchList ウォッチリストに登録
チェックボックスが選択されている場合't'、それ以外は''（空文字）とする。
oekaki_id 下書き機能(1)を使用した場合に付与される情報。未使用時はNULL。（URLパラメータで指定したoekaki_idの内容の転記。ただし、AXNOSPaint使用中の操作で更新される場合があります。
draftImageFile 下書き機能(2)を使用した場合に付与される情報。未使用時はNULL。（起動オプションで指定したdraftImageFileの内容の転記。ただし、AXNOSPaint使用中の操作で更新される場合があります。
strEncodeImg 投稿するpng画像のdata URI
toDataURL('image/png')でエンコードした後、replace('data:image/png;base64,', '')でヘッダ部分を削除したもの。
AXNOS Paint側の設定により、背景透過pngとなる場合もある。

【重要】
AXNOS Paintは、キャンバスサイズの変更機能、画像のセーブ／ロード機能をもつ関係上、起動時に指定したURLパラメータと実際に投稿される画像の情報が一致しない場合が発生します。
（例：317×317の画像ファイルを下描きとして描き始めたが、途中で既にセーブしてあったキャンバスサイズ400×400の別の画像データをロードして投稿した等）
そのため、投稿処理の中ではAXNOS Paintが受け渡す投稿情報オブジェクトを参照することを前提とし、以下の操作は想定外の動作を引き起こす原因となるため絶対に行わないでください。

  • ❌投稿処理内でURLパラメータの値を参照する
  • ❌「下書き機能」を使用した投稿であるかの情報を、サーバー側で事前に投稿処理に埋め込む
  • ❌サーバー側でURLパラメータ（referer）と投稿画像との整合性チェックを行う

投稿用フォームのカスタマイズ

起動オプションのpostFormで、投稿用フォームの表示／非表示、入力必須の有無、最大文字数、プレースホルダーのカスタマイズが可能です。
以下に設定例を示します。

new AXNOSPaint({
    // 中略
    postForm: {
        // 投稿フォーム
        input: {
            isDisplay: true, 
            // 投稿者名
            strName: {
                isDisplay: true, 
                isInputRequired: false,
                maxLength: 32,
                placeholder: 'ななしのよっしん',
            },
            // タイトル
            strTitle: {
                isDisplay: true, 
                isInputRequired: false,
                maxLength: 32,
                placeholder: '',
            },
            // 本文
            strMessage: {
                isDisplay: true, 
                isInputRequired: true,
                maxLength: 1024,
                placeholder: '本文を入力してください。',
            },
            // ウォッチリスト登録
            strWatchList: {
                isDisplay: true, 
            },
        },
        // 注意事項
        notice: {
            isDisplay: true,
            // 文章はユーザー辞書を使用して書き換えが可能 
        },
    },
});
オプション名 内容 初期値
isDisplay 項目表示フラグ。falseを指定すると非表示になり、isInputRequiredの入力チェックも実施しない。 true
isInputRequired 入力必須フラグ。trueを指定すると項目に「必須」の文字が表示される。未入力の場合、入力を促すメッセージを表示する。 false
maxLength 入力可能な最大文字数。1～1024の範囲内で指定する。 ※1
placeholder プレースホルダーとして表示する文字列。要素のplaceholder属性に設定される。 空文字列

※1：未指定時の初期値は、投稿者名とタイトルは32文字、本文は1024文字。

  • 投稿フォームを使用しない場合はinputのisDisplayをfalse（非表示）にしてください。投稿者名、タイトル、本文、ウォッチリスト登録のすべてが非表示になります。
  • 非表示項目は、入力必須フラグが無効になります。
  • 指定を省略した項目は、初期値が適用されます。
  • 不正な値が指定された場合、エラーメッセージを表示して強制終了します。

拡張タブ

AXNOS Paintに、ユーザー独自のタブを１つ追加する機能です。「リンク表示」「関数呼び出し」の２通りの使用方法があります。

  1. リンク表示（推奨）
    nameで指定された名前のタブを追加し、クリックすると別タブでlinkで指定されたURLのページを開きます。また、タブにポインタを重ねた時、msgで指定されたガイドメッセージを左下に表示します。
new AXNOSPaint({
    // 中略
    expansionTab: {
        name: 'ヘルプ',
        msg: '説明書（ニコニコ大百科のAXNOS Paint:ヘルプの記事）を別タブで開きます。',
        link: 'https://dic.nicovideo.jp/id/5703111',
    },
});
  1. 関数呼び出し
    nameで指定された名前のタブを追加し、クリックするとfunctionで指定された関数を呼び出します。また、タブにポインタを重ねた時、msgで指定されたガイドメッセージを左下に表示します。
    AXNOS Paintのページ内でユーザー独自の処理を行う必要がある場合に使用します。
new AXNOSPaint({
    // 中略
    expansionTab: {
        name: 'お知らせ',
        msg: 'お知らせ：運営からのお知らせを表示します。',
        function: function () {
            alert('運営からのお知らせです。');
        }
    },
});

ユーザー辞書

AXNOS Paintが表示している一部の単語を、ユーザーが指定した単語に置換する機能です。

  • 提供するサービスに合わせて、ボタンのラベルや注意事項などを、より適切なメッセージに変更することできます。
  • 多言語対応としても利用できます。（データはユーザーが用意する必要があります）
  • 特定の単語のみ置換可能で、設定画面や各種メッセージ等には対応していません。
  • 辞書ファイルのサンプルと作成方法はこちら（動作無保証）

辞書ファイルをサーバーに配置し、起動オプションdictionaryにファイルパスを指定する。

new AXNOSPaint({
    // 中略
    dictionary: 'mydic.json',
});

ページ遷移防止

AXNOSPaintでは、ライブラリ利用者がページ遷移を制御できるようにする為、Window:beforeunloadイベントを設定していません。 必要に応じて以下のようなイベントハンドラを設定してください。

// 設定
window.onbeforeunload = function (event) {
    event.preventDefault();
    event.returnValue = "";
}
// 解除（投稿処理時）
window.onbeforeunload = null;

ページ内に任意の情報を表示する

AXNOS Paintを起動するページ内で任意の情報（緊急告知、メンテナンス予告など）を表示する必要がある場合、 AXNOS Paintを展開するdiv要素の前または後（あるいは両方）にdiv要素を追加することで、その領域内を任意に使用することができます。 ただし、ペイントツールとしての使用感を著しく低下させる恐れがあるため、基本的には使用を推奨しません。 通常はAXNOS Paintが標準で提供しているお知らせ領域の利用を推奨します。

例）

<body>
    <div>
      2024/xx/xx 緊急メンテナンスのお知らせ 20:00~24:00の間、サービスをご利用いただくことができません。
    </div>
    <div id="axnospaint_body"></div>
</body>

開発資料

ビルド

webpack5を使用し、.pngファイルや.cssファイルを含めた全ファイルを１つの.jsファイルにバンドルします。

webpack.config.js ： 開発用webpack設定ファイル。.jsファイル出力用。
webpack.prod.js ： プロダクションビルド用webpack設定ファイル。コメントなどを削除したmin.jsファイル出力用。

プロダクションビルド

通常版とWebデモ版が存在します。

通常版プロダクションビルド

 npm run prod
  • ファイルの出力先は/dist
  • ファイル名はindex.html,axnospaint-lib-2.x.x.min.js（バージョン番号はpackage.jsonに依存します）

Webデモ版プロダクションビルド

 npm run prod-demo
  • ファイルの出力先は/docs/latest
  • ファイル名はindex.html,axnospaint-lib-demo-2.x.x.min.js（バージョン番号はpackage.jsonに依存します）
  • Webデモ版にはマスコット機能が追加されます。

マスコット機能

マスコットキャラがペイントツールの機能について紹介を行う機能が追加されます。
拡張機能として./extensions/mascot/の中にデータが配置されています。Webデモ版のビルドを行った場合、.jsファイルにデータが取り込まれ機能が有効になります。

データ保存

AXNOS PaintはブラウザのindexedDB領域（DB名：axnospaint_db1）を使用して、画像のセーブロード、自動バックアップ、ユーザー設定情報の保存を行います。 indexedDBが使用できない環境（プライベートブラウジングモード使用時など）の場合、起動時に警告が表示され、関連する機能が動作しなくなります。 localStorage、Cookieは使用していません。

所属名

機能や役割を識別するための名前として所属名を定義しています。

所属名 内容
main メイン領域
canvas キャンバスタブ内のコンテンツ
pen ペンツールウィンドウ
penmode ペン種別選択サブウィンドウ
layer レイヤーウィンドウ
renamelayer レイヤー名変更サブウィンドウ
palette パレットウィンドウ
makecolor 色作成ウィンドウ
tool 補助ツールウィンドウ
saveload セーブ／ロード／自動保存サブウィンドウ
gridconfig 補助線の色変更サブウィンドウ
custom カスタムボタンウィンドウ
mascot マスコット表示用領域
config 設定タブ内のコンテンツ
post 投稿タブ内のコンテンツ
footer フッター領域

id名

AXNOS Paintでは、先頭にaxp_を付与したid名を使用します。 競合を避けるためにaxp_で始まるid名を同時に使用しないように留意してください。

axp_所属名
axp_所属名_要素名_任意の識別名

例：axp_pen（ペンツールウィンドウ）
例：axp_pen_form_penSize（ペンツールウィンドウ内の<form>要素、ペンの太さ調整用）
例：axp_layer_button_create（レイヤーウィンドウ内の<button>要素、新規ボタン）

  • 「axp_所属名」のidをもつ要素は、その所属の親divを意味するものとします。
  • 要素名はdiv、span、form、labelなどを指します。
  • input要素の場合は、type属性を要素名として扱います。（例：range、checkbox、number）
  • penmodeで命名規則例外あり

class名

AXNOS Paintでは、先頭にaxpc_を付与したclass名を使用します。 競合を避けるためにaxpc_で始まるclass名を同時に使用しないように留意してください。

axpc_分類名
axpc_分類名_任意の識別名
axpc_所属名_任意の識別名
分類名 役割
button ボタン
checkbox チェックボックス
icon アイコン画像
radio ラジオボタン生成用。JavaScriptで <span> を <input type"radio"> に展開する。
range レンジスライダー
window ツールウィンドウ制御用css
toggle トグルスイッチ風チェックボックス

z-index

キャンバス画面の要素が重なった場合の表示順序を制御するz-indexは以下の通りです。値が大きい要素ほど前面に表示されます。

値 要素
100 キャンバス
600 補助線
700 ポインタ位置に表示するペンの太さ表示
800 ポインタ座標表示用領域
900 デバッグ情報表示
1000～ 各種ツールウィンドウ（最後に操作したウィンドウが前面になるように変動）
2000 サブウィンドウ
3000 マスコット
5000 セーブ／ロード画面
6000 ハンバーガーメニュー
10000 アラート（alert()で表示されるポップアップ）

Copyright / License

(c) 2022 「悪の巣」部屋番号13番：「趣味の悪い大衆酒場[Mad end dance hall]」
Licensed under MPL 2.0

About

Petit Note用にカスタマイズされたAXNOS Paint

paintbbs.sakura.ne.jp/

Topics

oekaki painter paintbbs axnospaint

Resources

Readme

License

MPL-2.0 license
Activity

Stars

4 stars

Watchers

1 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Contributors 2

  •  
  •  

Languages