ホーム > カテゴリ > HTML5・JavaScript >

EXE/DLLなどのリソースをTreeViewで表示する[iResEditor.js]

実行ファイルのリソースをTreeViewで表示する方法です。

使用するライブラリの入手

iResEditor
http://www.petitmonte.com/labo/iResEditor/

jQuery (1.2.6)
https://jquery.com
https://developers.google.com/speed/libraries/
※バージョンは"1.2.6"です。

jquery-treeview
https://github.com/jzaefferer/jquery-treeview

全てダウンロードしたらファイルの構成は次のようにします。

サンプルの実行結果

サンプルコード - Sample code

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="jquery.treeview.css">
<style>
a {
  color:#4169e1;
  text-decoration:none;
}

a:hover {
  color:#6495ed;
  text-decoration:underline;
}
</style>
<script src="jquery.min.js"></script>
<script src="jquery.treeview.js"></script>
<script src="zip.min.js"></script>
<script src="iResEditor.js"></script>
<script>

var ResEditor;
 
function onDragOver(event){ 
  event.preventDefault(); 
} 
  
function onDrop(event){
  onAddFile(event);
  event.preventDefault(); 
}  

function htmlspecialchars(str){
 return (str + '').replace(/&/g,'&amp;')
                  .replace(/"/g,'&quot;')
                  .replace(/'/g,'&#039;')
                  .replace(/</g,'&lt;')
                  .replace(/>/g,'&gt;'); 
}

// リソースストリームを取得する(RAW)
function getResStream(resType,resNameID,resLangID){
  var Resource = ResEditor.PEAnalyst.Resource; 
  
  for(var i=0;i<Resource.Language.length;i++){
    
    // 種類
    var IntegerID;
    if(Resource.Type.ResourceDirectoryEntries[Resource.Language[i].parent].ResourceNameFlg){
      IntegerID = Resource.Type.ResourceDirectoryEntries[Resource.Language[i].parent].ResourceName;
    }else{
      IntegerID = Resource.Type.ResourceDirectoryEntries[Resource.Language[i].parent].IntegerID;
    }    
    
    // 種類とIDが一致        
    if(IntegerID === resType && Resource.Language[i].resNameID === resNameID){
      
       for(var j=0;j<Resource.Language[i].ResourceDirectoryEntries.length;j++){
       
        // 言語IDが一致
        if(Resource.Language[i].ResourceDirectoryEntries[j].IntegerID === resLangID){
          
          // 該当リソースの取得
          ResEditor._BIN.Pos = Resource.Language[i].ResourceDataEntry[j].DataRVA - ResEditor._ResourceRVA;
          return ResEditor._BIN.Read(Resource.Language[i].ResourceDataEntry[j].Size);
        }
      }
    }
  }   
  return;   
}

// リソースの表示
function ShowResource(resType,resNameID,resLangID){

  // 指定されたコンパイル済みリソース(RAWデータ)をUint8Array型で取得する
  var raw = getResStream(resType,resNameID,resLangID);
  
  /*
    コンパイル済みリソースは、以下のクラスで展開可能です。(iResEditor.js参照)
    ※Dialog,Menu,StringTableはResEditor.Editを使用する方法もあります。
    
    TStringResDecode
    TMessageResDecode
    TDialogResDecode
    TMenuResDecode
    TIconResDecode
    TCursorResDecode
    TBitmapResDecode
    
    上記外以外のリソースは各自でクラスを追加して展開して下さい。
  */
  
  // ... ここに処理を追加する
  
  // サンプル用
  alert('resType = ' + resType + '\n' +
        'resNameID = ' + resNameID + '\n' +
        'resLangID = ' + resLangID + '\n' );
}

// ツリービューの生成
function CreateTreeView(){
  var HTML;
  var Resource = ResEditor.PEAnalyst.Resource;
 
  HTML = '<ul id="TreeView" class="filetree">';
 
  // Resource
  if (Resource){
    var type = Resource.Type;
    var lang = Resource.Language;
        
    HTML += '<li><span class="folder">Resource</span>';
      HTML += '<ul>';
     
       // リソースの種類毎
       for(var i=0;i<type.ResourceDirectoryEntries.length;i++){
         var directory = htmlspecialchars(type.ResourceDirectoryEntries[i].ResourceTypeName);

         // リソースタイプ
         var resType;           
         if(type.ResourceDirectoryEntries[i].ResourceNameFlg){
           resType = "'" + htmlspecialchars(type.ResourceDirectoryEntries[i].ResourceTypeName) + "'";
         }else{
           resType = type.ResourceDirectoryEntries[i].IntegerID;
         }                             
         
         HTML += '<li class="closed"><span class="folder">' + directory + '</span>';
         HTML += '<ul>';
         for(var j=0;j<lang.length;j++){   

           // 同一リソース
           if(lang[j].parent === i){                    
             
             // リソースID
             var resNameID;
             if(typeof lang[j].resNameID === "string"){
               resNameID = htmlspecialchars(lang[j].resNameID);
             }else{
               resNameID = lang[j].resNameID;
             }               
                 
             // 多言語未対応
             var identifier;
             if(lang[j].ResourceDirectoryEntries.length === 1){
            
               // 言語ID
               if (lang[j].ResourceDirectoryEntries[0].ResourceNameFlg){
                 identifier = lang[j].ResourceDirectoryEntries[0].ResourceName;
               }else{
                 identifier = lang[j].ResourceDirectoryEntries[0].IntegerID;
               }
               
               HTML += '<li><span class="file">';
               if(typeof lang[j].resNameID === "string"){
                 HTML += '<a href="#" onclick="ShowResource('+ resType +',\''+ 
                                                               resNameID+'\','+
                                                               identifier +');return false;">'+ resNameID + ' : ' + identifier +'</a>';
 
               }else{
                 HTML += '<a href="#" onclick="ShowResource('+ resType +','+ 
                                                               resNameID+','+
                                                               identifier +');return false;">'+ resNameID + ' : ' + identifier +'</a>';                                                                  
               }
               
               HTML += '</span></li>';
              
             // 多言語対応
             }else{
               HTML += '<li class="closed"><span class="folder">'+ resNameID +'</span>';
               HTML += '<ul>';
              
                 for(var k=0;k<lang[j].ResourceDirectoryEntries.length;k++){
                  
                   // 言語ID
                   if (lang[j].ResourceDirectoryEntries[k].ResourceNameFlg){
                     identifier = lang[j].ResourceDirectoryEntries[k].ResourceName;
                   }else{
                     identifier = lang[j].ResourceDirectoryEntries[k].IntegerID;
                   }           
                                  
                   HTML += '<li><span class="file">';
                    if(typeof lang[j].resNameID === "string"){
                       HTML += '<a href="#" onclick="ShowResource('+ resType +',\''+ 
                                                                     resNameID+'\','+
                                                                     identifier +');return false;">'+ identifier +'</a>';                        
                    }else{
                       HTML += '<a href="#" onclick="ShowResource('+ resType +','+ 
                                                                     resNameID+','+
                                                                     identifier +');return false;">'+ identifier +'</a>';
                    }
                   HTML += '</span></li>';                     
                 }
              
               HTML += '</ul>';
               HTML += '</li>';          
             }        
           }
         }
         HTML += '</ul>';
         HTML += '</li>';
       }         
      HTML += '</ul>';
    HTML += '</li>';    
  }
   
  HTML += '</ul>';
  
  document.getElementById('TreeView_Area').innerHTML = HTML;
  $("#TreeView").treeview();
}
 
function onAddFile(event) {
  var files;
  var reader = new FileReader();
  var filename;
  
  if(event.target.files){
    files = event.target.files;
  }else{ 
    files = event.dataTransfer.files;   
  }    
 
  reader.onload = function (event) {
    var stream = new Uint8Array(reader.result);  
    
    try{
      
      // PEファイルの読み込み
      ResEditor = new TResEditor(filename);
      ResEditor.LoadFromStream(stream,true,true);  
      
      if(ResEditor.PEAnalyst.IsPacked){
        alert('このファイルは圧縮されています。');
        return;
      }
      
      if(!ResEditor.PEAnalyst.Resource){
        alert('このファイルはリソースがありません。');
        return;
      }      
      
      // TreeViewの生成      
      CreateTreeView();
          
    }catch(e){
      alert('Error : ' + e);
    }
  };
  
  if (files[0]){    
    filename = files[0].name;
    reader.readAsArrayBuffer(files[0]); 
    document.getElementById("inputfile").value = '';
  }
}        
</script>  
</head>
<body ondrop="onDrop(event);" ondragover="onDragOver(event);"> 
<div style="height:500px;width:500px;">
  <input type="file" id="inputfile" onchange="onAddFile(event);" >
  <p></p>
  <div id="TreeView_Area"></div
</div>
</body>
</html>

iResEdtor関連記事

リソースの文字列を編集する
リソースをRCファイルへ変換する
リソースをRESファイルへ変換する
リソースをバイナリファイルで抽出する
コードセクションを抽出する
データセクションを抽出する
全てのセクションを抽出する
エキスポート情報をCSVに変換する
インポート情報をテキストに変換する
隠しコードを取得する
リソースをTreeViewで表示する





関連記事


前の記事：EXE/DLLなどの隠しコードを取得する[iResEditor.js]
次の記事：JavaScriptでhtmlspecialchars()

公開日：2016年07月21日 最終更新日：2016年08月13日
記事NO：02087