クイックノート

ちょっとした発見・アイデアから知識の発掘を

【MacBook Pro】Touch Barで音量調節などが消えた時の対応

MacBook Proにはキーボード上部に、
Touch Barと呼ばれるソフトウェアキーがあります。

予測変換をしたり、アプリケーションに合わせた操作をしたり、
音量や画面の明るさを調節したりと何かと便利なので多用しています。

ところが、先日下の画像のように、
Touch Barの右側が真っ暗になる現象に遭遇しました。

f:id:u874072e:20200924092217p:plain
Touch Barの右側が消えた

本来なら、ここに音量調節などが表示されているのですが、
消えて黒くなっています。

しばらくそのまま使っていたのですが、
結構不便ななので直してみました。

以降では、その時に行った対応をまとめておきます。

症状

Touch Barで音量などを調節する右側の領域が表示されず真っ暗になっている。

原因

Control Stripでエラーが生じている。

※Touch Barの右側の音量などを操作する部分はControl Stripと呼ばれるようです。

対応

Control Stripを再起動する。

困った時の再起動で解決でした。
問題が起こってるのはControl Stripの部分だけなので、
Control Stripだけを再起動して対応しました。

手順は以下の通りです。

  1. 「Cmd+Space」で「Spotlight検索」を起動
  2. 「Terminal.app」と入力してEnter
    f:id:u874072e:20200924093410p:plain
    ターミナルを起動
  3. ターミナル上で「killall ControlStrip」と入力してEnter
    f:id:u874072e:20200924093519p:plain
    killall ControlStrip

これでControlStripが終了されて、
自動的に再起動されます。

そして、Touch Barの右側も帰ってきました。

まとめ

Touch Barはあると便利だなくらいに思っていたのですが、
いざなくなってみると結構不便で、
なくなって初めてその大切さに気付きました。

天気が西から東に変わるという話

この前、妻と次のようなやりとりがありました。
妻「最近急に雨降ること多いから、雨雲レーダーアプリ入れた!」
私「じゃあ西側の雨雲見とけば良さそうだね」
妻「なんで西側?」
私「雲は西から東に動くからね」
妻「ふーん」

天気が西から東に向かって変わるというのは常識的な話だと思っていたのですが、
知らない人もいるようですね。

そこで、なぜ天気が西から東に変わるのかを説明してみましょう。

偏西風のせい

最初に答えを言ってしまうと、
偏西風によって雲が西から東に流れるから、
多くの場合、日本の天気は西から東に向かって変わっていきます。

偏西風とは、日本の上空に吹いている西風(西から東に向かう風)です。
学校で学んで記憶に残っている人も多いのではないでしょうか。
一方で、偏西風がなぜ吹いているのかは、
意外と知らない人も多いのではないでしょうか。

なぜ偏西風が吹いているのか

天気が西から東に変わる原因は偏西風ですが、
なぜ西から東に向かって風が吹いているのでしょうか。

その理由は次の二つです。

  1. 南北の温度差による大気の循環
  2. 南北方向の大気の循環が自転の影響によって曲がる

順にみていきましょう。

南北の大気の循環

地球では、赤道付近の気温が高く、
北極・南極付近の気温が低くなります。

空気は温められることで、膨張し上空へ昇っていくため、
赤道付近では上昇気流が発生します。
逆に、北極・南極付近では下降気流が発生します。

この南北の温度差で空気が大きく移動する循環が生まれるのですが、
単純に、赤道で昇って北極・南極で降りるだけにはなりません。

実際には下の図のように、
赤道で昇った空気は北極までたどり着く前に下降し、
北極付近で下降した空気は赤道にたどり着く前に上昇します。

その間に挟まれた領域では、
南側に下降気流、北側に上昇気流が生じていて、
地表付近では南から北に向かって大きな大気の流れが生じます。

f:id:u874072e:20200923222449p:plain
大気循環の略図

この南から北に向かう大気の流れが、
日本上空の雲の流れに影響を与えることになります。

自転による曲がり

上の話だと、風は南風(南から北に向かう風)になり、
一見、偏西風とは関係なさそうに思えます。

ところが、この南風が地球の自転の影響を受けることで、
西風に化けるのです。

コリオリの力

地球のように回転しているものの上で行われる運動には、
コリオリの力と呼ばれる力が働きます。

コリオリの力については、下の動画を見ると雰囲気を掴みやすいと思います。

