たけるのプログラミング

作ったものとか、気ままにアップします。

GitHub Pagesを使ってみた!

結構前にherokuを使ったことがあり、同じことができるサービスないかなとネットをみていたら

GitHub Pages」というサービスがあったので使ってみました。

無料で静的サイトを公開することができ、JavaScriptも動作するようです。

自分ははてなブログに来る前、独自ドメイン&レンタルサーバーでサイトを運営していたので、

このサービスが無料であることが驚きです。


作ったサイト

shota232423.github.io

NBAオタクの私が、オススメのNBAプレイヤーを紹介しているサイトです。

CSSのFlexboxが便利すぎました。
webdesign-trends.net


使い方で参考になるサイト

prog-8.com

「2020 NBA プレイオフ」のスタッツが落ちてたので、javaで遊んでみた。

今日はネットにオーランドのディズニーワールドで行われた「2020 nbaレイオフ」のスタッツが記されたExcelファイルが落ちていたので、


Javaでデータを取り出して、遊んでみたいと思います。


pythoncsvファイルの読み取りをやった記憶があったので、Javaでできるのか調べながらやってみました。


使用するExcelファイルは以下サイトからダウンロードすることができます。

www.nbastuffer.com

nbaファンにとって、選手のスタッツをみるだけでも楽しいものです。


完成したもの

平均得点と平均リバウンド、平均アシストを指定し、指定した成績以上のプレイヤーの名前とポジション、スタッツを出力するプログラム。

平均20得点10リバウンド0アシストを指定した例

f:id:takeru232423:20210117165153p:plain

平均15得点5リバウンド5アシストを指定した例

f:id:takeru232423:20210117165644p:plain

ソースコード

package nba_app1;
import java.io.BufferedReader;
import java.io.File;
import java.io.FileReader;
import java.util.ArrayList;
import java.util.List;
public class nba_app {

	public static void main(String[] args) {
		int count =0;
		BufferedReader br = null;
		List<nbaplayer> list = new ArrayList<>(); //nbaplayer型のリストを宣言
		String file_name = "2019-2020_stats.csv"; // 入力ファイルの指定
		try {
			File file = new File(file_name); //javaでファイルを扱うために、引数にファイル名を指定し、Fileオブジェクトを生成
			br = new BufferedReader(new FileReader(file)); //javaでファイルからデータを読み取るために、引数にFileオブジェクトを指定し、BufferedReaderオブジェクトを生成

			String line;
			String[] data;

			while ((line = br.readLine()) != null) { //readLine()メソッドを使い、一行ずつデータを取得
				count++;
				data = line.split(",");
				if(count>=3) {
					//-------------以下のprintはテストコードとして使用しました-----------------
					//System.out.print(data[1]);//名前出力
					//System.out.print(" "+data[3]);//ポジション 出力
					//System.out.print(" "+data[18]);//平均得点 出力
					//System.out.print(" "+data[19]);//平均リバウンド 出力
					//System.out.print(" "+data[21]);//平均アシスト 出力
					//System.out.println();
					list.add(new nbaplayer(data[1],data[3],data[18],data[19],data[21]));
				}
			}

			nbaplayer.serch_player(list, 15, 5, 5);//nbaプレイヤー検索メソッド

		} catch (Exception e) {
			System.out.println(e.getMessage());
		} finally {
			try {
				br.close();
			} catch (Exception e) {
				System.out.println(e.getMessage());
			}
		}

	}

}

class nbaplayer{
	String name;
	String position;
	String PPG;
	String RPG;
	String APG;
	public nbaplayer(String name,String position,String PPG,String RPG,String APG) {
		this.name=name;
		this.position=position;
		this.PPG=PPG;
		this.RPG=RPG;
		this.APG=APG;
	}

	public static void serch_player(List<nbaplayer> list,double PPG,double RPG,double APG) {
		for(nbaplayer n:list) {
			double p = Double.parseDouble(n.PPG);
			double r = Double.parseDouble(n.RPG);
			double a = Double.parseDouble(n.APG);
			if(p>=PPG&&r>=RPG&&a>=APG) {
				System.out.print(n.name);//名前出力
				System.out.print(" "+n.position);//ポジション 出力
				System.out.print(" "+n.PPG);//平均得点 出力
				System.out.print(" "+n.RPG);//平均リバウンド 出力
				System.out.print(" "+n.APG);//平均アシスト 出力
				System.out.println();
			}
		}
	}

}

ソースコードの説明

コードについて、簡単に流れを説明すると、指定ファイルから名前、ポジション、平均得点、平均アシスト、平均リバウンドのデータを抜き出し、
それらのデータを使ってnbaplayerオブジェクトを生成。そしてnbaplayer型リストを作り、nbaplayerオブジェクトを入れていき、
そのリストを利用して、nbaプレイヤーを検索するという流れです。

