Power BIでカスタムアイコンを設定する

Power BI でカスタムアイコンを設定する方法を調べた。 今回は、icooon-mono.com で公開されている矢印アイコンを設定してみる。

icooon-mono.com

準備

アイコンを用意する

まずは設定したいアイコンを用意する。 icooon-mono.com で公開されている以下の 3 つを設定対象としてみた。 「48px」の「JPG」形式でダウンロードする。

• 上向きの矢印のアイコン素材 | アイコン素材ダウンロードサイト「icooon-mono」 | 商用利用可能なアイコン素材が無料(フリー)ダウンロードできるサイト

• 右向きの矢印のアイコン素材 | アイコン素材ダウンロードサイト「icooon-mono」 | 商用利用可能なアイコン素材が無料(フリー)ダウンロードできるサイト

• 下向きの矢印のアイコン素材 | アイコン素材ダウンロードサイト「icooon-mono」 | 商用利用可能なアイコン素材が無料(フリー)ダウンロードできるサイト

アイコンを Base64 でエンコーディングする

Power BI へは JSON ファイルで設定を読み込ませる必要があり、そのため画像データを Base64 でエンコードする。 エンコードは下記のサイトを使用した。

lab.syncer.jp

画像を選択すると、右側にエンコード結果が表示される。 この値をコピーする。

インポート用 JSON ファイルを準備する。

インポート用 JSON ファイルをPBI-CustomIconTheme.jsonで作成する。

ファイルの中身は、下記となる。 エンコーディングした値は非常に長くなるので省略したが、<エンコーディングした値>に置き換えて保存をしておく。

{
    "name": "PBI-CustomIcon",
    "icons": {
        "1": {"description": "1", "url": "<エンコーディングした値>" }
        ,"2": {"description": "2", "url": "<エンコーディングした値>"}
        ,"3": {"description": "3", "url": "<エンコーディングした値>"}
    }
}

インポート

PowerBI を起動する。 「表示」タブ->「テーマ」->「テーマを参照」をクリックする。

エクスプローラーが起動するので、PBI-CustomIconTheme.jsonを選択する。

正常にインストールが完了すると、ポップアップが表示される。

確認

カスタムアイコンの確認をおこなう。

「データ」に移動し、「データの入力」をクリックする。

「テーブルの作成」が起動する。今回はカスタムアイコンの確認なので、このまま「読み込み」をクリックする。

「フィールド」で、作成したテーブルの列を選択する。 その後「視覚化」でテーブルを選択する。 次に「書式」を選択し、「条件書式」を広げる。 最後に「アイコン」を「オン」にする。

「アイコン」を「オン」にすると、列に対する書式設定画面が表示される。

現在設定されているアイコンを選択すると、他の候補のアイコンが表示される。 その中に、今回設定した矢印のアイコンが表示されているのが確認できる。

まとめ

Power BI でカスタムアイコンを設定する方法を学んだ。 すでに用意されているアイコンの種類も豊富だが、オリジナルなものも取り込めて表現の幅が広がりそう。 Power BI の中に取り込む手順が GUI でササッとできるものではなかったので記事にした。 参考になれば！

FC Pythonでサッカーのデータ分析を学ぶ -パスマップ編-

「FC Python」 でサッカーのデータ分析を学ぶことができる。 コンテンツは英語しかないが簡単な内容であり、1 つ 1 つのコンテンツも短いので翻訳サイトを使いながらでも進めることはできる。 これが無料で展開されているのはありがたい！ 今回はパスの表現を学んだのでまとめる。

fcpython.com

作るもののイメージ

今回は次のようなサッカーのピッチと 3 本のパスを描く。

「FC Python」のページとしては下記のページを参考にした。

• Drawing a Pitchmap - Adding Lines & Circles in Matplotlib | FC Python
• Drawing a Pass Map in Python | FC Python

開発環境

検証で使う開発環境は手軽に始められる Google Colaboratory を使用する。

