Elsaの技術日記(徒然なるままに)

主に自分で作ったアプリとかの報告・日記を記載

MENU

cifsをマウントしたディレクトリでもリンク作成できるようにする

先日、リンクが作成出来ないことに起因してnpmやnpxでエラーが発生してしまいました。
一応、npm、npxコマンド実行時にオプションを付与することで回避できたのですが、、、
elsammit-beginnerblg.hatenablog.com


そもそも、
なんでリンク作成出来ないのだろうか?リンク作成出来るようにするための方法は?
が気になったので調査は継続していました。

原因と解決策が分かりましたので備忘録としてまとめておきます。



■原因

原因というほどのものではないのですが、、、
cifsファイルシステムのマウントを行う際に、
シンボリックリンクの作成を有効化するために明示的にオプションを付与する必要がある
とのことです。

自分の場合はnasでしたがsambaも同様で、
cifsファイルシステムの場合は全て該当します。

要するに、、

mount -t cifs ~~

でマウントした場合にはオプションの付与が必要になる。ということです。

では、なぜオプションを付与しないとシンボリックリンクが有効にならないのか?
こちらは調べたのですが具体的な理由が分からず。。。
cifsはwindowsのファイル共有サービスだからwindows以外のOSの場合には
デフォルトである程度制限かけているのでしょうか?

■対策

先ほど記載した通り、オプションを付与すればシンボリックリンクの作成が行えます。
このオプションですが、mfsymlinksオプションになります。

このmfsymlinksオプションをmountコマンド実行時に付与すればOKです。
例えば、、

mount -t cifs //ipaddr/pathes -o username=username,password=password,file_mode=0755,dir_mode=0755,mfsymlinks

といった形でコマンドを実行すればOKです。

これでマウントしたディレクトリにリンクの作成が行えるようになっているかと思います。

■(補足)cifsとは?

Common Internet File Systemの略。
WIndowsのファイル共有サービスで利用されるプロトコルであるSMBを拡張し、
Windows以外のシステムでも利用できるようにしたもの。
※SMB:Server Message Blockの略
参考資料:https://e-words.jp/w/CIFS.html

■最後に

今回はcifsファイルシステムに対してリンク作成を有効にするための方法をまとめました。
なぜオプションを付与して明示的にリンク作成を有効にしなければならないのか、理由までは正確に分かっていないのがはがゆい。。
もう少し頑張って調べます。



ENOTSUP: operation not supported on socket, symlinkを解決した話

最近、以前勉強していたReactやnodejsを再勉強中。
そこである日、

npm install

npx create-react-app

を実行したところ、

ERR! code ENOTSUP
npm ERR! syscall symlink
npm ERR! path ../mime/cli.js
npm ERR! errno -95
npm ERR! ENOTSUP: operation not supported on socket, symlink '

といったエラーが発生してしまいました。

今回は本エラー発生の原因とその解決方法を調べたので備忘録として残しておきたいと思います。


■現象発生原因

このエラーは、nasサーバーを

mount -t cifs

でマウントしたマウント先のディレクトリでのみ発生しており、
ディレクトリでは問題なくnpm installやnpx create-react-appは実行出来ている。

このため、コマンドが実行出来ていないわけではなさそう。。

そこで調べてみると気になるやり取りを発見。
github.com

読んでみるとリンクが作成出来ないことが起因しているエラーっぽい?
ということで試しに、test.txtファイルを作成した上で

ln -s test.txt test2.txt

を実行。

すると、

ln: シンボリックリンク 'test2.txt' の作成に失敗しました: サポートされていない操作です

とエラーが発生しシンボリックリンクが作成出来ない。
確かにリンク作成が出来ないことが起因してエラーが発生しているもよう。

■解決方法

エラーの原因がリンク作成できなかったことが起因しているので、
リンクを作成しないようにコマンドを実行すれば良さそう。

ということで、先ほどのwebページ(github issue)を確認してみると、

    • no-bin-linksオプションを付けるとリンク作成せずにコマンドの実行が出来るそう。

ということで、それぞれ

npm install --no-bin-links

npx create-react-app --no-bin-links

とオプションを付与して実行してみたところ、
エラーが発生せずインストール出来ることを確認。

何とか使用できるようになって満足。

■最後に

今回はnpmやnpxを実行した時にsymlinkのエラーに対する対応方法をまとめました。
なぜリンクが作成できなかったのか?、リンクを作成するためにはどうすればよいか?に関しては継続して調査するとして、、、
まずは、

