パーツを使う

チュートリアル３では、テンプレート制作に必須であるパーツの使用方法について学習します。
GeneCodeIDEでは、指定したPCコンテンツを特定のHTML構造に変換して出力するツール（パーツ）をご用意しています。
また、Step４では、GeneCodeIDE独自の言語であるgc-scriptについても学習していきます。

パーツの使い方

共通オプション

  1. URL設定ステージで、URL listから/manuals/gcide/demo/weather_top.htmlを選んで下さい。
  2. サーバー変換ステージへ移動し、チュートリアル1で配置したパネルパーツ（エディタ上の背景緑色の部分）をダブルクリックしてください。
  3. 画像のURL置換を指定するチェックボックスにチェックを入れてください。キャプチャ
    以下のソースを記述してください。キャプチャ

    4. ※「置換前URL : 置換後URL」のように、「:」の前後に半角スペースを入れるのを忘れないようにしてください。

  4. 確定ボタンをクリックしキャプチャ、パーツ設定パネルを終了します。
    上書き保存ボタンをクリックし、画像が置換されていることを確認します。

リストパーツ

  1. Template / ServerSideJS editor画面で、パネルパーツの下にカーソルを合わせてください。
  2. テキストリストパーツを選択します。キャプチャ
  3. 以下のセレクタをOrigin view上部にあるテキストエリアに記述してください。キャプチャ
  4. 取得ボタンをクリックしますキャプチャ
  5. プリプロセスを指定するにチェックを入れキャプチャ、リスト以外の要素を変換するをチェックしてください。キャプチャ
  6. 確定ボタンをクリックしキャプチャ、パーツ設定パネルを終了します。
  7. 上書き保存ボタンをクリックし、パーツの出力を確認します。
  8. Origin viewのソース表示をクリックしてくださいキャプチャ。現在セレクタで表示されている部分のHTMLソースが表示されます。
    Half conversion viewのテキストエリアに以下のセレクタを記述してください。キャプチャ

    9. リストパーツで出力された部分が赤枠で囲われます。

  9. Half conversion viewのソース表示ボタンをクリックしてください。キャプチャ

PCサイトのHTML構造がパーツによって変換されて出力されていることがわかります。
このように、パーツによってPCサイトのHTMLをスマホサイト向けに最適化していく作業がテンプレート作成の基本となります。

カルーセルパーツ

  1. リストパーツの下にカーソルを合わせてください。
  2. パーツのカテゴリ → jQuery → FTカルーセルパーツの順に選択します。キャプチャ
  3. Origin viewでページ中段にあるGeneCodeバナー画像をクリックしてください。キャプチャ
  4. 親要素を選択ボタンを二回クリックします。キャプチャ
  5. Origin view上部のセレクタが となっていることを確認し、取得ボタンを押してください。キャプチャ
  6. クリックしてくださいと書かれているテキストエリアをクリックしてください。キャプチャ
    Origin view内に点線青枠が表示されます。
  7. GeneCodeのバナーをクリックしてください。キャプチャ
  8. ラベルパス内の取得ボタンをクリックしてください。キャプチャ
  9. ラベルパス内の＋ボタンをクリックするとラベルパスの入力欄が追加されます。キャプチャ
    roundabout,footprintなど、他のバナーの画像パスも６．～９．までの手順と同様に取得してください。
  10. 確定ボタンをクリックしてパーツ設定パネルを終了し、上書き保存してパーツの出力を確認します。

リストパーツ、カルーセルパーツ以外のパーツリファレンスはこちらにあります。
開発時の参考にしてください。

パーツの操作

パーツの移動

各パーツの位置を移動させることができます。

  1. リストパーツの下にパネルパーツを配置してください。セレクタは任意のものでかまいません。
  2. 上書き保存します。
  3. パーツをクリックしますキャプチャ
  4. 編集タブ内のパーツの操作セレクトボックスから「上に移動」を選択します。キャプチャ
  5. 実行ボタンをクリックしキャプチャ、エディター内のパーツの位置が変わったのを確認します。
  6. 上書き保存し、Half conversion viewの出力結果が変わったのを確認してください。

パーツの削除

同様の手順でパーツを削除することもできます。

  1. 先ほど移動させたパーツをクリックしキャプチャ、パーツの操作セレクトボックスから削除を選択します。キャプチャ
  2. 実行をクリックし、テンプレートエディター上からパーツが削除されたことを確認します。
  3. 上書き保存し、Half conversion viewの出力結果が変わったのを確認してください。

フォームパーツの使い方

  1. 先ほど配置したリストパーツの上部にカーソルを合わせてください。
  2. パーツのカテゴリ → Form キャプチャ→ テーブルフォームキャプチャの順にクリックします。
  3. セレクタを以下のように取得してください。キャプチャ
  4. パーツオプションを指定するにチェックを入れ、画像ボタンのテキスト化を変更するにします。キャプチャ
  5. 確定し、上書き保存してパーツの出力を確認します。

GCスクリプトの使い方

GeneCode独自の言語として、GCスクリプトがあります。詳細はJavaScript APIリファレンスを参照してください。
ここでは簡単なGCスクリプトの書式を説明します。

DOMの調整

Template / ServerSideJS editor内のパネルパーツの上部分に、

を記述しキャプチャ、上書き保存してHalf conversion viewに変更を反映してください。
スクリプトによるDOM整形後にパーツが動作していることがわかります。
このように、基本的にGCスクリプトはパーツの実行前に記述し、パーツでの出力を補助する意図で記述します。

DOMの出力

GCスクリプトでDOMをHTMLとして出力することも可能です。

テンプレートエディタ内のリストパーツの上部分に

を記述しキャプチャ、上書き保存してHalf conversion viewに変更を反映してください。
パーツで取得していない見出し部分が出力されていることがわかります。
このように、GCスクリプトによってパーツで取得しきれない部分を補うこともできます。

終了する
TOPへ

© 2015- Symmetric Co.,Ltd. All Rights Reserved.