開発スタッフがアプリ関連の最新技術やニュースをご紹介します。

TikTokで有名なByteDance社の子会社のPICOが
昨年10月に発売したVRヘッドセットのPICO4を買ったので触ってみました。

Meta Quest2 と同じようにPCが要らない単体で使える
両目4K解像度とカラーパススルーが売りのヘッドセットです。

無線か有線どちらかでPCに接続することでPCVRヘッドセットとしても
使うことができます。

単体での使用時は、私が以前持っていたHTC Viveと
比べてとても画質が良く感じました。
次に無線でPCに接続して使用した場合は映像をストリーミングしていることが
分かるくらいには画質の低下は感じられましたが、
コントローラーの遅延は特に感じませんでした。

Meta Quest 2を持っていないので比較することはできませんが、
単体で利用するには良い選択肢だと感じました。

水曜担当：Tanaka

Tweet

Heroku is a famous PAAS (Platform as a Service) that makes it very easy for developers to deploy applications in different languages and frameworks.

Heroku is very popular due to its simplicity and ease of use. In minutes, you can go from an app on your computer to an app deployed using a URL that you send to friends and clients. Heroku had a free tier that can be used for learning purposes and non-commercial applications such as personal projects.

However Heroku said

The reason for that decision was due to fraud and abuse of Heroku’s free product plan.

Here are some alternatives that offer a free plan.

• Render
• Railway
• Fly
• Northflank
• Qoddi
• Koyeb

You can also check this list of PAAS with free tiers: https://github.com/ripienaar/free-for-dev#paas

Yuuma

Tweet

Today, I would like to share about 5 PHP application monitoring tools. Let’s take a look.

Sentry.io

Sentry.io was originally for python frameworks. Sentry enables end-to-end observability and collects complete stack traces and offers support for PHP, Laravel and Symfony.

PHP Server Monitor

PHP server monitor is an open-source tool to monitor the performance of PHP servers and websites. It allows for easy cronjob monitoring, email, SMS and Pushover notifications, logs collection and more.

Logtail

Logtail is as structured log management platform based on ClickHouse. It can collect and monitor data in real-time from any PHP application.

New Relic

New Relic monitor and helps with identifying and troubleshooting performance issues. It tracks key transactions, monitors critical metrics, and visualizes everything in dashboards. New Relic’s PHP monitoring promises improved performance, query optimization, and instant observability.

Atatus

Atatus is a tool supporting PHP performance monitoring and error handling. Using the Atatus, we can improve business metrics and optimize the performance of the application. It discovers the longest transactions, the slowest database queries, the slowest network calls and exceptions.

This is all for now. Hope you enjoy that.

By Asahi

Tweet

行を正しく分割する

行は適当に分けないが、長くしすぎないようにする。配列を[]で開き、値をインデントするとうまくいく傾向がある。長い関数のパラメータ値も同様です。他にも、連鎖した呼び出しやクロージャも行を分割するのに適しています。

Bad
// No line split
return $this->request->session()->get($this->config->get('analytics.campaign_session_key'));

// Meaningless line split
return $this->request
  ->session()->get($this->config->get('analytics.campaign_session_key'));

// Good
return $this->request->session()->get(
  $this->config->get('analytics.campaign_session_key')
);

// Closure
new EventCollection($this->events->map(function (Event $event) {
  return new Entries\Event($event->code, $event->pivot->data);
}));

// Array
$this->validate($request, [
  'code' => 'string|required',
  'name' => 'string|required',
]);

ルックアップテーブルを使用する

else if ]ステートメントを繰り返し書く代わりに、配列を使って、持っているキーに基づいて、欲しい値を探します。コードはよりすっきりして読みやすくなり、何か問題が発生したときには理解しやすい例外を見ることができます。中途半端なエッジケースはありません。

// Bad
if ($order->product->option->type === 'pdf') {
    $type = 'book';
} else if ($order->product->option->type === 'epub') {
    $type = 'book';
} else if ($order->product->option->type === 'license') {
    $type = 'license';
} else if ($order->product->option->type === 'artwork') {
    $type = 'creative';
} else if $order->product->option->type === 'song') {
    $type = 'creative';
} else if ($order->product->option->type === 'physical') {
    $type = 'physical';
}

if ($type === 'book') {
    $downloadable = true;
} else if ($type === 'license') {
    $downloadable = true;
} else if $type === 'creative') {
    $downloadable = true;
} else if ($type === 'physical') {
    $downloadable = false;
}

// Good
$type = [
    'pdf'      => 'book',
    'epub'     => 'book',
    'license'  => 'license',
    'artwork'  => 'creative',
    'song'     => 'creative',
    'physical' => 'physical',
][$order->product->option->type];

