Movatterモバイル変換

[0]ホーム
URL:

スマートフォンで写真をタップすると、もともと表示されているサイズより小さく表示されるような体験をしたことはありませんか？ 2017年にリリースした SmartPhoto.js は、スマートフォンで写真を大きく見たいを実現するために用意したライブラリーです。

弊社の Github 公開しているライブラリの中では、一番 ★ の多いライブラリーで、2024年5月6日現在で894 となっています。よろしければhttps://github.com/appleple/SmartPhoto の右上にある ★ のクリックをお願いします。

SmartPhoto.js では、大きく表示させることを一番に考え、写真の短辺側が画面の最大になるところまで拡大表示されるフォトビューアーとして作られました。下のデモコンテンツでは、長辺側ははみ出して表示されることになりますが、ドラッグして動かしたり、ピンチイン・ピンチアウトやダブルタップ等で直感的に閲覧することができます。PCでご覧の方は QRコードを読み取ってスマートフォンでお試しください。

私が最初に考えた仕様としては、この上の状態がデフォルトで、この記事のリライト前にはオプションのresizeStyle はfill と書かれたままになっていましたが、随分前にfit がデフォルトになっています。どちらにしても、スマートフォンで画像を直感的に拡大してみることができるようなビューアーのライブラリとなっています。

デモ

こちらのデモでは、resizeStyle がFit で現在のデフォルトの設定です。

特徴

  • スマートフォンでの閲覧時、写真の短辺側が画面の最大になるところまで拡大表示（fill）させるか、長編を画面幅に合わせ拡大表示（fit）させる。
  • ピンチイン、ピンチアウト、スワイプ、ドラッグ対応
  • 画像のグルーピング機能
  • キーボード対応
  • URLハッシュによる画像の表示機能

使い方

CSS及びJavaScriptの読み込み

<link rel="stylesheet" href="./css/smartphoto.min.css"><script src="./js/smartphoto.min.js"></script>

CDNを利用した読み込み

<link rel="stylesheet" href="https://unpkg.com/smartphoto@latest/css/smartphoto.min.css"><script src="https://unpkg.com/smartphoto@latest/js/smartphoto.min.js"></script>

HTMLの記述

拡大表示したい画像をaタグで囲み、そのaタグのhref属性に拡大画像のパスを設定します。キャプションを入れたい場合は、そのaタグに対して、data-caption属性を指定します。また、data-group属性に同じ値を設定することで画像をグルーピングして表示することも可能です。

<a href="https://appleple.github.io/SmartPhoto/assets/images/large-kuma.jpg" class="js-smartPhoto" data-caption="bear" data-id="bear" data-group="animal">  <img src="https://appleple.github.io/SmartPhoto/assets/images/kuma.jpg" /></a>

JavaScript

<script>document.addEventListener('DOMContentLoaded',function(){    new SmartPhoto(".js-smartPhoto");});</script>

オプションの設定をする際には、

<script>document.addEventListener('DOMContentLoaded',function(){    new SmartPhoto(".js-smartPhoto",{        resizeStyle:'fill'    });});</script>

オプション

オプション説明デフォルト
arrows「前後リンク」を表示するかどうかtrue
navイメージナビゲーションを表示するかどうかtrue
useOrientationApi加速度センサーを使用するかどうかtrue
resizeStyleスマホで閲覧時に画像サイズの短辺を画面幅に合わせる（fill）か、長編を画面幅に合わせる（fit）かFit
animationSpeed次の画像に遷移する際のアニメーションスピード300
forceInterval画像の位置を更新する頻度 defaultは (10/1000秒）に一回10

メソッド

下記のようにインスタンスを生成することで、そのインスタンスを通していくつかのメソッドを実行することが可能です。

var mySmartPhoto = new SmartPhoto(".js-smartPhoto-fit");

mySmartPhoto.zoomPhoto();

画像を拡大表示します

mySmartPhoto.zoomOutPhoto();

画像の拡大表示を終了します。

mySmartPhoto.gotoSlide(1);

画像をグループ表示している際に、そのグループの1番目の画像に移動します。

mySmartPhoto.addNewItem(element);

ギャラリーに新たな画像を登録します。

SCSSのカスタマイズ

$animation-speed次の画像に遷移する際のアニメーションのスピードデフォルト：0.3s
$animation-functionアニメーションのイージングデフォルト：ease-out
$backdrop-color画像閲覧時の背景色デフォルト：rgba(0, 0, 0, 1)
$header-color画像閲覧時のヘッダーの色デフォルト：rgba(0, 0, 0, .2)

ダウンロード

今回の SmartPhoto は、レスポンシブデザインのウェブサイトでの利用を考えて作られた JavaScript ライブラリですが、弊社では他にも同様に便利に使えるライブラリを公開しております。よろしければ、そちらもご活用ください。

その他にも、https://github.com/appleple で多くのライブラリなどを公開しておりますので、合わせてご覧ください。また、弊社では有償にはなりますが、JavaScriptのライブラリ開発のお手伝いも行っておりますので、お気軽にお問い合わせフォームからご相談ください。

ダウンロードはこちらから行えます。

もしくは、npm、yarnを使ったインストールが可能です。

npm install smartphoto --save
yarn add smartphoto

npmでのインストール後は、BrowserifyやWebpackなどのbundleツールを使ったrequireも可能です。

const smartPhoto = require('smartphoto');

リンク

今回の SmartPhoto は、レスポンシブデザインのウェブサイトでの利用を考えて作られた JavaScript ライブラリですが、弊社では他にも同様に便利に使えるライブラリを公開しております。よろしければ、そちらもご活用ください。

その他にも、https://github.com/appleple で多くのライブラリなどを公開しておりますので、合わせてご覧ください。また、弊社では有償にはなりますが、JavaScriptのライブラリ開発のお手伝いも行っておりますので、お気軽にお問い合わせフォームからご相談ください。

この記事を書いた人

著者の顔写真

山本 一道

まだ世の中にインターネットが無かった時代にSIerで7年間プログラマとして働き、インターネットが一般に広まり始める頃からプロバイダに5年勤めました。その後、2002年に独立しWeb制作の仕事始めています。また、2000年に日記のCGIを世にリリースしてから20年以上 CMS を作り続けています。車が大好き！

ブログ内検索

長期的なサイト運用をサポートする「a-blog cms」をご存知ですか？

a-blog cmsについて詳しく知りたい方は、専用のブランドページをご覧ください。詳しい機能や特徴のほか、制作事例などを紹介しています。
また、a-blog cmsを利用したWeb制作事業者として登録いただいているビジネスパートナーさまを含め、a-blog cmsのカスタマイズ・サイト制作ができる全国の事業者さまの検索もできます。

CMS開発・販売

長期的なサイト運用をサポートするCMS

長年のWebサイトの受託制作で得たノウハウやお客さまからのご要望をもとに、使いやすさを徹底的に追求したCMSを開発・販売しています。

もっと見るブランドサイトへ

Webにまつわる お困りごとをご相談ください。

こんなお手伝いができます

Webコンサルタントとしてのお手伝い／UIデザインのご相談／デジタルメディアの総合プロデュース／パンフレット・DMなどのDTP、ロゴ制作などのビジュアルデザイン

お問い合わせ

資料ダウンロード

何について知りたいですか？

[8]ページ先頭
©2009-2025 Movatter.jp