Skip to content

Instantly share code, notes, and snippets.

@ganezasan

ganezasan/index.html

Last active June 25, 2024 04:15
Show Gist options
  • Save ganezasan/4fbdfff0bf828eca3c74 to your computer and use it in GitHub Desktop.
Save ganezasan/4fbdfff0bf828eca3c74 to your computer and use it in GitHub Desktop.
Download ZIP
Download JSON File
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
* {
margin: 0;
padding: 0;
border: 0;
}
body {
background: #fff;
}
</style>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h2 class="form-signin-heading">Please Input API URL</h2>
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<input id="url" type="text" class="form-control" value="https://qiita.com/api/v1/tags.json?page=1&per_page=100">
<span class="input-group-btn">
<button type="button" class="btn btn-primary" id="getJson">JSONファイル取得</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</div>
<script>
$("#getJson").bind("click",function(){
var url = $("#url").val();
if(url == ""){
alert("URLを入力してください");
}
d3.json(url,function(data){
var href = "data:application/octet-stream," + encodeURIComponent(JSON.stringify(data));
location.href = href;
return true;
});
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment