2015/12/14 Mon

デジタルマーケターのためのプログラミング入門講座:3

TAG:

川畑 雄補

株式会社サイバーエージェント インターネット広告事業本部 クリエイティブソリューション局WEBコンサルティンググループ シニアコンサルタント

2011年、株式会社サイバーエージェントへ入社。スマートフォンアプリを中心とした、マーケティングメディアの立ち上げを行う。 その後、コミュニティーサービス、ソーシャ ルゲームの開発ディレクターを経て、2014年より当社インターネット広告事業本部にて、アドテクノロジーと企業の現場を結びつけるサイトコンサルティング領域を担当。 サイバーエージェント入社以前は、サーバエンジニア、iPhoneエンジニアを経験した後、スマートフォンのマーケティング支援やコンサルティング業務を手掛ける。 主な著書は『ヒットするiPhoneアプリの作り方・売り方・育て方』(マイナビ刊)ほか。

第3回:プログラミングは試行錯誤がお得

川畑です。【デジタルマーケターのためのプログラミング入門講座】も最終章の第3回となりました。今回で終了となりますので、いよいよ「作品」も完成となります。今回から読み始めた方も基本的にはコードを貼り付けするだけで楽しんでいただけますので、まずは動かしてみて興味を持ったら、第1回から読み進めていただければと思います。

【デジタルマーケターのためのプログラミング入門講座】(全3回)
第1回:「すべてのマーケターがプログラマになる日」
第2回:「実際に役立つものをプログラムしてみよう!」


さて、今日学んでいただくプログラミング思考のポイントですが、「プログラミングは試行錯誤がお得」ということです。プログラミング以外の世界に目を向けてみましょう。
例えば、健康のために自炊を始めてみたとします。オムライスに挑戦するのですが、今まで家で調理をほとんどしなかったので器具も調味料もほとんどありません。

卵、鶏肉、にんにく、玉ねぎ、ニンジン、ケチャップ、コンソメ、バター、、それに菜箸とフライ返しも必要ですね。レシピサイトを見ながら一生懸命作ったものの、野菜はみじん切りには程遠く、ご飯はベチャベチャで鍋に張り付いて焦げ、卵は炒り卵のようになってしまうかもしれません。せっかく買ってきた材料なので、食べるしかありません。捨てるのも買い直すのももったいないですしね。

ところが、自分でやるプログラミングでの材料費といえば僅かな電気代くらいですので、気が向いたらいつでも「最初からやり直す」という選択肢があるのです。最初からでなくても、途中から上手く行かなくなった場合、少し前に戻ることも簡単なのです。

話がややこしくなるのでお伝えしていませんでしたが、実は今回扱っているGoogle Apps Scriptも「ファイル」メニューから「変更履歴を表示」とすると、自分が編集した履歴がでてくるので「昨日の4時くらいまでは動いていたのに……」という場合、その時点まで戻ることができるのです。料理にも塩を入れ過ぎたら取り消せる機能が欲しいところですね。
さて、お得なのは分かりましたが、なぜここで取り上げたのでしょうか。
実はプログラミングを上達させるコツは、実際に人に使ってもらうことだからなのです。
これには様々な効果があります。まず、プログラミングというのは難しいことをやろうとすれば底なしに出来てしまうほど奥が深いものなので、初学者にとってモチベーションを保てない壁にぶつかることが多々有ります。
そこで、いきなり完成を目指さないで、できるだけ小さく作る、作って人に見せると達成感を味わうことができるので、苦しい壁が立ちはだかっても乗り越える力となってくれます。

もう一つは、作り直すコストが(こまめに修正すれば)低いため、より使う人が求めているものとのズレが起こりにくくなります。つまり同じ期間でよりユーザーのためになるものが作れるので、みんながハッピーになるのです。
というわけで、第2回までの本コラムで作ったプログラミングを修正して、人に見せられるものを作ってみましょう!

タグチェッカーを完成させよう

さて、第2回ではウェブサイトのURLを見つけると、ブラウザの「ソースの表示」して特定の文字やタグが存在するか検索する仕事をプログラミングによって自動化しました。しかしながらまだ手作業でやったほうが早く済むレベルです。

今回はプログラミングの基本の仕上げである「繰り返し処理」を使ってみましょう。細かい説明の前に完成品レベル1がこちらです。(3分クッキングのように)

function myFunction() {
// シートを取得
var sheet = SpreadsheetApp.getActiveSheet();
// 2行めから100行目まで繰り返し処理開始
for(var row = 2; row <= 100; row++ ){
// A列(=1列目)のrow行目からURLを取ってくる
var url = sheet.getRange(row, 1).getValue();
// もしURLがなければ終了
if(url == ""){
break;
}
// 実際にそのページを見に行く
var response = UrlFetchApp.fetch(url);
// HTMLソースの中にタグがあるか調べる
if (response.getContentText().indexOf("UA-28434403-1") > 0) {
// もし見つかればB列のrow行目に書き込む
sheet.getRange(row, 2).setValue("発見!");
}// 繰り返し処理終了のカッコ
}
}



