最新の UWP コンポーネントでデスクトップ アプリを拡張するExtend your desktop app with modern UWP components

一部の Windows 10 エクスペリエンス (タッチ対応 UI ページなど) は、最新のアプリ コンテナー内で実行する必要があります。Some Windows 10 experiences (For example: a touch-enabled UI page) must run inside of a modern app container. こうしたエクスペリエンスを追加するには、UWP プロジェクトと Windows ランタイム コンポーネントを使ってデスクトップ アプリケーションを拡張します。If you want to add these experiences, extend your desktop application with UWP projects and Windows Runtime components.

多くの場合、デスクトップ アプリケーションから Windows ランタイム API を直接呼び出すことができます。そのため、このガイドを確認する前に、Windows 10 のための強化に関する記事をご覧ください。In many cases you can call Windows Runtime APIs directly from your desktop application, so before you review this guide, see Enhance for Windows 10.

注意

この記事で説明されている機能を使用するには、デスクトップ アプリを MSIX パッケージにパッケージ化するか、またはスパース パッケージを使用してアプリ ID を付与することで、デスクトップ アプリにパッケージ ID を付与する必要があります。The features described in this article require that your desktop app has package identity, either by packaging your desktop app in an MSIX package or by granting your app identity by using a sparse package.

準備ができたら始めましょう。If you're ready, let's start.

まず、ソリューションをセットアップするFirst, setup your Solution

UWP プロジェクトとランタイム コンポーネントを 1 つ以上ソリューションに追加します。Add one or more UWP projects and runtime components to your solution.

Windows アプリケーション パッケージ プロジェクトとデスクトップ アプリケーションへの参照が含まれるソリューションから始めます。Start with a solution that contains a Windows Application Packaging Project with a reference to your desktop application.

次の画像は、ソリューションの例を示しています。This image shows an example solution.

開始プロジェクトを拡張する

ソリューションにパッケージ プロジェクトが含まれていない場合は、Visual Studio を使ったデスクトップ アプリケーションのパッケージ化に関する記事を参照してください。If your solution doesn't contain a packaging project, see Package your desktop application by using Visual Studio.

デスクトップ アプリケーションを構成するConfigure the desktop application

デスクトップ アプリケーションに Windows ランタイム API を呼び出すために必要なファイルへの参照があることを確認します。Make sure that your desktop application has references to the files that you need to call Windows Runtime APIs.

これを行うには、「プロジェクトの設定」セクションを参照してください。To do this, see the Set up your project section.

UWP プロジェクトを追加するAdd a UWP project

ソリューションに [空白のアプリ (ユニバーサル Windows)] を追加します。Add a Blank App (Universal Windows) to your solution.

ここでは、最新の XAML UI をビルドするか、UWP プロセス内でのみ実行される API を使います。This is where you'll build a modern XAML UI or use APIs that run only within a UWP process.

UWP プロジェクト

パッケージ プロジェクトで、 [アプリケーション] ノードを右クリックして [参照の追加] をクリックします。In your packaging project, right-click the Applications node, and then click Add Reference.

UWP プロジェクトを参照する

次に、UWP プロジェクトに参照を追加します。Then, add a reference the UWP project.

UWP プロジェクトを参照する

ソリューションは次のようになります。Your solution will look something like this:

UWP プロジェクトのあるソリューション

(省略可能) Windows ランタイム コンポーネントを追加する(Optional) Add a Windows Runtime component

いくつかのシナリオを実現するには、Windows ランタイム コンポーネントにコードを追加する必要があります。To accomplish some scenarios, you'll have to add code to a Windows Runtime component.

ランタイム コンポーネントのアプリ サービス

次に、UWP プロジェクトからランタイム コンポーネントに参照を追加します。Then, from your UWP project, add a reference to the runtime component. ソリューションは次のようになります。Your solution will look something like this:

ランタイム コンポーネント参照

ソリューションをビルドするBuild your solution

ソリューションをビルドして、エラーが発生していないことを確認します。Build your solution to ensure that no errors appear. エラーが発生した場合は、構成マネージャーを開き、プロジェクトが確実に同じプラットフォームを対象とするようにします。If you receive errors, open Configuration Manager and ensure that your projects target the same platform.

構成マネージャー

