タグ：css

2020/11/07

QRコードを表示　＆　クリックしてクリップボードにコピー

コメント数:
0 コメント
by dotnsf

ウェブアプリケーションで QR コードを表示したくなることがあります。スマホを持っている人にその場でとあるURLにアクセスしてもらったり、文字列などの情報を送るのに便利な方法だと思っています。

そんな機能が必要な場合、自分は jquery.qrcode.js を使っています。ブラウザの JavaScript（jQuery）だけで文字列の QR コードを簡単に生成することができます。サンプルページを用意したので、こちらで試すとわかりやすいと思います：
https://dotnsf.github.io/jquery_qrcode/

画面最上部のテキストフィールドに URL や文字列を入力し、青いボタンを押すと入力した文字列から QR コードを生成して表示する、というものです。この部分は以下のようなコードで実現しています：

  :

<script src="./qrcode.min.js"></script>

  :

<div class="container">
  <input type="text" id="text" value=""/><button class="btn btn-primary" onClick="generateQRCode();">QRコード</button>
</div>

<canvas id="qrcode"></canvas>

<script>
var text = '';


function generateQRCode(){
  $('#qrcoe').html( '' );
  text = $('#text').val();
  if( text ){
    QRCode.toCanvas( document.getElementById( 'qrcode' ), text, function( err ){
      if( err ){
        console.log( err );
      }
    });
  }
}

  :

まず QR コードを描画するための <canvas> タグ（id="qrcode"）を用意します。そしてボタンがクリックされるとテキストフィールドの値を取り出し、<canvas> の id を指定して QRCode を描画する、というシンプルなものです。これだけで QR コード化が実現できます。

文字列や URL を読み取らせたい対象者がスマートフォンユーザーだけであればこれだけで最小限必要な機能は実現できます。問題は対象者の中に PC ユーザーがいて、PC ユーザーにもこの URL や文字列を提供したい場合です。PC からは QR コードを読み取れない人が多数だと思うので直接メッセンジャーやメールなどで文字列や URL を送ればいいのですが、では逆に QR コードで表示されている文字列を取り出す便利な方法はないでしょうか？　上記サンプルの場合は QR コード化する文字列をテキストフィールドに指定しているのでテキストフィールドから取り出せばいいのですが、そういうケースばかりではありません。　以下は「QR コード部分をクリックした時に、その文字列をクリックボードにコピーする」ためのコードを加えました。これによってクリップボードからペーストするだけでメッセンジャー等で送れるようになり、UI的にも楽だと思ったのでした。　加えて、QR コード部分をクリックした際に「クリック感」というか「押された感」が出るような、一瞬だけ影ができるような視覚効果を加えてみました。

最終的なコードはこのようになりました：

  :
<script src="./qrcode.min.js"></script>

<style type="text/css">
html, body{
  text-align: center;
  background-color: #fafafa;
  font-size: 20px;
  color: #333;
}
#qrcode:active{
  border: 1px solid #334c66;
  background-color: #69c;
  -webkit-box-shadow:inset 0px 0px 8px #334c66;
  -moz-box-shadow: inset 0px 0px 2px #3a6da0;
  box-shadow: 0px 0px 2px #3a6da0;
}
</style>
</head>
<body>

<div class="container">
  <input type="text" id="text" value=""/><button class="btn btn-primary" onClick="generateQRCode();">QRコード</button>
</div>

<canvas id="qrcode"></canvas>

<script>
var text = '';

$(function(){
  $('#qrcode').on( 'click', function( e ){
    copyClipboard( text );
  });
});

function generateQRCode(){
  $('#qrcoe').html( '' );
  text = $('#text').val();
  if( text ){
    QRCode.toCanvas( document.getElementById( 'qrcode' ), text, function( err ){
      if( err ){
        console.log( err );
      }
    });
  }
}

function copyClipboard( str ){
  //. 空 div と空 pre
  var tmp = document.createElement( 'div' );
  var pre = document.createElement( 'pre' );

  pre.style.webkitUserSelect = 'auto';
  pre.style.userSelect = 'auto';
  tmp.appendChild( pre ).textContent = str;

  //. 画面外へ
  var s = tmp.style;
  s.position = 'fixed';
  s.right = '200%';

  //. body に追加
  document.body.appendChild( tmp );
  document.getSelection().selectAllChildren( tmp );

  //. クリップボードにコピー
  var result = document.execCommand( "copy" );

  //. 要素削除
  document.body.removeChild( tmp );

  return result;
}
</script>

  :

QR コード化したテキストの内容を変数 text に保存しておき、id="qrcode" のキャンバスがクリックされた時に text の値をクリップボードにコピーする、という内容を加えています。また視覚効果としてクリックされた時だけ有効になる #qrcode:active 要素を定義し、影をつけるなど見た目に変化を加えています。

