大島聡史先生[1]が2012年のプログラミングシンポジウムで、 首から下げたタブレットでスライドショー表示してるのを見て、 自分もやりたくなったので作りました。
HTMLとJSで書かれていて、筆者はNexus7のChromeで全画面表示で動かしています。 著者本人の名札が[2]に置かれているので、お手持ちの端末で表示してみるとよいかと。
gitでcloneするか、右の「Download Zip」ボタンから。
著者本人の名札のデータをサンプルとしてそのまんま残してあります。
単なるHTMLなので適当にいじって自分用の名札にしてください。
このフォルダをまるごとDropboxのPublicフォルダに突っ込み、右クリックから「公開リンクをコピー」して、そのURLをNexus7のChromeで開くだけ。
残念ながらDropboxアカウントを作ったのが2014年7月以降だとPublicフォルダがないらしいです。静的にサーブできればなんでもいいのでその場合はVPSを借りるなり自前でサーバを立てるなりよしなにやってください。
「Autoplay」で自動スクロールの開始、「Stop」で自動スクロールの停止、「Full Screen」で全画面表示。
表示アイテムの左右ドラッグorスワイプで前後のアイテムを表示することができます。
MITライセンス（ただし画像ファイルはサンプルなので除く）
使用しているライブラリ
- jQuery(MIT) http://jquery.com/
- Owl Carousel(MIT) http://www.owlgraphic.com/owlcarousel/
- rewindのアニメーションが高速なのが気になる人もいるっぽい。先頭と末尾のアイテムを同一にして最終アイテムが表示された時に先頭にアニメーションなしで移動すればrewindなしにできるけど、個人的にはあんまり気にならない。
- いま、アニメーション停止ボタンが全画面表示対象divの外にあるので、全画面表示を解除しないと操作できない。アイテムをドラッグした際に一時停止になり、自動再生再開ボタンはposition: absoluteとかで上半分に出したらいいと思う。
- 2015-01-09 Chrome以外でのフルスクリーン機能を追加。stopが動いていなかったのを修正。改行コード。第65回プログラミングシンポジウムにて。
- 2014-12-22 未踏忘年会のために大急ぎで作った
バッテリーの持ちが心配だったが、2時間経って70%残ってたので普通の懇親会用には十分そう。