前回のブログでは、ゼロからプロモーションサイトを作り上げた話をしました。今回はサイト変換をした話をして、シリーズを終えたいと思います。文系でもサイト変換はできるジーンコードIDEを使ってサイト変換をやってみることにHTML,CSS,JavaScriptに慣れてきた私は、先輩から以下のように言われました。実際の案件をジーンコードIDEを使って実際にやってみてというわけでOJTという形で実際に仕事をやってみることになりました。ジーンコードIDEのチュートリアルも分からなかった自分が、もう実際の案件をやるなんて不安でした。簡単なページを触らせてもらいました。簡単なページとはジーンコードIDEのなかにあるパーツを使っただけで変換できてしまうページです。逆に難しいページは、パーツだけでは対応できず、GCスクリプトというサーバーサイドで動くJavaScriptを書かないとうまく変換できないページです。簡単なページを変換するにはまずテンプレートファイルというHTMLファイルを用意します。(画像の4)このテンプレートファイルに作りたいスマホサイトのコードを書いていきます。PCサイトをクリックすると、クリックする場所によってセレクタバーの中身が変わります。(画像の3)チュートリアルをやった時はこの現象がよくわかりませんでしたが、今は理解できています。以下でも説明しますが、PCサイトの中の要素をクリックすると、セレクタバーにクリックした要素のHTML構造がでているのです。完了ページを変換するとします。完了ページは大抵、タイトル、完了しましたと知らせる文言、戻るボタンで構成されています。要素が少なくHTML構造も複雑ではないため、PCサイトのタグ構造をそのままスマホサイトに持ってきても、細かいデザインの調整はCSSだけで出来るので問題ありません。上記のようなページだと、そのままベーシックパネルパーツという機能を使って要素を取得していけば、スマホサイトが出来上がってしまいます。欲しい要素をクリックして選んだだけで出来てしまいます。スマホサイトにそのまま使いたいと思った文言をクリックします。するとセレクタバーにdiv>spanと出てきます。チュートリアルをやっていたころは、意味が分からなかったですが、今になるとこの文言はPCサイトの<div>タグの子要素、<span>タグに書かれていると分かるようになっていました。div>spanとなっている部分をベーシックパネルパーツで取得したら、そのままのタグ構造でスマホサイトにも出力されます。あとはデザイン通りにCSSを書いていけば完成します。ジーンコードIDEって便利で簡単だったんだと調子に乗りました。簡単なページが出来たら次は難しいページです。調子にのったことを後悔します。難しいページを変換するには難しいページとは上記にも書きましたが、パーツだけでは対応できず、スクリプトを書かないとうまく変換できないページです。料金明細のような複雑な表がPCサイトにあります。これをこのままスマホサイトに出力すると、横幅があるので見えにくくなってしまいます。多くても横が3カラムの表に組み替えないと、スマホサイトでは意味を成しません。やって作ろうかと考えた時に、直接HTMLで書けばいいのかなと思っていましたが、先輩に以下のように言われました。スクリプトを使って書いていってなぜわざわざ難しいスクリプトを使って書かなければいけないのかと嫌になりました。なによりスクリプトでどう作ったら良いか、見当が付きませんでした。先輩に助けを求めると、手順が分かりました。デザインに合ったタグ構造をHTMLでまず書きます。タグの中身をjQueryで取得して作っていくそうです。PCサイトの中身をjQueryで取ってくることによって、動的にデータが変わる明細表をスマホ変換できるのです。ここでようやくHTMLで直接書くのではなくスクリプトを使って書く理由が分かりました。スクリプトで書くほうが難しいし面倒だと思っていたことが恥ずかしかったです。スクリプトを使う理由が分かったものの、スクリプトでどのように中身を取得すればいいのか分かりませんでした。先輩に使う関数を教えてもらい、前回と同じように、関数の意味と使い方を調べ書いていきました。新たに、属性を取得したり付加できる関数などを覚えました。書いていくうちに、変数に入れて書く書き方に慣れたりと少しjQueryに抵抗がなくなりました。下記のように表の枠組みはHTMLで直接書き、中身をjQueryで取得して入れていきます。</tr>「以下略」こうして先輩に教えてもらいながらも、初めて実際の案件をサイト変換で作ることができました。初めのころはジーンコードの良さ、サイト変換の良さがよく分かりませんでした。ジーンコードは簡単だと言われたもののチュートリアルが難しく感じたり、サイトを作る際は全て自分でコーディングしていくほうが簡単だと思っていたり・・・しかし実際に自分で様々なウェブサイトを作ってみて実感しました。ある程度の基本ができたらジーンコードを扱うのは、簡単だし便利だなと素直に思いました。クリックひとつでスマホサイトが出来てしまうし、複雑で動的なPCサイトも自分でシステムをゼロから作らなくてもスマホサイトに変換できてしまいます。そのためには、HTML,CSS,JavaScriptの知識は必要ですが、文系の私でも少しずつ分かるようになっているので決してハードルは高くないと思います。分からない言語と格闘した末、自分で書いたコードが思い通りに動くととても嬉しいです。いいつつもまだまだ知らないことはあるので、スキルを高めつつ、ジーンコードの良さ、サイト変換の良さをさらに見つけていきたいと思います。コメントをキャンセルメールアドレスが公開されることはありません。date*日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)検索:最近の投稿レスポンシブデザインのレイアウトパターンと実装方法レスポンシブ対応するためのCSSの書き方レスポンシブサイト用ブレイクポイント考察!時代に適するサイズとは?レスポンシブデザインがSEOに有利な理由レスポンシブデザインの確認が簡単に出来るChromeのデベロッパーツールの使い方レスポンシブ対応ページの簡単な作り方!導入部分を解説します。modernthemes.net。