以下ポイントとなるコードを説明します。

while ((line = br.readLine()) != null) { //readLine()メソッドを使い、一行ずつデータを取得
				count++;
				data = line.split(",");
				if(count>=3) {
					//-------------以下のprintはテストコードとして使用しました-----------------
					//System.out.print(data[1]);//名前出力
					//System.out.print(" "+data[3]);//ポジション 出力
					//System.out.print(" "+data[18]);//平均得点 出力
					//System.out.print(" "+data[19]);//平均リバウンド 出力
					//System.out.print(" "+data[21]);//平均アシスト 出力
					//System.out.println();
					list.add(new nbaplayer(data[1],data[3],data[18],data[19],data[21]));
				}
			}

使うExcelファイルについて、1行目と2行目はこのプログラムを作る上で必要ないので、count++とif(count>=3)を使いました。

他のコードの説明については、コードにコメントを書いておきました。

コロナウイルスに関するオープンデータを使ってみた。

こんにちは、今回は題名の通り、内閣官房が公開しているコロナウイルスのオープンデータを利用してみたいと思います。

corona.go.jp

公開されているデータを見てみると、データの形式はjsonのようです。

1月14日に公開されているデータを見てみると、最新のもので1月12日のものになっていました。

開発環境

実行結果

f:id:takeru232423:20210114214310p:plain

XMLHttpRequestを利用して、web上にあるjsonデータを取得できるようにします。なのでこのページにアクセスする日時によって日付、感染者数が変化します。

ソースコード

index.html

<!DOCTYPE html>
<html>
  <head>
  <meta charset="UTF-8">
  <title>コロナ感染者数</title>
  <link rel="stylesheet" href="style.css">
 
  </head>
  <body>
    <h1>コロナ感染者数</h1>
    <h2 id="test1"></h2>
    <p id="test2"></p>
    <script type="text/javascript" src="index.js"></script>
  </body>
</html> 

index.js

var request = new XMLHttpRequest();
 
request.open('GET', 'https://opendata.corona.go.jp/api/Covid19JapanAll?dataName=東京都', true);
request.responseType = 'json';

request.onload = function () {
  var data = this.response;
  console.log(data.itemList[0]);

  var elem = document.getElementById("test1");
  elem.innerHTML = data.itemList[0].date+" までの"

  var elem = document.getElementById("test2");
  elem.innerHTML = data.itemList[0].name_jp+"のコロナウイルス感染者の合計は "+data.itemList[0].npatients+"人です。";
};
request.send();

ソースコードの説明

"itemList":[{"date":"2021-01-12","name_jp":"東京都","npatients":"77133"},,,,,,,]

取得できるjsonデータの形式は上記のような感じです。

data.itemList[0]

最新のデータは配列のインデックス0番目なので、上記のように最新のデータを取得。

日にちは以下のように取得。

data.itemList[0].date

感染者数は以下のように取得。

data.itemList[0].npatients

あとは得たデータをDocument.getElementById()を使ってindex.htmlに表示させるだけです。

感想

めちゃくちゃ久しぶりにjavascript触ったので、たくさんググりました。
知りたい情報を見つけた時の嬉しさは半端ないです。

もっとjavascriptを勉強して、今回のプログラムを応用したものを今後作りたいと思います。

話が変わりますがポケモンapiがあることを、今回初めて知りました。他にもおもしろそうなapiがweb上にあると思うので

暇な時探してみたいと思います。

【超簡単】IFTTTを使ってコーディング無しでプログラム作ってみた!

今回はIFTTTを使って、コーディング無しでプログラムを作ってみたいと思います!

IFTTTとは「既存のWebサービスを連携させることができる」サービスで、コーディングをせず簡単にプログラムを作ることができます。

Webサービスの例:GmailTwitterYouTubeInstagramなどなど

今回は
YouTubeTwitterを連携させたプログラムを作ってみたいと思います。


実現したいプログラムの内容

YouTubeで動画にいいねを押すとTwitterでその動画のタイトルとurlが自動的にツイートされる。


完成系

まずこんな感じで動画にいいねを押します。
f:id:takeru232423:20210110155400p:plain

すると以下のように自動的にツイートされます。
f:id:takeru232423:20210110155607p:plain


上記プログラムの設定方法

IFTTTの登録や操作方法は以下の記事が分かりやすかったです。
https://baycom.jp/service/net/smart/pdf/how_ifttt.pdf



まず登録を済ませ、homeの
f:id:takeru232423:20210110160059p:plain
を押すと以下のような画面が表示されます。

