tumblr用の名前変換(夢小説)スクリプトを作ったよ

とりけらとのす

2021年1月11日 23:16

2021/02/21今度こそ修正完了です。

コピペでお使いのブログに名前変換スクリプトを設置することができます。夢小説好きな方はぜひ使ってみてくださいね！

小説を書いて投稿するだけ〜。単語変換×クッキー方式を採用しています。script…document…nameなどのタグによるマークアップ作業が必要ないことが特徴です。

動作確認用にtumblrにも投稿しています。tumblrの記事は引用符（クオーテーションマーク）が文字化けすることがあります。noteからコピペするほうが確実かもしれません。

（2021/01/12　バグを見つけました。アルファベットで何度も変換したり、2項目とも同じ名前で変換したりするとうまくいきません。）

（2021/01/24　↑の事項の修正しました。加えて、手順その３のidの前後関係を変更しております。）

（以前お使いだった方は手順その２、その３、その４をもう一度やり直してくださいませ。これでこの名前変換スクリプトはひとまず完成とします。）

最初の一回だけ、外観を編集＞テーマの編集＞HTMLを編集……機能にてコピペ作業があるので、パソコンの操作が必要です。それからはスマホorパソコンで小説を書くだけでOKです。

この機能はダッシュボードには使えません！　ご自身のブログにアクセスして楽しむ機能になります。そのため「外観を編集」画面から「非表示にする」のチェックを外す必要があります。

ただし、夢小説の慣例として、このスクリプトは「検索結果から非表示にする」にチェックを入れたサブブログに設置することを推奨します～。

キャプチャ

↑こんな感じでセットされます。

作るにあたって以下のサイト様を参考にしました。

Bambi’blog 名前変換「ドリーム小説」コード★

名前変換機能つきTumblrテーマ｜YumeTemp｜簡単！夢小説の作り方

それでは手順を説明します。

tumblrの準備はいいですか？

最初の設定をしましょう～

その１． metaタグをコピペ！

※パソコンが必要です

ダッシュボード→「外観を編集」画面→「テーマの編集」ボタン→「テーマを見る」を押します。ここでお好きなテーマを探して「決定」します。

「テーマの編集」に戻ります。YumeTemp様に倣いまして、モバイルテーマをオフにします。

「テーマの編集」最下部の「詳細設定」から「デフォルトのモバイルテーマを使用」をオフにします。「GoogleAMP」「tumblrを広める」もオフにします。

決定ボタンを押して戻りましょう。

次は「テーマの編集」上方の「HTMLを編集」リンクに進みます。

すると<meta name="xxxxxxxxx" content="1">のような文字が並んでいるはずです。これをmetaタグと呼びます。

キャプチャ2

画像と一致しなくても大丈夫です。metaタグの下に以下の新しいmetaタグをコピペで追加してください。

<meta name="text:ChangeTitle1" content="項目1">
<meta name="text:ChangeName1" content="名前1">
<meta name="text:ChangeTitle2" content="項目2">
<meta name="text:ChangeName2" content="名前2">

その２．入力フォームをコピペ！

※パソコンが必要です

次にコピペするのはこちらです。Bambi'sblog様を参考にしました。

<p><form name="Changer" id="NameChanger">
<span style="display:inline-block;">{text:ChangeTitle1}
<input name="DtorikeName1" type="text" /></span>
<span style="display:inline-block;">{text:ChangeTitle2}
<input name="DtorikeName2" type="text" /></span>
<span style="display:inline-block;"><input type="button" value="変換" id="changebt" onclick="torikeChange()"/>
<input type="button" value="消去" id="resetbt" onclick="torikeResetClick()" disabled="disabled"/></span></p>

貼り付ける位置はお好きなところでよいのですが、テーマ編集に慣れていない方は{block:Posts}タグの真上orすぐ手前をおすすめします。

見つからないときは　inlineMediaWidth="xxxx"　などの文字列と組み合わさっていることがあります。歯車マークを押してblock:Postsで検索をしてみましょう。

キャプチャ3

その３．idをつけます

