複数のイメージスライダーを全画面表示する
2023年08月02日
画像スライダーはjQueryライブラリがたくさん有りますが、それらを全画面表示したいと考えたことはないでしょうか。実はそういったサービスは既に存在しています。
これらのサービスは、エクセルやワード、パワーポイントといったファイルをアップロードするとページやシートを画像に置換し、全画面表示可能なスライダーにしてくれます。埋め込みコードが発行されるので、それを自サイトへ貼り付ければ資料等をダウンロードさせずスライドで見せることが可能です。
但し、外部サービスはいきなりのサービス終了やサーバーレスポンスの問題等の不安が懸念されます。また、運用状況によっては馬鹿にならないコストが掛かります。そこで今回は、このスライダー部分だけならそう難しくなく実現可能なので紹介したいと思います。
サンプル
https://studio-key.com/Sample2/slide_sample/
SlickSliderを使ったスライダーが２つ表示されており、全画面ボタンを押すとPCの場合はフルウインド表示になるはずです。この「PCの場合」というのが少し残念なのですが、スマートフォンやタブレットではブラウザごとの挙動が違います。
例えばiPadの場合、Safariは全画面表示になりますがChromeはアドレスバーが表示され、全画面というよりはブラウザの領域いっぱいに表示されている状態になります。これは上述した外部サービスでも対応できておらず、ブラウザ種別によって処理を変更されているようです。
スマートフォンはそもそも全画面にする必要性も無いと思いますので、表示されているスライダーがスマートフォンの幅いっぱいに表示されていれば良いと思います。
スライダーを全画面表示する処理の考え方
SlickSliderの全画面表示を検索すると幾つかのサイトがヒットしますが、基本的に一つのスライダーを全画面で表示する処理の説明ばかりで、複数の小さいスライダーをボタンクリックで全画面表示にする方法を紹介しているサイトは見つかりませんでした。
考え方としては、
- 1) 全画面用のスライダーを用意し、非表示にしておく
- 1) 通常の手順でスライダーを設置し、全画面ボタンをスライダーごとに挿入
- 2) 全画面ボタンをクリックしたとき、当該スライダーに設定されている画像を取得
- 3) 全画面スライダーに(3)の画像を挿入
- 4) 全画面用スライダーを表示する
こんな感じです。
スライダーを幾つ設置しても構いません。それぞれに固有のidを振っておけば大丈夫です。サイト上へ数個設置する程度ならこれで十分ですし、管理パネルを作って動的に管理するのも難しくはないと思います。
実際の現場での問題点
昨今のiPadは解像度的にPCと変わりないモデルも存在します。そうなると持ち方の問題が出てきます。サンプルは横画面を前提にしており、画像の高さを100%として幅を決めています。これをタブレット縦方向で見ると幅がはみ出してしまいます。この場合、スライダーの縦横サイズの再計算が必要になります。
実際に納品したものは機能面も多彩で、このような問題点にも対応したものとなりました。
パワーポイント等のファイルをアップロードして画像に置換したい
全画面スライダーは全く別の２案件で利用したのですが、１件は上述した外部サイト同様にパワーポイントやエクセル、ワードやPDFをアップロードして画像に変換してスライド化するといったものでした。ただ、社内資料を社員限定で共有するためのツールでしたので埋め込みコード等は有りません。これを完全無料で作成します。
流れとしては以下となります。
- 1) パワーポイント等のファイルをアップロード
- 2) PDFに変換
- 3) PHP imagemagickでPDFをページごとに画像化
サクッ書いていますが、PDFへの変換で躓くかと思います。ただ、これは割りと簡単でLibreOfficeをサーバーへインストールし、コマンドを実行するだけです。
shell_exec('export HOME={ファイルパス} && libreoffice7.5 --headless -convert-to pdf --outdir {書き出し先}');
これはlinux系の例ですが、xampp等を使いwindowsパソコンで実行する場合はコマンドが少し変わります。
PDFで書き出されれば、あとはimagemagickで画像へ変換するだけです。
$imagick = new Imagick();
$imagick->setResolution(72,72); //144
$imagick->readImage({PDFファイルパス});
$page_count = $imagick->getimagescene();
for($i = 0; $i <= $page_count; $i++) {
$imagick->setImageBackgroundColor('#ffffff');
$imagick->setImageAlphaChannel(Imagick::ALPHACHANNEL_REMOVE);
$imagick->mergeImageLayers(Imagick::LAYERMETHOD_FLATTEN);
}
//書き出し形式をpngに設定
$imagick->setImageFormat('png');
//ファイル書き出し。サーバーの絶対パスを指定する
$imagick->writeImages($rootPath."img/img.png", false);
//最後にオブジェクト破棄
$imagick->destroy();
ページごとに連番で画像が作成されますのでスライダーにセットすればOK！
実際に作ってみての感想
汎用的に考えるとLibreOfficeを使わずMS本家のAPIを使う方法も模索したのですが、コストが掛かります。今回はAWSで構築していますのでLibreOfficeをインストール出来ましたが、共有レンタルサーバー等では難しいです。
あとimagemagickを使った画像変換が重たいです。2~30ページの変換に数十秒掛かってしまいます。といっても外部サービスで試したところ、やはりそこその時間は掛かるようで仕方ないのかもしれません。
公開サービスとして使うのは難しいと思いますが、社内資料を管理する程度の目的でしたらこれで十分かと思います！
