RAKUS Developers Blog | ラクス エンジニアブログ

株式会社ラクスのITエンジニアによる技術ブログです。

5分で理解する!Google Apps Script超入門

はじめに

こんにちは、新卒で入って入社3年目のnorthmkyです。
いままでの投稿ではyumコマンドについてや文字コードなど実業務でも役立つ基礎知識をまとめたものを書いていましたが、今回はプライベートでGoogle Apps Script、略称GASに触れたのでご紹介したいと思います。

題名を「5分で理解する」などと自身でいうのもなんですが巷でよくあるキャッチーで怪しい、ほんまかいな...というようなものになっておりますが、嘘ではないと思います。
ただ前提としてJSの経験がある必要あります。逆に言えばWEB界隈でJSを触ったことがある方は学習コストがほぼ0になります。本記事を読めばやりたいことはすぐ書けます。 理由としては

  1. JSとパラダイムがほぼ一緒
  2. JSと文法がほぼ一緒
  3. 標準でついているメソッド名が直感的でわかりやすい

の3点です。 ほぼ同じ思想なので、あとは特有の押さえておくべき用語とスクリプトと操作するアプリ画面の対応関係がわかれば書けるようになります。 それでは前置きはこのくらいにして紹介に入りたいと思います。

Google Apps Script(GAS)とは

Googleの各種アプリ(Google スプレッドシート/Googleドキュメントなど)をアプリ内ではなく外から操作できるJSライクなプログラミング言語」です。 エクセルに対するVBAの関係と一緒です1

実現できることの例としては、指定時間になったら特定のセルの値を読み出して外部アプリに渡すbotであったり、スプレッドシートだけでなくgoogleカレンダーにまとめてスケジュール登録したり、などなどができます。2

色々できるのですが、本記事では読者のみなさんに馴染みがあると思われるスプレッドシートを題材にします。

早速GASを理解する

GASでは操作対象のアプリをオブジェクトとして扱います。 スプレッドシートの場合、覚えるべきオブジェクトは下記3点のみです。

  1. Spreadsheetオブジェクト
  2. Sheetオブジェクト
  3. Rangeオブジェクト

アプリとスクリプト内のオブジェクトは下図のような関係性になっています。 ウィンドウ左はおなじみのスプレッドシート、右はGASです。 図のスクリプトは「特定のセル範囲に値を入れる」処理をします。

f:id:northmky:20180710092030p:plain

実行すると下記のようになります。 好き、という文字列が指定したセル範囲(=range)に格納されました。

f:id:northmky:20180710092037j:plain

どうでしょうか、説明はこれだけです。

値を入れるというだけの処理の紹介ですが、これだけでもうスプレッドシートを自分の好きなように操れる気がしないでしょうか。 特別な文法を覚えたりする必要もありません。 ここでは記載していませんが、分岐/繰り返しなど基本構文はもちろんありますし、標準メソッドもあるので安心です。 「いやメソッドいちいち調べる感じじゃ...?」と思われた方、安心してください。 こちらの標準エディタは補完機能付きなので、適当にメソッド名を打っても実現したいことができるメソッドを見つけられる確率が高いです。メソッド名がわかりやすい...素晴らしい...

おわりに

GASの超入門として、スプレッドシートに対して処理を行うことを通して、GASをどのように書けるかをお伝えしました。

今回はお話しませんでしたが、webAPIを叩く機能も標準でありますし、google本家、またそうでない人によるたくさんのGAS用ライブラリもgithubで公開されています。 ですのでtwitter/slackBotも 開発環境構築なしでGoogleアカウントがあれば誰でも作成できる という敷居の低さも魅力的なGAS、皆さんも試してみませんか?

題名を裏切らない内容になっていれば幸いです。

付録:スクリプト作成〜実行の簡単な流れ

  1. スクリプト作成方法

  2. ツールをクリック f:id:northmky:20180710092038j:plain

  3. スクリプトエディタをクリック f:id:northmky:20180710092041j:plain

