総合 ゲーム 画像動画

【開発日誌】WordPressコード貼り付け用コンバータ

2017.10.14

公開しているwebToolやデスクトップアプリの説明と解説をする【開発日誌】の第一弾!

デス

 

全くのゼロ知識から、

私が公開しているツール・ソフトを、

このブログの読者の方が作れるようになる!

 

を目標としたハウツー記事を将来的に完成させたいと思っています。

私自身が趣味レベルなので教えられるほどの知識が無いのですが、個人で使う分には十分なツールを作れるところまで導きたいと思っています。

プログラミングに少し興味がある、でも何をどこから勉強すれば良いのか分からない。

C言語?JAVA?どれが良いの?

興味はあるがプログラミング未経験の人が通る道だと思います。そんな人でも大丈夫!

今回は将来的に完成する予定のハウツーの一部で、初めに(無知識で)読むべきものではありません。

 

 

前置きはこのぐらいにして開発日誌の本文に入ります。

 

作ろうと思ったキッカケと目標とする機能

プログラミング用の記事を作っているときにコピペでコードをWordPressに入力すると何故かインデント(字下げ)が勝手に削除されてしまう現象に遭遇したからです。
これが

var clearText = function(){
    $(document).on("click", "#clear", function(){
        $('#getText').val('');
        $('#outPut').val('');
    });    
}

こうなる

var clearText = function(){
$(document).on("click", "#clear", function(){
$('#getText').val('');
$('#outPut').val('');
});
}

もちろん検索して調べて直そうと思ったのですが解決に至らなかったのでこのツールを作ろうと思いました。エディターのマクロ操作でも良かったんですが開発日誌のついでに簡単なツールを公開できると思ったので作ってやりました。

 

目標の機能はコードに含まれる「<」を特殊文字に変換して文頭と文末に<pre><code>タグを追加することです。

なぜ特殊文字に変換するのかというとWordPressの記事編集の「テキストモード」では空白が自動整形されないからです。そしてHTMLタグは特殊文字に変更する必要があるのでこの機能が必要になりました。

ツールの方は3分で作れる内容になっています。サクッと説明していきます。

 

 

コピペするためのテキストエリアと変換ボタンをHTMLで作る。

test.html

<div>入力</div>
<textarea id="getText" rows="16" cols="120"></textarea><br>
<input id="convert" type="button" value="コンバート"></input>
<input id="clear" type="button" value="クリア"></input>
<br>
<div>出力</div>
<textarea id="outPut" rows="16" cols="120"></textarea><br>

今回はjQueryを使用するので<head></head>にjQueryを追加しておいてください。

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js”></script>

 

次にプログラムの方を

test.js

$(function(){
    convertText();
    clearText();
    // 無入力でコンバートを押すと<pre><code></code></pre>と表示されてしまいます。
})

var convertText = function(){
    $(document).on("click", "#convert", function(){
        var getText = $('#getText');
        var text = getText.val();
        var out = text.replace(/</g, '<');
        out = "<pre><code>" + out + "</code></pre>"
        $('#outPut').val(out);
    });
}

var clearText = function(){
    $(document).on("click", "#clear", function(){
        $('#getText').val('');
        $('#outPut').val('');
    });    
}

関数convertText()とclearText()を作っています。

8-14行目、動的に生成した要素にも対応できるイベントリスナ(クリック)の記述

$(document).on(“click”, “要素”, function(e){

// 処理
});

DOMを操作する時に頻繁にこの形を使います。eには発火点の要素が入ります。

 

10.var text = getText.val();

.val()でtextareaに書かれたテキストをそのまま取得します。.text()ではありません。

 

11.var out = text.replace(/</g, ‘&lt;’);

X.replace(/str1/g, ‘str2’)でXに含まれているstr1をstr2に置き換えます。gで全てのstr1を対象とします。

 

13.$(‘#outPut’).val(out);

.val()で参照できるテキストはval(str)で置き換えることができます。

 

 

とってきた文字を変換するだけの簡単な処理でしたがコードの内容を全て把握できましたか?

分からない部分がある場合はコメントしてください。

 

2017/10/14:ハウツー作成時にこの記事もリニューアルする予定です。

コメントを残す。

メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。URLを含むコメントは承認待ちになります。