colab.research.google.com

ライブラリ

ライブラリは次のものを使用する。

• pandas
• numpy
• matplotlib

実際に作成する

ピッチを描く

まずはピッチを描いてみる。 直線 1 本ずつ組み合わせて描いていく形になる。 最後にセンターサークルで円を描いている。

import pandas as pd
import numpy as np
import matplotlib.pyplot as plt
from matplotlib.patches import Arc

%matplotlib inline

fig=plt.figure()
ax=fig.add_subplot(1,1,1)

# ゴールライン、タッチライン
plt.plot([0,0],[0,90], color="black")
plt.plot([0,130],[90,90], color="black")
plt.plot([130,130],[90,0], color="black")
plt.plot([130,0],[0,0], color="black")

# センターライン
plt.plot([65,65],[0,90], color="black")

#左ペナルティエリア
plt.plot([16.5,16.5],[65,25],color="black")
plt.plot([0,16.5],[65,65],color="black")
plt.plot([16.5,0],[25,25],color="black")

#右ペナルティエリア
plt.plot([130,113.5],[65,65],color="black")
plt.plot([113.5,113.5],[65,25],color="black")
plt.plot([113.5,130],[25,25],color="black")

#左ゴールエリア
plt.plot([0,5.5],[54,54],color="black")
plt.plot([5.5,5.5],[54,36],color="black")
plt.plot([5.5,0.5],[36,36],color="black")

#右ゴールエリア
plt.plot([130,124.5],[54,54],color="black")
plt.plot([124.5,124.5],[54,36],color="black")
plt.plot([124.5,130],[36,36],color="black")

#センターサークル
centreCircle = plt.Circle((65,45),9.15,color="black",fill=False)
ax.add_patch(centreCircle)

plt.show()

plt.show()を実行するとピッチが表示される。

パスを描く

次はパスを描く。 パスを描くと言っても大げさなものではなく、こちらも直線で表現する。 今回のパスのイメージは、次の 3 本を想定している。

1. ボランチからバックパス
2. ボランチから逆サイドへの展開
3. ボランチから縦パス

まずは 1 のボランチからのバックパスを表現する。 ピッチを描いたコードの最下部に追加をする。

#センターサークル （これより上は省略）
centreCircle = plt.Circle((65,45),9.15,color="black",fill=False)
ax.add_patch(centreCircle)

#追加部分ここから
data = pd.DataFrame(np.array([[45, 25, 60, 45]]),
                   columns=['Xstart', 'Xend', 'Ystart', 'Yend'])

plt.plot([int(data["Xstart"][0]),int(data["Xend"][0])],
            [int(data["Ystart"][0]),int(data["Yend"][0])],
            color="blue")
plt.plot(int(data["Xstart"][0]),int(data["Ystart"][0]),"o", color="green")
#追加部分ここまで

plt.show()

これでボランチからのバックパスを表現できた。 青の線の端に緑の点があるが、これはパスの始点を想定している。

「ボランチからバックパス」、「ボランチから逆サイドへの展開」「ボランチから縦パス」を表現するために、データを追加する。 また、途中の処理もループに変更する。

#センターサークル （これより上は省略）
centreCircle = plt.Circle((65,45),9.15,color="black",fill=False)
ax.add_patch(centreCircle)

#追加部分ここから

data = pd.DataFrame(np.array([[45, 25, 60, 45],[55, 90, 65, 30],[60, 120, 50, 70]]),
                   columns=['Xstart', 'Xend', 'Ystart', 'Yend'])

for i in range(len(data)):
    plt.plot([int(data["Xstart"][i]),int(data["Xend"][i])],
             [int(data["Ystart"][i]),int(data["Yend"][i])],
             color="blue")
    plt.plot(int(data["Xstart"][i]),int(data["Ystart"][i]),"o", color="green")
#追加部分ここまで


plt.show()

まとめ

