toshinarin/gist:5957489

## gistfile1.html
<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">

    <style>
        #entries-title {
            margin: 10px;
        }
        #preview-title {
            margin: 10px;
        }
        #preview-body {
            border: solid 2px #f7f7f7;
            height: 800px;
            margin: 10px;
            overflow: scroll;
            width: 800px;
        }
        #help {
            position: fixed;
            background-color: rgba(255, 255, 255, 0.8);
            font-size: 30px;
            height: 100%;
            left: 0;
            text-align: center;
            top: 0;
            width: 100%;
        }
        #help-message {
            font-size: 30px;
            height: 150px;
            left: 50%;
            margin: -75px 0 0 -200px;
            position: absolute;
            text-align: center;
            top: 50%;
            width: 400px;
        }

        #drop-area {
            position: fixed;
            background: transparent;
            font-size: 30px;
            height: 100%;
            left: 0;
            text-align: center;
            top: 0;
            width: 100%;
        }
        .dropping #drop-area {
            background-color: rgba(0, 0, 0, 0.2);
        }
    </style>
</head>
<body>

<nav>
    <h2 id="entries-title">記事のリスト</h2>
    <ul id="entries"></ul>
</nav>

<div id="help">
    <div id="help-message">
        Qiitaでexportしたjsonファイルをドラッグ＆ドロップしてください。
    </div>
</div>

<div id="drop-area">

</div>

<section id="preview-area">
    <h2 id="preview-title">タイトル</h2>
    <p id="preview-body">
        内容
    </p>
</section>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>

    /**
     * Reference: http://stackoverflow.com/questions/8869403/drag-drop-json-into-chrome
     */
    function DnDFileController(selector, onDropCallback) {
        var el_ = document.querySelector(selector);

        this.dragenter = function(e) {
            e.stopPropagation();
            e.preventDefault();
            el_.classList.add('dropping');
        };

        this.dragover = function(e) {
            e.stopPropagation();
            e.preventDefault();
        };

        this.dragleave = function(e) {
            e.stopPropagation();
            e.preventDefault();
            el_.classList.remove('dropping');
        };

        this.drop = function(e) {
            e.stopPropagation();
            e.preventDefault();

            el_.classList.remove('dropping');

            onDropCallback(e.dataTransfer.files, e);
        };

        el_.addEventListener('dragenter', this.dragenter, false);
        el_.addEventListener('dragover', this.dragover, false);
        el_.addEventListener('dragleave', this.dragleave, false);
        el_.addEventListener('drop', this.drop, false);
    }

    var qiitaData = null;
    function setData(data){
        qiitaData = data;
        var entries = $('#entries');

        entries.empty();
        for (var i = 0, l = data.length; i < l; i++) {
            var entry = $('<li><span class="item-title"></span> (<a class="item-body" href="#">html</a>・<a class="item-mark-down" href="#">raw</a>)</li>');
            entry.data({
                index: i
            }).find('.item-title').text(data[i].title);
            entries.append(entry);
        }
    }

    function initViewer(){
        var entries = $('#entries');
        var body = $('#preview-body');
        var bodyTitle = $('#preview-title');

        entries.on('click', '.item-body', function(){
            if (!$.isArray(qiitaData)) return false;
            var index = $(this).parent().data('index');
            var item = qiitaData[index];
            body.html(item.body);
            bodyTitle.text(item.title);
            return false;
        });

        entries.on('click', '.item-mark-down', function(){
            if (!$.isArray(qiitaData)) return false;
            var index = $(this).parent().data('index');
            var item = qiitaData[index];
            var pre = $('<pre></pre>');
            pre.text(item.raw_body);
            body.html(pre);
            bodyTitle.text(item.title);
            return false;
        });
    }

    $(function(){
        /**
         * Reference: http://stackoverflow.com/questions/8869403/drag-drop-json-into-chrome
         */
        var dnd = new DnDFileController('body', function(files) {
            var f = files[0];

            if (!f.type.match('application/json')) {
                alert('Not a JSON file!');
                return;
            }

            var reader = new FileReader();
            reader.onloadend = function(e) {
                var result = JSON.parse(this.result);
                $('#help, #drop-area').hide();
                setData(result);
            };
            reader.readAsText(f);
        });

        initViewer();
    });
</script>

