2016年3月 – ページ 3 – 端くれプログラマの備忘録

[OpenCV] セットアップ

2016年3月11日2016年3月15日 @84kure

画像処理の実験の必要あり。OpenCV 3をセットアップする。

公式サイト

ダウンロード

DOWNLOADS | OpenCV
http://opencv.org/downloads.html
2015-12-21 VERSION 3.1

セットアップ

Installation in Windows — OpenCV 2.4.12.0 documentation
http://docs.opencv.org/2.4/doc/tutorials/introduction/windows_install/windows_install.html#windows-installation

環境変数をセット

setx -m OPENCV_DIR C:\OpenCV\Build\x64\vc14

1	setx -m OPENCV_DIR C:\OpenCV\Build\x64\vc14

vc14 = Visual Studio 2015
vc12 = Visual Studio 2013

スタティックライブラリならこれで完了。DLLが格納されているフォルダをシステムパスに追加する。

テストアプリのビルド

How to build applications with OpenCV inside the Microsoft Visual Studio — OpenCV 2.4.12.0 documentation
http://docs.opencv.org/2.4/doc/tutorials/introduction/windows_visual_studio_Opencv/windows_visual_studio_Opencv.html#windows-visual-studio-how-to

#include "stdafx.h"
#include <opencv2/core/core.hpp>
#include <opencv2/highgui/highgui.hpp>
#include <iostream>

#ifdef _DEBUG
#pragma comment(lib,"C:\\OpenCV\\build\\x64\\vc14\\lib\\opencv_world310d.lib")
#else
#pragma comment(lib,"C:\\OpenCV\\build\\x64\\vc14\\lib\\opencv_world310.lib")
#endif

using namespace cv;
using namespace std;

int main(int argc, char** argv)
{
    if (argc != 2)
    {
        cout << " Usage: display_image ImageToLoadAndDisplay" << endl;
        return -1;
    }

    Mat image;
    image = imread(argv[1], IMREAD_COLOR); // Read the file

    if (!image.data) // Check for invalid input
    {
        cout << "Could not open or find the image" << std::endl;
        return -1;
    }

    namedWindow("Display window", WINDOW_AUTOSIZE); // Create a window for display.
    imshow("Display window", image); // Show our image inside it.

    waitKey(0); // Wait for a keystroke in the window
    return 0;
}

#include "stdafx.h"

#include <opencv2/core/core.hpp>

#include <opencv2/highgui/highgui.hpp>

#include <iostream>

#ifdef _DEBUG

#pragma comment(lib,"C:\\OpenCV\\build\\x64\\vc14\\lib\\opencv_world310d.lib")

#else

#pragma comment(lib,"C:\\OpenCV\\build\\x64\\vc14\\lib\\opencv_world310.lib")

#endif

using namespace cv;

using namespace std;

int main(int argc, char** argv)

{

if (argc != 2)

{

cout << " Usage: display_image ImageToLoadAndDisplay" << endl;

return -1;

}

Mat image;

image = imread(argv[1], IMREAD_COLOR); // Read the file

if (!image.data) // Check for invalid input

{

cout << "Could not open or find the image" << std::endl;

return -1;

}

namedWindow("Display window", WINDOW_AUTOSIZE); // Create a window for display.

imshow("Display window", image); // Show our image inside it.

waitKey(0); // Wait for a keystroke in the window

return 0;

}

プロジェクト設定にインクルードパスを追加

Additional Include Directories
C:\OpenCV\build\include

1 2	Additional Include Directories C:\OpenCV\build\include

テストアプリなのでライブラリはコードに書く

#ifdef _DEBUG
#pragma comment (lib ,"C:\\OpenCV\\build\\x64\\vc14\\lib\\opencv_world310d.lib" )
#else
#pragma comment (lib ,"C:\\OpenCV\\build\\x64\\vc14\\lib\\opencv_world310.lib" )
#endif

#ifdef _DEBUG

#pragma comment (lib ,"C:\\OpenCV\\build\\x64\\vc14\\lib\\opencv_world310d.lib" )

#else

#pragma comment (lib ,"C:\\OpenCV\\build\\x64\\vc14\\lib\\opencv_world310.lib" )

#endif

DLLはビルドディレクトリにコピー

実行

OpenCVTest test.jpg