npm install

npx create-react-app

が使えるようになったので良かった。



OpenCV.jsで動画再生を実施

先日、OpenCV.jsの導入手順や画像をグレーやカラーに変化して表示させてみました。
elsammit-beginnerblg.hatenablog.com

今回はOpenCV.jsで動画の再生を試してみたいと思います。



OpenCV.js公式サイトのサンプルを試してみる

OpenCV.jsの公式サイトには動画再生のサンプルコードが掲載されております。
OpenCV: Getting Started with Videos

しかしながら、、
こちらのコードを実行してみたところ、上手く動かない。。
動いてもなぜかすぐにエラーで止まってしまう。。
エラーコードは、

Uncaught 6640648

とよく分からない。。

■なぜエラーとなってしまったか?

サンプルコードがなぜ動かなかったのか調査してみました。
結果、どうやらサンプルコードだと
src、dstが開放されずたまり続けてしまい最終的にエラーで落ちてしまっているようです。

このため、

cv.imshow('canvasOutput', dst);

setTimeout(processVideo, delay);

の後に、

src.delete();
dst.delete();

で開放させてあげる必要があるようです。

OpenCV.jsでの動画再生コード紹介

では作成した動画再生のコードをご紹介します。
まずはhtmlです。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>OpenCV.js sample</title>
    </head>
    <body>
        <h2>OpenCV.js sample code</h2>
        <p id="status">OpenCV.js is loading...</p>
        <div>
            <select name="imgType" id="ImgType">
                <option value="カラー">カラー</option>
                <option value="グレー">グレー</option>
                <option value="2値化">2値化</option>
            </select>
            <div class="inputoutput">
                <div class="caption">imageSrc <input type="file" id="fileInput" name="file" /></div>
            </div>
            <div class="inputoutput">
                <div class="caption">canvasOutput</div>
                <canvas id="canvasOutput" ></canvas>
            </div>
        </div>
    </body>
    <script src="js/ImgScript.js" type="text/javascript"></script>
    <script async src="js/opencv.js" onload="onOpenCvReady();" type="text/javascript"></script>
</html>

サンプルではvideoタグで再生した動画データをOpenCVでグレーアウト処理を行いとなりに表示するような処理でした。
しかし、、、
同じ動画を表示させる必要はないので、
javascriptのDOMを用いて新規作成したvideoタグを表示せずにOpenCVによる画像処理でcanvasタグに表示するようにいたしました。

さらに、javascriptのコードはこちら。

let inputElement = document.getElementById('fileInput');
let selectElement = document.getElementById('ImgType');

let filename = "";

function onOpenCvReady() {
    document.getElementById('status').innerHTML = 'OpenCV.js is ready.';
}

inputElement.addEventListener('change', (e) => {
    filename = e.target.files[0];
    InitVideo();
    SettingVideo();
}, false);

let videoElement = document.createElement('video');

InitVideo = () =>{
    videoElement.src = URL.createObjectURL(filename);
    videoElement.height = 540;
    videoElement.width = 960;
    videoElement.autoplay = true;
    videoElement.muted = false;
    videoElement.controls = false;
    videoElement.loop = true;
}

SettingVideo = () =>{
    let src = new cv.Mat(videoElement.height, videoElement.width, cv.CV_8UC4);
    let dst = new cv.Mat(videoElement.height, videoElement.width, cv.CV_8UC1);
    let cap = new cv.VideoCapture(videoElement);
    try{
        cap.read(src);
        if(selectElement.value === "2値化"){
            cv.threshold(src, dst, 177, 200, cv.THRESH_BINARY);
        }else if(selectElement.value === "グレー"){
            cv.cvtColor(src,dst,cv.COLOR_RGB2GRAY);
        }else{
            dst = new cv.Mat(videoElement.height, videoElement.width, cv.CV_8UC4);
            dst = src.clone();
        }
        cv.imshow('canvasOutput',dst);
        let delay = 1000/30;
        setTimeout(SettingVideo, delay);
        src.delete();
        dst.delete();
    }catch(err){
        console.error(err);
        src.delete();
        dst.delete();
        InitVideo();
    }
}

先ほど記載した通り、videoタグをcreateElementで作成し初期化処理でvideoタグのサイズやattributeを設定しました。

let videoElement = document.createElement('video');

