JavaScript専門のQ&Aサイト SUKEGRA - 最近の質問

WP REST APに関して

Thu, 14 Nov 2019 07:10:12 +0000

WP REST APIで取得した情報を、HTMLにてカーセルスライダー表示するにはどうすれば、良いのかわかりません。WP REST APIからの情報取得はjsにて行っています。よろしくお願いいたします

pukiwikiプラグインのRatyのスター画像が表示されない

Fri, 14 Oct 2016 08:42:24 +0000

pukiwikiのclubskinを使って新たにwikiサイトを作ろうと思っております。

その際、5段階評価を挿入できるプラグイン「Raty」を導入しようと考えています。
http://oxynotes.com/?p=10360

ですが、上記ページの通り進めていっても、「評価数：0　平均評価：0」と表示されるのみで、スター画像が表示されません。
もちろん./image内にスター画像を配置しています。

jQueryはskin/pukiwiki.skin.phpのヘッダーにCNDでv1を読み込んでいるはずです。

以下、WEB上でのソースです。

<div class="raty-plugin"><script type="text/javascript" src="./skin/jquery.raty.js"></script>
<div class="raty star0" "></div><p class="star-after">評価数：0　平均評価：0</p>
<script type="text/javascript">
$(function raty0() {
$.fn.raty.defaults.path = "./image";
$(".star0").raty({
number: 5,
score : 0,
hints: ['1', '2', '3', '4', '5'],
click: function(score, evt) {
var url = "http://○○○.com/?plugin=raty&refer=%E6%98%A0%E7%94%BB%E9%A4%A8%E3%83%9A%E3%83%BC%E3%82%B8%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88&digest=270f28c53e43b10c34e471de140319c1&raty_id=0&score=" + score;
location.href=url;
}
});
});
</script>

考えられる対策などお分かりになりますでしょうか。

素のJSをBabelでトランスパイルするのとreactは、ｊｓ基礎をやっている人にはどちらの方が簡単に理解出来、Webアプリが作れるでしょうか。

Tue, 30 Aug 2016 14:49:42 +0000

比べるべきでは無いと言われてしまうのですが素のJSをBabelでトランスパイルするのとreactは、ｊｓ基礎をやっている人にはどちらの方が簡単に理解出来、Webアプリが作れるでしょうか。
Htmlは解るので、タグを使うReactは非常に分かり易いのでしょうかね？

reactはjQueryのように、よく使うメソッドがまとめられていて、
バニラjsだと大量に記載をしないといけないのが、iQueryのようにほんのわずかなメソッドを記載しただけで実現できるメリットはあると考えてよいでしょうか？

jQueryはそれでバニラjsより圧倒的に簡単になっていると思います。
reactも同じでしょうか？

バニラjsですと、仮にbabelをつかってフューチャーシンタックスで記載しても、
jQueryやreactよりも大量のメソッドの記述が相変わらず必要で大変なことに変わりはないのでしょうか？
それともフューチャーシンタックスでは、ライブラリのように、よく使うメソッドがまとめられていて、大量に記載しないといけない問題が解決されているのでしょうか？

人によって答えが違ってくる質問なので、たくさんの方の意見が聞きたく質問しています。

カレンダーとプルダウンを連動させるjavascriptの設定の仕方がわかりません。

Thu, 10 Mar 2016 11:37:23 +0000

webデザインを初めて1年目の素人です。
お答え頂ければ幸いです。

現在、プルダウンと連動したカレンダー機能を作成しているのですが、うまくいきません。

希望の表示としては、
・カレンダーアイコンをクリックするとカレンダーが表示される。
・カレンダーの日付をクリックするとプルダウンも連動して変わる。

カレンダーアイコンをクリックしてカレンダーが表示する部分はうまくいきました。

最初、プルダウンを年と月と日を分けて作成していて、その時は連動して表示ができたのですが、
年と月を合体させた表示で連動させようとすると、年月のプルダウンは変化せず、
日の部分に月の数字が入ってしまうといった表示になります。

参考にしたサイトは
https://beanb.wordpress.com/2014/10/29/フォームとカレンダーを連動（プルダウン）/
http://www.tabikobo.com/
の2つを参考にしました。