1	OpenCVTest test.jpg

動いた。

[jQuery] サムネールをクリックするとメインの画像が入れ代わる

2016年3月10日2016年3月15日 @84kure

サムネールをクリックするとメインの画像が入れ代わる。

<img src="pic1.png" id="photo" />

<p>
<img src="pic1.png" class="choice" style="cursor:pointer;" width="120" />
<img src="pic2.png" class="choice" style="cursor:pointer;" width="120" />
<img src="pic3.png" class="choice" style="cursor:pointer;" width="120" />
<img src="pic4.png" class="choice" style="cursor:pointer;" width="120" />
</p>

<script type="text/javascript" src="js/jquery.js"></script>
<script>
$(function() {
    $("img.choice").click(function(){
        var ImgSrc = $(this).attr("src");
        var ImgAlt = $(this).attr("alt");
        $("img#photo").attr({src:ImgSrc,alt:ImgAlt});
        $("img#photo").hide();
        $("img#photo").fadeIn("slow");
        return false;
    });
});
</script>

<p>

</p>

$(function() {

$("img.choice").click(function(){

var ImgSrc = $(this).attr("src");

var ImgAlt = $(this).attr("alt");

$("img#photo").attr({src:ImgSrc,alt:ImgAlt});

$("img#photo").hide();

$("img#photo").fadeIn("slow");

return false;

});

</script>

参考サイト

【jQuery】サムネイルをクリックするとメイン画像が切り替わるシンプルな写真ギャラリー｜ KLUTCHE
http://klutche.org/archives/460/

参考サイト

メールの環境設定 – ララ帳
https://laravel10.wordpress.com/2015/02/22/%E3%83%A1%E3%83%BC%E3%83%AB%E3%81%AE%E7%92%B0%E5%A2%83%E8%A8%AD%E5%AE%9A/

ブログのようなサイドバーがあるレイアウト。サイドバーには記事のカテゴリ一覧を表示する。サイドバーを単独でビューとして定義すれば、各ビューでそれをインクルードできるようになる。問題はコントローラの実装。サイドバーにカテゴリ一覧データを渡すために、コントローラの各アクションでカテゴリのコレクションを取得してビューに渡す必要がある。煩雑だ。コントローラを煩わせずにビューに決まったデータを渡す方法はないものか？

公式ドキュメントを眺めていたらView Composerを使えばできそう。試す。

サイドバーのビュー

sidebar.blade.php

<aside id="aside">
<ul>
@foreach ($categories as $category)
<li><a href="{{url('category')}}/{{$category->id}}">{{category->title}}</a></li>
@endforeach
<ul>
</aside>

<ul>

@foreach ($categories as $category)

<li><a href="{{url('category')}}/{{$category->id}}">{{category->title}}</a></li>

@endforeach

<ul>

</aside>

サイドバーをインクルードするビュー

home.blade.php

@extends('main')

@section('content')
<section id="content">
(メインコンテンツ)
</section>

@include('sidebar')
@endsection

@extends('main')

@section('content')

(メインコンテンツ)

</section>

@include('sidebar')

@endsection

サービスプロバイダを作成

$ php artisan make:provider ComposerServiceProvider

1	$ php artisan make:provider ComposerServiceProvider

サービスプロバイダを実装

app/Providers/ComposerServiceProvider.php

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use App\Category;

class ComposerServiceProvider extends ServiceProvider
{
    /**
     * Bootstrap the application services.
     *
     * @return void
     */
    public function boot()
    {
        view()->composer('fix.sidebar', function ($view) {
            $view->with('categories', Category::all());
        });
    }

    /**
     * Register the application services.
     *
     * @return void
     */
    public function register()
    {
        //
    }
}

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;

use App\Category;

class ComposerServiceProvider extends ServiceProvider

{

/**

* Bootstrap the application services.

* @return void

public function boot()

{

view()->composer('fix.sidebar', function ($view) {

$view->with('categories', Category::all());

});

}

/**

* Register the application services.

* @return void

public function register()

{

}

サービスプロバイダを登録

app/config/app.php

'providers' => [
    App\Providers\ComposerServiceProvider::class, //NORI
],

'providers' => [

App\Providers\ComposerServiceProvider::class, //NORI

動いた。

参考サイト

Views – Laravel – The PHP Framework For Web Artisans
https://laravel.com/docs/5.2/views#view-composers

[PHP]Laravelのビューで@includeしているパーツに値を渡す(View Composers) | PHP Archive
http://php-archive.net/php/laravel-view-composers/

[Webサービス] Trello+Toggle – タスク管理+時間管理

2016年3月7日2016年3月9日 @84kure

カンバン方式でタスク管理ができるTrelloは割と有名(だと思う)。時間管理サービスのTogglをTrelloに連携させて、タスクに要した時間をトラッキングできるというので試してみたんだけど、これはいいわ。時間の使い方が見える化できる。ちょっ当分使い続けてみよう。

Trello 参考サイト

ビジュアル思考派にとって画期的なタスク管理ツール『Trello』｜ライフハッカー［日本版］
http://www.lifehacker.jp/2015/02/150226trello_organize.html

仕事以外でも使える「Trello」のユニークな10の利用法｜ライフハッカー［日本版］
http://www.lifehacker.jp/2015/08/150809trello_tips.html

Toggle連携 (時間管理)

Toggl Button – Timer with Pomodoro Add-On – Chrome Web Store
https://chrome.google.com/webstore/detail/toggl-button-timer-with-p/oejgccbfbmkkpaidnkphaiaecficdnfn

タスク管理サービス「Trello」の、ちょっと便利な使い方4選
http://www.indetail.co.jp/blog/6671/

[インフラ] グレイリストによるSPAMメール対策

2016年3月6日2016年3月9日 @84kure

某所にメールを送ったら以下のメッセージで戻ってきた。

450 <xxx@xxx.xxx>: Recipient address rejected: Greylisted for 300 seconds

1	450 <xxx@xxx.xxx>: Recipient address rejected: Greylisted for 300 seconds

ホワイトリストやブラックリストは聞くけど、グレイリストは馴染みがない。調べてみると、1回目の送信では届かないけど、2回目以降なら届くらしい。送り側の本気度を試しているわけね。ちゃんとメールを送っている側としてはあまりいい気はしないけど。詳しい仕組みは参考サイトで。

参考サイト

greylisting って – ここに記す
http://d.hatena.ne.jp/ryonkn/20050110/p1

Greylisting – Wikipedia, the free encyclopedia
https://en.wikipedia.org/wiki/Greylisting

[ソフト] Mileage Keeper – 給油記録アプリ (iPhone)

2016年3月5日2016年3月5日 @84kure

つい先日までは車に載せたメモ帳に給油記録をつけていたんだけど、ちょっとした手落ちでそのメモ帳を無くしてしまった。この機会にiPhoneで給油記録をつけ始めてみようかと思う。デジタルで記録しておけば後で集計できたりして便利かも。とりあえず、標準のNotesアプリに書き始めたんだけど、自由形式なので給油時にササっと記録するのは難しい。

というわけで、無料の給油記録アプリを探したら以下が良かったので覚え書きリンク。

Mileage Keeper (gas mileage / fuel economy tracker) on the App Store
https://itunes.apple.com/us/app/mileage-keeper-gas-mileage/id447546241?mt=8

このアプリは給油記録しかできないのだけど、僕にとってはそのシンプルさがとっても良い。溜まった記録はCSVに吐き出してメールに添付して母艦に送れるようになっている。シンプルでも必要な機能に抜けはない。好感が持てる。

[インフラ] ロードバランサ入門

2016年3月4日2016年3月5日 @84kure

データセンタにはいわゆる鯖管はいるんだけど、なにぶん御用聞き的なアウトソースに過ぎないので、こちらから指示を出さなければ何もしてもらえない。というわけで、インフラ管理も兼任しないといけないのでロードバランサの予備知識も入れておく必要あり。

とりあえず参考になりそうな記事を読み漁って基本を理解しておく。

負荷分散入門(ロードバランサ入門) 第1回負荷分散の必要性 : 富士通
http://fenics.fujitsu.com/products/ipcom/catalog/data/1/1.html

ASCII.jp：アプリケーショントラフィック管理入門
http://ascii.jp/elem/000/000/512/512244/

[仕事術] 文章の書き方

2016年3月3日2016年3月5日 @84kure

以前まとまった文章を書かないといけないなーと思っていたときに流れてきたツイートを覚え書きリンク。難しいこと考えずにコレぐらいのスタンスで書くのが良さげだなと思う。

文章の書き方

1. 箇条書きでとりあえず言いたいことを全部出す。
2. 内容ごとにグループにする。
3. グループ群とグループ内を話の順にソートする。
4. 各文を接続詞で繋ぐ。
5. 繋がった文の論理展開がおかしくないか確認する。
6. 声に出して読んで句点を調整する。

— kougaku (@kougaku) October 31, 2015

[ffmpeg] H.265(HEVC)エンコードを試す。

2016年3月2日2016年3月4日 @84kure

FFmpegの3.0がリリースされたのをきっかけに、H.265エンコーダを試してみた。

H.265とは

FFmpegの公式ドキュメントには以下の説明がある。

H.265 (also known as HEVC) offers 50-75% more compression efficiency compared to H.264 video, while retaining the same visual quality. ffmpeg has support for HEVC encoding using the x265 encoder. Note: libx265 is under heavy development. The API may change.

Encode/H.265 – FFmpeg
https://trac.ffmpeg.org/wiki/Encode/H.265

H.264に比べて圧縮率が50-75%上がっているらしい。ということは、映像品質が同じならファイルサイズが半分から1/4ぐらいになるということか。

Windows版の最新ビルドをダウンロードする

Zeranoe FFmpeg – Builds
http://ffmpeg.zeranoe.com/builds/
Latest Zeranoe FFmpeg Build Version: git-1c7e2cf (2016-03-01)

念のため、H.265が有効になっているか確認。

C:\ffmpeg\bin>ffmpeg
ffmpeg version N-78843-g1c7e2cf Copyright (c) 2000-2016 the FFmpeg developers
built with gcc 5.3.0 (GCC)
configuration: ... --enable-libx265
...

C:\ffmpeg\bin>ffmpeg

built with gcc 5.3.0 (GCC)

configuration: ... --enable-libx265

...

H.264とH.265のエンコード結果を比較する

フォーマットが1980×1080 29.97fps 80Mbpsの10分間の映像をエンコードしてみる。

1. ビットレート共通

H.264とH.265で共に1Mbpsでエンコードしてみる。

以下エンコード結果のファイルサイズ。
– H.264: 81.2MB
– H.265: 81.3MB

目視で画質を確かめると、H.264はブロック状の滲みが気になるけど、1Mbpsならこんなものだろう。しかしその後に観たH.265は、はっきり違いがわかるぐらいに映像品質が良かった。H.264なら4Mbps以上の画質じゃないか。

2. 映像品質共通

公式ドキュメントの以下の記述を参考に、CRF(Constant Rate Factor)を指定してエンコードしてみる。

The CRF of 28 should visually correspond to libx264 video at CRF 23, but result in about half the file size.

以下エンコード結果のファイルサイズとビットレート。
– H.264 (CRF=23): 341MB, 4.64Mbps
– H.265 (CRF=28): 86.4MB, 1.18Mbps

目視で確認すると画質は同じぐらいか。ファイルサイズは1/4になっている。

特にオンライン配信など、ビットレートとファイルサイズを落としたい場合には、H.265はかなり有効そうだな。

端くれプログラマの備忘録

月: 2016年3月

[OpenCV] セットアップ

公式サイト

ダウンロード

セットアップ

テストアプリのビルド

実行

[jQuery] サムネールをクリックするとメインの画像が入れ代わる

参考サイト

[Laravel] デバッグ用に使えるメールの環境設定

参考サイト

[Laravel] インクルードされるビューにデータを渡す

サイドバーのビュー

サイドバーをインクルードするビュー

サービスプロバイダを作成

サービスプロバイダを実装

サービスプロバイダを登録

参考サイト

[Webサービス] Trello+Toggle – タスク管理+時間管理

Trello 参考サイト

Toggle連携 (時間管理)

[インフラ] グレイリストによるSPAMメール対策

参考サイト

[ソフト] Mileage Keeper – 給油記録アプリ (iPhone)

[インフラ] ロードバランサ入門

[仕事術] 文章の書き方

[ffmpeg] H.265(HEVC)エンコードを試す。

H.265とは

Windows版の最新ビルドをダウンロードする

H.264とH.265のエンコード結果を比較する