DreamweaverからFireworksで選択しているスライスやテキストの情報を取得してソースコードにいれる！

2009/11/24

こんにちは。きんくまです。
今日はライアーゲームの日。
シーズン1を見ていないのですが、見てみようと思い、1話だけ見ている状態です。
先週のビデオをまだ見てません。
あれって、なんかレイトン教授とかに似てません？頭の体操みたいな。
ちょっとしか見てないのですみません。

それより、外事警察です。
ハゲタカのスタッフが作ったっちゅうんで、期待大です。
これは1話を見逃して、2話目を録ってある状態。未見。

さて、本題です。
Dreamweaver（以下ドリ）からFirerowks（以下FW）の情報を取得しちゃって、ソースコードに
さしこんじゃおう！という企画です。

ということなんだけど、結論からいうとあんまり意味がないものでした。
こんなことなんかしないで、FW上で簡易HTMLエディタのパネルを作ってそれでソースをまとめてドリにコピペした方が断然早そう。
なんだけど、このことに気がついたのは、全て完成してからだったという、、、。

ドリとFWは通信することができるのです。
詳しい仕組みは説明しません。
※自己責任にてお願いします！

やり方だけ。
１．このソースをダウンロード

２．それを以下のパスに入れる。ダウンロード後のファイル達をとにかくconfiguration\Floatersの中にいれればよいです。
Floaters以下の4枚のファイルが入ります。
D:\ProgramFiles\Adobe\Adobe Dreamweaver CS4\configuration\Floaters

３．メニューバーに追加
C:\Documents and Settings\{ユーザー名}\Application Data\Adobe\Dreamweaver CS4\ja_JP\Configuration\Menus\menus.xml
を開いて、
左右に並べて表示(_V)
を検索
その下の部分に

<menuitem name="FireworksInfo" enabled="true" command="dw.toggleFloater('FireworksInfo.htm')" checked="dw.getFloaterVisibility('FireworksInfo.htm')" />

を追加

４．挿入パネルをCtrlを押しながらクリック→拡張機能のリロード

dw_fw_fig1

もしわからなければドリの再起動でも可。

５．ウインドウ→FireworksInfo
でパネル立ち上げ

dw_fw_fig2

６．
FWで、スライス名をつけたスライスを選択。ドリに戻って「imgを挿入」ボタンを押す
するとドリ上のソースコードに

<img src="images/mysquare.gif" width="136" height="104" alt="">

とかって出る。

７．
FWでテキストを選択。ドリに戻って「textを挿入」を押す
するとドリのソースコードに文字が挿入される。

ここまで。
それで、これの一番苦労したところはテキストを読み込むところ。
FWの文字をドリにもってきたときにUTF-16に変換されてしまうのです。
それで、0xcc.netさんが作成していたstrutil.jsというスクリプトを使って
ドリ内部でデコードしています。

さらに、面倒くさかったのが、「”」や「’」の処理。
何やらFW側からドリ側にもってきたときに「”」から先がキャンセルされちゃったので、FW側でUTF-16に変換してからドリでまたデコードというすごい面倒なことをしています。

結論としては、さっきも書いたとおり、FW内部で簡易HTMLエディタみたいなパネルを作った方が効率がよさそうなので、
今回のは実験ぽくなっちゃいました。

最初は、ひとつのフォルダに100個ぐらいのimageがはいっているのをリンクしているのがしんどかったので、自動で名前が探せたらいいなあ、なんて思って作りました。
自分用のカスタムしたパネルだと、FW上で、選択した部分の幅を取得するやつとかを作って、floatしたときのcssのwidthを入力したりしてます。毎回FWで幅目視→ドリでキーボード入力という流れが大変になってきたので。

以下、参考までにソース

>> strutil.jsについては、http://0xcc.net/さんを参照のこと。

FireworksInfo.htm

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>FireworksConnect</title>
<script src="strutil.js"></script>
<script language="JavaScript">

var mycookie;
function insertImgSrc(){
  var path = dw.getConfigurationPath() + '/Floaters/getSliceInfo.jsf';
  mycookie = FWLaunch.execJsInFireworks(path);
  setTimeoutFunc(checkInsertImgCallback);
}