</body>
</html>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title></title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width">

	<style>
	#entries-title {
	margin: 10px;
	}
	#preview-title {
	margin: 10px;
	}
	#preview-body {
	border: solid 2px #f7f7f7;
	height: 800px;
	margin: 10px;
	overflow: scroll;
	width: 800px;
	}
	#help {
	position: fixed;
	background-color: rgba(255, 255, 255, 0.8);
	font-size: 30px;
	height: 100%;
	left: 0;
	text-align: center;
	top: 0;
	width: 100%;
	}
	#help-message {
	font-size: 30px;
	height: 150px;
	left: 50%;
	margin: -75px 0 0 -200px;
	position: absolute;
	text-align: center;
	top: 50%;
	width: 400px;
	}

	#drop-area {
	position: fixed;
	background: transparent;
	font-size: 30px;
	height: 100%;
	left: 0;
	text-align: center;
	top: 0;
	width: 100%;
	}
	.dropping #drop-area {
	background-color: rgba(0, 0, 0, 0.2);
	}
	</style>
	</head>
	<body>

	<nav>
	<h2 id="entries-title">記事のリスト</h2>
	<ul id="entries"></ul>
	</nav>

	<div id="help">
	<div id="help-message">
	Qiitaでexportしたjsonファイルをドラッグ＆ドロップしてください。
	</div>
	</div>

	<div id="drop-area">

	</div>

	<section id="preview-area">
	<h2 id="preview-title">タイトル</h2>
	<p id="preview-body">
	内容
	</p>
	</section>

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<script>

	/**
	* Reference: http://stackoverflow.com/questions/8869403/drag-drop-json-into-chrome
	*/
	function DnDFileController(selector, onDropCallback) {
	var el_ = document.querySelector(selector);

	this.dragenter = function(e) {
	e.stopPropagation();
	e.preventDefault();
	el_.classList.add('dropping');
	};

	this.dragover = function(e) {
	e.stopPropagation();
	e.preventDefault();
	};

	this.dragleave = function(e) {
	e.stopPropagation();
	e.preventDefault();
	el_.classList.remove('dropping');
	};

	this.drop = function(e) {
	e.stopPropagation();
	e.preventDefault();

	el_.classList.remove('dropping');

	onDropCallback(e.dataTransfer.files, e);
	};

	el_.addEventListener('dragenter', this.dragenter, false);
	el_.addEventListener('dragover', this.dragover, false);
	el_.addEventListener('dragleave', this.dragleave, false);
	el_.addEventListener('drop', this.drop, false);
	}

	var qiitaData = null;
	function setData(data){
	qiitaData = data;
	var entries = $('#entries');

	entries.empty();
	for (var i = 0, l = data.length; i < l; i++) {
	var entry = $('<li><span class="item-title"></span> (<a class="item-body" href="#">html</a>・<a class="item-mark-down" href="#">raw</a>)</li>');
	entry.data({
	index: i
	}).find('.item-title').text(data[i].title);
	entries.append(entry);
	}
	}

	function initViewer(){
	var entries = $('#entries');
	var body = $('#preview-body');
	var bodyTitle = $('#preview-title');

	entries.on('click', '.item-body', function(){
	if (!$.isArray(qiitaData)) return false;
	var index = $(this).parent().data('index');
	var item = qiitaData[index];
	body.html(item.body);
	bodyTitle.text(item.title);
	return false;
	});

	entries.on('click', '.item-mark-down', function(){
	if (!$.isArray(qiitaData)) return false;
	var index = $(this).parent().data('index');
	var item = qiitaData[index];
	var pre = $('<pre></pre>');
	pre.text(item.raw_body);
	body.html(pre);
	bodyTitle.text(item.title);
	return false;
	});
	}

	$(function(){
	/**
	* Reference: http://stackoverflow.com/questions/8869403/drag-drop-json-into-chrome
	*/
	var dnd = new DnDFileController('body', function(files) {
	var f = files[0];

	if (!f.type.match('application/json')) {
	alert('Not a JSON file!');
	return;
	}

	var reader = new FileReader();
	reader.onloadend = function(e) {
	var result = JSON.parse(this.result);
	$('#help, #drop-area').hide();
	setData(result);
	};
	reader.readAsText(f);
	});

	initViewer();
	});
	</script>

	</body>
	</html>