SYMMETRIC Web開発ブログ
レスポンシブWebデザイン、CSSフレームワークなど、Webフロントエンド開発に関するBLOGです。
※SYMMETRIC公式BLOGと統合し、ブログ名称を変更しました
  • ブログ
  • コラム
  • エンジニア歴1年未満でもサイト変換ができる！？その参

エンジニア歴1年未満でもサイト変換ができる！？その参

前回のブログでは、ゼロからプロモーションサイトを作り上げた話をしました。
今回はサイト変換をした話をして、シリーズを終えたいと思います。

blog3-6

目次

ジーンコードIDEを使ってサイト変換をやってみることに

HTML,CSS,JavaScriptに慣れてきた私は、先輩から以下のように言われました。

実際の案件をジーンコードIDEを使って実際にやってみて

というわけでOJTという形で実際に仕事をやってみることになりました。

ジーンコードIDEのチュートリアルも分からなかった自分が、もう実際の案件をやるなんて不安でした。

まず簡単なページを触らせてもらいました。

簡単なページとはジーンコードIDEのなかにあるパーツを使っただけで変換できてしまうページです。

逆に難しいページは、パーツだけでは対応できず、GCスクリプトというサーバーサイドで動くJavaScriptを書かないとうまく変換できないページです。

簡単なページを変換するには

blog3-6

まずテンプレートファイルというHTMLファイルを用意します。（画像の4）
このテンプレートファイルに作りたいスマホサイトのコードを書いていきます。
PCサイトをクリックすると、クリックする場所によってセレクタバーの中身が変わります。（画像の3）
チュートリアルをやった時はこの現象がよくわかりませんでしたが、今は理解できています。
以下でも説明しますが、PCサイトの中の要素をクリックすると、セレクタバーにクリックした要素のHTML構造がでているのです。

例えば完了ページを変換するとします。

完了ページは大抵、タイトル、完了しましたと知らせる文言、戻るボタンで構成されています。
要素が少なくHTML構造も複雑ではないため、PCサイトのタグ構造をそのままスマホサイトに持ってきても、細かいデザインの調整はCSSだけで出来るので問題ありません。

上記のようなページだと、そのままベーシックパネルパーツという機能を使って要素を取得していけば、スマホサイトが出来上がってしまいます。
欲しい要素をクリックして選んだだけで出来てしまいます。非常に楽です。

blog3-2

まずスマホサイトにそのまま使いたいと思った文言をクリックします。
するとセレクタバーにdiv>spanと出てきます。
チュートリアルをやっていたころは、意味が分からなかったですが、今になるとこの文言はPCサイトの<div>タグの子要素、<span>タグに書かれていると分かるようになっていました。

blog3-5

div>spanとなっている部分をベーシックパネルパーツで取得したら、そのままのタグ構造でスマホサイトにも出力されます。

あとはデザイン通りにCSSを書いていけば完成します。

ジーンコードIDEって便利で簡単だったんだと調子に乗りました。

しかし簡単なページが出来たら次は難しいページです。
調子にのったことを後悔します。

難しいページを変換するには

難しいページとは上記にも書きましたが、パーツだけでは対応できず、スクリプトを書かないとうまく変換できないページです。

例えば料金明細のような複雑な表がPCサイトにあります。

blog3-3

これをこのままスマホサイトに出力すると、横幅があるので見えにくくなってしまいます。
せいぜい多くても横が3カラムの表に組み替えないと、スマホサイトでは意味を成しません。

どうやって作ろうかと考えた時に、直接HTMLで書けばいいのかなと思っていましたが、先輩に以下のように言われました。
スクリプトを使って書いていって

なぜわざわざ難しいスクリプトを使って書かなければいけないのかと嫌になりました。
そしてなによりスクリプトでどう作ったら良いか、見当が付きませんでした。

先輩に助けを求めると、手順が分かりました。

デザインに合ったタグ構造をHTMLでまず書きます。そしてタグの中身をjQueryで取得して作っていくそうです。
PCサイトの中身をjQueryで取ってくることによって、動的にデータが変わる明細表をスマホ変換できるのです。

ここでようやくHTMLで直接書くのではなくスクリプトを使って書く理由が分かりました。
スクリプトで書くほうが難しいし面倒だと思っていたことが恥ずかしかったです。

スクリプトを使う理由が分かったものの、スクリプトでどのように中身を取得すればいいのか分かりませんでした。

先輩に使う関数を教えてもらい、前回と同じように、関数の意味と使い方を調べ書いていきました。
また新たに、属性を取得したり付加できる関数などを覚えました。
たくさん書いていくうちに、変数に入れて書く書き方に慣れたりと少しjQueryに抵抗がなくなりました。

下記のように表の枠組みはHTMLで直接書き、中身をjQueryで取得して入れていきます。

<table class="gc_utiwake_div">
  <tbody>
    <tr>　//ここまではHTMLでそのまま書きタグの中にjQueryで要素を入れる		
      <gc-script>
	$target = $('div.gc_utiwake_div').find("th.nomalborder:eq(0)");
	$target.attr("rowspan","5");//rowspanとcolspanを変えることで表の形を変えています
	$target.removeAttr("colspan");
	gcutil.toHtml($target);
		
	$target = $('div.gc_utiwake_div').find("th.nomalborder.w3");
	$target.attr("colspan","2");
	gcutil.toHtml($target);
      </gc-script>
			
    </tr>
「以下略」

こうして先輩に教えてもらいながらも、初めて実際の案件をサイト変換で作ることができました。

blog3-4

文系でもサイト変換はできる

これらの出来事は入社して3, 4ヶ月の話です。
初めのころはジーンコードの良さ、サイト変換の良さがよく分かりませんでした。
ジーンコードは簡単だと言われたもののチュートリアルが難しく感じたり、サイトを作る際は全て自分でコーディングしていくほうが簡単だと思っていたり･･･

しかし実際に自分で様々なウェブサイトを作ってみて実感しました。
ある程度の基本ができたらジーンコードを扱うのは、簡単だし便利だなと素直に思いました。
クリックひとつでスマホサイトが出来てしまうし、複雑で動的なPCサイトも自分でシステムをゼロから作らなくてもスマホサイトに変換できてしまいます。

そのためには、HTML,CSS,JavaScriptの知識は必要ですが、文系の私でも少しずつ分かるようになっているので決してハードルは高くないと思います。
よく分からない言語と格闘した末、自分で書いたコードが思い通りに動くととても嬉しいです。

とはいいつつもまだまだ知らないことはあるので、スキルを高めつつ、ジーンコードの良さ、サイト変換の良さをさらに見つけていきたいと思います。

完

シンメトリックのブログ

Page Top