おまじないの綴り方

spelling of a logical spell

excel vbaで画像の位置を取得する

目標

アクティブシート内の図形/画像の中心位置を座標(ピクセル単位)で取得する

やり方

状況

以下のようにシート内に図形や図が幾つか設置されており、その中心座標を取得することを考えます

f:id:miyatsuki_yatsuki:20170702160430p:plain

コード

中心座標を直接取得することはできないので、左(上)の座標+幅(高さ)/2することで中心座標を取得します

Sub TopAndLeftSamp1()
    Dim Sh As Shape
    
    For Each Sh In ActiveSheet.Shapes  '---アクティブシート全ての図形に対し
      Debug.Print Sh.Name & ":" & (Sh.Left + Sh.Width / 2) & "," & (Sh.Top + Sh.Height / 2)
    Next Sh
    
End Sub

結果

Rectangle 1:118.125,87
Rectangle 2:346.125,226.5
Rectangle 3:204.375,243.75
Rectangle 4:437.625,96.75
Rectangle 5:475.875,374.25
Picture 7:597.3749,225.3749

結果は 図形名(英語) : x座標, y座標 の形式で出力されています。

図の正方形/長方形1は正方形/長方形2より右下にありますが、x, yともにRectangle2のほうがRectangle1より大きい値を示しているので問題なく取得できていそうです。

参考

Excel VBA を学ぶなら moug モーグ | 即効テクニック | 図形の位置を設定する

xargs + wget で ファイルリストにあるurlをすべて落として名前をつける

目標

  • 事前に用意したurlリストに記述されたURLをまとめてダウンロードする
  • 落としたファイルの名前を元々のURLにファイル名として使えない文字が入っていると辛いので、保存先の名前を少し置き換える

それぞれ単独ならオプション1つだけで実現できるのに、同時に実現しようとすると急に辛くなる

参考: 単独で動かす場合

事前に用意したurlリストに対してまとめて落とす

wget -i ファイル名
例: wget -i urlList.txt

ファイル名を設定する方法

wget -O 保存先ファイル名 URL
例: wget -O おまじないの綴り方.html http://spell-spell.hatenablog.com/entry/2017/03/25/175513

やり方

検証環境

bash on windows Linux 4.4.0-43-Microsoft #1-Microsoft Wed Dec 31 14:42:53 PST 2014 x86_64 x86_64 x86_64 GNU/Linux

準備

wget -i で使えるような普通のurlではなく、urlの一部からなる保存ファイル名を記載したリストを作る

例:自分のブログをgoogleで調べたときの結果を調べることを想定。 https://www.google.co.jp/search?q=検索クエリ というURLで検索できるので、今回は検索クエリの部分をファイル名にすることにする。 以下のようにファイル名を並べたファイルをfile_name.txtとして保存する。

おまじないの綴り方
うらがみずむ

コード

xargs -a file -I{} wget -O {}.html URL_prefix/{}
例: xargs -a file_name.txt -I{} wget -O {}.html https://www.google.co.jp/search?q={}

説明

xargs

xargsは標準入力として受け取った文字列を任意のコマンドの引数として渡すことができるコマンド。 以下の例ではecho “abc”| によって受け取った"abc"という文字列をxargsの後ろのechoに渡している

$ echo "abc" | xargs echo
abc
$

汎用性が極めて高いコマンドなので理解するのがやや難しいですが、ネット上の情報も多いので、他のサイトも調べてみるといいかもしれません。

aオプション

パイプ等で標準入力を受け取る代わりに、ファイルから読み取った文字列を引数として渡せるオプション。

I(大文字のアイ)オプション

直後に指定した文字列を置換用の文字列して指定できるオプション。 例えば以下の様に使用する。

$ (例)echo "abc" | xargs -I{} wget {}.html
$ (置換後)wget abc.html

例はabcという文字列をxargs経由でwgetに渡した例。-I{}によりxargsで渡ってきたabcが{}という文字列と置き換わるので、結局この例はwget abc.htmlというコマンドと等価になる。

wgetとの連携

xargs -I{} により、wgetコマンドの部分に記述されている{}の部分はxargsから渡された文字列に置き換わる。 そのため、file_name.txtに"おまじないの綴り方"と"うらがみずむ"が記録されている場合、

xargs -a file_name.txt -I{} wget -O {}.html https://www.google.co.jp/search?q={}