これでスクリプトが立ち上がります。

  1. 実行方法

  2. Ctrl + S ... スクリプト保存

  3. Ctrl + R ... スクリプト実行

  • エンジニア中途採用サイト
    ラクスでは、エンジニア・デザイナーの中途採用を積極的に行っております!
    ご興味ありましたら是非ご確認をお願いします。
    20210916153018
    https://career-recruit.rakus.co.jp/career_engineer/

  • カジュアル面談お申込みフォーム
    どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。
    以下フォームよりお申込みください。
    forms.gle

  • イベント情報
    会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください! rakus.connpass.com


  1. やや過大表現です。厳密にはGASは、エクセルに対するVBAのような、どこかのbookに紐付いて動く「Container Bound Script」と紐付かず単独で動く「Standalone Script」の2種類があるので厳密な表現ではないです。本記事では「Container Bound Script」のみを扱いますのでこのように表記しました。

  2. ここで私は基礎を学びました。他にもいろいろな実例を平易に書いてありとてもわかりやすいです。 https://tonari-it.com/google-apps-script-manual/#toc2

入社4年目エンジニアが業務でよく使うツール

こんにちは。west-cです。

早いもので1エントリ目の記事から1年が経とうとしており、自チームにも今年の新卒メンバーが配属されました。

そこで今回も、今年入社の新米エンジニアの方を対象に、個人的に業務でよく使うツールを紹介したいと思います。
私自身もまだ4年目で新米に属する部類ではありますが、少しでも業務効率化に寄与できれば幸いです。

WinMerge

f:id:west-c:20180703141253p:plain

テキストファイルの差分比較・マージを行える有名なソフトウェアです。 修正前後の差分チェックを行い、意図通りの修正となっているかを確認するために利用しています。
目diff*1・目grepは特殊な訓練を受けた上で実施しないと思わぬ事故に繋がります。正確な結果を得るためにツールを活用しましょう。

Sublime Text

f:id:west-c:20180703141249p:plain

ソースコードエディタです。
コーディングはIDEを利用しますが、ちょっとしたスクリプトを見たり正規表現を用いた検索・置換をサクッと行いたい場合に利用しています。
Visual Studio CodeAtom などのエディタでも同様のことは行えますが、動作が一番軽快なため私はこのエディタの利用頻度が一番多いです。
指定フォルダ下の全ファイル文字列検索(grepのようなもの)も行えます。

Awesome Screenshot

f:id:west-c:20180703143249p:plain

ブラウザの画面キャプチャが行えます。
撮影範囲の指定や文字挿入などある程度の画像編集も行えるため、そのまま Mattermost*2Redmine に貼り付けて利用しています。

ScreenToGif

f:id:west-c:20180703141308g:plain
(↑実際に動画撮影をした様子)

画面を動画撮影し、GIF形式で保存できます。
自チームでは発見したバグを Redmine のチケットで管理しています。 バグ報告時に再現手順を文章で説明するのが難しい場合には、その手順を撮影したGIF画像もチケットに添付しています。
動画だと操作手順が分かりやすく認識齟齬も起きにくいため、チーム内でもよく利用されています。

Boostnote

f:id:west-c:20180703141237p:plain

Markdown形式でメモを取ることができます。
日々のタスクやちょっとしたtipsなど、基本的にここで一元化するようにしています(手帳に取ったメモもこちらに清書しています)。
タグ付けやフォルダ分け・検索も行えるため過去のメモも追いやすく、「メモした記憶はあるけれど、どこに書いたか忘れた」という事態がほぼ無くなりました。

Postman

f:id:west-c:20180703141244p:plain

WebAPIに対してGUIで直感的にリクエストを送信できます。
少しAPIのテストを行いたい場合に curl コマンドを打つことなくサクッと実施できるので重宝しています。
自分で作成したリクエスト情報をインポートすれば、プログラムに詳しくない方でも簡単にAPIのテストやお試しができる点も魅力です。

おわりに

これは個人的意見ですが、面倒なこと・正確さが求められることはコンピュータに任せる という意識はエンジニアとして重要だと思っています。 (「プログラマの三大美徳」という有名な言葉にも繋がると思います)

ぜひ非効率だと思う部分があればツールの導入等で効率化を試みてください。 そして、場合によっては自分で作成してみるとさらに良いと思いす。
自分が欲しかったものを自分の手で作ることができるのは、エンジニアならではの醍醐味だと思いますよ!


  • エンジニア中途採用サイト
    ラクスでは、エンジニア・デザイナーの中途採用を積極的に行っております!
    ご興味ありましたら是非ご確認をお願いします。
    20210916153018
    https://career-recruit.rakus.co.jp/career_engineer/

  • カジュアル面談お申込みフォーム
    どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。
    以下フォームよりお申込みください。
    forms.gle

  • イベント情報
    会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください! rakus.connpass.com

*1:Linuxコマンドの diff 相応の差分比較を目視で行う特殊技能のこと。目grepも同様。

