ブロッコリーを克服するまでプログラミング

プログラミングとか趣味とかを報告します。

Javascript: いくつかの文字列を順次表示させる(フェードイン・フェードアウト)

やるべきことはあるけれども、いろいろなことを放り投げて、Javascriptで遊んでみました。テーマは、「いくつかの文字列をフェードイン・アウトさせて順次表示させる」です。
 
正直、Javascriptは初心者なので(だいたいの技術が初心者のへっぽこ)やはりまずはググってみました。すると、フェードイン・アウトの良い関数が転がっていました。下記URLの「.style.color = "#"+c+c+c+c+c+c;」というくだり、天才かと思いました。
 
 上記関数をほぼパクリ、Javascriptで3つのメッセージをフェードイン・アウトさせてみました。fadeMsg(
"012") でfadeMsg()関数を呼び出すと、関数内では指定されたIDに対して #000000 → #1111111 → #2222222 の順で色を変更します。なので、fadeMsg('0123456789abcdef')とすると黒 → 白 へと色が変わっていくのです。この発想、すごすぎです。(普通だったらすんません)
 
Javascriptしか記述していませんが、使い方は<body>タグ内に<div id = "viewMsg"></div>を追加するだけです。
 
Javascript
<script type="text/javascript" >
 var cnt = 0;
 var arrayMsg = new Array();
 window.onload = function(){ 
  arrayMsg.push("msg no.1"); // メッセージ1を格納
  arrayMsg.push("msg no.2"); // メッセージ2を格納
  arrayMsg.push("mag no.3"); // メッセージ3を格納
  viewMsg(); //viewMsg()を呼びだし
 }
 
 function viewMsg(){
 var interval = 3000;  // 次のメッセージに移行するまでの時間
 if(0 < arrayMsg.length){
  document.getElementById("viewMsg").innerHTML = arrayMsg[0];
  arrayMsg.shift(); // 読み込んだ文字列は抹消
  fadeMsg("fedcba9876543210123456789abcdef"); // フェードイン → アウト
  
  if(0 < arrayMsg.length)
   setTimeout("viewMsg('" + arrayMsg + "')", interval); // interval ms後に再帰
  }
 };
 
 function fadeMsg(str){ 
  var itv;
  var c = str.charAt(cnt++);
 
  if(c == '0')
   itv = 1000;  // #000000(黒)の時だけインターバルを長く設定
  else
   itv = 10;  // #000000以外の時はインターバルを短く設定
 
 document.getElementById("viewMsg").style.color = "#"+c+c+c+c+c+c;
 if(cnt < str.length)
  setTimeout("fadeMsg('" + str + "')", itv);
 if(cnt == str.length)
  cnt = 0;
 };
 </script>

Internet Explorer で webRTC は使用できないのか?

 

※この記事はそれほど参考になりません。

 

ブラウザでWebカメラの情報を取得して表示するのって、すごくやってみたかったのでやってみました。現在はWebRTCとかいう超ハイテクノロジーがあるようなので、使用してみました。とりあえずwikiる。

WebRTC - Wikipedia

wiki中の一文「Internet ExplorerおよびSafariはWebRTCをサポートしていない」

( ˘•ω•˘ )Internet Explorer 11で動作させたい。

 

なにはともあれ実装だと思い、Web上のサンプルコードを使用して実装しました。ただし、最初の実装で実行できたのはFirefoxGoogle Chromeのみです。IEはなぜか表示されませんでした。しかし、私は、Internet Explorerで、動作、させ、たい、のすす!!!!!!!!!!!!!!!!!!!!!!!Internet Explorer 11で動作させたいのです!!!!!!

 

~~~~~~~~~~~~~~10年後~~~~~~~~~~~~~~~~

 

IE11で動作しました。下記の2パターンで動作確認済みです。ただ、実装から時間がかなり経ってるんで、参考HPを忘れてしまいました・・・。すみません。

 

パターン1

webRTCのプラグインを手動でインストール(スタンドアロン機)。http://localhost/から閲覧。なお、環境はWindows7のIE11、使用カメラはノートパソコンのインナーカメラ。

 

プラグインは(たぶん)以下からダウンロードしました。後述していますが、パターン2でうまくいってるし、スタンドアロンじゃない限りは不要?本当????不要????

WebRTC Plugins - Temasys WebRTC Plugin Public Documentation - Temasys Documentation

 

パターン2

WindowsServer上にhtmlファイルをアップロード後、WebRTCプラグインを入れていないWindows7のIE11、ノートパソコンのインナーカメラからテスト。

 

上記2パターンで用意したものは下記です。

・adapter.min.js (どこからかダウンロードしてきたはず)

・main.js (どこかのサンプルプログラム内に組み込まれていたものを改変して使用)

上記二つのコードは参考URLがわからないのにそのまま載せるわけにもいかないので、載せません!(意味ない)

 ・webRTC.html (下記もmain.jsと一緒に入ってたプログラムを改変したと思う)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  >
<html>
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta id="theme-color" name="theme-color" content="#ffffff">
  <base target="_blank">
  <title>webRTC for Internet Explorer</title>
  <link rel="stylesheet" href="camjs/main.css">
  <style>
    div.select {
      display: inline-block;
      margin: 0 0 1em 0;
    }
    p.small {
      font-size: 0.7em;
    }
    label {
      width: 12em;
      display: inline-block;
    }
  </style>
