Creativity Sharing and
Entrepreneurial Support

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

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

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

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

1931 runs , 73 forked , Update:Oct 9, 2017
82

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 ・画像のタイトル  例)紅芋ソフト <あるとベターな項目> ・画像の説明  例)沖縄空港にて紅芋ソフト。 イモ味でした。粒が粗めで漢気を感じた。 ・住所  例)沖縄県那覇市鏡水150 ・緯度 ※世界測地系(WGS84)  例)26.20724968 ・経度 ※世界測地系(WGS84)  例)127.6503163
Update: Jan 15, 2016 (Sayoko Shimoyama)
Data detail
このチュートリアルでは、鯖江市役所(めがねのまち鯖江)が公開しているオープンデータ「西山動物園レッサーパンダ」に入れ替えてみます。
13

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
Update: Jan 15, 2016 (Sayoko Shimoyama)
Code detail
(STEP-3のつづき) ③ 8行目〜13行目のプロパティ(項目名)の設定の書き換え ※ ダブルクォート(")で囲んである文字列を、入れ替え先のデータのプロパティ(項目名)に置き換えてください。
Click to Select
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) 以下のアプリはカスタマイズ例です。

西山動物園レッサーパンダギャラリー

280 runs , 0 forked , Update:Jan 11, 2016
3

value

1 0


Update: Jan 15, 2016 (Sayoko Shimoyama)
Web page detail
★データもオリジナルのものを使いたい場合★ LinkData.orgにデータをアップロードすると、上述の手順でオリジナルのデータをアプリ化することができます。 データのアップロードの手順は下記チュートリアルをご覧ください。
Tutorial|Open data sharing & Download|LinkData http://linkdata.org/tutorial/step1
Support site to convert and publish table data as various APIs | LOD | Linked Open Data | RDF | Resource Description Framework | Semantic web | Download
Update: Jan 15, 2016 (Sayoko Shimoyama)

Grant Information

Suggested fund information for realizing the idea.

Comments