UWP プロジェクトとランタイム コンポーネントで行うことができる操作をいくつか見てみましょう。Let's take a look at a few things you can do with your UWP projects and runtime components.

最新の XAML UI を表示するShow a modern XAML UI

アプリケーション フローの一環として、最新の XAML ベースのユーザー インターフェイスをデスクトップ アプリケーションに組み込むことができます。As part of your application flow, you can incorporate modern XAML-based user interfaces into your desktop application. これらのユーザー インターフェイスは、さまざまな画面サイズと解像度に適応し、タッチや手描きなどの最新の対話モデルをサポートする性質を備えています。These user interfaces are naturally adaptive to different screen sizes and resolutions and support modern interactive models such as touch and ink.

たとえば、少量の XAML マークアップを使用して、地図関連の強力な視覚化機能をユーザーに提供できます。For example, with a small amount of XAML markup, you can give users with powerful map-related visualization features.

次の画像に、マップ コントロールを含む XAML ベースの最新の UI を表示している Windows フォーム アプリケーションを示しています。This image shows a Windows Forms application that opens a XAML-based modern UI that contains a map control.

アダプティブ デザイン

注意

この例では、UWP プロジェクトをソリューションに追加して、XAML UI を表示しています。This example shows a XAML UI by adding a UWP project to the solution. これは、デスクトップ アプリケーションで XAML UI を表示するためにサポートされている安定した方法です。That is the stable supported approach to showing XAML UIs in a desktop application. この方法の代わりに、XAML Island を使用して UWP XAML コントロールをデスクトップ アプリケーションに直接追加することもできます。The alternative to this approach is to add UWP XAML controls directly to your desktop application by using a XAML Island. XAML Islands は現在、開発者プレビューとして使用できます。XAML Islands are currently available as a developer preview. ご自身のプロトタイプ コードでこれらを試すことはお勧めしますが、現時点では運用コードで使用することはお勧めしません。Although we encourage you to try them out in your own prototype code now, we do not recommend that you use them in production code at this time. これらの API とコントロールは、引き続き今後の Windows リリースで完成度が高められ、安定したものになる予定です。These APIs and controls will continue to mature and stabilize in future Windows releases. XAML Islands の詳細については、デスクトップ アプリケーションでの UWP コントロール に関する記事を参照してくださいTo learn more about XAML Islands, see UWP controls in desktop applications

設計パターンThe design pattern

XAML ベースの UI を表示するには、以下の手順を実行します。To show a XAML-based UI, do these things:

:1:ソリューションをセットアップするSetup your Solution

:2:XAML UI を作成するCreate a XAML UI

:3:プロトコル拡張機能を UWP プロジェクトに追加するAdd a protocol extension to the UWP project

:4:デスクトップ アプリから UWP アプリを起動するStart the UWP app from your desktop app

:5:UWP プロジェクトで目的のページを表示するIn the UWP project, show the page that you want

ソリューションをセットアップするSetup your Solution

ソリューションのセットアップ方法に関する一般的なガイダンスについては、このガイドの冒頭の「まず、ソリューションをセットアップする」セクションを参照してください。For general guidance on how to set your solution up, see the First, setup your Solution section at the beginning of this guide.

ソリューションは次のようになります。Your solution would look something like this:

XAML UI ソリューション

この例では、Windows フォーム プロジェクトは Landmarks という名前で、XAML UI を含む UWP プロジェクトは MapUI という名前です。In this example, the Windows Forms project is named Landmarks and the UWP project that contains the XAML UI is named MapUI.

XAML UI の作成Create a XAML UI

XAML UI を UWP プロジェクトに追加します。Add a XAML UI to your UWP project. 基本的なマップの XAML を次に示します。Here's the XAML for a basic map.

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Margin="12,20,12,14">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <maps:MapControl x:Name="myMap" Grid.Column="0" Width="500" Height="500"
                     ZoomLevel="{Binding ElementName=zoomSlider,Path=Value, Mode=TwoWay}"
                     Heading="{Binding ElementName=headingSlider,Path=Value, Mode=TwoWay}"
                     DesiredPitch="{Binding ElementName=desiredPitchSlider,Path=Value, Mode=TwoWay}"
                     HorizontalAlignment="Left"
                     MapServiceToken="<Your Key Goes Here" />
    <Grid Grid.Column="1" Margin="12">
        <StackPanel>
            <Slider Minimum="1" Maximum="20" Header="ZoomLevel" Name="zoomSlider" Value="17.5"/>
            <Slider Minimum="0" Maximum="360" Header="Heading" Name="headingSlider" Value="0"/>
            <Slider Minimum="0" Maximum="64" Header=" DesiredPitch" Name="desiredPitchSlider" Value="32"/>
        </StackPanel>
    </Grid>
