メニューを閉じる

テクノデジタルグループ

メニューを開く

2015.11.16

プログラミング

Railsのturbolinksで地図APIの課金を回避できなかった

GTラボ坂東です。
いまやってる案件で某社の地図APIを使用しているんですが、railsのturbokinksと相性が悪かったので共有します。

まず、Web地図APIは有料です。
下記は大げさですが、課金カウントが無料範囲を超えると請求か停止かの通知がやってきます。
突然GoogleMaps APIのライセンス費用を請求され
http://q.hatena.ne.jp/1424761782

そして、大体はAPIの初期化時に課金カウントが発生します。
課金を避けるには、とにかく初期化の回数を減らさなくてはいけません。
最悪な実装は「ページ遷移ごとに地図APIの再ロードと初期化する」ことです。
でもページ遷移しないでページをajaxで動的に書き換えていくのって面倒ですよね。

Railsにはturbolinksという機能があります。
ページ遷移前と遷移後のhtmlの差分だけを動的に書き換えるというものです。
例えば、こういうページがあったら(実際にはerbで書いてます)、

遷移前.html
<div id='1'><h1>amazarashi</h1></div>
<div id='2'><strong>秋田</strong></div>
<div id='3'>おさむ</div>

遷移後.html
<div id='1'><h1>amazarashi</h1></div>
<div id='2'><strong>秋田</strong></div>
<div id='3'>ひろむ</div>

3行目だけを動的に書き換えてくれるんです。
サーバー側は凄く重たそうな処理なんですが、何が嬉しいかというとcssやjsの再ロードをしなくて済むのでブラウザの動作が軽くなるというという点。
って事は地図APIのロードも抑えられる?!

で、やってみました。こういうページを作って実験。

遷移前.html
<div id="contents">あまざらし</div>
<div id="mapView"></div>

javascript 地図API初期化
map = new Map( document.getElementById('mapView') )

遷移後.html
<div id="contents">amazarashi</div>
<div id="mapView"></div>

遷移後にjsのロードは発生していない、mapの中身も残ってる!
でも、うまく動きませんでした。

turbolinks側の挙動として、差分更新じゃなく一旦bodyの中身を全部消し再描画してるんじゃないかなと。
消えた時にmapとdivの紐付けが切れちゃう。
更に地図API自体に紐付けしなおすという機能が無くて、初期化(new)しなおすしかないんですよね。でもそれじゃ課金カウントされそう。
地図APIをハックしたらうまくいきそう。怒られるのでやらないですが。

turbolinksは諦め、画面は自力で動的に書き換えまくる事にしました。

おわり。


【記事への感想募集中!】

記事への感想・ご意見がありましたら、ぜひフォームからご投稿ください!
  • こんな記事が読んでみたい、こんなことが知りたい、調べてほしい!という意見も募集中!
  • いただいた感想は今後の記事に活かしたいと思います!

感想フォームはこちら


【テクノデジタルではエンジニア/デザイナーを積極採用中です!】

下記項目に1つでも当てはまる方は是非、詳細ページへ!
  • 自分でアプリを作ってみたい
  • ITで世の中にワクワクを生み出したい
  • 使いやすさ、デザインにこだわったWebサイトを開発したい

採用情報の詳細はこちら


Qangaroo(カンガルー)

  • 徹底した見やすさと優れた操作性で、テストの「見える化」を実現。
  • テストの進捗が見える。開発がスマートに進む。
  • クラウド型テスト管理ツール『Qangaroo(カンガルー)』

【テクノデジタルのインフラサービス】

当社では、多数のサービスの開発実績を活かし、
アプリケーションのパフォーマンスを最大限に引き出すインフラ設計・構築を行います。
AWSなどへのクラウド移行、既存インフラの監視・運用保守も承りますので、ぜひご相談ください。
詳細は下記ページをご覧ください。

https://www.tcdigital.jp/infrastructure/

最近の記事