JavaScript Tips
jsガジェット編



■  [1]はじめに

デジタルガジェット(Digital Gadget)という言葉がありますが、気のきいた小物とか目新しいちょっとした小道具といった 意味合いで使われています。そこで、JavaScriptで書いたちょっとした小物をとりあえず「jsガジェット」 ということにして(勝手に^^;)メニューや時計やカレンダーあるいは便利な機能を実現してくれるものを少しづつまとめて みたいと思います。
     


    1.jsガジェットのいわれ(?)

    ガジェットという言葉の正確ないわれはわかりませんが、最近はいろいろな場所でさまざまな 意味に使われています。筆者はガジェット警部というマンガの主人公が使う トンでもない小物群あたりの連想から来ているという話をきいたことがあります。Moziilaでは JavaScriptを利用したXULで作るWebな小物を「ヴィジェット」と呼んだりするので筆者としてはこちら の方が親近感はあるのですが「ヴィ」の字を打つのが面倒なので、前回の人類進化の法則に従い(笑) 楽な言い回しを選んでみました。

    2.jsガジェットのルール

    一応これから連載していくにあたってルールを決めておきます。ま、例によって 脱線しまくる可能性は排除できませんが、そんな筆者だからこそ(^^;; 多少のレールは必要なのです(レールがあっても車輪の足が伸びたり...)。

      • 再利用しやすくするためjs外部ファイルにまとめた「jsガジェット」をスクリプトタグから呼び出して使う形式にすること。
      • ターゲットブラウザを明示すること。
      • 最低でも、Win[e6]とWin[m1]とMac[m1]とLinux[m1]では必ず動作すること(つまり、現在最も普及しているWin版IEと、OSを縦断して動作するMoziilaを押さえるという考え方です。これで筆者の2003.12.28調査では97%のブラウザを網羅していました。)
      • グローバル変数や配列、関数などの名前の頭には「jg_」という名前をつけて識別しやすくすること。
    • 著作権フリーで改造、商用利用も自由(jsガジェットそのものを販売は不可)。コメント削除不可。改変は履歴を追加すること。


    3.たとえば、

    以前紹介したカレンダーなどは「jsガジェット」に含めようと思っています。



      日付入力用カレンダー生成
      受付日:
      登録日:
      入金日:

      日付入力欄へカーソルを入れるとカレンダーレイヤーが現れ、 カレンダーレイヤーの日付をクリックすると自動的に入力欄へ日付が入ります。


      また、次回紹介する予定のポップアップメニューは下記のようなものです。


      あるいは、筆者が前世紀(1996頃)につっくたミニスロットやおみくじがあるのですが、よくあるものですがまぁこんな小物も良いかな?と思っています。


        ミニスロット

        おみくじ
        敗者復活リロードボタン



    というわけで、2004年からはこんな感じの小物を少しずつ紹介していきたいと思っています。 では、良いお年を!



※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。