トップ > 制作・開発 > コーディング楽ちんテクニック ~Excel編~
制作・開発

コーディング楽ちんテクニック ~Excel編~

コーディング楽ちんテクニック ~Excel編~

こんにちは、マークアップのmikaです。

あけましておめでとうございます。
2015年最初の記事は、コーディングをちょっと楽にするExcelの使い方をお話したいと思います。
コーディングでExcel??って思う方もいるかと思いますが、結構便利なんですよ٩(๑❛ᴗ❛๑)۶

どんな時にExcel?

何かの表を掲載するときや、リンク集やFAQなど、リストをたくさん掲載するときなど、原稿がExcelだったりしますよね?
例えば、こんな原稿がきたとしたらチャンス!!

2014-12_mika_01

原稿がExcelだからっていうのもあるけれど、「オートフィル」っていう機能と「文字列をつなげる式」を使ってコーディングの時間を短縮できちゃうんです。

では、上の原稿をdlを使って以下のようなHTMLにしてみましょう。

<dl>
<dt class="item1">1.楽しみを探し求めて</dt>
<dd>Qriousは好奇心や遊び心を大切にし、新しい技術やサービスを積極的に取り入れ、見る人に楽しんでもらえるコンテンツ提供を目指しています。</dd>
<dt class="item2">2.品質を重視したデザイン</dt>
<dd>Qriousは企画・構成からデザイン、コーディング、プログラミング、翻訳など、完全分業化を推奨しており、各分野のスペシャリストが制作することにより、高い品質維持に努めています。</dd>
(…以下省略…)
</dl>

Excelのオートフィル機能

「オートフィル」とは、マウスでドラッグするだけで、セルの内容をコピーしたり、連続したデータを入力したりできる機能のこと。1,2,3,4,…や、月,火,水,木…のようなデータがドラッグで入力できるんです。名前は知らなくても、実は使ってた!なんて人も多いかも。

ではまず、Excel原稿にはないタイトル番号を、オートフィルを使ってちゃちゃっと付けちゃいましょう~

▼Excelでタイトル番号を付ける

1.A列の前に列を挿入して、番号を入れる列を作ります。
2.A2のセルに「1」を入力します。
3.A2のセルを選択した状態で、A2セルの右下にマウスを
 合わせます。マウスカーソルが黒十字になっていればOK。
2014-12_mika_02
4.黒十字のマウスカーソルのまま、Ctrlキーを押しながら、
 A7セルまでドラッグします。

ほら、一気に6まで入力できましたね。

Excelの文字列をつなぐ式

次に「文字列をつなぐ式」を使ってマークアップしましょう。タイトルはdtタグを使用し、item1~item6のクラスをつけていきます。それぞれにアイコンを付けるイメージですね。説明文はddです。

どうするかというと、セルに入力されている値と、HTMLタグなどのセルに入力されていない文字列を式を使ってつなげていくのです。
つなげる時の基本ルールは次の5つ。

▼Excelで文字列をつなげる基本ルール5

1.数式バーにまず「=」を入力する
2.セルにある値を使うときは、セルの番号(A1とか…)を
 入れる
3.セルにない文字列を入れるときは、「"」で文字列を囲む
4.「"」を文字列として入力したいときは、ダブルクォーテーションを2つ「""」にする
5.文字列をつなぐときは「&」を使う

では、このルールに当てはめていきましょう。
簡単な説明文(dd)の方から見ていきます。

▼dd文をつくる

1.空いているE2のセルにタグを書き出したいので、
 E2をクリックして「=」を入力

=

2.セルにない文字列「<dd>」を入力

="<dd>"

3.文字列をつなぐ「&」を入力

="<dd>" &

4.C2セルの値を使いたいので、C2セルをクリックしてから
 Enterキーを押す

="<dd>" & C2

5.文字列をつなぐ「&」を入力

="<dd>" & C2 &

6.セルにない文字列「</dd>」を入力

="<dd>" & C2 & "</dd>"

これで、シート上でE2セルを見ると、「<dd>Qriousは好奇心や遊び心を大切にし、新しい技術やサービスを積極的に取り入れ、見る人に楽しんでもらえるコンテンツ提供を目指しています。</dd>」となりました!
さて、じゃぁ同じようにタイトル(dt)も書いていきましょう~

▼dt文をつくる

1.空いているD2のセルにタグを書き出したいので…

=

2.「<dt class=”item1″>」を入力しますが、「1」はA2の値を使うので…

="<dt class=""item" & A2 & """>"

3.「1.楽しみを探し求めて」をつくりたいので…

="<dt class=""item” & A2 & """>" & A2 & "." & B2

4.タグを閉じ…

="<dt class=""item” & A2 & """>" & A2 & "." & B2 & "</dt>"

ここはちょっとややこしいですが、5つのルールに当てはめていけばOK!
ここまでくれば、もうできたも同然。
D2とE2を選択してオートフィルで全部に適応しましょう!ほら、あっという間。

HTMLに組み込もう

それでは、エディタでHTMLに組み込みましょう。
ExcelでD2からE7までを選択して、ぽちっとコピー!

エディタにペーストすると、D列とE列がタブでつながって1行になっています。
正規表現を使ってタブを改行に変えてきれいにしましょう。

▼HTML用に整形

1.Ctrl+Rキーを押して置換を表示します。
2.置換前を「\t」、置換後を「\n」にして「すべてを置換」
 ボタンをクリック

これで、できあがり!
リストの数が少ないときは、1つずつコピペの方が早いかもしれませんが、リストが数十や100以上ある場合は、こちらの方がミスもなく、早くマークアップできますヨ。
あっ、正規表現についてはのりこ先生の記事でネ♡

Excelを使うときの注意点

Excelは、本来表計算ソフトです。エディタとは異なるクセがあるで、ちょっと注意が必要です。

▼表示形式に注意

Excelは、入力したデータによって親切に表示形式を切り替えてくれます。が、コーディングの場合はこれが余計で、勝手に違うデータになってる時があります。例えば、ただの数字だったのに日付になってたり、カンマ区切りの数字だったのに、カンマなくなってたり…

これを防ぐために、セルの表示形式を「文字列」にしておくとよいです。

▼改行に注意

Excelデータを作るときに、見やすいようにと、セルの中に改行が入っている場合があります。Excelはセル内に改行があるときは、セル内をダブルクォーテーションで囲って、これが1つのデータだよって分かるようにしてくれます。コーディングの時は、このダブルクォーテーションは邪魔です。あとで取るのは結構メンドウです。

Excelの置換機能で、改行コードを<br>に変更しておきましょう。

1.Ctrl+Fキーを押して、「検索と置換」を表示
2.置換タブをクリック
3.検索する文字列に何も入力されていないことを確認する
4.検索する文字列に「Ctrl+J」キーを1回だけ入力。
 見た目には何もないけど、改行コードが入力されます。
5.置換後の文字列に「<br>」と入力
6.「すべて置換」ボタンをクリック

2014-12_mika_03

コーディングでコピペにかかる時間ってバカにならないもの。そのデータが多ければ多いほどミスのリスクも高まります。
コピペに時間をいっぱいとるのはモッタイナイ٩(๑`ȏ´๑)۶
単純作業は、さっさと終わらせて、クリエイティブなことに時間を使いましょ~\(^o^)/



ども
etekichi
etekichi's tail
etekichi's banana

いんふぉま~しゃる