Lolipop 100 円サーバーで作るYouTubeではない、MyTube

#Video 共有するために１００円サーバーでサクッとつくる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274715/14664bc8-8329-1f58-3283-f805231a53ac.png)
 

pip コマンドを使えるようにする。

```
$ curl https://bootstrap.pypa.io/get-pip.py -o get-pip.py
$ python get-pip.py --user
```
$ pwd
/home/users/0/sub.jp-hrd
```

```
.bash_profileの編集
$vi .bash_profile

PATH=$PATH:/home/users/0/sub.jp-hrd/.local/bin
export PATH

$ source .bash_prof
```
この作業でpip等が使えるようになる。

```
pip install bottle --user
```
####pipでinstallするとき--userオプションをつけるとユーザーディレクトリにインストールしてくれる。

```
$ pip freeze
DEPRECATION: Python 3.4 support has been deprecated. pip 19.1 will be the last one supporting it. Please upgrade your Python as Python 3.4 won't be maintained after March 2019 (cf PEP 429).
Beaker==1.10.0
bottle==0.12.13
bottle-auth==0.3.3
bottle-beaker==0.1.3
bottle-mongo==0.3.0
bottle-sqlite==0.1.3
certifi==2019.9.11
```
.htaccessを作成する

```
DirectoryIndex index.py

```
index.pyの作成

```index.py
#!/usr/local/bin/python3.4
# -*- coding: utf-8 -*-
import bottle,glob
from pathlib import Path
import cgitb,sys,io
sys.stdin =  open(sys.stdin.fileno(),  'r', encoding='UTF-8')
sys.stdout = open(sys.stdout.fileno(), 'w', encoding='UTF-8')
sys.stderr = open(sys.stderr.fileno(), 'w', encoding='UTF-8')
cgitb.enable()
print('Content-type: text/html; charset=UTF-8\n')
flist=list(Path('./video').glob('**/*.mp4'))
flist.sort()
flist=[str(x) for x in flist]
h=bottle.template("index.tpl",dict(title="MyTube",msg="",menu={},submenu={},flist=flist[::-1]))
print(h)
```
template,video dirの作成

```
> mdir views
> mkdir video
```
index.tplの作成

```index.tpl
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="default">
	<meta name="apple-mobile-web-app-title" content="{{title}}">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }}</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
	<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
	<link rel="apple-touch-icon" href="/favicon.png" />
	<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
% x=flist[0]
	<br/>
	<div class="embed-responsive embed-responsive-16by9">
		<video id="mov"  controls poster="./{{x}}.jpg" src="./{{x}}" type="video/mp4"  onended="funend();"/>
	</div>
	<br/>
	<div class="row">
	% ix=0
	% for x in flist:
	<div class="col-md-4">
	<a style="font-size: 0.7rem;" href='https://test.hrd.co.jp/{{x}}'>https://test.hrd.co.jp/{{x}}</a>
		<img id='{{ix}}' class="btn btn-primary" src="./{{x}}.jpg" height="200"/>
	<br/>
	<a  href='https://test.hrd.co.jp/{{x}}' download>
	<img src="./static/favicon.ico" alt="download" width="32" height="32">Download:
	</a>
	
	</div>
	% ix=ix+1
	% end 
</div>
</body>
</html>
<script>
var flist={{!flist}},v,ix=0;
$(function(){
	$('.btn').click(function(){
		$("#mov").removeAttr("preload");
		id=$(this).attr('id');
		ix=Number(id);
		console.log(id,ix);
		var a=$(this).attr("src");
		$("#mov").attr("poster",a);
		var m=a.replace(".jpg","");
		$("#mov").attr("src",m);
		$("#mov").get(0).play();
	})
})

function funend(){
	console.log("fine",$('#cp').prop('checked'));
	if($('#cp').prop('checked')){
		if(++ix>=flist.length){
			ix=0;
			$('#cp').prop('checked',false)
		}
		var a=flist[ix];
		$("#mov").attr("poster",a);
		var m=a.replace(".jpg","");
		$("#mov").attr("src",m);
		if(ix!=0) $("#mov").get(0).play();
	}
}
function copyToClipboard(s) {
	$('#copyTarget').val(s);
    copyTarget.select();
    document.execCommand("Copy");
    alert("コピーできました！ : " + copyTarget.value);
}
</script>
```
最後に実行権を与えます。

```
> chmod 700 index.py
```

付録
#FTP自動転送スクリプト
### 実行ディレクトリにあるmp4ファイルのサムネイル作成し、mp4をクイックスタート処理します。

```ftptrans.py
# -*- coding: utf-8 -*-
from ftplib import FTP
import os,sys,glob,cv2,datetime
url,usr,pw  = "ftp.lolipop.jp","user","password"
dst_url="/test/video/" #転送先

FTP.encoding = "utf-8"    
ftp = FTP(url)
ftp.set_pasv("true")
ftp.login(usr,pw)

list=[x for x in glob.glob("*.mp4")]
dt=str(datetime.date.today()) #ディレクトリ名　work & 転送先
dt=dt.replace("-","") #日付の作成 20191126
os.makedirs(dt, exist_ok=True) # work ディレクトリの作成
try:
    ftp.mkd(dst_url+dt) #転送先ディレクトリ作成
except:
    print('except')
    pass
for f in list:
    vidcap = cv2.VideoCapture(f) # videoからサムネイルの自動作成
    success,image = vidcap.read()
    fout=dt+"\\_"+f+".jpg" #サムネイル
    cv2.imwrite(dt+"\\_"+f+".jpg", image)
    fout=dt+"\\_"+f
    cmd="python -m qtfaststart "+f+" "+fout #mp4のクイックスタート化
    os.system(cmd)
# video サムネイルのftp転送
list=[x for x in glob.glob(dt+"\\*.*")]
for f in list:
    fn=os.path.basename(f)
    pa=os.path.dirname(f)
    print('file name:',fn)
    print('dire name:',pa)
    fp = open(f, 'rb')
    ftp.storbinary("STOR "+dst_url+pa+"/"+fn ,fp)
ftp.close()
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274715/c54c8832-82e4-18d8-65a1-20e8b7af8b65.png)