底辺SE奮闘記

年収300万SEブログ

【Xamarin】プロジェクト埋め込みのhtmlをWebViewに表示する

Xamarin

概要

docs.microsoft.com

こちらの通り作成しても一部うまくいかなかったため、なんとかする。

環境

  • Visual Studio for Mac 8.10.7
  • Xamarin.Essentials 1.6.1
  • Xamarin.Formas 5.0.0.2012

埋め込みファイルの場所

OS 保存場所 ビルドアクション
iOS Resources BundleResource
Android Assets AndroidAsset

下記ソースコードでは、上記保存場所にtest.htmlが保存されているものとします。

ソースコード

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="hoge.MainPage">
    <RelativeLayout>
        <WebView
            x:Name="webview"
            RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
            RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1}"
            >
        </WebView>
    </RelativeLayout>
</ContentPage>

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.IO;
using System.Linq;
using System.Reflection;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace hoge
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();

            WebView webView = this.FindByName<WebView>("webview");

            var source = new UrlWebViewSource();
            source.Url = DependencyService.Get<IBaseUrl>().Get() + "test.html";

            webView.Source = source;
        }
    }
}

パス取得インタフェース/クラス

インタフェース

using System;
namespace hoge
{
    public interface IBaseUrl
    {
        string Get();
    }
}

クラス

iOS
using System;
using Foundation;
using Xamarin.Forms;

[assembly: Dependency(typeof (hoge.iOS.BaseUrl))]
namespace hoge.iOS
{
    public class BaseUrl :IBaseUrl
    {

        public string Get()
        {
            return NSBundle.MainBundle.BundlePath;
        }
    }
}
Android
using System;
using Xamarin.Forms;

[assembly: Dependency (typeof (hoge.Droid.BaseUrl))]
namespace hoge.Droid
{
    public class BaseUrl : IBaseUrl
    {
        public string Get()
        {
            return "file:///android_asset/";
        }
    }
}

【Phaser3.55.2】パーティクルのdepth(z-index)をコントロールする一つのアイデア

Phaser

概要

Phaser3のパーティクルにはdepth(z-index)を操作する方法は基本的にはない。

それをなんとかする。

解法の一つ

シーンを重ねることでコントロール

class ParticleScene extends Phaser.Scene
{
    preload()
    {
        this.load.image(
            'my_particle',
            'img/particle.png'
        );
    }

    create()
    {
        const particles = this.add.particles('my_particle');

        this.emitter = particles.createEmitter({
            scale: { start: 2, end: 0.5 },
            alpha: { start: 1, end: 0 },
            speed: { min: 100, max: 400 },
            lifespan: { min: 200, max: 700 },
        });

        this.emitter.setPosition(-1000,-1000);
        this.emitter.setBlendMode(Phaser.BlendModes.ADD);
    }
}

上記のようなシーンを作成し、

メインのシーンのcreateメソッドの中などで

function create()
{
    //最背面にする場合
    const particleScene =  this.scene.add('ParticleScene', ParticleScene, true, {});

    //createの他の処理

    //最前面にする場合は最下部に書いておく
    const particleScene =  this.scene.add('ParticleScene', ParticleScene, true, {});
}

とする

【MySQL Workbench 8.0】Data Exportを行おうとしてもテーブルが表示されない

Tips

現象

MySQL Workbench 8.0において、「Server」>「Data Export」からテーブルをダンプしようと、DB欄からDBを選択してもテーブル欄に何も表示されない。

（sysデータベースのみテーブルが表示される）

原因

どうやらMySQL Workbench 8系で以前として修正されないバグのようです（2021/07/30現在）。

原因としてはテーブル名に大文字英字があることのようです。

対処

ですので、対処としては下記二点のいずれかになります。

  • テーブル名から大文字英字を除く
  • MySQL Workbenchのバージョンを6系にする

【Phaser3.55.2】四角形を描画する

Phaser

四角形を描画するだけのプログラム

要点

// 第1引数：四角形を描画するエリアの中心X座標
// 第2引数：四角形を描画するエリアの中心Y座標
// 第3引数：四角形の横幅
// 第4引数：四角形の多幅
// 第5引数：色
this.add.rectangle(400, 300, 100, 100, 0xff0000);

出力例

f:id:uma-no-kawa:20210729172432j:plain

ソース全体

<!DOCTYPE html>
<html>
<head>
   <script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.min.js"></script>
</head>
<body>
<script>
   var config = {
       type: Phaser.AUTO,
       width: 800,
       height: 600,
       scene: {
           create: create,
       },
       physics: {
           default: 'arcade',
           arcade: {
               gravity: { y: 0 },
               debug: true
           }
       },
   };

   var game = new Phaser.Game(config);

   function create ()
   {
       this.add.rectangle(400, 300, 100, 100, 0xff0000);
   }
</script>
</body>
</html>

【Phaser3.55.2】三角形を描画する

Phaser

三角形を描画するだけのプログラム

要点

// 第1引数：三角形を描画するエリアの中心X座標
// 第2引数：三角形を描画するエリアの中心Y座標
// 第3引数：点1のX座標
// 第4引数：点1のY座標
// 第5引数：点2のX座標
// 第6引数：点2のY座標
// 第7引数：点3のX座標
// 第8引数：点3のY座標
// 第9引数：色
this.add.triangle(400, 300, 0, 148, 148, 148, 74, 0, 0xff0000);

出力例

f:id:uma-no-kawa:20210729171843j:plain

ソース全体

<!DOCTYPE html>
<html>
<head>
   <script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.min.js"></script>
</head>
<body>
<script>
   var config = {
       type: Phaser.AUTO,
       width: 800,
       height: 600,
       scene: {
           create: create,
       },
       physics: {
           default: 'arcade',
           arcade: {
               gravity: { y: 0 },
               debug: true
           }
       },
   };

   var game = new Phaser.Game(config);

   function create ()
   {
       this.add.triangle(400, 300, 0, 148, 148, 148, 74, 0, 0xff0000);
   }
</script>
</body>
</html>

【Phaser 3.15.1】Rectangleが表示されない

Phaser

表題の通りですが、サンプルにもほぼ同様のコードがあるのですが、下記コードでは何も表示されません。

<!DOCTYPE html>
<html>
<head>
   <script src="https://cdn.jsdelivr.net/npm/phaser@3.15.1/dist/phaser.min.js"></script>
</head>
<body>
<script>
   var config = {
       type: Phaser.AUTO,
       width: 800,
       height: 600,
       scene: {
           preload: preload,
           create: create
       }
   };

   var game = new Phaser.Game(config);

   function preload ()
   {

   }

   function create ()
   {
       var rect = this.add.rectangle(400, 300, 148, 148, 0xff0000);
   }
</script>
</body>
</html>

f:id:uma-no-kawa:20210729115901j:plain 真っ黒で何も表示されません。

現状最新のバージョンでは修正されております。 3系の中でも色々仕様が変わっているようです

下記バージョンに修正すると、上記コードは正常に動作します。

<script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.min.js"></script>

f:id:uma-no-kawa:20210729120056j:plain

赤い写真が表示されました

【Stripe・Laravel Cashier】Stripe\Exception\InvalidRequestException: You cannot set the quantity for metered plans. エラー対処

PHP Laravel Stripe Tips

現象

サブスクリプションプラン購入の下記コードで表題のエラー

$_user->newSubscription("main", $_planId)
    ->create($_paymentMethod);

環境

  • Laravel 5.8
  • Laravel Cashier 10.0

解法

数量を0とする

$_user->newSubscription("main", $_planId)
    ->quantity(0)
    ->create($_paymentMethod);