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

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

自転車:Master-X Light

このブログでは遊戯王とかプログラミングとかしか記事としてあげていませんでしたが、私の一番の趣味は一応自転車ということになっています。※しかし、普段乗る自転車はママチャリです。

 

愛車はCOLNAGO Master-X Lightです。スペック追及はせず、ただただつけたいものをつけたという代物です。こだわりはちょくちょく見せる意味不明なイタリアカラーです。といっても、銀色のシートポストがアルテグラのシートポストしかなくて、アルテグラの印字を消すためにエアブラシで塗装しただけなのですが・・・。

 

最近、あまり遠出していないので、もうちょっと遠出できたらいいなぁ。なお、レースガチ勢とかではないので、カスタマイズする予定もないです。(そうじゃないならカーボン買ってる)

 

f:id:atwtama:20170911232153j:plain

 

 

Javascript:IEの互換モードで画像のウィンドウ中央揃えをする

※当記事は頭の悪いやり方を行っている可能性があるので、温かい目で見ていただけると幸いです。

 

様々なわけがあり、IEの互換モードで画像(対象は画像ではないのですが、本稿では画像として扱います)のウィンドウ中央揃えを行いたくなりました。調べてみた限り、いろいろな方法があるんだと思いますが、私が妄想で書いたJavascriptを記録で残しておきます。

 

イメージとしてはこんな感じです。(わかりにくかったらすみません)現在のウィンドウサイズと中央揃えしたい要素のサイズがわかれば、ウィンドウ中央への表示ができるのです。しかし、IEの互換モードでは、innerWidthやinnnerHeightが使えないので、allObject(height:100%, width100%)の要素を無理に作り、こいつのサイズを取得することで、間接的にウィンドウサイズを取得しました。

 

しかし、この方法では、中央揃えしたい要素よりもウィンドウサイズが小さくなってしまった場合、中央揃えしたい要素が画面外に配置されてしまいます。そのため、中央揃えしたい要素よりウィンドウサイズが小さかった場合の処理も追加しました。

 

f:id:atwtama:20170903234351p:plain

 

 // JAVASCRIPT ***********************************************************************************************************************

window.onresize = moveObject;

function moveObject(){
 var tmpWidthPos = parseInt(document.getElementById('allObjects').offsetWidth, 10);
 var tmpHeightPos = parseInt(document.getElementById('allObjects').offsetHeight, 10);

 if(tmpWidthPos <= document.getElementById('mainImg').offsetWidth){
  document.getElementById('allObjects').style.left = parseInt(document.getElementById('mainImg').offsetWidth, 10);
 }else{
  document.getElementById('allObjects').style.left = '50%';
 }

 if(tmpHeightPos <= document.getElementById('mainImg').offsetHeight){
  document.getElementById('allObjects').style.top = parseInt(document.getElementById('mainImg').offsetHeight, 10);
 }else{
  document.getElementById('allObjects').style.top = '50%';
 }
}

// 読み込み時にレイアウトを変更するため
window.onload = function(){
 moveWindow();
}

// CSS *******************************************************************************************************************************

#allObjects{
 position:absolute;
 margin: -300px 0 0 -400px;
 height:100%;
 width:100%;
 top:50%;
 left:50%;
}

#mainImg{
 position:absolute;
 top:0px;
 left:0px;
 width:800px;
 height:600px;
}

// HTML ******************************************************************************************************************************

<body>
 <div id = "allObjects">
  <p><img id = "mainImg" src="./image/test.png" /></p>
 </div>
</body>

遊戯王:デッキビルドパック スピリット・ウォリアーズをひと箱剥く

最近、全然遊戯王チェックをしていなかったので気づかなかったのですが、8月11日にデッキビルドパックが出ていたみたいですね。ブログ的には2回目ですが、恒例のひと箱剥きをしました!

 

↓これね!

www.yugioh-card.com

 

15パック開けた結果がこれです!

f:id:atwtama:20170827213443j:plain

 

[シク] 虹天気アルシエル

[ウル] 魔弾の悪魔 ザミエル

[スーパー] 魔弾の射手 カスパール

[スーパー] 増殖するG

[スーパー] 影六武衆-フウマ

[スーパー] 極天気ランブラ

[スーパー] 魔弾ークロス・ドミネーター

 

封入率がウル1 スーパー5確定でシクがあるかないかみたいなので、まぁよかったのではないかなと思います。どうもスーパー枠のカスパールやGやクロス・ドミネータが現状良いみたいなのと、アルシエルのシクが出たので良しとします。

 

f:id:atwtama:20170827214028j:plain

 

美しすぎる・・・ウルも欲しいかもしれない。

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の記事はちゃんと書き残したいのに資料等もなくグダグダしてしまったので、また後日追記記事を書くかも。