開発ブログ

ページメニュー

<< fgetcsvで配列がズレた時〜5c問題 | main | グーグルマップストリートビュー(google maps street view)をいじってみる >>

カレンダー

<< August 2017 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 >>

  • ドラクエ5のブログで使った主人公の名前を変更する処理
  • なかのひとブログで、ドラクエ5デボラと結婚した主人公の悲劇について書いています。このブログで、主人公の名前は「XXXX」と書いているのですが、これでは感情移入もできやしません。

    そこで、ひとつスクリプトを書いてみました。昔流行ったドリーム小説てヤツに近いです。

    ドリーム小説はPerlなどのCGIで書かれるのが主流でしたが、これに関してはJavaScriptも同様のことができます。本文の中から、任意の語句を取り出し、ユーザの指定した文字で置き換える、という処理をします。

    例えば、本文のうちの「XXXX」を「俺様」に変更するなら
    document.body.innerHTML=document.body.innerHTML.replace(/XXXX/g,"俺様");
    とするだけでOK。

    これだけじゃつまらないので、「俺様」じゃなくてユーザに名前を入力してもらうようにしてみました。
    name=prompt("名前を入れてください");
    if(name!=""){document.body.innerHTML=document.body.innerHTML.replace(/XXXX/g,name);}

    このままだと、ページを開いた瞬間に「名前を入れてください」と聞かれて、ユーザビリティ的によろしくないので、ボタン押下での処理に切り替えるように処理を追加。
    <form>
    <input type="button" onClick="setNames()" />
    </form>
    といったボタンをつくり、クリックイベントを
    setNames()
    として、先ほどの処理を関数化します。
    function setNames(){name=prompt("名前を入れてください");
    if(name!=""){document.body.innerHTML=document.body.innerHTML.replace(/XXXX/g,name);}}

    技術情報というにはおこがましいような情報ですが、たまにはこういう初心者的なスクリプトの解説もいいかな?と思って書いてみました。document.body.innerHTMLって何?とか、replace(/XXXX/g,name)ってトコはどうなってるの?って人は、innerHTMLreplaceといった語句をGoogle検索してみてください。

    尚、タグが有効でないブログや改行時に改行コードが入るブログでは利用が難しくなりますが、そのあたりは各ブログのカスタマイズ方法を参考にしてください。

| 開発関連 | 07:12 | comments(0) | trackbacks(0) |


コメント

コメントする

この記事のトラックバックURL

http://blog.24th.jp/trackback/941274