手順

画像、音声、動画を作る
アップロードする
HTMLタグを書く

1. 画像、音声、動画を作る

形式	行為名	方法
画像	スクリーンキャプチャ	raspi2pngでスクリーンショットを撮る（scrotでは撮影できないものも可）
音声	スクリーンレコード	ラズパイ4Bで録音する（音声）
動画	スクリーンキャスト	ラズパイ4Bで録画する（動画）

2. アップロードする

　URLが取得できるファイル・ホスティング・サービスなら何でも良い。今回はGitHubを使う。アカウントを作成しておくこと。

　リポジトリを作成し、リモートリポジトリへpushする。端末で以下のように行う。

mkdir my_repo
cd my_repo
git init
（アップロードしたいファイルを配置する）
git add .
git commit -m 'add file'
git push

　以下のようなURLで参照できる。

https://raw.githubusercontent.com/${USER}/${REPO}/master/${FILE_PATH}

　たとえば以下。

https://raw.githubusercontent.com/ytyaru/Python.Pyxel.Sound.Api.20200402181413/master/doc/demo.mp3

3. HTMLタグを書く

3-1. 画像

<img src="ファイルパス"></img>

<a href="URL"><img src="ファイルパス"></img></a>

　なお、Markdownなら以下。

![alt](ファイルパス)

[![alt](ファイルパス)](URL)

3-2. 音声

<audio preload="metadata" controls>
  <source src="https://raw.githubusercontent.com/ytyaru/Python.Pyxel.Sound.Api.20200402181413/master/doc/demo.mp3" type="audio/mp3">
  <source src="https://raw.githubusercontent.com/ytyaru/Python.Pyxel.Sound.Api.20200402181413/master/doc/demo.ogg" type="audio/ogg">
  <source src="https://raw.githubusercontent.com/ytyaru/Python.Pyxel.Sound.Api.20200402181413/master/doc/demo.wav" type="audio/wav">
  ※現在の環境は音声再生に対応していません
</audio>

3-3. 動画

<video controls autoplay muted playsinline>
  <source src="https://raw.githubusercontent.com/ytyaru/Python.Pyxel.Sound.Api.20200402181413/master/doc/demo.mp4"></source>
  <source src="https://raw.githubusercontent.com/ytyaru/Python.Pyxel.Sound.Api.20200402181413/master/doc/demo.webm"></source>
  <source src="https://raw.githubusercontent.com/ytyaru/Python.Pyxel.Sound.Api.20200402181413/master/doc/demo.mp.ogv"></source>
  ※現在の環境は動画再生に対応していません
</video>

番外編

画像を編集する

ラズパイに画像編集ソフトGIMPをインストールした
- GIMP python-fu xcfファイル保存（class）
- GIMP Python-fu で矩形描画

　文字を書いたり囲ったりしたいときがよくある。

画像を圧縮する

　以下のようなWebサービスもある。

PNGを圧縮。最高の画質と圧縮方式です。

ファイル形式を変換する

Convertio — ファイルコンバーター

所感

　思い通りのものを作ろうとすると超大変。それを公開して表示できるようにするまでもさらに壁がある。スクリプト書いて自動化するなどしないと不可能なレベル。

対象環境

2020-04-03
Raspbierry pi 4 Model B
Raspbian buster 10.0 2019-09-26 ※
bash 5.0.3(1)-release

$ uname -a
Linux raspberrypi 4.19.97-v7l+ #1294 SMP Thu Jan 30 13:21:14 GMT 2020 armv7l GNU/Linux

やってみる

アウトプットすべく己を導くためのブログ。その試行錯誤すらたれ流す。

画像、音声、動画をHTMLで再生する

手順