Photoruction Labo 開発合宿@LIFORK大手町 🖥️

こんにちは、Build Web所属の田村です。

何度か記事になっていますが、弊社テクノロジー本部ではPhotoruction Laboという開発イベントを実施しています。

私たちのチーム”fracchi”は主にFlutterを使って何か作ってみよう！をテーマに進めていますが、このたび11月2日(土)に開発合宿に参加しましたのでレポートします！

↓↓↓Photoruction Laboについては、こちらの記事を参考にしてください

kojichu.photoruction.com

なぜ開発合宿に行くことにしたのか

fracchiは2.5名体制となっていて、メンバーは

• 田村 Build Webグループ リーダー
• ヤスィン Build Mobileグループ リーダー
• 田中 CREグループ リーダー ←開発はせずfracchiの面倒を見てくれるマネージャー的存在

となっています。

週あたり4時間程度Laboのために割り当てて進めることにしていますが、そうは言ってもお互いにリーダー職でとても多忙な毎日を送っているため、なかなかLaboのために時間をとることが難しい😓

実際Flutterの開発環境を5月に作成し、その後だいぶ間が空いて8月下旬にやっと最初の実装コミットというスローペース。というか、全く進んでいない・・・。

ここでガツンと進捗を出そうぜ！とマネージャー田中さんがあれこれと計画をしてくれたことがきっかけでした。

VRチームから”淡路島で合宿して楽しかったし良かったよ！”と聞き当初は日光や熱海で計画しましたが、開発に集中することと手軽さに重点をおき都内のコワーキングスペースで開催することになりました。

↓↓↓fracchiの開発合宿、場所はこちら

lifork.jp

https://maps.app.goo.gl/A21t33NVGrc6umRVA

↓↓↓ちなみにVRチームの淡路島合宿の記事

kojichu.photoruction.com

開発合宿の様子

合宿といっても都内コワーキングスペースということで、最初は「いつもの仕事と変わらんだろう🤔」ぐらいに実は思っていましたｗｗ

“ホテルに缶詰”みたいな感じですかね。ペンが進まない作家が編集者につかまって逃げられないように閉じ込められるアレ。

ところが予想に反してこのコワーキングはとても趣があって雰囲気も最高！充実の作業環境！👍️

当初のイメージとはまったく異なり、数カ月分の進捗以上のものをたった一日で生み出すことができました🙌

エンジニアの２人

これから始めるところですね💪

周辺の様子

緑もいっぱいで外の喧騒はまったく気になりませんでした👍️

シェアオフィスの中

インテリアも落ち着いた雰囲気でとてもリラックスして作業に集中することができます👨‍💻

作業スペース①

作業スペース②

作業スペース③

こんな作業スペースもあります

まるでお金持ちの友達の家にお呼ばれしたかのよう

これはこれで気分転換できそう

その他の設備

おいしいコーヒーを淹れることができます☕

作業に必要なものはなんでも揃ってる（モニターやケーブル等も）

打ち合わせもできます

ランチ

霧雨けむるアンニュイな土曜にがんばる私たちのために田中マネージャーが予算取りしてくださいました🍣

遠方への移動費や宿泊代を削減してよかったと思えた瞬間でした🫣

最後に：開発合宿が終わって思うこと

通常の業務の中でLaboのためにうまく時間を取ることができなかったのですが、こういう機会があったことでそれをうまくカバーすることができました🎉

また私はいつもは田舎でリモートワークをしていてそれはそれでメリットもたくさんあるのですが、たまにはオフィスで仕事をしたりチームのメンバーの顔を見たいなぁと思うことがあります。

いつもヤスィンさんとは業務ではグループ間の共有・調整などのやり取りが主となり一緒に作業をすることはほとんど無いのですが、同じ場所で同じ目標に向かって手を動かすことで初めてわかることがたくさんありました。

ランチや徒歩移動のときにはお互いの家族のこと、今まで経験してきたこと、文化の違いなどいろいろ話すことができました👍️

