スタイル・エッジLABO技術ブログ

士業集客支援/コンサルティングのスタイル・エッジグループ スタイル・エッジLABOのエンジニアによるブログです。

ブラウザ操作を「脚本家」に任せてみよう

はじめに

お初にお目にかかります。スタイル・エッジLABOの┣(読み: てぃー or てー)と申します。
今年からこちらにお世話になり、やっとのことDockerやLaravel等に慣れてきて、ただいまこうなっております↓

f:id:styleedge_tech:20200311075644j:plain
寝落ちカバ by フリー素材ぱくたそ(www.pakutaso.com)


ですが今回はそれらではなく、つい最近知ったブラウザテストツール「Playwright」について書き留めます。

Playwright #とは

前述のとおり、マイクロソフトが開発した「ブラウザ操作を自動化するためのNodeライブラリ」です。
ブラウザテストツールをご存じの方であれば「Puppeteerに近いもの」……という表現の方がわかりやすいかもしれません。
(そもそも「元Puppeteerの開発チームが開発した」とのことです)

Playwrightの利点

というわけで使用方法も内部的な構造もPuppeteerがベースになっているように見受けられますが、
Playwrightは下記のように「クロスブラウザ対応が容易」と感じました。
Webkitのパッケージ依存解決が大変すぎて心が折れました・・・

  • 標準でクロスブラウザ対応している
  • ブラウザを切り替えやすい
    • Puppeteer・・・モジュールごと切り替える

      const puppeteer = require('puppeteer');
      const pptrFirefox = require('puppeteer-firefox');
      
      (async () => {
        for (const pptr in [puppeteer, pptrFirefox]) {
          const browser = await pptr.launch();
          // 省略
        }
      })();
      


    • Playwright・・・パラメータ指定で切り替える

      const playwright = require('playwright');
      
      (async () => {
        for (const browserType of ['chromium', 'firefox']) {
          const browser = await playwright[browserType].launch();
          // 省略
        }
      })();
      


概要は以上です。
以下、学習用に実際にやってみた内容となります。

実際にやってみた

お題

今日のニュースをGoogle検索し、1ページ目の内容をCSVにまとめる

前提
  1. Docker for Windows(Docker Desktop 2.1.0.5) を使用する想定です。
    他の環境では未検証のためご了承ください。
  2. ゲストOSは┣がDebian系のディストリビュージョンに不得手なため、CentOSとさせて頂きます。
  3. 主な流れはコメントとして記載致しますが、各メソッドの挙動等につきましては特に触れません。