*2:チャットツールとして有名な Slack に似たツール。自チームではチャットツールに Mattermost を導入しています。

LINEでTwitter検索する

はじめに

新卒2年目エンジニアのkasuke18と申します。
今回はLINEでメッセージを送信することでTwitter検索を行うLINE Botを作成してみましたので、作成の流れや実際のコードを記載します。使用言語はPHPです。

もくじ

構成

今回はLINEのAPITwitterAPIを利用します。また、LINEで送信されたテキストに対して処理を行うWebhookスクリプトを設置するSSL対応のサーバが必要なため、HEROKUを使用しています。
イメージとしては以下のようになります。
構成イメージ

必要なもの

APIを利用するまでの流れについては、LINE Messaging API公式サイトに詳しい説明が記載されています。
また、Twitter REST APIは公式サイト上のどこに記載されているか発見できませんでしたが、検索すればそのあたりのことが書かれている導入記事が数多くあるので省略します。
HEROKUの使用方法については当ブログに記事がありますので、ぜひそちらをご参照ください。

実装例

メッセージの取得

まずはLINEから送信されたメッセージテキストを受け取る部分です。
LINE Platformから送信されるのはJSONで、以下のような形式となっています。

{
    "events": [
        {
            "type": "message",
            "replyToken": "**********",
            "source": {
                "groupId": "**********",
                "userId": "**********",
                "type": "group"
            },
            "timestamp": 1529822351422,
            "message": {
                "type": "text",
                "id": "**********",
                "text": "送信メッセージ"
            }
        }
    ]
}

上記のJSONをもとにパースして送信されたテキスト情報を取得するコードが以下となります。送信される形式がJSONなので、$_POSTではデータが取得できないことに注意が必要です。

<?php
$json = json_decode(file_get_contents('php://input'), true);
$message = $json['events'][0]['message'];
$messageText = $message['text'];

Twitterで検索

次に受信したテキストをキーワードとして、Twitterで検索します。Twitterの連携については自前でやってしまうのもありですが、面倒なのでTwitter連携パッケージmpyw/cowitterを使用しています。

<?php
$client = new Client([$consumerKey, $consumerSecret, $twitterAccessToken, $twitterAccessTokenSecret]);
$tweetsParams = ['q' => $q . ' -rt' ,'count' => '10', 'result_type' => 'recent', "include_entities" => true];
$tweets = $client->get('search/tweets', $tweetsParams)->statuses;

$tweetsParamsで検索条件を指定します。
qは検索キーワードで、検索演算子も利用できます。今回はリツイートを排除したいので、検索演算子-rtを使用しています。
countはそのまま検索結果の取得件数で今回は10件、result_typeは取得するツイートの種類でrecentとすることで最新のツイートを取得します。
最後のinclude_entitiesは少し特殊で、取得したツイートオブジェクトにentitiesプロパティを含めるかどうかを指定します。entitiesプロパティとはツイート本文を拡張するエンティティで、画像や動画などの本文に付け足すための情報が格納されています。今回はツイートに付随する画像のURLを取得するために使用しています。
他にも設定可能なプロパティがありますが、今回は不要なので省略します。必要に応じてこちらをご参照ください。

検索結果のパース

検索結果から必要な情報を抜き出すときにも、mpyw/cowitterが当然ながら活躍してくれます。
今回必要とする情報はツイート本文ユーザ名ツイートURL画像URLです。それぞれの情報は以下のようにして取得します。

<?php
foreach($tweets as $tweet){
  $text = $tweet->text;
  $name = $tweet->user->name;
  $url = 'https://mobile.twitter.com/' . $tweet->user->screen_name . '/statuses/' . $tweet->id_str;
  $img = $tweet->extended_entities->media[0]->media_url_https;
}

ここで注意する点が2つあります。
まず1つ目はツイートURLです。これはツイートオブジェクトの中に直接記載されていないので、その他の情報を結合して作成する必要があります。
2つ目は画像URLです。画像のURLは2種類あり、media_urlmedia_url_httpsがあります。見ての通りHTTPかHTTPSかが違うだけなのですが、LINEのAPIHTTPSでないとダメなので、media_url_httpsのURLを取得する必要があります。

LINEに送信

最後にLINEに送信します。単に動かすだけならプレーンテキストでもよいのですが、今回は少し見た目にこだわってFlex Messageという形式にしてみます。Flex Messageでは複雑なレイアウトを自由に作成可能です。今回は以下のような見た目にしました。ほかにどのようなレイアウトにできるのかは、サンプルなどもありますので公式ページをご参照ください。
Flex Messageの例

