JavaScript: 2006年9月アーカイブ

flash.external.ExternalInterface クラスを使用する

flash.external.ExternalInterface は Flash Player とそのコンテナ(ブラウザなど)間で通信する為のクラス。ブラウザの HTML ドキュメントに Flash Player からちょっかいだしたり出されたりできる。

使い道

例えばシステムのフォントを列挙して JavaScript で利用する。サンプルはこちらscreenshot.png

使用した MXML ファイル

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" applicationComplete="this.applicationCompleteEventHandler(event);" layout="absolute" width="400" height="200" fontSize="12">
    <mx:Script>
        <![CDATA[
            import flash.external.ExternalInterface;
            import mx.events.FlexEvent;

            protected function applicationCompleteEventHandler(event:FlexEvent):void
            {
                var available:Boolean = ExternalInterface.available;
                this.availableLabel.text = "外部インターフェイス: "
                    + (available ? "利用可能" : "利用不可");

                if (available)
                {
                    ExternalInterface.addCallback("enumerateFont", this.enumerateFont);
                }
            }
            
            public function enumerateFont():Array
            {
                if (ExternalInterface.available)
                {
                    var fontNames:Array = new Array();
                    var fonts:Array = Font.enumerateFonts(true);
                    
                    for each (var font:Font in fonts)
                    {
                        fontNames.push(font.fontName);
                    }

                    return fontNames;
                }
                
                return null;
            }
        ]]>
    </mx:Script>
    
    <mx:Panel layout="vertical" title="フォント列挙" x="10" y="10" horizontalAlign="center" paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10">
        <mx:Label id="availableLabel"/>
    </mx:Panel>
</mx:Application>

iTunes でおなじみの検索ボックス スタイル

勉強しないとだめなのについ掃除を始めちゃう、そんな気分なので、こんなの preview.png を CSS で再現しちゃう。

こうしちゃう

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
  <head>
    <title>検索ボックス</title>

    
    <style type="text/css">
      #search input.word
      {
        margin: 0;
        padding: 0.4em 0.4em 0.4em 24px;
        width: 16em;
        border: 1px solid silver;
        background-color: white;
        background-image: url("search.gif");
        background-position: 4px center;
        background-repeat: no-repeat;
      }

      #search input.active
      {
        color: black;
      }

      #search input.passive
      {
        color: gray;
      }
    </style>
    
    <script type="text/javascript">
      this.onload = function ()
      {
        var word = this.document.forms.search.word;
        
        word.onfocus = function ()
        {
          if (this.value == this.defaultValue)
          {
            this.value = '';
            this.className = 'word active';
          }
        }
        
        word.onblur = function ()
        {
          if (this.value == '')
          {
            this.value = this.defaultValue;
            this.className = 'word passive';
          }
        }
        
        word.onkeydown = function (event)
        {
          var e = event || window.event;
          
          if (e.keyCode == 13)
          {
            if (this.value != '')
            {
              this.form.submit();
            }
          }
        }
        
        word.onfocus();
        word.onblur();
      }
    </script>
  </head>

  
  <body>
    <form id="search" action="#dummy">
      <p>
        <input type="text" name="word" value="検索キーワードを入力して下さい" class="word" tabindex="1" accesskey="F" />
      </p>
    </form>

  </body>
</html>

こうなった

サンプルはこちらです。

問題点

  • CSS のサポートが控え目なブラウザでは控え目なスタイルに。
  • JavaScript を切ってたら Firefox 等で送信できない。これは type="submit" な INPUT 要素を追加して CSS で見えなくするべきかしら?

更に問題点

間に合わなくなった。

このアーカイブについて

このページには、2006年9月以降に書かれたブログ記事のうちJavaScriptカテゴリに属しているものが含まれています。

前のアーカイブはJavaScript: 2006年6月です。

次のアーカイブはJavaScript: 2007年4月です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

Powered by Movable Type 4.12