事前準備

  • docker-compose.yml

    version: "3.3"
    
    services:
        playwright-sample:
            container_name: playwright-sample
            build: .
            tty: true
            volumes:
                - .:/src
    


  • Dockerfile

    # 最新版のブラウザが動作しなくなるので常に最新イメージとする
    FROM centos:latest
    LABEL  maintainer "├"
    
    # 各種パッケージ インストール本体
    RUN curl -sL https://rpm.nodesource.com/setup_12.x | bash \
        && dnf install -y \
            # Node.js、日本語対応に必要なパッケージ
            nodejs-12.14.1-1nodesource.x86_64 glibc-locale-source \
            glibc-langpack-en glibc-langpack-ja wget unzip fontconfig \
            # ブラウザの動作に必要なパッケージ
            libX11 libXcomposite libXcursor libXdamage libXext \
            libXi libXtst cups-libs libXScrnSaver libXrandr \
            alsa-lib pango atk at-spi2-atk gtk3 \
            firefox \
        && rm -rf /var/cache/dnf/* \
        && dnf clean all
    
    # playwright インストール
    RUN npm i --no-save playwright
    
    # 日本語対応・・・キャプチャを取得する場合は必須
    # (最新版のCentOSはdnf installできない模様、今回はキャプチャを取得しないためコメントアウト)
    # RUN localedef -f UTF-8 -i ja_JP ja_JP.UTF-8
    # ENV LANG="ja_JP.UTF-8" \
    #     LANGUAGE="ja_JP:ja" \
    #     LC_ALL="ja_JP.UTF-8"
    # RUN wget https://ipafont.ipa.go.jp/IPAfont/IPAfont00303.zip \
    #     && unzip IPAfont00303.zip \
    #     && mv IPAfont00303 ipafont \
    #     && rm -f ipafont/*.txt \
    #     && cp -r ipafont/ /usr/share/fonts/  \
    #     && fc-cache -f \
    #     && rm -rf ipafont IPAfont00303.zip
    
    # 作業ディレクトリ
    WORKDIR /src


スクリプト本体

  • example.js

    // ブラウザの種類とオプション
    const browsers = {
        chromium: {
            args: [
                // root権限で実行するために付与
                '--no-sandbox',
                '--disable-setuid-sandbox',
            ]
        },
        // firefox: {},     // firefoxで実行する場合はこちら
    };
    
    // 待ち合わせの設定(ドキュメント読み込みまで待つ)
    const waitOption = { waitUntil: 'domcontentloaded' };
    
    // ヘッダ行
    const header = '"タイトル","内容","URL"\r\n';
    
    // 検索ワード
    const word = '今日のニュース';
    
    // playwright 実行
    const playwright = require('playwright');
    const fs = require('fs');
    (async () => {
        for (const browserType in browsers) {
            // 1. ブラウザ起動
            const browser = await playwright[browserType].launch(browsers[browserType]);
            const context = await browser.newContext();
    
            // 2. googleへ遷移
            const page = await context.newPage();
            await page.goto('https://www.google.com/', waitOption);
    
            // 3. 検索
            await page.type('[title="検索"]', word);
            await Promise.all([
                page.keyboard.press('Enter'),
                page.waitForNavigation(waitOption),
            ]);
    
            // 4. ニュースタブを開く
            await Promise.all([
                page.click('[href*="tbm=nws"]'),
                page.waitForNavigation(waitOption),
            ]);
            await page.waitFor(1000);       // ページが描画されるまで適当に待つ
    
            // 5. 検索結果を取得
            const result = await page.$$eval('.ts > div', els => {
                return els.map((el) => {
                    const label = el.querySelector('a');
                    const content = el.querySelector('.st');
                    return `"${label.innerText}","${content.innerText}","${label.href}"`
                }).join('\r\n');
            });
    
            // 6. 検索結果をファイル出力
            fs.writeFileSync(`${word}.csv`, `${header}${result}`);
    
            // 7. 後始末
            await browser.close();
        }
    })();
    


実行手順
  1. 上記3ファイルを用意したフォルダ内でdocker-compose buildを実行してコンテナを作成
    • 「Successfully built」と表示されれば完了です。
  2. docker-compose up -dでコンテナを起動
    • -dをつけなければ起動ログが出るのでデバッグに役立ちます。
  3. docker exec -it playwright-sample bashでコンテナ内に入る
  4. node exampleスクリプトを実行
実行結果(出力ファイル一部分)

f:id:styleedge_tech:20200311075435p:plain

総括
  • サンプルではスクリーンショットもブラウザの切り替えも行っておりませんが、
    これらを併用すればデザインの確認にも一役買ってくれると思います。
  • 関連するものとして、弊社TMがSeleniumに関する記事を上げております。
    こちらも是非ともご覧ください。(リンク)

最後に

ご感想やご指摘等ございましたら後学のためにコメント頂けますと幸いです。


スタイルエッジ・LABOでは一緒に働く仲間を募集しております。
興味をお持ち頂けましたら是非とも下記をクリックしてください↓↓
recruit.styleedge-labo.co.jp

デザインパターンについて勉強してみた!

はじめに

こんにちは。スタイル・エッジLABOのOです。

今回は最近業務でよく関わるデザインパターンについて、自分の勉強もかねてご紹介したいと思います。

1.DTOについて

はじめにDTOについてご紹介します。DTOとは「Data Transfer Object」の略で、デザインパターンの一種です。
デザインパターンとは主にJavaなどのオブジェクト指向言語で使われる設計パターンの事ですね。

DTOはどういうデザインパターンかというと、データの入れ物としてのクラスを作成し、そのクラスにデータを入れて渡す、というパターンです。そのクラスには変数と変数の型を定義します。

実際に使う場合のイメージ図を見てもらうと、わかりやすいかと思います。

f:id:styleedge_tech:20200219131440j:plain
DTOイメージ図


データを受け渡す際に通るトンネルがDTO、というイメージです。

このDTOには何のメリットがあるのでしょうか?下記2点などがあるかと思います。

1.変数と変数の型が定義されたクラスを用意することで、可読性が向上する
2.DTOで型を指定することで、データの整合性を保つ

実際のサンプルコードとしては以下のようになります。

<?php

/**
 * Class TestViewDto
 * データベースから受け取ったデータをControllerからViewへ受け渡す時に使うDto
 */