以下が今回の見た目を作成するのに必要な情報を設定した配列です。この配列をjson_encodeして送信します。



そして実際に作成したメッセージを送信する部分のコードが以下となります。
改めて説明するまでもなく、curlをたたいて終わりです。

<?php
$ch = curl_init("https://api.line.me/v2/bot/message/push");
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'POST');
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($postData));
curl_setopt($ch, CURLOPT_HTTPHEADER, array(
  'Content-Type: application/json; charser=UTF-8',
  'Authorization: Bearer ' . $accessToken
  ));
$result = curl_exec($ch);
curl_close($ch);

おわりに

特に需要はないでしょうが、今回はLINEからTwitter検索をしてみました。単にAPIをたたくだけで多くのことができます。今回はテキストメッセージを検索するということしかしていませんが、もっと面白いものがあれば機能拡張という形で取り込んで行きたいです。
最後までご覧いただきありがとうございます。

参考文献

大阪開発部のビアバッシュを開催しました ~技術ネタ~

MasaKuです。
ラクスでは月1回のペースで開発メンバーの交流会としてビアバッシュを開催しています。

ビアバッシュとはビールなどのアルコールを片手に(+軽食)フランクに技術内容について発表したり語り合う交流会です。
ラクスで行っているビアバッシュについては以下の記事が参考になるかと思いますので、よろしければご確認下さい。

tech-blog.rakus.co.jp tech-blog.rakus.co.jp

大阪開発部では毎月何らかのテーマを決めてビアバッシュを行っています。
今月、大阪の開発部で開催されたビアバッシュのテーマは「技術ネタ」です。
技術ネタといっても、硬い雰囲気は全くなく、業務に直接関係しないような内容について発表されている人がほとんどでした。
また、テーマに縛られないLT枠も毎回開催されており、こちらも毎回数名の方が発表しています。

簡単ではありますが、今月のビアバッシュの雰囲気をお伝えできればと思い、発表内容についてまとめさせていただきました。

f:id:MasaKu:20180617220021j:plain

ビアバッシュの様子。ちなみに、今回のケータリングは「サンドイッチ」でした。

テーマ枠(技術ネタ)

PHPのマジックメソッドについて

マジックメソッドとは、クラスに設定しておけば、明示的にメソッドを呼び出さなくても特定条件で自動的に発動するメソッドのことです。
__construct()は業務の中でもよく目にしますが、それ以外のマジックメソッドについては、PHPの学習初期に利用していた参考書に紹介されていたものを少し読んだくらいで、ほとんど知りませんでした。
マジックメソッドはフレームワークやライブラリの中で利用されていることが多いようで__call()__get()CakePHPでも利用されているようです。
発表は__callStatic()を中心とした内容でしたが、機能の説明だけでなく、どのように実装するかということを、書籍管理を例にして説明していただきました。
発表の時間内でライブコーディングするというテクニックも披露していただき、大変見ごたえのある発表でした。

これまでのPWAとこれからのPWAについて

Progressive Web Appsについては、Webアプリでありながら、ネイティブアプリのように振る舞うことができるもの、くらいの認識でした。
また、どこでもネットに繋がる現代において、オフライン環境でも利用できることのメリットはそこまで大きくないのではないかと考えていました。
しかし、データを端末にキャッシュすることで、アプリのレスポンスが早くなるという点もPWAの特徴であるということについてご指摘いただき、オンラインで通信する必要のある箇所を切り分けるという観点を見落としていました。
様々なフレームワークでPWAのテンプレートが利用できるようになってきている(React.js / Vue.js / Angular.js)ことから、PWAの開発が加速化することが期待されます。
Microsoftが今年中にPWAをWebアプリストアに追加することを発表したこともあり、今後のPWAのニュースにも注目しておかなければなりません。

www.itmedia.co.jp

Haskellの参照透過性について