北半球では、コリオリの力によって、
進行方向に対して右向きに曲がって動くようになります。

南風から西風に

南から北に向かう風が、 コリオリの力を受けると、どのような風になるでしょうか。

コリオリの力は北半球では右向きに働くので、
北を向いた時の右手方向、つまり、東側に力が働くことになります。

南から北に向かう大気の流れは、
コリオリ力によって、西から東に向かう方向に傾けられます。

この傾けられた大気の流れが偏西風の正体です。
そして、この風が雲を西から東へと運び、
日本の天気を西から東に向かって変えているのですね。

まとめ

常識の一つである「天気は西から東に変わる」の理由を、
掘り下げていく形で説明してみました。

これで天気は西から東に変わるが頭から離れなく... なることを祈ります。

CD/DVDブートができない時に対応したこと【HP PC】

「PCを廃棄するために、
CD/DVDブートするタイプのハードディスク消去ツールを使っていたところ、
CD/DVDブートができなくて次に進めない」
という相談を受けた時に対応した内容をまとめておきます。

環境

ざっくりとした環境は下の通り

PC: HPのデスクトップPC
ファームウェア: UEFI
OS: Windows 8

ブートの問題なのでOSは直接は関係ないですが、
このくらいの年代だとファームウェアUEFIであることが多く、
今回のブートの問題にも関わって来ていました。

症状

ハードディスク消去ツールの説明書の手順に沿って、
BIOSを起動し、ブートの「起動順序」を設定しようとするものの、
CD/DVDドライブが見当たらない。

※ブートデバイスとしてUEFIブートにいくつか項目が表示されていて、レガシーブートに何も表示されない

原因

セキュアブートが有効で、
レガシーブートが無効になっている。

HPのサポートページを調べると以下のようなページが見つかりました。

support.hp.com

出荷時の設定でセキュアブートが有効になっていて、
このセキュアブートが有効の状態ではCD/DVDからのブートを含んだ
レガシーブートができないことが原因のようでした。

対処法

基本的にはサポートページに沿って、
1. セキュアブートを無効
1. レガシーブートを有効
1. 起動順序を設定 しました。

セキュアブートの無効化

セキュアブートが有効だと、
レガシーブートを有効にできないようなので、
まずはセキュアブートを無効にします。

  1. PC起動直後「F10」連打でBIOSを起動する
  2. 「セキュリティ 」→「セキュアブート構成」を選択
  3. 「セキュアブート」を無効にする

レガシーブートの有効化

続いてレガシーブートを有効にします。

  1. 上の「セキュアブート構成」画面から「レガシーブート」を有効にする

起動順序を設定

  1. BIOSの画面から「起動順序」を選択
  2. レガシーブートのCD/DVDドライブを一番上に持ってくる
  3. 「F5」キーでUEFIブートを無効にする

今の場合、UEFIブートは邪魔になりそうなので、
無効にしておきました。

あとはBIOS設定を保存して再起動で、
めでたくCD/DVDブートができました。

用語豆知識

UEFI

UEFIとはUnified Extensible Firmware Interfaceの略で、
従来のBIOSに変わる新しいファームウェアの形態です。

UEFIに対して、従来のBIOSを「レガシーBIOS」と呼びます。
従来のBIOSを使ったブートを「レガシーブート」と呼びます。

セキュアブート

名前の通りセキュアにブートするための方式です。
下手なソフトウェアを起動しないようにしてくれるのですが、
CD/DVDブートを含んだレガシーブートも禁止されてしまうので、
今回は無効にする必要がありました。

まとめ

一昔前なら普通にできていた操作ができなくなることは結構あるものですね。 常に情報をアップデートすることの大切さを感じた事例でした。

正方形グリッドレイアウトを作りたい

ホームページを縦横の格子状に分割して、
要素を配置するグリッドレイアウト。

一つ一つの格子の幅と高さは指定する必要があるのですが、
画面のサイズに合わせてレスポンシブにしたいと思う場面は多々あります。

レスポンシブにする最も単純な方法は%で指定することですが、
画面の縦長・横長に応じて格子も縦長・横長になると不便なこともあります。

horidashiWebを作るときに、
正方形のグリッドを作るのにちょっと苦戦したので、
ここでその方法をまとめておきます。

f:id:u874072e:20200828151043p:plain
正方形グリッドレイアウト

画面いっぱいに配置する場合はvwが使える

まずは、horidashiWebのように画面幅いっぱいを使って、
グリッドレイアウトによる配置を行う場合です。