class TestViewDto
{
    /**
     * @var int ID
     */
    private int $id;

    /**
     * @var string 名前
     */
    private string $name;

    /**
     * @var string 住所
     */
    private string $address;

    /**
     * @var int 電話番号
     */
    private int $tel;

    /**
     * @var string|null 備考
     */
    private ?string $comment = null;

    /**
     * @return int
     */
    public function getId(): int
    {
        return $this->id;
    }

    /**
     * @param int $id
     */
    public function setId(int $id): void
    {
        $this->id = $id;
    }

    /**
     * @return string
     */
    public function getName(): string
    {
        return $this->name;
    }

    /**
     * @param string $name
     */
    public function setName(string $name): void
    {
        $this->name = $name;
    }

    /**
     * @return string
     */
    public function getAddress(): string
    {
        return $this->address;
    }

    /**
     * @param string $address
     */
    public function setAddress(string $address): void
    {
        $this->address = $address;
    }

    /**
     * @return int
     */
    public function getTel(): int
    {
        return $this->tel;
    }

    /**
     * @param int $tel
     */
    public function setTel(int $tel): void
    {
        $this->tel = $tel;
    }

    /**
     * @return string|null
     */
    public function getComment(): ?string
    {
        return $this->comment;
    }

    /**
     * @param string|null $comment
     */
    public function setComment(?string $comment): void
    {
        $this->comment = $comment;
    }

}
?>

本当にシンプルな内容ですね。DTOにはプロパティとgetter/setterしか書きません。
このようなデザインパターンは他にもいくつも存在しています。もう一つ紹介しましょう。

2.Template Methodパターン

今回もう一つ紹介するのはTemplate Methodパターンです。まず、こちらはどういった場合に使用するのかを説明いたします。

下の図のようなクラスがあるとします。

f:id:styleedge_tech:20200219131502j:plain
学生クラス図

学生A、学生B、学生Cの各クラスは以下の順にメソッドを呼んでいきます。

1.朝起きて学校へ行くメソッド
2.学校で授業を受けるメソッド
3.放課後を過ごすメソッド

当然学生により、各々の行動は違います。
例えば学生Aさんは自転車で学校に通いますが、学生Bさんは徒歩、学生Cさんは電車です。
しかし、3人の学生さんは1~3のメソッドを順番に呼んでいく流れは共通です。

このような共通の流れをまとめたい場合にTemplate Methodパターンを使用します。

Template Methodパターンの場合、親クラスで基本的な処理の流れを実装します。
処理の流れで呼ばれる1~3のメソッドを抽象化として宣言します。
親クラスで宣言した抽象メソッドの具体的な処理は学生Aさん、学生Bさん、学生Cさんで実装していきます。

では実際のコードを見ていきましょう。親クラスは以下の通りです。

<?php


namespace App\Http\Controllers;


abstract class StudentController extends Controller
{
    //朝起きて学校へいく
    abstract public function goToSchool();

    //学校で授業を受ける
    abstract public function Study();

    //放課後を過ごす
    abstract public function SpendAfterSchool();

}


続いて子クラス(学生Aさん)です。

<?php


namespace App\Http\Controllers;


class StudentAController extends StudentController
{
    //朝起きて学校へいく
    public function goToSchool()
    {
        return '電車で通学';
    }

    //学校で授業を受ける
    public function Study()
    {
        return '数学・日本史・英語・物理・国語';
    }

    //放課後を過ごす
    public function SpendAfterSchool()
    {
        return '部活動:野球';
    }

    public function index()
    {
        echo $this->goToSchool()."<br />";
        echo $this->Study()."<br />";
        echo $this->SpendAfterSchool();
    }
}

子クラスは親クラスを継承して使います。結果は以下のようになります。

