facebookのウォールに流れていた投稿を見ていたら、Webサイトのモックを作る時にあったら便利そうなJSのアイデアがあったので作ってみました。

  • 見出しの文字数表示（何文字でこんなもんですよーって見せる時、結構面倒臭い）
  • 繰り返しているブロックの自動表示（似たような内容のブロックを数えながらコピペする作業は正直面倒臭い）
  • サンプル文章を勝手に入力（文字数調整して入力するの面倒臭い。■■■■◇■■■■◇■■■■◇とか白いの挟んでいても数えたくない。）

90zbear / jq.htmlmockhelper
https://github.com/90zbear/jq.htmlmockhelper

とりあえずgithubにあげておきましたよっと。

使い方

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="jq.htmlmockhelper.js"></script>

お約束でjQueryの読み込みとプラグインの読み込み。

見出しの文字数表示

$(function(){
$("body").htmlmockhelper({"mode" : "headline"});
});

modeにheadlineを指定。上記サンプルではbody内のすべての「h1」〜「h7」に適用されます。

繰り返しているブロックの表示

$(function(){
$("#demo").htmlmockhelper({"mode" : "repeat", "repeat" : 3});
});

繰り返したいブロックのclassにcopyobjを指定し、それを内包する要素をセレクタに設定。

modeにrepeatを設定。repeatの数値回数繰り返されます。

サンプル文章の自動挿入。

$(function(){
$("#dummyTxtDemo").htmlmockhelper({"mode" : "text", "text" : 300, "textstr" : "ダミーテキストを入れるといいと思う。"});
});

自動挿入したい要素のclassにdummyを設定し、それを内包する要素をセレクタに設定。

modeにtextを。textに文字数を。textstrに繰り返すダミーテキストを設定すれば表示されます。

頭にも「○○文字のテキスト」とかなんとか表示されるはず！

まとめ

ダミー文章はもっとこう気の利いたことができるようにしようとも考えたのですが、適当な文章のAPIとかなかったし・・・。

などなど、未完成な部分も多いのですが、正直CMSなんかで繰り返し処理をする部分をひたすらコピペする作業とかしたくなかったのです。

キーボードを叩く回数を１回でも減らしたいのです。省エネ運行なのです。

誰かこれよりもっとイケてるコードを書いてくれたらそれを使おう・・・。