を実行すると"おまじないの綴り方"と"うらがみずむ"が文字列としてwgetに渡され、{}が置き換わるので、

wget -O おまじないの綴り方.html https://www.google.co.jp/search?q=おまじないの綴り方
wget -O うらがみずむ.html https://www.google.co.jp/search?q=うらがみずむ

が順番に実行され、本来ならsearch?q=おまじないの綴り方.htmlというファイル名で保存されるところが、おまじないの綴り方.htmlとして保存される。

注意点

  • 上記の様にgoogleの検索結果に対してwgetを書ける場合はユーザーエージェントの偽装を別途行う必要がある
  • bash on windows環境で上記を動かす場合は、file_name.txtの改行コードをLFにしないと動かない

マウスの位置によって表示位置を変えるツールチップをjsとCSSで実装する

目標

f:id:miyatsuki_yatsuki:20170325174822g:plain

前フリ

spell-spell.hatenablog.com

spell-spell.hatenablog.com

考え方

  • 画面内のマウスの位置に応じてツールチップの表示位置を変える
  • マウスが画面左上よりにいたら、ツールチップは右下方向へ、左下なら右上へといったように変えていく

コード

<html>
  <style>

  <!--ツールチップの見た目-->
  span#tooltip{
    position: absolute;   <!--座標で表示位置を直接コントロールできるようにする-->
    z-index: 10; <!--他の要素より前に表示されるように-->
    visibility: hidden; <!--最初は隠しておく-->
    padding: 0 5px;
    background-color: #FFF;
  }

 <!--ツールチップを表示させる部分の見た目。わかればなんでもいい-->
  div {
    background: #abcdef;
    width:300px;
    height:300px;
  }
  </style>

<html>
  <style>
  span#tooltip{
    position: absolute;
    z-index: 10;
    visibility: hidden;
    padding: 0 5px;
    background-color: #FFF;
  }

  div {
    background: #abcdef;
    width:300px;
    height:300px;
  }
  </style>

  <body>
    <span id="tooltip">hoge</span>
    <div onmousemove="move()" onmouseover="over()" onmouseout="out()"></div>
    <br>
    <br>
    <div onmousemove="move()" onmouseover="over()" onmouseout="out()"></div>

    <script type="text/javascript">
      function over()
      {
        var tooltip = document.getElementById("tooltip");
        tooltip.style.visibility = "visible";
      }

      function out()
      {
        var tooltip = document.getElementById("tooltip");
        tooltip.style.visibility = "hidden";
      }

      function move(){
        var tooltip = document.getElementById("tooltip")

        //前々回のバージョン:特にマウス位置は考慮しない
        //var xPos = event.pageX + 10; 
        //var yPos = event.pageY - 10;

        //前回のバージョン:ツールチップが隠れてしまわないように適切な座標を選択する
        var xPos = Math.min(event.pageX + 10, window.pageXOffset + window.innerWidth - tooltip.getBoundingClientRect().width - 10);
        var yPos = Math.min(event.pageY - 20, window.pageYOffset + window.innerHeight - tooltip.getBoundingClientRect().height -20);

        var xPos = 0;
        if(event.pageX < window.innerWidth/2) //マウスカーソル位置が画面の左半分側かどうか
        {
          xPos = event.pageX + 10; //左半分にいたらカーソル位置の右側にツールチップを表示
        }
        else
        {
          xPos = event.pageX - tooltip.getBoundingClientRect().width - 10; //右側にいたらカーソルの右側にツールチップを表示
        }

        var yPos = 0;
        if(event.pageY < window.innerHeight/2) //マウスカーソル位置が画面の上半分かどうか
        {
          yPos = event.pageY + 10 //上半分にいたらカーソル位置の下にツールチップを表示
        }
        else
        {
          yPos = event.pageY - tooltip.getBoundingClientRect().height - 10; //下半分にいたらカーソル位置の上にツールチップを表示
        }


        tooltip.style.top = yPos + "px";
        tooltip.style.left = xPos + "px";
        tooltip.innerHTML = "xPos:" + xPos + "<br/>" + "yPos:" + yPos;
      }
    </script>
  </body>
</html>

問題点

ツールチップの内容が、画面サイズに対して一定以上大きい場合、結局ツールチップが隠れたり、重なってしまったりする問題は起きうる

ただ、これ以上はツールチップの位置よりも中身や表示サイズなどを工夫したほうが良さそう

