【Laravel】画像の直アクセスを禁止して、特定の条件を突破した場合のみ画像を表示する方法

Laravel Nginx 新卒エンジニア

こんにちは！Hajimariの新卒エンジニアの稲葉です。
2020年4月1日に新卒エンジニア2期生として入社しました！

普段は、自社プロダクトであるスタートアップ向けマッチングサイト構築パッケージPIECE（https://crowd.itpropartners.com/piece/）の開発や受託開発を行っています！

今回はログインしていない場合に画像の直アクセスを禁止する方法について書いていきます。
htaccessで直アクセスを制限する方法も考えられますが、ログインしている場合は直アクセスの許可するため、Laravel、Nginxで実装していきます。

直アクセス

storage/files配下に設置した画像が、 /storage/files/画像名でアクセスした際に画像が表示されます。
特定の条件を突破した場合のみ表示させたい画像がある場合は、直アクセスを禁止してみてください。
万が一直アクセスをされた際に、画像が表示されるの防ぐことができます。

実装

まずはstorage配下にimagesディレクトリを作成。
今回直リンクを禁止する画像をstorage/images配下に設置します。

画像の設置後、Nginxでlocationの設定をします。 /imagesにアクセスした際、内部リダイレクトされます。

location /images {
    try_files /index.php?$uri /index.php?$query_string;
}


次にルーティングの定義です。
whereメソッドはパラメーターのフォーマットを制約します。
下記ではパラメーター（path）を0文字以上の任意の文字列に制約。

Route::get('/images/{path?}', 'FileAccessController@index')->where(['path' => '.*']);


ルーティングの定義後、traitの作成です。
traitの作成後は必要なメソッドを定義していきます。
作成したtraitは任意のクラスで継承すれば、継承したtraitに定義されているメソッドをそのクラスが利用することができます。

use Illuminate\Support\Facades\Storage;

Trait ImageTrait
{
　　public function getDiskInstance()
   {
       return Storage::disk('local');
   }

　　public function storageExist($fileName)
   {
       return $this->getDiskInstance()->exists($fileName);
   }
}

getDiskInstance()メソッドでは、Storageファサードのdiskメソッドを使用してディスクインスタンスの取得。
storageExist()メソッドでは、existsメソッドを使用してファイルが存在しているか判定します。
存在する場合はtrueを返します。


trait作成後、filesystems.php で local のベースディレクトリがどこになるかを指定します。
今回はstorage/images配下に画像を設置したため、imagesディレクトリを指定。
デフォルトではappディレクトリが指定されています。

