Mable Preview って何？
もうあなたは Mable Preview で遊びましたか？
好きな場所の道路データを好きな範囲で切り取ることができます。ただ、それだけなのですが、全世界自由に切り取れるところに魔術的な魅力があり、ハマる人は結構ハマります（特に地図好きね）。
こいつの裏側の仕組みは置いておいて、フロント、いわゆる Web アプリのみなさんが実際に目で見て触れられる部分のお話をしたいと思います。
なぜ作ったの？
Mable の構想が生まれたときには、プレビューまで頭にはありませんでした。
しかし、OpenStreetMap をレーザーカッターで扱えるようにデータ加工したり、好きな範囲を切り出してきたり、切り出してみると見栄えがまた異なってたり…と。実際に、Mable の製作過程で生まれた課題がそのまま Mable API（Mable Preview の裏側）の基本仕様になっていきました。したがって、最初は公開して使ってもらうというよりは、内部ツールとしての運用を考えていました。
それが作り始めると、「好きな範囲の道路線を気軽に切り出せる」という体験がなかなか面白く、これを内部ツールにとどめておくのはもったいないと思い、公開アプリに方向転換しました。
そもそも、わたしたちは根っからの Maker というよりは Web エンジニアと建築デザイナーのチームなので、テーブルのプロトタイプを作ってお披露目するにはそれなりの時間を要しました。まずはプレビューでいいから、Mable というプロダクトの魅力を伝えられればという思いもありました。
何で作られてるの？
Mapbox GL JS という Mapbox 社がオープンソースで提供している JavaScript ライブラリを使用しています。
ブラウザーで動く地図ライブラリっていろいろあるんですが、なぜ、Mapbox GL JS を選択したか。理由は簡単。Mapbox が配信する背景地図データが OpenStreetMap ベースになってるからです。切り出した道路線と背景の道路線が一致してないのは気持ち悪いし、コンセプトとしてプロダクトの成分はピュアでありたいと思う気持ちです。
あとは、ライブラリの名前にもある通り、WebGL サポートなので、3D ビューが可能なところです。Mable Preview では、テーブルのプレビュー画面でのみ 3D ビューが有効になります。
まだ、規模的に大したことはないので、いわゆるフレームワークは導入せず、Twitter Bootstrap だけで作っちゃってます。しかし、今後の発展を考えると、そろそろ React を導入したいと思って、タイミングを見計らってるところです。
地図を切り取るという体験を楽しんでほしい
Mable Preview では自由に道路データを切り取るという体験を楽しんでもらえるように、スナップの UI/UX は試行錯誤しました。
道路線を「切り取った」ということが直感的にイメージできるように、カメラのシャッターを切ったようなアニメーションを加えています。その発想から、切り取る際のボタンもシャッターボタン風にしました。
Mable Preview が単なるプレビューにとどまらず、いろんな場所のスナップを撮って、地図のおもしろさを発見してもらえれば嬉しいです。
新機能「History」
最後に、最近追加した新機能の紹介です。Mable Preview で切り取ったスナップ（道路線）を履歴として自動的に保存してくれる機能です。
保存できる履歴は最大６箇所まで。それ以上保存しようとすると、古いものから順に消えます。また、ブラウザーのローカルストレージに保存されます。たとえば、Chrome で保存したものは、Safari や Firefox などの他のブラウザーでは見れませんのでご注意を。逆も然りです。
そのうち、ユーザーログインの機能が追加されるかもしれないので、そうしたら、ユーザーアカウントごとに履歴をクラウドに保存してもらうようなこともできるようになると思います。
ご期待ください！
