文字を上下反転させるサービス「Lunicode」のまとめ

文字を上下反転させるサービス「Lunicode」のまとめ

Posted at October 11,2013 1:55 AM
Tag:[Service]

ご存知の方も多いと思いますが、文字を上下反転するサービス「Lunicode」の紹介です。

Lunicode
Lunicode

文字反転だけを紹介しているサイトが多いのですが、他にも色々な機能があるのでまとめて紹介したいと思います。

またJavaScriptライブラリがGitHubで公開されているので、利用方法についてあわせて紹介します。

1.文字を上下反転する

使い方を説明するまでもありませんが、ページ上のテキストエリアに文字を入力します。

テキストエリアに文字を入力

上下反転した文字がリアルタイムに下のテキストエリアに表示されます。

上下反転した文字

上下反転した文字は、以下のようにコピー&ペーストすることができます。

ɓɟǝpɔqɐ

下のテキストエリアに文字を入力すれば、上のテキストエリアに上下反転文字が表示されます。

全角文字は対象外のようです。

2.文字を装飾する

このサイトでは上下反転でなく、ミラー(裏返し)や文字装飾なども可能です。左側にあるメニューを選択すれば、文字を装飾することができます。

例えば1項で文字を入力したあと、左メニューの「Bubbles」をクリックします。

Bubbles

これで次のような丸で囲まれた文字が表示されます。

装飾された文字

これもコピー&ペーストすることができます。

ⓐⓑⓒⓓⓔⓕⓖ

上下反転含め、装飾には以下の8種類が用意されています。

  • Flip upside down
  • Mirror
  • Creepify
  • Bubbles
  • Bent
  • Squares
  • Round Squares
  • Tiny Capitals

3.HTMLを表示する

上下反転や文字装飾をどうやって行っているのか気になるところですが、気になる方はテキストエリア左下にある「Show HTML」をクリックしましょう。

Show HTML

これで元の文字を実体参照で表示します。

実体参照

4.絵文字を表示する

絵文字を表示するには、ページ上部にある「Emoticons」タブをクリック。

Emoticons

これで絵文字の一覧が表示されます。

絵文字の一覧

左側のメニューを切り替えればシンボルなどを表示させることもできます。

左メニュー

5.JavaScriptの利用

ページ右上にある「about」をクリック。

about

GitHubのリンク(オレンジのバナー)が表示されるのでクリック。

GitHubのリンク

リンク先でlunicode.jsをダウンロードしてください。

あとは以下のようにLunicode()でオブジェクトを作成して、tools.flip.encodeなどを実行します。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="lunicode.js"></script>
<script>
$(function(){
    var luni = new Lunicode();
    var encode = luni.tools.flip.encode("abcde");
    $('#result').text(encode);
});
</script>
<div id="result"></div>

「flip」の部分がエフェクトを示すもので、他に

  • mirror
  • creepify
  • bubbles
  • squares
  • roundsquares
  • bent
  • tiny

が用意されています。

「encode」が反転、「decode」が元に戻す動作になります。

関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)