InitVideo = () =>{
    videoElement.src = URL.createObjectURL(filename);
    videoElement.height = 540;
    videoElement.width = 960;
    videoElement.autoplay = true;
    videoElement.muted = false;
    videoElement.controls = false;
    videoElement.loop = true;
}

OpenCV.jsによる画像処理とcanvasタグへの表示はこちら。

SettingVideo = () =>{
    let src = new cv.Mat(videoElement.height, videoElement.width, cv.CV_8UC4);
    let dst = new cv.Mat(videoElement.height, videoElement.width, cv.CV_8UC1);
    let cap = new cv.VideoCapture(videoElement);
    try{
        cap.read(src);
        if(selectElement.value === "2値化"){
            cv.threshold(src, dst, 177, 200, cv.THRESH_BINARY);
        }else if(selectElement.value === "グレー"){
            cv.cvtColor(src,dst,cv.COLOR_RGB2GRAY);
        }else{
            dst = new cv.Mat(videoElement.height, videoElement.width, cv.CV_8UC4);
            dst = src.clone();
        }
        cv.imshow('canvasOutput',dst);
        let delay = 1000/30;
        setTimeout(SettingVideo, delay);
        src.delete();
        dst.delete();
    }catch(err){
        console.error(err);
        src.delete();
        dst.delete();
        InitVideo();
    }
}

先ほど記載しました通り、

cv.imshow('canvasOutput',dst);
let delay = 1000/30;
setTimeout(SettingVideo, delay);
src.delete();
dst.delete();

により、srcやdstを都度開放しております。

ただグレーアウトした動画を流すだけだとつまらないところがあったので、
readで読み取ったデータに対して、
selectタグで切り替えた動画種類に応じて画像処理を施すことにより、
流す動画を切り替えるようにしました。

        cap.read(src);
        if(selectElement.value === "2値化"){
            cv.threshold(src, dst, 177, 200, cv.THRESH_BINARY);
        }else if(selectElement.value === "グレー"){
            cv.cvtColor(src,dst,cv.COLOR_RGB2GRAY);
        }else{
            dst = new cv.Mat(videoElement.height, videoElement.width, cv.CV_8UC4);
            dst = src.clone();
        }

■実際に動かしてみる

先ほどご紹介したコードを実行するとこちらのようになります。
選択した動画種類に応じて表示する動画を切り替えて再生させることが出来ました。
こちらは動画を再生してもエラーが出ることはありません。
※こちらの動画はcanvasのサイズを480x270に変更しております。

■最後に

今回はOpenCV.jsで動画再生を試してみました。
やはり画像処理を行っている関係で初回動画読み込みに少し時間を要しておりました。
一回読み込めてしまえばカクつくことなく表示していたので、再生するだけならそこまで重くはないのかな?
初回読み込みだけ気になるだけであとは普通に使えそうです。


javascript用OpenCVであるOpenCV.js試してみた

先日OpenCVに関して調べものをしていたところ、
javascriptで動作させることが出来るOpenCV.jsなるものを発見!!

早速使ってみましたので今回はセットアップも含めて備忘録残しておこうと思います。



OpenCV.jsとは?

OpenCVの公式ページにはこちらの通り説明がありました。
OpenCV.js is a JavaScript binding for selected subset of OpenCV functions for the web platform. It allows emerging web applications with multimedia processing to benefit from the wide variety of vision functions available in OpenCV. OpenCV.js leverages Emscripten to compile OpenCV functions into asm.js or WebAssembly targets, and provides a JavaScript APIs for web application to access them. The future versions of the library will take advantage of acceleration APIs that are available on the Web such as SIMD and multi-threaded execution.

翻訳すると、
OpenCV.jsは、Webプラットフォーム用のOpenCV関数の選択されたサブセット用のJavaScriptバインディングです。これにより、マルチメディア処理を備えた新しいWebアプリケーションは、OpenCVで利用可能なさまざまなビジョン機能の恩恵を受けることができます。OpenCV.jsは、Emscriptenを利用してOpenCV関数をasm.jsまたはWebAssemblyターゲットにコンパイルし、WebアプリケーションがそれらにアクセスするためのJavaScriptAPIを提供します。ライブラリの将来のバージョンでは、SIMDやマルチスレッド実行などのWebで利用可能なアクセラレーションAPIを利用する予定です。

