なんとか日誌

アプリとかギターとかオーディオとか

Ruby on RailsとJavascriptの連携

Webサービスを作ろうと思って、はじめは使い慣れたPythonのWebフレームワークである「Django」を使っていたものの、詰まったので気分転換に「Ruby on Rails」を導入してみたところ、非常によい、使いやすい。

 

で、作っていくとJavascriptに、データベースから取得したデータを渡す必要がある事に気づき、RailsJavascriptの連携が必要となった。

では以下に「データベースのデータをJavascriptへ渡す方法」をシンプルにまとめます。

 

①データベースからデータの取得

<div id="reviews" data-reviews="<%= @reviews.to_json %>"></div> 

HTMLとしては空の<div></div>により、データベースからデータを引っ張ってくる。

このとき、idは任意だが、data-reviewsのところは「data-◯◯◯」となるように。

 

JsonデータからJavascriptへの変換

var reviewsHash = $('#reviews').data('reviews'); 

 $('#◯◯)は、①のidを指定、data('◯◯◯')は①の「data-◯◯◯」と一致させる。

 

これで、このreviewsHashの中身はJavascriptにおける連想配列となりました。

以上。

JQueryで世界地図を実装できる「JQVMap」

お久しぶりです。

かねてからプログラマーになりたいなぁと思っていて、以前はiOSアプリケーションを作成していましたが、今度はWebアプリを作ろうかなぁと思い勉強中です。

なお、アイデアを実現するには技術的にハードルが高く絶賛挫折中です。みんなどうやって技術を高めていくんだろうね。

 

さて、今作ろうとしているWebアプリは世界地図を搭載する必要があり、最初はGoogle Map APIシェープファイル(≒.kmlファイル)を活用する方法を検討していました。しかしこれが実装してみると非常に動作が重く、実用に耐えませんでした。

そこで何か良いものがないかと調べると、JQueryで世界地図を実装出来るライブラリがありました。(最初からこっちにしとけば良かった…)

 

Clickable Maps in JavaScript | Interactive Maps | JQVMap

 

日本語での解説などが非常に少なかったので、拙筆ながらここで紹介させて頂きます。

JQVMapはいくつかのJavaScriptファイルとJQueryをインポートすれば手軽に実装出来て動作が軽いライブラリです。

 

・具体的な記述方法

<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#vmap').vectorMap({
map: 'world_en',
backgroundColor: '#bbddff',
color: '#ffffff',
hoverOpacity: 0.8,
selectedColor:"#ffff88",
showTooltip:true,
multiSelectRegion:true,
enableZoom: false,
scaleColors: ['#C8EEFF', '#006491'],
normalizeFunction: 'linear',
onLoad : function (element, code, region)
{
},
onRegionOver : function (element, code, region)
{
},
onRegionOut : function (element, code, region)
{
},
onRegionSelect: function(element, code, region)
{
},
onRegionDeselect: function(element, code, region)
{
}
});
});
</script>
<div id="vmap"></div> 

※ ファイルのインポートは省略しています。

<script>〜</script>で実装する地図のプロパティを設定し、<div>〜</div>に実装されます。

onLoadなどは、各タイミングで実行される関数です。

jqvmap

このサイトにJQVMapがもつプロパティやメソッドが一覧になっています。

以下箇条書き

・各国はプロパティに、国名を「region」、ISO2の2桁コードを「code」を持つ

・特定の国のみ色を変えたい等の場合は以下のコードを、地図設定の<script>以降に記述する(この記述はアメリカのみを青色にしている)

jQuery('#vmap').vectorMap('set', 'colors', {us: '#0000ff'}); 

 

などなど…

Kororaでシャドバをプレイした話

wineインストールしてplayonlinuxインストールしてsteamインストールして前の記事の手順でシャドバインストールしてsteamから普通にシャドバ起動できた