カテゴリー別アーカイブ: Javascript

AIRからJavaScriptの関数を呼ぶ方法

ExternalInterface.call(“JS関数名”, parameter); ってやるのかと思ってたらそうじゃないみたいなのでメモしておきます。

air2jsTest.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    creationComplete="init(event);">

  <s:layout>
    <s:VerticalLayout/>
  </s:layout>

  <fx:Script>
    <![CDATA[
      private var htmlLoader:HTMLLoader;

      private function init(event:Event):void {
        htmlLoader = new HTMLLoader();
        htmlLoader.addEventListener(Event.COMPLETE, onComplete);
        //jsを埋め込んだhtmlをロードする
        htmlLoader.load(new URLRequest("./html/air2jsTest.html"));
      }

      private function onComplete(event:Event):void {
        //htmlLoader.window.JS関数名(引数)
        var response:String = htmlLoader.window.jsFunc("http://www.google.com/");
        trace(response);
      }
    ]]>
  </fx:Script>

</s:WindowedApplication>

src/html/air2jsTest.html

<html>
<head>
<title>air2jsTest</title>
  <script type="text/javascript" src="../js/xmlhttpreq.js"></script>
</head>
<body>
</body>
</html>

src/js/xmlhttpreq.js

function jsFunc(url) {
  var req = new XMLHttpRequest();
  req.open("GET", url, false);
  req.send(null);
  return req.responseText;
}

 

HTML5のAudioタグをJavascriptから扱う

audioタグについての説明は省略。
今までの感覚だと、Javascriptで何かしらの動作をさせるには、基本的にはhtml要素がある必要があったけど、どうやらaudioタグについては無くても良いっぽい。
というのは、DOMツリーに

<audio src="audiofile.mp3"></audio>

とかが無くても良いって意味。
じゃあどうやって操作するのか

var obj = new Audio('audiofile.mp3');

obj.addEventListener("canplay", function(){
  obj.play();
});

で、再生可能になった段階で自動的に再生される。htmlにaudioタグを追加してCSSでdisplay: noneとかしなくても良い。
objをconsole.logすると、中身はaudioタグそのもの。だけどDOMツリーには追加して無い。
ただ、videoタグでは表示部分がvideoタグそのものだからか、動かないっぽい。
上のコードの続きで、再生終了したら違うファイルを再生とかなら

obj.addEventListener("ended", function(){
  obj.src = "nextfile.mp3";
});

Javascriptでフォームの省略入力コマンド

テーブル的なフォームでデータを大量に入力する必要が有る場合、時々前の行と同じだったり連番だったりして、一々入力するのが面倒だったので作った。vim使いなので何かvimライク。

// 入力値省略コマンド作成
function editor_cmd(elem) {
  /*
  初期化は省略
  */
  $(inputs).keyup(function(){
    // (focusとblurで代入したほうが良いと思う)
    prev = $(this).closest("tr.tracks").prev(); // 前の行
    next = $(this).closest("tr.tracks").next(); // 次の行
    val = $(this).val();
    // キーアップイベント時にcaseに当てはまる値なら値を置き換える
    switch (val) {                                                                             
      case ":=p": // 前の行と同じ
        if ($(prev).size()) {
          $(this).val($(prev).find("input.t1").val());
        }
        break;
      case ":=n": // 次の行と同じ
        if ($(next).size()) {
          $(this).val($(next).find("input.t1").val());
        }
        break;
      case ":+p": // 前の行の数字+1
        if ($(prev).size()) {
          $(this).val(
            val_incdec($(prev).find("input.t1").val(), true)
          );
        }
        break;
      case ":-n": // 次の行の数字を-1
        if ($(next).size()) {
          $(this).val(
            val_incdec($(next).find("input.t1").val(), false)
          );
        }
        break;
    }
  });
}

// 文字列中の数字をインクリメント, デクリメント
// 第二引数がtrueならインクリメント
function val_incdec(val, inc) {
  var len, num;

  val = val.replace(/\d+/, function(match){
    len = String(match).length;
    if (inc) {
      num = Number(match) + 1;
    }
    else {
      num = Number(match) - 1;
    }
    num = String(num);
    while (num.length < len) {
      num = '0' + num;
    } 
    return num;
  });
  return val;
}

Javascriptで画像のサイズを取得

Javascriptで画像のロード後の縦横のピクセルを取得する方法(jQuery使用)。
単純な物だしjQuery無しでも出来ると思うけど、主に動的に画像をロードしてdivのサイズとか決定したり、画像の横幅がわからないのに、cssでmargin: auto;したい時に使う。

  var img = $("#img"); // 画像のidからオブジェクトを取得

  // 画像のロードイベント(つまり画像のロードが完了したら発動
  $(img).load(function(){
    var width = $(this).width();
    var height = $(this).height();

    window.alert("width:" + width + ", height:" + height);
  });

画像のロード完了前に同じ事をしても、ロード前なので画像のサイズは取得出来ない。0とかが返って来るはず。img要素のloadイベントはsrcで指定した画像のロードが完了した時点で発動するみたい。

jQuery+IEで$(window).mousemove(

某サイトでマウスの座標を得るJavascript書いてたけど、バグというか何と言うかちょっとハマったので。
jQuery使ってて画面内でのマウスの座標を得る場合

$(window).mousemove(function(e){
  pos = e.pageX;
  ...
  ...
});

とかやって取得してたけど、ググってみたらpageXはIEでサポートしてないとか書いてある所が何個か。けど

$(document).mousemove(function(e){
  pos = e.pageX;
  ...
  ...
});

ってやったら取得出来た。意味が分からない。jQueryオブジェクトに対してだと違うんだろうか。

wordpressで画像をはみ出さないようにする

投稿者が気をつければ良いだけだけど、気にしなくても良いとみんな嬉しい。
javascriptでjQuery使って書いた。チェックはしてない。

(function(){
  var modified = 610; // 納めるべき横幅をピクセルで指定(単位はいらない)
  var target = $("img.size-full");
  $(target).attr("width", modfied);
})();

知ってるブラウザの中では、横幅だけ指定すると自動で縦横比合わせてリサイズされます。