まずは、前回と同様Google Spreadsheetのメニューから「ツール」→「スクリプトエディタ」を開き、上記をコピーペーストして上書きしてしまいましょう。実行を押すと、なにも起こらずに終了すると思います。

完成品レベル1のコードは、2行目から100行目までに記載されたA列のURLを読み込み、"UA-28434403-1"という文字があるかを調べた結果をB列に書き込むプログラミングになります。それでは2行目以降に別のURLを貼り付けてみましょう。
この状態で実行すると、30秒くらいで3行ともに結果が「発見!」と書き込まれていると思います。上手く行かなかった場合は、スクリプトエディタの中のすべての文字をきれいに消して、再度貼り付けてみてください。

繰り返し処理をマスターしよう

今回新しく登場したのはforと呼ばれる繰り返し機能です。

for(var row = 2; row <= 100; row++ ){
繰り返し実行したい内容
}


見慣れない記号が出てきましたね。forのカッコの中身を見てみましょう。カッコの中には3つの箱が入っていて、次のような機能をコンパクトにまとめています。(半角の「 ; 」で区切ります。)

左から順に、
( 使う変数をセット; 繰り返しが続く条件; 1回繰り返す毎にすること )

となっており、まずvar row = 2;で「変数」とよばれる単語登録のような箱に、「2」をセットします。rowと書いたのは、それが行を表すことがわかりやすいようにするためで、gyou とかいても以降が統一されていれば大丈夫です。

真ん中を飛ばして、右側は1回毎にrowを+1しています。++というのは最初良くわからないと思うかもしれませんが、+1する処理をよく使うため短く書けるようにした、つまりrow = row + 1と書くのと同じことです。

1回繰り返す毎にrowが1ずつ増えていく処理を書くと、中を書く部分が便利に書くことが出来ます。

繰り返す中身

たとえば、以前はURLをシートから取得する部分は以下のように書いていました。

var url = sheet.getRange(2, 1).getValue();

100行分実行するには、繰り返しを使わないとこうなります。

var url = sheet.getRange(2, 1).getValue();
var url = sheet.getRange(3, 1).getValue();
var url = sheet.getRange(4, 1).getValue();
var url = sheet.getRange(5, 1).getValue();

         ・
         ・
var url = sheet.getRange(100, 1).getValue();


これだけでスクリプトエディタが3画面分くらいになりそうですね。ここで繰り返し処理を使ってみましょう。rowがひとつずつ増えてくれる(row++)ことで、このような書き方ができます。

for(var row = 2; row <= 100; row++ ){
var url = sheet.getRange(row, 1).getValue();
}


なんと99行の処理が、3行までコンパクトになりました。やっていることは全く同じなに、変数として定義したrowが、一番下の}に到達するたび++、つまり+1されてまたforの次の行を実行してくれるので、100行目までのURLを取得してくれるのです。

書き込みも同様に、
sheet.getRange(row, 2).setValue("発見!");
というように、行をrowに置き換えて毎回+1行した場所に書き込んでいます。

ところで、rowはほうっておくと永久に増えていって、コンピュータの限界を超えてエラーになってしまいます。それを防ぐために、forの真ん中の箱で row <= 100 つまり100より小さいか100と同じという「繰り返して良い条件」を書きます。

<=  という矢印みたいなものは、算数で出てきた不等号ですが、書くときは=がうしろと覚えておきましょう。以下は<=、未満は<のように普通の 書き方ですが、全く同じを表す場合のみ==と2つつなげて書きますので注意をして下さい。これは、var xxx = yyyのような使い方と区別するためです。

横方向も繰り返してみよう

それでは最後の仕上げです。横方向も繰り返してみて、調べたい言葉も1ページにつき3つくらいまで調べられるようにしてみましょう。少し整理して、シートのセルを読んだり書いたりするには、いつも同じ機能を使っていることを思い出してみましょう。

読み込み
var url = sheet.getRange(row, 1).getValue();
書き込み
sheet.getRange(row, 2).setValue("発見!");


そうです、途中までは全く同じですね。各セルとの対応を図に表すとこのようになります。
rowが++される毎に、カンマの左側の数字が増えて、その結果下の行を読み書きできるようになります。ということはカンマの右側の数字を増やしていくと、右側のセルに進んでいくわけですね。
最後の完成形をみてみましょう。

function myFunction() {
// シートを取得
var sheet = SpreadsheetApp.getActiveSheet();
// 2行めから100行目まで繰り返し処理開始
for(var row = 2; row <= 100; row ++ ){
// A列(=1列目)のrow行目からURLを取ってくる
var url = sheet.getRange(row, 1).getValue();
// もしURLがなければ終了
if(url == ""){
break;
}
// 実際にそのページを見に行く
var response = UrlFetchApp.fetch(url);
// HTMLソースの中にタグがあるか調べる
// B列からD列まで繰り返し
for(var col = 2; col <= 4; col++ ){
// col列の1行目を読みに行く
var tag = sheet.getRange(1, col).getValue();
if (response.getContentText().indexOf(tag) > 0) {
// もし見つかればcol列のrow行目に書き込む
sheet.getRange(row, col).setValue("発見!");
}
}// 繰り返し処理(col)終了のカッコ
}// 繰り返し処理(row)終了のカッコ
}


