神戸市が提供している阪神・淡路大震災の写真をスライドショーで見れるようにしてみた

昨日はほぼ1日外出していたのですが、今朝色々見ていたら、神戸市が阪神淡路大震災の写真を公開していました。

http://kobe117shinsai.jp/

写真およそ1000点あるそうです。すごい。これ全部見たいなと思って、ただ全部見るにはこのままだと不便があるなと思ったので、スライドショーで見れるようにしてみました。

kobe.117

さくっと1時間くらいで作ったのですが、jQueryはSupersizedという全画面表示のやつを選びました。

Supersized – Full Screen Background Slideshow jQuery Plugin

上記サイトでcsvとrdfが配布されてるのですが、データ小さかったので、csvを使うことに。

画像データの一括ダウンロード

csvを読み込んで配列に格納するところはこんな感じ。

setlocale(LC_ALL, 'ja_JP.UTF-8');
$file = get_bloginfo('template_url').'/kobe.csv';
$data = file_get_contents($file);
$temp = tmpfile();
$meta = stream_get_meta_data($temp);

fwrite($temp, $data);
rewind($temp);

$file = new SplFileObject($meta['uri']);
$file->setFlags(SplFileObject::READ_CSV);

$csv  = array();

foreach($file as $line) {
    $csv[] = $line;
}

fclose($temp);
$file = null;

んで、まずうちのサーバに画像データを動かさなければいけない。まあ取れればいいですよね的な書き方ですが。

foreach($csv as $entry) {
$filename = $entry[2];
$image = $entry[3];
$data = file_get_contents($image);
file_put_contents('/kobe_photo/'.$filename.'.jpg',$data);
}

これで叩き込んだ後、表示系。Supersizedはヘッダに画像リスト作る感じでした。

 foreach($csv as $entry) {
$filename = $entry[2];
$image = 'https://ex-tra.jp/kobe_photo/'.$filename;
$name = $entry[5];
if($entry=== end($csv)) {
  echo "{image : '".$image."', title : '".$name."', thumb : '".$image."'}";
} else {
  echo "{image : '".$image."', title : '".$name."', thumb : '".$image."'},";
}

後はデモファイルのコードそのまま流用して、余分なUI消して、見れるようになりました、という感じです。

夜にでも僕も通しで見てみようと思います（というか、そのために作った）。

加藤 康祐 / 企画・設計

プランナー、デザイナー。加藤康祐企画設計代表。Webデザインを入り口に、2005年よりフリーランスとしてのキャリアスタート。主な仕事としてベンチャー企業でのサービスのUXデザイン、独法との防災メディアの運営、社会的養護の子どもたちの自立を支援するNPOのサポート。ラグビーと料理、最近イラスト。

加藤康祐企画設計

是非、フォローしてください！
Twitter / Instagram

『ひとり仕事: フリーランスという働き方』 加藤 康祐

posted with amazlet at 15.09.10

(2012-10-5)
売り上げランキング: 14,705
100円

Amazon.co.jpで詳細を見る

フリーランスとして働き始めるってどういうことだったのか？フリーランスとして働くってどういうことなのか？フリーランスが目指すことってなんなのか？5年間の自分の経験から書きました。（2010年執筆）