もちっとメモ

もちっとメモ

もぐりのエンジニアが日々の中で試してみたことを気が向いたときに書き連ねていきます

VideoPadで動画編集をやってみた~入門編~

最近はなんどかAviUtlで動画編集をやっていたのですが,どうやら私には高機能すぎたようです.
なので,もう少し直感的に触れる動画編集ソフトはないものかということで以前使ったことのあるVideoPadで編集しましたので,そちらの使い方を備忘録として垂れ流します.
個人的な目的(商用利用ではない)のためならある程度の機能が無料で使えます.

www.nchsoftware.com

基本的な使い方は私なんかよりわかりやすく解説していただいている方が大勢いらっしゃいますので,そちらをご参照ください.私はこちらを参考にさせていただきました.

douga-tec.com

今回やりたかった編集は
・動画の不要な部分をカット
・動画の部分的な再生速度の変更
・テロップの挿入
・図形や画像の挿入

カットは簡単で,カットしたい位置にタイムライン上で現在位置を表すの赤い線を合わせます.f:id:T-N-Clark:20170307223932p:plain赤い線を合わせた状態でプレビュー画面にある分割ボタンでクリップを分割します.

f:id:T-N-Clark:20170307225055p:plain

あとはタイムライン上でいらない方のクリップを選択してDeleteボタンで削除完了.

倍速処理もこのクリップの分割が役立ちます.
動画全体を倍速をしたいときは右クリックでクリップの再生速度を変更してください.
部分的な倍速等は先ほどのクリップを分割を使えばできます.速度変更したい部分を分割で切り出して,切り出したクリップを選択して再生速度を変更します.

テロップの挿入は[ホーム]タブの字幕ボタンからできます.位置やフォントサイズ,フォントの種類,文字の色等が調節できます.

画像の挿入は画像を挿入してタイムラインにドロップしてください.色やサイズの調節は動画のエフェクトから行います.
・白黒にしたい:2色
・任意の位置に設置したい:位置
・大きさの変更をしたい:拡大縮小

このときエフェクトの順番で結果が変わるのでプレビュー画面できちんとチェックしておきましょう.

f:id:T-N-Clark:20170307222236p:plain

今日は時間がないので,適当にここらへんで終わりにします.また気が向いたら追記するかもしれません.

画面キャプチャソフト(動画)を探してみた

なにか説明用の動画とかゲームのプレイ動画を録画しようと思ったときに画面キャプチャしたいなと思い画面キャプチャ(動画ソフト)を探していたところ友人からこんなソフトを紹介されました.

AG-Webカメラレコーダー ダウンロードページ

最大の特徴はリアルタイムエンコードができるところ.
普通,画面キャプチャソフトを使うと,録画が終わった後,延々エンコード処理が続いて出力ができないなんてことがあるみたいです.でも,このソフトは,リアルタイムでエンコード処理しながら録画してくれるので,録画終了ボタンを押すと数秒で出力してくれます.これは便利.
詳しい使い方はほかの方々のサイトをご覧になってください.(いつも投げっぱなしですね...)私がよく使う機能は録画範囲の指定とかです.
ちょっと厄介なところが,デフォルトの設定だとagm形式で保存することになります.Macはわかりませんが,Windowsはagm形式の動画はデフォルトのプレイヤーで再生できないはず.

でも,うっかりagm形式で保存してしまったときはこちらのサイトでmp4等の形式への変換方法が紹介されています.

mamenote.net

Aviutlで動画編集をやってみた~入門編~

※本記事は下記の記事の続きとなっております.AviUtlを導入していないという方は初めに下記記事を参照ください.

t-n-clark.hatenadiary.jp

また,本記事では拡張編集プラグインを導入済みという前提で書かれております.

導入が完了したので早速編集してみたいと思います.
今回もこちらのサイトにお世話になりました.

aviutl.info

  1. AviUtlを起動します.
  2. [設定]タブの[拡張編集の設定]からタイムラインを表示させます.
  3. 編集したいファイルをタイムラインにドラック・アンド・ドロップします.
  4. タイムライン上で右クリックするとテロップなどの挿入ができます.
    ・テロップであれば,[メディアオブジェクトの追加]ー[テキスト]で挿入できます.編集するにはタイムライン上で追加したテキストをダブルクリックすることで編集画面が表示されます.
    ・図形の場合も同様に,[メディアオブジェクトの追加]-[図形]から挿入できます.デフォルトでない図形を使いたいときは[ファイルから選択]で画像ファイル(.pngファイルなど)を使うこともできます.よく使う画像は「aviutl.exe」が入っているフォルダ内に「figure」というフォルダを作っておいてその中に画像を入れておくとプルダウンメニューから選択できるようになります.

再生ボタンがないという場合には,
[ファイル]ー[環境設定]ー[システムの設定]
から[再生ウィンドウの動画再生をメインウィンドウに表示する]にチェックを入れてください.チェック後AviUtlを再起動するとメイン画面に再生ボタンが追加されます.再起動しないと表示されませんのでご注意を.f:id:T-N-Clark:20170307185003p:plain

タイムラインの使い方については,こちらのサイトで丁寧に説明されています.
aviutl.info

ホームページにブログ等を埋め込みたい~その2~

2019/5/30 追記

React限定ですが、代替案を考えてみました!!

t-n-clark.hatenadiary.jp

2019/5/20 追記

いつの間にか本記事の方法である爆速YQLも使えなくなっていました。現在代替案を模索中です。

はじめに


以前,

t-n-clark.hatenadiary.jp

