Movable Typeを使った観光ナビゲーターシステムの特徴と

導⼊事例のご紹介

株式会社常盤商会

1

Index• 弊社常盤商会のご紹介• 観光ナビゲーターシステムとは？• MTで構築した理由• アプリのCMSをMTで構築• 結果として• 現在の取り組み• 今後の課題• 謝辞

2

うべ観光ナビゲーター 防府市観光地の魅力

（株）常盤商会のご紹介

3

• 本州の最⻄端 ⼭⼝県に本社を置く、⽥舎のちいさな会社です。• システムインテグレータ、ソフトウェアデベロッパーでありながら、なぜか農業や６次産業までやってます。

• Web系の開発、ウェブサイト制作とスマートフォン向けのアプリ、システム等を開発。

• 広島県、東京都にも営業拠点があります。• MovableType歴：ちょうど１０年。• ⼭⼝県で唯⼀のProNet参加企業。• http://www.siy.co.jp/

⼭⼝県

常盤商会

観光ナビゲーターシステムとは？• 2011年、地元⼭⼝県宇部市で実証実験

• 現代⽇本彫刻展 UBEビエンナーレ 会場に点在する彫刻と、会場内の施設をナビゲート

• 観光情報をGPS、地図を活⽤してスマートフォンで情報を閲覧するためのアプリとして開発

• 2013年に⼭⼝県宇部市と防府市で採⽤（ver.2へ移⾏）

• LINEカメラのようにスタンプを撮影画像に合成

• シークレット（隠し要素）でスタンプラリー的探索ができる

• AR（拡張現実）で、カメラを向けた⽅向に何があるかをエアタグで表⽰

• アプリとWEBサーバの組み合わせで動作（中⾝を⼊れ替え可能）

4

MTとアプリの組み合わせで動作しています。

導⼊実績• ⼭⼝県宇部市（2011年,2013年）「うべ観光ナビゲーター」• 「宇部観光ナビゲーターシステム開発事業」（2011年）• 「宇部市着地型旅⾏商品造成⽀援事業」（2013年）

• ⼭⼝県防府市（2014年）「防府市観光地の魅⼒」• 「防府市観光地の魅⼒ガイダンスシステム開発事業」（2013年）

• いずれもGooglePlay,Apple AppStoreで「うべ」「観光」 「防府」「観光」で検索してダウンロード出来ます。（無料）

5

朝日新聞山口版 2014年3月4日

そもそもウェブサイトとアプリの違いは？

6

項⽬ ウェブサイト アプリ導線 検索・サイト閲覧 検索・アプリインストール情報提供 サイト内告知・メール アプリ内告知・プッシュ通知地図連動 Googleマップ埋め込み Googleマップ連動更新 ⼿動またはCMS アップデートまたはCMS情報提供の形態 ユーザーが⾃ら閲覧しなけれ

ばならない。情報提供者が利⽤者へ能動的に情報提供できる。

ウェブサイトは静的に、アプリは動的なメディア

アプリによるモバイルナビゲーションやARなど整備（観光要因）

⾃治体観光担当者の要望• 観光ウェブサイトの整備をしている中で、アプリまで更新作業をするのは時間的に難しい。→２度⼿間、３度⼿間になる。

• 既に整備した観光情報（ウェブサイト）を流⽤できないのか？

• アプリを改修せずに内容だけ⼊れ替えたい。• 次年度以降の予算に限りがあり、維持が難しいので単年度で完結してほしい。（あとは⾃分たちでやりたい）

7

MTならば・・・

■MT・WordPressからインポート

■観光ウェブサイトとアプリを１回の作業で同時に更新

■ブログ形式＋カスタムフィールドで担当職員でも可能！

弊社の分析（建前）• 地⽅⾃治体の観光系ウェブサイト（外部サイト）は、MovableTypeやWordPressで構築されていることが多い。

• アプリ側のコンテンツ構造をウェブサイトのメニュー構造のようにしてしまえば、データの受け渡しだけでウェブサイトのコンテンツを移⾏できないか？

8