画面の端に来ても隠れないツールチップをjsとCSSで実装する

目標

f:id:miyatsuki_yatsuki:20170325170817g:plain

前フリ

spell-spell.hatenablog.com

考え方

  • マウスが特定の位置より下(右)までいったら、ツールチップがそれより下(右)まで行かないようにする
    • 具体的は window.pageYOffset + window.innerHeight - getBoundingClientRect().height と マウスのy座標を比較し、より小さい方(=上にある方)をツールチップのy座標として使用する
    • x座標について考える場合はy→x, height→widthにする

f:id:miyatsuki_yatsuki:20170325171211p:plain

コード

<html>
  <style>

  <!--ツールチップの見た目-->
  span#tooltip{
    position: absolute;   <!--座標で表示位置を直接コントロールできるようにする-->
    z-index: 10; <!--他の要素より前に表示されるように-->
    visibility: hidden; <!--最初は隠しておく-->
    padding: 0 5px;
    background-color: #FFF;
  }

 <!--ツールチップを表示させる部分の見た目。わかればなんでもいい-->
  div {
    background: #abcdef;
    width:300px;
    height:300px;
  }
  </style>

<html>
  <style>
  span#tooltip{
    position: absolute;
    z-index: 10;
    visibility: hidden;
    padding: 0 5px;
    background-color: #FFF;
  }

  div {
    background: #abcdef;
    width:300px;
    height:300px;
  }
  </style>

  <body>
    <span id="tooltip">hoge</span>
    <div onmousemove="move()" onmouseover="over()" onmouseout="out()"></div>
    <br>
    <br>
    <div onmousemove="move()" onmouseover="over()" onmouseout="out()"></div>

    <script type="text/javascript">
      function over()
      {
        var tooltip = document.getElementById("tooltip");
        tooltip.style.visibility = "visible";
      }

      function out()
      {
        var tooltip = document.getElementById("tooltip");
        tooltip.style.visibility = "hidden";
      }

      function move(){
        var tooltip = document.getElementById("tooltip")

        //前のバージョン
        //var xPos = event.pageX + 10; 
        //var yPos = event.pageY - 10;

        //上で説明したように、ツールチップが隠れてしまわないように適切な座標を選択する
        var xPos = Math.min(event.pageX + 10, window.pageXOffset + window.innerWidth - tooltip.getBoundingClientRect().width - 10);
        var yPos = Math.min(event.pageY - 20, window.pageYOffset + window.innerHeight - tooltip.getBoundingClientRect().height -20);

        tooltip.style.top = yPos + "px";
        tooltip.style.left = xPos + "px";
        tooltip.innerHTML = "xPos:" + xPos + "<br/>" + "yPos:" + yPos;
      }
    </script>
  </body>
</html>

問題点

右端にマウスを寄せると、ツールチップにマウスが乗ってしまい悲しい感じになる

f:id:miyatsuki_yatsuki:20170325172513g:plain

javascript + CSS でツールチップ機能を実装する

目標

javascript + CSSツールチップ機能を実装する

f:id:miyatsuki_yatsuki:20170318212002g:plain

コード

<html>
  <style>

  <!--ツールチップの見た目-->
  span#tooltip{
    position: absolute;   <!--座標で表示位置を直接コントロールできるようにする-->
    z-index: 10; <!--他の要素より前に表示されるように-->
    visibility: hidden; <!--最初は隠しておく-->
    padding: 0 5px;
    background-color: #FFF;
  }

 <!--ツールチップを表示させる部分の見た目。わかればなんでもいい-->
  div {
    background: #abcdef;
    width:300px;
    height:300px;
  }
  </style>

  <body>
  <!--ツールチップとdiv要素をそれぞれhtmlで書いておく-->
  <!--div要素はマウス移動時のイベントを呼び出すようにしておく-->

    <span id="tooltip">hoge</span>
    <div onmousemove="move()" onmouseover="over()" onmouseout="out()"></div>
    <br>
    <br>
    <div onmousemove="move()" onmouseover="over()" onmouseout="out()"></div>

    <script type="text/javascript">

   //マウスがdiv要素に乗ったらツールチップのvisibilityをvisibleにして表示する
      function over()
      {
        var tooltip = document.getElementById("tooltip");
        tooltip.style.visibility = "visible";
      }

   //マウスがdiv要素から外れたらツールチップのvisibilityをhiddenにして非表示にする
      function out()
      {
        var tooltip = document.getElementById("tooltip");
        tooltip.style.visibility = "hidden";
      }

   //マウスがdiv要素の上で移動されたときツールチップの座標と表示内容を書き換える
      function move(){
        var tooltip = document.getElementById("tooltip")

        //event.pageX, pageYでマウスの位置を取得
        var xPos = event.pageX + 10;
        var yPos = event.pageY - 10;

        //ツールチップのスタイルのtopとleftを書き換えて、ツールチップを移動させる
        tooltip.style.top = yPos + "px";
        tooltip.style.left = xPos + "px";
        tooltip.innerHTML = "xPos:" + xPos + "<br/>" + "yPos:" + yPos;
      }
    </script>
  </body>
