TAの日々ブログ（＋α）: 8月 2016

2016年8月30日火曜日

【JavaScript】難読化のツール「/packer/」

JavaScriptの圧縮・難読化の定番ツール「packer」の使い方をまとめました。
圧縮は、コメントなど、いらないコードを削除してくれます。
難読化は、ソースコードをわかりづらくすることです。
ただ、JavaScriptはソースがみれるので、難読化しても、解読は可能です。

http://dean.edwards.name/packer/

使い方は、圧縮・難読化したいソースコードを上のテキストエリアにペーストして、「Pack」をクリックするだけです。

オプションは「Base62 encode（英数字のみのエンコード）」と「Shrink variables（変数名の圧縮）」の2つが用意されています。
このオプションを利用しないと空白・改行を除去するだけの動作になります。
「Shrink variables（変数名の圧縮）」をチェックして、packクリックで、難読化は十分です。

【参考URL】
http://www.koikikukan.com/archives/2012/04/23-011111.php

2016年8月22日月曜日

【HTML5/CSS】リスト要素に、マークに画像を使用する際の方法

ホームページのリスト要素の先頭に画像を付けたい時があります。
そこで、その方法について、調べてみました。

下の画像が、リスト要素に矢印画像を付けた例です。

１、HTML
headタグ内に使用するcssファイルを定義します。

<link rel="stylesheet" href="./css/test.css" type="text/css">

body要素にリスト要素を定義します。
<body>
    <header>
        <div class="navi_spec" style="float:none;">
            <ul class="spec-ul">
                <li class="sample1"><a href="#top">リスト１</a></li>
                <li class="sample1"><a href="#">リスト２</a></li>
            </ul>

            <div class="navi_spec2" style="float:none;margin-top:-20px">
                <ul class="spec-ul2" style="background:#715c1f">
                    <li class="sample2"><a href="jiko_sp.html#top">リスト３</a></li>
                    <li class="sample2"><a href="houmon_sp.html#top">リスト４</a></li>
                </ul>
            </div>
        </div>
    </header>
    <h1>Test App</h1>
     <div id="content"></div>
</body>

２、CSS
test.cssファイルに以下リスト要素を定義します
         ul {
            list-style-type:none;
            line-height:1.3em;
        }
        li.sample1{
            padding-left:22px;
            background-image:url("arrow_black2.png");
            background-repeat:no-repeat;
          background-position:0px 0px;
        }
        li.sample2{
            padding-left:22px;
          background-image:url("arrow_white2.png");
        background-repeat:no-repeat;
          background-position:0px 0px;
        }

【参考URL】
http://www.webword.jp/cssguide/ref-list/index5.html

2016年8月16日火曜日

Win10環境下で、Silverlight開発

Windows7でVisualStudio2010でSilverlightプログラム開発していました。

Windows10に更新したところ、VisualStudio2010でエラーになりました。

そこで、Windows10環境下でのSilverlight開発環境構築手順を調べましたので、まとめてみました。

以下手順で、

Win10環境下で、Silverlight開発できるようになりました。

※VS2010で作成したプロジェクトは、VS2015での開発となります

(1) Silverlightプログラムアンインストール

「スタートメニュー」「コントロールパネル」「プログラムと機能」を選択

Microsoft Silverlight、Microsoft Silverlight 5 SDKを選んでアンインストール

※Silverlight 3,4もある場合は一緒にアンインストール

(2) 2015用プロジェクト用に、2010で作成したプロジェクトをコピーする

(3) (2) を開く

VisualStudio2015でSilverlight開発環境がセットアップしていないと、プロジェクトが全部よみこめないので、VS2015の変更を行い、Silverlightの開発環境の設定を行う

(4) (3)で開いたプロジェクトを閉じる

(5) VisualStudio2015の変更

「スタートメニュー」「コントロールパネル」「プログラムと機能」を選択

　Microsoft Visual Studio Enterprise 2015 with Update 1を選択して、右クリックメニュー「変更」を選択

変更用ダイアログで「Silverlight 開発キット」を選択して、更新を実行

(6) Visual Studio2015を起動して、新しいプロジェクト作成する

Silverlightのランタイムインストールを促す画面が表示される。画面に従ってインストールする。

インストール後、Visual Studioを閉じる

(7) チャートコントロールなどのルールキットを使用している場合は、下記URLからツールキットをダウンロードする

http://silverlight.codeplex.com/
から「Download the Silverlight 5 Toolkit 」をクリックして、
http://silverlight.codeplex.com/releases/view/78435
からダウンロードする

2016年8月9日火曜日

Html2Canvasでwebページのスクリーンショットを取ろう

JavsScriptを使って、スクリーンショット及びファイル保存を行う方法について、調べてみました。
以下まとめておきます。

1、html2canvas
html2canvasをつかって、画面キャプチャ及び、キャプチャした画面をダウンロードする
サンプルをつくってみました。

まず、次のサイトからhtml2canvas.jsを取得します。
https://github.com/niklasvh/html2canvas/releases

(1) HTML
スクリーンショットのimgをクリックしたら、プレビューダイアログを表示して、キャプチャした画面を表示して、ダウンロードの<a>タグを表示して、クリックしたら、ファイル保存するHTML
ファイルのサンプルです。
※svgをHTML内で使うときは、html2canvas.svg.jsも定義してください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <script src="scripts/html2canvas.js"></script>
    <script src="scripts/html2canvas.svg.js"></script>
    <script src="scripts/create_image.js"></script>