この場合は、ビューポートの幅に対する比率を指定するvwが使えます。

例えば下のように、
grid-template-columnsでグリッドの列の幅をビューポート幅の10%(10vw)
に指定して、10列分作って埋め尽くします。
grid-auto-rowsでグリッドの行の高さを幅と同じく10vwとして、
正方形グリッドの完成です。

<div id="" 
     style="display:grid; 
            grid-auto-rows:10vw; 
            grid-template-columns:repeat(10,10vw)">
<div>A</div><div>B</div><div>C</div><div>D</div><div>E</div><div>F</div><div>G</div><div style="grid-row:span 2; grid-column:span 2; background-color:lightblue">H</div><div>I</div><div>J</div><div>K</div><div>L</div><div style="grid-row:span 3; grid-column:span 3; background-color: tomato">M</div><div>N</div><div>O</div><div>P</div><div>Q</div><div>R</div><div style="grid-row:span 2; grid-column:span 2; background-color:lightyellow">S</div><div>T</div><div>U</div><div>V</div><div>W</div><div>X</div><div>Y</div><div>G</div>
</div>

全て同じ大きさだと味気ないので、
いくつかはgrid-row,grid-columnでサイズを変えています。

結果は下のようになります。
ただし、vwはブラウザの幅を基準にした割合になってしまうので、
はてなブログのようにサイドバーや余白などがあると、
突き抜けてしまいます。
そこで、下を表示するために、10vwの変わりに4vwとして微調整してます。

A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
G

親要素の幅いっぱいに配置する

ブラウザの幅いっぱいに配置する場合はvwでよかったのですが、
上のように、ブログの記事枠に納めようとするとvwは使えません。

それでは、親要素の幅いっぱいに配置するにはどうすれば良いでしょうか。

この場合、cssだけでどうにかする方法はなさそうなので、
javascriptの出番です。

下のコードでは、Nで列の数を指定して、
要素の幅をN分割した長さの正方形で、
グリッドを生成しています。

また、$(window).resizeで、
ウィンドウサイズが変更される度に、
グリッドの間隔を調整するようにしています。

<div id="grid" style="display:grid;">
<div>A</div><div>B</div><div>C</div><div>D</div><div>E</div><div>F</div><div>G</div><div style="grid-row:span 2; grid-column:span 2; background-color:lightblue">H</div><div>I</div><div>J</div><div>K</div><div>L</div><div style="grid-row:span 3; grid-column:span 3; background-color: tomato">M</div><div>N</div><div>O</div><div>P</div><div>Q</div><div>R</div><div style="grid-row:span 2; grid-column:span 2; background-color:lightyellow">S</div><div>T</div><div>U</div><div>V</div><div>W</div><div>X</div><div>Y</div><div>G</div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script>
<script>
    function adjust_grid(){
        var N = 10
        var size = $("#grid").width()/N
        $("#grid").css({'grid-auto-rows': size,
        'grid-template-columns': `repeat(${N}, ${size}px)`,
        'display':grid})
    }
    adjust_grid()
    $(window).resize(function(){
        adjust_grid()
    })
</script>

これで、下のように、記事欄の幅をいっぱい使って、
正方形を配置できました。

A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
G

まとめ

レスポンシブに格子の幅と高さの揃えた
正方形のグリッドレイアウトを作る方法を紹介しました。

ブラウザの幅いっぱいを使う場合には、
vwでビューポートの幅を参照すればcssのみでできます。

一方で、記事欄の幅いっぱいに広げるような場合には、
javascriptを使って、要素の幅を取得する必要がありそうです。

アクセスを集めるほど表示が小さくなるWebサービス紹介サイト「horidashiWeb」

Webサービスが身近な存在となり、
日々新しいWebサービスが現れています。

そんな中には、沢山のWebサービスの中に埋もれていくサービスもあり、
サービスをいかに認知してもらうかは開発者の大きな課題となっています。

通常はランキング等を通して、
アクセスを集めたサービスがよりユーザーの目に触れやすくなり、
さらにアクセスを増やすという正のフィードバックがかかります。
一旦アクセスを集めてからの加速は凄まじいですが、
一方で、埋もれるサービスを量産しやすい構造とも言えます。

そこで、あえて逆のアプローチをとり、
アクセスを集めるほどユーザーの目につきにくくなるような
Webサービスの紹介サイト「horidashiWeb」を作ってみました。

