カスタム表示

後述のカスタム表示が可能です。現バージョンでは途切れ区切の記号は「…」に限定です ⇒ ver.2.5から途切れ区切の記号を任意に変更可能です。

data-dreamphpの項目番号に続けてカスタム表示タイプを追加するか、data-customtypeの指定でカスタム表示タイプを指定できます。
data-custommarkの指定で途切れ区切の記号を指定できます。指定がなければ「…」で出力されます。

<span data-dreamphp="項目番号カスタム表示タイプ">デフォルト名</span>
<span data-dreamphp="項目番号カスタム表示タイプ" data-custommark="記号">デフォルト名</span>

<span data-dreamphp="項目番号" data-customtype="カスタム表示タイプ">デフォルト名</span>
<span data-dreamphp="項目番号" data-customtype="カスタム表示タイプ" data-custommark="記号">デフォルト名</span>

登録名、およびdefNameオプションで設定したデフォルト名はカスタムされますが、要素の内容の「デフォルト名」部分はカスタムされません。デフォルト名の状態でもニュアンスを正しく伝えたければ、カスタム後の状態を書いてください。

GOOD: デフォルト名のまま読んでも自然

<span data-dreamphp="2n">か</span>、
<span data-dreamphp="0" data-customtype="t">花…京院</span>

登録名があれば「と、登…録名」となり、デフォルト名のままでも「か、花…京院」と表示される

カスタム表示

後述のカスタム表示が可能です。

クラス名に項目番号に続けてカスタム表示タイプを追加してください。

<span class="dreamphp-項目番号カスタム表示タイプ">デフォルト名</span>

ver.2.5以降、data-custommarkの指定で途切れ区切の記号を指定できます（classだけでの指定は現状できません）。指定がなければ「…」で出力されます。

<span class="dreamphp-項目番号カスタム表示タイプ" data-custommark="記号">デフォルト名</span>

登録名、およびdefNameオプションで設定したデフォルト名はカスタムされますが、要素の内容の「デフォルト名」部分はカスタムされません。デフォルト名の状態でもニュアンスを正しく伝えたければ、カスタム後の状態を書いてください。

GOOD: デフォルト名のまま読んでも自然

<span class=dreamphp-2n">じ</span>、
<span class="dreamphp-0t">城…之内</span>

登録名があれば「と、登…録名」となり、デフォルト名のままでも「じ、城…之内」と表示される

カスタム表示

後述のカスタム表示が可能です。

「NAME項目番号」に続けて「:カスタム表示タイプ」を追加してください。

{NAME項目番号:カスタム表示タイプ}

{NAME0:t}
{NAME3:n}、{NAME1:c}

「:」やカスタム表示タイプの前後にスペースや改行などが含まれると動きません。

とぎれやくぎりのカスタム表示タイプの後に「(記号)」（丸括弧開 記号 丸括弧閉）を追加で、希望の記号に変えることができます。

{NAME0:t(、)}

defNameオプション

dataメゾッド・classメゾッドの場合

未登録時やJavaScript無効環境は置き換え対象要素の内容（<span>ここの部分</span>）が表示されるので、特別設定する必要はありません。
HTMLには「姓」「名」のような汎用置き換え文字列を記載して、特定の状況でdefNameオプション値を切り替えて特定のデフォルト名を自動設定するのはあり。

wordメゾッドの場合

defNameオプションを設定すると、未登録時にデフォルト名が表示できます。

JavaScript無効環境（未対応、OFFにしてる、通信不良でuse-dreamphp.jsが読み込まれなかった等）は置き換え対象文字列（{NAMEx}）がそのまま表示されます。

項目番号0からカウントアップでデフォルト名を羅列してください。特定の項目番号だけの設定はできません。一つ一つ引用符で囲って、半角カンマ(,)で区切ってください。配列として取り扱うので、全体を[]で囲ってください（項目が1つでも）。

new dreamphp({
   defName : [
      '項目番号0のデフォルト名',
      '項目番号1のデフォルト名',
      '項目番号2のデフォルト名',
      '項目番号3のデフォルト名',
   ],
});

new dreamphp({
   defName : [ "田中", "花子" ],
});

dataNameオプション

methodが「data」のとき使います。初期値は「dreamphp」です。

ページ内で使われる他のデータ名と被らないものにしてください。dataの名前には小文字の半角英字と数字、ハイフン、アンダースコア、ドット、コロンのみが使えます。

<span data-dreamphp="0">名前</span>