$downloadable = [
    'book'     => true,
    'license'  => true,
    'creative' => true,
    'physical' => false,
][$type];

可読性を向上させる場合は変数を作成する

複雑な呼び出しから値が得られることもあり、そのような場合は変数を作成すると可読性が向上し、コメントの必要性がなくなります。文脈が重要であり、最終的な目標は読みやすさであることを忘れないでください。

// Bad
Visit::create([
  'url' => $visit->url,
  'referer' => $visit->referer,
  'user_id' => $visit->userId,
  'ip' => $visit->ip,
  'timestamp' => $visit->timestamp,
])->conversion_goals()->attach($conversionData);

// Good
$visit = Visit::create([
  'url'       => $visit->url,
  'referer'   => $visit->referer,
  'user_id'   => $visit->userId,
  'ip'        => $visit->ip,
  'timestamp' => $visit->timestamp,
]);

$visit->conversion_goals()->attach($conversionData);

アクションクラスの作成

一つのアクションのためにクラスを作ることで、物事がきれいになることもあります。モデルは、それに関連するビジネスロジックをカプセル化する必要がありますが、あまり大きくなりすぎるのもよくありません。

// Bad
public function createInvoice(): Invoice
{
  if ($this->invoice()->exists()) {
    throw new OrderAlreadyHasAnInvoice('Order already has an invoice.');
  }

  return DB::transaction(function () use ($order) {
    $invoice = $order->invoice()->create();

    $order->pushStatus(new AwaitingShipping);

    return $invoice;
  });
}

// Good
// Order model
public function createInvoice(): Invoice {
  if ($this->invoice()->exists()) {
    throw new OrderAlreadyHasAnInvoice('Order already has an invoice.');
  }

  return app(CreateInvoiceForOrder::class)($this);
}

// Action class
class CreatelnvoiceForOrder
{
  public function _invoke(Order $order): Invoice
  {
    return DB::transaction(function () use ($order) {
      $invoice = $order->invoice()->create();

      $order->pushStatus(new AwaitingShipping);

      return $invoice;
    });
  }
}

イベント利用

コントローラからイベントへのロジックのオフロードを検討します。例えば、モデルを作成するときです。この利点は、モデルの作成がどこでも（コントローラ、ジョブ、…）同じように動作し、コントローラはDBスキーマの詳細について心配する必要がなくなるということです。

// Bad
// Only works in this place & concerns it with
// details that the model should care about.
if (! isset($data['name'])) {
  $data['name'] = $data['code'];
}

$conversion = Conversion::create($data);

// Good
$conversion = Conversion::create($data);

// Model
class ConversionGoal extends Model
{
  public static function booted()
  {
    static::creating(function (self $model) {
      $model->name ??= $model->code;
    });
  }
}

来週は、クリーンコードに関するより多くのヒントを紹介する予定です。

By Tsuki

Tweet

While writing technical development articles you will often show some code blocks. You can either take a screenshot of your favorite IDE while it shows the code or you can use the simple Medium code formatting by pressing ```. But instead of using any of those two approaches, I would suggest using any or all of the websites presented within this article.

1. GitHub Gists

The main website to create code blocks is GitHub Gists. You can simply go to https://gist.github.com and add your code into the Gist. Also, you can add multiple files to one single Gist and use them independently in your article.

2. carbon.now.sh

This website is really simple. You can log in with your GitHub profile and start creating snippets. Go to and insert your code. It will be automatically saved into your profile and can be accessed by the URL.

As an example,  https://carbon.now.sh/XHGvwhmthQjAZLJAWNoA

The content will look like this in Medium:

3. JSFiddle

JSFiddle is a famous javascript code playground where you can test your HTML, CSS, and JS in the browser.

Additionally, these code blocks can be imported into Medium as an embed. Within Medium you will have one block with a tab menu that can be switched.

I use this fiddle as an example: https://jsfiddle.net/paulknulst/odLg3qu1/

As you can see you can switch between JavaScript, HTML, CSS, and Result. Within Result, you can see the outcome after the three “files” are combined and run by jsfiddle.net.

4. Codepen.io

Codepen is comparable to JSFiddle. You can also add HTML, CSS, and JS and import them into Medium.

I use this as an example: https://codepen.io/paulknulst/pen/NWaXwdW

As you can see you can switch between JavaScript, HTML, CSS, and Result. It looks different from JSFiddle but contains the same information.

5. Codesandbox.io

With Codesandbox.io you are able to create complete sandboxes for your project that will run within the browser.

If you start with this website you can choose a sample sandbox from a list of predefined sandboxes

After you choose your template all needed files will be created and you can change them in the integrated IDE and see the result in an embedded browser window.

I really hope you find this article helpful and can use any of the websites in your development articles.

Tsuki

Tweet