となります。
※参考:OpenCV: Introduction to OpenCV.js and Tutorials

要するに、OpenCV関数をJavascriptでも使用できるようにJavascriptでラッピングしたライブラリということですね。

OpenCV.js利用環境構築

pythonなどでOpenCVを利用する場合には環境構築がとても面倒なのですが、、、
OpenCV.jsはとても簡単です。

OpenCV.jsをダウンロードし、
javascript利用時に他のjavacriptライブラリと同様にOpenCV.jsを読み込めばOK。

公式では、
githubで公開されている、
opencv-{VERSION_NUMBER}-docs.zip
をダウンロードする
github.com

https://docs.opencv.org/3.4.0/opencv.jsといったように、
OpenCV.jsファイル単体をダウンロードする

2つの方法が紹介されておりました。

ただ、、、
①はzipファイルで86MBと大きく、解凍するにも時間を要するので
②の方法が良いかと思います。
※私も②でOpenCV.jsをダウンロードしました。

後は、フロントエンドで用いる場合には、

<script src="opencv.js" type="text/javascript"></script>

として、読み込めばOKです。

■画像データのカラー・グレースケールの切り替えを実現してみる
では、OpenCV.jsで画像データのカラー・グレースケールの切り替えを試してみます。

まずはhtmlファイルを作成していきます。
コードはこちら。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>OpenCV.js sample</title>
    </head>
    <body>
        <h2>OpenCV.js sample code</h2>
        <p id="status">OpenCV.js is loading...</p>
        <div>
            <select name="imgType" id="ImgType">
                <option value="カラー">カラー</option>
                <option value="グレー">グレー</option>
            </select>
            <div class="inputoutput">
                <div class="caption">imageSrc <input type="file" id="fileInput" name="file" /></div>
            </div>
            <div class="inputoutput">
                <div class="caption">canvasOutput</div>
                <canvas id="canvasOutput" ></canvas>
            </div>
        </div>
    </body>
    <script src="js/ImgScript.js" type="text/javascript"></script>
    <script async src="js/opencv.js" onload="onOpenCvReady();" type="text/javascript"></script>
</html>
<div class="caption">imageSrc <input type="file" id="fileInput" name="file" /></div>

にて指定したファイルを、

<canvas id="canvasOutput" ></canvas>

上に画像を表示し、

<select name="imgType" id="ImgType">
    <option value="カラー">カラー</option>
    <option value="グレー">グレー</option>
</select>

にて、カラー・グレースケールの切り替えを行るように
OpenCV.jsライブラリを用いたjavascriptを作成していきます。

javascriptのコードはこちら。

let inputElement = document.getElementById('fileInput');
let selectElement = document.getElementById('ImgType');

let filename = "";

inputElement.addEventListener('change', (e) => {
    filename = e.target.files[0];
    SettingImage();
}, false);

selectElement.addEventListener('change', () => {
    if(filename === ""){

    }else{
        SettingImage();
    }
}, false);

SettingImage = () =>{
    let imgElement = document.createElement('img');
    imgElement.src = URL.createObjectURL(filename);
    imgElement.onload = () => {
        let dsize = new cv.Size(imgElement.naturalWidth/2, imgElement.naturalHeight/2);
        let mat = cv.imread(imgElement);  
        let dst = new cv.Mat();
        cv.resize(mat, dst, dsize, 0, 0, cv.INTER_AREA);
        if(selectElement.value === "グレー"){
            cv.cvtColor(dst,dst,cv.COLOR_RGB2GRAY);
        }
        cv.imshow('canvasOutput', dst);
        mat.delete();
        dst.delete();
    }
}

function onOpenCvReady() {
    document.getElementById('status').innerHTML = 'OpenCV.js is ready.';
}

まず、OpenCV.jsを利用できるまでの初期化処理に時間を要するため、

function onOpenCvReady() {
    document.getElementById('status').innerHTML = 'OpenCV.js is ready.';
}

などにより準備完了をチェックした方が良いです。

OpenCV.jsを用いて画像の表示やカラー・グレースケールへの変換実施している箇所はこちらになります。

SettingImage = () =>{
    let imgElement = document.createElement('img');
    imgElement.src = URL.createObjectURL(filename);
    imgElement.onload = () => {
        let dsize = new cv.Size(imgElement.naturalWidth/2, imgElement.naturalHeight/2);
        let mat = cv.imread(imgElement);  
        let dst = new cv.Mat();
        cv.resize(mat, dst, dsize, 0, 0, cv.INTER_AREA);
        if(selectElement.value === "グレー"){
            cv.cvtColor(dst,dst,cv.COLOR_RGB2GRAY);
        }
        cv.imshow('canvasOutput', dst);
        mat.delete();
        dst.delete();
    }
}