</head>
<body>
  <div id="container">
    <div class="select">
      <label for="audioSource">Audio input source: </label><select id="audioSource"></select>
    </div>
    <div class="select">
      <label for="audioOutput">Audio output destination: </label><select id="audioOutput"></select>
    </div>
    <div class="select">
      <label for="videoSource">Video source: </label><select id="videoSource"></select>
    </div>
    <video id="video" autoplay></video>
  <script type="text/javascript" src="adapter.min.js"></script>
  <script type="text/javascript" src="main.js"></script>
  </div>
</body>
</html>

 

動かすとこうなります。下記はfile://で開いていますが、http://からも余裕で動作しました。なお、写真はスカーライトたんです。

f:id:atwtama:20170720001159p:plain

 

え、てかこれ、Edgeじゃね!?(画像のブラウザはWindows10 Edge)

webRTCの記事はちゃんと書き残したいのに資料等もなくグダグダしてしまったので、また後日追記記事を書くかも。

 

文字認識:tesseract-ocrをインストールしてみた

livedoorブログからの移転記事です。

 

 時代の波には乗れていないのかもしれないが、いまさらtesseract-ocrを使ってみました。本当はいろいろなものを試してみたい感はあるのですが、google先生以上のものはないと信じて、tesseract-ocrでいってみます。

 

 とりあえず、tesseract-ocrをダウンロード。

github.com

 

 Makeとかそういうのは、ちょっとぼくにははやすぎるんで、以下の方法でWindows環境の実行ファイルを取得しました。

tessera-ocrのダウンロード
  1. 上記リンク先から、Installing Tesseract項 「Install Tesseract via pre-built binary package」 をクリック
  2. Windows項 「Tesseract at UB Mannheim」 をクリック
  3. Tesseract at UB Mannheim項 「tesseract-ocr-setup-4.00.00dev.exe」をクリック
 
 その他ホームページを参考にしたら、日本語学習データを取得しよう!と記述されていたのですが、インストーラなら学習データも一緒に取得できるみたいです。一応、日本語の学習データは下記にありました。
 
日本語学習データのダウンロード
  1. (上記手順2から)Windows項 「download the appropriate training data」をクリック
  2. Data Files for Version 4.00項 「jpn.traineddata」をダウンロード

 日本語版ならjpn, 英語版ならeng,はっきりわかんだね。engはオプション設定しなくてもプリインストールされていました。

 

 折角、ブログというものに書いているので、ブログの練習がてら、手順を画像で添付してみます!

 

Ver.4.00のインストール方法

1, NEXT!

f:id:atwtama:20170719002532p:plain

 

2, 「I accept the terms of the License Agreement」をチェックして、やはりNEXT!

f:id:atwtama:20170719002552p:plain

 

3, NEXT!!!

f:id:atwtama:20170719002609p:plain

 

4, 「Additional language data」チェックボックスで「japanese」を選びNEXT!

f:id:atwtama:20170719002628p:plain

 

5, インストールしたい場所を選ぶとよいよ。NEXT!

f:id:atwtama:20170719002644p:plain

 

6, Install!

f:id:atwtama:20170719002746p:plain

 

 長くなりすぎるのもあれなんで、次の記事で簡単に認識してみます。

ワコム ペンタブレット Intuos Art を買ってみた

突然思い立って、ワコムIntuos Artを買ってみました。なお、私は絵を描いた経験などは一切ありません。(^_-)-☆初めてペンタブというものを触りましたが、やはり操作が難しいですね・・・。思ったところにカーソルが合わない

www.amazon.co.jp

 

良いと思ったのが、ペンタブとソフトウェアがセットだということですね。ペイントで書かないといけないかと思ってました・・・。

f:id:atwtama:20170717112602p:plain

かっこいいUIですが、すっごく操作が難しそうですね!

 

ちなみに、私の人生初のデジ絵がこれです。ハハッワロス

f:id:atwtama:20170717112259j:plain

c++:keepaliveを設定したい!

livedoorブログからの移転記事です。

 

C++のコードで、ソケット通信のkeepakive設定方法が、雑魚プログラマーの私にはわからぬ状態であった。調べてみると、どうやら tcp_keepalive構造体とWSAIoctlで設定できるということまで分かった。

こういう時はまず、Microsoftさんに訊く!

https://msdn.microsoft.com/en-us/library/windows/desktop/ms741621(v=vs.85).aspx

ほう(わかっていない)

SIO_KEEPALIVE_VALS control code (Windows)

ほう(英語わかっていない)

 

何はともあれ、値は適当で、下記のようにコードを書けば設定できる(?)

***********************************************************************************************************************************************

#include <Mstcpip.h>                               //struct tcp_keepaliveを使用

 

SOCKET mySock;

tcp_keepalive tcpKeepalive;

DWORD dRet;

 

tcpKeepalive.onoff = 1;                            // 0以外ならkeepaliveがオンになるようだ

tcpKeepalive.keepalivetime = 20000;      // 最初にkeepaliveを送るまでの時間(ms)

tcpKeepalive.keepaliveinterval = 1000;   // keepaliveを送る感覚(ms)

WSAIoctl(*mySock, SIO_KEEPALIVE_VALS, &tcpKeepalive, sizeof(tcpKeepalive), NULL, 0, &dReturn, NULL, NULL);

*************************************************************************************************************************************************