Home > Archives > 2007-04

2007-04

Ajax関数電卓

JavaScript(mootools)でできた関数電卓を見つけました。Mootools Calculator

Mootools Calculator

見た目はWindows付属の電卓っぽいっすね。一応ドラッグできたり、Tooltipで各ボタンの説明を表示できたりします。

キー入力に対応してないのがちょっと残念ですが、こういうUIに触れる度に、web上で何でも、快適に出来るようになっていくのだなあとしみじみ思います。

JavaScriptで太陽系

JavaScript(jQuery)でぐりぐり動く太陽系を作っちゃった人がいました。jQuery solar system

jQuery solar system

すごいなぁ。

JavaScript(mootools)でSnipet付きエディタ

PostEditorというオンラインエディタがなかなか便利です。WYSIWYGではないですが、いろいろと便利なSnipetがあり、HTMLとJavaScriptのコードを書くのに特化している模様。mootools.jsのプラグインで、mootoolsは最新のSubversion版でないと動かないっぽいです。「language.FORUM.js」にSnipetの設定が書いてあり、これらを読み込んで使います。※SafariとFirefoxのみ対応らしいです。

<script type="text/javascript"  xsrc="/js/mootools.js" mce_src="/js/mootools.js"    ></script>
<script type="text/javascript"  xsrc="/js/posteditor.js" mce_src="/js/posteditor.js"    ></script>
<script type="text/javascript"  xsrc="/js/language.FORUM.js" mce_src="/js/language.FORUM.js"    ></script>

<form>
<textarea name="body" id="body" class="textarea" rows="8" cols="40"></textarea>
</form>
<script type="text/javascript">
new postEditor.create('body','body2',language.FORUM);
</script>

一番の特徴は「tab」を使うところかなと。まず普通に「tab」を押すと「半角スペース×4」が入力されます。「半角スペース×4」というのがいいですよね。主な機能は以下の通り。

  • オートインデント
  • Snipetをタブで呼び出す(ul+tabなど)
  • Snipetをタブで自動補完(ol+tab+tabとtabを続けて押すとli挿入、次のli挿入)
  • ダイナミックSnipet(date+tabで今日の日付)
  • 2つセットで使う文字を自動補完(」となる)
  • スコープを判断して括弧で括る
  • 選択したテキストをタグで挟むショートカット(ctrl+shift+[0-9])

Snipetは以下の通り。Snipetを入力しtabを押すと補完されます。(strongと打ち込んでtabを押す など)

  • strong, em, blockquote, code, javascript, html, bq, js, {(閉じとセットで挿入)
  • $, new Class, .extend, a
  • ul, ol
  • </li>の後ろでtabを押すと次のliを挿入

「$ + tab」は「$(‘id’).」に、「a + tab」は「>a xhref=”http://” mce_href=”http://” title=”desc”<text</a> 」になります。「.extend」は以下のように整形されます。

.extend({
initialize: function(value){

}
});

また、「new Class + tab」は「<javascript></javascript>」内で使うと以下のようにinitialize:を挿入しフォーマットしてくれます。

<javascript>
new Class({
initialize: function(value){
this.key = value;
}
});
</javascript>

そしてデフォルトのショートカットは以下の通り。7〜9は選択範囲のみ適用されます。

  • ctrl+shift+0 → <strong>
  • ctrl+shift+1 → <em>
  • ctrl+shift+2 → <blockquote>
  • ctrl+shift+3 → <code>
  • ctrl+shift+4 → <javascript>
  • ctrl+shift+5 → <html>
  • ctrl+shift+6 → <a xhref=”” mce_href=”” >
  • ctrl+shift+7 → 選択範囲を小文字に
  • ctrl+shift+8 → 選択範囲を大文字に
  • ctrl+shift+9 → 選択範囲の<>を<>に

divとかはないみたいですが、登録されているSnipetがかゆい所に手が届く感じなので、コードを織り交ぜたblogを書く際にはとても便利だなと思います。自分の場合は今回のエントリーを書く際に重宝しました。Snipetを変更すれば自分好みにカスタマイズも可能かと。

■mootools関連エントリー:
javascriptで伸縮するメニューができる
JavaScript(mootools)で映りこみを表現する(Reflection.js for mootools)

Home > Archives > 2007-04

Search
Feeds
Meta

Return to page top