「FC Python」 のコンテンツを通してパスマップの描き方を学ぶことができた。 「FC Python」 には他にも Python を使ったサッカーの分析を学べるコンテンツが揃っている。 サッカーのデータ分析の知見はなかなか見かけないのでどんどん使いこなしていくぞ！！

fcpython.com

リセットCSSについてまとめた

Web デザインの本を読んでいるときにリセット CSS という単語を見つけました。 初めて見聞きした言葉だったので簡単にまとめておきます。

リセット CSS とは

リセット CSS は、ブラウザに設定されているデフォルトの CSS を上書きするための CSS です。 実はブラウザごとにデフォルトの CSS を持っており、これらをそのままにしておくとデザインを組み立てたときにブラウザごとでばらつきが出てしまいます。 デザインを統一するためにブラウザごとで持っている CSS を打ち消すための CSS がリセット CSS になります。

メリット・デメリット

何かを導入すると必ずメリットデメリットが発生しますが、基本的にはブラウザ間で違うデザインが表示されることを防げるのでメリットが上回っている気がします。 デメリットは管理するファイルが増えたり、導入する作業が発生するぐらいでしょうか。

　 HTML5 Doctor Reset CSS

リセット CSS にはいくつか種類があります。 ブラウザごとの CSS を打ち消したあとは、過度に装飾しない限りでは個別で味を出している感じでしょうか。 自分が使っているものは 「HTML5 Doctor Reset CSS」 です。 見出しとなる h1 系からはじまり、ほとんどのものがリセットされます。 0 に近いところから実装していくには良さそうです。

html5doctor.com

VS CodeでSCSSを監視して自動コンパイルしてくれる「Live Sass Compiler」

タスクランナーの「gulp」を毎回実行するのがめんどくさいと感じ調べたところ、VS Codeの拡張に「Live Sass Compiler」があったので試した。 gulpも設定をおこなえば自動でコンパイルをしてくれるが、VS Codeにインストールするだけでやってくれるので「Live Sass Compiler」のほうがお手軽だった。

「Live Sass Compiler」はVS Codeの拡張から検索してインストールするだけになる。

実行も簡単でVS Codeの右下から「Watch Sass」をクリックするだけになる。

VS Codeの出力が開いて「Watching...」と表示されていて、また「Watch Sass」の部分も「Watching...」に変化している。

この状態でSCSSファイルを編集し保存をすると自動でCSSに変換してくれる。

簡単な通知にLINE Notifyが良かった

個人で簡単なアプリを作成したときにも、通知を欲しい場面がある。 そんなときの通知先にはいくつかの候補先があるが、今回使った LINE Notify がよかった。 やりかたも簡単なので紹介しておく。

設定方法

まずは LINE Notify にアクセスし、ログインをおこなう。 ちなみに、安全なログインのため PIN が表示され、普段使っている LINE アプリの方で認証が必要なので準備しておくことが必要。

https://notify-bot.line.me/ja/

マイページからアクセストークンを発行する

まずはマイページに移動する。

「トークンを発行する」でトークンを発行できる。

ここでは、「トークン名」と「通知を送信する場所」を指定する。 通知を送信する場所は、個人だったりグループチャットを選べる。 ここは用途で選んでもらえばいいかと。

発行するとトークンがでてくるので、保存しておく。

GAS から送信してみる

Google Apps Script から LINE に送信してみる。 簡易的なものかつ GAS のブラウザ上からおこなったので、var などは目をつむる...。

function myFunction() {
  var TOKEN = "あなたのトークンを入れてください"
  var messageText = "ここにはメッセージが入ります。";
  var options = {
      method: "post",
      headers: {
          Authorization: "Bearer " + TOKEN
      },
      payload: {
          message: messageText
      }
  };
  var url = "https://notify-api.line.me/api/notify";
  UrlFetchApp.fetch(url, options);
}

結果的には次のようなメッセージが来る。

まとめ