現状、弊社テクノロジー本部はグループ・チームが違うとガクッとコミュニケーション量が減り同じエンジニア職でありながらお互いのことをあまりよくわかっていないということが少なくないです。

Photoruction Laboの目的として個人のスキルアップもありますが、希薄になりつつあるエンジニア間のコミュニケーション機会を増やしてより強い組織にしていくことも大事なことだと思ってます。

合宿ではオフラインで接することで良い体験を得ましたが、今後オンラインでのコミュニケーションにも活かしていけたらと思いました。

小声）そして・・・なんとかゴールに辿り着きたい ←切実🫠

おまけ：今回の出張のおみやげ

東京駅で新幹線に乗る前に買ったサンドクッキーとフィナンシェ🍪

前日のオフィス出勤と合わせて2日間家をほったらかしてしまいましたが、家族にとてもおいしいと喜ばれました👍️

coco-ris.jp

https://maps.app.goo.gl/BvsAiq78BUp2dwjbA

株式会社フォトラクションでは一緒に働く仲間を募集しています

Laravel + Brefで実現するサーバーレスアプリケーション

はじめに

BPOチームの春冨です。

今回は業務でサーバーレスアプリケーションを実装することになり、Brefというツールを使用する予定です。初めて使うツールなので、まずは簡単に試してみました。この記事ではその実践内容を紹介します。

Bref とは

Brefは、LaravelなどのPHPアプリケーションをAWS Lambda上で動作させるためのツールです。通常、LambdaはNode.jsやPython、Java、Goといったランタイムを公式にサポートしていますが、PHPは含まれていません。Brefはこのギャップを埋めるため、独自のPHPランタイムを提供し、PHPアプリケーション（例：Laravelアプリケーション）をAWS Lambda上で実行可能にします。

システム構成

システム構成図

今回作成するシステムの構成図は以下の通りです。

• 静的ファイルはCloudFront経由でS3から取得
• 動的なリクエストはCloudFrontからAPI Gatewayを介してLambdaに送信し、バックエンドで処理

バックエンドはLaravel + Brefで、フロントエンドはReactで実装してビルドしたものをS3に配置するSPAとして構築しました。

実装手順

実装はバックエンドとフロントエンドに分けて進めます。

バックエンド

LaravelでAPIを実装

api.phpに以下のようなコードを追加し、簡単なレスポンスを返すようにしました（Laravel 11を使用）。

<?php

use Illuminate\Support\Facades\Route;

Route::get('/hello', function () {
    return response()->json(['message' => 'Hello World!']);
});

Brefのセットアップ

brefの公式ドキュメントに従い、Serverless FrameworkのインストールやAWSアクセスキーの設定を行います。今回はbrefというプロファイルを作成し、デプロイに使用しました。

Laravelにbrefをインストールし、デプロイ

composerを使ってbrefをインストールします。

composer require bref/bref bref/laravel-bridge --update-with-dependencies

次に、serverless.ymlをコマンドで生成します。

php artisan vendor:publish --tag=serverless-config

デフォルトのserverless.ymlを編集します。

• regionをap-northeast-1に変更
• profileに作成したプロファイル名を追加
• runtimeをphp-83-xxxに変更（Laravel 11にはPHP 8.3が必要なため）

service: laravel

provider:
    name: aws
    # The AWS region in which to deploy (us-east-1 is the default)
    region: ap-northeast-1
    # Environment variables
    environment:
        APP_ENV: production # Or use ${sls:stage} if you want the environment to match the stage
        SESSION_DRIVER: cookie # Change to database if you have set up a database
    profile: bref

package:
    # Files and directories to exclude from deployment
    patterns:
        - '!node_modules/**'
        - '!public/storage'
        - '!resources/assets/**'
        - '!storage/**'
        - '!tests/**'