</Grid>

プロトコル拡張機能を追加するAdd a protocol extension

ソリューション エクスプローラーで、ソリューション内にパッケージ プロジェクトの package.appxmanifest ファイルを開き、この拡張機能を追加します。In Solution Explorer, open the package.appxmanifest file of the Packaging project in your solution, and add this extension.

<Extensions>
  <uap:Extension Category="windows.protocol" Executable="MapUI.exe" EntryPoint="MapUI.App">
    <uap:Protocol Name="xamluidemo" />
  </uap:Extension>
</Extensions>

プロトコルに名前を付けて、UWP プロジェクトによって生成された実行可能ファイルの名前と、エントリ ポイント クラスの名前を指定します。Give the protocol a name, provide the name of the executable produced by the UWP project, and the name of the entry point class.

デザイナーで package.appxmanifest 開き、 [宣言] タブを選んで、そこで拡張機能を追加することもできます。You can also open the package.appxmanifest in the designer, choose the Declarations tab, and then add the extension there.

[宣言] タブ

注意

マップ コントロールはインターネットからデータをダウンロードします。そのため、マップ コントロールを使用する場合は、"インターネット クライアント" 機能もマニフェストに追加する必要があります。Map controls download data from the internet so if you use one, you'll have to add the "internet client" capability to your manifest as well.

UWP アプリを起動するStart the UWP app

まず、デスクトップ アプリケーションから、プロトコル名と UWP アプリに渡すパラメーターが含まれた URI を作成します。First, from your desktop application, create a Uri that includes the protocol name and any parameters you want to pass into the UWP app. 次に、LaunchUriAsync メソッドを呼び出します。Then, call the LaunchUriAsync method.


private void Statue_Of_Liberty_Click(object sender, EventArgs e)
{
    ShowMap(40.689247, -74.044502);
}

private async void ShowMap(double lat, double lon)
{
    string str = "xamluidemo://";

    Uri uri = new Uri(str + "location?lat=" +
        lat.ToString() + "&?lon=" + lon.ToString());

    var success = await Windows.System.Launcher.LaunchUriAsync(uri);

}

パラメーターを解析してページを表示するParse parameters and show a page

UWP プロジェクトの App クラスで、OnActivated イベント ハンドラーをオーバーライドします。In the App class of your UWP project, override the OnActivated event handler. アプリがプロトコルによってアクティブ化されている場合は、パラメーターを解析して目的のページを開きます。If the app is activated by your protocol, parse the parameters and then open the page that you want.

protected override void OnActivated(Windows.ApplicationModel.Activation.IActivatedEventArgs e)
{
    if (e.Kind == ActivationKind.Protocol)
    {
        ProtocolActivatedEventArgs protocolArgs = (ProtocolActivatedEventArgs)e;
        Uri uri = protocolArgs.Uri;
        if (uri.Scheme == "xamluidemo")
        {
            Frame rootFrame = new Frame();
            Window.Current.Content = rootFrame;
            rootFrame.Navigate(typeof(MainPage), uri.Query);
            Window.Current.Activate();
        }
    }
}

XAML ページの背後にあるコードで、ページに渡されたパラメーターを使用するように OnNavigatedTo メソッドをオーバーライドします。In the code behind your XAML page, override the OnNavigatedTo method to use the parameters passed into the page. この場合、このページに渡された緯度と経度を使用してマップに場所を表示します。In this case, we'll use the latitude and longitude that were passed into this page to show a location in a map.

protected override void OnNavigatedTo(NavigationEventArgs e)
 {
     if (e.Parameter != null)
     {
         WwwFormUrlDecoder decoder = new WwwFormUrlDecoder(e.Parameter.ToString());

         double lat = Convert.ToDouble(decoder[0].Value);
         double lon = Convert.ToDouble(decoder[1].Value);

         BasicGeoposition pos = new BasicGeoposition();

         pos.Latitude = lat;
         pos.Longitude = lon;

         myMap.Center = new Geopoint(pos);

         myMap.Style = MapStyle.Aerial3D;

     }

     base.OnNavigatedTo(e);
 }

