2020-12-17

菅（ガースー）、GoToやめるってよ

雑記

今月14日に、GoToトラベルが一時停止されることが発表されましたね。
22日からは4都市(札幌、大阪、名古屋、東京)が対象外になり、28日から全国一律で停止らしいです。

正直言って…

f:id:niwaka1535:20201217091107j:plain

先月の「勝負の3週間」宣言の時点で、「今すぐ取り止めたらいいのに…」と思った人も少なくないはず。
様々な事情があって、その時すぐに中止するのは難しかったんだと思いますが、今回の一時停止についても結局は急な発表になってしまっていますね。

16日の羽鳥慎一モーニングショーで、GoToトラベル一時停止におけるキャンセル料の補償の話が取り上げられていたのですが、その際にコメンテーターの玉川さんが「一定の基準を設けて『それを超えたら自動的にGoTo止まりますよ』って事前に決めておけば(補償とか無しに)すんなり止められていたんじゃないか」と言っていました。

本当にその通りだなと。
「勝負の3週間」を宣言した時点で、上手くいかなかった場合を想定していなかったんだなと。
ちゃんと想定していれば、GoToトラベル一時停止の発表前日に徹夜して決めるなんてことは必要なかったはずですしね。

まとめ

f:id:niwaka1535:20201217155846p:plain

f:id:niwaka1535:20201217155925j:plain

さて、勝負の3週間でコロナの抑え込みに失敗した政府は、今後どうしていく予定なんですかね…

2020-11-20

【PHP】配列操作に便利な関数

php tips

久しぶりにPHPを触ることになりそうなので、のうはうを棚卸しした記事です。

array_columnの存在を知った時に書き留めておいた内容だったと思います。

主に以下の配列操作に関係する関数についての説明と使い方の例を記載しています。

array_column
array_filter
array_search

これらはPHP5.5以降なら使えるようですね。

配列の検索

DBのPK検索と同じ事ができる。

<?php
function selectHogeForPK($hogePKey) {
    return array_filter([
        0 => [
          'hogePKey' => 2,
          'sortOrder' => 2,
          'createTime' => '2017-11-16 10:58:59',
          'updateTime' => NULL,
        ],
        1 => [
          'hogePKey' => 3,
          'sortOrder' => 3,
          'createTime' => '2017-11-16 10:58:59',
          'updateTime' => NULL,
        ],
    ], function ($value, $key) use ($hogePKey) {
        return $hogePKey === $value['hogePKey'];
    }, ARRAY_FILTER_USE_BOTH);
}

交差テーブルから別のPKを取得するだけなら、これでも可能。

<?php
function selectHogeForPK($fooPKey) {
    return current(array_column(
        array_filter([
            [
              'fooPKey' => 5,
              'hogePKey' => 2,
            ],
            [
              'fooPKey' => 6,
              'hogePKey' => 3,
            ],
        ], function ($value, $key) use ($fooPKey) {
            return $fooPKey === $value['fooPKey'];
        }, ARRAY_FILTER_USE_BOTH),
    'hogePKey'));
}

配列の便利機能 `array_column`

例

<?php
$sumple = [
    ['id'=>11,'value'=>'a']
    ,['id'=>12,'value'=>'b']
    ,['id'=>13,'value'=>'c']
];

array_columnは3通りの使い方がある。

`array_column(array, key)` : ある要素(フィールド)だけ取り出す

$result = [
    0=>'val'
    ,1=>'val',...
];

【例】

<?php
$result = array_column($sumple, 'value');
$result === [
    0=>'a'
    ,1=>'b'
    ,2=>'c'
];

`array_column(array, key1, key2)` : あるフィールドをキー、あるフィールドを値にした連想配列にする

[
    'val2'=>'val1'
    ,'val2'=>'val1',...
]

【例】

<?php
$result = array_column($sumple, 'value', 'id');
$result === [
    11=>'a'
    ,12=>'b'
    ,13=>'c'
];

`array_column(array, null, key)` : 行を値にした連想配列にする

[
    'val'=>['key'=>'val',...]
    ,'val'=>['key'=>'val',...],...
]

【例】

<?php
$result = array_column($sumple, null, 'id');
$result === [
    11=>['id'=>11,'value'=>'a']
    ,12=>['id'=>12,'value'=>'b']
    ,13=>['id'=>13,'value'=>'c']
];

PHPのarray_columnが便利 - Qiita

要するに、配列in配列(2次元配列)の操作が簡単に行えるということ。

(とりあえず例。array_filterと組み合わせて利用している)

