
神戸市が提供している阪神・淡路大震災の写真をスライドショーで見れるようにしてみた
昨日はほぼ1日外出していたのですが、今朝色々見ていたら、神戸市が阪神淡路大震災の写真を公開していました。
写真およそ1000点あるそうです。すごい。これ全部見たいなと思って、ただ全部見るにはこのままだと不便があるなと思ったので、スライドショーで見れるようにしてみました。
さくっと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
売り上げランキング: 14,705
100円
フリーランスとして働き始めるってどういうことだったのか?フリーランスとして働くってどういうことなのか?フリーランスが目指すことってなんなのか?5年間の自分の経験から書きました。(2010年執筆)