takataka430’s blog

Xamarin.Formsを中心に勉強したことのまとめを書きます

JavaScript入門してみた(Azure Static Web Apps で公開編)

前回の記事ではローカル環境でWEBページを動かしてみたので、今回は実際にサイトを公開してみようと思います。
せっかくなので、最近発表されたAzure Static Web Appsを使ってみようと思います。(2020年6月24日の時点ではプレビューです)

Azure Static Web Appsとは

HTML、CSSJavaScriptなどの静的コンテンツをホストしてくれるサービス、とのこと。詳細は公式ドキュメントをご覧ください。

docs.microsoft.com

準備するもの

Azureのサブスクリプション
Githubアカウント

手順

1. Githubリポジトリを作成し、公開したいソースコードをプッシュ

2. AzureでStatic Web Appsを作成

Azure Portalで「静的」と検索すると出てきます。
f:id:takataka430:20200624172244p:plain   
「追加」をクリック。
f:id:takataka430:20200624172426p:plain

  
以下の画面でリソースグループや名前を設定します。「Githubアカウントでサインイン」をクリックしてログインし、1で作成したリポジトリを選択します。他にいろいろ設定できるみたいですが、今回は特に他の場所は変更せずに作成します。
f:id:takataka430:20200624172729p:plain   

この後GithubリポジトリのActionsを見に行くと、ワークフローが作成されていることが分かります。
ワークフローが完了したら、Azure Portalに戻り、作成したAzure Static Web Appsの画面の「URL」にあるリンクをクリックするとWEBサイトを確認することができます。
f:id:takataka430:20200624173822p:plain

最後に

使ってみたら意外と簡単に公開することができました。バックエンドにAzure Functionsを利用することもできるみたいなので、色々使ってみようと思います。

JavaScript入門してみた(ローカル環境作成編)

以前から興味があったJavaScriptの勉強を始めたので、記録を残してみようと思います。

環境構築

エディタは普段ちょこちょこ使ってるVisual Studio Codeを選択。
インストール後、ローカルでWEBページを確認するため、「Live Server」というエクステンションを追加します。これを使うと、ソースコードを変更した時にWEBページも自動で更新してくれます。
Visual Studio Codeがなくてもメモ帳などで代用できます)

コード

とりあえずHello,Worldしよう!と思ったのですが、それだけだと面白くないので「ボタンをクリックしたら数字が増えていく」ページを作りました。

index.html

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>TestPage</title>
</head>
<body>
    <button id="add">1を足す</button>
    <p id="number"></p>
<script>
    'use strict';
    let num = 0 ;
    
    //数字を画面に表示する
    DisplayNumber(num);

    //「1を足す」ボタンがクリックされた時の動き
    document.getElementById("add").onclick = function(){
        num += 1;

        //数字を画面に表示する
        DisplayNumber(num);
    }

    //数字を画面に表示するファンクション
    function DisplayNumber(number){
        document.getElementById("number").textContent=number;
    }
</script>
</body>
</html>

実行

Visual Studio Codeindex.htmlを右クリックし、Open with Live Serverを選択するとブラウザに表示されます。

f:id:takataka430:20200622032252g:plain

以上、ローカルで実行する方法でした。せっかくなのでこれをWeb上で見れるようにしたいと思います。続きは次回の記事で。

2020/6/24 追記

次回の記事を書きました。 takataka430.hatenablog.com

ASP .NET Coreで既定のレイアウトを適用する

MacASP.NET Coreのチュートリアルをやっていた時に、レイアウトを適用する方法を調べたメモです。

環境

Visual Studio for Mac ASP.NET Core 3.1.2

状況

以下のチュートリアルをやっていた時に、モデルクラスからスキャフォールディングで作ったViewがいい感じに表示されませんでした。

docs.microsoft.com

Viewは以下の写真のような感じです。 f:id:takataka430:20200525164912p:plain

解決方法

スキャフォールディングから作成したViewのファイル(Index.cshtml, Create.cshtml, Detail.cshtml, Edit.cshtml, Delete.cshtml)の先頭に以下の記述がありました。

@{
    Layout = null;
}

これを削除すると、画面がいい感じに表示されるようになりました。 f:id:takataka430:20200525165505p:plain

ただ、この手順が正しいのかはちょっとわかりません・・・

ちなみにWindowsVisual Studio 2019で試したところ、上記の解決方法を実施しなくてもデフォルトでレイアウトが適用されていました。何でだろう。

Microsoft Business Applications Summit 個人的に気になった事まとめ

5月6日(米国時間)にMicrosoft Business Applications Summit 2020が開催されました。 www.microsoft.com