デスクトップ アプリケーションを共有ターゲットにするMaking your desktop application a share target

デスクトップ アプリケーションを共有ターゲットにすることで、共有をサポートしている他のアプリのデータ (画像など) をユーザーが簡単に共有できるようになります。You can make your desktop application a share target so that users can easily share data such as pictures from other apps that support sharing.

たとえば、ユーザーは、Microsoft Edge やフォト アプリから画像を共有するためにアプリケーションを選択できます。For example, users could choose your application to share pictures from Microsoft Edge, the Photos app. その機能を備えた WPF サンプル アプリケーションを次に示します。Here's a WPF sample application that has that capability.

共有ターゲット.

完全なサンプルについては、こちらを参照してくださいSee the complete sample here

設計パターンThe design pattern

アプリケーションを共有ターゲットにするには、以下の手順を実行します。To make your application a share target, do these things:

:1:共有ターゲットの拡張機能を追加するAdd a share target extension

:2:OnShareTargetActivated イベント ハンドラーをオーバーライドするOverride the OnShareTargetActivated event handler

:3:UWP プロジェクトにデスクトップ拡張機能を追加するAdd desktop extensions to the UWP project

:4:完全信頼のプロセス拡張機能を追加するAdd the full trust process extension

:5:共有ファイルを取得するようにデスクトップ アプリケーションを変更するModify the desktop application to get the shared file

次の手順に従いますThe following steps

共有ターゲットの拡張機能を追加するAdd a share target extension

ソリューション エクスプローラーで、ソリューション内にパッケージ プロジェクトの package.appxmanifest ファイルを開き、共有ターゲットの拡張機能を追加します。In Solution Explorer, open the package.appxmanifest file of the Packaging project in your solution and add the share target extension.

<Extensions>
      <uap:Extension
          Category="windows.shareTarget"
          Executable="ShareTarget.exe"
          EntryPoint="App">
        <uap:ShareTarget>
          <uap:SupportedFileTypes>
            <uap:SupportsAnyFileType />
          </uap:SupportedFileTypes>
          <uap:DataFormat>Bitmap</uap:DataFormat>
        </uap:ShareTarget>
      </uap:Extension>
</Extensions>  

UWP プロジェクトによって生成された実行可能ファイルの名前と、エントリ ポイント クラスの名前を指定します。Provide the name of the executable produced by the UWP project, and the name of the entry point class. このマークアップでは、UWP アプリの実行可能ファイルの名前が ShareTarget.exe であることを前提としています。This markup assumes that the name of the executable for your UWP app is ShareTarget.exe.

アプリとの間で共有できるようにするファイルの種類を指定することも必要です。You'll also have to specify what types of files can be shared with your app. この例では、WPF PhotoStoreDemo デスクトップ アプリケーションをビットマップ イメージの共有ターゲットとしています。そのため、サポートされているファイルの種類に Bitmap を指定します。In this example, we are making the WPF PhotoStoreDemo desktop application a share target for bitmap images so we specify Bitmap for the supported file type.

OnShareTargetActivated イベント ハンドラーをオーバーライドするOverride the OnShareTargetActivated event handler

UWP プロジェクトの App クラスで、OnShareTargetActivated イベント ハンドラーをオーバーライドします。Override the OnShareTargetActivated event handler in the App class of your UWP project.

このイベント ハンドラーは、ユーザーがファイルを共有するためにアプリを選択するときに呼び出されます。This event handler is called when users choose your app to share their files.


protected override void OnShareTargetActivated(ShareTargetActivatedEventArgs args)
{
    shareWithDesktopApplication(args.ShareOperation);
}

private async void shareWithDesktopApplication(ShareOperation shareOperation)
{
    if (shareOperation.Data.Contains(StandardDataFormats.StorageItems))
    {
        var items = await shareOperation.Data.GetStorageItemsAsync();
        StorageFile file = items[0] as StorageFile;
        IRandomAccessStreamWithContentType stream = await file.OpenReadAsync();

        await file.CopyAsync(ApplicationData.Current.LocalFolder);
            shareOperation.ReportCompleted();

        await FullTrustProcessLauncher.LaunchFullTrustProcessForCurrentAppAsync();
    }
}

