min117の日記

初期desireもち。趣味Mac,メインFedora,仕事xp。

PHP7 Bootstrap4で「PDFファイルの本棚」を実装する(PDFファイル一覧化+クリック再生)

世の中の気になるニュースを目にしたそのタイミングで自分のサーバに時系列に保存したい。

欲しい情報の

 ・URLを貼り付ければ

 ・PDFファイルにして

 ・時系列(降順)

 ・サーバに保存してくれる

機能は以前実装した。こんなの。

f:id:min117:20200105205050p:plain

http://min117.hatenablog.com/entry/2018/12/05/054102

自分用に色々と作った中でこれが特に重宝している。

 

ただ、せっかくPDF保存された情報をリンクで開くんじゃなくて、画面で本棚みたいに並べたい

 

作った。こうなる。

f:id:min117:20200105205730p:plain

・PDFの1ページ目をサムネイル画像として表示する

・その上に重ね(overlay)して「表示」ボタンを置いた。押せばPDFが開く。

・「表示」ボタンの横には保存件数を表示している(Bootstrapのbadge機能)

 

端末は問わない。iPadだろうがAndroidだろうが全く同じように記事がみられる。f:id:min117:20200105205912j:plain

php最高。

 

さらにiPhoneだと横幅が狭いので縦に1列に並んでくれる。Bootstrapのcardクラスのおかげ。

f:id:min117:20200105210145p:plain f:id:min117:20200105210247p:plain

しかもこれを横にするとまた複数ページに戻ってくれたりする。とても使いやすい。Bootstrap最高。

http://min117.hatenablog.com/entry/2019/12/22/124617

f:id:min117:20200105212326j:plain

※ 画像がボヤけているのは敢えて。通信料を減らすためにimgタグに貼る画像の解像度を(画像の輪郭が分かる)ギリギリまで落としてあるから。

 

「文字抽出」ボタンはまだ置いただけで機能はしていない。tesseractで画像から文字列を読み込んで、クリックしたら表示されるようにしたい。そうすればURL記事からじゃなく一般の写真からも文字列を生成できそうだから。

http://min117.hatenablog.com/entry/2019/06/04/233931

文字コードUTF-8にするところにクセがありそう。

 

正月も終わってしまったので、この冬の実装はこれくらいにする。他にも色々作れたし、WordPressの環境もできたし。良い正月だった。