</html>

問題点

ウィンドウの端っこの方にマウスがいくと、ツールチップが隠れて悲しい マウスが下の方にいったら、それを考慮してツールチップを高い位置に表示して欲しい

f:id:miyatsuki_yatsuki:20170318213016g:plain

参考記事

blog.qaramell.com

CSSのanimationで文字を点滅させるサンプル

目標

f:id:miyatsuki_yatsuki:20170318195726g:plain

コード

<html>
  <style>
  .blink {
    animation-name: flash; <!--CSS側で定義したアニメーションの名前-->
    animation-duration: 1s; <!--アニメーションの長さ-->
    animation-iteration-count: infinite; <!--アニメーションを何回実行するか, infiniteだと無限ループ-->
    animation-direction: alternate; <!--alternateにすると、行って帰ってという風にアニメーションを実行する-->
    animation-play-state: running; <!--アニメーションを実行中の状態にする-->
  }

 <!--全体の何%進んだところで要素をどうするかの指定。今回は不透明度を0にする-->
  @keyframes flash {
    50%{
        opacity: 0;
    }
  }
  </style>

  <body>
    <span class="blink">hoge</span>
  </body>
</html>

参考記事

qiita.com

qiita.com

d3.jsで書いたグラフの軸を反転させるサンプル

目標

d3.jsで作成した散布図のy軸を反転させたい f:id:miyatsuki_yatsuki:20170307010526p:plain

まとめ

domain()の指定を逆にする

環境

d3.js 4.6.0

関連ページ

そもそもd3.jsでグラフを出す方法(棒グラフ) spell-spell.hatenablog.com

コード

<html>
<head>
  <script type="text/javascript" src="d3.js"></script>
</head>

<body>
  <!-- グラフを描画するためのsvg要素を作っておく -->
  <svg id="scatter" width="500" height="500"></svg>

  <script type="text/javascript">
  //グラフのサイズを指定
  var width = 500 
  var height = 500

  var dataSet = []; //グラフの各軸の値を設定
  for (var i = 0; i < 10; i++)
  {
    dataSet.push({"x": Math.random(), "y": Math.random()})
  }

  //文字が切れないようにマージンを指定
  var margin = 40

  //x軸に対してdomain[0, 1]で左が小さくなる
  //marginの範囲内に収まるようにrangeRoundで調節
  var x = d3.scaleLinear().domain([0, 1]).rangeRound([0, width-margin*2]);

  //y軸に対してdomain[1, 0]で下が小さくなる
  //marginの範囲内に収まるようにrangeRoundで調節  
  var y = d3.scaleLinear().domain([1, 0]).rangeRound([0, height-margin*2]);

  //描画したいSVG要素を取得
  var element = document.getElementById("scatter")

  //散布図の○を生成する
  d3.select(element).selectAll("circle")
    .data(dataSet)
    .enter()
    .append("circle")

  //散布図の○を適切な位置に置く
  d3.select(element).selectAll("circle")
    .attr("class", "data")
    .attr("cx", function(d){return x(d["x"]) + margin})
    .attr("cy", function(d){return y(d["y"]) + margin})
    .attr("r", function(d){return 5})
    .attr("fill", "#6fbadd")

  //x軸を作る
  d3.select(element).append("g")
    .attr("class", "axis axis--x")
    .attr("transform", "translate(" + margin + "," + (height-margin) + ")")
    .call(d3.axisBottom(x));

  //y軸を作る
  d3.select(element).append("g")
    .attr("class", "axis axis--y")
    .attr("transform", "translate(" + margin + "," + margin + ")")
    .call(d3.axisLeft(y));

</script>

</body>

</html>