new dreamphp({
   dataName : 'id', // data名を id にする
});

<span data-id="0">苗字</span><span data-id="1">名前</span>

classPrefixオプション

methodが「class」のとき使います。初期値は「dreamphp-」です。

ページ内で使われる他のクラス名と被らないものにしてください。

クラス名は半角英数、ハイフン、アンダースコアのみが使えます。数字からは始められません。なので、接頭辞を無しにすることもできません。

<span class="dreamphp-0">名前</span>

new dreamphp({
   classPrefix : 'names', // 接頭辞を names にする
});

<span class="names0">苗字</span><span class="names1">名前</span>

wordFormatオプション

methodが「word」のとき使います。初期値は「curly」です。

上記に当てはまらない語句が設定された場合は[curly]が適応されます。

併用のスクリプトによっては、一部の記号が消されたり他の置き換え対象になっていることもあるので、うまく使えないようなら別の設定値に変えてみてください。

[none]（置き換え文字列そのまま）にした場合は、置き換え対象文字列は一般名詞を避けるなど工夫して、置き換え対象以外でその文字列を使わないよう気を付けてください。

wordsオプション

methodが「word」のとき使います。初期値は「NAME項目番号」で項目番号0から8までです。
wordFormatオプションと合わせた文字列が置き換え対象になります。

項目番号0からカウントアップで置き換え文字列を羅列してください。特定の項目番号だけの設定はできません、必要がない項目があれば空欄にすれば置き換えが起きません。
一つ一つ引用符で囲って、半角カンマ(,)で区切ってください。配列として取り扱うので、全体を[]で囲ってください（項目が1つでも）。

new dreamphp({
   words : [
     'NAME0',
     'NAME1',
     'NAME2',
   ],
});

置き換え文字列は、全角半角アルファベットひらがなカタカナ漢字数字記号なんでもよくて、それらがどんな組み合わせで何文字でもOKです。
併用のスクリプトや環境によっては、他の内容に置き換えられたり消されてしまう文字や記号があるので、もしもうまくいかなかったら別の文字列を試してください。

wordFormatオプションが[none]の場合は、文中の想定外の箇所が置き換わってしまう可能性が高くなります。本文中に登場しない文字列を充分検討するか、[none]は諦めてwordFormatオプションを利用して置き換え対象を明確化させるのが安全かと思います。

new dreamphp({
   words : [
     '苗字',    //項目番号0
     '名前',    //項目番号1		
     '',       //項目番号2:必要なければ空欄でもよし
     'なまえ', //項目番号3
   ],
});

<div data-scope="dreamphp">
  #FirstName##FamilyName#
</div>

<script>
new dreamphp({
   wordFormat: 'hash',
   words : [
     'FisrtName', 'FamilyName', 'NickName',
   ],
});
</script>

<div data-scope="dreamphp">
  [FN:みょうじ]さんのニックネームは[NN:ニックネーム]です。
</div>

<script>new dreamphp({
   wordFormat: 'square',
   words : [ 'FN:みょうじ', 'NN:ニックネーム', ],
});</script>

wordScopeオプション

methodオプションが「word」のとき使います。ここで指定した要素の範囲内に含まれる「wordsオプション」で設定した文字列を置き換えます。初期値は「[data-scope="dreamphp"]」です。

querySelectorAll()で取得するので、CSSセレクターで記述してください。

• CSS セレクター - CSS: カスケーディングスタイルシート | MDN

new dreamphp({
   wordScope : '[data-scope="dreamphp"]',
});

スキンファイルを編集/確認して、置き換え文字列を含む（ことになる）要素にdata-scope="dreamphp"を書き足すか、もしくはその要素のCSSセレクターを指定してください。
なにかあれば、使いたいスクリプトを添えて相談してください。

new dreamphp({
   wordScope : '.name-change > p', 
});

<div class="name-change">

  <p>{NAME0}{NAME1}さんこんにちは</p>

</div>

new dreamphp({
   wordScope : 'div.content', 
});

<section>
<h1>タイトル1</h1>
  <div class="content">
     今日は{NAME1}さんが目を覚ましました。<br>
     天気が良い一日です。
  </div>
  <div class="user">2022年〇月×日 | category1 | USER1</div>
</section>

<section>
<h1>タイトル2</h1>
  <div class="content">
    今日は{NAME1}さんが眠りにつきました。
  </div>
  <div class="user">2022年〇月×日 | category1 | USER1</div>
</section>

classメゾッドで使う