カレンダー部分の記述を簡単に書いていくと、
【HTML】

月日

                        </div>
                    </dd>

【JS】
//以下は日程のプルダウンとカレンダー

function updateSelected(date){

console.log(date);
$('#year_month').val(date.substring(0, 4)+'-'+date.substring(5, 7));
$('#day').val(date.substring(8, 10));

}
$(function(){

var myD = new Date();
var myYear = myD.getFullYear();
var myMonth = myD.getMonth() + 1;
for (i = myMonth; i <= 12; i++) {
    var val = myYear + '-' + ('00' + i).slice(-2);
    var html = myYear + '年' + ('00' + i).slice(-2) + '月';
    $('#year_month').append($('<option />').val(val).html(html));
}
var myYear = myYear + 1;
for (i = 1; i <= myMonth; i++) {
    var val = myYear + '-' + ('00' + i).slice(-2);
    var html = myYear + '年' + ('00' + i).slice(-2) + '月';
    $('#year_month').append($('<option />').val(val).html(html));
}
//1〜31の数字を生成
for (var i = 1; i <= 31; i++) {
    if (i < 10) {
        i = '0' + i;
    }
    $('#day').append($('<option />').val(i).html(i));
}

//カレンダーからプルダウンを更新
$('.calender').each(function() {
    var id = '#' + $(this).attr('id');
    $(id + ' input').bind('change', function() {
        var i = 0;
        var dates = $(this).val().split('/');
        $(id + ' select').each(function() {
        var year = dates[0];
            $(this).val(dates[i]);
            i++;
        });
    });
});

//プルダウンからカレンダーを更新
$('.calender').each(function() {
    var id = '#' + $(this).attr('id');
    $(id + ' select').bind('change', function() {
        var i = 1;
        var dates = new Array(3);
        $(id + ' select').each(function() {
            dates[i] = $(this).val();
            i++;
        });
        var newdate = dates[0] + '/' + dates[1] + '/' + dates[2];
        $(id + ' input').val(newdate);
    });
});

//カレンダーの表示
var date = new Date();
var year = date.getFullYear();
$.datepicker.setDefaults({
    showOn: 'button',
    buttonText:'',
    //buttonImage: '../img/calender.jpg',
    //buttonImageOnly: false,
    closeText: '閉じる',
    prevText: '前',
    nextText: '次',
    currentText: '今日',
    monthNames: ['1月','2月','3月','4月','5月','6月',
                 '7月','8月','9月','10月','11月','12月'],
    monthNamesShort: ['1月','2月','3月','4月','5月','6月',
                      '7月','8月','9月','10月','11月','12月'],
    dayNames: ['日曜日','月曜日','火曜日','水曜日','木曜日','金曜日','土曜日'],
    dayNamesShort: ['日','月','火','水','木','金','土'],
    dayNamesMin: ['日','月','火','水','木','金','土'],
    weekHeader: '週',
    dateFormat: 'yy/mm/dd',
    firstDay: 0,
    isRTL: false,
    showMonthAfterYear: true,
    yearSuffix: '年',
    minDate: new Date(year, 1 - 1, 1),
    maxDate: new Date(year + 1, 12 - 1, 31)
});
$('.calender input').datepicker();

//$('#ui-datepicker-div').hide();

});

という形になっています。

JSの設定の問題かと思うのですが原因がわかりません。

どなたかご教授お願いいたします。

固定横並びリスト　横幅

Wed, 21 Oct 2015 04:53:24 +0000

横並びリスト上部固定でデザイン組んでいます。
なんとかposition: fixed;でリスト固定させるまでなりましたが、
以下のスクリプトにて、ご伝授頂いたノウハウでモニター拡大時は収まりましたが
モニターの縮小時には、リストが左端で固定されてしまいます。
親コンテンツのcssで中央寄せ（margin左右auto）など試しましたが、
JSで常時リアルタイムでscrollleftの値を取得しているらしく、F５（画面更新）では真ん中
になるのですが、ロールバー上下のたびに、やはり左に戻ってしまいます。
どうにか対処法ありませんでしょうか？

