認定スクラムマスターを取得しました！

2/1 - 2/5に認定スクラムマスター取得のためのトレーニングを受講し、2/10に試験に合格して無事に認定スクラムマスターの資格を取得しました！
証書にはトレーニング完了日が記載されるようですね。

認定スクラムマスターを取得しようと思った経緯

2年前にアプリケーション開発者をしていたときにアジャイルの考えを取り入れた開発をしていました。
開発手法は私自身の興味領域でもあったので、これまでもスクラムガイドを読んだりスクラム関連の書籍を読んだりしてきました。
しかし、これからの仕事でスクラム開発に関わる可能性が出てきて、きちんとスクラム開発を学びたいと思い、認定スクラムマスターのためのトレーニングと認定取得にチャレンジすることにしました。

トレーニングの内容

トレーニングはこちらから申し込みました。
これで、5日間のトレーニングと2回の認定資格受験資格をもらえます。
www.odd-e.jp

5日間のトレーニングはすべてオンライン（Zoom）で開催されました。
9時から15時までワークショップを含めたトレーニングがあり、その後に16時まで質疑応答の時間が設けられていました。
ワークショップは少人数のチームに分けられてMiroを利用してリアルタイムにボードを編集しながら進めていきました。

トレーニングでの講義やワークショップでは、「アジャイルやスクラムで大切にしている考え方」や「スクラム開発での役割の理解」に関する内容が多かったです。
「デイリースクラムとは」「スプリントレトロスペクティブとは」という細かいプラクティスに関する内容は少なく、「アジャイルソフトウェア開発宣言」や「スクラムマスター・プロダクトオーナー・開発者の役割」「最初のインプットとなるプロダクトバックログとは」「チームの作り方」というようなベースとなる考え方の理解を重点的に解説やグループワークによる議論を進めていきました。

色々と勉強になる点は多かったですが、スクラムマスターの研修ということで参加前には「スクラムマスターはどんなことをしなければいけないのか学びに行こう」という気持ちでしたが、スクラムマスターは自立自走を促していって、最終的には何もしなくても問題ない状態になるよう働きかけていくということを学びました。

トレーニングを受けるにあたり、スクラムの前提知識はそこまで必要ではなかった気がします。ただ、トレーニング前に以下のドキュメントとサイトに目を通しておくように案内はありました。
こちらを事前に読んでおけば、トレーニングでついていけないということはないと思います。

• スクラムガイド https://www.scrumguides.org/docs/scrumguide/v2017/2017-Scrum-Guide-Japanese.pdf
• 2020年版 : https://www.scrumguides.org/docs/scrumguide/v2020/2020-Scrum-Guide-Japanese.pdf
• アジャイルソフトウェア開発宣言 http://agilemanifesto.org/iso/ja/manifesto.html
• Agile Principles http://agilemanifesto.org/iso/ja/principles.html
• スクラムリファレンスカード http://scrumreferencecard.com/ScrumReferenceCard-jp.pdf

個人的には15時以降の質疑応答の時間が楽しかったです。
講義の内容についての質疑応答ももちろんありましたが、「自分の現場ではこういう問題が起こっているけど、どうしたらいいか」というような相談会にもなっていて、他の参加者の実態なども知れて面白かったです。
その時間でトレーナーの方の話を聞いた結果、（スクラム開発ガイドには準拠するという前提で）問題が発生した時にこうするべきだというプラクティスはなく、関わる人たちの話を聞いてチームで解決できる道を考えていくという回答が多くありました。
スクラムマスターは答えを提示する役割ではなく、スクラムチームが自分たちで解決方法を見つけられるように促していくという役割であることが、質疑応答の時間からも理解できました。

テストの内容

トレーニングで認定試験を受験しても問題ないとトレーナーに判断されたら受験資格をもらえます。
（推測ですが、私の受けたトレーニングでは全ての方にトレーニング資格が届いていたのではないかと思う・・・）
資格試験は2回受験でき、一度は落ちても大丈夫とのことでした。

資格試験はWebで自宅から受験でき、日本語を選択可能で、選択式の問題でした。
スクラムガイドの内容を理解できていたら落ちない試験かと思います。

これから

今回、晴れて認定スクラムマスターになりました🎉
トレーニングの内容を理解できたことと、試験に合格したことで自信も得たので、これから仕事にも活かしていきたいと思います✊

また、研修の中でいくつか書籍も紹介いただいたので、それを読みつつ更に理解を深めていこうと思います。

(参考) 講義で紹介されていた書籍

リーン・スタートアップ　ムダのない起業プロセスでイノベーションを生みだす
学習する組織 ― システム思考で未来を創造する
大規模スクラム Large-Scale Scrum(LeSS)

動画のサイズを減らすffmpeg

オンラインの仕事も増えて、動画を作って触ることが増えました。
iMovieなどの動画編集ソフトで動画編集もするのですが、編集した動画をエクスポートすると基本的にファイル容量が増えてしまいます。（元々が200MB程度だった動画が1GB近くなったりしていた。）
動画を仕事相手に共有する際の制約などから動画のファイルサイズを小さくしたかったのですが、やり方が分からずとても苦労していました。
実際に編集ずみの動画を画面に流して画面収録で取り直したり。。。