1. use-dreamphp.min.jsをダウンロード解凍後、tegalog.cgiと同じフォルダにアップロードし、てがろぐのスキンファイルの「skin-cover.html」を編集して、</body>の直前に以下のコードをはりつけてください。
   tegalogフォルダと別の階層にuse-dreamphp.min.jsをアップロードする場合は、適宜src値を書き換えてください。

   <script src="use-dreamphp.min.js" charset="UTF-8"></script>
   <script> new dreamphp({
   	method : 'class',
   	classPrefix : 'deco-',
   }); </script>

2. 編集したスキンと、user-dreamphp.jsをアップロードしてください。
3. てがろぐver.3.2.0以降のバージョンではclass名を自由に指定できる装飾記法があるのでそれに従って記述して投稿してください。

   [F:項目番号:デフォルト名]

   てがろぐ管理画面から、メンテナンス「設定」➝「投稿欄の表示」➝【装飾ボタンの表示設定】で、「自由装飾」にチェックを入れるとボタンクリックで挿入できるようになります
   
   ボタンクリックで挿入する場合は、デフォルト名部分を選択し、出てきたダイアログに使いたい登録名の項目番号を半角で入力してください。
   
   カスタム表示したい場合は、カスタム表示タイプを指定してください。

   [F:項目番号カスタム表示タイプ:デフォルト名]
   [F:0t:デ…フォルト名]

   カスタム表示についてはclass属性を設定した要素を置き換える > カスタム表示の項目を参照してください

• 【参考】 てがろぐ 使い方・設定方法 > class名を自由に指定できる装飾記法
• 【参考】てがろぐで名前変換小説 | 10press：別スクリプトの導入方法の記事ですが、手順自体はだいたい同じなので。投稿方法が動画になってたりしてわかりやすいです。

wordメゾッドで使う

1. use-dreamphp.min.jsをダウンロード解凍後、tegalog.cgiと同じフォルダにアップロードし、てがろぐのスキンファイルの「skin-cover.html」を編集して、</body>の直前に以下のコードをはりつけてください。
   tegalogフォルダと別の階層にuse-dreamphp.min.jsをアップロードする場合は、適宜src値を書き換えてください。

   <script src="use-dreamphp.min.js" charset="UTF-8"></script>
   <script> new dreamphp({
   	method : 'word',
   	wordScope : '.comment',
   }); </script>

2. 編集したスキンと、user-dreamphp.jsをアップロードしてください。
3. 以下の文字列を、項目番号を該当のものに差し換えて記述して投稿してください。

   {NAME項目番号}

   
   カスタム表示したい場合は、カスタム表示タイプを指定してください。

   {NAME項目番号:カスタム表示タイプ}

   カスタム表示については設定の範囲内にある設定の文字列を置き換える > カスタム表示の項目を参照してください
4. #defName オプションでデフォルト名を設定することもできます

スキンを書き換えていてHTML構造が変わっている場合は#WordScopeオプション、項目番号9以降も変換したい場合や置き換え対象の文字列を独自に変えたい方は#wordsオプション・#WordFormatオプションを確認してください。

WordFormatオプションのhashとsquareは使わないでください。
hashは、ハッシュタグ機能を利用している場合ハッシュタグとして認識されてしまいます。squareはてがろぐの独自記法と誤認識される可能性があります。現状大丈夫でも、将来的にハッシュタグを使いたくなったり、てがろぐのアプデで新たな独自記法が追加されたときに競合する可能性もあるので、この二つ以外を使ってください。

特定状況によって特定のデフォルト名を使う

[[CATEGORYIDS]]や[[SITUATION:CLASS]]の内容や、URLのパラメータを判断材料にして、defNameオプションの値を入れ替えるようにすれば、該当のページで特定のデフォルト名を使うこともできる、はず？（未検証）

defNameオプションは特定の「投稿」ではなく特定の「ページ」でのデフォルト名なので、複数の投稿を一覧表示しているときに「投稿ごと」に違うデフォルト名を表示したいような場合は、defNameオプションではなくclassメゾッドを使ってください。

PPP（PictPostPersonal） で使う方法

新規で使い始める場合はdream.phpをダウンロードして、設定～登録フォーム作成まで進めてください。
すでにサイト内で使っているdream.phpがあるなら再度DLする必要はありません。保存済みの登録名があればそれが使われます。Shift_JIS版のdream.phpを使っている場合は、encoding.jsを読み込ませてください。

PPP公式サイトでも記事を作って頂いたので、そちらもご参考にどうぞ。

