campus フォレストキャンパス

© 2019 System Forest inc.

sitemap サイトマップ

SkyVisualEditor「javascriptを使ってみたい!」

SkyVisualEditor「javascriptを使ってみたい!」

今回の技術ブログは前回に引き続き「SkyVisualEditor」について語ってみたいと思います。
どういうものかは前回のブログに紹介されてるので見てみてください。

このSkyVisualEditorを使ってみると簡単にデザインができて開発効率が上がり嬉しい限りです。
しかし使っているうちに、他にもいろんなことができないかと欲が出てきます。
ある程度はSkyVisualEditorでできるのですが、もっと自由に独自の機能を動かしたい!と思ったところ、どうやらjavascriptが使えそう!
ということで今回はSkyVisualEditorでjavascriptを使ってみた体験談を紹介します。

まずは素材を準備します。

  • チェックボックス(ID:c_check)
  • テキストボックス(ID:c_text)

チェックボックス

やりたいことは

  • チェックをつけたら結果に「チェックしました!」と表示する
  • チェックを外したら結果を空にする

javascriptで動かすためには以下の手順を踏む必要があります。

  1. javascriptで処理を記述する
  2. 項目のイベントを発生させ、javascriptで記述した処理を呼び出す

それではやってみましょう

■設定方法

1.javascriptで処理を記述する

SkyVisualEditorでjavascriptを書くには「ページスクリプト」から「ページスクリプト編集」をクリックします。

151201_02

今回は下記のスクリプトを記述します。


ちなみに「j_id0:sve_form1:c_check」「j_id0:sve_form1:c_text」はブラウザ上のIDです。
ブラウザで項目を右クリックして「要素を検証」で取得できます。(ブラウザにより異なる)
※今回はjavascriptの記述説明は省きます。

2.項目のイベントを発生させ、javascriptで記述した処理を呼び出す

チェックボックスにイベントを設定します。

それでは動かしてみましょう。
チェックボックスをクリックすると...

結果にメッセージが入りました!

今回は簡単な処理を用いましたが、javascriptを使えばいろんなことができそうです。
また何か発見がありましたら技術ブログで報告します!

Inquiry

こちらからお気軽にご相談ください。

Recruit

私たちは共に働く仲間を集めています。