Java Web応用

書影の取得例

書籍のISBNから表紙画像取得。Googl Books APIとjQuery利用

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Google Books 書影検索</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function(){
    const isbn = $("#bookimage").data("isbn");

    const url = 'https://www.googleapis.com/books/v1/volumes?q=isbn:' + isbn;

    $.ajax({url: url,method: "GET",dataType: "json",
        success: function (data) {
            $("#bookimage").empty();

            if (!data.items || data.items.length === 0) {
                $("#bookimage").html("<p>書影が見つかりませんでした。</p>");
                return;
            }

            const book = data.items[0];
            //const title = book.volumeInfo.title || "タイトル不明";
            const thumbnail = book.volumeInfo.imageLinks?.thumbnail;

            if (thumbnail) {
                $("#bookimage").html(
                    '<img src="' + thumbnail +'" alt="書影">'
                );
            } else {
                $("#bookimage").html("<p>書影画像無し</p>");
            }
        },
        error: function () {
            $("#bookimage").html("<p>エラーが発生しました。</p>");
        }
    });
});
</script>
</head>
<body>
<h2>Google Books から書影を取得</h2>


<div id="bookimage" data-isbn="${isbn }"></div>

</body>
</html>

グラフ表示例

listでデータを渡した場合の.jspファイル。Googel Chart API利用。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>個数のグラフ</title>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load('visualization', '1', {'packages':['corechart']});     
  google.setOnLoadCallback(drawChart);
 
  function drawChart() {      
    var data = google.visualization.arrayToDataTable([
      ['日付' , '個数'],
		<c:forEach var="item" items="${list}" varStatus="s">
		['${item.hi}', ${item.kosu} ],
		</c:forEach>
      ]);
 
    // オプションの設定
    var options = {
      title: '売り上げ個数'
     };     
             
    // 指定されたIDの要素に折れ線グラフを作成(円グラフの場合PieChartにする)
    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
      
    chart.draw(data, options);
  }
  
</script>
</head>
<body>

<!-- グラフ表示エリア -->
<div id="chart_div" style="width: 100%; height: 350px"></div>

</body>
</html>

CSVダウンロード例

データベースから取得したデータをCSVでダウンロードさせる（サーブレット doGet）

ShouhinDAO dao = new ShouhinDAO();
List<Shouhin> list = dao.findAll();
		
response.setContentType("text/csv; charset=shift_jis");
response.setHeader("Content-Disposition", "attachment; filename=\"sample.csv\"");
		
PrintWriter out = response.getWriter();

out.println("商品ID,商品名,単価");
for(Shouhin s : list) {
	out.print(s.getSid() + ",");
	out.print(s.getSname() + ",");
	out.println(s.getTanka());
}
out.flush();