今回は LINE Notify を紹介した。 以前の記事に LINE Notify を使ったことを紹介していたが、実際に解説した記事となる。

yoshitaku-jp.hatenablog.com

個人的な通知用途だと LINE を日常的に利用していることもあり、LINE Notify は手軽に受け取れるのが良かった。 以前は個人 Slack を立てていたこともありそちらに送っていたが、様々な連携を外してからはオーバースペックであると感じていたので代替手段が見つかってよかった。

1 つデメリットがあるとすれば、PC を触っている時はスマホで LINE を見ない可能性があり、その際は通知を見逃すことがある。 なので、生活スタイルを考えたときに重要度の高い通知には向かないかもしれない。 自分は Apple Watch を使用していて、通知が手元で確認できるので、その点がカバーはできている。

SQL DatabaseにADユーザを登録する前に設定する項目

SQL DatabaseにADユーザを登録する作業を頼まれたときに、ハマったのでメモ。

SQL DatabaseにADユーザを登録する際、登録作業を実施するユーザがサーバのActive Directory管理者である必要がある。 この作業はAzureの画面上からすぐに実施することができる。

サーバの画面の左側から「Active Directory管理者」をクリックする。

Azure上にログインしているユーザを「Active Directory管理者」に設定する。

その後、Active Directory管理者ユーザでSQLを使って追加作業をおこなっていく。

実際の作業はこちらにまとまっているのでリンクの形で紹介する。

qiita.com

参考記事

docs.microsoft.com

Power BIで行レベルセキュリティ（RLS）を設定する

Power BIにて、「同じレポートを見せたいが、表示するデータは変えたい」といったことがある。例えば、北海道の営業部と沖縄の営業部で同じ形のレポートを表示したいが、データは北海道と沖縄のものにしたいということになる。もちろん最終的には、北海道と沖縄で表示されているデータは違うので、拠点ごとに別のレポートを作成したとしても同じ結果が得られる。

しかし、管理の視点でいうと、各拠点ごとにレポートを作成されると大変なことになる。例に出した、北海道と沖縄に続いて東京と大阪が入ってきたとしたら管理するレポートは4つになる。エリアマネージャーのような役割を持っている人だと、これが拠点ごとに増えていくイメージになる。このレポートが増えていく現状を、データの行レベルで管理していく機能が行レベルセキュリティ（RLS）になる。

今回は行レベルセキュリティ（RLS）を設定してみる。

サンプルデータを読み込む

まずはPowerBIを起動して、サンプルデータを取得する。 「サンプルデータを取得する」をクリックする。

「サンプルデータを読み込む」をクリックする。

「financials」にチェックを入れ、「読み込む」をクリックする。

一番右に表示されている「フィールド」に読み込んだ「financials」が表示されていれば、正常に読み込めている。

ここでは「積み上げ横棒グラフ」を選択する。

軸に「Country」、値に「Sales」を設定するとグラフが表示される。今は行レベルセキュリティ（RLS）の設定をしていないのですべて表示されている。

ロールを設定する

今は「レポート」の画面にいるので、「モデル」に移動する。

「ロールの管理」をクリックする。

ロールの管理を作成する。 次の値を入力し、保存する。

ロール	テーブル	テーブルフィルターのDAX式
Europe	financials	[Country] in {"France","Germany"}

表示方法を使用すると、ロールごとの表示をプレビューのような形で確認することができる。 表示方法をクリックして、さきほど作成した「Europe」ロールにチェックを入れOKをクリックする。

設定すると現在の表示がEuropeロールであることが明示される。とても親切で嬉しい。

これでレポートの画面に戻ると、表示されている値が絞られていることがわかる

レポートを発行する

レポート画面から「発行」をクリックし、Power BI Serviceにレポートを発行する。「Power BIで RLS.pbix（保存したときのファイル名）を開く」をクリックするとブラウザが立ち上がる。