Web制作情報ブログさん
『CSSのfixedを適用していると横スクロール時に一部非表示になることがある』
http://iwb.jp/css-fixed-hidden/

$(window).on("scroll", function(){

$(".fixed").css("left", -$(window).scrollLeft());

});

window.setTimeoutのwindowってなんですか？

Thu, 02 Jul 2015 04:30:44 +0000

今JavaScriptの勉強をしているものなんですが、
サンプルにある通り以下のように書くと動作することはわかったんですが、なぜwindowが必要なのかわかりません。

window.setTimeout(function() {
    alert("Hello World!");
}, 500);

どういった仕組みでこの関数は動いているんでしょうか？

波括弧の意味

Sat, 13 Jun 2015 07:50:27 +0000

波括弧で代入しないと動作しないAPIがあるのですが、波括弧を付けることで、どのような意味があるのでしょうか？

var { ToggleButton } = require('sdk/ui/button/toggle');

javascriptのアニメーションについての質問です。

Fri, 10 Oct 2014 15:02:57 +0000

当方、javascript初心者です。

行いたい事は以下の通りです。
(1) blogの記事(本文内)においてページの表示と同時に動作するグラフ(1目盛づつ増えるアニメーション)の表示。

一定間隔で再表示。※各記事に１つずつ異なった値のグラフを表示。
(2) 上記のスクリプトの外部ファイル化と本文内に読み込む方法及び本文内でのグラフのパラメータの設定。

現状(検索して調べたサイトのサンプルを使用)

function CGraphValue(name, value) {
this.name = name;                       
this.value = value;                     
}

var graphValues = [];
graphValues.push(new CGraphValue("項目A", 5));
graphValues.push(new CGraphValue("項目B", 3));
graphValues.push(new CGraphValue("項目C", 4));
graphValues.push(new CGraphValue("項目D", 2));
graphValues.push(new CGraphValue("項目E", 1));

  function CGraphGenerateParam(pixel_per_value, graph_border_style, graph_border_width, graph_border_color, graph_background_color, 

graph_height) {
this.pixel_per_value = pixel_per_value;

this.graph_border_style = graph_border_style;

this.graph_border_width = graph_border_width;

this.graph_border_color = graph_border_color;

this.graph_background_color = graph_background_color;

this.graph_height = graph_height;

}

function CGraphAnimationParam(interval, add_value) {
this.interval = interval;                               
this.add_value = add_value;                             
}

function createAnimationGraph(id_graph, graphValues, valuesName, graphGenParam, graphAnimationParam) {

       var temp_graphValues = [];
for ( var i = 0; i < graphValues.length; i++ ) {
    temp_graphValues.push(new CGraphValue(graphValues[i].name, 0));
}

        function runAnimation() {
    createGraph(id_graph, temp_graphValues, valuesName, graphGenParam);

                var updateFlag = false;             
    for ( var i = 0; i < graphValues.length; i++ ) {
        if ( graphValues[i].value > temp_graphValues[i].value ) {
            temp_graphValues[i].value += graphAnimationParam.add_value;
            if (temp_graphValues[i].value > graphValues[i].value) {             
                temp_graphValues[i].value = graphValues[i].value;
            }

            updateFlag = true;
        }
    }

                if ( updateFlag ) {
        setTimeout(runAnimation, graphAnimationParam.interval);
    }
}
runAnimation();
}

function createGraph(id_graph, graphValues, valuesName, graphGenParam) {

       var obj_graph = document.getElementById(id_graph);
var graph_html = "<table>";
graph_html += "<tr><td>" + valuesName.name + "</td><td>" + valuesName.value + "</td></tr>";

for (var i = 0; i < graphValues.length; i++) {

    var width = graphGenParam.pixel_per_value * graphValues[i].value;

    var graph_div = "";
    if (graphValues[i].value > 0) {
        graph_div = "<div style=\"border-style:" + graphGenParam.graph_border_style +
            ";border-width:" + graphGenParam.graph_border_width +
            ";border-color:" + graphGenParam.graph_border_color +
            ";background-color:" + graphGenParam.graph_background_color +
            ";width:" + width +
            "px;height:" + graphGenParam.graph_height + ";\"></div>";
    }

    graph_html += "<tr><td>" + graphValues[i].name + "</td><td><table><tr><td>" + graph_div + "</td><td>" + graphValues[i].value + 

"";
}

graph_html += "</table>";
obj_graph.innerHTML = graph_html;
}

