QA@IT

javascriptに関する質問です。

5174 PV
当方、javascript初心者です。

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

一定間隔で再表示。※各記事に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 + 

"</td></tr></table></td></tr>";
    }

    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に全く同じ内容を書き込んであります。

  • (0) 使用するブラウザは何か、(1) 参考にしたコードが記載されているサイトの URL、(2) そのコードそのままでは目的と合わない、(3) であれば、何処が合わなくて、どう変更したいのか、(4) アップされたコードは期待通り動かないのか、(5) であれば、期待とはどのように違うのか・・・ぐらいは書きませんか? -
  • 技術系の掲示板での質問の書き方は以下のページが参考になると思います。一度、目を通されることをお勧めします。
    http://www.hyuki.com/writing/techask.html
    -
  • 何度か質問文を書き換えているようですが、私のコメントは見ていただけたでしょうか? それとも無視ですか? 無視なら私もこれ以上は関わらないようにしますが・・・ -
  • SurferOnWww様
    回答が遅くなり申し訳ありません。
    こちらのサイトを利用するのが初めてで、利用法を理解できておらず、回答して頂いている事に気づくのが遅れました。

    (0)当方が主に使用するブラウザはfirefoxですが、IEにも対応させたいです。
    -
  • (1)参考にしたサイトはこちらです。
    http://upa-pc.blogspot.jp/2014/05/bar-graph-horizon-anime-add-fixed.html
    -
  • (2)~(5)上記のスクリプトを使用してブログの各記事に一つずつ異なった値のグラフを表示したかったのですが、最後の記事にしか表示されないというのが現状です。 -
  • 恐らく各記事のグラフに対する名前というか識別する定義付けができていない為、最後の一つしかグラフが表示できていないのではないかと考えました。 -
  • 可能であれば、複数の記事にそれぞれ一つずつの事なった値のグラフを表示し、かつ、スクリプトは外部ファイルとし、記事上ではスクリプトに対するパラメーター(グラフの値)の指示のみの記載としたいです。 -

回答

自分なりに整理しましたが、以下のようなことで良いのですね?

(1) 「Google Blogger」のサービスを利用して自分のブログのサイトを開設し、インターネット上で公開したい。

(2) ブログには 1 ページに複数の記事が記載される。

(3) 各記事に、以下のページの JavaScript のコードを参考にして、グラフを表示したい。

http://upa-pc.blogspot.jp/2014/05/bar-graph-horizon-anime-add-fixed.html

(4) 現在の自分のブログの状況は以下の通り。なお、最初の質問やコメントにある「最後の記事にしか表示されない」という問題はクリアできている。

http://simpletestsblog.blogspot.jp/

(5) 現状、各グラフ毎にスクリプトをインラインで埋め込んでいるが、これを共通の一つのスクリプトとし、さらに外部ファイルとしたい。

(6) パラメーター(グラフの値)は各記事ごとに異なり、それをグラフを表示する際に動的に渡すようにしたい。

(7) パラメータの値は変化するので、定期的に新しいパラメータの値を取得して、グラフの表示をリフレッシュしたい。

上記 (5) ~ (7) がやりたいことですね? そういうことですと「Google Blogger」をどの程度ブログのユーザーがカスタマイズできるかが分からないと具体的な答えは出せないです。

自分は「Google Blogger」の仕様などはまったく知らないので(質問者さんが作ったページからインラインのスクリプトぐらいは埋め込むことができるらしいことを知った程度)、具体的な答えは出せませんが、一般的な話として上記 (5) ~ (7) に回答します。

(5) 一つのスクリプトとして共通化できるかどうかは何をパラメータとして渡すかによりますが、サンプルのコードをざっと見た限り、id_graph, graphValues ぐらいで良ければ可能だと思います。それを外部ファイルにするのはもちろん可能です。ブログにはスクリプトを埋め込めるようなので、その外部ファイルへの参照も可能と思います。(とは言え、記事内に埋め込むことしかできないようですとあまり意味はないと思いますが)

ただ、問題はその外部ファイルの置き場所では? 「Google Blogger」のサービスとして外部ファイルの置き場所が提供されていない限り、自分でその場所を確保することになります。

(6) パラメータ値をグラフ描画スクリプトにどう渡すかですが、例えば隠しフィールドを設けて、記事がレンダリングされる時にそこにパラメータ値を設定するというようなことができれば、スクリプトがそれを取得してグラフを描画することはできると思います。

(7) パラメータの値の変化はサーバー側でないと分からないと思いますが、そうだとするとちょっと無理っぽいです。AJAX を利用して定期的にサーバーに問い合わせるというようなことが必要ですが、サーバー側が対応してないと何ともなりません。

そうではなくて、クライアント側だけでパラメータが変化したことおよびその値がわかるのであれば、変化した時に再度スクリプトを起動してグラフを再描画するとか、何とでもできると思いますが。

編集 履歴 (1)
  • SurferOnWww様
    ご回答ありがとうございました。
    以下まとめに対するコメントです。
    (1)~(3)仰るとおりです。
    -
  • (4)現在表示できているグラフは(3)のスクリプトではなくjQueryというものを利用したグラフとなります。(色々な方にご教示頂いたものを試験的に表示してみました)可能であれば(3)のスクリプトを使用したいと考えております。 -
  • そんなふうにコロコロ変えられたのでは誰もついていけないということが分からないのですか? -
  • すみませんが、自分はおります。他の回答者の方の回答に期待して下さい。 -
  • (5)~(7)も仰るとおりです。
    素人考えで恐縮ですが、毎回変化するグラフの値は
    var graphValues = [];
    graphValues.push(new CGraphValue("項目A", 5));
    ~以下項目B,C,D,Eも同様~
    の”5”(3,4,2,1)の部分かと思います。
    -
  • 本文にはgraphValuesの部分と必要箇所のみを記載し、それ以外を外部ファイルから読み込みたいです。
    外部ファイルを置く為の場所は確保してあります。
    -
  • (6)はJavaScript外部ファイル化する事と同義とお考えください。
    (7)はsetTimeout("startAnimation()",20000);部分での再読み込みと同義とお考え下さい。
    -
  • 理解不足により何度も質問する形となり申し訳ありませんが、具体的な手順をご教示頂ければ幸いです。
    よろしくお願い致します。
    -
ウォッチ

この質問への回答やコメントをメールでお知らせします。