HowToUsePreview - cwtickle/danoniplus GitHub Wiki
English | Japanese
| < 譜面の作成概要 | プレビューサイトの使い方 | ParaFla!ユーザ向け移行概要 > |
- Dancing☆Onigiri Preview 🔗 から譜面を作成したりデバッグを行うことができます。
- 作品を公開する場合は、作品データのWeb公開方法を参考にしてみてください。
![](https://private-user-images.githubusercontent.com/44026291/316237320-e0845266-44cc-4219-ad0a-1f25d5d36554.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUxODIyODEsIm5iZiI6MTcyNTE4MTk4MSwicGF0aCI6Ii80NDAyNjI5MS8zMTYyMzczMjAtZTA4NDUyNjYtNDRjYy00MjE5LWFkMGEtMWYyNWQ1ZDM2NTU0LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA5MDElMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwOTAxVDA5MTMwMVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPThjOGRjMWFmZTk5MzNlOTU1NTk0NGYzMTY0ODc5NTA2Mzg0NDU3ZWNhYzFlMTQ1NmY5YmU2NmUyYmVhNmI4NDQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.6V977gDxr3fvnlkGbJ5SMGND4wYI2LQxWeK5-ZTG5_I)
![](https://private-user-images.githubusercontent.com/44026291/316237359-d23fe7a1-7c16-4d76-bc5e-9acbd9ec5a3e.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUxODIyODEsIm5iZiI6MTcyNTE4MTk4MSwicGF0aCI6Ii80NDAyNjI5MS8zMTYyMzczNTktZDIzZmU3YTEtN2MxNi00ZDc2LWJjNWUtOWFjYmQ5ZWM1YTNlLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA5MDElMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwOTAxVDA5MTMwMVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTkwMGZiNDY4ZTk2ZmRmMWMyMGY2YTlkNThhZjYwN2VhNDg1NTA0ODgwYjE1YTE4NDc0YmMwN2YyZGNhYTQxZTcmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.lmGQIx-vqX8UIYDEHdV-kvFMVxgmmvTtS8z0sJr3Tbk)
![](https://private-user-images.githubusercontent.com/44026291/316237380-ff0b042b-0a0c-4a83-b479-568c162e9389.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUxODIyODEsIm5iZiI6MTcyNTE4MTk4MSwicGF0aCI6Ii80NDAyNjI5MS8zMTYyMzczODAtZmYwYjA0MmItMGEwYy00YTgzLWI0NzktNTY4YzE2MmU5Mzg5LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA5MDElMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwOTAxVDA5MTMwMVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTRlZmQ4NzZiNGQyZDQ5OTE0ZWI5MmYyZTI0MThlZDlhZDIwOGQ5NGYyMDdjN2Y4NTgyYjYxM2RhOTE1MDU5ODQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.XiEO3lvrJ9p8C5NfXGGNq5ioSGtkSdGQqlST90zjZiY)
- ページ上にあるリンク「Dancing☆Onigiri エディター (CW Edition対応)」からエディターのページに行き、譜面データを作成します。作成方法はリンク先をご覧ください。
- エディターで出力したテキストデータをテキストエリアへ貼り付けます。
- 譜面ヘッダーを入れれば細かい設定が可能ですが、最低限「キー数情報」欄に作成するキー数を入れてください。
- 譜面ヘッダー「difData」を指定する場合は、「キー数情報」欄への入力は不要です。
- すでに譜面ファイル(外部テキスト)がある場合は、譜面ファイル欄からアップロードします。
※ただし、「musicUrl」の設定はファイル内から外してください。
- 楽曲ファイル欄から、楽曲ファイルをアップロードします。ファイルは64MBまでであればアップロード可能です。
※ mp3, ogg, oga, mp4, m4a, aac, flac, js(base64)ファイルに対応しています。
- 自サイトに反映しているバージョンを選択すると、プレビューサイト内でダンおにが起動します。 バージョンを選ぶと読込が行われるため、「譜面読込」を押す必要はありません。
- テキストエリア内の譜面を選択&ペーストでテキストが書き換わります。この後「譜面読込」を押すと読み込まれます。
- アップロードしたデータは画面を閉じたりしない限り、維持されます。
ただし毎日6:00(GMT+9)に削除されるため、基本的に日を跨いでの使用はできません。
- 作成した譜面データからhtmlファイルを作成してダウンロードすることができます。
「Download As File」から譜面データを含むhtmlファイルをダウンロードできます。 - アップロードしたファイルは下記のように「tmp」フォルダ上に置くと動作します。
![](https://private-user-images.githubusercontent.com/44026291/301325360-843a6677-2371-42b8-ab46-fb91b9c04291.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUxODIyODEsIm5iZiI6MTcyNTE4MTk4MSwicGF0aCI6Ii80NDAyNjI5MS8zMDEzMjUzNjAtODQzYTY2NzctMjM3MS00MmI4LWFiNDYtZmI5MWI5YzA0MjkxLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA5MDElMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwOTAxVDA5MTMwMVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWZlMTQ2ZDBlMGVkNGNhMmY5NDRkYjk3ZjY4YjA0ZjhhZmI3NGUwMTI3YzEwYWVjZjZhYzA3N2FlNmJhYjgzYWYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.ENleCvWVOqoQQkO1Yu3hW3mWdx30Q0y33ka6pmMI_8g)
- ここで使用している「danoni_main.js」「danoni_main.css」等は「cwtickle.github.io」にあるファイルを使用しています。
バージョンが上がるごとに自動で更新されますので、カスタムJs等を使っている場合はご注意ください。
また、ネットワーク不可の環境では使用できませんので、その場合はソース一式を別途ダウンロードしてください。 - ダウンロードしたhtmlファイル中の下記を修正することでネットワーク接続無しでも利用することができます。
<script src="https://cwtickle.github.io/danoniplus/js/danoni_main.js" charset="UTF-8"></script>
![](https://private-user-images.githubusercontent.com/44026291/316238429-6178c27a-feca-4a29-bca7-c8e2e5fe3f8b.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUxODIyODEsIm5iZiI6MTcyNTE4MTk4MSwicGF0aCI6Ii80NDAyNjI5MS8zMTYyMzg0MjktNjE3OGMyN2EtZmVjYS00YTI5LWJjYTctYzhlMmU1ZmUzZjhiLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA5MDElMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwOTAxVDA5MTMwMVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTViNjdlMTBjMmZmMDM1MmYwNDE0MTY2YTllNjdiMzZiN2NjYTkzMTBlOTdjN2MzNzQzNmU2YmE3ZTE3NTg0MjAmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.FXx_THFHc1Wfbw2JAS92lxMiKPs0Tc-eA6AggY_kbfs)
![](https://private-user-images.githubusercontent.com/44026291/316238455-b7ef6fc4-f444-4c04-998f-287b7e39ab08.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUxODIyODEsIm5iZiI6MTcyNTE4MTk4MSwicGF0aCI6Ii80NDAyNjI5MS8zMTYyMzg0NTUtYjdlZjZmYzQtZjQ0NC00YzA0LTk5OGYtMjg3YjdlMzlhYjA4LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA5MDElMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwOTAxVDA5MTMwMVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTVlZDE1ODczMDdiNDc0M2ZhYmE2MmIxZTVjYzRlMDM2Y2UwODcxMjFkYjM1MTc0NDBhMzA5MTU5MmFmYzg1N2UmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.6U_6Z_zxAJLv9JOk2IlMkBWmA8BVRwnn1I4YfrFGBL0)
- 上記の6.でダウンロードできるHTMLテンプレートは、差し替えが可能です。
- 現在使っているHTMLファイルを少し修正すれば、プレビューサイトからHTMLの作成が可能です。
- 譜面記述箇所に
<<DOS_DATA>>
を入れると、その部分が譜面データに置き換わります。
<input type="hidden" name="dos" id="dos" value='
<<DOS_DATA>>
'>
文字列 | 置き換える内容 |
---|---|
<<DOS_DATA>> | 譜面データ |
<<MUSIC_TITLE>> | 楽曲名 |
<<ARTIST_NAME>> | 楽曲提供者名 |
- サイト個別の設定を極力再現するために、下記の設定を用意しています。
- 本体の動作に影響します。場合によっては動作しないこともあるので注意してください。
- 自サイト固有の設定を使用したいときは、カスタムJSファイル・カスタムCSSファイル欄からアップロードが可能です。
- カスタムJSファイルには共通設定ファイル(danoni_setting.js)もアップロードすることができます。
- 背景/マスクモーション等で使用する画像ファイルを試したいときは、画像ファイル群の箇所からアップロードできます。複数ファイルのアップロードに対応しています。
※ png, jpg, jpeg, gif, svg, webpファイルに対応しています。 - 譜面側(背景/マスクモーション)では特にパスを意識する必要はありません。直接ファイル名を指定して使用します。
|backtitle_data= 200,0,c.png,,20,20,200,200,0.5,leftToRightFade,120 200,1,iyo.png,,220,220,200,200,1,spinY,120 300,0 320,1,iyo.png,,220,220,200,200,0,leftToRightFade,120 |
- danoni_main.jsより前に何らかの処理を行っている場合、この設定を使うと解決する場合があります。
- 「Preload Values」にてサイト個別のページで使っている個別のhidden要素をカンマ区切りで定義できます。
- 「Preload JS Files」に、danoni_main.jsより前に読み込むファイルを指定します。
- 基本的には上記の譜面作成方法と同じです。
- 譜面データを貼り付け後、検証したいバージョンを選択すると対象のバージョンで稼働します。
選択したバージョンの横にある「Release」から、そのリリース内容を確認することが可能です。(日本語のみ) - 古いバージョンの場合、横幅が自動で拡張しないことがあります。その場合は「Width」の項目を変更してみてください。
- 直接譜面を貼り付ける場合、バッククォート(
`
)は*bkquo*
に自動で置き換えます。 - 作品別のデータセーブは作品別のカスタムキー設定のみ無効にしています。
- ver19.3.0以前の場合、機能が不足しているためカスタムCSSや譜面ファイルのアップロードは行えません。
- ver0のバージョンは通常の方法では動作しないことが多いため、プレビューサイト側であらかじめ初期設定を差し込んでいます。
更新日 | 更新内容 |
---|---|
2024-03-24 | ⭐ バッククォート、シングルクォートの自動エスケープに対応 ⭐ このページに記載のカスタムキー定義をプレビューサイトに組み込み (v32.0.0以降のみ) |
2024-03-23 | ⭐ キリズマ、Punching◇Panelsの作成に対応 (v31.3.1以降のみ) ⭐ Preload Values / Preload JS Filesの設定を追加 (v19.4.1以降のみ) |
2024-03-20 | 🛠️ レスポンシブ対応、PHP8対応、レイアウト一部見直し |
2024-03-13 | ⭐ 作品別のローカルストレージデータについて、カスタムキー定義を除く設定の保存に対応 |
2024-03-12 | ⭐ 画像ファイル群のアップロードに対応 (v19.4.1以降のみ) 🛠️ Firefoxでアップロードファイルのキャンセルができない問題への対処のため、 Cancelボタンを追加 🛠️ アップロード済ファイルのResetボタンを追加 🐞 ファイルダウンロード時、2ファイル目以降のファイル名のパスが間違っている問題を修正 |
2024-03-09 | ⭐ HTMLテンプレートファイルのアップロードに対応 (最新版のみ) 🛠️ 音源ファイルの許容拡張子をmp3, ogg, oga, mp4, m4a, aac, flac, js(base64)に拡張 🛠️ 音源ファイルの上限を16MBから64MBに拡張 🛠️ v27.1.0以降のバージョンでも内部的に横幅の設定を保持するよう改善 |
2024-03-08 | ⭐ Google Fontsより「Fauna One」「Merriweather」 「Montserrat」「Noto Sans JP」「Raleway」の読込に対応 ⭐ キー別のローカルストレージを保存できるよう変更 🛠️ 画面リロード毎に作品別のローカルストレージデータを消去するよう変更 🛠️ 初回アクセスから最新版が自動起動するよう処理を変更 🛠️ 譜面入力エリアでテキストの編集ができるよう処理を改善 |
2024-03-06 | ⭐ 音源ファイル及びカスタムJSファイルのアップロード、初期オプションの指定に対応 (v19.3.0以前) 🐞 音源ファイル名に「&」が含まれているとアップロードできない問題を修正 |
2024-03-02 | 🛠️ テスト用のバージョンを追加できるように変更 (x.y.z-a1形式) |
2024-02-27 | 🛠️ 実験的な機能を選択して起動させる機能を追加 (v19.4.1以降のみ、追加するスクリプト欄を追加) |
2024-01-31 | ⭐ ファイルダウンロード機能を追加 (最新版のみ) |
2024-01-18 | ⭐ アップロードできる楽曲ファイルについて、 base64化したカスタムJSファイルも可能なように変更 (v19.4.1以降のみ) ⭐ 外部譜面ファイルのアップロードに対応 (v19.4.1以降のみ) |
2023-11-18 | ⭐ カスタムJS/CSSファイルのアップロードに対応 (v19.4.1以降のみ) |
2023-11-15 | ⭐ 音源ファイルのアップロードに対応 (v19.4.1以降のみ) |
2023-10-21 | 🛠️ バージョン変更毎に自動リロードするよう変更 🛠️ ローカルストレージに自動保存されないよう設定をブロックするよう変更 |
2023-10-17 | - 公開 |
| < 譜面の作成概要 | プレビューサイトの使い方 | ParaFla!ユーザ向け移行概要 > |