'disks' => [

        'local' => [
            'driver' => 'local',
            // 変更前
            // 'root' => storage_path('app'),
            'root' => storage_path('images'),
        ],


最後にコントローラの作成、indexメソッドを定義をします。
先ほど作成したtraitを下記で継承することが可能です。

use トレイト名;

ログインしている場合のみ直リンクを許可します。

class FileAccessController extends Controller
{
    use ImageTrait;

    public function index($path=null, Request $request)
    {
        $exist = $this->storageExist($path);

        if (!$exist) {
            abort(404);
        }

        if(Auth::check()){
            return $this->getDiskInstance()->response($path);
        }else {
            abort(404);
        }
        
    }
}

実装は以上です。


現在は家族の事情もあり、リモートワークを行っています。
内定者インターンから数えると約10ヶ月リモートワークを継続中です。
今後は長期間のリモートワークについても書いていこうと思います。


最後に

Hajimariでは、Laravel、vue.js、Nuxt.jsで開発に挑戦したいエンジニア・デザイナーを絶賛募集中です！

そして、22卒新卒エンジニアのエントリーも心よりお待ちしております！

www.wantedly.com

www.wantedly.com

GAS と Slack App でデータ集計用のボットを作りました

コードレビュー GAS Google スプレッドシート 社内制度 Slack連携 新人育成

こんにちは！株式会社Hajimariの新卒エンジニアの濵田です。

今年の4月に新卒として入社致しました。 普段はGraspyの開発業務を行う傍ら

最近は会社のHPの管理を行ったりしています。 今回はGASとSlack Appで作った「360度レビューくん」がどう動いているのかを紹介します。

※このbotはエンジニアチームの中で走っている施策「360˚ソースコードレビュー」で使うために作成しました。 上記の施策に関しては責任者をされているエンジニアの先輩が解説してくださったこちらの記事でかなり詳しく解説されているのでぜひご一読ください。

bot の概要

slack の特定のチャンネルに配置しておき、メンションをつけてGitHubのプルリクのURLを送ると プルリクについた会話(conversation)を数えてシートに記録します。 また、メンションつけて「データをみたい」とメッセージを送信すると集計された内容が チャンネルに投稿されます。

f:id:hajimari_hamada:20200715092206j:plain 上記の写真ではプルリクのURLをbotにメンションつけて送る事で集計してもらっているシーンです。

今回はこのbotがどのようにして集計して、シートに記録・チャンネルに返信しているのか、ついて書いていきます。

全体的なbotの構成

Botが動く流れとしては以下の通りです。

① Slack でbotにメンションつけてイベント発生 => GASのAPI叩く ② GAS側では届いたURLを元にGitHub API を叩いて会話(今後コメントと表記)を取得。処理してシートに書き出し、レスポンスを返す。 ③ 戻ってきたレスポンスにあるメッセージをbotがチャンネルに投稿する

こちらのbotはGASプログラム(スプレッドシート)、Slack App(bot)を使って動いています。 それぞれ具体的にどのようになっているのか見ていきます。

GAS (スプレッドシート)

GASのプログラムは主に以下のような項目のコードで動いています。

  1. slack との最初の連携をする部分
  2. GitHub API を叩く
  3. 計算処理
  4. シートに書き込む
  5. Slack チャンネルにメッセージを送信

以下で順番に見ていきます。

1. slack との最初の連携をする部分

f:id:hajimari_hamada:20200714155903p:plain
GAS に来たデータを取得する部分です

上記写真の①では、このGASのプログラムに来たデータを取得しています。 後述するSlack 側の設定をしておくと、postData.event.text でメンションつけて送信したメッセージの内容が来ています。 今回は別箇所にプルリクURLだけ切り出す関数を用意してURLのみ使っていますが、 受け取ったメッセージはお好きなようにご利用ください。

そして②では、Slack側から来たデータが、認証用のリクエストだった場合に返してあげる内容を書いています。 このコードでSlack 側の期待したレスポンスが返ってくるかのチェックを通ることができます。 この記事を参考に(というかそのまま)用意しました。

Slack App の設定の部分で改めて説明します。

2. GitHub API を叩く

f:id:hajimari_hamada:20200714155214p:plain
GitHub の API を叩いてレスポンスを返すメソッドです

このメソッドはGitHub のAPIを叩くメソッドで、書いてる通りではあるのですが、 引数に来た GitHub API の url を叩いてレスポンスを返してくれるメソッドです。

今回はGitHubのプルリクについた会話を集計したいので、 引数に入ってくる apiUrl には

https://api.github.com/repos/ { レポジトリ名 }/pulls/{ プルリクの数値(#XXXXみたいに表示されてるやつ) }/comments が入ってきます。

また、今回は会社のレポジトリのプルリク情報を取得しているのでトークンをheaders に指定しています。

PropertiesService.getScriptProperties().getProperty('GITHUB_TOKEN')

上記に関して少し触れておくと、GASには今回のようなトークンなど、ベタ書きは避けたい情報を設定する時 別に置いておける場所があり、それをプロパティストアといいます。

そしてそこに置いておいた情報にアクセスしたりするGASの機能の事をプロパティサービス(ProperiiesService)といい、 上記のコードでは、それを使って予め保管しておいたGitHubのトークンを呼び出しています。

今回は飛んできたプルリクURLをこのメソッドで使えるAPIURLに変換する部分の解説は割愛します。

3. 計算処理

f:id:hajimari_hamada:20200714162009p:plain
そのプルリクにどのメンバーがどれだけコメントしたかを計算するメソッド

上記のメソッドは、そのプルリクについたコメント数をカウントするいくつかのメソッドの中の一つです。 ここではコメントの通り、そのプルリクについたコメントを自分以外の誰が何回したかを算出しています。

引数について解説すると、このGASのプログラムではそもそもエンジニアチームメンバー全員の GitHubの名前とSlack のメンバーID を50音順で配列にして管理しています。 ここではGitHubの名前の配列を受け取っています。

また reviews は上記のGitHub API を叩いた戻りを受け取っています。 reviews にはそのプルリクについた全てのコメントが入っており、それぞれのコメントオブジェクトのuser.loginに入っています。 そして第３引数のuserGithubNameには、このプルリクをチャンネルで共有したメンバーのGitHub 上の名前を受け取っています。

上記のメソッドはそのプルリクに自分以外の人がどれだけコメントしているのかを集計しようとしていますが これらのGitHub の名前を使ってそれを実現しています。

ちなみに reviewCounts は配列で(名前どうにかするべきかも)、後々シートにデータを入れる際の事を考慮して用意しています。 それ専用のメソッドを読んで先にメンバー分の中身が入った配列を用意しています。

4. シートに書き込む

f:id:hajimari_hamada:20200714164605p:plain
今回書き込むシートを取得しています

f:id:hajimari_hamada:20200714164408p:plain
上記のメソッドを使って他のメンバーからもらったコメント数を使ってシートに書いています

1枚目の写真のように SpreadsheetAppクラスのopenByIdメソッドを使って操作したいシートを取得します。 openByIdメソッドではその名の通り、スプレッドシートのIDを渡してやる必要があるのですが、 今回も、先ほど出てきたようにプロパティサービスで、プロパティストアで管理してあるシートIDを取得して渡しています。

2枚目の写真では、 先ほど取得したシートの中で操作の対象にしたい範囲をgetRangeメソッドで指定したいます。(変数 pullRequestInfoRange)

また、シート上の書き込みたいセルを取得するために getCell メソッドを使ってそれぞれ具体的に書き込むセルの絞り込みまでしています。(変数 ~~Cell)

実際にこのプルリクで他のメンバーからもらったコメントの合計を取得するために 先ほどgiveCommentCount関数で集計して戻ってきた各メンバーのコメント数が入った配列をgiveCommentCountSum関数に渡しています。 こうして用意したもらったコメントの合計をothersCommentCellにsetValueメソッドで書き込んでいます。

5. Slack チャンネルにメッセージを送信

f:id:hajimari_hamada:20200714165751p:plain
メッセージ送信用関数の一部

f:id:hajimari_hamada:20200714170029p:plain
処理の結果で返すメッセージを切り替えている部分

最後に処理の結果を知らせるメッセージを対象のSlackチャンネルに返します。 とりあえず、sendMessageという受け取ったメッセージを返す関数を用意し、 処理の結果毎に異なったメッセージを返すようそれぞれのパターンに対してsendMessageを使う関数を用意しています。 2枚目の写真は実際にtry ~ catch でどのメッセージを返す関数を使うか切り分けている部分です。

Slack にメッセージを送るために必要な設定は後ほど説明しますが、 送信したいチャンネルにメッセージを送ることができるURLをまたプロパティサービスで取得しています。

ここまでがGAS で行われている処理の一連の流れです。

Slack App

1. slack app を作成

このページの画面上部のCreate New Appを押す。 名前と入れるworkspace を選ぶダイアログが表示されるので、それぞれ入力し次に進むとひとまずは作成できます。

アイコンや名前等の基本的は情報の設定はお好きにどうぞ。

2. bot の設定
  1. Incoming Webhook を設定

GASプログラムからbotを通じてチャンネルにメッセージを送るためにはIncoming Webhook を設定する必要があります。 Features/Incoming Webhook を選択し、Activate Incoming Webhooks を On にします。

f:id:hajimari_hamada:20200714175356p:plain
Features/Incoming Webhook の選択画面下部

f:id:hajimari_hamada:20200714175842p:plain
Add New Webhook to Workspace 押下後この画面に

そして、画面下部(上記の1枚目の写真)のAdd New Webhook to Workspace を押すと2枚目の写真の画面に遷移します。 追加したい チャンネルを選択し進むと、画面が戻りURLが発行されている事がわかります。

f:id:hajimari_hamada:20200714175903p:plain
追加された専用URL

このURLをGASのプロパティストアに設定して、上記のsendMessage 部分でプロパティサービスを使って取得して使っています。

  1. Event Subscriptions の設定

f:id:hajimari_hamada:20200714180027p:plain
Features/Event Subscriptions をOn にしています

Incoming Webhook と同じように Event Subscriptions の設定も On にします。 Request URL の部分にAPI公開されているGASのプログラムのURLを入力してテストします。 上で用意した通りにしていれば問題なく設定されます。

f:id:hajimari_hamada:20200714180129p:plain
ここでbotに関するイベントを設定することができます

そしてこの写真の部分で、bot に関係するイベントの設定ができます。 今回はbotにメンションをつけるイベントが発生すると、上で設定したURL(GAS)にデータを飛ばしてやりたいので app_mension を選択します。

以上で、今回botを用意したチャンネルでbotにメンションをつけた状態でプルリクのURLをメッセージとして送信すると、 GAS側で飛んできたURLを受け取り・集計しシートに反映・返信までできる部分をそれぞれ解説しました。

具体的にどういう計算をしたりや、どう言った文言(URL等)が来たら処理を行うのかはお好みでカスタマイズしてみてください。

ボットに関しては以上です。

また、僕の開発している Graspy は若手で活躍されている優秀な方々がキャリアアップできるようなプラットフォームを目指して日々成長しておりますので、ぜひ一度ご覧になってみてください(求人も沢山あります！)

graspy.jp

株式会社Hajimariでは、自社開発・受託開発を行っています。
一緒にLaravelやVue.jsを使って開発してくれるエンジニア・デザイナーを絶賛募集しています！

新卒・中途どちらも募集しておりますので、興味のある方は以下の記事をぜひ御覧ください！
みなさまとお会いできるのを心からお待ちしております。

www.wantedly.com

www.wantedly.com

新卒エンジニアがNoCode触って感動した話

新卒エンジニア NoCode サービス開発

自己紹介

はじめまして！株式会社Hajimariでエンジニアを担当している保坂(@michael_progs)と申します。
今年の4月に新卒として入社しました。
普段は大きく分けて次の3つの業務を行っています。

  1. inteeという学生のファーストキャリアをサポートするサービスの開発
  2. ソースコードのリファクタリングを行うプロジェクトのリーダー
  3. リアルカレッジというプログラミングスクールの企画・運用・講師

今回はプログラミングなしで、サービスを作ることが出来るNoCodeについて書いていきます。
(NoCodeはエンジニアから見てもかなり感動するツールでした)

NoCodeとは

読んで字の如く、コードを書かずにサービスを開発できるツールのことです。

例えば何かサービスを作るときに、エンジニアがプログラミングをする必要があると思います。
しかしNoCodeを使えば、プログラミングをせずにサービスを作ることが出来ます！
今回僕も初めてNoCodeを使ってみたのですが、本当に感動しました。こんなにも短時間でクオリティの高いサービスが出来てしまうのかと。。。

ただ現状のNoCodeのツールでは、やはりエンジニアリングの知識が合ったほうがスムーズに開発できるように感じました。
なので、非エンジニアの方がNoCodeを使ってサービスを作るのには、現段階では少しだけハードルが高い気がしました。

しかし本当に革新的なツールなので、今後はNoCodeの需要が伸びていきそうです。NoCodeのこれからが楽しみです。

僕は今回bubbleというサービスを使いました。 bubble を選択した理由は以下の2つです。(気軽に選びました)

  • リアルカレッジ受講生がbubbleを使って、サービスを作ろうとしていたため
  • ネットで検索したときに、bubbleをおすすめしているサイトが多かったため

bubble.io

なぜNoCodeを触ってみようと思ったか

リアルカレッジ受講生が以下のNoCodeハッカソンに出場することになり、僕もその子達を応援したいと思ったからです。 ただ今までNoCodeを一度も触ったことがなかったので、この機会に触ってみようと思い挑戦してみました。

ncc01.nocodecamp.co.jp

NoCode触ってみた

実際にNoCodeを使って、ツイートを投稿出来るサービスを作ってみました。開発にかかった時間は60分くらいで、画面を見ながら直感的にサービスを作ることが出来ました。NoCode本当にすごいです！僕が60分で作ったサービスはこちらになります。

f:id:hosaka555:20200620190217p:plain
NoCodeで作ったツイッター

ツイートを投稿するだけの簡単なサービスですが、サイトのレスポンスも非常に速く、作っていてとても楽しかったです。 慣れてしまえば10分くらいで、同じようなものが出来てしまいそうです。

今回作ったツイートを投稿できるサービスの作り方の手順を簡単に載せておきます。
まずbubbleを開き、NEW APPよりアプリを新規で作成します。

f:id:hosaka555:20200622171320p:plain
NEW APPをクリックしてアプリを作成

次にアプリ名を設定しますが、このアプリ名がサブドメインになるので、他で使われていない名前にする必要があります。

f:id:hosaka555:20200622171346p:plain
アプリネームを設定

早速投稿フォームを作っていきます。(もともとあったエレメント(要素)やコンテナ(ブロック)などは削除しておきました)
左のメニューからInput forms > Inputを選択して、入力フォームを配置します。

f:id:hosaka555:20200622174540p:plain
投稿フォームを配置する

次にボタンを配します。先ほどと同様に左のメニューからVisual elements > Button を選択してボタンを配置します。

f:id:hosaka555:20200622174910p:plain
ボタンを配置する

ボタンの中のedit meをクリックして、投稿に書き換えます。

f:id:hosaka555:20200623093706p:plain
edit meを投稿に書き換え

次にDBにTweetテーブルを作成します。左のメニューから、Data を選択し、New TypeのところにTweetと入れてCreateをクリックします。

f:id:hosaka555:20200623094243p:plain
Tweetテーブルの作成

Tweetテーブルが作成されるので、続いてmessageというツイートを保存するカラムを追加していきます。 Create a new fieldをクリックして、以下画像のように設定します。

f:id:hosaka555:20200623094549p:plain
messageカラムを追加

これでTweetテーブルの作成は完了です！

次に投稿ボタンをクリックしたときにツイートをTweetテーブルに保存するようにしていきます。 左のメニューからWorkflowを選択し、以下画像のようにElements > An element is clickedを選択します。

f:id:hosaka555:20200623094825p:plain
ボタンをクリックしたときのイベントを追加

選択後は以下の画像のような感じになります。

f:id:hosaka555:20200623141849p:plain
選択後の状態

ここで上記画像のWhenをクリックして、出てきたポップアップウィンドウのElementのところに先程追加したボタンを選択します。

f:id:hosaka555:20200623104834p:plain
ElementにButton 投稿を選択

これで投稿ボタンをクリックしたときに何かしらのイベントを実行できるようになります。早速イベントを登録していきます。
Click here to add actionをクリックして、Data > Create a new thingを選択してください。

その後出てきたポップアップウィンドウに以下のように設定してください。

f:id:hosaka555:20200623110416p:plain
ボタンクリック時に登録するデータを設定する

これでツイートを投稿ボタンをクリックしたときに、ツイートをDBに登録できるようになりました！
左のメニューのData > App data > All Tweetsからデータが登録できているか確認できます。

f:id:hosaka555:20200623110723p:plain
ツイートを投稿できているか確認

いよいよ投稿したツイートを表示していきましょう！ (実は投稿したツイートを画面に表示出来ずに40分くらい悩みました。。。)

まず投稿したツイートを表示するボックスを容易します。
左のメニューからContainer > Repeating Groupをクリックして以下画像のように設定してください。

f:id:hosaka555:20200623135532p:plain
ツイートを表示するためのボックスを用意する

次にRepeating Group の上に Text というエレメントを配置して次のように設定します。

f:id:hosaka555:20200623140518p:plain
ツイートを表示するためにTextエレメントを配置

これで右上のPreviewをクリックするとツイートが表示されていると思います！

f:id:hosaka555:20200623141534p:plain
投稿したツイートが表示される

めでたしめでたし

最後に

株式会社Hajimariでは、自社開発・受託開発を行っています。
一緒にLaravelやVue.jsを使って開発してくれるエンジニア・デザイナーを絶賛募集しています！

新卒・中途どちらも募集しておりますので、興味のある方は以下の記事をぜひ御覧ください！
みなさまとお会いできるのを心からお待ちしております。

www.wantedly.com

www.wantedly.com

躓いたところ共有しておきます

f:id:hosaka555:20200620190350p:plain
躓いたところ

その原因は次の2つでした。

  1. データを表示するエレメント(要素)を配置していなかったこと
  2. データ型を間違えていたこと

まず1つ目についてですが、データベースに存在する値を表示するときは、Repeating Group というエレメント(以下画像の赤色部分)を配置するだけで表示できると思いこんでしまっていました。
実際にはRepeating Group の上に Text というエレメント(以下画像の青色部分)を配置する必要がありました。 ここに気づくまでにかなり時間がかかってしまいました。。。

f:id:hosaka555:20200620191250p:plain
データを表示するエレメントを配置していなかった

2つ目がデータ型を間違えていたことです。
最初僕はTweetオブジェクトに存在するmessageというプロパティを表示したかったので、以下画像のようにData sourceを設定してしまっていました。。。

f:id:hosaka555:20200620192312p:plain
データ型を間違えていた

正しくは以下画像のようにData sourceに設定する値の型をType of contentに合わせて、Textエレメント上でTweetオブジェクトのmessageプロパティを表示するように設定することで上手く表示することができました。

f:id:hosaka555:20200620192520p:plain
Data sourceに設定する値の型をType of contentに合わせる

f:id:hosaka555:20200620192822p:plain
TextエレメントにTweetオブジェクトのmessageプロパティを表示するように設定する

でめたしでめたし

WordPressでディスク容量がMAXになりカテゴリが表示されなくなった話

AWS 新卒エンジニア WordPress

wordpress

こんにちは！Hajimariの新卒エンジニアの市川(@shu_chikanne)です。

2020年4月1日に新卒エンジニア2期生としてジョインしました！

普段は、自社プロダクトであるスタートアップ向けマッチングサイト構築パッケージPIECE（https://crowd.itpropartners.com/piece/）の開発や受託開発をしたり、新卒採用関係の業務を行っています！


今回はタイトルにもある通り、WordPressでディスク容量がMAXになったことでカテゴリが表示されなくなった話をしていきたいと思います。

業務の関係上、スクショ等は掲載できないのでご了承ください（＞＜）

今考えても恐ろしい出来事でした・・・

 

 

経緯

発端は6月10日の17時頃。

クライアントから恐ろしい連絡が飛んできました。内容は以下の2つ。

  • ワードプレスのカテゴリーとタグが全てリセットされてしまったこと

  • それに伴いURLが変わってしまったこと このWordPressのサイトは広告の配信先として利用しており、URLが変わることで広告元のURLがデッドリンクになってしまいます。


つまり、「大量の広告のリンク先が表示されず、広告経由の収益が出ない状態」となっていたのです。


同時接続数が100前後のサイトのため、常時100人近くのユーザーがサイトを閲覧していることになります。

そんなサイトのURLがデッドリンクになったと聞いて、本気で冷や汗を書きました。

もういっそのこと、全てを忘れて眠りにつきたい。。。


嘆いていても、原因を見つけて修正しないことにはこの状態は解消されません。


原因調査

ここからはなぜその状態になったのか、原因調査の段階に入ります。

まずはメモリの確認をします。

$ free -m
             total       used       free     shared    buffers     cached
Mem:          7986       4550       3436         37        142        902
-/+ buffers/cache:       3505       4481
Swap:         2047         14       2033

ふむ、問題なし。

先輩エンジニアからディスク容量はどうなの？と聞かれたので、確認してみると、、、

$ df -h
 ファイルシス   サイズ  使用  残り 使用% マウント位置
devtmpfs         3.9G   60K  3.9G    1% /dev
tmpfs            3.9G     0  3.9G    0% /dev/shm
/dev/xvda1        30G   30G   0G   100% /
[ichikawa@ip-172-31-16-13 ~]$

100%！！！ はじめてみた！！！


そう、原因はディスク容量が100%になっていたことでした。

ひとまずAWSコンソール上からディスク容量を増やします。（ちなみに一回増やすと減らせません）

そしてターミナル上で以下のコマンドを叩きます。

$ sudo growpart /dev/xvda1

$ sudo resize2fs /dev/xvda1


確認してみます。

$ df -h
Filesystem      Size  Used Avail Use% Mounted on
devtmpfs        3.9G   60K  3.9G   1% /dev
tmpfs           3.9G     0  3.9G   0% /dev/shm
/dev/xvda1       99G   30G   69G  30% /

しっかり増えてますね。
今回は30G→100Gまでディスク容量を増やしました。

WordPressの管理サイトを確認しに行った所、カテゴリとタグが正常に表示されるようになっていました。
良かった！！！

なぜディスク容量が100%になっていたのか

duコマンドでどのディレクトリの容量が大きいのか確認してみます。

$ du -sh /*
7.0M    /bin
50M /boot
4.0K    /cgroup
60K /dev
11M /etc
408K    /home
93M /lib
21M /lib64
4.0K    /local
16K /lost+found
4.0K    /media
4.0K    /mnt
43M /opt
107M    /root
8.0K    /run
12M /sbin
4.0K    /selinux
4.0K    /srv
2.1G    /swap
1.1G    /swapfile1
0   /sys
8.0K    /tmp
1.3G    /usr
24.9G   /var


なにやらvar配下がとても大きくなっているようです。

var配下も確認してみます。

$ cd /var
$ du -sh ./*
4.0K    ./account
105M    ./cache
124K    ./db
8.0K    ./empty
4.0K    ./games
12K ./kerberos
2.4G    ./lib
4.0K    ./local
16K ./lock
14.8G   ./log
0   ./mail
4.0K    ./nis
4.0K    ./opt
4.0K    ./preserve
132K    ./run
1.8M    ./spool
0   ./swap
4.0K    ./tmp
6.7G    ./www
4.0K    ./yp

logディレクトリがとても大きいことが判明しました。

そしてlogディレクトリを調べていると、Apacheのアクセスログのログローテーションを設定していないことが判明。

（そりゃあディスク容量の大きくなるわ。。。）


ログローテーションの設定をし後日確認してみた所、/var/logディレクトリのディスク容量が14.8G→696Mまで減っていました。

再発防止策として、AWSの構成の見直しやディスク容量・メモリ・CPU等の監視を行っていく予定です。（ここらへんも今後記事にしていきたいと思います！）

最後に

Hajimariでは、Laravel、vue.js、Nuxt.jsで開発に挑戦したいエンジニア・デザイナーを絶賛募集中です！

そして、22卒新卒エンジニアのエントリーも心よりお待ちしております！

www.wantedly.com

www.wantedly.com

Laravel好きが高じてアメリカまで行ってきました！LaraconUSまとめ(一日目)

Laravel カンファレンス

f:id:kumamon_engineer:20190725100354p:plain

 

こんにちわ、ITプロパートナーズのエンジニアのくまモンエンジニア(@miyakey7)です。

Laraconに関する記事を書きたいと思います。多分今年出席した日本人は私しかいなかったような気がします。

Laravelは自分の転職のきっかけになったフレームワークで思い入れがあります。

元々組み込みエンジニアで通信ライブラリとか作っていた私が、去年Laravelが好きでというかLaravelしか知らないような状態からWEBエンジニアになんとか転職し1年以上経ちました。

今年、そして来年と開催されるLaravel jp conferenceもコアスタッフとしてお手伝いさせていただいてます。

conference2020.laravel.jp

 

そんなLaravel好きが高じて、ついには国境を越えてしまいました。

今年の7/24〜25日に開催された laraconUS(https://laracon.us/)に参加するためにNYに行ってきました！

私の目から見たLaraconUSの感想を率直に書いていきたいと思います！

英語力が皆無のため、多分間違ってる所があるかと思います、すいません！

誤りがあればご指摘お願い致します！！

 

入場

まずは朝8:30から入場開始です。

 

 

会場はタイムズスクエア近くのイケイケの場所です！

NYは以前も訪れたことがあり、とても好きな街でした。

今年のLaraconUSがNYと決まった瞬間に行くことを即決しました。

 

PlayStation Theater

 https://www.google.com/maps?q=playstation+theater&um=1&ie=UTF-8&sa=X&ved=0ahUKEwjn_aKw9M7jAhWUX80KHdIBCSMQ_AUIEigC

 

f:id:kumamon_engineer:20190725102557j:plain

ゴリゴリの強面SPに荷物検査をされ、金属探知機を通って、震えながら蛍光色光る地下のフロアへ。

 

中はもう騒然とした雰囲気でおしゃべりで陽気なエンジニアたちが大騒ぎでした。

朝からみんな元気良いな...

 

今回のLaraconは昔の2Dゲームの世界観がテーマのようです。

f:id:kumamon_engineer:20190725102748j:plain


ストⅡもありました👀

こちらはアメリカのスーパーファミコン(スーパーニンテンドー)ですね。

知らない外人と戦って2戦2勝でした。eスポーツイケますね。

f:id:kumamon_engineer:20190725102833j:plain

 

会場に入ると既にかなり埋まってる状態。

座席は自由です。

 

空いてる座席にグッズが置いてありました！

f:id:kumamon_engineer:20190725103719j:plain

中身は意外とシンプルでした。Laraconはあんまりこだわらないのかな？

 

座席はかなり後方でした..出遅れた！

f:id:kumamon_engineer:20190725103545j:plain

会場のwi-fiのパスワードがわからず弱弱のwi-fiモバイルルーター苦戦していたら、公式ツイートでアナウンスが！

 Laravelerなら誰でも胸アツなパスワード「artisan19」に胸が熱くなりましました！

 

午前セッション

ADAM WATHAN

twitter.com

自身が開発しているtailwind CSSについてのセッション

tailwindcss.com

 

f:id:kumamon_engineer:20190725113912j:plain

基本コードを書きながらレイアウトのデモをしまくっていました。

場馴れしてるからなのか余裕で話しながらガンガンコード書いてて凄いな〜と感じました。900人が見てる中でコーディングとか震える。

 

tailwind CSSはとても拡張性があり、容易なレイアウト置き換えが出来たりレスポンシブ対応していたりする便利CSSフレームワークでした。

Laravelと関与する所はbladeの中でも書きやすいよ〜くらいの感じでした。

bladeを適宜コンポーネント化してincludeで呼び出し、パラメータ引数としてクラス設定することで容易に変更出来るよねと。

FREEK VAN DER HERTEN

twitter.com

 

引用はこのツイートにまとまってます

 

観客と和気あいあいとしながら、こちらも基本ライブコーディングをしていたのが印象的。

 アクションをコントローラやモデルに書かず、アクションフォルダ配下に置く。

 

viewに関してはviewModelを使った書き方を説明。

github.com

viewに渡すパラメータを沢山並べるとかもしやってるならば参考にしましょう。

 

続いてbladeの話。blade-xを使えばincludeの書き方を省略できるよと。

確かにそうですね。vueライクな書き方です。

github.com

 

休憩

休憩で一度全員が席を離れます。

そのチャンスを使って前の方に移動しました！

みんな意外と前の方の席にこだわりはなかったみたいで、すんなり座れました。

f:id:kumamon_engineer:20190725115110j:plain

ただ、この前方エアコンがめちゃくちゃ効いていて寒かった。。 

 

BOBBY ELITE BOUWMANN

twitter.com

laravelのデザインパターンの話

speakerdeck.com

・Singleton Pattern

・Observer Pattern

・Bridge Pattern

についてピザとピザ窯を例に話していました。サンプルコードも載っているので

わかりやすいと思います！

 

印象的だったのは最後の方に言っていた

「No silver bullet, learn by doing and trying(銀の弾丸はない、やってみることで学ぶ)」

という部分。

設計に関しては本当にそう感じます。どれだけ向き合ってどれだけプロダクトを落とし込んで適切な設計ができるか。一朝一夕で身につくものではないと感じます。

 

JMAC

twitter.com

 laravelのちょっと気の利いた書き方というセッションでした。

f:id:kumamon_engineer:20190805152851j:plain

結構色んな省略形の話をしていました。

それこそbladeであれば @auth や@guest、@csrfみたいな所やModelリレーションのPivotsやMorphMapの書き方、redirectにwithInput付けるなど。結構基礎的な使い方が多かった印象。

Gateの話がちらっと出たりもしましたが(もう少し丁寧に聞きたかった)、全体的に公式リファレンスにある内容でしたね。

 

ランチタイム

 ランチタイムになると900人が一斉に外に出ます。

人の流れとかガン無視カオス状態です。

ちなみに会場は映画館のシアターとロビーと通路があるだけのイメージなので、

全員が飛び出すととんでもない人の渋滞が発生します。

そんな事は全く気にしません、これがアメリカ。

ランチボックスと飲み物をカウンターで貰いあとは自由に食べてねという形式。

通路に座り込んで食べる人が半分、シアターの中で食べる人が半分ぐらいでした。

なんで中で食べないんだろう？

 

そして配られたランチボックスが完全にアメリカ！

 

午後セッション

KEITH DAMIANI

twitter.com

GraphQLに関するセッションでした

speakerdeck.com

最もスライドが作り込まれたセッションでした。

データの繋がりをニューヨークの地下鉄の路線図を例にして表現し、グラフ理論の歴史を示した上で、どういう時にGraphQLの優位性が発揮されるかについて述べています。


KAYA THOMAS

twitter.com

彼女のセッションはサイドプロジェクトの走らせ方についてでした。

プログラミングの話は一切なく、マインドやマネジメント、ケアの方法、終わらせ方など一連を実体験を元に話をしていました。

 サイドプロジェクトを始めたらちゃんと広めることも大事だよと。


JONATHAN REININK

twitter.com

こちらのコースの作者ですね。みんな大好きEloquentに関するセッションです！

reinink.ca

内容はパフォーマンスチューニングの方法、テクニック、debugbarの数値確認方法などでした。

結果的には

 でした。

まぁ、最終的にこれに至るまでにメモリのサイズを確認したり、クエリの数を確認して少しずつチューニングしていくという手順のデモがこのセッションの有意義な部分だったと思います。そしてEloquentは何も知らないと簡単にN+1などを実装出来てしまうので、しっかりとした知識と結果のクエリをよく確認しようというお話ですね。


JUSTIN JACKSON

twitter.com

今回のLaraconのメインMCをやっていました。めちゃくちゃ話し上手で盛り上げ上手。

それもそのはずで、ポッドキャストの配信者でもあります。

SaaS開発に関するポッドキャストです。

saas.transistor.fm

スライドはこちら！

内容は人生とプログラミングを学ぶことについてでした。結構おちゃらけた感じでMCやってましたがセッションは真面目でした。

https://justinjackson.ca/assets/laracon-2019-compressed.pdf

最初にLaraconの会場にいる参加者の年代を聞いてましたが、圧倒的に30代が多かったです！アメリカのPHPerは30代が多いぞ！(日本はどうなんだ？)

 

「"It's too late for me to learn programming". This emotional baggage held me back.(「プログラミングを学ぶには遅すぎる」という感情が自分を引き留めていた。)」

これはプログラミングだけでなく色んな新しいチャレンジに言えることだと思う。

気にせずに飛び込んでチャレンジすればいい。


TAYLOR OTWELL

twitter.com

遂に出ました、大トリ。CREATOR OF LARAVEL

Laravelの創始者Taylorです。

 セッションは早速Laravel6リリースの公式発表！

ロゴも変わり、会場のボルテージも上がりました！

 ロゴが変わるために、カンファレンスTシャツはこのセッションが終わるまで配られませんでした。途中で帰る人とか気にしないのね...。

 ロゴ及び公式サイトが変わること、8月にリリースされること、ver6からセマンティックバージョニング(semver)というバージョン方式を取るという話がありました。

これでLaravel6の話は終わります。

そう、今回のセッションのメインはLaravel6の発表ではなく、Laravel VaporというLaravel用のサーバーレスデプロイプラットフォームの発表でした。

 

これは去年発表されたNova同様に有料になっております。

元々あったLaravel Forgeという環境管理ツールがあり、その中にあったlaravel-cloudというクラウドサービスと連携していた部分のコードを書き直し、独立進化しAWSと連携したサーバーレスプラットフォームに昇華したイメージでしょうか。

 

ちなみに先日、laravel-cloudは一瞬公開されましたが

 すぐにprivateに戻されましたw

 大丈夫かなw

 

まぁ、Vaporに関してはすぐに使う機会は無さそうという感覚です。

新規で作る際に使うのもありかと思う一方でVaporのコストを足す分の利点が今の所感じれていないという印象。

アプローチの方向性は面白いし今後の進化を期待したいと思います。

 

Vaporの詳細については以下にわかりやすくまとまっています。

mattstauffer.com

 

既に公式サイトも公開されています。

vapor.laravel.com

 

また本セッションは他に先駆けて動画配信もされているので詳細はこちらを参考にしていただければと思います。

youtu.be

 

AFTER PARTY & MINGLING

 そして遂に運命の時が...

Laravelの作者Taylorとの対面！

 

とりあえず記念写真！

 

そこからは緊張の会話タイム...!

 

日本から来た話、日本のカンファレンスのスタッフだよとアピール(初日に着ていたのはLaravel JP conferenceのコアスタッフTシャツ)、内緒の交渉、Laravelの今後について、Vaporの話も少し...短い間でしたが色々と聞けてとても貴重な時間でした。

 

これで完全に満足した私は、懇親会で数人と会話にならない会話をして帰りました。

「日本から来たの？」「何故？」「日本でLaravelはどうなんだい？」などなど、聞き取りやすい質問はサクッと返事出来るのですが、少しでも聞き取れなくなるともうお手上げ状態でした...。

 

ちなみに懇親会も人の配置はガン無視で通路やロビーに突然食べ物や飲み物が置かれたり、スタッフが配り続けたりして立ったままガンガン話すだけでした..アメリカ凄いぜ。

 

次回、二日目編は会場にたどり着くまでにタイムズスクエアで黒人に捕まって60ドル払った話を中心にお送りする予定です😢

 

すいません、上記は事実なのですが、二日目もちゃんと書きます！！

 

Laravel好きは一度お話してみませんか？

www.wantedly.com

 

社内の新制度（Googleのあのルール？？）を使い、社内データのJuliaで統計分析PJ(仮)を1人で勝手にキックオフしてみました

 

f:id:marron-web-engineer:20190704161804p:plain

こんにちは！ITプロパートナーズの新卒エンジニアの栗岡です。

2019年4月1日に新卒2期生、エンジニアとしては1人目のエンジニアとしてジョインしました。

業務では、Larave/Vue.js/JQueryでITプロパートナーズメインサイトの開発と20卒21卒の新卒採用担当をしています！

 

今回は、会社の新ルールAd-vanを使い、社内データの統計分析PJ(仮)を1人で勝手に始めましたというお話を自分を鼓舞する意味を込めてしようと思います。

本当は5月にはキックオフしていた事は秘密です。

 

そもそもAd-vanとは？？

ITプロパートナーズの新しい制度です。

毎週水曜日にそれぞれの社員が考えた「今やりたいこと、今やるべきこと」に 主体的 に取り組んでもらうという制度です。

エンジニアにとっては凄く嬉しい制度で、自社サービスにtypescript導入している社員やR&Dプロジェクトを進めるエンジニア がいます。

今回はこの制度を使い、簡単ではありますがデータ分析に挑戦してみようと思いました。

（専攻が心理系だったことから、統計分析は研究のためにふんわりと使っていた背景もあり、、）

 

やりたい事

主要事業であるITプロパートナーズのデータや20卒採用で取れたデータを統計分析という形で処理し、データを取得し、ただ眺めていただけの状態から、統計的に何が言えるのかまで出せるようにしたい。

そして、いつか統計に強いエンジニアやサイエンティストにジョインして欲しい。

僕自身が統計学に精通しているわけでも、数学がゴリゴリでできるわけではないので、

「取得しているデータを活用する」するための一歩になれば良いというモチベーションで緩くやって行きますw

 

使用ツール・言語

 

言語はぶっちゃけなんでも良かったのですが、データ分析と言えばPython！R！っていうのが何となく嫌で、あまのじゃく精神からJuliaにしました。

 

デモ

今回は試しに、JuliaとJupyter Notebookを使った回帰分析とグラフ表示をファッションサイトをスクレイピングして取得したデータで試しに行いました。

 

今回は、身長が高いモデルさんほどファッションサイトではランキング上位に来るのか？つまり、背が高い人ほど洋服が似合うのか？？を検定しました。

ランキングの順位に対して、身長に因果関係があるのかを判定します。

 

コマンドラインで Jupyter Notebookを起動

 jupyter notebook

 

 あとは以下のようにコードを書き込む。(y=ax+bに当てはめるだけ)

ほぼRの上位互換のようなコードですね。

f:id:marron-web-engineer:20190630171721p:plain

 

ソース実行結果！！！！　　

Coefficients:
             Estimate Std.Error t value Pr(>|t|)
(Intercept)   257.544   90.8531 2.83473   0.0056
height       -1.30983  0.574484   -2.28   0.0248

height 140 150 160 170 180 0 50 100 rank Regression image

 

このように綺麗なグラフと検定結果を簡単に出力してくれました！

実際に表示されるグラフはD3.jsなので、インタラクティブに動かすことができます。

JuliaとJupyter組み合わせバッチリですね！

ソースコード一部省略して実行したので、データ分析が得意な方には目を瞑って頂けると幸いです、、、（すみません、、、）

ちなむと検定結果は、一応身長が高いほどランキングは1位に近くなります、、

 

あまりドキュメントも出回っていない言語であるJuliaですが、これからも勉強しながらこのプロジェクトを成功させられるように頑張ります！

数学も少しは勉強しないと、、

 

このプロジェクトの結果は次回でご報告がきっとできればと思います！！

最後に

ITプロパートナーズでは、Laravel、vue.js、Nuxt.jsで開発に挑戦したいエンジニア・デザイナーを絶賛募集中です！

そして、21卒新卒エンジニアのエントリーも心よりお待ちしております！

www.wantedly.com

 

www.wantedly.com

 

www.wantedly.com