タグ：: #jquery; #javascript; #qrcode; #active; #css

2020/10/13

「ぶらさがり」の CSS

コメント数:
0 コメント
by dotnsf

ウェブ画面でタイル状のブロックを縦方向にいくつか並べて表示する際に「１つ上のタイルにぶらさがる」感じを出したいことがままあります。

例えば並べるブロックの数が不定で、画面を一度表示した後からブロックを追加したくなったりする際に「１つ前のブロックの続きである」ことを明確にするため、１つ前のブロックにぶら下がる感じで表現したい、というケースです。更に具体的にはブロックチェーンのブロックを並べるようなケースなどで、こんな風に：

この「ぶらさがってる」感じはブロックの左右に紐状（上図ではチェーン）の画像を表示することで目的に近いものが表現できます。これを CSS で実現するにはどうすればよいか、というのが今回のテーマです。なお今回はブロック部分を Bootstrap4 の card クラスを使って実現していますが、他の多くの環境でも同様に実現できる、はず。

まず紐となる画像を用意しました。今回用意したのは↓のチェーン状の画像で、サイズは 23x50 ピクセルです（画像の高さである 50 を前提に以下の CSS を記述します）：

また HTML 的には以下のようにしたいと思っています。今回は Bootstrap4 の card クラスが付与された <div> を複数並べるのですが、２つ目以降の <div> には mycard クラスも付与し、この mycard クラスの CSS で２つ目以降のブロックは１つ前のブロックにぶら下がっているように表現できることを目指します：

<div class="container" style="padding:80px 0;">
  <div class="card text-white bg-primary border-danger">
    <div class="card-body">
      <h4 class="card-title">Title #0</h4>
      <p class="card-text">Text for #0</p>
    </div>
  </div>

  <div class="card text-white bg-primary border-danger mycard">
    <div class="card-body">
      <h4 class="card-title">Title #1</h4>
      <p class="card-text">Text for #1</p>
    </div>
  </div>

  <div class="card text-white bg-primary border-danger mycard">
    <div class="card-body">
      <h4 class="card-title">Title #2</h4>
      <p class="card-text">Text for #2</p>
    </div>
  </div>


    :
</div>

で、この mycard クラスをどのように定義すればよいか？　が今回の課題なのですが、こんな感じで実現してみました：

<style type="text/css">
.mycard{
  margin: 55px 0;
}
.mycard::before{
  content: url(./chain.png);
  margin: 0px;
  position: absolute;
  top: -52px;
  left: 10px;
}
.mycard::after{
  content: url(./chain.png);
  margin: 0px;
  position: absolute;
  top: -52px;
  right: 10px;
}
</style>

まず mycard クラスを付与するブロックは画像（./chain.png）の高さぶんだけの余幅を持って表示される必要があります（その余幅に画像が入ります）。今回、画像の高さが 50px なので、少し余裕をもたせて margin: 55px 0; というスタイルを指定しています（つまり実際には 55px ぶん下に表示されることになります）。

この空いた余幅に画像を含めたいのですが、今回は上述のように左端と右端の両方に画像を入れ、２箇所で引っかかっているようにぶら下げようとしています。そのため ::before 要素と ::after 要素両方を使って mycard クラスの左端と右端に画像を差し込みます。

まず ::before 要素ですが、content に目的の画像を含めます（content: url( './chain.png' );）。更に画像位置をブロックの左端に設定するため、position: absolute; top: -52px; left:10px; を指定しています。これによって 50px の高さをもつ画像を 52px ぶん上から表示させて空間の隙間に収まるようにしています（また左端ギリギリではなく、10px ぶんのマージンを取っています）。

::after 要素にも同様の設定を行いますが、こちらは右端に表示したいため right: 10px; と、ブロックの右側に 10px ぶんのマージンができるような位置を指定しています。これによってブロックの右側に画像を表示させるよう指定しています。

こうして出来上がったサンプルがこちらです：
https://dotnsf.github.io/hanging_css/

一番上の #0 には mycard クラスがついていないので、パネルのブロックがそのまま表示されてます。#1 以下には全て mycard クラスを指定しているのでチェーンでぶらさがる効果が付与されています。

この方法ならいくつでも足せるし、JavaScript で後から動的に足すこともできるし、ブロックの要素に mycard クラスを１つ追加するだけで実現できるので簡単です。

上記ページのソースコードをまるごと参照していただき、chain.png を同じフォルダに置いてブラウザで開けばローカルでも見れると思います。

贅沢をいうと、現在はチェーンの画像サイズに合わせて CSS を書いて調整しているのですが、この部分をもう少しスマートにできたらいいなあ、と。

タグ：: #css; #hanging

2020/09/07

CSS で画像に blur（ぼかし）をいれる

コメント数:
0 コメント
by dotnsf

