NITE and DAY.blog

ルーチンを嫌う遊び人クリエイターKaiのシゴト観。

【html】<li>タグ内の変数の書き換えをExcelで効率化して、リストを量産する方法

またの名を…
f:id:doubleM:20160618214604p:plain

突然ですが、プログラマさんてなんであんなにすごいんですか!
神様ですか!?
小学生から算数が苦手で、細かい事務作業が大嫌い、数字は5桁以上になると記憶障害が生じ始める、完全文系育ちのデザイナーKaiです。

でも、これでも一応デザイン設計を考えるのが本業のUIデザイナーですから、ロジカルシンキングとか情報の整理・合理化にはうるさい方です。かつ常日頃から全力で手を抜くことを心がけている私としては、なまじ「効率化の神様」とも言えるプログラマさんと仕事をしている関係上、何をやっていてもついつい「これって絶対もっと効率的な方法があるよね??」みたいなことを考えがちです。

今日は、そんな私がプログラマの友人に相談を持ちかけたところ、htmlの制作が感動的なまでに捗った、というお話をさせていただきます。

今回のお題
<li>タグ内の要素の書き換えを効率化したい

 

物語の始まり

htmlを作成したことのある皆様なら誰もが経験することだと思いますが、<li>内は往々にして肥大化しがち。たとえば、hover時の装飾などを排除したシンプルなリストを作るだけでも、<li>の中身は結構な行数に…

<li class="portfolio-item">
    <div class="item-inner">
        <a href="blog-000.html">
            <img src="images/eyechatch/xxx.png" alt="○○のタイトル画像">
            <h5>000.タイトル</h5>
            <div class="overlay">
            </div>
        </a>
    </div>
</li>

このうち、都度テキストを変更したいのは5箇所くらい。
でも、都度コピペして、書き換えて…というのも非効率的な気がします。

あるいは、下記のような単純なリストを作る時でも

<ul class="pngBox">
<li class="imgBox"><span class="imgWrapper"><img src="images/icon/png/icon_heart-01.png"</span></li>
<li class="imgBox"><span class="imgWrapper"><img src="images/icon/png/icon_heart-02.png"></span></li>
<li class="imgBox"><span class="imgWrapper"><img src="images/icon/png/icon_heart-03.png"></span></li>
</ul>

この「icon_heart-」のあとの数字を、手動で一つ一つ変えていくのは…50個くらいまでは許されますが、100個を超えてくると無駄以外のなにものでもなくなりますね。

こういった部分を自動化するために、通常プログラマさんはこのフォーマットをテンプレ化して、、えーと……変数?をなんかして、データベースからその…とにかくこう、自動でバーッと書き換え可能にするわけです。

それが羨ましかった私は、とある黒髪眼鏡プログラマの友人に相談しました。

黒髪眼鏡プログラマとの出会い

「繰り返し登場する文字列の全体を維持したまま、複数の該当部分だけを変えたテキストを量産したい。」しかも、プログラミングの知識がない私ができる範囲で省エネでやりたい、と。

もちろん最終目標は「効率化」なので、手作業でやる以上に時間や手間がかかるなら、それは費用対効果に見合わない、ということになります。

作業にかかる時間の削減
・手作業で行なう際に発生する人為的ミスの削減

をかなえるために彼が考えてくれた方法はなんと…Excelを活用する、という方法でした!

なんだこいつ!?魔法を使えるぞ!

考え方は、こうです。例えば、先ほど挙げた2つめの例のようなテキストを量産したいとします。

変数となる(変化する)部分は「icon_heart-01.pngの」数値部分。それを、こんな分に分割します。

f:id:doubleM:20160618212411p:plain

ちなみにスプレッドシートで作るとこんな感じ。

f:id:doubleM:20160618212610g:plain

Excelにも付いている、ドラッグすれば数値が増えていく機能を使えば100個に増えても一瞬ですね。(ただし分割の仕方にちょっとだけ慣れが必要ですが。)この方法だと、「heart」部分が「star」に変わっても「circle」に変わっても、同様の手順でリストが作れます。そして最後は全部を足せば、ハイ完成。

f:id:doubleM:20160618212636p:plain

…は?…え?って感じですよね。いや、私もそんな反応だったんです。何言っちゃってんだコイツ、的な。だって、こんな単純な方法で?って。でも、聞くまでは残念ながら、少しも思いつかなかったんです。

どちらかというと、置換とかでどうにかできないのかな、とは考えましたけど。
まさか足し算で。………足し算で。

魔王討伐成功

半信半疑でしたが結果はこの通り。
f:id:doubleM:20160618212755p:plain

ちなみに、最初に挙げた例でこれを行なう場合は少し複雑にはなりますが、考え方は一緒です。ただし、長いコードでこれをやろうと思うと思うと、「”」とか「(スペース)」などの表現でうまく足せずに困ることがあります。

下記のサイトで、そういった記号が出てきた際の記述方法がまとめられていましたので、救われました。
http://www.relief.jp/itnote/archives/002391.php


恥ずかしながらワタクシ、これまで表計算ソフトというものを仕事で使う機会がなく、せいぜい数字の合計値を出すことくらいにしか使えなかったんですね。

この機能を教わってからというもの、マクロというものに少し興味を持ちまして、お勉強をしてみました。結果、別ページに「情報管理用一覧」を準備して、そこから「引用する」という文明的な方法で、リスト生成をすることができるようになりましたとさ。

これぞ発想の転換。

・・・

いや、すごいですよね、黒髪眼鏡。
なんというか、個人的には、該当箇所をマークアップして置換して…みたいなことばっかり考えていたのですが、変えたい文字列の前後で分断して挿入してつなげる、とか。少しも思いつきませんでしたよ。

「なんだオマエ、天才か!!」と1分間に数回言いましたよ。

後日談

この(少なくとも私に取っては)目からウロコの手段、是非皆様にも広めたい!いかに黒縁眼鏡プログラマが有能かを世界に知らしめたい!!と大興奮していると、プログラマは言いました。「やめてよ、恥ずかしい…」

……なんで (・_・)?

まとめ

デザイナーとプログラマはもっと親密になるべき!!
彼云わく、「誰にでも出来る簡単なお仕事」だそうですが、こういう…ものっすごいニッチなと言うか、超特定的なシーンで発生するような具体的な問題って、誰かに相談する機会もなければ、ネット上で質問するにもなんて聞いたら良いのかわからない、すごく微妙なところだと思うんですよね。
そういった意味で、今回は改めて身近に仲良しプログラマさんがいてくれる幸福を噛み締めました。

マネジメントは経営者のように。
デザインは設計士のように。
効率化はエンジニアのように。
アイデア出しは子供のように。
そしてコミュニケーションは道化師のように。

各分野の専門家の良いとこ取りをして、今後も成長していきたいな、と思う赤髪デザイナーでした。

シェアハウスの宣伝!

シェアハウスにご興味をお持ちの方は、こちらから情報をチェック✦入居時に登録をすると、オトクな割引が受けられますよ♪