function startAnimation() {

        var max_value = 0;
for (var i = 0; i < graphValues.length; i++) {
    if (graphValues[i].value > max_value) {
        max_value = graphValues[i].value;
    }
}

        var max_width = 50;                           
var pixel_per_value = 50;

        createAnimationGraph(
    "graph-object", 
    graphValues, 
    new CGraphValue("Personal", "Result"),
    new CGraphGenerateParam(pixel_per_value, "solid", "0px", "#999999", "#fce525", "20px"), 
    new CGraphAnimationParam(1000/1, 1)    
);

setTimeout("startAnimation()",20000);
}

・外部ファイル化していないため、各記事の本文内にjavascriptを記入。
・グラフの表示はできるが1つの記事のみ。(最後の記事のみ)

できるだけ簡単な表現でお教え頂ければ幸いです。
宜しくお願い致します。

イメージはこんな感じです。
http://simpletestsblog.blogspot.jp/

※画像にあるスクリプトをそのまま記事の本文に書き込んだものです。
　test0及びtest1に全く同じ内容を書き込んであります。

【HTML5/Javascript】ドラッグ&ドロップ機能を用いての計算方法について

Fri, 29 Aug 2014 12:21:58 +0000

HTML5の「ドラック&ドロップ」機能を利用して、カロリー合計の出来るツールを作りたいと考えています。

内容は、好きな食べ物を選び、枠の中にドラック&ドロップすると
選んだものの合計カロリーが表示されるというものなのですが、
素材に数値をつけ、計算させる方法が分からないでいます。

もし、わかる方がいらっしゃいましたら、是非教えて頂きたく存じ上げます。

現段階は「ドラッグ&ドロップをしてイラストを好きな場所へ持っていくことが出来る」というところまで

<!DOCTYPE html>
・・・

＜div id="dragarea">
＜img src="ご飯.png"　calory='230' class="item"/>
＜img src="食パン.png" calory='100' class="item"/>
＜img src="みそ汁.png" calory='45' class="item"/>
＜img src="シャケ.png" calory='150' class="item"/>
＜img src="目玉焼き.png" calory='80' class="item"/>
＜img src="ヨーグルト.png" calory='40' class="item"/>
＜/div>
＜div id="droparea">
＜script>
window.addEventListener('load', function() {
var els = document.querySelectorAll('#dragarea .item');
for (var i=0; i<els.length; i++) {
els[i].id = 'item'+i;
els[i].addEventListener('dragstart', function(evt) {
evt.dataTransfer.setData('Text', evt.target.id);
}, true);
}
var droparea = docum
droparea.addEventListener('dragover', function(evt) {
evt.preventDefault();
}, true);
droparea.addEventListener('drop', function(evt) {
var id = evt.dataTransfer.getData('Text');
var target = document.getElementById(id);
target.style.left = evt.clientX-64+'px';
target.style.top = evt.clientY-64+'px';
droparea.appendChild(target);
evt.preventDefault();
}, true);
}, true);
＜/script>＜/body>＜/html>

因みにこのソースは、好きな場所（自動整列なし）に
ドラック&ドロップすることができますが
出来ればこの要素はそのままにしたいのです。
（不可能であれば仕方ないのですが…。）

どうぞよろしくお願い致します

初めての投稿

Sat, 07 Jun 2014 04:08:32 +0000

当サイトをご利用いただきありがとうございます。

基本的な使い方はこのサイトの使い方にて解説しています。

有益で使いやすいサイトを目指して改善していきたいと考えています。

「こうした機能がほしい」「カテゴリ分けはこうしたほうがいい」「○○について解説が欲しい」など、ご意見・ご感想等がある場合はログイン後に、こちらからプライベートメッセージを送信してください。