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

Google Flutter 2.8, the latest version of open source, cross-platform toolkit for building web, mobile, and desktop applications, has been released, with some improvements in mobile performance and better service compatibilities.

Flutter 2.8′ has been released on December 8 including with Flame Modular 2D Game Engine(v1.0), a game engine built on Flutter to be able to create games faster with flutter.

Google said mobile apps built with Flutter 2.8 should be faster and use less memory. The company said it is leveraging its experience with great Google apps such as Google Pay to make Flutter more efficient and provide profiling and optimization better.

It also makes it easy to connect to back-end services like Firebase and Google Cloud. In addition to supporting the production quality of Google Ads, including major camera updates and built-in web plugins.

Furthermore Dart 2.15, a programming language update that offers improved concurrency, improved enums, and optimizations that reduce memory usage by 10%. Also offering capabilities including stateful hot reload. Google also is exploring higher-level abstractions to make it easier for developers to get running faster. 

Flutter is for building cross-platform applications from a single code base. The goal is to change the way applications are created so that mobile, web, desktop, and embedded applications can be developed using a single toolset. The framework currently has 375,000 apps on the Google Play Store, as well as iOS apps available on the Apple App Store.

Yuuma

最近Chart.jsというライブラリーを使って開発してるので、Chart.jsで外側にテキスト表示するには色々な方法があるのを気づきました。

というので、今回はChart PieceLabel を使って円グラフ描く方法をご紹介していきたいと思います。

必要となるパッケージをインポートします。

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://rawgit.com/beaver71/Chart.PieceLabel.js/master/build/Chart.PieceLabel.min.js"></script>

また、円グラフの表示に必要なデータを挿入します。

 var data = {
            datasets: [{
                data: [16,11,16,30],
                backgroundColor: ['#ee7571', '#438067', '#d0dfad', '#b4e1d1'],
                label: '季' ,// for legend
            }],
          labels : ['春','夏','秋','冬'],
        };

データをキャンバスに表示するためには、キャンバスを作成する必要があります。そして、スクリプトファイルを書くためには、canvas-idを取得する必要があります。

    <div class="col-md-6" style="width: 40%; margin-left: 200px;">
        <canvas id="pieChart" class="chart chart-pie"></canvas>
    </div>

 var pieChartCanvas = $("#pieChart");

PieceLabelの設定をoptionsに追加し、typeを「pie」に設定する必要もある

        var pieChart = new Chart(pieChartCanvas, {
        　　type: 'pie', 
        　　data: data,
        　　options: pieOptions 
        });

        var pieOptions = {
          pieceLabel: {
            render: function(d) { 
               return d.label;
           },
           fontColor: '#000',
           position: 'outside',
           arc : true,
           fontSize:35,
            fontFamily: '"Helvetica , "游ゴシック", sans-serif'
        },
        };

外側にラベル表示するには position に　outside と設定する必要があります。FontColor, fontSize, fontFamily も変更したいなら、簡単にできます。

legendを非表示にしたい場合は、displayをfalseにします。

legend: {
   display: false
 },

その結果は:

また、renderにimageを設定して画像を表示することもできます。

render: 'image',
            images: [
                { src: './images/spring.jpeg', width: 65, height: 65 },
                { src: './images/Summer.jpeg', width: 65, height: 65 },
                { src: './images/Autumn.jpeg', width: 65, height: 65 },
                { src: './images/Winter.jpeg', width: 65, height: 65 }
            ]
}

結果は記事の一番上にあります。

最後までお読みいただき、ありがとうございます。この記事を楽しんでいただければ幸いです。

By Ami

今回はPHPでQRコードを生成するためのライブラリ「endroid/qr-code」を紹介したいと思います。

続きを読む

Standard methods for creating Eloquent Models like make(), create(), update, and save(). Laravel includes some other methods are that also really useful for creating and updating Models that I feel don’t get enough attention. So in this article, I’d like to go over some of these additional methods and explain how they might be useful.

1. firstOrNew

The firstOrNew method is really useful for finding the first Model that matches some constraints or making a new one if there isn’t one that matches those constraints.

You can take a piece of code that looks like this:

$user = User::where(‘email,’$request->email)->first();

if($user === null){

$user = new User([ ‘email’ => $request->email ]);

$user->name = $request->name;

$user->save();

}

And turn it into this:

$user = User::firstOrNew( [ ‘email’ => $request->email ] );

$user->name = $request->name;

$user->save();

You may also pass an array of additional attributes to set as the second parameter if no existing Model is found:

$user = User::firstOrNew([‘email’ => request(‘email’)],[‘name’ => request(‘name’)]);

$user->save();

2.firstOrCreate

I recently found the firstOr method while source-diving. The firstOr method retrieves the first Model from a query, or if no matching Model is found, it will call a callback passed. This can be really useful if you need to perform extra steps when creating a user or want to do something other than creating a new user:

$user = User::where(‘email,’$request->email)->firstOr(function(){

$account = Account::create([

return User::create([

‘account_id’ => $account->id,

‘email’ => $request->email

]);

]);

});

3.firstOr

I recently found the firstOr method while source-diving. The firstOr method retrieves the first Model from a query, or if no matching Model is found, it will call a callback passed. This can be really useful if you need to perform extra steps when creating a user or want to do something other than creating a new user:

$user = User::where(‘email,’$request->email)->firstOr(function(){

$account = Account::create([

return User::create([

‘account_id’ => $account->id,

‘email’ => $request->email

]);

]);

});

4.updateOrCreate

The updateOrCreate method attempts to find a Model matching the constraints passed as the first parameter. If a matching Model is found, it will update the match with the attributes passed as the second parameter. If no matching Model is found a new Model will be created with both the constraints passed as the first parameter and the attributes passed as the second parameter.

You can refactor this piece of code:

$user = User::where(‘email,’$request->email)->first();

if($user !== null){

$user->update([‘name’ => $request->name]);

}else{

$user = User::create([

‘email’ => $request->email,

‘name’ => $request->name

]);

}

To this using the updateOrCreate method:

$user = User::updateOrCreate([

‘email’ => $request->email,

‘name’ => $request->name

]);

Tsuki

映画マトリックスの世界を題材にしたUnreal Engine 5 の技術デモ
「The Matrix Awakens: An Unreal Engine 5 Experience」
がPlayStation5とXbox Series X|S向けに12月10日から公開予定のようです。

続きを読む