レポートが表示されるが、マイワークスペースに移動し、先ほど作成したレポートがあることを確認する。

「データセット」の右にある「・・・」をクリックし、セキュリティをクリックする

Power BI Desktopで作成した「Europe」ロールを確認できる。 このロールに対応したメンバーを追加し、設定が完了となる。

まとめ

今回はPower BIにて行レベルセキュリティを設定する方法を自身で実施しまとめた。 実施したところ、Power BI Desktopでロールの外側となる部分を設定し、Power BI Serviceでユーザ追加などの中身を設定していくイメージを持った。 ユーザ情報をローカルに持ってくることはないので、このような実装順序になることは当然のような気もするが、初見ではPower BI Desktopで全部できると思っていたので確認できてよかった。

まだまだ日本語のドキュメントだったり、解説したエントリが少ないので参考になれば幸いです。

参考

docs.microsoft.com

qiita.com

qiita.com

frogwell.co.jp

NFCタグを使って、iPhoneをより便利に使う

今回は NFC タグを使って iPhone のショートカットを実行し、iPhone をより便利に使うようにしてみる。

NFC の正式名称は「Near Field Communication」で、近距離無線通信規格の 1 つになる。 近距離の範囲は 10cm ほどで、NFC ではないが交通系電子マネーで支払うときのようなイメージを持ってもらえば大丈夫だ。 USB のように種類はあるが、運転免許証やマイナンバーカード、パスポートなどでも使われている。

NFC タグにはシールタイプがあり、10 枚入り 1000 円と手頃に入手が可能となっている。

https://www.amazon.co.jp/dp/B00GXSGL5G/www.amazon.co.jp

早速設定する

iPhone からショートカットを起動する。

右上の「+」ボタンをタップする。

個人用オートメーションを作成をタップする。

真ん中ぐらいまでスクロールすると NFC があるのでタップする。

NFC タグの「スキャン」をタップする。

このタイミングで、NFC タグをスキャンする。 タグの名前をつける案内も出るので、名前をつける。 今回は天気予報とした。

タグを読み込む部分は上記で終わり、ここからはタグにかざしたとき、実行してほしい処理を設定する。 今回は検索バーに天気予報と入力し、天気アプリをタップする。

天気アプリで行えることの一覧が出現する。 今回は「現在の天気を取得」をタップした。 そして、「次へ」をタップする。

すべての設定が完了して、最後の確認画面となる。 一番下の「実行前に尋ねる」をオフにして、右上の完了をタップする。

以上で設定は完了となる。

まとめ

NFC タグのシールタイプを使って iPhone のショートカットを設定した。 現在 2 枚のシールを使って、解説した天気予報と、省電力モードになるものを設定している。 まだ使い始めで模索中だが NFC タグならではの設定を見つけていければと思っている。

その他の自動化記事

yoshitaku-jp.hatenablog.com

yoshitaku-jp.hatenablog.com

ゲームセンターCXの放送日がわかるGoogleカレンダーを作成した

映像配信サービスの発展でテレビを見る機会は減っているが、自分が見続けているものに「ゲームセンター CX」がある。

otn.fujitv.co.jp

ゲームセンター CX は、お笑い芸人よゐこの有野がファミコンやスーパーファミコンなどのいわゆるレトロゲームをプレイしゲームクリアを目指す番組だ。 最近は YouTube でゲーム実況が流行っていたりするが、それらの前身となるものだと思っている。

大好きな番組だがケーブルテレビで不定期放送ということもあり見逃してしまうことがたまにある。 見逃さないためにはホームページにアクセスし、次回の放送日時を確認したり、番組公式 Twitter を注視する必要がある。 この辺りを自分から能動的に取りに行くのではなく、自動化したかったので Google カレンダー を作成した。

Google カレンダーを使っている人はスムーズに使ってもらえると思う。

calendar.google.com

なお、このカレンダーはあくまで 1 ファンが個人的に作ったもので、ゲームセンター CX の関係者には一切関係がない。