f:id:styleedge_tech:20200219123732j:plain
結果

Template Methodパターンはフレームワークでもよく使われています。
DTOやTemplate Methodのようなデザインパターンを使うメリットはなんでしょうか。
よく言われているのが

1.開発者の共通言語となる
2.コードが読みやすくなる、拡張性が高くなる、メンテナンス性が向上する
3.再利用しやすい

あたりです。多くの人が開発に参加する、人の出入りがある大きいプロジェクトに向いていると思います。

逆にデメリットとしては
1.デザインパターンを知らない場合、共通言語とならない
2.学習コストがかかる。知っているとしても、使ったことがない場合は実際の開発時に時間がかかる

簡単なシステムを作る場合はそこまでデザインパターンにこだわる必要はないかと思います。

デザインパターンは他にもありますので、今後自分でも勉強していきたいです。

最後に

スタイル・エッジLABOでは、一緒に働く仲間を募集しています。 もし興味を持っていただけましたら、ぜひ採用サイトものぞいてみてください!

recruit.styleedge-labo.co.jp

PhpStromに乗り換えてみる

f:id:styleedge_tech:20200110121228j:plain
Photo by Zany Jadraque on Unsplash

はじめに

こんにちは。スタイル・エッジLABOのNです。

さて早速ですが、弊社では希望者にはPhpStormのライセンスを会社負担で支給していただけます。

私はスタイル・エッジLABOへはつい最近転職してきたばかりなのですが、以前いた会社ではそういった制度はなかったものですから、PhpStormを利用しようと思うとで個人利用で初年度は1万円少々かかります。2年後以降も安くはなっていくもののランニングでコストがかかるとなると庶民にはなかなか手が出づらいものでした。

ですが会社のお金で使えるならこれ幸いと私も遅ればせながらPhpStormデビューを果たしてみましたので使ってみたプラグインを5つ紹介させていただこうと思います。

1. IdeaVim

PhpStormのエディタ操作をVimキーバインドにしてくれます。 もともとVimで開発を行っておりましたのでこれがないと始まらぬ、ということで入れました。 Vimの機能を完全再現、とまではさすがにいきませんのである程度割り切りは必要なのですが、十分に使えるのではないでしょうか。

2. Scratch

プロジェクトに依存しないファイルにメモ書きができます。 Vimを使ってるときはちょっとしたメモを新規タブで開いてさっと書いたりしてたのですが、PhpStormではどうするか、、、と思っていたところ見つけました。 便利です。

3. Auto-Align

イコールの位置を調整してくれます。

f:id:styleedge_tech:20200110111821g:plain

4. Emmet

HTMLコードの補完をしてくれます。 >で子ノード、+で兄弟ノード等を表現することで記述の簡略化もすることができます。 いろんなのエディタのプラグインとして提供されてたりしますがPhpStormではデフォルトで利用することができるようです。

f:id:styleedge_tech:20200110111909g:plain

5. Tab Shifter

分割したウィンドウ間の移動や、ウィンドウサイズの変更ができます。 マウスを使わずにこれらの操作をしたかったので導入しました。

f:id:styleedge_tech:20200110120623g:plain

最後に

PhpStormはプラグインの導入もボタンひとつで簡単にできます。 他にもデバッグ機能等、便利な機能を搭載しているようなので、ぜひ活用して自分好みの開発環境に育てていきたいですね。

スタイル・エッジLABOでは、一緒に働く仲間を募集しています。 もし興味を持っていただけましたら、ぜひ採用サイトものぞいてみてください!

株式会社スタイル・エッジLABO採用サイト

Visual Studio Codeをかわいく変身させたい!

f:id:styleedge_tech:20191204163229j:plain
Photo by Bruno Nascimento on Unsplash
はじめまして!スタイル・エッジLABOでインターンをしてます、MJです。

LABOでインターンを始めてはや2か月、ずっと思ってることがありました。
それはVisual Studio Codeをもっとかわいくさせたい、、!」ということ。
みなさまの中にもこんな考えを持った人いらっしゃるのではないでしょうか。

  • 見た目がかわいくないとテンションが上がらない

  • 見た目から入るタイプだ

  • 「カワイイはつくれる」