MTでやれそうな予感？

MTで構築した理由（本⾳）• 予算が⾜りない

• 決まった予算枠での管理システムの開発が困難であった。

• 時間も⾜りない• 公募が４⽉、決定が５⽉末、開催（実証実験）は９⽉• ⼊札（業者決定）が８⽉、初版納期が10⽉末

• Web制作で使い慣れていたので・・・• 試しにやってみたら出来てしまった（笑）

9

やってみたら、出来ちゃいました！

MTで構築するメリット• Web系アプリの情報管理がしやすい

• アプリ⽤の管理システムを新規開発する⼿間が省ける• カスタムフィールドの多様性がマッチ• プラグイン活⽤で幅が拡がる

• Webとの連動性を持たせることが出来る• Webサイトとアプリを同時に⼀括管理できる• 運⽤⾯において効率化できる

• スモールスタートが可能• 開発・運⽤コストを抑えることができる

10

Webコンテンツ

アプリコンテンツ連動

観光

スポット詳細（html）

アプリ用更新データ

観光ナビゲーターシステム基本構成図

1111

観光ナビゲーター

管理システム（MovableType）

出力

アプリ

サーバアクセスは、更新情報のダウンロード時と、観光スポットの詳細情報等へのアクセスに限定している為、ごく一般的なホームページと同様のWEBサーバによる運用が可能です。（静的ファイルを参照しているにすぎない為、サーバへの負荷もかかりにくい仕様です）

アプリ自体は必要最小限の情報と、GPS、マップ、AR等のプログラムのみで構成。詳細情報はユーザーが閲覧する際にサーバへアクセス。

WEB/インターネット（管理システム側）アプリ／スマートデバイス

WEBサーバアプリ側に送信する最⼩限の情報をデータファイルとしてダウンロード。・スポット情報のインデックス・サムネイル画像

MTで構築する仕組み• ブログ記事にカスタムフィールドで必要な

情報を整備（サムネイル、位置情報、動画リンク等）

↓

• 詳細なスポット情報はカテゴリで階層化してブログ記事を⽣成（Webサーバ上にhtml⽣成）

↓

• アプリへの情報伝達⽤にデータファイルをMTで⽣成、アプリからURLをリクエストしてブログ記事を表⽰

12

MTでデータファイル⽣成• インデックステンプレートでデータファイル出⼒のテンプレートを作成

• ブログ名、カテゴリ名、記事タイトル、記事URL、位置情報などをセット• メニューの並び順、カテゴリの並び順等の情報を付与

13

グルメ

お好み焼き

広島風 店舗情報

関西風 店舗情報

ラーメン 家系 店舗情報

ブログ名

カテゴリ名サブカテゴリ名 記事エントリ

・位置情報・サムネイル・並び順など

カスタムフィールド

データファイル⽣成はこんな感じで・・・アプリがダウンロードするデータ項⽬ MTのインデックステンプレートインクルードするブログIDの取得 カスタムフィールドでフラグ付けして取得更新⽇時（記事の最新更新⽇時） MTEntryModifiedDateで全てのブログから最新1件の

更新⽇時を取得GPS設定（反応範囲 ◯ｍ） ⼿動設定（テンプレートに直接記述）デフォルトスタンプ画像URL ⼿動設定※カスタムフィールドによるアップロード対

応予定ブログ情報（ブログ名、ブログID、表⽰順） MTBlogsとカスタムフィールドで取得

表⽰順は「NumelicCustomFields」プラグインを活⽤⾔語（⽇本語、英語、中国語、韓国語） カスタムフィールドでフラグ付けして取得カテゴリ名とその階層（カテゴリ名とID、並び含む） MTCategoriesで取得記事情報（記事タイトル、カテゴリID、サムネイルURL、位置情報など）

MTEntriesとカスタムフィールドで取得

隠し要素（記事タイトル、カテゴリID、サムネイルURL、位置情報、隠し要素など）

MTEntriesとカスタムフィールドで取得

14

サイトトップ

ブログA

カテゴリA

エントリ

