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

[C#] シリアルポートの名前とデバイス名を列挙する

2015年2月18日2015年8月21日 @84kure

デバイスマネージャに一覧されているシリアルポートを取得したい。

サンプルコード

ポート名だけならSystem.IO.Portsを使うと簡単。

using System.IO.Ports;
string[] ports = SerialPort.GetPortNames();
foreach (string port in ports)
{
    Console.WriteLine(port); // COM1
}

using System.IO.Ports;

string[] ports = SerialPort.GetPortNames();

foreach (string port in ports)

{

Console.WriteLine(port); // COM1

}

デバイス名も取得したければWMI(Windows Management Instrumentation)を使う。

using System.Management;
ManagementClass mcW32SerPort = new ManagementClass("Win32_SerialPort");
foreach (ManagementObject port in mcW32SerPort.GetInstances())
{
    Console.WriteLine(port.GetPropertyValue("Caption")); // Communications Port (COM1)
    Console.WriteLine(port.GetPropertyValue("DeviceID")); // COM1
}

using System.Management;

ManagementClass mcW32SerPort = new ManagementClass("Win32_SerialPort");

foreach (ManagementObject port in mcW32SerPort.GetInstances())

{

Console.WriteLine(port.GetPropertyValue("Caption")); // Communications Port (COM1)

Console.WriteLine(port.GetPropertyValue("DeviceID")); // COM1

}

参考サイト

すべてのシリアル・ポートの名前を列挙するには？［2.0のみ、C#、VB］－＠IT
http://www.atmarkit.co.jp/fdotnet/dotnettips/523serialportnames/serialportnames.html

シリアルポートの名前取得
http://axion.sakura.ne.jp/blog/index.php?UID=1278233577

C#でCOMポート番号とシリアル接続機器名を同時に取得する方法 – 真実の楽譜（フルスコア）
http://truthfullscore.hatenablog.com/entry/2014/01/10/180608

[C#] LinkLabelコントロールからウェブページを開く

2015年2月17日2015年8月21日 @84kure

LinkLabelコンポーネントが使える。見栄えはクリッカブルリンクに見えるけど、クリックされた時の振る舞いは自前で実装する必要がある。

サンプルコード

using System.Diagnostics;
private void linkLabel1_LinkClicked(
    object sender, LinkLabelLinkClickedEventArgs e)
{
    linkLabel1.LinkVisited = true;
    Process.Start("http://www.84kure.com/blog/");
}

using System.Diagnostics;

private void linkLabel1_LinkClicked(

object sender, LinkLabelLinkClickedEventArgs e)

{

linkLabel1.LinkVisited = true;

Process.Start("http://www.84kure.com/blog/");

}

動作

クリック前の体裁

クリック後の体裁

参考サイト

LinkLabelコントロールを使ってWebページを開く: .NET Tips: C#, VB.NET
http://dobon.net/vb/dotnet/control/linklabel.html

[Visual C++] CString::LoadString() 文字化け対策

2015年2月16日2015年8月21日 @84kure

今更MFCでも無いが、随分前に書かれたMFCベースのアプリをビルドして実行したらステータスバーが文字化け。

現象

ステータスバーの日本語が文字化けする。

リソースの文字列テーブルでID_FIELD_ATRIBUTEに”属性”と定義しているのだけど、ステータスバーには”??”と表示される。

調査

MFCのソースを見ると、ステータスバーの表示文字列はCString::LoadString()関数でリソースから取得している。

Win32 APIを直接呼び出す

::LoadStringで取得した文字列は化けない。MFC依存の問題っぽい。

プロジェクト設定を変えて試す

環境: Windows 7 Home Premium 64bit
プロジェクト: MFCダイアログベースアプリ
(1) Win32/共有DLLでMFCを使う/マルチバイト文字セットを使用する – NG
(2) Win32/共有DLLでMFCを使う/Unicode文字セットを使用する – OK
(3) Win32/スタティックライブラリでMFCを使用する/マルチバイト文字セットを使用する – NG
(4) Win32/スタティックライブラリでMFCを使用する/Unicode文字セットを使用する – OK
(5) x64/共有DLLでMFCを使う/マルチバイト文字セットを使用する – NG
(6) x64/共有DLLでMFCを使う/Unicode文字セットを使用する – OK
(7) x64/スタティックライブラリでMFCを使用する/マルチバイト文字セットを使用する – NG
(8) x64/スタティックライブラリでMFCを使用する/Unicode文字セットを使用する – OK

Unicodeだと化けない。MBCS依存の問題っぽい

ネットで情報収集

似たような現象に直面した人を発見。

Re: loadstring fails in MBCS encoding
http://www.tech-archive.net/Archive/VC/microsoft.public.vc.mfc/2005-11/msg00510.html

1. You have to tell CString::LoadString to use another codepage. This can be
done by calling SetThreadLocale before calling CString::LoadString. Make
sure to revert to the system’s default codepage as soon as possible,
otherwise other parts of the program might not work properly.

解決法

以下の追加で解決。

::SetThreadLocale(0x0411);C

1	::SetThreadLocale(0x0411);C

[Webサービス] tinypng – 4bitのPNGが生成できるオンラインサービス

2015年2月15日2015年8月26日 @84kure

ある理由で4ビット階調のPNG画像が必要になったけど、常用しているAdobe Photoshop CS6だと8/32ビットしか出力できない。

以下のサイトを使ったら4ビットのPNGが作成できたので覚え書き。

TinyPNG – Compress PNG images while preserving transparency
https://tinypng.com/

[ffmpeg] 透かし画像を移動させる

2015年2月14日 @84kure

ネットで配信する動画保護の悪あがき(笑)。動画に入れる透かし動画を移動させることで透かしが切り取られ難くしたい。たとえば透かし画像を3分ごとに右下→右上→左上→左下と移動させたい。それもFFmpegを使ってバッチでやりたい。どうするか。

ネットで調べたらドンピシャの記事を発見。

Adding a dynamically positioned watermark to a video via ffmpeg – Stack Overflow
http://stackoverflow.com/questions/12400845/adding-a-dynamically-positioned-watermark-to-a-video-via-ffmpeg

やり方としては、透かし画像が移動するだけの透過動画を作成しておき、それと本編を合成するというもの。

用意するもの

動画本編 source.mp4
透かし画像 (右下) wm1.png
透かし画像 (右上) wm2.png
透かし画像 (左上) wm3.png
透かし画像 (左下) wm4.png

手順

それぞれの透かし画像から3分(180秒)ずつの動画を生成。

ffmpeg -loop 1 -i wm1.png -t 180 -vcodec png -pix_fmt rgba wm1.mov
ffmpeg -loop 1 -i wm2.png -t 180 -vcodec png -pix_fmt rgba wm2.mov
ffmpeg -loop 1 -i wm3.png -t 180 -vcodec png -pix_fmt rgba wm3.mov
ffmpeg -loop 1 -i wm4.png -t 180 -vcodec png -pix_fmt rgba wm4.mov

ffmpeg -loop 1 -i wm1.png -t 180 -vcodec png -pix_fmt rgba wm1.mov

ffmpeg -loop 1 -i wm2.png -t 180 -vcodec png -pix_fmt rgba wm2.mov

ffmpeg -loop 1 -i wm3.png -t 180 -vcodec png -pix_fmt rgba wm3.mov

ffmpeg -loop 1 -i wm4.png -t 180 -vcodec png -pix_fmt rgba wm4.mov

結合して透かしが移動するだけの12分(3分x4箇所)の動画を生成。

ffmpeg -i wm1.mov -i wm2.mov -i wm3.mov -i wm4.mov -filter_complex "[0:0] [1:0] [2:0] [3:0] concat=n=4:v=1:a=0 [v]" -map "[v]" -y -vcodec png -pix_fmt rgba -q 0 wm12.mov

1	ffmpeg -i wm1.mov -i wm2.mov -i wm3.mov -i wm4.mov -filter_complex "[0:0] [1:0] [2:0] [3:0] concat=n=4:v=1:a=0 [v]" -map "[v]" -y -vcodec png -pix_fmt rgba -q 0 wm12.mov

もし本編の尺に足りなければ繋ぎ合わせて長くしておく。たとえば本編が20分だったら2つ繋ぎ合わせて24分あれば足りる。

ffmpeg -i wm12.mov -i wm12.mov -filter_complex "[0:0] [1:0] concat=n=2:v=1:a=0 [v]" -map "[v]" -y -vcodec png -pix_fmt rgba -q 0 wm24.mov

1	ffmpeg -i wm12.mov -i wm12.mov -filter_complex "[0:0] [1:0] concat=n=2:v=1:a=0 [v]" -map "[v]" -y -vcodec png -pix_fmt rgba -q 0 wm24.mov

本編と合成。オプションは適宜追加。

ffmpeg -i source.mp4 -i wm24.mov -filter_complex overlay -shortest -y -q 0 &lt;追加オプション&gt; movie_final.mp4

1	ffmpeg -i source.mp4 -i wm24.mov -filter_complex overlay -shortest -y -q 0 <追加オプション> movie_final.mp4

これにイントロやエンディングのクリップを繋ぎ合わせれば完成。

[CSS] CSS3生成支援サイト

2015年2月13日2015年8月21日 @84kure

便利なツールはありがたく使わせてもらおう。

総合
CSS3.0 Maker | CSS3.0 Generator | CSS 3.0 Generator | css3 generator
http://www.css3maker.com/

角丸ボックスの定義
CSS Border Radius Generator
http://border-radius.com/

各種ボタンの定義
CSS3 Button Generator
http://css3button.net/

各種グラデーションの定義
Ultimate CSS Gradient Generator – ColorZilla.com
http://www.colorzilla.com/gradient-editor/

ブラウザ互換性
Can I use… Support tables for HTML5, CSS3, etc
http://caniuse.com/

[CSS] 基本メモ: セレクタいろいろ

2015年2月12日2015年8月21日 @84kure

N番目に来る要素を選択する

div要素の子要素のうち2番目に来るものがp要素だったら

div p: nth-child(2) { color: red; }

1	div p: nth-child(2) { color: red; }

div要素の子要素のうち2番目に来る任意の要素

div *: nth-child(2) { color: red; }

1	div *: nth-child(2) { color: red; }

順番指定のバリエーション

2 – 2番目
odd – 奇数番目
even – 偶数番目
3n – 3の倍数(3,6,9,12,…)
3n+1 – 3の倍数+1(4,7,10,13,…)

div要素の最初の子要素

div: first-child { color: red; }

1	div: first-child { color: red; }

div要素の最後の子要素

div: last-child { color: red; }

1	div: last-child { color: red; }

div要素の子要素が１つだけある場合

div: onl-child { color: red; }

1	div: onl-child { color: red; }

ある要素のうちN番目に来る要素を選択する

div要素の子要素のp要素のうち、2番目のもの

div p: nth-of-type(2) { color: red; }

1	div p: nth-of-type(2) { color: red; }

div要素の子要素のp要素のうち、最初のもの

div p: first-of-type { color: red; }

1	div p: first-of-type { color: red; }

div要素の子要素のp要素のうち、最後のもの

div p: last-of-type { color: red; }

1	div p: last-of-type { color: red; }

div要素の子要素のp要素のうち、p要素が1つだけあれば

div p: only-of-type { color: red; }

1	div p: only-of-type { color: red; }

要素の状態から選択する

テキスト型の入力項目でdisabledのもの

input [type="text"]:disabled { font-weight: bold; }

1	input [type="text"]:disabled { font-weight: bold; }

ラジオボタン型の入力項目でチェックされているもの直後にあるラベル

input [type="radio"]:checked+label { font-weight: bold; }

1	input [type="radio"]:checked+label { font-weight: bold; }

参考サイト

スタイルシートリファレンス（目的別）
http://htmq.com/style/index.shtml#sel

[CSS] 基本メモ: 属性セレクタ

2015年2月11日2015年8月21日 @84kure

サンプル

属性が一致したものだけ赤で表示する

<p><a href="https://google.com">Google</a></p>
<p><a href="http://yahoo.co.jp">Yahoo!</a></p>
<p><a href="http://bing.com">Bing</a></p>

<p><a href="https://google.com">Google</a></p>

<p><a href="http://yahoo.co.jp">Yahoo!</a></p>

a[href="https://google.com/"] {
    color: red;
}

a[href="https://google.com/"] {

color: red;

}

バリエーション例

属性がhttpsで始まるもの(前方一致)

[href^="http"]

1	[href^="http"]

属性がjpで終わるもの(後方一致)

[href$="jp"]

1	[href$="jp"]

属性にbingを含むもの(部分一致)

[href*="bing"]

1	[href*="bing"]

参考サイト

属性セレクタ – CSSの基本書式 – スタイルシート入門
http://www.webword.jp/cssguide/basic/index9.html

属性セレクタ－スタイルシートリファレンス
http://htmq.com/selector/attr.shtml

属性（値）セレクタ－スタイルシートリファレンス
http://htmq.com/selector/attrvalue.shtml

属性（値候補）セレクタ－スタイルシートリファレンス
http://htmq.com/selector/attrvaluet.shtml

[CSS] 基本メモ: キーフレームアニメーション (animation)

2015年2月10日2015年8月21日 @84kure

サンプル

<style>
#test1 {
    width: 50px;
    height: 50px;
    -webkit-animation: test1 5s linear 1s infinite alternate;
}
@-webkit-keyframes test1 {
    0% { width: 50px; background: orange; }
    50% { width: 100px; background: yellow; }
    100% { width: 150px; background: green; }
}
</style>

<style>

#test1 {

width: 50px;

height: 50px;

-webkit-animation: test1 5s linear 1s infinite alternate;

}

@-webkit-keyframes test1 {

0% { width: 50px; background: orange; }

50% { width: 100px; background: yellow; }

100% { width: 150px; background: green; }

}

</style>

<div id="test1">Test1</div>

1	<div id="test1">Test1</div>

参考サイト

animation－CSS3リファレンス
http://www.htmq.com/css3/animation.shtml

[CSS] 基本メモ: アニメーション (transition)

2015年2月9日2015年8月21日 @84kure

サンプル

<style>
div {
    width: 100px;
    height: 100px;
    padding: 10px;
    margin: 30px;
    background-color: orange;
    border: 2px solid orangered;
    transition: background-color 2s linear 0, height 2s ease-in-out 0;
}
div:hover {
    height: 200px;
    background-color: red;
}
</style>

<style>

div {

width: 100px;

height: 100px;

padding: 10px;

margin: 30px;

background-color: orange;

border: 2px solid orangered;

transition: background-color 2s linear 0, height 2s ease-in-out 0;

}

div:hover {

height: 200px;

background-color: red;

}

</style>

<div id="test1">Test1</div>

1	<div id="test1">Test1</div>

参考サイト

transition－CSS3リファレンス
http://www.htmq.com/css3/transition.shtml