プログラミング: 2013年4月アーカイブ

HTML5 のソース書くのに、最近 Aptana Studio 使ってるんだけど(別に秀丸エディアでも良いんだけど(笑))、Windows にインストールしたらスタートメニューにショートカットが表示されるじゃん。

でも、そのショートカットから起動できないよね?

ってか、うちだけの問題かと思ったんだけど、ググってみたらけっこうそういう問題を抱えてる人いるね。

本体("C:\Users\shinoda\AppData\Local\Aptana Studio 3\AptanaStudio3.exe")や、デスクトップに作られているショートカットからは起動出来るので放置してたんだけど、多くの人がそういう目にあってるんなら何かあからさまに問題があるんだろう・・・と調べてみたら・・・

これ、「作業フォルダ」の設定が変なんだよね?

実際には、Aptana Studio 3 関係のファイルのあれこれは全部 "C:\Users\shinoda\AppData\Local\Aptana Studio 3" 以下に作られてるんだから、ここを作業フォルダにしないといけないんじゃねえの?

つーことで、スタートメニューに表示されているショートカットのプロパティを開いて、「作業フォルダ」の設定を、

"C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Aptana"
 ↓
"C:\Users\shinoda\AppData\Local\Aptana Studio 3"

と修正したら、すんなりスタートメニューのショートカットから起動出来るようになったよ。

20130424_aptana.jpg
なんだ、もっと早く対応しとけばよかった。これで少し便利になったわ(笑)

しかし、反対に、もっと多くの人は問題なくスタートメニューから起動できてるってことだよな???
その方が不思議だわ・・・なんで?
ほんま、最初から API が用意されているんで、GPS の情報取るのもクソ楽やね。

W3C の Geolocation API Specification ページ

ここに載ってるサンプルをそのまま Aptana Studio 3 の HTML5 Template に貼り付けて、Android タブレットからアクセスしてみたんだけど、バッチリ位置情報とれたよ。

こんなソース。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>GPS</title>
<meta name="description" content="" />
<meta name="author" content="shinoda" />
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
</head>

<body>
<div>
<header>
<h1>GPS TEST</h1>
</header>
<nav>
<p>
<a href="/">Home</a>
</p>
<p>
<a href="/contact">Contact</a>
</p>
</nav>
<div>
<script>
navigator.geolocation.getCurrentPosition(successCallback,
errorCallback,
{maximumAge:600000});

function successCallback(position) {
window.alert("緯度(10進)=" + position.coords.latitude + ' 経度(10進)=' + position.coords.longitude + ' 精度=' + position.coords.accuracy + ' 標高(m)=' + position.coords.altitude);
}

function errorCallback(error) {
window.alert("位置情報エラー");
}
</script>
</div>
<footer>
<p>
&copy; Copyright  by shinoda
</p>
</footer>
</div>
</body>
</html>

緯度、経度、精度は必須項目で、必ず答えが返ってくるそうな。
確かに、TF101 では標高は NULL だった。

これで、あとは JavaScript 内でサーバ上の CGI に位置情報送って、その CGI が近郊の施設情報を返してくるようにすれば施設検索システムが出来ちゃうね。

以下、TF101 でのテスト結果。

20130422_gps1.jpg
端末の位置情報を使って良いかどうかの許可をもとめてくるので、「位置情報を共有」をクリック。

20130422_gps2.jpg
緯度、経度、精度が取得できる。
標高は null だった。
お客さんが jQuery のプラグイン「Easy Slider」を使って作成されたスライドの中身を、管理画面から設定した内容で動的に変更したいという要件があったので調査。

管理画面で、「この画像は木曜日の夜 7時から 9時の間だけ出す」みたいな設定をしたら、そのとおりにスライドに反映するという仕組み作りだ。
「Easy Slider」をやめて、スライド部分の JavaScript も新規に作っちゃうという手もあるが、それも何か「車輪の再発明」的でやだなあ(^^;・・・と思ったので(工数も跳ね上がるし)、「Easy Slider」が読み込む画像リストを動的に変更する手でいこうかと、はい。

「Easy Slider」はソースのコメントに書かれているように、

<div id="slider">
    <ul>
        <li><img src="images/01.jpg" alt="" /></li>
        <li><img src="images/02.jpg" alt="" /></li>
        <li><img src="images/03.jpg" alt="" /></li>
        <li><img src="images/04.jpg" alt="" /></li>
        <li><img src="images/05.jpg" alt="" /></li>
    </ul>
</div>

といった "slider" という ID の div ブロックに含まれる li 要素を読み込んで表示するようである。

そこで、ul タグに "jumplist" という ID を振って、easySlider function が実行される前に、

var newImage = document.createElement("img");
newImage.setAttribute("src", "images/test/img01.jpg");
newImage.setAttribute("width", "390");
newImage.setAttribute("height", "390");

var newAnchor = document.createElement("a");
newAnchor.setAttribute("href", "http://www.exsample.jp" );
newAnchor.setAttribute("target", "_blank" );
newAnchor.appendChild(newImage);

var newLi = document.createElement("li");
newLi.appendChild (newAnchor);

var list = document.getElementById("jumplist");
list.appendChild(newLi);

という具合に li 要素を足す JavaScript を実行してみると、ちゃんとスライドの画像にこの要素が足されようだ。

つーことで、JavaScript で毎回管理画面で設定された内容を見て、その内容を基に li 要素を作り直してやればいいわけだ。ふむ。この仕様で工数を見積もってみよう。

問題は、データの更新タイミングだな。
最低でも毎分自動更新を行いたいので、もしかしたら「Easy Slider」そのものにも手を入れんといかんかもなあ。

このアーカイブについて

このページには、2013年4月以降に書かれたブログ記事のうちプログラミングカテゴリに属しているものが含まれています。

前のアーカイブはプログラミング: 2013年1月です。

次のアーカイブはプログラミング: 2013年5月です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。


月別 アーカイブ

電気ウナギ的○○ mobile ver.

携帯版「電気ウナギ的○○」はこちら