OpenCV.jsにてcv.imreadで画像を読み取る場合、
imgタグを指定する必要があるようです。
このため、あえて

 let imgElement = document.createElement('img');
imgElement.src = URL.createObjectURL(filename);

によりimgタグを作成の上、imgタグのsrcに読み込む画像パスを指定します。

後は、pythonC++C#と似た感じでimreadでmat型変数に代入の上、
グレースケールに変換する場合には、
cv.cvtColor(dst,dst,cv.COLOR_RGB2GRAY);
で変換すればOK。

最後にimshowでcanvasタグに表示させればOK。

cv.imshow('canvasOutput', dst);

imshowの第1引数にcanvasのidを指定します。

■コード動作させてみる
先ほどのコードを動作させるとこちらのように動作します。
※ファイル選択後の動作になります。

■最後に

今回はjavascriptで動作させるOpenCVである、OpenCV.jsについてご紹介しました。
ブラウザで動作させるのが面白いのでもう少し使ってみたいと思います。

使った感想や使い方は備忘録として残していきたいと思います。



jsonやcsvファイルの相互変換や編集サイト作成

前にjsoncsvファイルの相互変換や編集の方法を備忘録としてまとめました。
elsammit-beginnerblg.hatenablog.com
elsammit-beginnerblg.hatenablog.com

こちらの変換サイトですが、少し便利で使うときもあり、せっかくなのでWebサイトにて作成することにしました。


■サイトリンク

作成したファイル変換のサイトですが、こちらになります。
https://elsammit.github.io/jsonReadWriteApplication/


こちらのサイトですが、Github Pagesを用いて公開しております。
Github Pagesでサイトを作成・公開する方法はこちらのGitHub Docsにまとめられております。
Github Pagesでサイトを公開したい方は一読してみてください。
https://docs.github.com/ja/pages/getting-started-with-github-pages/creating-a-github-pages-site


■使い方

変換サイトの使い方ですが、
まず左のファイル入出力指定欄にてファイル選択をクリック。


ファイル選択画面が開くのでjsoncsvxmlいずれかのファイルを指定して開きます。
すると、こちらのようにファイルを読み込んでリストとして表示します。

もし別ファイルも結合して開きたい場合には、こちらを選択して先ほどと同様に
jsoncsvxmlいずれかのファイルを指定して開けばOK。

リストへ手動で行を追加したい場合にはこちらに必要な項目を入力して"追加"ボタンを押下すればOK。

こちらの記入ですが、最低1項目は記載ください。
1項目も記載せずに"追加"ボタンを押下するとエラーメッセージが表示されて追加できません。

最後にファイル出力ですが、
こちらの通り、
 ・ファイル書き込み(json)
 ・ファイル書き込み(csv)
 ・ファイル書き込み(xml)
の3種類のボタンがあります。

押したボタンに応じて、jsonファイル、csvファイル、xmlファイルが出力されます。

jsonファイルからcsvファイルに変換したいだけであれば、
ファイル選択した後に、csvでのファイル出力ボタンを押してあげればcsvファイル形式で出力されます。

■最後に

今回は自分で作成したファイル変換を行うためのWebサイトの紹介でした。

今回ライブラリを使用せずに作成してみたのですが、
次はReactで同じように作れるか挑戦してみようかな?と思います。
作成出来たり、詰まった項目はブログにて紹介していきたいと思います。


githubで公開した時の検索時の説明文(ディスクリプション)を用意

前回から引き続きgithub関係について備忘録としてまとめておきたいと思います。

今回は検索時に表示される説明文(ディスクリプション)を用意する方法です。



githubをpublicで公開した時に気づいたこと

ここ最近、publicで上げたコードが検索に引っかかることがあるのですが、
説明文(ディスクリプション)がデフォルトのままなんですよね。
ディスクリプションとは、googleなどで検索した際に表示される説明文のことです。


自分の場合、公開したコードが検索に引っかかると
こんな感じになってしまいます。

Contribute to Elsammit/Moguratataki development by creating an account on GitHub.

これじゃ何が何だか分からないですよね。。。

