動画のサイズを減らす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を付けたリポジトリが表示されます。

オンラインのイベントがさみしくて拍手👏アプリを作りました

最近オンラインでのイベントが増えてきましたね。
オフラインで集まってイベントをしていた頃とは違い、オンラインのイベントだとなかなか参加している人のリアクションが見えにくく、
「参加者の人が楽しんで聞いてくれているか分からない」
「参加者のリアクションがなくて寂しい」
「発表でウケているかわからない」
「イベントをもっと盛り上げたい」
そう感じている方も多いのではないでしょうか。

そこで、参加者からリアクションが送れるアプリ、ClapHandを作りました！
このアプリを使うとこのようにパソコンのデスクトップ画面に絵文字を表示して、参加者の方がリアクションすると数字がリアルタイム にカウントアップされていき、参加者の盛り上がりが可視化されます。

そして、同じイベントに参加している他の登壇者と盛り上がりを競い合うこともできます！

参加者はリアクションをしよう！

発表者から共有されたリンクを開くとこのようなページが表示されます。
絵文字をクリックすると発表者にリアクションが届きます。

右下の「Result」ボタンをクリックすると、同じイベントに参加している発表者のリアクションの数字が見られます。
発表者を応援する気持ちで、たくさんリアクションしましょう！👏👏👏👏

始め方は簡単４ステップ

現在 macOS Catalina / Windows 10での動作を確認しています。

1. アプリのインストール

GitHubのReleaseページにアクセスし、プラットフォームに合わせたアプリをダウンロード・インストールします。
Releases · syobochim/ClapHandApp · GitHub

2. イベントを作る

アプリを起動するとメニュー画面が開くので、「Create Event」ボタンをクリックします。

3. イベントの設定をします

イベントの設定を入力して「Create Event」ボタンを押します。

• Event Name (必須) : イベント名を入力します。
  • イベント名をイベントのハッシュタグなどで統一すると他の発表者のカウントもグラフで確認できます。
• Owner (必須) : 発表者の名前を入力します。
• Emoji (任意) : 参加者にリアクションしてほしい絵文字を入力します。
  • 省略すると👏が登録されます。

4. 参加者にシェア！

表示されたURLとQRコードを参加者にシェアします！

あとはアツイ発表を届けるだけ！

表示する位置を変更できる

MacOSのメニューバーとWindowsのタスクトレイから、デスクトップアプリの表示位置を変更できます。
デフォルトは右下に表示されています。

• Top Right : 右上
• Top Left : 左上
• Bottom Right : 右下（デフォルト）
• Bottom Left : 左下

終わりに

オンラインでのイベントをもっともっと楽しんで・盛り上げていきましょう！
皆さん是非使ってみてください！👏👏👏

これから追加開発も進めていきます。一緒に開発に協力いただける方も募集中！