でホームページにブログの更新情報を表示させる方法を紹介しました.
私のホームページでもこの方法を採っていたのですが,最近表示されていことが度々あって調子悪いのかな,そのうち元に戻るのかなと思っていました.
しかし,調べてみると,なんとGoogle Feed APIが使えなくなっていた.

website-fun.com

zrssfeedもGoogle Feed APIをしているみたいなのでダメ.

appredmi.hateblo.jp

PHPWordPressが使えるなら苦労しないのかもしれませんが,いかんせんHTML縛りの私にとってはこれは使いたくても使えない.
そんな矢先に見つけたのが,
Yahoo! Japan の爆速YQL
というサービス.特徴としては,
・無料(登録も不要)
・サーバーサイドのプログラムが不要
・ちょっと昔のブラウザでも動作する
の3拍子そろったサービスのようです.
外部サイトのRSSも表示可能.(クロスリファレンスというのでしょうか?)
使い方も簡単で,基本はこちらのサイトを参考にさせていただきました.

techblog.yahoo.co.jp

こちらを参考にして作ったソースがこちら.


            <script src="https://i.yimg.jp/images/yjdn/js/bakusoku-yql-v1-min.js"
                data-url="http://t-n-clark.hatenadiary.jp/feed">
                <ul>
                    {{#query.results.entry}}
                    <li>
                        {{published}}<br>
                        <a href="{{link.0.href}}" target="_blank">{{title}}</a>
                    </li>
                    {{/query.results.entry}}
                </ul>
            </script>

これをHTMLの表示させたい位置に書きます.基本的にはbodyに書くと思います.
ちょっとだけ解説をすると

data-url="http://t-n-clark.hatenadiary.jp/feed"

の中身をいじれば別のURLも使えます.ちなみに上記のURLはこのブログの更新情報です.

{{published}}

の部分が日付の表示です.

target="_blank"

は新しいタブで表示させるためのコードのなので,不要なら削っても大丈夫です.

このままでは,日付が日本語表示にならないので,そこの部分を編集します.
以下のサイトを参考にしました.

www.gesource.jp

実際に作った日付表示変更後のソースコードがこちら.


            <script>
                function filterRSS(data) {
                    for (var i = 0; i < data.query.results.entry.length; ++i) {
                        var date = new Date(data.query.results.entry[i].published);
                        data.query.results.entry[i].published = date.getFullYear() + '年' + (date.getMonth() + 1) + '月' + date.getDate() + '日';
                    }
                    return data;
                }
            </script>
            <script src="https://i.yimg.jp/images/yjdn/js/bakusoku-yql-v1-min.js"
                data-url="http://t-n-clark.hatenadiary.jp/feed"
                data-filter="filterRSS">
                <ul>
                    {{#query.results.entry}}
                    <li>
                        {{published}}<br>
                        <a href="{{link.0.href}}" target="_blank">{{title}}</a>
                    </li>
                    {{/query.results.entry}}
                </ul>
            </script>

新しく表示形式変更の関数を作って,先ほどのソースに

data-filter="filterRSS"

が追加されています.ここで,関数を呼び出しています.

基本的にこれでOKなのですが,これだと記事がすべて表示されてしまう.表示件数の指定を指定したいということでさらに変更.


            <script>
                function filterRSS(data) {
                    for (var i = 0; i < data.query.results.entry.length; ++i) {
                        var date = new Date(data.query.results.entry[i].published);
                        data.query.results.entry[i].published = date.getFullYear() + '年' + (date.getMonth() + 1) + '月' + date.getDate() + '日';
                    }
                    return data;
                }
            </script>
            <script src="https://i.yimg.jp/images/yjdn/js/bakusoku-yql-v1-min.js"
                data-yql="select * from feed (0, 3) where url='http://t-n-clark.hatenadiary.jp/feed'" data-filter="filterRSS">
                <ul>
                    {{#query.results.entry}}
                    <li>
                        {{published}}<br>
                        <a href="{{link.0.href}}" target="_blank">{{title}}</a>
                    </li>
                    {{/query.results.entry}}
                </ul>
            </script>

さきほどまで

data-url=""

だった部分が

data-yql=""

に変わっています. 表示件数の指定はこの後の

feed (0, 3)

で指定しています.例えば,上のコードでは最新3件を表示させます.
実際にこれを使って書き直したホームページがこちら.

clarkphys.html.xdomain.jp

f:id:T-N-Clark:20170302180302p:plain

これでようやく原状復帰できました.半日かかった.
を変更すれば基本的には任意のURLで使用可能なはず.
もし参考になれば幸いです.


feed (0,3)とかの使い方参考サイト.

qiita.com

次回

t-n-clark.hatenadiary.jp

 

HTMLにシンタックスハイライトを付ける~その2~

以前,
HTMLにTexのシンタックスハイライトを付けてみた - もちっとメモ
でHTMLにソースコードっぽくシンタックスハイライトを付ける方法を紹介しましたが,もっとお手軽にできる方法を友人に教わりましたので,第2段としてご紹介いたします.

その名もhighlight.jsです.
使い方は簡単で,JSをダウンロードしてヘッダーに書き込むだけ.
ネットに接続できる場合は,URLを書けばダウンロードする必要すらなし.
さっそく,このはてなブログにも導入してみました.
例えばこんな感じになります.HTML形式で


<pre>
    <code>
         #include <iostream>
         using namespace std;
         int main()
        {
         cout << "hello" << endl;
        }
    </code>
</pre>

と書けば


     #include <iostream>
     using namespace std;
     int main()
    {
     cout << "hello" << endl;
    }
    

こういった感じにハイライトされます。色がうまくつかないときはリロードしてみてください.
詳しい使い方はこちらのサイトで紹介されています.
ぜひお試しあれ.

qiita.com