• Dream.phpとの連携 - PictPostPersonal Simple Blog System 配布サイト

テンプレートの編集方法

追記 PPP ver.1.10.0 から、設定画面で「記事の固定フッターHTML」が設定できるようになりましたので、テンプレートを書き換えるかわりに、「記事の固定フッターHTML」の設定フォームにuse-dreamphp.jsを読み込むコードを入力してください。

PPP ver.1.10.0未満でテンプレートを編集する場合

templates/template_view.phpを、env/templates/フォルダ（なければ新規作成）内にコピーペーストして、そのenv/templates/template_view.phpを編集してください。

PPPは上記手順でテンプレートを書き換えできますが、作成者様曰く「テンプレートの自己改修は上級者向けです」とのことなので、その旨ご理解の上で編集してください。PPPのバージョンアップ時は具体的な更新内容を必ずチェックして、templates/template_view.phpに変更があった際には、適宜env/フォルダ内のファイルも修正してください。

• 【参考】PPP > templateのユーザーカスタムについて

dataメゾッドで使う

1. env/templates/template_view.phpの</body>直前に以下のコードをはりつけてください。
   PPP設置フォルダと別の階層にuse-dreamphp.min.jsをアップロードする場合は、適宜src値を書き換えてください。相対パスは./から始めると、アクセスURLにあわせてパスも書き換わります。

   <script src="./use-dreamphp.min.js" charset="UTF-8"></script>
   <script> new dreamphp({}); </script>

2. 書き換えたファイルとuse-dreamphp.min.jsをアップロードしてください。
3. PPPは投稿にHTMLタグが使えるので、dataメゾッドでの記述方法に従ってHTMLタグを書いて投稿してください。
   

classメゾッドで使う

PPP ver.1.8から追加された、ユーザー定義スタイル（class属性の追加）の特殊記述を利用します。 ※PPPは投稿内でHTMLが使えるのでこれに依らずにHTMLタグを投稿しても使えます。

1. env/templates/template_view.phpの</body>直前に以下のコードをはりつけてください。
   PPP設置フォルダと別の階層にuse-dreamphp.min.jsをアップロードする場合は、適宜src値を書き換えてください。相対パスは./から始めると、相対パスは./から始めると、アクセスURLにあわせてパスも書き換わります。

   <script src="./use-dreamphp.min.js" charset="UTF-8"></script>
   <script> new dreamphp({
   	method: 'class',
   	classPrefix: 'user_',
   }); </script>

2. 書き換えたファイルとuse-dreamphp.min.jsをアップロードしてください。
3. ユーザー定義スタイル（{.UserCSSName}～{/.}）の呼び出しの記法に従ってして記述して投稿してください。
   カスタム表示したい場合は、カスタム表示タイプも指定できます。カスタム表示についてはclass属性を設定した要素を置き換える > カスタム表示の項目を参照してください

   {.項目番号}デフォルト名{/.}
   {.項目番号カスタム表示タイプ}デフォルト名{/.}

   

• 【参考】PPP > 各記事ページの表示形態とHTMLの利用 > 特殊記述

wordメゾッドで使う

1. env/templates/template_view.phpの</body>直前に以下のコードをはりつけてください。
   PPP設置フォルダと別の階層にuse-dreamphp.min.jsをアップロードする場合は、適宜src値を書き換えてください。相対パスは./から始めると、アクセスURLにあわせてパスも書き換わります。

   <script src="./use-dreamphp.min.js" charset="UTF-8"></script>
   <script> new dreamphp({
      method: 'word',
      wordFormat: 'square',
      wordScope : '#contents-area'
   }); </script>

2. 書き換えたファイルとuse-dreamphp.min.jsをアップロードしてください。
3. 以下の文字列を、項目番号を該当のものに差し換えて記述して投稿してください。
   カスタム表示したい場合は、カスタム表示タイプも指定できます。カスタム表示については設定の範囲内にある設定の文字列を置き換える > カスタム表示の項目を参照してください。#defName オプションでデフォルト名を設定することもできます

   [NAME項目番号]
   [NAME項目番号:カスタム表示タイプ]

   

WordFormatオプションはcurly と hash以外にしてください。PPPの独自記法やMarkdownコマンド、タグ前の「#」との誤認識で誤変換されたり不具合が起こる可能性があります。
テンプレートを書き換えていてHTML構造が変わっている場合は#WordScopeオプション、項目番号9以降も変換したい場合や置き換え対象の文字列を独自に変えたい方は#wordsオプションを確認してください。