function checkInsertImgCallback(){
  var res = null;
  if(mycookie != null){
    res = FWLaunch.getJsResponse(mycookie);
  }
  if(res == null || typeof(res) == "number"){
    setTimeoutFunc(checkInsertImgCallback);
  }else if(res == 'done'){
    alert('error');
  }else{
    FWLaunch.bringDWToFront();
    var alt = "";

    var dom = dw.getDocumentDOM();
    var slicedata = res.split(",");
    var path = document.theForm.folderpath.value;
    if(path.substr(-1) != '/'){
      path = path + '/';
    }
    var src = '<img src="' + path + slicedata[0] + '" width="' + slicedata[1] + '" height="' + slicedata[2] + '" alt="' + alt + '">';
    dom.source.insert(dom.source.getSelection()[0], src);
  }
}

function setTimeoutFunc(func){
  window.setTimeout(func,500);
}

function insertText(){
  var path = dw.getConfigurationPath() + '/Floaters/getText.jsf';
  mycookie = FWLaunch.execJsInFireworks(path);
  setTimeoutFunc(checkInsertTextCallback);
}

function checkInsertTextCallback(){
  var res = null;
  if(mycookie != null){
    res = FWLaunch.getJsResponse(mycookie);
  }
  if(res == null || typeof(res) == "number"){
    setTimeoutFunc(checkInsertTextCallback);
  }else if(res == 'done'){
    alert('error');
  }else{
    res = decodeResUtf16(res);
    /*
    res = res.replace(/\r/g, '<br>\n');
    var src = '<p class="">' + res + '</p>';
    */
    var dom = dw.getDocumentDOM();
    dom.source.insert(dom.source.getSelection()[0], res);
  }
}

function decodeResUtf16(res){
    var decoded = [];
    var splitedRes = res.split('');
    var len = splitedRes.length;
    var char;
    var utfChar = [];
    for(var i = 0; i < len; i++){
      char = splitedRes[i];
      if(char == '\\'){
        //'や"対策
        if(splitedRes[i + 1] == '\\'){
          i++;
        }
        utfChar.push(char);
        for(var j = 0; j < 5; j++){
          utfChar.push(splitedRes[i + j + 1]);
        }
        decoded.push(unescapeFromUtf16(utfChar.join('')));
        utfChar = [];
        i += 5;
      }else{
        decoded.push(char);
      }
    }
    return decoded.join('');
}


</script>

<body>

<form name="theForm">
<table border="0" cellpadding="0" cellspacing="0">
<tr><td>
<input type="button" value="imgを挿入" onClick="insertImgSrc()"></td>
<td>パス<input type="text" size="10" name="folderpath" value="images"></td>
</tr>
<tr>
<td><input type="button" value="textを挿入" onClick="insertText();"></td>
</tr>
</table>
</form>



</body>
</html>

getSliceInfo.jsf

var ans = "done";
function callback(){
  return ans;
}
if(fw.selection.length == 0){
  callback();
}else{
  var sel = fw.selection[0];
  var opt = sel.exportOptions;
  var ext;
  if(opt == undefined){
    ext = fw.getDocumentDOM().exportOptions.exportFormat;
  }else{
    ext = sel.exportOptions.exportFormat;
  }
  var name = sel.baseName;
  var width = sel.width;
  var height = sel.height;
  if(ext == 'JPEG'){
    ext = 'jpg'
  }else{
    ext = ext.toLowerCase();
  }
  ans = name + '.' + ext + ',' + width + ',' + height;
  callback();
}

getText.jsf

var ans = "done";
function callback(){
  return ans;
}
if(fw.selection.length == 0 || fw.selection[0] != "[object Text]"){
  callback();
}else{
  ans = [];
  var texts = fw.selection[0].textRuns.textRuns;
  for(var i = 0; i < texts.length; i++){
    ans.push(texts[i].characters);
  }
  ans = ans.join('');
  //'と"の処理
  ans = ans.replace(/"/g, '\\u0022');
  ans = ans.replace(/'/g, '\\u0027');
  callback();
}
このエントリーをはてなブックマークに追加
LINEで送る
Pocket

■ 自作iPhoneアプリ 好評発売中！
・フォルメモ - シンプルなフォルダつきメモ帳
・ジッピー電卓 - 消費税や割引もサクサク計算！

■ LINEスタンプ作りました！
毎日使える。とぼけたウサギ。LINEスタンプ販売中！　毎日使える。とぼけたウサギ

«
»

タグ: ,
カテゴリー: blog, Dreamweaver, Fireworks, アプリケーション

ページトップへ戻る