2015/10/6 Tue
デジタルマーケターのためのプログラミング入門講座：２
川畑 雄補
株式会社サイバーエージェント インターネット広告事業本部 クリエイティブソリューション局WEBコンサルティンググループ シニアコンサルタント
2011年、株式会社サイバーエージェントへ入社。スマートフォンアプリを中心とした、マーケティングメディアの立ち上げを行う。
その後、コミュニティーサービス、ソーシャ ルゲームの開発ディレクターを経て、2014年より当社インターネット広告事業本部にて、アドテクノロジーと企業の現場を結びつけるサイトコンサルティング領域を担当。
サイバーエージェント入社以前は、サーバエンジニア、iPhoneエンジニアを経験した後、スマートフォンのマーケティング支援やコンサルティング業務を手掛ける。
主な著書は『ヒットするiPhoneアプリの作り方・売り方・育て方』(マイナビ刊)ほか。
第2回：実際に役立つものをプログラムしてみよう！
川畑です。プログラマではないマーケター向けのプログラミング講座「デジタルマーケターのためのプログラミング入門講座」、第2回目はプログラミングの楽しさを味わってもらうために、実際に役立つものを作ってみようと思います。
第1回「すべてのマーケターがプログラマになる日」でも書いたとおり、本シリーズの目的はプログラマを育てるものではありませんので、まずは動かすことを目標としてみましょう。一つ一つの単語や、細かい文法などはもっと興味が出た時に勉強すると効率よく学習できます。
動かすことの重要性
この、「動いたものを見てから」というのは、昨今とくに重要性を増しています。たとえば、Amebaでのアプリ開発現場では、実際のゲームやアプリを開発する前にプロトタイピングという手法を用います。
モックなどと呼ばれるダミーアプリを作り、事前に使い勝手を検証してからプログラムの開発に入ることで、手戻りを防ぐとともに「本来ユーザが欲しがっているものは何なのか？ユーザーの生活に寄り添うものは何か？」ということを、短期間に試行錯誤することができます。
これは広告の現場でも同様です。たとえば、「FacebookやLINEの広告運用をします！」という戦略を立てても、SNSでつぶやく語尾の言葉遣いひとつ、添える画像ひとつ異なるだけでも、ユーザーに与える印象は大きく異なります。
しかしコミュニケーション運用に慣れていない組織では、事前にプレビュー画面などで関係者間のすり合わせをせずに文字だけで設計していると、投稿後に「少しふざけ過ぎではないか？」といった社内の声が上がったり、逆に慎重になりすぎてコミュニケーションを取る気が感じられない硬い印象を投稿から与えている例が多くあります。
現代の高度化されたプログラミングという「よくわからないもの」を料理するには、まずは少しずつ触れてみて「さじ加減」を体感することが一番大切なのです。
それでは早速動くものを作ってみましょう！
タグチェッカーを作ろう
さて、本日の内容は、Webマーケティングの実務でもよく遭遇する、「HTMLタグのチェック」を便利にするツールを作ってみたいと思います。
上手く完成すれば、以下の様なことが出来ます。
●Google Analyticsやタグマネージャを貼り忘れているページを見つける
●全ページの中から商品番号643を表示しているページを見つけ出す。
対象URLが数百ページを超えると、このようなチェック作業を手作業で行うのは非常に骨が折れますよね。私も現場では別の用事で訪問させていただいた時に、上記のようなチェックをお願いすると「２週間位かかるのでお待ちいただけますか」と言われることがあります。
プログラミングの力を使って、なんとかこれらを5分でチェック出来るやり方を見つけてみましょう！
このプログラムを通して最も学んでほしいことは、現代のプログラミングにおいて、「イチから全て作るよりも、便利なものを組合せてやりたいことを実現する」ということのほうが多くなっているということです。
後ほど紹介する、Webページの情報を取ってくるプログラムは、自分でイチから書くと数千行のプログラムを書く必要がありますが、すでに作られたものを利用するため、1行だけで済むのです。
つまり、
実現したいこと ＝ 便利な機能の利用知識 × 組合せ力
ということがプログラミングの学習といえるのです。
もちろん職業プログラマを目指すのであればコンピュータの仕組みやアルゴリズムなどを学ぶ必要があるのですが、非プログラマがプログラミングの世界に入るためには、まずは自分が必要なことを達成する知識だけを仕入れられればOKなのです。
早速実行してみましょう
function myFunction() {
// シートを取得
var sheet = SpreadsheetApp.getActiveSheet();
// A列(=1列目)2行目からURLを取ってくる
var url = sheet.getRange(2, 1).getValue();
// 実際にそのページを見に行く
var response = UrlFetchApp.fetch(url);
// HTMLソースの中にタグがあるか調べる
if (response.getContentText().indexOf("UA-28434403-1") > 0) {
// もし見つかればB列2行目に書き込む
sheet.getRange(2, 2).setValue("発見！");
}
}
※コピペばかりしていると、プログラマーの方から「プログラミングしていないじゃないか」とお叱りをいただきそうですが、まずは動かすところまで進んでみましょう。後半で解説（と宿題）があります。
書けたら次に、シートに調べたいURLを埋め込みます。
今回は弊社のURLを題材に行いますので、以下のように入力してみましょう。
1行目（行タイトル）
A列：URL B列：結果
2行目
A列：
http://www.cyberagent.co.jp/
※B列は空欄
以下のようになれば正解です。それでは実行してみましょう。
結果欄に「発見！」という文字が見つかれば成功です。いかがでしょうか。
上手く言った場合には、「発見！」の文字を消して、別のURL、たとえば
http://www.yahoo.co.jp/
とA列2行目のURL欄を書き換えて実行してみましょう。今度は何も起こらないはずです。
ここまでくれば今日の内容は完了です。コーヒーでも入れてリラックスしながら続きを読んでいただければと思います。
プログラミングのざっくり解説
それでは、無事動いたら、このコピペした１３行で何が起きているかを少しだけ見て行きましょう。この後で宿題を出しますので、全て覚えなくて結構ですから、宿題を解くヒントだと思って読み進めて下さい。動いていない人は、上記のスクリーンショット通りになっているか、全角のスペースを入れていないかという点をご確認下さい。
１行目： my Function () { および 15行目の }
これは、ここから処理が始まりますよという枠になります。普通に開発していると気づかないのですが、プログラマの人は中括弧開始にカーソルを合わせると、閉じカッコに色がつくような便利なソフトウエアで開発しています。
２行目ほか//で始まる行：コメント
//といっても照れている顔文字ではありません（笑）。なんとなく説明文が書き込まれているからわかるとおもうのですが、これはコメントといって、プログラム内に自由に説明を書くことができます。
３行目・７行目：便利な機能を利用する
var sheet = SpreadSheetApp.getActiveSheet();
とあります。現代のWebプログラミングにて、実はプログラミングの知識というのは２つあります。
ひとつは、皆さん少しは聞いたことがあるかもしれないJavaScriptやPHPといった、「プログラミング言語」の知識。それとは別に「フレームワーク」とよばれる便利機能の使い方の知識の２つがあります。
料理に例えると、前者が和食の味付け「さしすせそ」の知識であったり、魚の３枚おろしの方法といった基礎なのに対し、「フレームワーク」は、コンソメパウダーや濃縮めんつゆのように、基礎的な調理をすっとばして「すぐにつかえる」部品集のことを指します。
SpreadSheetAppというものは、Googleの表計算ソフトを便利に使うために必要なプログラムが予め用意された便利な部品集です。その部品集から、「getActiveSheet()」つまり日本語にすると今表示中のシートをちょうだい！と命令しているわけです。
同様に、URLFetchApp.fetch(url)はコメントにもある通り、ブラウザの代わりにそのページを読み込みにいっているわけです。どこを読みに行っているかというと、urlという下で出てくる「変数」に格納された「http://www.cyberagent.co.jp/」を読み込みにいっているわけですね。
このような部品集は、中でどういう動きになっているのかはわからないので、とりあえずあるがまま利用すると覚えましょう。コンソメパウダーがどのような製法で作られているかは知らなくても、美味しいスープを作ることが出来るのと同じことです。
３行目・５行目：短い単語に格納する
３行目ではもうひとつプログラミングとして重要な事をしています。「var sheet = 」という記述がありますし、「var なになに =」という表現がいくつか出てくるのが見つかると思います。これは誤解を恐れず言うと後々書きやすくするための単語登録みたいなものです。
「=」の左側の短い単語に、右側の便利機能を格納してあげることで、何度も利用するときに短く書くことが出来るのです。このsheetという短い単語（一般的に変数といいます）は後で何度も出てきますのでその便利さがわかると思います。
５行目・13行目：セルを読み書きする
こちらも部品集から、便利な機能を使っています。
sheet.getRenge(2,1).getValue();
この「sheet」は先ほど格納したものですから、以下のように書いても意味はおなじになります。
SpreadSheetApp.getActiveSheet().getRenge(2,1).getValue();
こう見ると、長さが半分くらいになるので、見やすさの効果が発揮できていますね。英単語の後ろに、()がつくものとつかないものがあるのですが、今はまだ覚えなくて大丈夫です。基本的にマニュアルや上記のサンプルからコピーペーストすれば問題ありません。
ただし、プログラムの世界で１点注意が必要なのが、コピーミスに気をつけるということです。よくよく見ると、各命令の間は、半角のドット（.）でつながっています。また、行末にはセミコロン（;）がついています。プログラミングの世界は全角文字が使えないことが多いので、かならず半角で入力するようにしましょう。
この、sheet.getRenge(X,Y).getValue();とsheet.getRenge(X,Y).setValue();は最頻出機能なので、ぜひ覚えておきましょう。前者がセルのX列目Y行目の値を取得する、後者が逆に書き込む命令です。実は第１回でも登場しているんですね。
９行目：もし～～ならばというカッコ
９行目は、プログラミングでどのような言語でも登場する、「もし～～なら」という領域です。制御文やif（イフ）文と呼ばれています。カッコの中身も見たことないものですが、これはフレームワークの機能とJavaScriptの機能２つを利用していますのでそれぞれ見て行きましょう。
response.getContentText()
という命令は、７行目でブラウザの代わりに読み込みに行ったWebサイトの「ソースを見る」を実行するような機能です。つまりそこで、JavaScriptの機能で「～という文字があったら、何文字目に登場するかを返す」命令であるindexOfに対して、探して欲しい文字、GoogleAnalyticsの「"UA-28434403-1"」という文字をわたしてあげます。先ほどの「変数」と区別するため、文字は半角ダブルクオーテーションで囲う約束になっています。
こまかい挙動は今は覚えなくて大丈夫です。とにかくこのifのカッコの中身は、"UA-28434403-1"という文字があるかどうかを探してるんだということだけわかればOKです。
つまり、ここを変えれば別の文字を探せるわけですね。たとえばYahoo!タグマネージャであれば、他で使ってなさそうな「”s.yjtag.jp”」を使ってみるといった具合です。
さて、脳が茹だってきましたか？
第１回が読み物中心だったのに対して、今回はいきなりプログラミングの世界に来ましたね。１度で覚える必要はありません、次回は今回のおさらいをしますので、いったん休憩してリラックスしていきましょう。
それでは今回の宿題です。調べたい文字「"UA-28434403-1"」を変えてみて、自分のサイトで使われているマーケティングタグを調べられるようにしてみましょう！エラー無く動かすことが出来るでしょうか。
今のプログラムでは、一度に一つのページの１個のタグしか調べることができませんが、次回以降で複数のページや、複数のタグを調べることが出来るようするので楽しみにしていてくださいね。
ちなみに普段は、もっと高度なプログラミングでデジタルマーケティング製品やアドテクと各企業のシステムを統合するお手伝いをしているのですが、それでも大部分は先ほどの「タグを埋め忘れていないか」とか「そのような業務を誰にやってもらったらいいかわからない」とか「外注さんとうまくやりとりができない」といった、より泥臭いことをお手伝いしています。
デジタルマーケティングの本格導入は、考え方だけでなく実行方法そのものが難しく感じたり、手法が新しいため先輩から後輩に教えるといった事が難しいといった声をよく聞きます。
私たち代理店はもちろん豊富な知識やプランニングでサポートできますが、自らの組織でデジタルマーケティングの土台を築くためにも、ぜひいまの業務内容にかかわらずプログラミング思考を取り入れてみてくださいね。
それでは、第３回をお楽しみに。
この記事が気に入ったら
いいね！しよう
の最新情報をお届けします