CSS だけで画像やブロック要素にぼかしを入れることができます。説明の前に、実際に試せるウェブページを作って公開したので、こちらを御覧ください：
https://dotnsf.github.io/blur_change/

アクセスすると以下のような画面が表示されます。これはある画像がかなり強めにぼかされて表示されています。この時点では「なんとなく人間？」くらいはわかるかもしれませんが、性別や表情、姿勢など、どのような画像が表示されているのか、まだわかりませんよね：

画面下にスライダーバーがあり、これでぼかしのレベルを調整できます。最初はスライダーの一番右（最大ぼかし）に設定されていて、これを左に移動させることでぼかしを少なくすることができます：

だんだん元の絵が見えてきます：

スライダーを一番左まで移動させるとぼかしはゼロになり、元の絵が表示されます：

なお元の絵はいらすとや様の「ブレザーとネクタイの女子学生のイラスト」を使わせていただきました：

このようなぼかしを実現するには、CSS で対象要素（今回の場合は <img> 要素）に以下のようなスタイルを指定します：

#img{
  -ms-filter: blur(100px);
  filter: blur(100px);
}

この blur 属性の指定でぼかしを実現しています。上例では blur(100px); という指定をしていますが、この 100 の部分の数字が大きいほど強いぼかしが入り、0 だとぼかしもゼロになって元の画像のままで表示されます。

上述のサンプルページでは、スライダーバーの動きに従ってスタイル指定を書き換えることで動的にぼかしのレベルが変わるような JavaScript を実装しています。具体的には jQuery を併用して以下のような HTML および JavaScript を実装しました：

<script>
$(function(){
  var t = $('#img')[0];
  t.style['-ms-filter'] = 'blur(100px)';
  t.style['filter'] = 'blur(100px)';
});

function changeBlur(){
  var b = $('#rng').val();
  var t = $('#img')[0];
  t.style['-ms-filter'] = 'blur(' + b + 'px)';
  t.style['filter'] = 'blur(' + b + 'px)';
}
</script>
</head>
<body>

<div class="container">
  <img id="img" src="https://1.bp.blogspot.com/-anFajTcy3CM/XxU0nhH2UyI/AAAAAAABaOA/Fovyifhdjvs8HRvHhNZrOWXEDcTN1_E5gCNcBGAsYHQ/s450/school_blazer_girl_necktie.png" width="80%"/>
  <br/>
  <input id="rng" type="range" value="100" min="0" max="100" step="5" oninput="changeBlur()" width="100%"/>
</div>

この例ではスライダーバーの値に合わせてぼかしのレベルを変えていますが、他に setTimeout を使ったり、クリックイベントハンドラを使うなどして少しずつぼかしを薄くする、といった使い方ができると思っています。

なお、JavaScript で動的にスタイルを書き換える手法については以前のブログエントリで解説しているので、こちらも参照ください：
JavaScript でスタイルを動的に書き換える

タグ：: #jQuery; #css; #javascript; #blur

2020/08/26

JavaScript でスタイルを動的に書き換える

コメント数:
0 コメント
by dotnsf

ウェブページ内の特定要素の見た目を JavaScript で動的に変更する方法を調べました。

一般的にウェブページ内の要素の見た目はスタイルシートで管理されます。例えばこのような感じ：

<head>
<style>
#container1{
  background-color: #fcc;
  height: 100px;
}
</style>
</head>
<body>

<div class="container" id="container1">
</div>

</body>

この時点では #container1 要素はピンク（#ffcccc）で塗りつぶされて表示されます：

この部分の「背景色を動的に（JavaScript で）別の色に変えたい」場合、いくつかの方法が考えられます。一般的には背景色が指定された class を複数用意し、id ではなく class 指定で背景色を与えた上で、JavaScript で指定 class を切り替える（jQuery であれば removeClass + addClass）方法です。　ただこの方法は「事前に class を定義しておく」必要があります。切り替える瞬間の情報や属性値を参照して背景色を決めるとか、ランダム要素を使って背景色を決めるなど、事前に定義する内容が定まらないような場合では使えません。このような場合も含めて #container1 要素に定義された内容そのものを変更する（つまりスタイル定義内容そのものを動的に変更する）にはどのようにすればよいかを調べました。以下、jQuery を併用した場合で説明します。

例えば #container1 で定義されるエリアをクリックしたら背景色をランダムに変える、という場合であれば以下のような JavaScript で実現できます：

<script>
$(function(){
  $('#container1').on( 'click', function( e ){
    //. #container1 のスタイルシート定義を動的に変える。具体的には背景色を変更する
    var bgs = [ '#fcc', '#cfc', '#ccf', '#cff', '#fcf', '#ffc', '#ccc' ];
    var bg = bgs[Math.floor( Math.random() * bgs.length )];
    var t = $('#container1')[0];
    t.style['background-color'] = bg;
  });
});
</script>