クリック数が増えると表示が小さくなる

通常であれば、よくクリックされるWebサービスを上位に表示したりして、
よりユーザーの目を引くように配置されます。

horidashiWebでは、逆にクリック数が増えるほど一覧の中で小さく表示します。

トップページにアクセスすると、
下の図のように登録されたWebサービスの一覧が表示されます。

f:id:u874072e:20200828130839p:plain
トップページ

ここで、真ん中の「切り抜き動画投稿サイト」を何度かクリックすると、
下の図のように、表示が小さくなりました。

f:id:u874072e:20200828131019p:plain
クリックしたサイトが小さくなる

これで、クリック数が少ないサイトほど大きく目立つようになります。

アクセスの平準化を狙う

通常のアクセス数が増えたサービスを目立たせるという、
正のフィードバックによるアプローチでは、
アクセスが集中するものと、そうでないものの格差が開き、
サービスが埋もれる原因となります。

逆に、アクセスを集めたものをユーザーの目に触れにくくする
負のフィードバックをかけることで、
未だアクセス数が少ないサイトにユーザーが流れやすくなります。
アクセス数が少なかったサイトがアクセスされるようになると、
そのサイトの表示も小さくなって、また別のサイトにアクセスが流れる・・・
といったように、様々なサイトにユーザーがアクセスすることが期待されます。

人とは違うことをしたい人へ

現在、大きく成功を納めているのは、正のフィードバックによって、
使われるものをより使われるものにするアプローチですが、
これが絶対に成功のアルゴリズムという訳ではありません。

下の本でも言われていたことですが、
みんなが使うようなサービスを使いたいという人がいる一方で、
人とは違うサービスを使いたい人もいるため、
アルゴリズムの正解は一つではありません。

そんな中で、特定のサービスへの集中を生み出し、
その他沢山のサービスを埋もれさせてしまうのはもったいないように思います。
サービスにも沢山の正解があって、
それを使いたいと思う人がいるはずです。

そして、そんなサービスを埋もれさせないように、
負のフィードバックをかけるというのも一つの正解になれば幸いです。

【R】abindの高速化

Rで二次元配列(行列)データに、
行を追加するならrbind、
列を追加するならcbindですが、
三次元以上の多次元配列にデータを追加するには・・・?

そう、abindを使えば、
多次元配列でも好きな次元にデータを追加できますね。

機械学習で画像を入力する場合などには、
画像の数 x 縦 x 横 の三次元データを扱うことが多いので、
abindにお世話になることも多いと思います。

ところが、このabindを使って、
画像を一つずつ追加して訓練データを作るみたいな使い方をすると、
処理にかなりの時間を要することがあります。

ここでは、そんなabindの処理を高速化する方法を紹介します。

遅いコードの例

画像を一つずつ読み込んで、
画像数x縦x横の三次元配列を作る事を考えます。

素朴に実装すると、下のコードのように、
for文内でabindを実行するコードになりそうです。

library(abind)
library(keras)

N = 1000
SIZE = 30

load_image = function(){
  array_reshape(diag(1,SIZE),dim = c(1,SIZE,SIZE))
}

x = NULL
for(i in 1:N){
  if(i %% 100 == 0) print(i)
  x = abind(x,load_image(),along=1)
}
dim(x)

load_imageは画像を読み込む関数の「つもり」で、
ここでは、画像は使わず単純にSIZExSIZEの単位行列を生成しています。
そして、array_reshapeで1xSIZExSIZEの三次元の形に直しています。

for文では、1xSIZExSIZEのデータを一次元方向に一つずつ結合しています。 最終的には、NxSIZExSIZEのデータが出来上がります。

このコードはもちろん望み通り動いてくれるのですが、
非常に遅いです。

高速化したコード

上のコードが遅い原因は、
for文の中でabindを実行しているためです。
この場合、毎回すでに結合済みのデータをコピーすることになるので、
ループが進むに連れてコピー処理のために時間が膨れ上がります。

このコピーの問題を避けるために、
forループでは結合する対象を一旦リストに格納しておき、
forループが終わった後にリストをまとめてabindで結合するという方法を取ります。

x = list()
for(i in 1:N){
  if(i %% 100 == 0) print(i)
  x[[i]] = load_image()
}
x = abind(x,along=1)
dim(x)

これで無駄なコピーを避けることができるので、
かなり高速に実行できるようになります。

計算時間の比較

