[修正版] DOJOをつかってリストにあるもののみ、指定の位置にCSSだけで光り続けるアニメーションを載せます。

昨日GOO様、落ちてましたか？メンテでしたかねえ。。。時差があるのとおつむが弱いので　もひとつわかってません。

 

ところで、すみません！！！

めっちゃクラッピーなjavascript書いてましたね。。。とほほ。

こちらに、修正晩乗せときます。

『DOJOをつかってリストにあるもののみ、指定の位置にCSSだけで光り続けるアニメーションを載せます。』

変更箇所：

aryPlaceMでaryHyoujisasetaiのPLACEとaryHyoujiSanshyoumotoのplaceの共通項をjsonにまとめておいて、のちにアニメーションのウェジットをつくります。こうすることで、呼ばれたaryHyoujisasetaiがかわっても、ノードさえきれいにけせば更新することができます。

vTitleOMとvTitleIMのarrayにウェジットを組んでおきます。

では、こんなかんじ。

function funcGenerateMapAnimeation(aryHyoujisasetai, aryHyoujiSanshyoumoto){
require([
"dojo/dom",
"dojo/_base/fx",
"dojo/fx",
"dojo/domReady!"
], function(dom, fx, coreFx){
var delay = 200;
for (var i=dom.byId("kokoM").childNodes.length-1;i>=0;i--){
dom.byId("kokoM").removeChild(dom.byId("kokoM").childNodes[i]);
}
for (var i=dom.byId("kokoE").childNodes.length-1;i>=0;i--){
dom.byId("kokoE").removeChild(dom.byId("kokoE").childNodes[i]);
}
if (aryHyoujisasetai.length>0){
var vLeftM, vTopM, vPlaceM, nodeCnvsM, attStyleM, attIdM;
var aryPlaceM = [];
for (var i=0;i<aryHyoujisasetai.length;i++){
vPlaceM = aryHyoujiSanshyoumoto[aryHyoujiSanshyoumoto.map(function(e) { return e.place; }).indexOf(aryHyoujisasetai[i].PLACE)].place;
aryPlaceM.push(vPlaceM);
}
for (var i=0;i<aryHyoujisasetai.length;i++){
vLeftM = aryHyoujiSanshyoumoto[aryHyoujiSanshyoumoto.map(function(e) { return e.place; }).indexOf(aryHyoujisasetai[i].PLACE)].left;
vTopM = aryHyoujiSanshyoumoto[aryHyoujiSanshyoumoto.map(function(e) { return e.place; }).indexOf(aryHyoujisasetai[i].PLACE)].top;
vPlaceM = aryHyoujiSanshyoumoto[aryHyoujiSanshyoumoto.map(function(e) { return e.place; }).indexOf(aryHyoujisasetai[i].PLACE)].place;
nodeCnvsM = document.createElement("canvas");
attStyleM = document.createAttribute("style");
attStyleM.value = ""
+"position: absolute;"
+"left:"+vLeftM+"px;"
+"top:"+vTopM+"px;"
+"";
nodeCnvsM.setAttributeNode(attStyleM);
attIdM = document.createAttribute("id");
attIdM.value = "mapIdM"+vPlaceM;
nodeCnvsM.setAttributeNode(attIdM);
attOnOverM = document.createAttribute("onclick");
attOnOverM.value = "alert(vName)";
nodeCnvsM.setAttributeNode(attOnOverM);
attWidthM = document.createAttribute("width");
attWidthM.value = "35px";
nodeCnvsM.setAttributeNode(attWidthM);
attHeightM = document.createAttribute("height");
attHeightM.value = "20px";
nodeCnvsM.setAttributeNode(attHeightM);
dom.byId("kokoM").appendChild(nodeCnvsM);

var canvasM = document.getElementById("mapIdM"+vPlaceM);
if (canvasM.getContext){
var ctx = canvasM.getContext('2d');
ctx.font = "bold 18px Arial";
ctx.fillStyle="#b30000";
ctx.fillText(vPlaceM, 5, 15, 200);
}

}

if (dom.byId("kokoM").getElementsByTagName("canvas").length>0){
var vTitleOM = [];
var vTitleIM = [];
for (var a=0;a<aryPlaceM.length;a++){
vTitleOM[a] = new fx.fadeOut({
node:"mapIdM"+aryPlaceM[a],
delay: parseInt(delay),
duration:1100,
onEnd: function(){
for (var a=0;a<aryPlaceM.length;a++){
vTitleIM[a].play();
}
}
}).play();
}
for (var a=0;a<aryPlaceM.length;a++){
vTitleIM[a] = new fx.fadeIn({
node:"mapIdM"+aryPlaceM[a],
delay: parseInt(delay),
duration:1100,
onEnd: function(){
for (var a=0;a<aryPlaceM.length;a++){
vTitleOM[a].play();
}
}
}).play();
}
}
}
});

}
);
}