このイベントの中で個人的に気になったもののメモ書きです。

PowerApps

MR機能(プレビュー)

現実空間に物体を配置することができます。HoloLensのように、物体の反対側に回ってもちゃんと物体があるように見えるのがすごいと思いました。

モニターを利用してデバッグ(プレビュー)

以下の写真のように動作確認に利用することができそうです。 f:id:takataka430:20200517011735p:plain

地図の埋め込み(プレビュー)

画像ではなく地図をそのまま埋め込む機能が今後追加されるようです。

PowerAutomate

子フローの呼び出し

フローから別のフローを呼び出せるようになったようです。

承認フローに添付ファイルを追加可能

承認する際に必要なファイルを承認のメールなどに添付できるようになりました。
flow.microsoft.com

関数や変数の編集画面の変更(今後の機能)

今までは変数や関数を編集する時は右側に画面が出てきましたが、今後は下の画像のようになるようです。このほうが使いやすいですね。 f:id:takataka430:20200511151127p:plain

そのほか、RPA機能も今後より強化されるとのことです。
いろいろ楽しみですね!

C#でエクセルを操作してみた【COM参照】

C#でエクセルを操作する方法として以前 C#でエクセルを操作してみた【ClosedXML】 という記事を書きましたが、 これ以外にもCOM参照を使った方法を見つけました。本記事はその方法をメモしたものです。

環境

OS:Windows10
IDEVisual Studio 2019

手順

ここではコンソールアプリを利用して操作してみます。

