THE HAM MEDIA BLOG

表示しているテキストを使ってstyleを追加してみるデモを振り返る

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
JavaScript
タグ:
jquery
javascript
Replace

先日のエントリー『CSS3のtransitionプロパティでアニメーションを試してみた』で、何気なく作ってみた、ブラウザごとでプレフィックスを変更するボタン。単純に文字の置換で実行されているのですが、その時作ったものを振り返ってみようと思います。

JavaScriptのコード

いつものことながら、DOMの操作が楽になるのでjQueryも使ってコードを書いています。

jQuery(function($){
  $('button').click(function(){
    $("style#pasteStyle").remove();
    var selfText = $(this).text(); 
    var elm = $('#pre01>code');
    var text = elm.text();
    var prefix = text.replace(/-(○○|webkit|o|moz)-/g,selfText);
    $('<style></style>',{id:'pasteStyle'}).text(prefix).appendTo('head');
    elm.text(prefix);
  });
});

これだけです。といっても、実は全然いいコードじゃないのは見逃してください。とりあえずそのエントリーだけでも動作したらいいやーという気分で作ったものです。

コードを細かく振り返る前に、この時の仕様を書きだしてみます。

おおまかな仕様

  1. 予めボタンにプレフィックスのテキストを仕込んておく
  2. クリックされたらまずは追加スタイルをリセット
  3. クリックしたボタンのテキストを変数にセット
  4. 表示しているCSSのテキストを取得
  5. 取得したテキストからプレフィックス部分を抜き出し、ボタンのテキストで置換
  6. style要素を新たに作成し、置換後のテキストを入れ、head内の最後に追加
  7. 表示部分のテキストも差し替え

あくまでプレビュー用なので、表示しているテキストがベースとなってstyleの追加が行われる仕様です。この表示されているテキストがないケースの場合は、予め特定のstyle用をHTML側でセットしておき、それを取得して変換という仕様にする必要があります。

先日のデモプレビューをもう一度

先日の『CSS3のtransitionプロパティでアニメーションを試してみた』で実際に動作させていたデモです。

.demo div{
-○○-transition-property:background-color,width,height;
-○○-transition-duration: 1s;
-○○-transition-timing-function: ease;
-○○-transition-delay: 0s;
}

このブロックにマウスをのせてね(:hoverで下の四角が伸びます)

それぞれお使いブラウザと同じプレフィックスのボタンを押したら、ブロックにマウスをのせた際にアニメーションして変化するというデモでした。

置換部分

var prefix = text.replace(/-(○○|webkit|o|moz)-/g,selfText);

textにいれたテキストの中から、-(○○|webkit|o|moz)-の該当している部分を全部抜き出して、押したボタンのテキストと置換するってだけです。わざわざ(○○|webkit|o|moz)とかしなくてもとかおもってアレコレやろうとしたんですが、プレフィックス以外の部分も拾えて置換されてしまったりしたので、とりえあえず必要なのだけ抜き出せばいいやってことで、検索の文字列は指定。

まぁ、そういう指定で検索置換するなら、「-」ハイフン部分は不要なんじゃ・・・と振り返って思ったり。

Styleタグ追加部分

$('<style></style>',{id:'pasteStyle'}).text(prefix).appendTo('head');

$('<style></style>',{id:'pasteStyle'})の部分で、pasteStyleというIDをもったstyleタグを作ります。styleタグにidアリなのかよというのは置いといて、IDを付けておけば削除の際に楽に該当の追加したStyle部分だけを削除したりすることが可能です。もちろんIDは付いていなくてもOKで、head内の最後のstyle要素とかでも取ってこれたりします。ただ、毎回付けたりとったりしているなら、IDで拾ってくるのでもいいのかと思い、とりあえずID付加。

その後、そのstyle要素内に、置換後のテキストを.text(prefix)でいれて、.appendTo('head')でhead内の最後に挿入します。

そしてここでも今更ですが、.text()を使わずとも、$('<style></style>',{id:'pasteStyle,text:prefix'})としていてもよかったなーと気づいたり…

一度作ったものも振り返ってみるといろいろ発見がある

と、なんでこのエントリー書こうかと思ったかというと、単純に.replace()の使い方をメモしておくために仕様と思ったからです。ですが、振り返っているうちに、いろいろと直しても大丈夫な箇所とか、もっとこんな仕様にしておけばよかった〜ってのを改めて考えられる場になったので、エントリーしてみました。

今後も何か作ったら失敗談含めて振り返ったりしてみようと思います。

この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/184022688
※ブログオーナーが承認したトラックバックのみ表示されます。

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

トップに戻る

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。