これで、呼び出すときに

var aryHyoujisasetai = [{PLACE:"02", NAME:"TOMATO"},
{PLACE:"34a", NAME:"CUCAMBER"},
{PLACE:"21", NAME:"LEMON"}];

var aryHyoujiSanshyoumoto = [{place:0,left:442,top:211},
{place:"34a",left:442,top:211},
{place:"02",left:550,top:297},
{place:"21",left:543,top:244},
{place:"c4",left:85,top:67}];

funcGenerateMapAnimeation(aryHyoujisasetai, aryHyoujiSanshyoumoto);

スタイルシートは

<style type="text/css">
div#wrapper {
width: 668px;
height: 318px;
margin: 0 auto;
}
.relative{
position: relative;
}
</style>

ＨＴＭＬは

<div id="wrapper" class="relative">
<img src="img/maps/map.png" width="668">
<div id="kokoM"></div>
</div>

尚、DOJOのルートはディレクトリーによって違います。いろいろググッてDOJOの設置の仕方を確認してください。

 

ほんと、ごめんねぇ。

 

ねこでした！

CSSのみでDOJO.FXを使ってアニメーション(自動的にキラキラ光り続ける)を作ってみた。

はい、こんにちは。久しぶりにノート書きます。

DOJOをつかってリストにあるもののみ、指定の位置にCSSだけで光り続けるアニメーションを載せます。

1. 準備
- [元となるPNGファイル]
img/maps/元となる絵.png

- [あなたのarray]アニメーションで表示するPLACE(json file)
[{PLACE:"a1", NAME:"TOMATO"},
{PLACE:"b1", NAME:"CUCAMBER"},
{PLACE:"c1", NAME:"LEMON"}]

- [あなたのJSONリスト]アニメーションで表示するための座標リスト。(json file)
[{place:0,left:442,top:211},
{place:a1,left:442,top:211},
{place:2,left:550,top:297},
{place:b3,left:543,top:244},
{place:c4,left:85,top:67}]

こんな具合で実際のサイズでPNGファイルをクリックして取ればいいのではないでしょうか。
そうすれば、サイズさえ同じであれば思ったところに光るアニメーションを置けます。

(test.php)あなたのJSONリストを先につくっておりましょう。
<html><head>
<?php
if (isset($_GET['left']) && isset($_GET['top']) && isset($_GET['place'])){
$myfile = fopen("あなたのJSONリスト.json", "a") or die("Unable to open file!");
$txt = "{place:".$_GET['place'].",left:".$_GET['left'].",top:".$_GET['top']."},\n";
fwrite($myfile, $txt);
fclose($myfile);
}
?>
<script>
function getLocation(){
document.getElementById("left").value = this.event.offsetX;
document.getElementById("top").value = this.event.offsetY;
}
</script>
</head>
<body>
<img src="img/maps/元となる絵.png" width="668" onClick="getLocation();">
<form action="test.php" method="get">
Place: <input type="text" name="place" id="place"><br>
Left: <input type="text" name="left" id="left"><br>
Top: <input type="text" name="top" id="top"><br>
<input type="submit">
</form>
</body></html>
これで、準備OK。

2.実装
(main.php)こちらメインです。
<html>
<head>
<!--<?php //include_once("わたしはここにdojo関係のディレクトリをまとめています.php"); ?>//必要なDOJOのモジュールを読んでください。
ルートはディレクトリーによって違います。いろいろググッてDOJOの設置の仕方を確認してください。 -->
<script>
var あなたのarray = [];
あなたのarray.push({PLACE:"a1", NAME:"TOMATO"});
あなたのarray.push({PLACE:"b1", NAME:"CUCAMBER"});
あなたのarray.push({PLACE:"c1", NAME:"LEMON"});
funcMap(あなたのarray);