今回はそんなかわいい信者のエンジニアのために、Visual Studio Codeかわいくカスタマイズさせる方法についてご紹介します!
Visual Studio Codeにはたくさんの配色テーマがあり、その中にもかわいいものはたくさんありますが、わたしは配色テーマをさらにカスタマイズして自分好みのものに変えていきます。

カスタマイズ前

f:id:styleedge_tech:20191212141756p:plain かっこいいけど、もっとかわいさもほしい・・!ということで、まずはかわいい配色テーマを探していきます。

配色テーマのインストール

まず左下の歯車マークから配色テーマを選択します。 f:id:styleedge_tech:20191204123007p:plain

f:id:styleedge_tech:20191204123502p:plain
その他の色のテーマをインストールを選択すると、Marketplaceが表示されるので、その中から自分好みの配色テーマをインストールします。(かなりたくさんあるので、選ぶのも楽しいです!)

わたしは今回"Electron Color Theme"にしました! f:id:styleedge_tech:20191212141642p:plain
カラフルでかわいくなりましたが、タブや文字、カーソルの色などをもう少し変えたいので、ユーザー設定(settings.jsonファイル)から配色テーマを直接編集していきます。

settings.jsonの編集

ファイル > 基本設定 >設定 と進みます。 f:id:styleedge_tech:20191204125056p:plain
ワークベンチの中に、settings.jsonで編集があります。 f:id:styleedge_tech:20191204125541p:plain
それを選択すると、編集画面が表示されるので、直接編集します!

{
      "workbench.colorCustomizations"{
            "設定項目":"値"
   }
}

このように、カラーの設定を変更したい場合は、"workbench.colorCustomizations"の中に書き込みます。(配色以外にも様々な設定を編集することができます)

カラーを設定できる要素の一覧は、リンク先から見ることができます。

Theme Color | Visual Studio Code Extension API

カスタマイズ後