※パソコンが必要です

上述の {block:Posts}タグのすぐ手前に

<div id="dream">

をコピペします。続いては、ずっと下のほうに{/block:Posts}タグがあるはずです。今度は {/block:Posts}タグのすぐ後ろに

</div>

をコピペします。

キャプチャ31

テーマ編集に慣れている方はお好きな位置に設定してOKです。

その４．スクリプトをコピペ！

※パソコンが必要です

最後に、さらに下のほうに</body>タグがあると思います。そのすぐ手前orすぐ後ろに以下の文字列をコピペしてください。恐ろしく長いです。

<script type="text/javascript">
//<![CDATA[
var torikeName1 = "{text:ChangeName1}";
var torikeName2 = "{text:ChangeName2}";
var torikeHiduke,torikeCoKigen;
var torikeDreamHTML = document.getElementById("dream")
var torikereg1 = new RegExp(torikeName1,'g')
var torikereg2 = new RegExp(torikeName2,'g')
var torikeHairetsu =torikeDreamHTML.innerHTML.split(/(\{[^}]*\}|<[^>]*>|[^<>]+)/g).filter(torikeHairetsu => torikeHairetsu.length > 0);
for (var i = 0;  i < torikeHairetsu.length; i++)
{ if(torikeHairetsu[i].match(/\{[^}]*\}|<("[^"]*"|'[^']*'|[^'">])*>/)) {;} 
else
{
torikeHairetsu[i]=torikeHairetsu[i].replace(torikereg1,'<span class="torikera1">'+torikeName1+'</span>').replace(torikereg2,'<span class="torikera2">'+torikeName2+'</span>');
}
}
torikeDreamHTML.innerHTML=torikeHairetsu.join("");

if (!torikeSearch_torikeco1 ()) {
document.getElementsByName('DtorikeName1')[0].placeholder=torikeName1;
;}else{
torikeCoRewrite1();
document.getElementById('resetbt').disabled=false;
}
if (!torikeSearch_torikeco2()) {
document.getElementsByName('DtorikeName2')[0].placeholder=torikeName2;
}else{
torikeCoRewrite2();
document.getElementById('resetbt').disabled=false;
}
function torikehtmlescp (string) {
if(typeof string !== 'string') {
return string;
}
return string.replace(/[&'`"<>]/g, function(match) {
return {
  "'": '&#x27;','`': '&#x60;','"': '&quot;','<': '&lt;','>': '&gt;','&': '&amp;',
}[match]
});
}
function torikeSearch_torikeco1 (){
return document.cookie.split(';').some((item) => item.trim().startsWith('torikeco1'));
}
function torikeSearch_torikeco2 (){
return document.cookie.split(';').some((item) => item.trim().startsWith('torikeco2'));
}
function torikeRender (A, B, C) {
var chan = document.getElementsByClassName(C);
for (let dainyu = 0; dainyu<chan.length;dainyu = dainyu+1) {chan[dainyu].textContent=chan[dainyu].textContent.replace(A,B);}
}
function torikeCoRewrite1 (){
var cookieValue1 = decodeURIComponent(document.cookie
.split('; ')
.find(row => row.startsWith('torikeco1'))
.split('=')[1]);
var Dream1=torikehtmlescp (cookieValue1)
torikeRender (torikeName1, Dream1, 'torikera1');
document.getElementsByName('DtorikeName1')[0].placeholder=Dream1;
document.getElementsByName('DtorikeName1')[0].value='';
}
function torikeCoRewrite2 (){
var cookieValue2 = decodeURIComponent(document.cookie
.split('; ')
.find(row => row.startsWith('torikeco2'))
.split('=')[1]);
var Dream2=torikehtmlescp (cookieValue2)
torikeRender (torikeName2, Dream2, 'torikera2');
document.getElementsByName('DtorikeName2')[0].placeholder=Dream2;
document.getElementsByName('DtorikeName2')[0].value='';
}
function torikeReset1() {
torikeHiduke = new Date();
torikeHiduke.setTime(0);
if(!torikeSearch_torikeco1())  {;
}else{
var cookieValue1 = decodeURIComponent(document.cookie
.split('; ')
.find(row => row.startsWith('torikeco1'))
.split('=')[1]);
var Dream1=torikehtmlescp (cookieValue1)
torikeRender (Dream1, torikeName1, 'torikera1');
document.cookie = "torikeco1=; Path=/; expires="+torikeHiduke.toGMTString();
document.getElementsByName('DtorikeName1')[0].placeholder=torikeName1;
}
document.getElementById('resetbt').disabled=true;
}
function torikeReset2() {
torikeHiduke = new Date();
torikeHiduke.setTime(0);
if(!torikeSearch_torikeco2()){;}
else{
var cookieValue2 = decodeURIComponent(document.cookie
.split('; ')
.find(row => row.startsWith('torikeco2'))
.split('=')[1]);
var Dream2=torikehtmlescp (cookieValue2)
torikeRender (Dream2, torikeName2, 'torikera2');
document.cookie = "torikeco2=; Path=/; expires="+torikeHiduke.toGMTString();
document.getElementsByName('DtorikeName2')[0].placeholder=torikeName2;
}
document.getElementById('resetbt').disabled=true;
}