カテゴリB

エントリ

ブログB

カテゴリC

エントリ

カテゴリD

エントリ

カテゴリE

エントリ

MTでウェブサイトとアプリを⼀括管理する！（ウェブサイト構造図）

15

MTで観光ウェブサイトを構築・ブログ単位で⼤分類・ブログ以下のカテゴリで⼩分類・エントリ：観光ページ

アプリ初期画⾯

アプリ⼤分類メニューA

アプリ下層メニューA

観光情報

アプリ下層メニューB

観光情報

アプリ⼤分類メニューB

アプリ下層メニューC

観光情報

アプリ下層メニューD

観光情報

アプリ下層メニューE

観光情報

MTでウェブサイトとアプリを⼀括管理する！（アプリ内コンテンツ構造図）

16

アプリの観光情報構造を同じにする・ブログ ：⼤分類メニュー・カテゴリ：⼤分類の下層メニュー・エントリ：下層メニュー内の情報

MTでウェブサイトとアプリを⼀括管理する！• 実際には…

• MovableTypeのテンプレート機能で• ウェブサイト⽤ブログ記事エントリ• アプリ⽤ブログ記事エントリ

• の２種類を同時に⽣成するか、• ユーザーエージェントでCSSを

• 「ブログ記事⽤」• 「アプリ⽤ブログ記事⽤」

• で切り替えて運⽤すれば良い

17

ウェブサイトとアプリでの⾒え⽅

18

ウェブサイト アプリ

同じ記事！

ＭＴで構築した結果・・・• スキルがなくても観光スポット情報の更新ができる。

• 実際に⾃治体担当職員さんで運⽤して頂いています。

• やろうと思えばウェブサイトとアプリの双⽅を⼀括管理・更新できる。• 但し、階層構造を合わせておく必要があります。

• 既存データをインポートして効率的に情報整備できる。• MT、Wp、最悪の場合でもDBレコードのインポートとか。

• ブログ単位でアプリメニューを管理し、総取っ替えも可能になる。• MTのテンプレートとタグ、豊富なプラグインのお陰です。

• おかげさまで・・・• 九州、中四国、関東など⾊んな団体様でご検討頂けてます！！

19

低価格

短納期

利活用

現在の取り組み• スタンプラリーとクーポン配信（機能強化）

• スタンプラリーをして、クーポンを配信• クーポンは１回しか使えない／何度も使えるの⼆択• スタンプ取得はGPSによるチェックイン、またはマーカーによる認証

• クイズ機能• 観光スポットごとに３択または４択のクイズを配信• クイズに答えて正解すると、ポイントがたまっていく

• AR連動機能• マーカーにかざすと、動画が再⽣

20

MTで制御

MTで制御

MTで制御

防府市ゆるキャラ「ぶっちー」

今後の課題• テンプレート・カスタマイズと、カスタムフィールドによる構築の限界• データファイルのエラーチェック機構の必要性• アプリ連動に必要な要素をプラグイン化（したい）• DataAPIを活⽤した連動性の強化

• さらなる進化要求に対応する• ARコンテンツへの対応（平⾯モデル、３Dモデル、動画、アニメーション）• エンタテイメント要素の追加

21

観光ナビゲーターシステムの費⽤について• アプリ提供費⽤：約150万円（税別）

• Android,iOS各プラットフォーム⽤アプリ提供• （アプリデザイン・I/Fデザインカスタマイズ費⽤含む）• MovableType6⽤管理テンプレート⼀式含む

• MovableType6ライセンス：９万円（税別）~• 1サーバ無制限ユーザライセンス

• 観光コンテンツデータ整備料：別途ご相談• 件数、メディア（⾳声・動画等）によります。

22

謝辞• シックス・アパート株式会社様

• カスタマイズ性に富むMovableTypeあってこそ、可能でした。

• プラグイン開発者の皆様• 豊富なプラグインあってこそ、本システムが実現できました。

• 皆様のウェブサイト運⽤・アプリ開発の⼀助になれば幸せです。

23

ご静聴ありがとうございました

24