<?php
funcion test() {
    return current(array_column(array_filter($mstTable, function ($value, $key) use ($tableFk) {
        return $tableFk === $value['tableFk'];
    }, ARRAY_FILTER_USE_BOTH), 'mstTablePk'));
}

指定した値を配列で検索し、見つかった場合に対応する最初のキーを返す `array_search`

$key = array_search(val, array)

array_columnと組み合わせて利用していた箇所があった。

<?php
$result = array_search(2, [
    'a'=>1
    ,'b'=>2
    ,'c'=>3
    ,'d'=>1
    ,'e'=>2
    ,'f'=>3
]);
echo $result; // b

どういう時に便利だったのか思い出せない。

おわりに

そういえば、まだPHPの記事は一つも書いたことが無かったですね。

HTMLやCSSなどの記事が多かったので、フロントエンドの人と思われていた方もいるかもしれないですね(笑)

冒頭にも書いた通り、しばらくPHPを触ることになりそうなので、今後はPHP関連の記事もちょくちょく書いていこうと思います。

2020-11-12

【学習記録】ブラウザのレンダリングについて

こちらの記事を読んで学習。

ブラウザレンダリング入門〜知ることで見える世界〜 - Qiita

レンダリングとは

「レンダリング」を「描画」と覚えていたのですが、描画の為の計算なども含めてレンダリングでした。

厳密には、以下の通り。

データ記述言語やデータ構造で記述された抽象的で高次の情報から、コンピュータのプログラムを用いて画像・映像・音声などを生成することをいう。 (中略) "render" の原義は「表現する、翻訳する、（脚本などを）上演する」などの意味。

レンダリング (コンピュータ) - Wikipedia

レンダリングの流れ

f:id:niwaka1535:20201029091811j:plain

Parse
- DOM Treeを作成
- Style Rulesを作成
Style
- Render Treeを作成
Layout (Reflow)
- Layout Treeを作成
Paint
- Paint Recordsを作成
- Layer Treeを作成
Composite

ブラウザとレンダリングエンジン

Chrome
- Blink
Safari
- Webkit

疑問(もう少し深堀りしたい情報)

ready(load)とかDOMContentLoadedのイベントはどのタイミング？

2020-10-31

ファイルを連続でダウンロード【js】

javascript tips

先日、お仕事で帳票出力の機能を作っていた際に、動作確認用に作成したコードの改良版を作ってみた。

function downloadFile(path, name) {
    var anc = document.createElement('a');
    document.body.append(anc);
    anc.href = path + name;
    anc.download = name;
    anc.click();
}

for (i = 1; i<=10; i++) {
    var path = 'http://localhost/download/';
    var time = i*1000;
    setTimeout(((i,time,path)=>()=>{
        var name = 'file'+i+'.pdf';
        console.log(path+name+' : '+time)
        downloadFile(path, name)
    })(i,time,path),time);
}

1機能で様々なデータ＆フォーマットの帳票を出力する機能だったので、そのファイルの内容を確認するのに、1つ1つダウンロードボタンを押して確認するのに地味に時間がかかってたんですよね。

なので、直接リクエスト投げて自動化してみたというわけです。

このスクリプトのおかげで、だいぶ時間短縮ができました。
このスクリプトを書くのにも、結構時間を消費しちゃったんですけどね(笑)

2020-10-11

【動画】自作のGoogle Chrome拡張を入れる

Chrome拡張機能

以前、自作のChrome拡張の入れ方を記事にしました。

自作のGoogle Chrome拡張を入れる - 仁和歌ブログ

実はこの手順を作成するとき、画面操作を録画しておいて、必要な部分だけ切り出して記事に使ったんですよね。

その時の動画が残ってたんで、それを切り貼りして、音楽つけて、一本の動画としてまとめてみました。

それがこちらです。

てってってー♪

漂うニコニコ感(笑)

動画編集している間、ちゃんと形になるのか心配だったんですが、音楽いれたらそれだけで「それっぽく」なりました。

音楽の力ってすごい(笑)

おわりに

この動画を作るのに、実はこれで7時間くらいかかりました。

いらない部分を削るのと、字幕を付けるくらいしかやってないのですが、文字が表示されるタイミングや次のシーンまでの間隔などを調整していたら、気が付いたらそれくらい経過していました。

動画編集って思っていたより大変なんですね…

時間をかけて作った割に、思っていた程の効果は得られなかったり…。コーディングと近い部分を感じました。