functions:

    # This function runs the Laravel website/API
    web:
        handler: public/index.php
        runtime: php-83-fpm
        timeout: 28
        events:
            - httpApi: '*'

    # This function lets us run artisan commands in Lambda
    artisan:
        handler: artisan
        runtime: php-83-console
        timeout: 720 # in seconds
        # Uncomment to also run the scheduler every minute
        #events:
        #    - schedule:
        #          rate: rate(1 minute)
        #          input: '"schedule:run"'

plugins:
  - ./vendor/bref/bref

以下のコマンドでデプロイすると、API GatewayとLambdaが作成されます。

serverless deploy

フロントエンド

Reactアプリケーションを作成

npx create-react-app my-app

ReactからLaravelのAPIを呼び出す機能を実装

App.jsに以下のコードを追加し、LaravelのAPIから取得したデータを画面に表示させます。

import React, { useEffect, useState } from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  // useStateを使ってAPIから取得したデータを保存する
  const [apiData, setApiData] = useState(null);

  // useEffectを使ってコンポーネントのマウント時にAPIリクエストを送信
  useEffect(() => {
    // Laravel APIへのリクエストを送信
    fetch('/api/hello')
      .then(response => response.json())  // レスポンスをJSON形式に変換
      .then(data => {
        setApiData(data);  // APIのデータをstateに保存
      })
      .catch(error => {
        console.error('Error fetching data:', error);
      });
  }, []);  // 空の依存配列により、この効果はコンポーネントが初回レンダリングされたときだけ実行される

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
        {/* APIデータが存在する場合に表示 */}
        {apiData && <p>API Response: {apiData.message}</p>}
      </header>
    </div>
  );
}

export default App;

ReactをビルドしてS3に配置

npm run build
aws s3 sync build/ s3://your-bucket-name

CloudFrontの設定

最後に、CloudFrontを作成し、S3とAPI Gatewayをオリジンとして設定します。