理論を理解するよりも、まずは動かしてみましょう。先ほどA列のURLを増やしましたので、今度はB列、C列D列の1行目にHTMLソースから調べたい文字を書いてみましょう。たとえば当社の効果測定製品であるCAMPのURL「ca-mpr.jp」や、他社サービスの名前である「YouTube」という文字を調べることにしましょう。
実行結果はこのようになりました。A列に記入されたURLをチェックし、B列、C列、D列のセルに書いたチェック用の文字が含まれれば「発見!」という文字が表示されています。

ここまでくれば、A列を自社のWebサイトのURL、BCD列を自社で調べたいタグとすることで、100URLまで一気に調べることが可能になるのです。

例えば、お問い合わせのメールアドレスが変更になった、電話番号や営業時間が変更になった場合、BCD列に「old@example.com」「0120-123-456」「17:00」のように、変更漏れの古い情報を一気に調べることができるようになります。

右方向への繰り返し

さて、それでは右方向への繰り返し処理を見ていきましょう。

for(var col = 2; col <= 4; col++ ){

この部分が新しくなりました。これは先程と同様に、col(列)という変数を使って、2(=B)~4(=D)まで繰り返しています。これらを先ほどのrowの繰り返しと合わせると、以下の様なセルの動きとなります。
このように、2行目BCD、3行目BCDと繰り返していくことができるのです。おめでとうございます!ついにプログラミングの基礎を使って役に立つ物を生み出すことが出来ました。

さて、プログラミングは出来上がりましたが、少々やっていることが小さい(?)気がしますね。マーケターのためのプログラミング思考がウェブサイトのHTMLチェックで満足してしまってはいけません。

も ちろん、このGoogle Apps Scriptを極めると、各URLごとのFacebookシェア数を取得したり、GoogleAnalyticsを毎週自動レポートさせたりと本格的な活 用もできるのですが、そうではなくもう一度プログラミングで考えるという所に戻ってみましょう。

結局、プログラミングの流れはどうなっていたのかというと、

【1】どこかから入力を受け取り(A列2行目からURLを受け取り)
【2】そこに便利な処理を加えて(URLFetchという便利機能を呼び出し)
【3】何かの条件に一致するか判断し("UA-28434403-1" が存在するか)
【4】判断した結果を出力する(B列2行目に書き込む)
1~4を繰り返す

たったこの4つのことと繰り返ししか行っていないのです。でもこれで世の中にあるプログラミングの多くを説明することが出来ます。では別の処理に置き換えてみましょう。

【1】「35歳 男性 メール送信可」という指定を画面から入力し
【2】 データベースに、会員を1件とりだす命令文を実行し
【3】35歳、男性、かつメール送信可であれば
【4】キャンペーンメールを送信する
1~4を全会員分繰り返す

第 1回での説明を思い出しましたでしょうか。情報処理の試験ででてくるようなコンピュータのメモリをプログラミングで扱ったり、アルゴリズムを自分で書いた りということは、もちろんプロのプログラマになるには必要です。しかし、プロのプログラマではないマーケターは、難しい処理は便利な部品を探してきて、上 手く組み合わせることでやりたいことを実現することに集中しましょう。

その中で必ず出てくる流れが上記のとおりなのです。まず、どこかか らデータを取ってくる、次にとってきたデータの種類に応じてやることを変える(条件分岐といってifと書いた部分です)、実際の処理は便利な仕組みを利用 する、必要な数だけ繰り返す(forの部分です)、どこかに書き込んだり保存する。

たったこれだけですが、プログラミングが身近に感じられたのではないでしょうか。さらには、まず動かしてみる、失敗したら元に戻すという試行錯誤が何度でもできるので、間違って変なことしちゃったらどうしようと不安にならずに、ぜひいろいろな機能を使ってみてください。


これらの基本的な考え方を理解するだけで、マーケティングオートメーションのシナリオ設計も、DMPのような高度な製品もより深く理解し活用することが出来るようになります。

GoogleAppsScriptには、URLFetchのような便利機能が他にもたくさんあり、メールを送信したり、グラフを書いたりすることも可能です。英語が得意な方は公式サイトを、苦手な方は入門記事を公開されているサイトがいくつか有りますので、チェックしてみると良いでしょう。

■公式ガイド
https://developers.google.com/apps-script/overview

■初心者のためのGoogle Apps Scriptプログラミング入門(掌田 津耶乃氏)
http://libro.tuyano.com/index2?id=638001
関連記事

RANKING

  • Weekly
  • Total

TAG LIST