function funcMap(あなたのarray){
require([
"dojo/request",
"dojo/dom",
"dojo/_base/fx",
"dojo/fx"
], function(request, dom, fx, coreFx){
var delay = 200;
dojo.xhrGet({
url: "あなたのJSONリスト.json",
handleAs: "json",
load: function(あなたのJSONリスト) {
for (var i=0;i<あなたのarray.length;i++){
var vLeft = あなたのJSONリスト[あなたのJSONリスト.map(function(e) { return e.place; }).indexOf(あなたのarray[i].PLACE)].left;
var vTop = あなたのJSONリスト[あなたのJSONリスト.map(function(e) { return e.place; }).indexOf(あなたのarray[i].PLACE)].top;
var vPlace = あなたのJSONリスト[あなたのJSONリスト.map(function(e) { return e.place; }).indexOf(あなたのarray[i].PLACE)].place;
var nodeCnvs = document.createElement("canvas");
var attStyle = document.createAttribute("style");
attStyle.value = ""
+"background-color:#ccb;"
+"position: absolute;"
+"left:"+vLeft+"px;"
+"top:"+vTop+"px;"
+"";
nodeCnvs.setAttributeNode(attStyle);
var attId = document.createAttribute("id");
attId.value = "mapId"+vPlace;
nodeCnvs.setAttributeNode(attId);
dom.byId("wrapper").appendChild(nodeCnvs);

//ここからループでアニメーションを書き出していきます。
eval("var vOmapId"+vPlace+" = new fx.fadeOut({"
+"node:'mapId"+vPlace+"', "
+"delay: parseInt(delay), "
+"duration:1100,"
+"onEnd: function(){"
+"var vImapId"+vPlace+" = new fx.fadeIn({ "
+"node:'mapId"+vPlace+"', "
+"delay: parseInt(delay), "
+"duration:1100,"
+"onEnd: function(){"
+"vOmapId"+vPlace+".play();"
+"}"
+"}).play();"
+"}"
+"}).play();");
}
},
error: function(err) {
/* this will execute if the response couldn't be converted to a JS object,
or if the request was unsuccessful altogether. */
}
});
}
);
}
</script>

//CANVASではなくてもSVG、ボタンなどのノードでもOKですね。
<style type="text/css">
div#wrapper {
width: 668px;
height: 318px;
margin: 0 auto;
}
canvas{
width: 7px;
height: 7px;
border: 1px solid #F00;
color: #F00;
text-align: center;
}
.relative{
position: relative;
}
</style>
</head>
<body>
<div id="wrapper" class="relative">
<img src="img/maps/元となる絵.png" width="668">
</div>
</body>
</html>
これでおしまい。もし、データなどのリフレッシュが必要な場合はノードをきれいにしてからかウェイジットを書きお直しましょう。

アフィリエイトというのはアメリカからもできんのかいな。本日を持ってアフィリエイトやめます。

と、いうより、もう少し勉強してからしようかなと思います。

明けましておめでとうございます。今年もよろしくお願いします！

昨日だったかな？アメリカでは三日の日です。youtubeビデオでいろいろと調べてみたら、結構いろんなテクニックがあるらしいです。たとえば、

１．ブログはターゲットをひとつに絞っていくつも作る。特に、衣・食・住関係は脈あり。

２．ターゲットに沿ったアフィリエイトの広告を出すべし。

３．ターゲットの広告には自分の感覚を添えた文章をつける。

などなど。

こりゃいかん、ねこのブログはぜんぜんなっとらん。ターゲットが剣道、IT、アメリカ生活やもんなぁ。

これは練り直さんと。

今後は、ターゲットを絞って。。。って、しぼりませーん！

だって、好きでやってるからね。

ブログといえば、金もーけ、カリスマブロガー、食レポなど、どうにもこうにも。。。取りざたされやすいけど、本当は「ウェブサイト覚え書き」の進展系ワード。「web log」ウェブログが、縮まってブログになった。

とういうことは、なんでもかいていいわけ。そこに興味をもって、はたまた縁があってみてくれる「訪問者」さまもいるわけですね。

今回、二週間だけアフィリエイトやってみてわかったことは、どんな仕事にも近道は無いってこと。お金は時間と汗と知識が運んでくれます。ブロガー職や、ユーチューバーもそう、結構みんな時間かけて必死でやってる。 だから、「一ヶ月でアフィリエイト収入」なんちゃらってうたってる怪しいサイトやセミナーにお金払っちゃだめですよ！

 みなさん、無病息災、飛躍の年をお過ごしください!

読んでくださって有難うございました。

 

ねこでした。