個人用ツール
User menu
Microsoft Store (}CN\tgXgA)

FlickrShow

提供: きまぐれ手記

移動先: 案内, 検索

Flickr のアルバム(photoset)を記事中に埋め込むための即席Extension

とはいえ、Flickr写真セット(アルバム)の埋め込みとスライドショーは Galleria に依存しており、この Extension では単にコードを埋め込んでいるだけ(^^;。

経緯

Flickr のアルバム(set)を MediaWiki 記事中に埋め込むにはどうしたら良いか模索したが、既存のExtensionに使えそうな物は見つからなかった(目的に適いそうな物に Extension:FlickrSet があったが、残念ながら動作しなかった)。

一時期、Flickrがblogへの埋め込み方法を提供していたようだが、それも今は提供されていないようで、どうしたものか…と思い悩んでいた所に Galleria を見つけた。

標準添付の Flickr Plugin を使うと、いとも簡単にアルバムのスライドショーが出来てしまう。しかもAPIキーの取得も不要…なんともまぁ。

Galleria を使うのも、Extension を作るのも初めてだが、前者は説明書(英語)を見ながらHTMLを作ったらあっという間にできた。ここまで出来たら、とりあえずはそれを単純に埋め込んでしまえばいいかと思い立ち、後者は Extension:HTMLets のコードを参考に、ものの数十分でできてしまった。お手軽すぎて後が怖い罠^^;;。

参考までに即席ソースコードを置いておいたので、もし需要があれば、Galleriaの作者様に感謝しつつ、自己責任で使ってください。

動作例 Example

アルバム photoset

140824j2-3_小谷村・大糸線(北)

記述例 Usage

<flickrshow set="72157648726521746" height="540px">
	"autoplay": 4500,
	"_toggleInfo": false,
	"flickrOptions": {
		"description": true,
		"max": 80,
		"sort": "date-posted-asc"
	}
</flickrshow>

埋め込まれる内容例 Embedding tags ex.

<script src="/galleria/galleria-1.4.2.min.js"></script>
<script src="/galleria/plugins/flickr/galleria.flickr.min.js"></script>

<!-- FlickrShow in -->
<div id="flickrshow" style="width: 100%; height: 540px; background: #000;"></div>
<script>
	Galleria.loadTheme('/galleria/themes/classic/galleria.classic.min.js');
	Galleria.run('#flickrshow', {"autoplay":4500,"_toggleInfo":false,"flickrOptions":{"description":true,"max":80,"sort":"date-posted-asc"},"flickr":"set:72157648623389972"});
</script>
<!-- FlickrShow out -->

検索 Search

表示例 Example

<flickrshow search="大糸線"></flickrshow>

備考 Notice

ここでは題名(title)を表示しないようにスタイルシートを書き換えていますが、通常は題名も表示されます。

題名を表示したくない場合の LocalSettings.php への追加定義例:

$wgFlickrShow['Style'] = ".galleria-info-title {display: none !important;}";

Codes

You can use it freely at your own risk. I license it under the Revised BSD License.

Download

Installation

  1. Download Galleria and unzip it on your web server.
  2. Download FlickrShow and unzip it on MediaWiki extensions directory.
  3. Edit LocalSettings.php file to add below.
require_once "$IP/extensions/FlickrShow/FlickrShow.php";
$wgFlickrShowGalleria['Path'] = '/galleria';	# Galleria installed path from DOCUMENT_ROOT
$wgFlickrShowGalleria['Ver'] = '1.4.2';		# Galleria version number
$wgFlickrShowGalleria['Size'] = '.min';		# Galleria code size (default = '.min')
$wgFlickrShowGalleria['Theme'] = 'classic';	# Galleria theme name
  1. Check Special:Version on your wiki.

Usage

Album
<flickrshow set="photoset_id" width="100%" height="450px" background="#000">(options)</flickrshow>
Search
<flickrshow search="keyword" …>(options)</flickrshow>
Options
see here. (but require JSON format)

Dependency

  • Galleria, jQuery
  • PHP 5.2.0~, PECL json 1.2.0~(後述の手抜きのため)

jQuery

Mediawiki 1.24.0 より jQuery 1.11.1 が標準で組み込まれるようになったので、http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js を埋め込む処理を標準で無効にします。MediaWiki の旧バージョンを使い続けていて、FlickrShow の更新とともに Galleria が動かなくなった場合は、LocalSettings.php に下記の行を加えてみてください。

$wgFlickrShow['jQuery'] = 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js';

Bugs

  • 手抜きでパラメータ処理に json_decode(), json_encode() を使っているため、値(文字列の場合)だけでなくプロパティ名も "" で括らないと認識されない(^^;。
  • エラー処理も手抜きし放題。
  • Unicode (UTF-8) 以外(EUC-jpなど)を使っているwikiでは動かないかも?(少なくともSearchで日本語キーワードは入れられないと思う、まぁ mb_convert_encoding() を通せばいいんだろうけど、作者には不要だったので。)
  • インジェクション対策で手当たり次第 htmlentities() を入れたので、その絡みの不具合があるかも?
  • 1ページに2つ以上表示できない(Galleriaの制限?)
  • 英語があちこち壊れているのはいろいろ諦めてくださいorz
  • その他にも気づいた点があれば直して使ってください:-)。

History

【予定】201?.??.?? (v1.02)

  • $wgFlickrShowGalleria['Dir'] 旧パラメータ削除
  • jQuery を標準で組み込まないよう変更(MediaWiki 1.23.x 以下を使っていて Galleria が動かない場合は、これを試してみてください。)

2014.10.23 (v1.01)

  • パラメータ変更
    • $wgFlickrShowGalleria['Path'] ← $wgFlickrShowGalleria['Dir']
      (旧パラメータでも一応動作するようにしておいたが、次は削除すると思う。)
  • パラメータ追加(いずれも省略可)
    • $wgFlickrShowGalleria['Size'] (default '.min') …… 圧縮前のcodeも使えるようにした。その場合は空文字列 "" を与える(既定では圧縮コードを利用)。
    • 【非推奨】$wgFlickrShow['Style'] …… スタイルを追加したい場合に使用。作者がtitleを消したいために追加したもの。通常は MediaWiki:Common.css を書き換えればいいので、これを使う必要はない。
    • 【非推奨】$wgFlickrShow['Script'] …… デバッグ用。
    • $wgFlickrShow['jQuery'] …… jQuery を置いているパスの指定が必要な場合に使う。省略時は "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"。

2014.10.14 (v1.00)

  • 初版

Thanks a lot

  • 最終更新日:2014年12月9日 (火)


» Favorites

» @kimagurenote