f:id:takeru232423:20210110160147p:plain

if Thisの後にトリガーを選択します。
トリガーとは
YouTubeで動画にいいねを押すとTwitterでその動画のタイトルとurlが自動的にツイートされる。

YouTubeで動画にいいねを押すとの部分のことです。

つまりYouTubeでのいいねを押したことによって、Twitterでの自動ツイートが行われるということです。

if文に似てますね。

addを押し、YouTubeと検索すると以下の画面が出てきます。

f:id:takeru232423:20210110160858p:plain

YouTubeのボタンを押し、以下の画面から
f:id:takeru232423:20210110161004p:plain

New liked videoを選択すると以下の画面が出てきます。この時点でトリガーの設定が完了しました。
f:id:takeru232423:20210110161240p:plain

次にYouTubeのいいねを押した後の処理を設定しましょう。
先ほどと同様にaddを押し、Twitterと検索し、Post a tweetを選択しましょう。
f:id:takeru232423:20210110161622p:plain

選択すると以下の画面が出てきます。この画面はtweetの内容を編集する画面です。TitleとUrlが変数となっているので、いいねした動画のタイトルとurlが自動的に、それぞれの変数に代入されます。
f:id:takeru232423:20210110161724p:plain

Create actionを押し、次の画面でContinueを押し、Finishを押して設定完了です。

感想

IFTTTはインターフェースが優れていると感じました。シンプルでとても使いやすい。
IFTTTのように、コーディングをせずにプログラムを作ることができるサービスは他にもあり、Microsoft Flowもオススメです。
このようなノーコード開発ツールは業務のDX化の推進と共に、ニーズが高まってくるのではないでしょうか。

Javaでちょっとしたログイン機能を実装する方法

こんにちは!

今回はタイトル通りJavaでちょっとしたログイン機能を実装してみたいと思います。

開発&実行環境はこちら

  • Java11

完成したもの

f:id:takeru232423:20210108214649p:plain

データベースに保存されていない名前とパスワードを入力した場合
f:id:takeru232423:20210108214801p:plain

こんな感じで「ログインに失敗しました。」というメッセージが表示される。

データベースの内容

f:id:takeru232423:20210108222537p:plain

ソースコード

login.java

package servlet;

import java.io.IOException;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import model.LoginLogic;


@WebServlet("/login")
public class login extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		Boolean b = false;
		request.setAttribute("login", b);
		RequestDispatcher dispatcher = request.getRequestDispatcher("WEB-INF/jsp/login.jsp");
		dispatcher.forward(request, response);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("UTF-8");
		String name = request.getParameter("name");
		String password = request.getParameter("password"); //リクエストパラメータの値を取得
		LoginLogic ll = new LoginLogic();
		int x = Integer.parseInt(ll.e(name,password));
		if(x==0) {
			Boolean b = true;
			request.setAttribute("login", b);
			RequestDispatcher dispatcher = request.getRequestDispatcher("WEB-INF/jsp/login.jsp");
			dispatcher.forward(request, response);
		}
		else {
			System.out.println("ログイン成功");//ログインに成功した後の処理を書いていく!
		}

	}

}

login.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
Boolean b = (Boolean) request.getAttribute("login");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>ログイン</h1>
<form action="/example/login" method="post">
名前:<input type="text" name="name">
パスワード:<input type="password" name="password">
<input type="submit" value="login">
</form>
<%if(b){ %>
<p><font color="red">ログインに失敗しました。</font></p>
<%} %>
</body>
</html>

LoginLogic.java

package model;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

public class LoginLogic {
	static final String URL = "";  //データベースURL(各自設定してください!)
	static final String USERNAME = "";                        //ユーザ名(各自設定してください!)
	static final String PASSWORD = "";                   //パスワード(各自設定してください!)

	public String e(String a,String b) {
		String count=null;
		try {
			String sql = "select count((name='"+a+"' and password='"+b+"') or NULL) as count from user;";
			Class.forName("com.mysql.jdbc.Driver");
			Connection connection = DriverManager.getConnection(URL, USERNAME, PASSWORD);
			PreparedStatement statement = connection.prepareStatement(sql);
			ResultSet result = statement.executeQuery();
			result.next();
			count = result.getString("count");
		} catch (SQLException e) {
			e.printStackTrace();
		} catch (ClassNotFoundException e) {
			e.printStackTrace();
		}
		return count;
	}
}

ソースコードの説明

今回のログイン機能はとても簡単なもので、ユーザーが入力した「名前」と「パスワード」に一致するレコードがデータベースにあるか調べ、ない場合は「ログインに失敗しました。」と表示するだけのものです。

  • まずlogin.javaを実行するとdoGet()メソッドが実行されます。その後login.jspフォワードされます。その際にリクエストスコープにfalseを保存し、login.jsp