/api/*パスパターンでAPI Gatewayに向くようにビヘイビアを設定し、それ以外はS3に向くようにします。

以上で実装が完了です。CloudFrontのURLにアクセスすると、ReactアプリにLaravelのレスポンスが表示されるようになります。

まとめ

今回の記事では、LaravelとBrefを使用してサーバーレスアプリケーションを構築する方法を紹介しました。Brefを利用することで、AWS Lambda上でLaravelを動作させる環境を簡単に構築できることが分かりました。

株式会社フォトラクションでは一緒に働く仲間を募集しています

LambdaからRDSにアクセスができない理由

初めまして！CREとしてエンジニアをやってますkazuです🦌

社内システム自動化プロジェクトのインフラ構成を考えていた際、本番環境のRDSにLambdaからアクセスする必要があり、「とりあえずRDSにLambdaからアクセスさせればいいんだな〜」と思っていたところ、実は簡単にアクセスできるものではないことを知ったので、その時調べたLambdaとRDSの関係についてまとめた記事になります。

※こちらの図は、業務で作成したインフラ構成図とは異なるものです。

そもそも、LambdaからRDSに接続することになったワケ

本プロジェクトは、要件定義から開発まで一貫して担当しているプロジェクトであり、これまで社内で手動でやっていたのものを自動化する事が目的です。最終的にはLambdaからRDSにアクセスをし、本番DBの値を更新する事でその結果をSlackに通知する事を目指しています。

正直なところAWSに関する知識は乏しく、「Lambdaを呼び出して実行すれば、本番DBを更新できるだろう」と考えていました。

しかし、インフラ構成図をもとにフィードバックを受ける中で、LambdaからRDSへのアクセスが簡単ではないことを知り、その理由について疑問が湧いてきたので調べることにしました。

なぜ、LambdaからRDSへ接続ができないのか

• RDSの作成場所がVPC内であること
• VPCに接続するには、同じVPCのプライベートサブネット空間にLambdaを配置する必要がある

RDSの作成場所がVPC内であること

Auroraなどの RDSは、基本的にVPC内のプライベートサブネットに配置されます。これは、セキュリティ面を考慮して、外部から直接アクセスできないようにするためです。パブリックネットワークに露出させないことで、外部からの不正アクセスリスクを低減し、安全性を確保しています。これにより、データベースを社内や関連システムからのみアクセス可能な状態に保つ事ができます。

プライベートサブネットにあるRDSに接続するには

VPC内のプライベートサブネットにある RDSに接続するためには、Lambdaも同じVPCのプライベートサブネット内に配置する必要があります。Lambdaの配置場所は、パブリックサブネットとプライベートサブネットのどちらかを選択する事が可能ですが、RDSとの接続を前提とする場合は、プライベートサブネット内にLambdaを置きます。

Lambdaがインターネットと接続できない

ここで、一つ問題があります。Lambdaをプライベートサブネット内に配置することで、RDSへのアクセスは可能になりましたが、インターネットとの接続ができません。

プライベートサブネット内にあるLambdaが外部のAPIやインターネットリソースにアクセスする必要がある場合、以下のような方法を使ってインターネット接続を実現する事ができます。

NATゲートウェイを使う

NAT（Network Address Translation）ゲートウェイは、プライベートサブネット内のリソースがインターネットに接続できるようにするAWSのサービスです。 NATゲートウェイをパブリックサブネットに配置し、プライベートサブネット内のLambdaからインターネットにリクエストを送ると、そのリクエストはNATゲートウェイを通じてインターネットに出ていきます。これにより、プライベートサブネット内にあるLambdaが安全に外部通信を行えるようになります。

NATゲートウェイは一方向の通信を許可する仕組みであり、インターネットからの直接アクセスはできないため、セキュリティを保ちつつインターネット接続する事が可能です。

まとめ

今回は、LambdaがRDSにアクセスできない理由について解説しました。まだまだAWSについては勉強が必要そうです。

株式会社フォトラクションでは一緒に働く仲間を募集しています

laravel 11 でauth0 を使ったユーザー認証を実装

はじめに

はじめまして、BPOチームの春冨です。

今回はLaravel 11 で Auth0 を使用したユーザー認証を実装する手順についての記事になります。

その前に、Auth0 を使用した認証フローについて簡単に説明します。

認証フロー

今回は外部 ID プロバイダーとして Google を使用し、Google アカウントでログインするシナリオを想定しています。

1. ユーザーがシステムにログインリクエストを送信
2. システムは Auth0 のログイン画面にユーザーをリダイレクト
3. ユーザーは Auth0 経由で Google に認証情報を送信
4. Google での認証が成功すると、Auth0 がシステムに認証トークンを返す
5. システムはトークンをセッションに保存し、ログイン成功ページを表示

これ以降、システムはセッション内の認証トークンを使用して、ユーザーのログイン状態を確認できます。

auth0を使用したログイン認証フロー

実装手順

ここからは、Laravel プロジェクトに Auth0 を使用した認証を実装する手順を説明します。Auth0 の導入にはauth0/loginライブラリを使用します。バージョンは7.15.0を利用します。

環境

• PHP: 8.2
• laravel: 11.0
• auth0/login: 7.15.0

Auth0 ライブラリの導入と設定ファイルの追加

まず、Composer で Auth0 のライブラリをインストールします。

composer require auth0/login:7.15 --update-with-all-dependencies

以下のコマンドで、config/auth0.php 設定ファイルが作成されます。

php artisan vendor:publish --tag auth0

設定ファイルの詳細はこちらで確認できます。

Auth0 CLI を使ってアプリケーションを登録

Auth0 CLI を使用してアプリケーションを登録します。

ダッシュボードから手動で登録することも可能です。

まず、Auth0 にログインします。

auth0 login

続いて、アプリケーションを作成します。

auth0 apps create \
  --name "My Laravel Application" \
  --type "regular" \
  --auth-method "post" \
  --callbacks "http://localhost:8000/callback" \
  --logout-urls "http://localhost:8000" \
  --reveal-secrets \
  --no-input

次に、API を登録します。

auth0 apis create \
  --name "My Laravel Application API" \
  --identifier "https://github.com/auth0/laravel-auth0" \
  --offline-access \
  --no-input

.env ファイルに必要な値を設定

Auth0 のダッシュボードで作成したアプリケーションと API の情報を確認し、以下の値を .env ファイルに記載します。

# Auth0 ドメイン (例: tenant.region.auth0.com)
AUTH0_DOMAIN=...

# クライアントID
AUTH0_CLIENT_ID=...

# クライアントシークレット
AUTH0_CLIENT_SECRET=...

# API の識別子
AUTH0_AUDIENCE=...

認証フローの動作確認

実装が完了したら、ログイン URL（デフォルトでは /login）にアクセスし、Google アカウントを使った認証画面が表示されることを確認します。

auth0の認証画面

まとめ

今回、Laravel 11 で Auth0 を使用したユーザー認証を実装しました。

Auth0 を使うことで簡単に外部プロバイダーを介した認証を導入でき、柔軟かつ安全な認証フローを実現できます。

株式会社フォトラクションでは一緒に働く仲間を募集しています

DroidKaigi2024にゴールドスポンサーとして参加しました。

Androidエンジニアの斎藤です。

昨年に引き続きDroidKaigiのゴールドスポンサーとして参加しました。

昨年参加した記事はこちら

kojichu.photoruction.com

引き続きと言いましたが私自身2024年に入社しましたので、初めての出展スタッフとして感じたことを執筆します。

Droidkaigiについて

まず、イベントの盛況具合に驚かされました。個人的に最後にオフラインで参加したのが2019年(?)だったと記憶しているのですが、その時以上に参加者の人数が多く出展ブースも増えたように感じます。

それ以上に熱気があるというか。Android熱がある人たちがこんなにもいるんだと思わされました。搬入についての思いを馳せざるを得ません。

HONDAブースにあった実車

HONDAのバイク

出展ブースの雰囲気

出展ブースをまわるスタンプラリーのおかげか多くの人に来ていただきました。

セッション中は一人で回せるくらいでしたが、セッションがない時間は一人で回らないくらい盛況でした。

ノベルティもいくつか用意しましたが、トートバッグは多くの人に褒めていただけました。

同じデザインのアロハシャツをチーム全員で着て参加しましたが同じく好評でした！

大盛況！！！

ノリノリなモバイルチームリーダー🕺

定番のアサイードリンクノベルティ🍇

好評だったノベルティバック✨

気になったセッション

いくつか気になったセッションがあったのですが、スタッフの兼ね合いもあって今回は1つだけ見ることができました。

• オフライン・ファーストなアプリの実例： ガーナの農家アプリ
  • セッション内ではローカルDBにWriteするテーブルとReadするテーブルを分ける実装を紹介していました。フォトラクションもオフライン・ファーストなアプリで、同様の実装をしているので安心しました。
  • セッション内で遅延同期の方法としてWorkManagerを紹介していましたが、フォトラクションではまだ導入できていないので、早いところ導入したいと思いました。

そのほか気になってはいたが見ることができなかったセッションです。残念 😢

• いまから追い上げる、Jetpack Composeトレーニング
  • フォトラクションでは Jetpack Compose はまだ1部だけに導入され、今後段階的に導入していこうという導入計画を企て中です。そういう意味で見れたらいいなというセッションでした。
• PDF Viewer作成の今までとこれから ~ Android 15で進化したPdfRenderer~
  • フォトラクションでは PDF Viewer をサードパーティ製のライブラリに依存しているため、この依存脱却のため代替手段を模索している最中のホットなトピックでした。

次回に向けて

出展スタッフとしては初めてだったので要領がわからなかった部分が多いのですが、次回はもう少し改善できるかもと感じたところです。

• セッション参加は融通が効きそう。
  • 出展スタッフの負荷を多く見積りすぎてブースに張り付いてしまいましたが、うまく調整すればセッション参加は今回以上にできそうです。
• アンケートボードをもう少しリッチにしたい。
  • アンケート記入から技術的な会話が始まることがあり、現場のリアルな声を聞く貴重な機会があったのでこれ自体は良かったです。ただ、簡易的なホワイトボード+付箋は他ブースに見劣りしていたと感じたので改善したいですね。
• Android Developerの熱気で汗が止まらないので扇風機を持参したい。
  • 一方セッションルームはひんやりしていたので寒暖差には気をつけたい。
• トークスクリプトをブラッシュアップしたい。
  • サービスの説明をするのに必死だったこともあり、サービス自体の魅力やその開発に携わる魅力みたいなプラスアルファを十分伝えることができなかった気がする。

株式会社フォトラクションでは一緒に働く仲間を募集しています

Photoruction Labo 開発合宿 in 淡路島🏝️

はじめまして、CREチーム所属のトヨカズです🦌

今回はなんと、Photoruction Labo 初の開発合宿に行って参りました✨

開発合宿を開催することになった経緯から当日の様子までをお伝えしていきます！

Photoruction Laboについて気になる方は、こちらの記事を参考にしてください↓↓↓

kojichu.photoruction.com

開発合宿を企画した背景

Photoruction Laboは4月からスタートし、4ヶ月が経ちましたが、どのチームも停滞期にあり、思うように進捗が進んでいないことが課題にあがりました。

このような状況を打開し、チームの生産性やモチベーションを向上させつつチームビルディングも行えるような企画を考えた結果、開発合宿を行なってみようということになりました。

重視した点としては以下になります。

• ある程度まとまった開発時間を確保する必要がある
• チームビルディング
  • チームの人との交流の場を作る
  • コミュニケーションの活性化
  • 同じ体験をすることで、チームメンバーの関係性を深める

これはどのチームも課題に感じていることですが、通常の業務では開発やMTGなど他のタスクにリソースを取られてしまい、Laboの開発に集中して取り組める時間が少ない事が課題となっていました。

取れる時間が少ないこともあり、チームメンバーとのコミュニケーションも業務的になってしまい、メンバーの人となりを知る機会が少なくなってしまったのも課題感としてあげられます。

プロダクトの完成を目指して欲しいものの、メンバー同士の人となりを知り、チームとしての一体感を高める事もPhotoruction Laboには込められているので、進捗同様に解消したい課題です。

以上の背景から、チーム全体の成長とプロジェクトの進捗を促進することを目的とする開発合宿を企画しました。

開発合宿の様子

今回開発合宿を実施したチームは、僕も所属するVRチームです🕺

僕以外のメンバーは地方に住んでいるため、場所決めもなかなか苦労しました💦

最終的には、みんなの移動時間が同じくらいの場所かつ普段行かないような土地に行こうということで「淡路島」に決定しました！！！

新神戸駅散策

当日は、目が覚めるのが早く5時くらいには起きてしまったので、とりあえず新神戸駅に早めに到着🚅

メンバーの一人と合流し、バスの時間までまだ余裕があるという事で、新神戸駅の裏の山にあるロープウェーに乗ることに…

神戸の街並み

びっくりするくらい晴れていた

宿に到着✨

Airbnbで借りたのですが、謎の大きな壺があったり、バルコニーがあったり、とても素敵なお家でした！

この壺はいくらするんだろう...

BBQのセットもあった

せっかく淡路島に来たから少しだけ海を見に行こうということで、ちょっとだけ寄り道🏃‍♂️

都内にいると、中々海に行く事もないので、少しだけ夏を満喫しました👏

水遊びをするはるっち

夏を満喫したところで、いざ開発へ！

Wifi繋げて、よしやるぞ！とみんながやる気になっていたところで…

まさかのハプニング‼️

部屋に付いてるWifiが、まさかのモバイルルーター！！！

そして、すでにデータ容量制限がかかっているという…泣

予約詳細にもモバイルルーターの記述はなかったので、事前に確認をしておくべきでした😵

ネットを繋げる人はIphoneを親機にして、ネットに繋げない人はBlenderなどを使用してローカル環境のみで作業を進めました。

Blenderの学習は基本、youtubeで各オブジェクト（机や椅子、窓など）の作り方を学んでいるため、モバイルを見ながら作業するのは少し不便ではありました💦

作業も一区切りついたところで、ご飯の時間です！

宿には、BBQセットがついていたので、夕食はBBQにしよう！ということになりました🍖

ここでもチームワークを発揮です！！！

食事担当、皿洗い担当、片付け担当という具合に自然に分担されていて、気づいたら僕は食事担当をこなしていました笑

優しい眼差しで見守られる様子

エモい

めっちゃいい感じ✨

BBQは意外にもチームビルディングの絶好の機会でした。各メンバーが、自分にできることを考え、率先して行動したことで、作業が驚くほど効率的に進みました。特に、片付けの際にはお互いが自然と協力し合い、短時間でスムーズに完了させることができました！（プレートを洗うのは大変にも関わらず、はるっちが率先して片付けをしてくれました👏）

途中睡魔に襲われていた筆者

2日目は、少しだけ開発を進めて宿泊先を元に戻す任務が最後に課せられていたので、きれいに後片付けをして帰宅しました🚗

後日談ですが、ホストの方にびっくりされるほど綺麗にしていたみたいです笑

感想

普段、顔を合わせて開発する事のない3人ですが、一緒の空間で作業をしているとお互いにわからないところを教えあったり、調べたものを共有したり、普段の開発に使用しているツールを教えたり、カジュアルにコミュニケーションを取る事ができるのは、オフライン最大のメリットだと思いました！

また、開発以外の場面でも常にチームで生活をしているため、お互いに気遣いながら自分にできることを考え、役割をこなしていたのは本当に素晴らしかったと思います✨

共同生活だからこそ見えてくる個性があると思うので、今後もこのようなイベントを開催できるように頑張りたいです💪

株式会社フォトラクションでは一緒に働く仲間を募集しています

Photoruction Labo完全ガイド：1年を駆け抜けるプロジェクトの裏側

はじめまして、CREチーム所属のトヨカズです🦌

Photoruction Laboに関する記事もこれで3本目となりますが、今回は運営チームに焦点を当てた記事をお届けします。

前回の記事では、Photoruction Laboを企画した経緯について説明しましたが、今回は具体的に「どうやって進めているのか」や「どんなことを意識してイベントを運営しているのか」など、企画の裏側について詳しくお伝えします！

kojichu.photoruction.com

イベントの進行と初期段階の取り組み

初期段階

Photoruction Laboという企画を練っている段階で、単発のイベントではチーム間のコミュニケーションを活発にするのが難しいと感じました。そのため、中長期的にプロダクト作りに取り組むことで技術力の向上を図りつつ、チームメンバー同士の関係を深めることを目的に、1年というスパンを設定しました！

1年後には、期の締めくくりとして総会を行い、そこで成果物を発表します。この総会がPhotoruction Laboの最終ゴールとなります。

弊社では、1年の振り返りを行う総会と半期を振り返る総会があるため、途中経過の発表も行いながら、社内のに進捗状況を共有する機会を設ける計画です。

ゴールを設定することで逆算ができるため、クォーターごとにLaboのフェーズを分け、それぞれのフェーズでどこまで進んでいるべきかを計画しました。

一部抜粋

実際に発表したものとしてはこんな感じ↓↓↓

フェーズごとに運営と参加者のやることを可視化することで、運営同士の進行に関する共通認識を作り、それを参加者にも共有するように心がけていました。これにより、イベントの解像度を上げ、進行がスムーズに進むよう努めました。

イベント開始後

最初の1~2ヶ月で、意識していたこととしては、とにかくイベントを軌道に乗せる事でした。何事も始まりが肝心なので、ここでやっていたことをいくつか紹介します。

• 各チームのslackチャンネル作成
• チームが結成された時にやることリストを作成

運営で決めた規格がこちら

• Photoruction Labo用のnotionページを作成
• 各チームのMTGに、運営が参加する or メンバーとして参加
• 社内LT会とのコラボ企画を実施

ざっくりこんな感じだったと思います。特に効果があった取り組みとしては、社内LT会とのコラボ企画でした。

参加者以外の人にどんな企画なのかどんなプロダクトを作っているのかを知ってもらうことで、ユーザーになるであろう社内の人の反応をもらえたり、プロダクト作りのモチベーションを高めるきっかけを作ることができました。

kojichu.photoruction.com

また、各チームのMTGに運営が参加するというのも、割と効果が大きかったと思います。運営が参加することで、プロダクト作りの進捗具合やメンバーのモチベーションの方向性を正確に把握することができ、これにより、課題に対して迅速かつ適切に対応でき、プロジェクトを軌道に乗せるための調整がスムーズに行えました。

具体的には、以下の点が大きな成果を上げました

1. モチベーションの維持：メンバーのモチベーションを直接観察することで、適切なフィードバックやサポートを提供し、メンバーのやる気を維持することができた。
2. コミュニケーションの円滑化：運営が直接参加することで、チーム内のコミュニケーションを活性化し、メンバー間の連携を強化した。

これらの取り組みが、初期段階における軌道に乗せるための要素になりました。

自主的にイベントに参加してもらう施策

イベント運営において、強制的に参加を促すとエンゲージメントが低下し、イベントの質自体も悪化する傾向があります。そこで、弊社では参加者を募集する際に以下の取り組みを提案しました。

• 参加自体を任意にする：メンバーが自分の意思で参加できるようにしました。
• 興味がありそうな技術を事前にヒアリングし、候補として提示：参加者が興味を持てる技術やテーマを選定するため、事前にヒアリングを行いました。
• 今後のエンジニア人生にどんなプラスがあるのかを明示：参加することで得られるメリットや成長機会を明示しました。

メンバーを募る際に最も重要なことは、参加者が自分の意思で参加することです。

誰かに言われて参加するイベントは、自分の意思ではないため、不平不満が出やすくなります。その結果、イベントの質自体も低下してしまいます。こうした事態を避けるために、弊社では参加者の自主性を尊重し、自由意志での参加を推奨しました。

イベントの持続性を保つための工夫

イベントの持続性を保つために、運営側で気をつけてたこととしては、「参加者のモチベーションの維持」です。

自分もVRチームに参加しているので実感しているのですが、1年という長期間があるとどうしても怠けがちになってしまいます。そのため、Photoruction Laboでは総会などの発表以外に、いくつかのコンテンツを設けることにしました。

• 社内LT会コラボ
• Photoruction Labo 開発合宿
• Photoruction Labo オンライン飲み会

ここでは、多くの企業でも実施されているオンライン飲み会ではなく、開発合宿に焦点を絞ってお話しさせていただきます。

Photoruction Labo 開発合宿

このコンテンツには、メンバー同士が普段顔を合わせて話す機会が少ない（フルリモート参加者が多い）ため、同じ場所で一緒に開発作業を行うことで、以下の2つを達成する目的があります。

1. プロダクト作りの進捗向上：

   • 一緒に開発することで、迅速な問題解決やアイデアの共有が可能になり、プロジェクトの進行を加速させる。

2. コミュニケーションの強化：

   • 直接対面することで、普段のテキストベースのやり取りでは難しい細かいニュアンスの共有ができ、信頼関係やチームワークが深まる。
   • これにより、今後の開発プロジェクトにおける生産性が向上し、より効率的なチーム運営が期待できること。

今回の合宿から良い成果を得る事ができれば、今後開発組織の取り組みの一環としても、活用できそうだと考えています。まだ開発合宿の案は、具体的な部分が固まっていませんが、今後実施された際に、改めて記事にする予定です！

まとめ

各チームプロダクト作りも順調で、イベントを軌道に乗せるところはクリアできたと思います！あとは、中間報告会までにどのくらい進捗を進める事ができるかだと思うので、メンバー共々引き続き頑張っていこうと思います💪

株式会社フォトラクションでは一緒に働く仲間を募集しています