</head>

<body id="id_body">
     <div id="dv_color_set">
         <img id="img-printer" src="images/camera.png" title="スクリーンショット" onclick="OnPrintPreview()"/>
     </div>

     <div id="print_preview">
        <img id="screen_image" style="width:400px;height:400px;margin-top:0px;margin-left:50px">
        <a id="download" href="#" download="test.png"></a>
        <button id="print_preview-cancel">Cancel</button>
    </div>
</body>
</html>

(2) JavaScript
スクリプト(create_image.js)では、imgクリック時に関数(OnPrintPreview)を定義します。
OnPrintPreviewで、キャプチャ関数(screenshot）を実行します。
screenshotでhtml2canvasを使って画面キャプチャします。

function OnPrintPreview() {
    erase_screenshot("#id_body");
    screenshot("#id_body");
};

function screenshot(selector) {
    var element = $(selector)[0];
    html2canvas(element, {
        onrendered: function (canvas) {
            var imgData = canvas.toDataURL();
            $('#screen_image')[0].src = imgData;
            $('#download')[0].href = imgData;
            $('#download')[0].innerHTML = "Download";
        }
    });
}

function erase_screenshot() {
    $('#screen_image')[0].src = "";
    $('#download')[0].href = "#";
    $('#download')[0].innerHTML = "";
}

※Downloadクリック時のイメージファイル保存は、IEではできませんでした（Chrome/Firefoxは可能でした）

２、jsPDF
まず、次のサイトからjspdf.jsを取得します。
https://parall.ax/products/jspdf

ライブラリ(jspdf.js)を使って画面キャプチャしたものをPDFファイルに保存させます。

HTML内で、script定義します。
スクリプト内関数screenshotを次のように変更します。

※ただし、jspdf.jsでは、addImage関数がないとエラーがでたので、jspdf.debug.jsを使用します。
また、jspdf.min.jsをつかうと、エラーとはならないのですが、PDF保存できませんでした。

<script src="scripts/jspdf/jspdf.debug.js"></script>



function screenshot(selector) {
    var element = $(selector)[0];
    html2canvas(element, {
        onrendered: function (canvas) {
        var canvasImage = canvas.toDataURL("image/jpeg");
        var pdf = new jsPDF();
        pdf.addImage(canvasImage, 'JPEG', 0, 0, 210, 210);
        pdf.save('C:\TEMP/sample.pdf');
        }
    });
}

【参考URL】
https://html2canvas.hertzen.com/ (英語)
http://bitwave.showcase-tv.com/html2canvas%e3%81%a7web%e3%83%9a%e3%83%bc%e3%82%b8%e3%81%ae%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88%e3%82%92%e5%8f%96%e3%82%8d%e3%81%861/
http://www.petitmonte.com/javascript/html2canvas.html
http://zentoo.hatenablog.com/entry/2014/02/11/161456
http://blog.k-kansei.com/?p=1319

JavaScript IIFE（Immediately Invokable Function Expression）デザインパターン

C++/C#を学んで、JavaScriptを勉強始めてみると、JavaScriptのIIFE(Immediately Invokable Function Expression)で、私は悩みました。

この即時関数を初めて知った時、その必要性が分かりませんでした。
それは、「普通に関数を定義して、その関数を呼び出すのと何が違うんだろう」って思ったからです。

そのIIFEについて、書いたサイトがあったので、勉強して、簡単にまとめてみました。

１、IIFE(Immediately Invokable Function Expression)
イッフィーと呼ぶ。
即時関数(即時関数は関数を定義すると同時に実行するための構文)と呼ばれています。
目的は、カプセル化の為に使われるようです。

【定義】
//即時関数の構文
(function () {
    //関数の中身・・・
}());

即時関数は定義の後すぐに実行され再利用もされないため、関数名は不要。

//引数つきの構文の場合
(function (param1, param2, ...) {
    //関数の中身・・・
}('hoge', 'fuga', ...));
・・・・hoge,fugaは初期値

【例文】
var test = (function(){
    var n = 0;
    return {
        getN: function(){
            return n;
        },
        setN: function( x ){
            n = x;
        }
    }
})();
test.setN(99);
test.getN(); // 99と表示
test.n; 　　　// エラーとなる（nはカプセル化されて直接参照できない）

２、Function関数

【定義】
function 関数名 ( 引数 ){
   命令文;
   return 戻り値;
}

戻り値 = 関数名 ( 引数 );

また、次のように関数funcを定義して、callで実行する方法もあります。

var func = function() {
console.log('Hello World!!');
};
func.call();// 呼び出し

その他、applyなどもありますが、次のURLを一読するとわかりやすかったです。
http://www.xenophy.com/learning_place/javascript/function/1_arguments/

３、名前付き関数と即時関数の主な用途の違い
Funcion関数：再利用を前提とした一連の処理を定義する
IIFE(即時関数) ：再利用されない一連の処理を新たなスコープで包み込む

【参考URL】
http://aphall.com/2013/06/javascript-iife-module-pattern/
http://qiita.com/kyoshiro-obj/items/dc9a336f56f8ddaa1488
http://analogic.jp/immediate-function/
http://www.codeproject.com/Articles/1110916/JavaScript-IIFE-Design-Pattern

登録: 投稿 (Atom)