Posted at

アニメ観るためにラズパイでWebサーバを作った

More than 1 year has passed since last update.


モチベ

HDDに大量のアニメが入ってるけど、わざわざパソコンにHDDを繋げて見るのも面倒なので、ブラウザからみれるようにしようね。


環境

アニメを保存している場所がNASではなくただのHDDであることから、RaspberryPiを使ってHDDをNASにしてあることが前提。HDDをNASにするための手順はここでは示さない。


HDD(NAS)の場所

/mnt/hdd/HD-V3/アニメ/



tomcatの導入

このサイトの手順が超わかりやすいので、ここに従って進める。

ラズベリーパイ Tomcat-8環境設定

基本は書いてある通りやるとすんなりうまくいく。ただ、全く同じようにwgetでやるとapache-tomcat-8.5.4.tar.gzはもう無いのでうまくいかない。8.5.31が最新だったので、Windowsでapache-tomcat-8.5.31.tar.gzをダウンロードして、scpか何かでラズパイに送信すべきだと思う。スクリプトの編集にgedit(?)を使ってるみたいだったけど、何それって感じだったので、個人的に好きなnanoでスクリプトは書いた。

上記リンクの手順でやると、tomcatは/usr/local/tomcatに入る。今回はここにtomcatがあるていで話を進める。


tomcatの場所

/usr/local/tomcat/



ディレクトリ構成、階層

作業はworkspaceというフォルダ以下でやる。tomcatはWebアプリのclassファイルとかを入れるフォルダ名とかを指定しているみたい。それにのっとった階層でアプリを作ると以下のような階層構成になる。

2018-05-08 (2).png

本来は今回のだと、tomcat/webapps/以下に自作のアプリのフォルダを作ってやるみたいだけど、NASはもっと上層にあるため、webapps以下でWebアプリを作りたくない。

てなわけで、workspaceはHDDに置きます。


workspaceの場所

/mnt/hdd/HD-V3/アニメ/workspace/


workspaceをwebapps以下においてないので、tomcatに教えてあげる必要がある。

以下のように書く。

ファイルの名前はディレクトリの名前である必要がある。

(server.xmlに書く方法もあるらしいが、うまくいかなかった。)


/usr/local/tomcat/conf/Catalina/localhost/workspace.xml

<Context path="/workspace" docBase="/mnt/hdd/HD-V3/アニメ/workspace" />



web.xmlの編集

workspaceのページ構成的なことを書く。


/mnt/hdd/HD-V3/アニメ/workspace/WEB-INF/web.xml

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE web-app
PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
"http://java.sun.com/dtd/web-app_2_3.dtd">

<web-app>

<servlet>
<servlet-name>cookie1</servlet-name>
<servlet-class>cookie1</servlet-class>
</servlet>

<servlet>
<servlet-name>cookie2</servlet-name>
<servlet-class>cookie2</servlet-class>
</servlet>

<servlet-mapping>
<servlet-name>
cookie1
</servlet-name>
<url-pattern>
/servlet/cookie1
</url-pattern>
</servlet-mapping>

<servlet-mapping>
<servlet-name>
cookie2
</servlet-name>
<url-pattern>
/servlet/cookie2
</url-pattern>
</servlet-mapping>

</web-app>



メインプログラムの作成

もともとクッキー使う予定だったのでこんな名前だけど、プログラム中では使ってないです。


cookie1.java

/mnt/hdd/HD-V3/アニメ/workspace/anime/にあるファイル名一覧を取得してプルダウンメニューに追加、1タイトル選ばせて、cookie2.javaに遷移する。


cookie1.java

import java.io.*;

import java.net.*;
import javax.servlet.*;
import javax.servlet.http.*;
import java.io.File;

public class cookie1 extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException {
response.setContentType("text/html; charset=utf-8");
PrintWriter out = response.getWriter();
request.setCharacterEncoding("UTF-8");
out.println("<html><head>");
out.println("<title>cookie1</title>");
out.println("</head><body>");
out.println("<h1>Wiki Anime DB</h1><hr>");
String root="/mnt/hdd/HD-V3/アニメ/workspace/anime/";
File dir=new File(root);
File[] list=dir.listFiles();
out.println("タイトル数:"+list.length+"<br>");
out.println("<form action=\"/workspace/servlet/cookie2\" method=\"GET\">");
out.println("名前: <input type=\"text\" name=\"name\" size=32>");
out.println("<br>");
out.println("<input type=\"submit\" value=\"コード生成\">");
out.println("<br>");
out.println("<select name=\"anime\">");
for(int i=0;i<list.length;i++){
String dst=list[i].toString();
dst=dst.replace(root,"");
out.println("<option value=\""+dst+"\">"+dst+"</option>");
}
out.println("<select>");
out.println("</form>");
out.println("</body></html>");
}
}



cookie2.java

cookie1.javaから受け取ったアニメタイトルを基にそのフォルダの一つ下の階層にある拡張子が.mp4|.MP4のファイルだけvideoタグで挟んで出力する。


cookie2.java

import java.io.*; 

import java.net.*;
import javax.servlet.*;
import javax.servlet.http.*;
import java.io.File;

public class cookie2 extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException {
response.setContentType("text/html; charset=utf-8");
PrintWriter out = response.getWriter();
request.setCharacterEncoding("UTF-8");
String aname=request.getParameter("anime");
String eaname=URLDecoder.decode(aname,"UTF-8");
String root="../anime/";
String root_t="/mnt/hdd/HD-V3/アニメ/workspace/anime/";
out.println("<html><head>");
out.println("<title>cookie2</title>");
out.println("</head><body>");
out.println("<h1>"+eaname+"</h1><hr>");
out.println("選択したアニメフォルダ="+eaname+"<br>");
out.println("<form action=\"/workspace/servlet/cookie1\" method=\"GET\">");
out.println("<input type=\"submit\" value=\"もどる\">");
out.println("</form>");
File dir=new File(root_t+eaname);
File[] list=dir.listFiles();
out.println("ファイル="+list.length+"<br>");
for(int i=0;i<list.length;i++){
String dst=list[i].toString();
dst=dst.replace(root_t+eaname+"/", "");
if(dst.indexOf(".mp4")!=-1 || dst.indexOf(".MP4")!=-1){
dst=root+eaname+"/"+dst;
out.println(dst+"<br>");
out.println("<video src=\""+dst+"\" preload=\"none\" controls></video><br>");
}
}
out.println("</body></html>");
}
}



コンパイル

servlet-api.jarをclasspathオプションで付加してコンパイルしないといけない。


/mnt/hdd/HD-V3/アニメ/workspace/WEB-INF/classes/

$ javac -classpath "/usr/local/tomcat/lib/servlet-api.jar" cookie1.java

$ javac -classpath "/usr/local/tomcat/lib/servlet-api.jar" cookie2.java

注意

はじめは/usr/local/tomcat/lib/servlet-api.jarにアクセス許可がおりていないため、コンパイルに失敗した。


権限付与

$sudo chmod 755 /usr/local/tomcat/lib/servlet-api.jar


権限を付与してからコンパイルしたらうまくいった。


実行

$ sudo /etc/init.d/tomcat start


cookie1画面

2018-05-08.png


cookie2画面

2018-05-08 (1).png


課題

1.話数が昇順にならない

2.タイトル数が多すぎてプルダウンメニューから探すのがつらい

でもとりあえずこれでスマホからHDD内のアニメをより快適に観れるZOY