よしたく blog

ほぼ週刊で記事を書いています

リセット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の拡張から検索してインストールするだけになる。

f:id:yoshitaku_jp:20210214133114p:plain

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

f:id:yoshitaku_jp:20210214134224p:plain

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

f:id:yoshitaku_jp:20210214134333p:plain

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

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

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

設定方法

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

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

f:id:yoshitaku_jp:20210207120516p:plain

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

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

f:id:yoshitaku_jp:20210207121219p:plain

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

f:id:yoshitaku_jp:20210207121631p:plain

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

f:id:yoshitaku_jp:20210207121751p:plain

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

f:id:yoshitaku_jp:20210207121903p:plain

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);
}

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

f:id:yoshitaku_jp:20210207120443p:plain

まとめ

今回は 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管理者」をクリックする。 f:id:yoshitaku_jp:20210131102319p:plain

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

f:id:yoshitaku_jp:20210131102825p:plain

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

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

qiita.com

参考記事

docs.microsoft.com

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

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

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

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

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

まずはPowerBIを起動して、サンプルデータを取得する。 「サンプルデータを取得する」をクリックする。 f:id:yoshitaku_jp:20210123084055p:plain

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

f:id:yoshitaku_jp:20210123084122p:plain

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

f:id:yoshitaku_jp:20210123084149p:plain

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

f:id:yoshitaku_jp:20210123084341p:plain

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

f:id:yoshitaku_jp:20210123085438p:plain

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

f:id:yoshitaku_jp:20210123085635p:plain

ロールを設定する

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

f:id:yoshitaku_jp:20210123090108p:plain

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

f:id:yoshitaku_jp:20210123090211p:plain

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

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

f:id:yoshitaku_jp:20210123090741p:plain

f:id:yoshitaku_jp:20210123090816p:plain

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

f:id:yoshitaku_jp:20210123091046p:plain

f:id:yoshitaku_jp:20210123091213p:plain

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

f:id:yoshitaku_jp:20210123091231p:plain

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

f:id:yoshitaku_jp:20210123091626p:plain

レポートを発行する

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

f:id:yoshitaku_jp:20210123094519p:plain

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

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

f:id:yoshitaku_jp:20210123095038p:plain

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

f:id:yoshitaku_jp:20210123095147p:plain

まとめ

今回は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 からショートカットを起動する。

f:id:yoshitaku_jp:20210116101039p:plain

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

f:id:yoshitaku_jp:20210116101106p:plain

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

f:id:yoshitaku_jp:20210116101115p:plain

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

f:id:yoshitaku_jp:20210116101123p:plain

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

f:id:yoshitaku_jp:20210116101131p:plain

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

f:id:yoshitaku_jp:20210116101138p:plain f:id:yoshitaku_jp:20210116101146p:plain

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

f:id:yoshitaku_jp:20210116101155p:plainf:id:yoshitaku_jp:20210116101203p:plain

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

f:id:yoshitaku_jp:20210116101211p:plain f:id:yoshitaku_jp:20210116101219p:plain

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

f:id:yoshitaku_jp:20210116101226p:plain

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

まとめ

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

iPhoneのデフォルトカメラをMicrosoft Pixに変更する

iPhone のショートカットを導入してから、身近なところの効率化に興味が湧いている。 自分が繰り返し実行する iPhone 操作を思い返すと、カメラを使う時はデフォルトではなく Microsoft Pix を使うことが多い事に気がついた。 そして iPhone の待ち受け画面右下にあるカメラアイコンから起動させていないことも気がついたので、ここに Microsoft Pix を当てはめられないか調べ割り当ててみた。

ちなみに、Microsoft Pix は Microsoft が開発しているカメラアプリで、エンジニアには無音設定ができるカメラとしてカンファレンスなどの勉強会で使われることが多いと思う。 自分は普段使いでも料理を撮るときに使っている。 以前開発を停止する案内があったが、ここ最近 Pix という名前で突如復活した。 知らない人のために紹介しておく。

Microsoft Pix カメラ

Microsoft Pix カメラ

  • Microsoft Corporation
  • 写真/ビデオ
  • 無料
apps.apple.com

待ち受け画面のショートカットは設定ができない

最近の iPhoneウィジェット機能が追加されたり少しずつ変わっていっているが、現在のところ待ち受け画面にあるカメラのアイコンとライトのアイコンを変更する方法は無い。 Apple の思想的に変更できることはなさそうだが、ウィジェットが入ってきたことを考えると今後変更ができそうかなという思いもある。 待ち受け画面のカメラアイコンに Microsoft Pix を設定できれば最高だったが、できないことなので別の方法を模索する。