Haskellの参照透過性のメリットについての発表内容でした。
なお、本発表は発表者とは異なる方が作成された資料を参照しながらの発表でした。(下記のslideshare
関数を実装する際に気をつけなければならないこととして、その関数がどのような値を受け取ってどのような値を返すのか、ということを明確に意識しておくことが挙げられます。
Haskellは静的型付き言語の中でも、制約が強いプログラミング言語に分類されるようです。
そのため、実装した関数が正しい型で設定されていない場合は、コンパイル時に失敗するが、裏を返せば、コンパイルで落ちなければ、関数の型が正しく設定できていることが保証されるということでもあります。
発表者の方は、Haskellのような強い静的型付き言語でプログラミングを行うことによって、PHPなどの制約の優しいプログラミング言語でプログラミングをする際にも型を意識する癖がついたとおっしゃっていました。
実装する際の心構えだけでなく、体に癖をつけておくことは大切だなと思いました。

Haskell Day2012 - 参照透過性とは何だったのか

LT枠(自由発表)

使い続けているツールについて

業務で使っているツールを2つ紹介してくださいました。

Wireshark
ネットワークに流れるパケット情報をリアルタイムで調査できるツールです。
Linuxのコマンドも利用できることに利便性を感じて、今でも利用されているようです。

knowledge.sakura.ad.jp

Vimium
ブラウザ操作をキーボードで行うためのツールです。
マウスを操作しなくてもブラウジングができることから、キーボードから手を離したくないような場合に便利で、体感的にはすごく楽とおっしゃっていました。
なお、以前のビアバッシュでこちらのツールと同様のcVimというGoogle Chrome拡張機能の発表をしている方もいらっしゃいました。
マウス無しでブラウジングすることの需要は一定存在するようですね。

Googleのデータセンターについて

Googleのサーバは、サーバを構成するビス1つからGoogleが自社で作成しているようです。
なんでも、利用している製品に脆弱性が発覚した際に攻撃されるリスクを回避するためなんだとか。
また、本発表で面白いと思ったのが、サーバの維持管理で一番コストがかかる箇所が、空調管理のための電力だそうです。
PUE(Power Usage Effectiveness)という、データセンターのエネルギー効率を表す一つの指標がありますが、GoogleではこのPUEが1.12~1.19程度らしいです。(業界標準は1.5程度)
以前耳にした話ですが、さくらインターネットでは北海道の冷涼な外気をサーバルーム内に取り込むことで、一般的な都市型データセンターと比較して約4割の消費電力を削減しているそうです。
サーバの維持管理のコストをいかに抑えるか、という話を聞くことで、Google検索を行う度にGoogleの電気が一部利用されているということをちゃんと意識できるようになりました。
提供されているサービスとはいえ、無駄なクエリ発行はできる限り抑えなければなりませんね。

www.sakura.ad.jp

Android Studio で作ったアプリについて

業務で行った内容の復習として取り組まれた、cURLで外部サーバにアクセスして情報を取得するAndroidアプリの開発について発表していただきました。
アプリの内容はWather HacksというWebサービスAPIを用いて、その日の天気情報を取得するといったものでした。
本アプリを開発する上での苦労話として、AndroidはOSのバージョンアップによって仕様が変わることから、参考にしている記事がどのバージョンのAndroidを対象とした記事なのかをしっかりと確認しなければ、うまく動作しなかった、ということを話されていました。
これは、自分が情報を収集する際のポイントとして、気をつけなければならないことでもあります。
しかし、新たに情報を発信する際も、環境依存となる情報は明確に提示しておくことで、記事の価値を高めることに繋がることを認識することができました。

tech-blog.rakus.co.jp

おわりに

いかがでしたでしょうか。
今月も様々なタイプの発表が聞くことができて、大変充実したビアバッシュになりました。
次回のテーマは「使用しているツール特集」ということで、次回も魅力あふれる発表が聞けるのではないかと今から楽しみです。

参考サイト

チーム力を高めるためのテストを書いてみよう

id:radiocat です。スクラムマスターの修行中です。

今回はチーム力を高めるために私たちが取り組んでいる手法を紹介します。アジャイルのプラクティスとして紹介されている手法ですが、アジャイルではない開発の現場でも活用できるのでぜひ参考にしてみてください。

学びにフォーカスしてチームで試験問題を作る

この手法は「スクラム現場ガイド」という書籍の第20章で、新しいメンバーを受け入れる手法として紹介されています。

この書籍を翻訳されている安井さんが同様のテーマのスライドも公開されています。

www.slideshare.net

目的

チームが大事にしている文化や技術について繰り返しテストをすることで新しいメンバーにそれらを理解してもらいます。また、テストをすることで新メンバーの理解が足りていないことを既存メンバーも含めてお互いに認識することができます。

やりかた

  • チームが問題を作る
  • 新しいメンバーは毎週必ずテストを受ける

問題の例

チームに取り入れよう

私たちのチームも新しいメンバーを迎えることになったので、早速この手法を取り入れようと考えました。しかし、ここでいくつか疑問が浮かびました。

テストするのは新しいメンバーだけ?

テストは新しいメンバーだけに必要なものでしょうか?我々エンジニアは新しく作った機能を必ずテストしますが、そのテストを日々回帰的に利用する手法を取り入れています。同様にスクラムチームも定期的にテストすればよりチーム力を高められるのではないかと考えました。

テストという言葉のハードルが高い

新しく入ってきたメンバーに対して「これからテストしますよ」と言うのは少し仰々しく、これから一緒にやっていこうというのに逆に心理的な壁ができてしまいそうな気がしました。そもそもこのテストは「チームが大事にしている文化や技術について理解する」ことが目的であり「テストする」のは手段でしかありません。無理にテストという言葉を使う必要もないので余計な心理的障壁を作らないように「クイズ」という呼び方にしてはどうかと考えました。その名も「Scrum Quiz」です。

Scrum Quizとは

私たちはScrum Quizを以下のように定義しました。

  • スクラムチームを前進させるための質問集です
  • 以下のような内容について質問に回答することで相互理解を図ります
    • 文化
    • 価値観
    • 必須スキル・理論
  • クイズはみんなのものなのでチームの誰でも追加・更新できます

クイズの内容を考える

あとは問題を作るだけです。インセプションデッキにまとめた内容やチームで決めている品質の基準などを質問するようにします。また、ふりかえりで決めたルールなども質問に加えました。ふりかえりの時にチームで決めたルールがいつの間にか形骸化してしまうことが時々あります。クイズの問題にしておけばチームでそのルールを意識することができて、定着につなげることができます。

また、理解や定着が目的なので一言で答えられるようなクローズドな質問ではなく、あえてやや曖昧でオープンな質問にしてみました。

f:id:radiocat:20180608192057p:plain:w500

Scrum Quizの完成

そして私たちのチームのScrum Quizが完成しました。

f:id:radiocat:20180608191955p:plain:w500

チームの朝会(デイリースクラム)後に数分ほど時間をとってメンバーの誰か1人がクイズを引いて答えてもらうようにしました。正しく答えられることも大事ですが、チームで「ああ、そういうルールだったよね」という理解が共有されることも大事です。「補足すると、ふりかえりでこういう意見がでたのでこういうルールにしました」というような話が出ればさらに理解が深まって良いと思います。また、もしクイズに答えられなかったら、次の日のまでに答えをみつけて朝会で共有してもらいます。

チームを継続的にインテグレートする

Scrum Quizはチーム力を高めるためのテストです。これを日々実行することで継続的にチームの大事にしている文化をより強化することができます。エンジニア的な言葉で言い換えるとチーム力を高めるためのCIツールなのです。

アジャイルな現場に限らずどんなチームでも大事にしている文化やルールはあると思います。チームでテストを作っておけば、それらを確認し合ってチーム力を高めることができます。

VagrantとDockerで「環境に縛られない」開発環境を構築しよう

f:id:rs_tukki:20180509170211p:plain

はじめに

こんにちは。@rs_tukkiです。

先日、このエンジニアブログでY-KanohさんがDockerでの開発環境構築について説明されていましたね。
tech-blog.rakus.co.jp
また、mickey-STRANGEさんはHerokuを使った開発環境の構築を行っていました。
tech-blog.rakus.co.jp

恥ずかしながら、一エンジニアとしてもう1年以上が経過している私ですが、業務以外でガッツリ開発することがあまりありません... 環境の構築についても色々手法があるなー程度で見ていたのですが、
先日Vagrantというツールを使って、「どの」、「誰の」、「どんな」環境でも手軽に開発環境を構築できる手順を学びましたので、今回はそちらについて簡単に記事にしたいと思います。

Vagrant?Docker?

f:id:rs_tukki:20180615103526p:plain

まず初めにVagrantとDockerで開発環境を構築するにあたっては、当然ですがVagrantとDockerがどのようなツールなのか、ということを理解しなければなりません。
正直自分も違いがよくわからないまま触っていたのですが...調べていると面白い例えを見つけました。

Vagrant : 家の内装、全体的な設計 - どんな室内構造か、部屋は何があるのか~その他
Docker : 部屋or(キッチンも可) - 様々な種類がある、場合によってば独特な空間を持ち合わせている

Vagrantは、設計図を基に自分のPCに仮想環境という「家」を作成するためのツールです。
普通に環境を作ろうとした場合は、どういう階層構造にするか、どんなOSを使うのか…等々、都度細かく設定しなければなりませんが、それらの設定をVagrantfileとしてテキスト形式で保存しておけば、それを元にどんなPCからでも同じような仮想環境を作成できるのです。

Dockerに関してはこのブログでも何度か説明されていますが、今回の場合では、Vagrantから作成された「家」の中に作られた部屋*1というイメージで説明します。
それぞれ作られたコンテナの中にはそれぞれ単独で機能する仕組みがあり、例えばそれがWebサーバならWebにアクセスできる仕組みがありますし、DBであればデータを保存する仕組みがあります。また、それぞれのコンテナの間にネットワークという通路を作っておけば、複数のサーバを用いるようなWebアプリケーションも簡単に作成できるというわけです。
そして最も便利なのは、このコンテナ自体もVagrantと同じくDockerfileを作成しておくことによって、細かい設定なしにいきなりコンテナを配置することが出来るという点です。

VagrantとDockerで誰でも使える開発環境を構築してみる

では、VargrantとDockerを用いて、実際に開発環境を作成してみましょう。

必要なツールのインストール

まずは必要なソフトとしてVagrantと、仮想環境を作成する際に必要となるVirtualBoxをインストールします。
Dockerは? となるかもしれませんが、DockerをインストールするのはあくまでVagrantで作った仮想環境に対してなので、現時点でのインストールは不要です。

Vagrant by HashiCorp f:id:rs_tukki:20180615104032p:plain

Oracle VM VirtualBox f:id:rs_tukki:20180615104051p:plain

特にこだわりがなければ、最新版でOKです。
画面の指示に従ってインストールしてください。

Vagrantfileの作成、VMの起動

インストールが完了したら、早速仮想環境の元となるVagrantfileを作ってみましょう。
ちなみに今回の手順は、windowsでの操作を前提にしています。予めご了承くださいm(__)m。

まずはコマンドプロンプトを開き、 適当な作業用フォルダを作成します。

mkdir vm\test
cd vm\test

作成したこのフォルダの中にVagratfileを作成していきます。
本来であればvagrant initコマンドでテンプレートをダウンロードするのですが、今回は手軽に環境構築をお試しするためのVagrantfileをサクッと作っておきました。

Vagrant.configure("2") do |config|
 config.vm.box = "CentOS/7"
 config.vm.network :private_network, ip: "192.168.33.10"
 config.vm.provision "docker"
end

Vagrant.configure("2") do |config|...endで囲まれた範囲が、細かい設定を記述する箇所になります。

  • config.vm.box は仮想環境のOSを表します。今回はCentOSを使用します。
  • config.vm.networkは仮想環境のIPアドレスの指定に使用します。実はこれがかなり重要で、これが設定されていないと仮に仮想環境上でWebサーバを立ち上げても、IPアドレスがないのでPC上からアクセスできません。考えてみれば当然のことなのですが…こんな単純なことに3,4日も気づかずつまづいてしまいました…
  • config.vm.provisionで、環境の作成時にインストールするソフトを指定します。今回は前述の通りdockerを使用するので、今のうちに記述しておきます。

これだけ書いて保存したら、あとは仮想環境を作成して接続するだけです。

vagrant up
vagrant ssh

vagrant upでVagratfileを元に仮想環境を起動し、その環境にvagrant sshで接続します。初回はdockerのインストール等もあるので多少時間がかかりますが、気長に待ちましょう。
しかし、気長といってもここに第二のつまづきポイントがあり、何故かVagrantfileは問題なく作成できているはずなのですが、10分経っても20分経っても起動が完了せず、タイムアウトしてしまうことがあります。
調べたところ、どうやらBIOSの設定が邪魔をしているらしく、この設定をこちょこちょして何とか解決。

Dockerイメージの取得

接続が完了すると、ごく一般的なCentOS上でLinuxコマンドを叩けるようになります。
この環境上に、Dockerを使ってコンテナを作っていくわけですが、それには主に2つの方法があります。

  1. Vagrantfileを作成したのと同じフォルダ内に「Dockerfile」を作成してビルドする
  2. dockerHubという、公式で提供されるコンテナの「カタログ」からDockerfileを借りてくる

細かく設定を行いたい場合は1.で行うのもいいですが、今回はとっかかりなので2.の方法で行きましょう。
プロジェクト管理OSSである「redmine」と、そのデータを格納するための「MySQL」を作成してみます。

docker pull sameersbn/redmine:3.3.1
docker pull sameersbn/mysql:latest

dockerHubからイメージを借りてくる際は、docker pullコマンドを使用します。特に細かい設定は必要なく、dockerHubで提供されているイメージ名とバージョンを指定するだけで落とせるので便利。
こちらも時間がかかるので、気長に待ちましょう。

mkdir -p /srv/docker/redmine/mysql
mkdir -p /srv/docker/redmine/redmine

続いて、MySQLredmineのデータを格納するフォルダを作ります。
本来データはコンテナの中に格納されていますが、このフォルダと紐づけを行う(後述)ことで両者を共有することが出来ます。四次元ポケット

これで、コンテナを動かす準備が完了しました。

実行

少し長いですが、以下2つのコマンドを実行してみてください。

docker run --name=mysql-redmine -d --env='DB_NAME=redmine_production' --env='DB_USER=redmine' --env='DB_PASS=redpass' -v /srv/docker/redmine/mysql:/var/lib/mysql sameersbn/mysql:latest  
docker run --name=redmine -d -p 8080:80 --link=mysql-redmine:mysql -v /srv/docker/redmine/redmine:/home/redmine/data sameersbn/redmine:3.3.1

docker runコマンドでコンテナを動かしています。以下、コマンドのオプションについて解説。

  • --name : 起動するコンテナの名前を定義しています。
  • -d : バックグラウンドで動かします。これがないと、一つ動かしている間は何も操作できなくなってしまいます。
  • --env : コンテナで扱う環境変数を設定します。
  • -v : コンテナの中にあるデータ配置のためのフォルダを、仮想環境の特定のフォルダと紐づけます。
  • -p : 起動したコンテナのポート番号と、自分のPC上で操作する時に指定するポート番号を紐づけます。
  • --link : 他のコンテナを指定することで、そのコンテナと連携することが出来ます。

これでPC側からアクセスができるはずなので、http://192.168.33.10:8080にアクセスします。

f:id:rs_tukki:20180615132038p:plain

Redmine使用者には見慣れたTOPページが表示されました!

おわりに

VagrantとDockerを使って環境を構築するやり方を説明いたしました。
正直なところ、結構噛み砕いて説明したつもりでしたがそれでも大分難しいと思います。なんとたったこれだけのことを調べ始めてから記事にするまで約一ヶ月
ただ、当然若手エンジニアにとっては勉強になりますし、何よりどんな環境でも、同じように環境を構築できるのはとても便利だと思います。ぜひ皆さんも試してみてはいかがでしょうか。

参考

acchi-muite-hoi.hatenablog.com

https://qiita.com/hidekuro/items/fc12344d36d996198e96qiita.com

weblabo.oscasierra.net

qiita.com

www.risewill.co.jp


  • エンジニア中途採用サイト
    ラクスでは、エンジニア・デザイナーの中途採用を積極的に行っております!
    ご興味ありましたら是非ご確認をお願いします。
    20210916153018
    https://career-recruit.rakus.co.jp/career_engineer/

  • カジュアル面談お申込みフォーム
    どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。
    以下フォームよりお申込みください。
    forms.gle

  • イベント情報
    会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください! rakus.connpass.com

*1:以下、これを「コンテナ」と呼びます

PHP カンファレンス関西 2018 に登壇します&協賛します

はじめまして!普段業務では Java や Swift を書いていますが、本当は(?) PHP が大好きな @kawanamiyuu です。

今日は PHPer な私にとって嬉しいお知らせです!

お知らせ

関西での PHP の一大イベント、PHP カンファレンス関西に弊社のエンジニアが登壇します。

また、株式会社ラクスはシルバースポンサーとしてイベントに協賛します。

2018.kphpug.jp

登壇内容

タイトル

チャットディーラーの高速開発を支える Laravel

概要

チャットディーラー」は株式会社ラクスが提供する、チャットを活用した Web 接客ツール (SaaS) です。

10 年以上 PHP でノンフレームワークで開発・運用されてきた主力サービス(メールディーラー)の開発チームが、新規に姉妹サービス(チャットディーラー)を立ち上げる際に Laravel を選択をしました。

開発期間半年というスピードが求められる中で、チームが Laravel に抱いた理想と現実、また、Laravel (Blade) と Vue.js の組み合わせにより発生した脆弱性への対応など、Laravel での新規サービス立ち上げの経験を具体的にお伝えします。

最後に

当日は弊社のエンジニア数名もイベント本編および懇親会に参加します。セッションや懇親会を通して、弊社のサービス開発やエンジニアリングについてぜひたくさんお話できればと思います!

Copyright © RAKUS Co., Ltd. All rights reserved.