テンプレートを作成する

チュートリアル1では、GeneCodeIDEの操作方法と、テンプレート制作の大まかな流れについて学習し、実際にテンプレートとなるHTML、CSS、PostJSを作成します。

IDEは、下記のような3画面に分かれており、それぞれ違った役割があります。

1. Origin view ：変換前のPCページが表示されます
2. Template / ServerSideJS editor ：テンプレートとなるHTMLを編集する場所です
3. Half conversion view ：テンプレート適用後のスマホサイトが表示されます。（現在はテンプレートを作成していないのでPCページが表示されます）

新規テンプレートファイルの作成

1. 画面右下にあるアイコンをクリックしキャプチャ、サーバー変換ステージに移動してください。
2. 新規ファイルボタンをクリックしキャプチャ、パターンファイルを選択します。キャプチャ
3. tutorial\pattern以下にあるdefault01.htmlを選択します。
4. 上書き保存をクリックします。キャプチャ名前を付けて保存のダイアログが出てくるので、tutorial\template以下にtutorial.htmlとして保存してください。
5. 右側のHalf conversion viewが真っ白になっていることを確認してください。左側のOrigin viewが変換前、右側のHalf conversion viewが変換後です。現在はテンプレート内にPC側のコンテンツを変換する記述がないため、Half conversion viewにはコンテンツが表示されません。

テンプレートの作成

パターンファイルの中身について

Template / ServerSideJS editorの編集タブを開きます。head表示ボタンをクリックします。キャプチャ
Viewportの設定や、パーツの動作に必要なJavaScriptファイルの読み込みなど、テンプレートを制作するうえで必要なタグは全てそろっています。
head表示ボタンをもう一度クリックし、headタグを非表示に戻してください。

パネルを使う

天気予報.comにある日本地図、全国の天気予報、各地の天気予報のコンテンツをパーツを使い変換してみましょう。

1. １．Template / ServerSideJS editor内でbody開始タグの下をクリックし、パーツを配置する位置を決めま 　　す。
2. 編集タブを開きキャプチャ、パネルパーツを選択します。キャプチャ

   パーツ（ベーシックパネル）のリファレンスはこちら

3. 以下のセレクタをOrigin view内のテキストエリアキャプチャに記述してください。
div.weather_chart
4. パーツ設定パネルの取得ボタンをクリックしてください。キャプチャ
5. パーツ設定パネルの確定ボタンをクリックしてください。キャプチャ
6. 上書き保存ボタンをクリックしてください。
7. Half conversion viewにパーツで取得した部分が出力されます。

CSSとJavaScriptを調整する

このステップではPostJS、CSSファイルの作成、保存までのフローを行います。

ブラウザ変換ステージ

1. 右下のアイコンをクリックし、ブラウザ変換ステージに移動します。

各ステージの説明はこちら



① Half conversion view：PostJS実行前のスマホサイトが表示されます。
② PostJS editor：PostJSを編集する場所です。
③End conversion view：PostJS実行後のスマホサイトが表示されます。

「全国の天気予報」の文言の位置異動、日本地図のアニメーションをPostJSに記述します。

2. 新規スクリプトボタンをクリックしてください。キャプチャ
3. 編集ボタンをクリックして下さいキャプチャ。テキストエリアが出現します。
4. 以下のコードを記述してくださいキャプチャ。

//全国の天気予報の見出しを日本地図の画像の前に追加します。 $('div.img_wrapper').prepend($('div.weather_news_head')); //全国の天気予報の文章を日本地図の画像の後ろに追加します。 $('div.img_wrapper').append($('div.weather_news_body')); //日本地図に動きを付けます。 $('div.img_wrapper img').css('display','none'); $('div.img_wrapper img').slideToggle();
5. 編集終了ボタンをクリックし、スクリプト保存ボタンをクリックします。キャプチャ
6. End conversion viewのリロードボタンキャプチャをクリックしてください。

デザインステージ

1. 右下のアイコンをクリックし、デザインステージに移動します。

各ステージの説明はこちら



① End conversion view：編集したCSSやJSが保存後に反映されます。
② CSS / JS editor：CSS,JSを編集する場所です。
③ CSS preview：編集したCSSやJSがリアルタイムに反映されます。

テキストに背景色、余白を付けます。

2. 新規ファイルボタンをクリックしキャプチャ、CSSファイルを選択してくださいキャプチャ。
   　　NEW_FILE_0001.cssという名前でリストに追加されます。
3. NEW_FILE_0001.cssの欄をクリックしてください。キャプチャテキストエリアが出現します。
4. 以下のスタイルを記述してください。キャプチャ
img.map { display: block; width: 320px; margin: 0 auto; } div.weather_news_head { margin: 10px; padding: 10px; text-align: center; border: 2px solid #d8d8d8; border-radius: 4px; background-color: #0af; color: #fff; font-weight: bold; } div.weather_news_body { margin: 0 10px; padding: 10px; border: 2px solid #d8d8d8; }
5. 保存ボタンをクリックしてください。キャプチャ新規保存のダイアログが出てくるので
   　　{IDEを展開したディレクトリ}\genecode\projects\tutorial\template\css以下にNEW_FILE_0001.cssとして保存してください。
6. Template / ServerSideJS editorに戻り、linkタグを付け足します。アイコンをクリックし、移動してく 　　ださい。キャプチャ
7. 編集タブを開きキャプチャ、head表示ボタンをクリックして下さい。キャプチャ
8. headタグ内に以下のコードを記述してください。キャプチャ
<link href="css/NEW_FILE_0001.css" type="text/css" rel ="stylesheet">
9. 上書き保存ボタンをクリックしてください。
10. CSS / JS editorに移動し、End conversion viewにスタイルが反映されていることを確認します。

プレビューで確認

1. URL設定ステージに移動し、プレビューボタンを押してください。キャプチャ
2. ダイアログが出ますので、OKを押してください。
3. プレビューがでたらキーボードでCtrl,Shift,Mを同時に押してください。
   スマートフォン用の画面サイズになります。

テンプレート制作の大まかな流れは以上です。
次のチュートリアル2ではキャッシュ機能について説明します。