そこで、ffmpegというツールを知り、コマンドで簡単に動画サイズを縮小できたので、自分用にMEMOしておきます。
具体的には、
元ファイル：200MB → 動画編集ずみ： 900MB → ffmpeg：200MB
くらいになったので、個人的には大満足の結果になりました。

インストール方法

macの場合は Homebrew を使って簡単にインストールできます。

brew install ffmpeg

WindowsやLinuxのパッケージもあり、ここからダウンロードできます。
Download FFmpeg

動画のサイズを減らす

動画には詳しくないのですが、CRFというエンコーダーの数値があり、それを指定して動画変換することで動画サイズを圧縮できました。

コマンドとしては以下のようにオプションを指定します。

ffmpeg -i input.mp4 -crf 18 output.mp4

圧縮方法によってCRFのデフォルト値は異なり、CRFの値は小さくなるほど品質が良く、大きくなるほど品質が悪くなっていきます。
こちらのサイトによればそれぞれの圧縮方法に対してのCRFデフォルト値は以下のようになっており、±6の変更によってファイルのサイズは半分もしくは2倍になるとのこと。

• x264 : 23
• x265 : 28
• 1080p HD video : 31

上記のコマンドとして記載している18は品質をかなり良いものにしているのですが、iMovieなどの動画編集ソフトで付けられた無駄なファイルサイズを削減することが目的であり、動画品質はなるべく落としたくなかったので全く問題ありませんでした。
動画変換後も私が感じ取れる品質の変化はありませんでした。

参考：
FFmpegで動画変換！各OSごとのインストール方法と使い方まとめ｜新卒エンジニアの開発日記
CRF Guide (Constant Rate Factor in x264, x265 and libvpx)

オンライン飲み会（やミーティング）を切り上げるためのクソアプリ

この記事はクソアプリ Advent Calendar 2020 - Qiitaに参加したかったけどできなくて羨ましくてクソゥ！な私が気持ちの供養のために作ったクソアプリの紹介です。

どんなアプリ作ったの？

オンライン飲み会では切り上げるタイミングがわからず、グダグダとなんの盛り上がりも無いまま時間が過ぎていくことがあります。
（そして、オンラインミーティングでは、参加者からの厳しい質問の中で回答が浮かばずにミーティングを切って逃げたくなることがあるでしょう。）
そんな時に、何か言い訳があれば…。みんなが仕方ないと思うような言い訳があれば…。
そんな全人類のためのアプリを作りました。…クソアプリじゃないな？？？

アプリの動き

言い訳が表示されているので、ラジオボタンで選択して「失礼します。 😫」ボタンを押します。
その言い訳に合わせた音声が流れてくれるので、あとは選択した「言い訳」と「失礼します」を申し訳なさそうな顔😫で言って「退出」ボタンを押しましょう。
「退出」できたら「抜け出し成功 😏」ボタンを押して音声を止めます。

実際のサイトはこちらで試せます。（音量注意）
オンライン飲み会を終ろう

クソアプリのイメージ動画です。（音量注意） https://t.co/GIcaiuczmJ pic.twitter.com/45R5wXvU65

— しょぼちむ 🤟 (@syobochim) 2020年12月16日

アプリのコードはこちらです。
github.com

音声の出し方

音声はHTMLの

HTMLに以下のように記載して

<audio id="aka-naki" preload loop>
    <source src="audio/aka-naki.mp3" type="audio/mp3">
</audio>

JavaScriptを使って再生する。
JavaScriptを使わなくてもHTMLだけで音源の再生は可能ですが、今回はボタンを押したイベントで音声を流したかった。

const iiwake = document.getElementById(reason);
// 再生
iiwake.play()
// 停止
iiwake.pause()

終わりに

本家のアドベントカレンダー、見ていてとても楽しい！

Macのストレージ容量が無い！容量が大きいファイルの調べ方＋フォルダごとのサイズを簡単に見る方法

Macのストレージ容量が逼迫してしまっていたけど、なんのファイルに容量が使われているのかすぐにはわからなかった。
こう見れば楽にわかったなというメモです。

まず、Macのストレージ容量は画面左上のアップルマークから「このMacについて」をクリックし、
表示されたポップアップから「ストレージ」のタブを開きます。

※原因だったファイルを消したのでキャプチャ取得時にはかなり余裕がありますが、残り23GBまで逼迫してました。

右上の「管理」のボタンをクリックすると、どの領域に容量を使っているのかがわかる画面が表示されます。

本来なら、ここで大きいファイルが表示されているはずでしたが、問題になっているファイルが大き過ぎたのか、なぜか表示されていませんでした。
（私の場合はiMovieのプロジェクトファイルが原因で300GBありました。iMovieの操作の中でファイルがバックグラウンドで作成されていたので、300GBのファイルを意図的に作成・ダウンロードしたわけではなく気づけませんでした。）