技術的な小話

今回は Google App Script（GAS）を使って Web サイトをスクレイピングし、Google カレンダーに予定を作成する方法をとった。 GAS を使った理由は 2 つあり、GAS 単体でスケジュール実行ができることと、Google カレンダーへの追加が容易（そう）だったからだ。

プログラムは 100 行ほどの手続き型で作成している。 Web サイトをスクレイピング、スクレイピングした情報を元にカレンダーを照会、新しい放送が入っていなければ予定を作成すると言ったことだ。 手続き型で作成した理由は、サクッと作成したかったことと今後の拡張性がなさそうと踏んだため、そのようにした。

新しい放送予定を追加できたときの通知方法は LINE を使用した。 当初は自分宛てに Gmail 経由で通知しようとしたが設定がうまくいかず、別の方法を模索した結果行き着いた。 トークンを生成し指定された URL を叩くだけなのでとても楽だし、簡素化されていて個人的なプロダクトだとこちらに寄せるほうが楽だと思った。 個人的に Slack に通知が来ると仕事の連絡と混同して身構えてしまうので、LINE だとそのようなこともなく良かった。

正常稼働を確認してから記事にするつもりだったが、不具合を見つけて遅くなってしまった。 画像が多いサイトだったので alt 属性からスクレイピングしていたが、alt 属性が前の放送日時のものになっていたりして、自分が実装する立場のときには気をつけようと身が引きしまるものを感じた。

GitHub Actionsを使って、個人タスク用のissueを毎日作成する

GitHub の issue で個人的なタスクを管理する方法を知った。 プログラマではないので普段から GitHub を使うことはないのだけれども、タスクの管理場所に迷っていたのでひとまず手を出してみようと思う。 毎日issueを作成するのも大変で、少しでもハードルを下げることを意識してGitHub Actionsで毎日自動的に作成するようにしてみた。 今回はその実現方法を記しておく。

issueのテンプレートを作成する

まずはissueを作成するためのテンプレートを作成する。 これから始めるのでまずはシンプルなものを作成し、今後必要があればカスタマイズする方向で進める。

今回はworkリポジトリを作成し、配下に.github/ISSUE_TEMPLATE/todolist.mdを作成した。

---
name: TODO リスト
about: 今日終わらせることの終了済み状態を書こう
title: ''
labels: 'tasks' 
assignees: 'yoshitaku-jp'

---

GitHub Actionsを作成する

次に毎日作成したいのでGitHub Actionsを設定する。

引き続きworkリポジトリ配下に.github/workflows/create_todolist.ymlを作成した。

GitHub ActionsはUTCで実行されるため、JSTの5時で実行されるようにした。 また、スケジュール実行の調査中に時刻通りに動いてくれないことも発生したため、手動実行の手段も残しておいた。

他の部分は参考にさせてもらった記事から引用させてもらった。

<2020/01/06 追記>

id:chatii0079 さんにコメントにて、issueのタイトルに挿入される日時が日本時間になっていないご指摘と修正方法をご連絡いただきました。ありがとうございます！ 下記ymlは修正済みのものです。 <追記ここまで>

name: create_todolist
on:
  schedule:
    - cron: "5 20 * * *"
  workflow_dispatch:
  
jobs:
  create_todolist:
    name: Create Todolist
    runs-on: ubuntu-latest
    steps:
    - name: Checkout
      uses: actions/checkout@v2
      
    - name: Get current date
      id: date
      run: echo "::set-output name=date::$(TZ=Asia/Tokyo date +'%Y/%m/%d')"
      
    - name: Create a new issue
      uses: imjohnbo/issue-bot@v2.3
      with:
        title: Today Tasks - ${{ steps.date.outputs.date }}
        pinned: false
        close-previous: true
        template: ".github/ISSUE_TEMPLATE/todolist.md"
      env:
        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

qiita.com