スタイルシートの内容を変更したい要素をセレクターを指定して取り出し、その取得結果（配列）の最初の要素を取り出します。そして取り出した要素の style 属性がスタイルシートの内容なのでここを JavaScript で上書きするよう記述します（上例では t.style 内の 'background-color' 属性をランダムに上書きしています）。この方法であれば class を使うことなく、切り替えることもなく、スタイルシート定義を書き換えることで見た目の変更を実現できます。

実際に動くサンプルを用意しました：
https://dotnsf.github.io/dynamic-css/

上記 URL にアクセスすると以下のような画面が表示されます。画面上部に高さ 100px でピンク色の矩形が表示されています：

この矩形部分をクリック（タップ）すると、７種類の中からランダムに選ばれた背景色に切り替わります：

JavaScript でスタイルシートの内容を動的に書き換える方法のサンプルでした。class を事前に用意して指定し直す、というロジックが使えない場合でも実現可能な方法です。

タグ：: #javascript; #style; #css; #dynamic; #jquery

2020/02/01

CSS の transform で画面要素に回転をかける

コメント数:
0 コメント
by dotnsf

CSS で画面内の特定要素に回転をかけることができる、ということを知り、その様子を視覚的に確認できるサービスを作って公開してみました。

この技術（というほどのものではないけど）は CSS の tranform 属性を使って、回転軸と回転角度を指定することで実現できます。ともあれまずは実際に挙動を確認してみましょう：
https://dotnsf.github.io/transform-rotate/

上記 URL にアクセスすると以下のような画面が表示されます。画像（デフォルトではいらすとやさんの「コンピュータを使うペンギン」のイラスト）と、その下に３つのスライダーバーが表示されているはずです：

x のスライダーバーを動かすと、動かした角度だけ画面が縦方向に回転します：

y のスライダーバーを動かすと、同様に横方向に回転します：

z のスライダーバーは画面と平行に回転します：

x, y, z のスライダーバーを同時に動かすこともできます。縦、横、平行すべて指定したぶんだけ回転して画像が表示される、ということがわかると思います：

これらはすべて CSS の transform 属性だけで実現しています。以下、その技術的な内容を紹介しますが、前提として x, y, z という軸の名前とその意味、そして立体的な位置関係を理解しておく必要があるので、そちらから説明します。以下の図のような関係になっていると理解してください：

図のような x 軸、y 軸、z 軸があって、自分は z 軸正方面から画面を見ています。実際に見えている画面は x 軸と y 軸からなる平面上に描かれています。

そしてスライダーバーはそれぞれ x 軸を中心に回転、y 軸を中心に回転、z 軸を中心に回転するスライダーバーになっていて、それぞれ指定した角度だけ回転した結果が画面に表示されます。そのため（結果的には）x で回転すると縦方向、y で回転すると横方向に回転したように見えます。また z で回転すると見えている平面上で時計回り／反時計回りに回転しているように見せることができています。

で、これをどう実現しているかという部分が CSS の transform 属性です。例えば id="a" の要素を x 軸中心に 30 度回転させて表示したい場合は、以下のようなスタイルを適用します：

#a{
  transform: rotateX( 30deg );
}

同様にして y 軸中心に 30 度回転させて表示したい場合は以下です：

#a{
  transform: rotateY( 30deg );
}

z 軸中心に 30 度回転させる場合は以下です：

#a{
  transform: rotateZ( 30deg );
}

「30 度」という部分は -180 から 180 まで変えることができます。それぞれの結果は上述のようになります。上述のサービスではこれらのスタイルを各スライダーバーの値を参照しながら動的に変更して表示しており、その結果がこのようになっています。

これはオマケの情報ですが、このサービスではデフォルトでペンギンの画像を表示して回転させていますが、imgurl という画像の URL をパラメータ指定することで表示画像を変更することができます。例えばこの画像を使いたい場合は、画像の URL（https://1.bp.blogspot.com/-A-AUINeSdLY/XexqsbbnoVI/AAAAAAABWiA/1zwr87fQJbsntV_Ez_ky6-RJPRfgeCZ5ACNcBGAsYHQ/s400/kinshi_mark_computer.png）をパラメータとして以下のように指定します：

https://dotnsf.github.io/transform-rotate/?imgurl=https://1.bp.blogspot.com/-A-AUINeSdLY/XexqsbbnoVI/AAAAAAABWiA/1zwr87fQJbsntV_Ez_ky6-RJPRfgeCZ5ACNcBGAsYHQ/s400/kinshi_mark_computer.png

こんな感じで表示できるはずです：

タグ：: #css; #transform; #rotate

まだプログラマーですが何か？

プログラマーネタ中心。たまに作成したウェブサービス関連の話も https://twitter.com/dotnsf