このブログを検索

2012年8月19日日曜日

Googleサイトにページ追加時に改行

■Googleサイトにページ追加時に改行する

   今日は、フォームの回答内容をサイトに反映する際、うまく改行できないとういう
   問題を解決しようと思います。


   現状のスクリプトでは、次のように改行されずにズラズラズラーっと表示されてしまいます。





  
   この問題をブレイクダウンすると、次の二つの課題をクリアしなければいけません。

      (1)フォームの質問項目毎に区切りとして改行させる
           例)質問1「本文」、質問2「ジャンル」、質問3「年代」とあった時に、
             それぞれ以下のように表示されるようにする。

                  「本文」の内容    (改行)
                  「年代」の内容    (改行)
                  「ジャンル」の内容  (改行)
      
      (2)一つの質問項目内にある改行を認識する
           例)質問1「本文」の中に含まれた改行を表示されるようにする。



■参照元とスクリプト

  ☆課題(1)について☆

    (1)の質問項目毎に区切りとして改行させる、という課題は、実に簡単に解決しました。
  
    今まで、下記のように<\n>で改行するようにスクリプトを記述していたのですが、


    これを、<\n>→<br>に替えるだけで解決しました!



    Google Apps ScriptはJava Scriptがベースなようなので、Gmailに自動送信する際等も
    <\n>で改行させるというのを使用していましたが、GoogleサイトではHTMLになるため、
    <br>が正解だったようです。

   
 ☆課題(2)について☆  

    続いて、(2)一つの質問項目内にある改行を認識する、という課題です。

    今回参考にさせて頂いたのは、下記の3つ。

       【bmoo.net 逆引きGoogle Apps Script】
        http://www.bmoo.net/archives/2012/03/312990.html
   
          →いつもいつもお世話になっている、お馴染みのサイトです。
           空白を除去する方法が載っていました。   

       【muzin】
        http://www.muzin.org/wp/javascript/javascriptreplace070605_29/

          →Java Scriptに関する紹介をしているサイトです。
           改行をbr,pタグに変換するツールおよびスクリプトが載っていました。

       【syboos.jp】
        http://www.syboos.jp/webjs/doc/string-replace-and-replaceall.html

          →Java Scriptに関する紹介をしているサイトです。
           文字列を置き換えする方法が載っていました。


   これらのサイトから得た情報を基に、難しそうなところを削ぎ落とし削ぎ落として
   行き着いたのが、下記の方法です。

   
   まず、今までのスクリプトに下記のスクリプトを追記します。


     ☆簡単コード解説☆
       2行目  : フォームの台帳の内、データが入力されている最終行数を取得する
              (結果的に、最新のフォーム回答内容が記載された行数になる)

       3行目  : 変数currentValueに2行目で取得した行のC列の値を格納する
              (私の場合、C列に「本文」つまり、改行が含まれる分があるため)

       4行目  : 3行目で格納したC列の値の内、「”\n”=改行」を”<br/>”に置換する
                ※”/g”と書くことで、該当する全ての”\n”を置換してくれる
                  これを書かないと、一番初めの”\n”しか置換されない

       5行目  : 置換した値を元のセルに書き換える


   次に、下記のスクリプトを書きかえる必要がありました。


    書き換えた後のスクリプトはこちら。


   このように書き換える必要があるのは、”e.namedValues”という関数が、フォームの台帳
   の値を取得するのではなく、そもそものフォームの回答内容を取得しているからみたいです。

   いくらフォームの台帳の値を変更したとしても、e.namedValuesを使っていたら全く意味ない
   みたい・・・。


■動作テスト

   さて、スクリプトを書きかえたところで、動作テストです。

   まずは、フォームの台帳をチェックしてみます。



   そして、Googleサイトのページはというと、こんな感じに改行されていました~♪



■スクリプト全体像

   最後に、今日の修正を加えた段階のスクリプトの全体像はこんな感じになっています☆



■気になるところ

   一応思った通りの結果は得られたので、現時点ではあまり深入りしないことにしますが、
   (というか、めんどくさくなっただけですが・・・)
   気になるところがないかと言えば、幾つかあります。

     ・<br>と<br/>の違いってなに?

     ・参考にしたサイトでは、</r>だの<p>だの色々と複雑なことをやっているけど、 
      それって必要かしら?

     ・フォームの回答内容を取得するスクリプトで、”e.namedValues”を使用している箇所と
      ”getValue”を使用している箇所が混在していて気持ち悪い。。。
      全部”getValue”にしてもいいのかしら?

     ・以前と比べて、フォーム送信→Googleサイトにページが反映されるまでの時間が
      長くなった気がする。色々スクリプトを一緒くたに書きすぎて、重くなったかしら?

   などなど。

   気が向いた時に、ちょっと調べてみようと思います。((φ(..。)メモメモ
     (あわよくばどこぞの親切な方がいらっしゃれば、この素人娘に教えて頂けないかと思っています。
      なかなかそんな奇特な方は現れないですかね。。。)


今日はここまで。


■予告編

   次回は、フォームの回答内容をGoogleサイトに表示する際、もう少し見た目をよく
   しようと思います。