カメラを起動した時に Microsoft Pix を起動させる

そこで、カメラの起動に対して Microsoft Pix を起動させるショートカットを設定する。 そうすることで、通常のカメラを起動したタイミングで Mixrosoft Pix が起動する。

設定方法

まずはショートカットアプリを開き、右上の「+」ボタンをタップする。

f:id:yoshitaku_jp:20201230150244p:plain

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

f:id:yoshitaku_jp:20201230150325p:plain

下にスクロールし、「App」をタップする。

f:id:yoshitaku_jp:20201230150415p:plain

「選択」をタップする。

f:id:yoshitaku_jp:20201230150820p:plain

アプリを選択する画面になるので「カメラ」と入力し、カメラをタップする。 その後、「完了」をタップする。

f:id:yoshitaku_jp:20201230150846p:plain

f:id:yoshitaku_jp:20201230150948p:plain

「App」がカメラになっていることを確認し、「次へ」をクリックする。

f:id:yoshitaku_jp:20201230151004p:plain

「アクションを追加」をタップする。

f:id:yoshitaku_jp:20201230151019p:plain

「スクリプティ」をタップする。

f:id:yoshitaku_jp:20201230151033p:plain

「Appを開く」をタップする。

f:id:yoshitaku_jp:20201230151046p:plain

「選択」をタップする。 次にアプリを選択する画面になるので「Pix」と入力し、「Pix」をタップする。 その後、「次へ」をタップする。

f:id:yoshitaku_jp:20201230151101p:plainf:id:yoshitaku_jp:20201230150934p:plain f:id:yoshitaku_jp:20201230150918p:plain

最後に、「実行前に尋ねる」をオフにする。

f:id:yoshitaku_jp:20201230151119p:plainf:id:yoshitaku_jp:20201230151142p:plain

実行の様子

カメラアプリをタップして起動

f:id:yoshitaku_jp:20201230154733g:plain

待ち受け画面からも自動起動ができている

f:id:yoshitaku_jp:20201230154739g:plain

デメリットは通常のカメラアプリが使えない

実行前の確認をスキップする設定にしているので、この設定を組み込むと通常のカメラアプリが使えなくなる。 どうしても使いたくなったら、ショートカットから設定を無効にすると使える。 自分は今のところ困ったことはない。

yoshitaku-jp.hatenablog.com

コミットした日時を変更する

LeetCode で問題を解いた後にコミットを忘れることがあった。 細かいことではあるが、解いた日とコミットをちゃんとリンクさせておきたいと思ったため、git の日時を修正する方法を調べた。 おこなっていることは日時の変更で歴史の改ざんにあたってしまうので、あくまで自分の利用の範囲内だけでに留めて悪用しないことは意識してほしい。

そもそも Author と Committer がある

コミットの日時を変更するにあたり、コミットの情報には Author と Committer が存在していることを知った。 Author はコードを書いた人、Committer はコミットをした人になる。そして、それぞれおこなった日時が記録されている。 もちろん初めてコードを書いて、コミットした時は Author と Comitter は同じ人物になり、日時も同じになる。 仮にgit commit --amendなどでコミットを変更した時は、Comitter は別の人になるが、Author は最初にコミットした人物となる。 2 つ存在している理由は、元々の作成者とコミットした人を分けることで歴史の改ざんをおこなった場合でも記録しておくためである。

git logで表示されるものは Author の情報が確認できる。 Comitter の情報も確認する時はgit log --pretty=fullerを実行すると確認できる。

f:id:yoshitaku_jp:20201228150850p:plain

git rebase で改変する

まずは rebase を使って、コミットを変更する操作をおこなう。 git rebase -i HEADで rebase を実行する。 対象のコミットを edit に変更する。

git commit --amend --date="Thu, 31 Dec 2020 14:59:59 GMT"
git rebase --continue

rebase オプションの--committer-date-is-author-date

次にgit rebaseのオプションにある--committer-date-is-author-dateを実行する。 これをおこなうことで、Committer の日付を Author に適用できる。

https://git-scm.com/docs/git-rebase/2.17.0#Documentation/git-rebase.txt---committer-date-is-author-date

https://git-scm.com/docs/git-am#Documentation/git-am.txt---committer-date-is-author-date

参考にした記事

qiita.com

改変自体はシンプルな内容だったので記事を参考にさせてもらい、補足情報やURLをいくつかいれました。