function torikeResetClick() {
document.getElementsByName('DtorikeName1')[0].value='';
document.getElementsByName('DtorikeName2')[0].value='';
torikeReset1();
torikeReset2();  
}

function torikeChange() {
torikeHiduke = new Date();
torikeHiduke.setTime(torikeHiduke.getTime() + 30*24*60*60*1000);//クッキーの有効期限30日間
torikeCoKigen = torikeHiduke.toGMTString();  
if(!document.Changer.DtorikeName1.value.trim()) {
  ;
}
else {
if(torikeSearch_torikeco1()){
  torikeReset1();
}
 document.cookie="torikeco1="+encodeURIComponent(document.Changer.DtorikeName1.value)+"; Path=/; expires="+ torikeCoKigen;
 torikeCoRewrite1();
}
if(!document.Changer.DtorikeName2.value.trim()) {
  ;
} else {
  if(torikeSearch_torikeco2()){
    torikeReset2();
  }
  document.cookie="torikeco2="+encodeURIComponent(document.Changer.DtorikeName2.value)+"; Path=/; expires="+ torikeCoKigen;
  torikeCoRewrite2();
}
document.getElementById('resetbt').disabled=false;
}
//]]>
</script>

……長くてごめんなさい。

キャプチャ5

ここまで出来たら「プレビューの更新」→「保存」→「←ボタン」を押して「テーマの編集」画面に戻りましょう。

※HTTPS～～～という英語のメッセージが出てきて保存ができないとき

そのメッセージの意味は「HTMLの中にhttp://～～で始まるURLがあるけれど、それはtumblrでは使えないよ。https://～～に修正してください。」という意味です。

歯車マークを押して「置換」をしましょう。

1つ目の入力欄に「http:」を、2つ目の入力欄に「https:」を入れて「All」変換します。これで保存できるはずです。

その５．変換用のデフォルト名を設定します

※パソコンが必要です

これが設定のラストです！　「テーマの編集」画面では名前変換の説明やデフォルト名を設定します。設定項目を下にスクロールするとこんな入力画面が出現しているはずです。

キャプチャ7

ここに「名字」「佐藤」「名前」「桜子」とか……

「あだ名」「番長」「好きな色」「赤」とか……

ご自由に設定してください。

最後に「保存」→「終了」を忘れずに。

これで設定は終わりです。お疲れ様でした～。

小説を書きましょう～

※ここからはスマホでもOKです。

その５で設定した名前を使って小説を書きましょう。（一番書くのが簡単なのはリッチテキストモードです。歯車ボタンから変更できます。）

キャプチャ8

繰り返しになりますが、残念ながらダッシュボードでは名前変換できません。ご自身のブログにアクセスして名前変換する必要があります。

キャプチャ9

上手くできたでしょうか。

皆さん、よい夢小説ライフを～。