Home About Tutorial Examples My page Create New

web search

逆マッシュアップ手順「パタパタフォトギャラリー」

Sayoko Shimoyama

Send a Message

Join as a Collaborator

License :

マウスオーバーすると写真が回転して詳細情報や地図へのリンクが表示されるアプリ「パタパタフォトギャラリー」の作り方の解説ページです。

Update: Jan 15, 2016

value

Post to this page

Get Embed Code

App detail

「パタパタフォトギャラリー」はマウスオーバーすると写真が回転して詳細情報とルート検索へのリンクが表示されるアプリです。サンプルとしてご当地ソフトクリームのオープンデータが入っています。このデータをLinkData.orgに公開されている別のデータに入れ替えて、オリジナルのアプリを作ってみましょう。

パタパタフォトギャラリー

Sayoko Shimoyama

1937 runs , 73 forked , Update:Oct 9, 2017

value

15 0

Update: Jan 15, 2016 (Sayoko Shimoyama)

Text detail

【パタパタフォトギャラリーのデータの要件】＜必須項目＞・画像のURL　※画像への直リンク　OKな例）https://scontent-nrt1-1.xx.fbcdn.net/hphotos-xpt1/v/t1.0-9/12241444_999754583400286_1742530213585756273_n.jpg?oh=e7869113d6c11309090e85aa49faa902&oe=571F318B 　NGな例）https://www.facebook.com/photo.php?fbid=999754583400286 ・画像のタイトル　例）紅芋ソフト＜あるとベターな項目＞・画像の説明　例）沖縄空港にて紅芋ソフト。イモ味でした。粒が粗めで漢気を感じた。・住所　例）沖縄県那覇市鏡水１５０・緯度　※世界測地系(WGS84) 　例）26.20724968 ・経度　※世界測地系(WGS84) 　例）127.6503163

Update: Jan 15, 2016 (Sayoko Shimoyama)

Data detail

このチュートリアルでは、鯖江市役所（めがねのまち鯖江）が公開しているオープンデータ「西山動物園レッサーパンダ」に入れ替えてみます。

西山動物園レッサーパンダ

Sabae City

Update:Jan 17, 2016

value

3 0

Update: Jan 15, 2016 (Sayoko Shimoyama)

Image detail

【STEP-1】アプリのFork パタパタフォトギャラリーのアプリ（http://app.linkdata.org/app/app1s1198i）にアクセスし、「このアプリをForkして新しいアプリを作る」ボタンをクリックします。

Update: Jan 15, 2016 (Sayoko Shimoyama)

Image detail

【STEP-2】データの入れ替え ①「入力データ」のタブを選択 ② "オープンデータソフトクリーム" の左の「×」をクリックして元データを削除 ③「データ作品を追加する」ボタンをクリック

Update: Jan 15, 2016 (Sayoko Shimoyama)

Image detail

（STEP-2のつづき） ④ 表示されたポップアップの入力フォームにデータセット名を入力（例：西山動物園レッサーパンダ） ⑤ サジェストされた選択肢をクリック ⑥ 「追加」ボタンをクリック

Update: Jan 15, 2016 (Sayoko Shimoyama)

Image detail

【STEP-3】プログラムの書き換え ① 「JavaScript」のタブを選択

Update: Jan 15, 2016 (Sayoko Shimoyama)

Code detail

（STEP-3のつづき） ② 4行目の表示タイトルのダブルクォート（"）で囲んである文字列を書き換え

Click to Select

// ※表示タイトル
PG.title = "西山動物園レッサーパンダギャラリー";

Update: Jan 15, 2016 (Sayoko Shimoyama)

Code detail

（STEP-3のつづき） ③ 8行目〜13行目のプロパティ（項目名）の設定の書き換え ※ ダブルクォート（"）で囲んである文字列を、入れ替え先のデータのプロパティ（項目名）に置き換えてください。

Click to Select

// ※プロパティの設定
PG.property = {
	image : "photo",
	label : "name",
	detail : "remarks",
	address : "residence",
	long : "http://www.w3.org/2003/01/geo/wgs84_pos#long",
	lat : "http://www.w3.org/2003/01/geo/wgs84_pos#lat"
}

Update: Jan 15, 2016 (Sayoko Shimoyama)

Image detail

※ 入れ替え先のデータのプロパティ（項目名）は、データの公開ページ（例：http://linkdata.org/work/rdf1s4032i）の「テーブルデータの内容」タブで確認できます。この項目が黒い文字（テキスト）の場合→そのままコピペ青いハイパーリンク（URI）になっている場合→リンクをコピーしてペースト

Update: Jan 15, 2016 (Sayoko Shimoyama)

Image detail

【STEP-4】アプリの設定の変更 ①「アプリの設定」ボタンをクリック ②「アプリ作品のタイトル」を変更　例）西山動物園レッサーパンダギャラリー ③「画像を変更する」にチェックを入れ、好きな画像をアップロード ④「説明文」を変更 ⑤「公開範囲」を「公開」に変更

Update: Jan 15, 2016 (Sayoko Shimoyama)

Image detail

ここまでできたら、「finish Editing」という緑色のボタンをクリックしてください。

Update: Jan 15, 2016 (Sayoko Shimoyama)

Image detail

アプリの公開画面が表示されます。ここでアプリを再生してみて…写真が置き換わって、マウスオーバーでくるくる回れば成功です！

Update: Jan 15, 2016 (Sayoko Shimoyama)

Text detail

★上手く行かなかった場合のチェックポイント★ 【STEP2】で新しいデータの名前が表示されていますか？ →古いデータの名前が残っている、あるいは何も表示されていない場合はもう一度STEP2の手順を行ってください【STEP3】でダブルクォート（"）、セミコロン（;）、コンマ（,）等の記号が消えていませんか？ →このチュートリアルに書いてあるコードとよく見比べてみましょう【STEP3】でプロパティ（項目名）は正しく入力されていますか？ →データの公開ページで表示されているプロパティと合っているかチェックしてみましょう特に黒い文字（テキスト）と青いハイパーリンク（URI）の違いにご注意ください

Update: Jan 15, 2016 (Sayoko Shimoyama)

App detail

★さらにカスタマイズするには★ CSSを変更することで、背景画像、タイトルの色等を変更することができます。【背景画像の変更方法】 1. 「画像ファイル」のタブを選択 2. 好きなファイルをアップロード 3. 表示されたURLをコピー 4. 「CSS」のタブを選択 5. 12行目のダブルクォート（"）で囲んだURLを置き換え【タイトルの色の変更】 1. 「CSS」のタブを選択 2. 17-18行目のHTMLカラーコードを変更（例：#6AB60B）以下のアプリはカスタマイズ例です。