プレゼンテーション×地図
「StoryMapJS」を使ってみよう「StoryMapJS」を使ってみよう
2014.6.29
Code for Kanagawa
古川
自己紹介
• 名前
– 古川和年(ふるかわかずとし)
• 仕事
– システムインテグレータ
• ボランティア/プロボノボランティア/プロボノ
– Code for Kanagawa
• 趣味
– スキー、テニス、アウトドア
– 読書
• 尊敬する人
– 佐々木常夫さん、岡野雅⾏さん、榎本博明さん、⼩林三郎さん、
渋沢栄一さん
Table of Contents
• StoryMapJSとは
• 使ってみよう
• 地域活性に応用してみよう
StoryMapJSとは
• North Wertern University knight labで開発さ
れたサーバサイドJavaScriptインタープリタ
• 地図情報とキーメッセージを同時にプレゼン
テーションするツールテーションするツール
• Open Street Mapが使える
• 例えば観光地の紹介ツールとして強⼒
http://projects.knightlab.com/#about
これ
StoryMapJSとは
StoryMapJSとは
キー
位置情報
キー
メッセージ
StoryMapJSとは
クリック
StoryMapJSとは
スライド
StoryMapJSとは
位置情報更新
次のキー
メッセージ
StoryMapJSとは
動作環境は2パターン
• Knight Labのサーバで動かす
Google Drive
• 自前でホスティングする
コンテンツ情報
コンテンツ情報
自前のサーバ
StoryMapJSとは
動作環境は2パターン
• Knight Labのサーバで動かす
Google Drive
• 自前でホスティングする
コンテンツ情報
コンテンツ情報
自前のサーバ 今回はこちらで
使ってみよう
• 必要なもの
– Googleアカウント
– ブラウザ(Chrome推奨)
– Mac or Windowsパソコン
使ってみよう
• Googleアカウントでログインする
https://www.google.co.jp/
使ってみよう
• StoryMapJSにアクセスしGoogle Driveへの接
続を許可する
http://storymap.knightlab.com/http://storymap.knightlab.com/
接続を許可する
使ってみよう
• StoryMapを新規作成します
「New」を選ぶ
「Map」を選ぶ
使ってみよう
• StoryMapJSにアクセスしGoogle Driveへの接
続を許可する
タイトル
「Create」を選ぶ CMS管理画⾯
使ってみよう
使ってみよう
まずは環境設定
使ってみよう
Japanese
Open Street Maps: Standard
使ってみよう
①〜③を⼊⼒したらSave
①トップ画面のタイトルを入力する
②説明を記述する
③挿入したい画像のURL
Or
アップロードする
使ってみよう
①〜③を⼊⼒したらSave
①トップ画面のタイトルを入力する
②説明を記述する
③挿入したい画像のURL
Or
アップロードする
使ってみよう
Preview
使ってみよう
ユーザー側からの⾒え⽅を確認する
使ってみよう
同じ要領でスライドを作っていく
使ってみよう
住所かGoogle検索で位置情報を⼊⼒する
使ってみよう
スライドを作り終わったら「Share」する
使ってみよう
使ってみよう
プレゼンテーションへのURLリンク SNSに直接シェア
サイトへの埋め込
み用コード
使ってみよう
• ちなみにコンテンツデータの保存場所は
自分のGoogle Driveのここに保存されています
地域活性に使ってみよう
• 観光客がより多く訪れるよ出身地のグルメ
マップを作成
http://cdn.knightlab.com/libs/storymapjs/latest/embed/?url=https://www.googledri
ve.com/host/0B5JN6gjWbLv9QkplRmRIMzd6X0k/draft.json
Thank you!Thank you!

プレゼンテーション×地図 StoryMapJSを使ってみよう