knight labのStory Map JSの使い方です。

1. プレゼンテーション×地図
「StoryMapJS」を使ってみよう「StoryMapJS」を使ってみよう
2014.6.29
Code for Kanagawa
古川

2. 自己紹介
• 名前
– 古川和年(ふるかわかずとし)
• 仕事
– システムインテグレータ
• ボランティア/プロボノボランティア/プロボノ
– Code for Kanagawa
• 趣味
– スキー、テニス、アウトドア
– 読書
• 尊敬する人
– 佐々木常夫さん、岡野雅⾏さん、榎本博明さん、⼩林三郎さん、
渋沢栄一さん

3. Table of Contents
• StoryMapJSとは
• 使ってみよう
• 地域活性に応用してみよう

4. StoryMapJSとは
• North Wertern University knight labで開発さ
れたサーバサイドJavaScriptインタープリタ
• 地図情報とキーメッセージを同時にプレゼン
テーションするツールテーションするツール
• Open Street Mapが使える
• 例えば観光地の紹介ツールとして強⼒
http://projects.knightlab.com/#about
これ

5. StoryMapJSとは

6. StoryMapJSとは
キー
位置情報
キー
メッセージ

7. StoryMapJSとは
クリック

8. StoryMapJSとは
スライド

9. StoryMapJSとは
位置情報更新
次のキー
メッセージ

10. StoryMapJSとは
動作環境は2パターン
• Knight Labのサーバで動かす
Google Drive
• 自前でホスティングする
コンテンツ情報
コンテンツ情報
自前のサーバ

11. StoryMapJSとは
動作環境は2パターン
• Knight Labのサーバで動かす
Google Drive
• 自前でホスティングする
コンテンツ情報
コンテンツ情報
自前のサーバ 今回はこちらで

12. 使ってみよう
• 必要なもの
– Googleアカウント
– ブラウザ(Chrome推奨)
– Mac or Windowsパソコン

13. 使ってみよう
• Googleアカウントでログインする
https://www.google.co.jp/

14. 使ってみよう
• StoryMapJSにアクセスしGoogle Driveへの接
続を許可する
http://storymap.knightlab.com/http://storymap.knightlab.com/
接続を許可する

15. 使ってみよう
• StoryMapを新規作成します
「New」を選ぶ
「Map」を選ぶ

16. 使ってみよう
• StoryMapJSにアクセスしGoogle Driveへの接
続を許可する
タイトル
「Create」を選ぶ CMS管理画⾯

17. 使ってみよう

18. 使ってみよう
まずは環境設定

19. 使ってみよう
Japanese
Open Street Maps: Standard

20. 使ってみよう
①〜③を⼊⼒したらSave
①トップ画面のタイトルを入力する
②説明を記述する
③挿入したい画像のURL
Or
アップロードする

21. 使ってみよう
①〜③を⼊⼒したらSave
①トップ画面のタイトルを入力する
②説明を記述する
③挿入したい画像のURL
Or
アップロードする

22. 使ってみよう
Preview

23. 使ってみよう
ユーザー側からの⾒え⽅を確認する

24. 使ってみよう
同じ要領でスライドを作っていく

25. 使ってみよう
住所かGoogle検索で位置情報を⼊⼒する

26. 使ってみよう
スライドを作り終わったら「Share」する

27. 使ってみよう

28. 使ってみよう
プレゼンテーションへのURLリンク SNSに直接シェア
サイトへの埋め込
み用コード

29. 使ってみよう
• ちなみにコンテンツデータの保存場所は
自分のGoogle Driveのここに保存されています

30. 地域活性に使ってみよう
• 観光客がより多く訪れるよ出身地のグルメ
マップを作成
http://cdn.knightlab.com/libs/storymapjs/latest/embed/?url=https://www.googledri
ve.com/host/0B5JN6gjWbLv9QkplRmRIMzd6X0k/draft.json

31. Thank you!Thank you!