また、この表示だと「このファイルがどのフォルダにあるものなのか」もわかりにくくなっており、ファイルをサクサクと消しても良いのかどうかが判断しにくくなっています。

対応といっても単純なことなのですが、画面上部の「大きいファイル」から「ファイルブラウザ」に変更します。
これにより、どのフォルダにストレージ容量がかかっているのかを見てファイルを掘り下げていくことができました。
ファイルを右クリックするとゴミ箱にもこの画面から入れられるので、ファイルの整理が簡単にできます。

macOS Catalina

macOS Big Sur

【Electron】アプリを全画面モードでも他のデスクトップに移動しても常に最前面に表示する

Electronでアプリを作りました。

アプリは

• ワークスペース（デスクトップ）を切り替えても表示される
• 他のアプリよりも前に表示される
• 他のアプリを全画面表示した時も前に表示される
• Keynoteをプレゼンテーションモードにした時も前に表示される

としたかったです。

特に4つ目のKeynoteでのプレゼンテーションモードが一筋縄ではいきませんでしたが、最終的にはこんな感じで実現ができました。

package.json の main で定義している main.js にてウィンドウを開くときに設定を追加していきました。

const { app, BrowserWindow } = require("electron");
const is_mac = process.platform==='darwin'     // macOSかどうかの判定をする

if(is_mac) {     // macOSの時のみこの設定を反映する
  app.dock.hide()          // Dockを非表示にする
}

const MAIN_WINDOWS_WIDTH = 300;
const MAIN_WINDOWS_HEIGHT = 350;
function createClapWindow() {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: MAIN_WINDOWS_WIDTH,
    height: MAIN_WINDOWS_HEIGHT,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
    }
  })
  mainWindow.setAlwaysOnTop(true, "screen-saver")    // 常に最前面に表示する
  mainWindow.setVisibleOnAllWorkspaces(true)      // ワークスペース（デスクトップ）を移動しても表示される
  mainWindow.loadFile('public/reaction.html')
}

app.whenReady().then(() => {
  createClapWindow()
})

app.dock.hide() の設定によって、macOSにて全画面モードで開いた時にその上に表示できるようになります。
Windowsにはこの設定はないので、事前にmacOSであるかどうかを判断してmacOSの時のみ設定を適用しています。

mainWindow.setAlwaysOnTop(true, "screen-saver") の設定をすることで、キーノートのプレゼンテーションモードの時にも最前面に表示されるようになります。
BrowserWindow にも alwaysOnTopのプロパティを持っていますが、これに true を設定してもキーノートのプレゼンテーションモードでは適用されませんでした。（他のアプリの全画面モードでは最前面に表示されたのに。。。）

mainWindow.setVisibleOnAllWorkspaces(true) の設定で、ワークスペース（デスクトップ）を切り替えても一緒に移動して表示されるようになります。

これらの設定で実現できました。

参考

• https://www.electronjs.org/docs/api/browser-window
• https://www.electronjs.org/docs/api/dock
• https://discuss.atom.io/t/set-browserwindow-always-on-top-even-other-app-is-in-fullscreen/34215/2
• https://stackoverflow.com/questions/48367441/make-electron-window-able-to-receive-click-event-when-above-keynote-app

【Electron】アプリの背景を透明にしてマウスイベントも拾わせない

Electronでデスクトップアプリを作りました。 その中で

• 背景を透明にしたい
• フレームを消したい
• サイズを変えてほしくない
• ウィンドウに影をつけない（背景を透明にしたときに文字の影のような者が出てきていた）
• マウスでクリックさせたくない（選択などもできないようにする）
• 開発者モードを開いてほしくない

という設定をしたので、それのメモです。 あまりネットでまとまっているものがなかったので、参考までに。

package.json の main で定義している main.js にてウィンドウを開くときに設定を追加していきました。

const { BrowserWindow } = require("electron")

function createClapWindow() {
  // ウィンドウを作る
  const mainWindow = new BrowserWindow({
    transparent: true,   // ウィンドウを透明にする
    frame: false,     // フレームをなくす
    resizable: false,    // 画面の大きさを変えさせない
    hasShadow: false,    // ウィンドウに影をつけない
    webPreferences: {
      devTools: false       // 開発者モードを表示させない
    }
  })
  mainWindow.setIgnoreMouseEvents(true)     // マウスイベントを無視させる
  mainWindow.loadFile('public/index.html')
}

この設定で、Electronのブラウザらしさが無くなって、デスクトップアプリっぽく動いてくれました。

参考リンク BrowserWindow | Electron

GitHubで特定のリポジトリをピン留めする

GitHubのプロフィールに表示されているリポジトリをカスタマイズした時のメモです。
今はかなり昔に作ってスターを付けてもらったリポジトリがトップに表示されていました。
いま力を入れているリポジトリをプロフィールに表示したいと思っていたら設定がありました。

まず、プロフィールページの「Customize your pins」を押します。

そうするとポップアップでGistsとリポジトリの一覧が表示されるので、それにチェックを付けて「Save pins」ボタンをクリックします。

これでプロフィールページにPinを付けたリポジトリが表示されます。