準備

  1. Visual Studio 2019でコンソールアプリ(.NET Framework)(C#の方)を作成 f:id:takataka430:20200427052346p:plain

  2. プロジェクトの「ソリューションエクスプローラ」の「参照」を右クリックし、「参照の追加」を選択
    f:id:takataka430:20200427052747p:plain

  3. 参照マネージャーの左側のCOMを選択後、右上の検索ボックスに「Excel」と入力して検索。「Microsoft Excel 16.0 Object Library」にチェックを入れて、右下のOKを選択。 f:id:takataka430:20200427061249p:plain

これで準備は完了です。

コードを書く

それではコードを書いてみましょう。なお、COM参照を利用してエクセルを操作する場合、作成したオブジェクトは手動で解放しないといけないようです。 (以下のページを参考にさせていただきました) qiita.com

サンプルコードは次の通りです。

using Microsoft.Office.Interop.Excel;
using System.Runtime.InteropServices;

var excelApplication = new Microsoft.Office.Interop.Excel.Application();
try
{
    //Workbooksオブジェクトの作成
    Workbooks workbooks = excelApplication.Workbooks;
    //操作中のエクセルを表示したいときにTrueにする
    excelApplication.Visible = true;
    try
    {
        //エクセルファイルの指定
        Workbook workbook = workbooks.Open(["エクセルファイルのパス"]);
        try
        {
            //シート一覧の取得
            Sheets worksheets = workbook.Sheets;
                        
            try
            {
                //シートの指定
                Worksheet worksheet = worksheets["シート名"];
                try
                {
                    //シート内のセルを取得
                    Microsoft.Office.Interop.Excel.Range usedRange = worksheet.Cells;
                    try
                    {
                        //A1セルを取得
                        var cell = usedRange[1, 1];
                        try
                        {
                            //セルの値を設定
                            cell.Value2 = "Test";
                            //エクセルファイルの保存
                            workbook.Save();
                        }
                        finally { Marshal.ReleaseComObject(cell); }
                    }
                    finally { Marshal.ReleaseComObject(usedRange); }

                }
                finally { Marshal.ReleaseComObject(worksheet); }
            }
            finally { Marshal.ReleaseComObject(worksheets); }
        }
        finally
        {
            if (workbook != null)
            {
                //ワークブックを閉じる
                workbook.Close(false);
            }
            Marshal.ReleaseComObject(workbook);
        }
    }
    finally { Marshal.ReleaseComObject(workbooks); }
}
finally
{
    if (excelApplication != null)
    {
        //エクセルを閉じる
        excelApplication.Quit();
    }
    Marshal.ReleaseComObject(excelApplication);
}

ちょっと手間はかかりますが、便利そうですね。

C#でエクセルを操作してみた【ClosedXML】

エクセルを操作する方法を考えていたい時に、VBAもいいけどC#で動かせないかなーと思って探したらライブラリを見つけたのでコンソールアプリで使ってみました。

github.com

実行環境

Visual Studio 2019 for Mac
Mictrosoft.NETCoreApp 3.1.0

準備(コンソールアプリケーションの作成)

Visual Studio for Macをで新規プロジェクトを作成します。以下の画像のように.NET CoreConsole Applicationを選択して新規プロジェクトを作ります。

f:id:takataka430:20200411162959p:plain

NuGetパッケージのインストール

プロジェクトを作成したらパッケージをインストールします。メニューバーのProjectからManage NuGet Packages...を選択します。

f:id:takataka430:20200411163204p:plain

"ClosedXML"で検索すると検索結果の一番上に出てくるのでインストールしましょう。

f:id:takataka430:20200411164408p:plain

これで準備完了です。

エクセルの操作

Program.csにコードを書いていきましょう。以下は使い方の一例です。

using System;
using System.Data;
using ClosedXML.Excel;

namespace consoleAppCore
{
    class Program
    {
        static void Main(string[] args)
        {
            //ファイルパスの指定
            var path = "[エクセルファイルパス]";

            //エクセルを開く
            using (var wb = new XLWorkbook(path))
            {
                //シートの指定
                var sheet = wb.Worksheet("Sheet1");

                //テーブルを設定
                var table = wb.Table("Table1");



                //A1セルの値を取得
                var cellA1value = sheet.Cell("A1").Value;

                //アドレスを数字でも指定可能
                var cellA3value = sheet.Cell(3,1).Value;



                //A1セルに値を設定
                sheet.Cell("A1").SetValue("test");

                //アドレスを数字でも指定可能
                sheet.Cell(1, 1).SetValue("test");



                //A3セルのハイパーリンクを取得
                var hyperlink = sheet.Cell("A3").Hyperlink.ExternalAddress;



                //テーブル内の値を列挙する
                foreach (var row in table.DataRange.Rows())
                {
                    //現在の行の全セルを取得
                    var cells = row.Cells();

                    //それぞれのセルに記載されている値を表示
                    foreach (var cell in cells)
                    {
                        Console.Write(cell.Value);
                        Console.Write(" ");
                    }

                    Console.WriteLine();
                }



                //データテーブル型の変数を作成
                var newData = new DataTable();
                newData.Columns.Add("Comumn1", typeof(string));
                newData.Columns.Add("Comumn2", typeof(string));
                newData.Columns.Add("Comumn3", typeof(string));

                newData.Rows.Add("111", "222", "333");

                //テーブルに行を追加
                table.AppendData(newData);



                //エクセルファイルを保存する
                wb.Save();
            }
        }
    }
}

C#でもエクセルを操作できるってなんかいいですね!
これ以外にもいろいろな使い方があるようなので、詳しくは公式ドキュメントをご覧ください。

Power Automateを使ってTwitter予約投稿機能ができるか考えてみた

やりたいこと

Twitterで特定の時刻に投稿を行うことができるようにしたい。   
  

実現方法

Twitterの標準機能にはないので、Power Automateを使います。

docs.microsoft.com

Twitterと連携する機能があるので、今回はこちらを利用して予約投稿を実現してみたいと思います。   
  

作成したワークフロー

全体の流れは以下の通りです。 f:id:takataka430:20191229101832p:plain 1つずつ見ていきましょう。   
  

1. トリガー

モバイルのFlowボタンのトリガーを使用します。 f:id:takataka430:20191230061628p:plain ツイート本文は「テキスト」、ツイートする日付は「日付」、日時はそれぞれ数字で入力を行います。
  
  

2.変数の初期化

「変数を初期化する」アクションを使用します。 f:id:takataka430:20191230062640p:plain

addMinutes(addHours(formatDateTime(triggerBody()['date'],'yyyy-MM-dd HH:mm'),triggerBody()['number_2']),triggerBody()['number_3'])

それぞれの変数の意味は以下の通りです。
triggerBody()['date']→トリガーアクションの「ツイートする日付」
triggerBody()['number_2']→トリガーアクションの「時」
triggerBody()['number_3']→トリガーアクションの「分」
formatDatetime,addHours,addMinutesについては以下のドキュメントを参考にしてください。

docs.microsoft.com   
  

3.タイムゾーンの変換

f:id:takataka430:20191231164244p:plain 基準時間は2.で作成した変数ツイート時刻(JST)を使います。
書式はこの形式にしないとエラーになってしまうのでこうしています。
また、Power Automateは時刻をUTCの時刻として認識するようなので、日本時間をUTCに変換します。   
  

4.延期期限

f:id:takataka430:20191231164640p:plain 延長期限では3.で作成した変換後の時間に設定します。   
  

5.ツイート

f:id:takataka430:20191231164945p:plain 最後にツイートです。1.で入力したツイート内容を投稿します。


これで完了です!あとはPower AutomateのWEB画面、またはモバイルアプリから入力すれば、設定した時間にツイートを予約することができます。是非試してみてください!