このコードでは、ユーザーによって共有されているイメージをアプリのローカル ストレージ フォルダーに保存します。In this code, we save the image that is being shared by the user into a apps local storage folder. 後で、その同じフォルダーからイメージをプルするように、デスクトップ アプリケーションを変更します。Later, we'll modify the desktop application to pull images from that same folder. デスクトップ アプリケーションは、UWP アプリと同じパッケージに含まれているために、これを行うことができます。The desktop application can do that because it is included in the same package as the UWP app.

UWP プロジェクトにデスクトップ拡張機能を追加するAdd desktop extensions to the UWP project

UWP アプリ プロジェクトに [Windows Desktop Extensions for the UWP] 拡張機能を追加します。Add the Windows Desktop Extensions for the UWP extension to the UWP app project.

デスクトップ拡張機能

完全信頼のプロセス拡張機能を追加するAdd the full trust process extension

ソリューション エクスプローラーで、ソリューション内にパッケージ プロジェクトの package.appxmanifest ファイルを開き、以前にこのファイルに追加している共有ターゲット拡張機能の横に、完全信頼のプロセス拡張機能を追加します。In Solution Explorer, open the package.appxmanifest file of the Packaging project in your solution, and then add the full trust process extension next to the share target extension that you add this file earlier.

<Extensions>
  ...
      <desktop:Extension Category="windows.fullTrustProcess" Executable="PhotoStoreDemo\PhotoStoreDemo.exe" />
  ...
</Extensions>  

この拡張機能によって、UWP アプリでは、ファイルを共有するデスクトップ アプリケーションを起動できるようになります。This extension will enable the UWP app to start the desktop application to which you would like the share a file. 例では、WPF PhotoStoreDemo デスクトップ アプリケーションの実行可能ファイルを参照しています。In example, we refer to the executable of the WPF PhotoStoreDemo desktop application.

共有ファイルを取得するようにデスクトップ アプリケーションを変更するModify the desktop application to get the shared file

共有ファイルを検索して処理するように、デスクトップ アプリケーションを変更します。Modify your desktop application to find and process the shared file. この例では、UWP アプリによって、ローカル アプリ データ フォルダー内に共有ファイルが保存されました。In this example, the UWP app stored the shared file in the local app data folder. そのため、そのフォルダーから写真をプルするように、WPF PhotoStoreDemo デスクトップ アプリケーションを変更します。Therefore, we would modify the WPF PhotoStoreDemo desktop application to pull photos from that folder.

Photos.Path = Windows.Storage.ApplicationData.Current.LocalFolder.Path;

ユーザーによって既に開かれているデスクトップ アプリケーションのインスタンスでは、FileSystemWatcher イベントを処理して、ファイルの場所へのパスを渡すこともできます。For instances of the desktop application that are already open by the user, we might also handle the FileSystemWatcher event and pass in the path to the file location. これにより、開かれたデスクトップ アプリケーションのインスタンスでは、共有された写真が表示されます。That way any open instances of the desktop application will show the shared photo.

...

   FileSystemWatcher watcher = new FileSystemWatcher(Photos.Path);

...

private void Watcher_Created(object sender, FileSystemEventArgs e)
{
    // new file got created, adding it to the list
    Dispatcher.BeginInvoke(System.Windows.Threading.DispatcherPriority.Normal, new Action(() =>
    {
        if (File.Exists(e.FullPath))
        {
            ImageFile item = new ImageFile(e.FullPath);
            Photos.Insert(0, item);
            PhotoListBox.SelectedIndex = 0;
            CurrentPhoto.Source = (BitmapSource)item.Image;
        }
    }));
}

バックグラウンド タスクを作成するCreate a background task

バックグラウンド タスクを追加して、アプリが一時停止されているときでもコードを実行できます。You add a background task to run code even when the app is suspended. バックグラウンド タスクは、ユーザーの操作を必要としない小さなタスクに最適です。Background tasks are great for small tasks that don't require the user interaction. たとえば、タスクはメールのダウンロード、受信チャット メッセージに関するトースト通知の表示、システムの状態の変化に対する対応を行うことができます。For example, your task can download mail, show a toast notification about an incoming chat message, or react to a change in a system condition.