では、今回はこの辺で(動画っぽい〆

サムネイルが自動再生される【YouTube】【スマホ】

tips

今回はYouTubeで動画が勝手に再生されないようにする設定の手順をご紹介します。

何故か動画が途中から再生されてしまうという人にも役立つ情報だと思います。

1.画面右上のユーザアイコンをタップ

f:id:niwaka1535:20201002084510j:plain

2.「設定」をタップ

f:id:niwaka1535:20201002084527j:plain

3.「全般」をタップ

f:id:niwaka1535:20201002084541j:plain

4.「フィードでミュート再生」をタップ

f:id:niwaka1535:20201002084908j:plain

5.「オフ」をタップ

f:id:niwaka1535:20201002084623j:plain

これで、一覧の動画が勝手に再生されなくなります。

手順を記事にした経緯

最近スマホ版のYoutubeで動画を見る事が増えているのですが、その際、少し面倒な挙動がありました。

最新動画一覧から見た動画が、何故か途中から再生されてしまうんです。

一度見た動画なら、前に見終わった部分から再生されるのはわかるんですが、初めて見る動画なのに途中から再生されてしまうんです。

色々試していたら、どうやら「一覧で動画が自動で再生され、その再生位置から継続して視聴を開始」という挙動のようでした。

「じゃあ、設定からサムネイルの自動再生をOFFにすればいいか」と簡単に思っていたんですが…

設定の場所がわかりづらかった…

まず「自動」とか「オートプレイ」って単語で探してたので、「フィードでミュート再生」という設定項目を見たときに「ミュートかそうじゃないかは関係ないな」ってなってしまったんですよね。

説明にも「動画を音声なしで再生するかを選択」って書いてますし(笑)

f:id:niwaka1535:20201002091534j:plain

今思うと「音声なしで再生する」じゃなくて「再生するかを選択」で区切るかもしれないですね…

あと、「フィードでミュート再生」の選択肢で「なし」ってなると、「ミュートオフ」だと思うじゃないですか(笑)

f:id:niwaka1535:20201002092139j:plain

いや、本当にわかりづらかったのです。

というわけで、初めて見る動画が途中から再生される事象に遭遇してる人は他にも居そうだなと思ったのと、設定手順がわかりにくかったので、その情報を共有したかったというのが今回の経緯でした。

経緯…ていうか文句でしたね(笑)

2020-09-25

【簡単】Chrome拡張機能の作り方

Chrome拡張機能

フォルダを作る
manifestファイルを作る
本体を作る
Chromeに追加する
動作を確認する

1. フォルダを作る

デスクトップでも何処でも良いので、フォルダ(ディレクトリ)を一つ作ってください。

フォルダの名前はとりあえず「Chrome拡張」で。

そうすると、以下の感じになります。

C:\Users\<user>\Desktop\
　└ Chrome拡張\

<user>の部分は、自身のユーザ名に置き換えて読んでください。

Cドライブの下の、Usersフォルダの下の、ユーザフォルダの下のデスクトップに、「Chrome拡張」というフォルダがある。ということになります。

2. manifestファイルを作る

先程の「Chrome拡張」フォルダに、manifest.jsonを作成します。

manifest.jsonを作成するには、「新しいテキストドキュメント.txt」を作成し、ファイル名を編集してmanifest.jsonに変更します。

もし「.txt」が表示されていない場合は、以下を参照して拡張子を表示してからファイル名を変更してください。

【入門】ファイル拡張子を表示しよう - 仁和歌ブログ

manifest.jsonが作成できたら、そのファイルをダブルクリックして、内容を編集。

以下の内容をコピーして貼り付けて、保存してください。

{
  "name": "Test",
  "description": "test",
  "version": "0.1.0",
  "content_scripts": [{
    "matches": ["https://mail.google.com/mail/*"],
    "css": ["style.css"]
  }],
  "action": {
    "default_title": "TEST"
  },
  "manifest_version": 3
}

【2022/08/07追記】manifestバージョンを3にしました。どのサイトでも使用するにはcontent_scriptsのmatchesを"matches": ["<all_urls>"],にしてください。

もし、Sublime TextやVisual Studio Codeなどのテキストエディタを使っていたなら、エディタの方で新規ファイル作成し、保存する際にmanifest.jsonというファイル名で保存しても大丈夫です。

現状、以下の感じになっていると思います。

C:\Users\<user>\Desktop\
　└ Chrome拡張\
　　└ manifest.json

3. 本体を作る

拡張機能として実際に機能する本体を用意する必要があります。

今回は画面にCSSを適用するだけの拡張機能にしたいと思います。

CSSはこちらのGmailのツールチップを非表示にするCSSを使用したいと思います。

Gmailの受信トレイでメール一覧にマウスカーソルを合わせると現れるツールチップが鬱陶しいので非表示にしてみた - 仁和歌ブログ

先程の「Chrome拡張」フォルダに、style.cssを作成し、以下をコピーして貼り付けて保存してください。

/* ツールバー非表示 */
ul[role=toolbar]{display:none;}
/* ルールバーに合わせて件名の幅が変更されるスタイルを上書き */
body .Zs .zA:hover>.WA+.yX{max-width:calc(100% - 76px - 110px);}
/* ルールバーに合わせて受信日時の表示が変更されるスタイルを上書き */
body .zA.aqw>.xW{display:flex;}
/* ルールバーに合わせて受信日時の表示が変更されるスタイルと一緒に指定されていたスタイルを上書き */
body .zA.aqw>.yf,body .zA.buL>.xW,body .zA.buL>.yf,body .zA.cP>.xW,body .zA.cP>.yf{display:flex;}

これで、以下のようになっているはずです。

C:\Users\<user>\Desktop\
　└ Chrome拡張\
　　├ manifest.json
　　└ style.css

ここれでChrome 拡張機能としては完成です。

あとはChromeに追加して、動作確認をしてみましょう。

4. Chromeに追加する

自作のChrome 拡張機能を追加する方法は別途記事を用意しているので、そちらを参照してください。

【目次】拡張機能を作ってみないか？【Google Chrome】 - 仁和歌ブログ

5. 動作を確認する

Chrome 拡張機能を入れ、画面を再読込すると以下のように変わります。

【入れる前】

【入れた後】

Chrome 拡張機能を使って、CSSを常に反映させることができました。

おわりに

ちゃんとコードを動かしたいという人の為の記事は別途書こうかなと思っています。

【目次】拡張機能を作ってみないか？【Google Chrome】 - 仁和歌ブログ

仁和歌ブログ

情報のインプットしかしてこなかった自分が、情報のアウトプットに挑戦していくブログ。

菅（ガースー）、GoToやめるってよ

まとめ

【PHP】配列操作に便利な関数

配列の検索

配列の便利機能 `array_column`

`array_column(array, key)` : ある要素(フィールド)だけ取り出す

`array_column(array, key1, key2)` : あるフィールドをキー、あるフィールドを値にした連想配列にする

`array_column(array, null, key)` : 行を値にした連想配列にする

指定した値を配列で検索し、見つかった場合に対応する最初のキーを返す `array_search`

おわりに

【学習記録】ブラウザのレンダリングについて

レンダリングとは

レンダリングの流れ

ブラウザとレンダリングエンジン

疑問(もう少し深堀りしたい情報)

ファイルを連続でダウンロード【js】

【動画】自作のGoogle Chrome拡張を入れる

おわりに

関連動画関連記事

サムネイルが自動再生される【YouTube】【スマホ】

1.画面右上のユーザアイコンをタップ

2.「設定」をタップ

3.「全般」をタップ

4.「フィードでミュート再生」をタップ

5.「オフ」をタップ

手順を記事にした経緯

【簡単】Chrome拡張機能の作り方

1. フォルダを作る

2. manifestファイルを作る

3. 本体を作る

4. Chromeに追加する

5. 動作を確認する

おわりに

関連記事

まとめ

配列の検索

配列の便利機能 array_column

array_column(array, key) : ある要素(フィールド)だけ取り出す

array_column(array, key1, key2) : あるフィールドをキー、あるフィールドを値にした連想配列にする

array_column(array, null, key) : 行を値にした連想配列にする

指定した値を配列で検索し、見つかった場合に対応する最初のキーを返す array_search

おわりに

レンダリングとは

レンダリングの流れ

ブラウザとレンダリングエンジン

疑問(もう少し深堀りしたい情報)

おわりに

関連動画 関連記事

1.画面右上のユーザアイコンをタップ

2.「設定」をタップ

3.「全般」をタップ

4.「フィードでミュート再生」をタップ

5.「オフ」をタップ

手順を記事にした経緯

1. フォルダを作る

2. manifestファイルを作る

3. 本体を作る

4. Chromeに追加する

5. 動作を確認する

おわりに

関連記事

配列の便利機能 `array_column`

`array_column(array, key)` : ある要素(フィールド)だけ取り出す

`array_column(array, key1, key2)` : あるフィールドをキー、あるフィールドを値にした連想配列にする

`array_column(array, null, key)` : 行を値にした連想配列にする

指定した値を配列で検索し、見つかった場合に対応する最初のキーを返す `array_search`

関連動画関連記事