ということで、
今回はこちらの説明文を変更するための方法を調べてみましたのでまとめていきたいと思います。

■ディスクリプションを用意する方法

github上でそれらしい内容が見当たらない。。
ということで、他の方のgithubを参考にすることに!!

githubには多くの方がコードを公開しているので、
github machine learning python
などと検索すればすぐにgithubで公開されているコードがヒットします。

ヒットした方々のは記載したであろうコメントが掲載。
何が表示されているのだろうと除いたところ、、
Aboutの内容が表示されている様子!!

Aboutはこちらのようにgithubの右上に表示される説明文のこと。

Aboutはgithub内での説明文として用いられるものだと思っていましたが、
ディスクリプションにも用いられているのですね。

stack overflowにも同じような疑問を持っている方がいらっしゃって、
Aboutを編集すればOKって回答になっていますね。
How do you change a repository description on GitHub? - Stack Overflow


さらに色々調べていくと、、
こちらの方のようにAboutにリンクを貼っておくとリンク内の内容がディスクリプションに表示するもよう。
github.com

■試しに対応

ということで、自分もAboutに記載してみることに。
記載した結果はこんな感じ。

github.com

実際に検索にヒットした時の表記への反映には時間がかかるかと思いますので、しばらく待ちです。

■最後に

今回は、githubで公開した時のディスクリプション設定方法についてまとめました。
今までAboutは自分が複数のリポジトリの中で判別する用途にしか使用してこなかったのでかなり適当に記載してしまっていました。。
ちゃんと見直して、適切なメッセージに変えていきたいと思います。



githubのREADMEに動画を表示する

今回はgithubのREADMEに動画を埋め込む方法をまとめてみます。

最近githubでアプリを上げているのですがどういう動作なのかを示すのに、
動画で見せるのが結構手っ取り早かったりするんですよね。
そこで、githubのREADMEに動画を埋め込んでいるのですが、備忘録としてまとめておこうと思います。



■簡単に動画を埋め込む方法

まずは簡単にREADMEに動画を埋め込む方法についてです。

それは、、、
github上でREADME編集画面を開き、任意の位置に動画をドラッグ&ドロップする!!
のみです。

github編集画面にてこちらのように埋め込みたい位置にドラッグ&ドロップしますと動画が挿入されます。

後は下部の”Commit changes”をクリックして保存をすれば、
こちらの通り、動画の埋め込みができます。

今回gif動画を埋め込んでいますが、mp4でも埋め込むことが可能です。

■コミットされた動画をREADMEに埋め込み

次にコミット済みの動画をREADMEに埋め込む方法に関してまとめておきます。


(注)こちらの方法はgif動画のみ対応可能なようです。

方法ですが、
まずgithub上でコミットされたgif動画のパスまで移動し、
URLをコピーしておきます。
キャプチャアプリの場合にはこちらになります。
https://github.com/Elsammit/ScreenCapture/blob/master/Sample/AppImage.gif

次に、先ほどと同様にREADMEを開き、
挿入したい位置に、

![gif](コピーしたURL)

を記載します。
先ほどのgif動画のパスを用いると、

![gif](https://github.com/Elsammit/ScreenCapture/blob/master/Sample/AppImage.gif)

となります。

後は、READMEを保存すれば、、
README上に動画が埋め込まれているわけです。

こちらのREADMEで動画埋め込みの方法はこちらのコミットしたgif動画を表示する方法を用いております。
GitHub - Elsammit/ScreenCapture: スクリーンキャプチャ。


こちらの利点ですが、
 ①ローカルでの編集でも動画の埋め込みが出来る
 ②動画保存先をコントロールできる
という点かな?と考えております。

①はドラッグ&ドロップの方法ですとgithubのサイト上でしか出来ない方法なので、
ローカルで作業したい人にはこちらの方法がよいのかな?と思います。

②に関してですが、
ドラッグ&ドロップの方法ですと、
自動的に生成されたパスに動画が保存されるようで、
コントロールが出来ないので、保存先を自分でコントロールしたい場合にもこちらの方法かな?

■最後に

今回はgithubのREADMEに動画を埋め込む方法をまとめました。
ドラッグ&ドロップで動画を埋め込むことが出来るので簡単ですね。

他にもコミットしたgif動画をREADMEに埋め込んでみました。
こちらの方法はgif動画しか対応していないので、注意ください。