{
  "workbench.colorCustomizations": {
   "editorCursor.foreground": "#eaf4fc" //エディタカーソルの前景色
        "tab.activeBackground": "#88b5d3" //アクティブなタブの背景色
        "tab.activeBorder": "#88b5d3" //アクティブなタブの下罫線
        "activityBar.background": "#8384f5" //アクティビティバーの背景色
        "statusBar.noFolderBackground": "#ffadff" //フォルダーが開かれていないときのステータスバーの背景色
        "statusBar.background": "#ffadff" //標準ステータスバーの背景色
        "statusBar.noFolderForeground": "#ffffff" //フォルダーが開かれていないときのステータスバーの前景色
        "statusBar.foreground": "#ffffff" //標準ステータスバーの前景色
     }
 "editor.tokenColorCustomizations": { //配色テーマの文字カラー設定
        "[Electron]": {
            "comments": "#626063" //コメント
            "strings": "#fdeff2" //文字列
            "functions": "#99ccff" //関数
            "variables": "#ffadd6" //変数
     }
}

設定を変更した後は以下のような見た目になりました。パステルカラーがかわいいです!! f:id:styleedge_tech:20191212141924p:plain
エディタがかわいいとコーディングも捗りそうです!ぜひお試しください。

最後に

スタイル・エッジLABOでは、一緒に働く仲間を募集しています。 もし興味を持っていただけましたら、ぜひ採用サイトものぞいてみてください!

株式会社スタイル・エッジLABO採用サイト

VSCodeを育てよう

こんにちは!スタイル・エッジLABOのぱるです。

私はスタイル・エッジLABOでインターンをしております大学4年生です!

初めての記事作成で緊張していますが、どうか最後までお付き合いくださいorz

私はスタイル・エッジLABOでのインターンが開始して一カ月、
Udemyというオンライン講座を受講しながらHTML5CSS3の勉強をしていました!

全くのプログラミング初心者の私は、
「プログラミングってなんか黒い画面にカラフルな英語が表示されるカッコいいやつ」
というイメージしかもっていなかったため、黒くてカッコいいやつを操作できるのを楽しみにしていました!

f:id:styleedge_tech:20191121174629p:plain
Photo by Florian Olivo on Unsplash
↑黒くてカッコいいやつ


しかし...

動画で講師の方がプログラミングのツールとして紹介されたのは「メモ帳」ではないですか!

動揺を隠しきれない私...

ただ、続いて講師の方がおっしゃったのは、「メモ帳でもコードをかけますが、無料のエディタも豊富ですからどうせならエディタを使って書いてみるといいでしょう」とのこと....

エディタとは何!?というレベルだったのですが、先輩社員におススメのエディタを聞いて取り敢えず「エディタ」なるものをダウンロードしました。

エディタのダウンロードが完了し、さっそくエディタを開いた私が思ったことは、「あの黒くてカッコいいやつだ!」です。

勉強に取り掛かるのにはモチベーションが大事ですが、なんかカッコいいやつで勉強できるというだけで開始早々私のテンションは急上昇!

f:id:styleedge_tech:20191121174245p:plain
Photo by Peter Conlan on Unsplash

そんな感じで私のプログラミングの勉強が始まりました!

※私がダウンロードしたエディタは” Visual Studio Code ”です。
※私はMicrosoftの回し者ではございません。

拡張機能万歳!

ブログを書くのが初めてなもので、前置きが長くなりすみません....

それでは本題に入っていこうと思います!

私が勉強する中で感じたことは、エディタに拡張機能を追加していくとコードを書くのが非常に楽になるということです。 実際に勉強する際に使用したのは3種類の拡張機能ですが、せっかく拡張機能の尊さに味を占めたので、ブログを書くにあたっていくつか拡張機能を試してみました!

ということで今回は [VSCode拡張機能をまとめちゃおう!] というテーマで書いていこうと思います!


拡張機能紹介

まずは、私が勉強中に使用していたエディタのご紹介です!

1、Japanese Language Pack for Visual Studio Code f:id:styleedge_tech:20191119120940p:plain

  →VSCodeを日本語で使用するのにマストの拡張機能です!

   よほど英語に自信があるぜ!という方以外は入れたほうが無難でしょう。

   今回ご紹介する拡張機能の中でも、最もダウンロード数が多かったです。

2、htmltagwrap f:id:styleedge_tech:20191119121152p:plain

  →該当のコードをドラッグして" Alt+W "を入力するだけで自動でPタグで囲まれる拡張機能です!

   Pタグが表示されたのちにそのまま任意のタグを入力すると即書き換え可能ですのでタグを入力する

   手間を省くのにはぜひとも入れておきたいですね!

3、テキスト校正くん f:id:styleedge_tech:20191119121237p:plain

  →なんともかわいらしいネーミングの拡張機能ですね。

   読んで字のごとく、入力した文章を構成してくれる拡張機能です!

   htmlでは文章をたくさん書くと思いますが、長文を入力していると文章の見直しも大変ですよね....

   テキスト校正くんを入れておけば、波線の個所を治すだけでよいので非常に見直しが楽になります!!


他の拡張機能も試してみた!

HTMLとCSSの勉強をする中で拡張機能のすばらしさを知った私は、勉強が一通り落ち着いてから追加でいくつかの拡張機能を試してみました!

1、indent-rainbow

f:id:styleedge_tech:20191119161338p:plain

  →この拡張機能を入れるとエディタを見ていて楽しくなりますね!

   タグが多くなってくると、どのタグとどのタグがセットなのかわかりづらい...なんてこともあるかと

   思います。ただ、indent-rainbowがあれば視覚的に色でセットの括りがわかるのでそんなストレスとも

   おさらばできますね!

2、Bracket Pair Colorizer 2

f:id:styleedge_tech:20191119165212p:plain

  →{ } , ( ) , [ ] ,< > などあらゆる種類の括弧のペアを色ごとに分けて表示してくれます!

   初心者のミスとしてペアが組めていないということが多かったので非常に重宝します!

最後に

前置きと本題のバランスが悪くなってしまいましたが、最後までお付き合いくださり有難うございました!

超駆け出しシステムエンジニアの呟きとして読んでいただけたなら嬉しいです!

次にブログを書く際には成長を感じられるように、駆け出しシステムエンジニアとして頑張っていこうと思います!

f:id:styleedge_tech:20191121175224p:plain
Photo by Stage 7 Photography on Unsplash


スタイル・エッジLABOでは、一緒に働く仲間を募集しています

  もし興味を持っていただけましたら、ぜひ採用サイト↓も覗いてみてください!

recruit.styleedge-labo.co.jp

Laravelのカスタムバリデーションでもパラメータを渡したい!

f:id:styleedge_tech:20191007101412j:plain
フリー写真素材ぱくたそ

こんにちは!スタイル・エッジLABOのやっすんです。

Laravelでバリデーションを実装するとき、 「max:256」のように、呼び出したバリデーションの後ろにコロンでパラメータを渡すことがありますよね。
今日はLaravelのカスタムバリデーションでもこのようなパラメータを渡せるようにする方法をご紹介します。
なお、Laravelのバージョンは5.5、PHPのバージョンは7.1で実装しています。

続きを読む

【ISUCON9】に参加してみた!

こんにちは!
スタイル・エッジLABOのしんちゃんです。

今回、我々スタイル・エッジLABOメンバーは、2019/09/08に開催された
「いい感じにスピードアップコンテスト」、通称ISUCONに参加しました!

ISUCONって何??っていう人のために、、、

「ISUCON」...お題となるWebサービスを、決められたルールの中で
限界まで高速化を図る、LINE株式会社主催のチューニングバトル

そうです!
ISUCONとは、過去の実績など一切関係ない己の知識と経験だけ
勝負を行うガチンコバトルです。

スタイル・エッジLABOメンバーも自身の意地プライドにかけ、
休日にも関わらず参加してきました。

今回の記事では、大会参加の様子を伝えたいと思います。


* いきなり足切り!?序盤で半分以上脱落...?

10時開始ともに全チーム一斉にスタートしました。

が....

webサービスが渡されてこない...?

事前に運営より準備するよう言われていたインスタンスwebサービスが降りてきません。

なんとか我がチームインフラ担当のK氏による機転で、
別のインスタンスを作ることで、運営から、webサービスを受け取り、
スタートラインに立つことができました。

他のチームの反応を見ると、まだほとんどのチームがスタートできておらず、
おそらくこの「魔の足切りで多くのチームが脱落したのでは、、と感じています。

その時に本日の最高順位17位」を叩き出しました(^ ^)

f:id:styleedge_tech:20190909160736j:plain


* そう簡単には行きません... 

なんとかスタートラインに立てたので、皆それぞれの役割に分かれ、取り掛かりました。

序盤の役割としては大きく分けて、「環境構築隊」「コード隊」の二つです。

想定外だったのは、ローカル環境が上手く作れず、
ローカルでwebサービスを動かせなかったことです。

これにより、変更点を加えた場合、いきなりベンチマークを行わければいけません。
これのおかげで結構な手間と時間を食われました...


↓ レンジに行く時間を惜しみ、冷たい弁当を食べるメンバー

f:id:styleedge_tech:20190910085857j:plain


* 当日意識したところ

当日、意識したところは大きく分けて以下の三つです。

SQL文で削れるところはないか
② DBにindexを貼る
③ 画像に圧縮をかけて下ろせないか

③は業務で同じようなところがあったので、奮闘の結果なんとかできました。
①②に関しては、目に付くところは大方出来たのではないかと思います。


* 最終結果は...

何度か落ちてしまい、今年も失格かな、、という場面もありましたが、
なんとか最後まで奮闘でき、失格にはならず終えることができました。

また、台風が来ていたこともあり、16時解散だったため
早めの退散にはなりましたが、できることはやったと思います。

お待ちかねの結果はというと、、、

f:id:styleedge_tech:20190910093257p:plain

277組中132位です✨

後日、スコアが0ではない人の中で順位を見てみると、
下から数えた方が早かった です。。

しかし何にせよ、前回は「失格」だったので、大きな進歩です!w


* まとめ

今回我々は、PHPを選んでやりましたが、
結果を見ると、ほとんどの組みがGoを使っていました。

本戦出場チームにはPHPを使っていたチームも2組いましたので、
我々も努力次第では予選突破できるかもしれない、という夢はあったので、
来年は本戦出場を目指して頑張りたいです🔥


最後に

スタイル・エッジLABOでは、一緒に働く仲間を募集しています。 もし興味を持っていただけましたら、ぜひ採用サイトものぞいてみてください!

株式会社スタイル・エッジLABO採用サイト