実際にどのくらい早くなったかを記しておきます。

コード改善前は、全ての処理に約20秒かかっていましたが、
改善後は、約2秒で完了しました。

f:id:u874072e:20200826143518p:plain:w300
計算時間の比較

もちろん、この結果から、単純に10倍早くなると言える訳ではありません。

改善前のコードでは反復回数が増えるに連れて、
コピーする箇所が増えていくので、
反復回数が多ければ多いほど高速化の効果も大きくなります。

まとめ

お世話になるシーンの多いabindを高速化する方法を紹介しました。
素朴にabindをfor文の中で反復するとかなり遅く、
一度listに集めてから最後にabindで結合すると劇的に速くなりました。

手軽に動画の見所をシェア!【切り抜き動画投稿サイト】

最近、切り抜き動画と呼ばれる動画の一部分を抜き出して、
短く再編集された動画の需要が高まっています。

一般的には、切り抜き動画を作成する場合、
元の動画をダウンロードして、
動画編集ソフトで該当シーンをトリミングし、
エンコーディングの処理をして、
出来上がった動画をアップロードするという手順を経ることになります。
慣れないうちは少々手間がかかるため、これが若干のハードルとなるでしょう。

元の動画をダウンロードして編集するのではなく、
動画の再生箇所だけ指定してシェアできれば、
新たに動画を作ってアップロードする必要がないので、
大幅に手順を短縮できることでしょう。

そこで、「切り抜き動画投稿サイト」を作ってみました。
このサイトでは、動画の再生開始時間と再生終了時間をシェアし、
指定された箇所のみを再生することで、
切り抜き動画を作ることなく、
切り抜き動画のシェアを実現します。

下の動画は、実際にサイトを使って切り抜いた動画の例です。

以下では、サイトの特徴と簡単な使い方を紹介します。

手軽に切り抜き動画をシェアできる

通常、切り抜き動画をシェアするには、
元動画をダウンロードしてから、
動画を編集して、新しく切り抜き版の動画を作成した上で、
それをアップロードする必要があります。

切り抜き動画投稿サイト」では、
切り抜き動画を「作らず」に切り抜き動画をシェアします。
これによって、ダウンロード、エンコーディング、アップロードなどの
時間を要する手順をスキップすることができ、
短時間で、手軽に切り抜き動画をシェアすることができます。

切り抜き動画投稿の手順

切り抜き動画を投稿するには、まず、ユーザー登録をする必要があります。
シェアされた切り抜き動画を閲覧する場合は、ユーザー登録は不要です。

サイトにログインした後、以下の手順で切り抜き動画を投稿します。

  1. 元動画のURLをコピーする
    f:id:u874072e:20200814144126p:plain
    URLのコピー
  2. 「切り抜き動画投稿サイト」のトップページにURLを入力
    f:id:u874072e:20200814144216p:plain
    URLを入力
  3. 「切り抜き開始」をクリック(ログインしていないとログインが求められます)
  4. 切り抜きたい箇所をドラックして選択
    f:id:u874072e:20200814144348p:plain
    切り抜きたい時間を選択
  5. タイトル・概要を入力
    f:id:u874072e:20200814144456p:plain:h200
    タイトル・概要の入力
  6. 「切り抜き動画を投稿」をクリック

これで投稿の完了です。

コンテンツの重複を避けられる

切り抜き動画を投稿する人は、
元の動画を応援したいという気持ちもあって投稿していると思います。

ところが、元の動画の一部を投稿するということは、
動画配信サイト上に重複したコンテンツが存在することになります。

重複したコンテンツが存在する自体あまり望ましいと言えませんし、
また、元の動画の視聴者が切り抜き動画で満足してしまい、
元の動画の投稿者にとって不利益となる可能性があります。。

切り抜き動画投稿サイトでは、コンテンツはあくまで元の動画で、
再生位置のみをシェアするので、
切り抜きによって重複したコンテンツが生じることはありません。
また、切り抜き動画の再生はそのまま元の動画の再生になるので、
切り抜きが視聴者を奪うことも避けられます。

まとめ

切り抜き動画を作らずに動画を切り抜いてシェアする
切り抜き動画投稿サイト」を紹介しました。
記事の最初に載せたように、埋め込みコードを取得することで、
切り抜いた動画をブログやWebページに埋め込むこともできます。
時間をかけずに手軽にシーンをシェアしたい人は是非使ってみてください。

プライバシーポリシー