バックグラウンド タスクを登録する WPF サンプル アプリケーションを以下に示します。Here's a WPF sample application that registers a background task.

バックグラウンド タスク

タスクは http 要求を行い、要求が応答を返すのにかかる時間を測定します。The task makes an http request and measures the time that it takes for the request to return a response. タスクはさらに興味深いものと考えられますが、このサンプルはバックグラウンド タスクの基本的なしくみを学習するのに適しています。Your tasks will likely be much more interesting, but this sample is great for learning the basic mechanics of a background task.

完全なサンプルについては、こちらを参照してください。See the complete sample here.

設計パターンThe design pattern

バックグラウンド サービスを作成するには、以下の手順を実行します。To create a background service, do these things:

:1:バックグラウンド タスクの実装Implement the background task

:2:バックグラウンド タスクの構成Configure the background task

:3:バックグラウンド タスクの登録Register the background task

バックグラウンド タスクの実装Implement the background task

Windows ランタイム コンポーネント プロジェクトにコードを追加することで、バックグラウンド タスクを実装します。Implement the background task by adding code to a Windows Runtime component project.

public sealed class SiteVerifier : IBackgroundTask
{
    public async void Run(IBackgroundTaskInstance taskInstance)
    {

        taskInstance.Canceled += TaskInstance_Canceled;
        BackgroundTaskDeferral deferral = taskInstance.GetDeferral();
        var msg = await MeasureRequestTime();
        ShowToast(msg);
        deferral.Complete();
    }

    private async Task<string> MeasureRequestTime()
    {
        string msg;
        try
        {
            var url = ApplicationData.Current.LocalSettings.Values["UrlToVerify"] as string;
            var http = new HttpClient();
            Stopwatch clock = Stopwatch.StartNew();
            var response = await http.GetAsync(new Uri(url));
            response.EnsureSuccessStatusCode();
            var elapsed = clock.ElapsedMilliseconds;
            clock.Stop();
            msg = $"{url} took {elapsed.ToString()} ms";
        }
        catch (Exception ex)
        {
            msg = ex.Message;
        }
        return msg;
    }

バックグラウンド タスクの構成Configure the background task

マニフェスト デザイナーで、ソリューション内にパッケージ プロジェクトの package.appxmanifest ファイルを開きます。In the manifest designer, open the package.appxmanifest file of the Packaging project in your solution.

[宣言] タブで、 [バックグラウンド タスク] 宣言を追加します。In the Declarations tab, add a Background Tasks declaration.

バックグラウンド タスクのオプション

次に、必要なプロパティを選択します。Then, choose the desired properties. サンプルでは、Timer プロパティを使います。Our sample uses the Timer property.

Timer プロパティ

バックグラウンド タスクを実装する Windows ランタイム コンポーネントで、クラスの完全修飾名を指定します。Provide the fully qualified name of the class in your Windows Runtime component that implements the background task.

Timer プロパティ

バックグラウンド タスクの登録Register the background task

バックグラウンド タスクを登録するデスクトップ アプリケーション プロジェクトにコードを追加します。Add code to your desktop application project that registers the background task.

public void RegisterBackgroundTask(String triggerName)
{
    var current = BackgroundTaskRegistration.AllTasks
        .Where(b => b.Value.Name == triggerName).FirstOrDefault().Value;

    if (current is null)
    {
        BackgroundTaskBuilder builder = new BackgroundTaskBuilder();
        builder.Name = triggerName;
        builder.SetTrigger(new MaintenanceTrigger(15, false));
        builder.TaskEntryPoint = "HttpPing.SiteVerifier";
        builder.Register();
        System.Diagnostics.Debug.WriteLine("BGTask registered:" + triggerName);
    }
    else
    {
        System.Diagnostics.Debug.WriteLine("Task already:" + triggerName);
    }
}

質問に対する回答を見つけるFind answers to your questions

ご質問があるでしょうか。Have questions? Stack Overflow でお問い合わせください。Ask us on Stack Overflow. Microsoft のチームでは、これらのタグをチェックしています。Our team monitors these tags. こちらから質問することもできます。You can also ask us here.