<%if(b){ %>
<p><font color="red">ログインに失敗しました。</font></p>
<%} %>

が表示されないようにします。

  • ユーザーが名前とパスワードを入力し、loginボタンを押すと、login.javaのdoPost()メソッドが実行されます。doPost()メソッド内でログイン処理を行うLoginLogicというインスタンスを生成します。
LoginLogic ll = new LoginLogic();
		int x = Integer.parseInt(ll.e(name,password));

このeメソッドの中身は

String sql = "select count((name='"+a+"' and password='"+b+"') or NULL) as count from user;";

変数aとbに入力された名前とパスワードを入れ、countの条件に合うレコードをカウントします。つまり一致するものがあった場合1を返し、一致しない場合、つまりログインに失敗する時は0を返すことになります。この1、0がeメソッドの返り値ということになります。

if(x==0) {
			Boolean b = true;
			request.setAttribute("login", b);
			RequestDispatcher dispatcher = request.getRequestDispatcher("WEB-INF/jsp/login.jsp");
			dispatcher.forward(request, response);
		}

返り値をxに入れ0、つまりログインに失敗したのでTrueをリクエストスコープに保存し、login.jspフォワードします。そして先程falseで実行されなかった以下のコードが実行されます。

<%if(b){ %>
<p><font color="red">ログインに失敗しました。</font></p>
<%} %>

感想

ログイン画面で何も入力されなかった場合とかの処理も付け加えないといけないなと、コード書き終わって思いました。変数名もしっかりと考えなきゃな、、、

Javaを使って、データベースを使わない簡単な匿名掲示板を作る方法!

Javaを使って簡単な匿名掲示板を作りたいと思います!

実行環境

  • Java11

完成系

f:id:takeru232423:20210107163853p:plain

こんな感じで入力した文字列がフォームの下に、どんどん表示される感じです。

ソースコード

tweet.java
package servlet;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;


@WebServlet("/tweet")
public class tweet extends HttpServlet {
	private static final long serialVersionUID = 1L;
	List<String> tweetlist = new ArrayList<String>();

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		RequestDispatcher dispatcher = request.getRequestDispatcher("/WEB-INF/jsp/main.jsp");
		dispatcher.forward(request, response);

	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("UTF-8");
		String tweet = request.getParameter("tweet");
		tweetlist.add(0,tweet);

		ServletContext application = this.getServletContext();
		application.setAttribute("tweet", tweetlist);

		RequestDispatcher dispatcher = request.getRequestDispatcher("/WEB-INF/jsp/main.jsp");
		dispatcher.forward(request, response);

	}

}
main.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page import="java.util.List"%>

<%
	List<String> t = (List<String>) application.getAttribute("tweet");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="form.css">
<title>sns</title>
</head>
<body>
	<section class="box">
		<form action="/tweet_a/tweet" method="post">
			<h3>What's up?</h3>
			<textarea name="tweet" rows="5" style="width: 485px"></textarea>
			<div>
				<input type="submit" value="tweet" style="width: 40%; height: 20%;">
			</div>
		</form>
	</section>
	<%
		if (t != null) {
	%>
	<%
		for (String a : t) {
	%>
	<p><%=a%></p>
	<%
		}
	}
	%>

</body>
</html>

コードの説明

  • まずList tweetlist = new ArrayList();というつぶやきを入れるリストを作る。
  • tweet.javaにアクセスがあった場合、doGet()メソッドが実行され、main.jspフォワード。
<%
	List<String> t = (List<String>) application.getAttribute("tweet");
%>
  • リストはnull
  • だから
<%
		if (t != null) {
	%>
	<%
		for (String a : t) {
	%>
	<p><%=a%></p>
	<%
		}
	}
	%>

は実行されない。

  • ユーザーがつぶやく
  • tweet.javaのdoPost()メソッドが実行される。

-

String tweet = request.getParameter("tweet");

リクエストパラメータからつぶやきを得る。

  • tweetをリストの先頭に入れる。
  • アプリケーションスコープにリストを入れ、main.jspでもリストが使えるようにする。
<%
	List<String> t = (List<String>) application.getAttribute("tweet");
%>

が前のようにnullでないので

<%
		if (t != null) {
	%>
	<%
		for (String a : t) {
	%>
	<p><%=a%></p>
	<%
		}
	}
	%>

が実行され、リストの中に入っているつぶやきが全部p要素として表示される。

感想

データベースと連携させると、本格的なwebアプリが作れそうですね。またcssのソースは載せないので自分でオリジナルの掲示板をデザインしてみてください。