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

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

2019/11

Web アプリでドラッグ＆ドロップ（以下 DnD と表記）すること自体はできるようになりました。HTML5 では DnD できる要素が多く定義されていたり、HTML5 以前にも mouseup イベントや mousedown イベントをハンドリングすることで独自に実装することは可能でした。　

ただモバイル Web で、つまりスマホのウェブブラウザから DnD を行うことはまだ困難が伴います。そもそもスマホの小さい画面で DnD を行うことが使いやすいかどうか、という根本的な問題もあると思っていて、それが理由かどうかは定かではありませんが、HTML5 の DnD API の多くはスマホブラウザからは使えないことが多いようです。

そういった事情を理解した上で、それでも現状でどこまでできるだろうか？　という観点で実現方法を考えて実装し、公開してみました：
https://dotnsf.github.io/mobile_dnd_sample/


上記 URL にスマホのブラウザでアクセスすると以下のような画面になります。４角の枠内に５枚の付箋が貼られているイメージです：
2019111701


各付箋は指でドラッグして位置を変えることができるようにしています。下図はピンクの「ハロー」と書かれた付箋をドラッグして位置を変更した後の様子です：
2019111702


また各付箋はダブルタップすると編集モードになり、書かれた文字を編集することができるようになります。「ハロー」を編集して「ハロー！」にしてみました：
2019111703


編集モードで「OK」をタップすると編集後の文字列が反映されます：
2019111704


付箋を削除する場合は、一度ダブルタップして編集モードにして、「DELETE」をタップします：
2019111705


確認後に削除されて元の画面に戻ります。「ａｂｃ」と書かれていた付箋が削除されました：
2019111706


新しい付箋を追加する場合は「NEW」をタップし、編集モードで内容を入力します：
2019111707


そして「OK」をタップすると新しい付箋が追加されます。この付箋も同様にドラッグして位置を変えたり、再度編集して内容を変更することができます：
2019111708



一連の機能紹介は以上です。一応スマホのウェブブラウザでもドラッグ＆ドロップによる UI が実現できました。サンプルでは全て JavaScript を使ってフロントエンドだけで実現していますが、データベースとのバックエンド連携を加えることで永続化なども実現できると思っています。

詳しくは後述のソースコードを参照いただきたいのですが、今回のサンプルでは HTML5 Canvas を使って、Canvas 内に付箋に相当するオブジェクトを描画して実現しています。Canvas 内の Touch イベントを監視してドラッグを処理しています。また編集モード画面は Bootstrap のモーダルダイアログを使っています。


ソースコードはこちらです。実態は index.html ファイル１つで、全ての HTML と JavaScript がこの中に含まれています：
https://github.com/dotnsf/mobile_dnd_sample



タグ ：
#html5
#bootstrap
#dnd
#smartphone
#iphone
#canvas

このブログエントリの続きです。IBM CIS(Cloud Internet Services) とその設定方法についてはこちらをどうぞ：
IBM Cloud で CIS を使って証明書作成なしにカスタムドメインの https アクセスを行う


上記リンク先の設定を行うことで、アプリケーションファイアウォールや DDOS 対策など、簡単に安全なインターネット運用環境を構築することができます。これはこれで便利なのですが・・・

一方でこの設定が不要なタイミングもあります。典型的な例は「アプリケーション開発時」です。CIS の防御モードが有効になっている環境では、ウェブブラウザからアクセスした時にいったんそのリクエストを受け取った上で「そのリクエストが攻撃でないことを確認」します：
2019110706
　↑リクエスト確認中の画面

　↓問題ないと判断されるとオリジンサーバーへ転送されます
2019110707


つまりウェブブラウザからのアクセスであればリクエストの転送機能を使って安全なアクセスが可能になる、という仕組みで実現されています。サービスの運用段階であれば、これが問題になることはあまりないと考えられます。

一方でサービスの開発段階においては少し事情が異なります。API の単体テストなど、ウェブブラウザを使って行うこともありますが、curl などのコマンドやツールを使って行われることも珍しくありません。この場合、curl のリクエストに対して上記「リクエスト確認中」画面の HTML が返ってくるだけで、確認された結果のレスポンス（テストではこれを知りたい）が返ってくるわけではないのです：
$ curl https://XXXXX.XXXXX.com/api/users

<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
  <meta name="robots" content="noindex, nofollow" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <title>Just a moment...</title>
  <style type="text/css">
    html, body {width: 100%; height: 100%; margin: 0; padding: 0;}
    body {background-color: #ffffff; font-family: Helvetica, Arial, sans-serif; font-size: 100%;}
      :
      :
　　↑青字部分はリクエスト確認中画面の HTML 、これでは動作確認にならない


つまり開発段階で CIS を使う場合、ドメイン設定や SSL 対応などはそのまま使えますが、防御モードに関しては一時的に無効にしたくなるケースが出てくるのでした。この防御モードを無効にするための設定方法を紹介します。


といってもその手順は極めてシンプルで、サービスモードを無効にするだけです：
2019111500


この解除を行うことでドメインの DNS や SSL 対応などを残したまま、防御チェックだけを一時的に無効にすることができるようになります。



タグ ：
#ibm
#cloud
#cis

IBM Cloud から提供されている、Web コンテンツ向けにセキュリティやパフォーマンスといった非機能要件を統合的に設計するサービス、それが CIS(Cloud Internet Services)です。mybluemix.net などの IBM Cloud から提供される標準ドメインではなく、独自ドメインを使うことが前提となりますが、そのドメインで運用するウェブアプリケーションやコンテンツ全般を保護して、安全なインターネット環境を提供することができる便利なサービスです：

https://www.ibm.com/jp-ja/cloud/cloud-internet-services
2019111600


この CIS は（独自ドメインの）DNS を使うことでオリジンサーバーとは別の（ Cloudflare 社の）サーバーを経由してオリジンサーバーにアクセスします。この中間サーバーを経由することで必要なセキュリティ要件やコンテンツ保護要件を提供する、というものです。

この CIS を利用して、クライアント（ウェブブラウザ）からの SSL(https) 通信を実現するには大きく３種類の方法があります：

（１）クライアント→中間サーバー→オリジンサーバー　間すべての通信をセキュアに行う方法
（２）クライアント→中間サーバー　間はセキュアに行い、　中間サーバー→オリジンサーバー　間の通信は自己証明書を使った暗号化通信を行う方法
（３）クライアント→中間サーバー　間はセキュアに行い、　中間サーバー→オリジンサーバー　間の通信は HTTP 通信で行う方法
2019110703


①、②、③いずれも共通でクライアントと中間サーバーとの間はセキュアな SSL 通信を行います。中間サーバーとオリジンサーバー間の通信をどう考えるか、という点が異なります。ざっくりいうと①がもっともセキュアで、③がもっともセキュアでない方法となります。

①は理想的といえる方法で、全ての区間がセキュアな通信となります。②も通信自体は SSL で暗号化通信となりますが、その際に利用する証明書はいわゆる「自己証明書」となります。①と比較すると（外部の業者などを使わずに）自分で証明書を作ることができるので、コストや有効期限の自由度などの面でメリットがありますが、「要は誰でも（ドメインのオーナーでなくても）作れる証明書」を使った暗号化通信を行う点が異なります。この証明書を普通に使って直接 SSL 通信を行うと、普通は「セキュアな通信でないが、それでも通信するか？」といった確認メッセージを経て通信可能になったりしますが、中間サーバーとして CIS を入れることにより、クライアントはそういった手順を経ずに通信できるようになります。

そして③の方法ですが、これは中間サーバーとオリジンサーバーとの間の通信は暗号化しない方法です。セキュアかどうか、という観点では暗号化しない経路が存在しているわけで他の２つよりは劣っています。一方で、この方法では証明書の作成を必要としません。クライアントから見た証明書は CIS の中間サーバーが自動で発行されたものが使われ、オリジンサーバーには（そもそも暗号化通信をしないので）証明書が不要です。開発段階や試験段階など、インフラに関わる権限が小さい状況下で、かつ（API の仕様など）https 通信が必須となるような場合においては非常に有要な選択肢となります。またこの方法であれば（そもそも取得しないので）証明書の有効期限切れを心配する必要もありません。　また特にオリジンサーバーとして IBM Cloud の PaaS 環境を利用する場合であれば、オリジンサーバーのルーティングを編集してカスタムドメインでのホスト名でしかオリジンサーバーにアクセスできないように設定することで（HTTPS を使わずにアクセスするような）迂回路を遮断する設定にすることも可能です。

今回はこの③の方法でカスタムドメインの https アクセスを行うための設定を紹介します。

まず IBM Cloud の CIS サービスを利用してプロビジョン済みの状態とし、普通にドメインを登録して設定します。その上で「セキュリティ」カテゴリーの「TLS」内で動作モードを「クライアントからエッジ」に設定します（これが③の通信のための設定となります）：
2019110701


なお、このモードの設定内容によって上記図の①～③の通信方法が変わります。以下のような関係です：
2019110704


また DNS の CNAME でオリジンサーバーとの紐付けを行います（下図の「信頼性」-「DNS」）。このカスタムドメインの頭につけるホスト名を指定して、CNAME の参照先となる別名を指定します。IBM Cloud の PaaS （米国南部リージョン）を使う場合は参照先を us-south.cf.cloud.ibm.com を指定します。また「プロキシー」を有効にします：
2019110702


なお、ここで指定する参照先と IBM Cloud PaaS のリージョンとの関係については以下を参照ください：
https://cloud.ibm.com/docs/cloud-foundry-public?topic=cloud-foundry-public-custom-domains

最後にオリジンサーバー側を用意します。IBM Cloud PaaS の場合であれば（CNAME で指定した名前）.mybluemix.net でアクセスできるようなアプリケーションサーバーを CloudFoundry ランタイムとして作成します（このルーティングは最終的に削除します）。


また IBM Cloud PaaS の場合は「管理」メニューからカスタムドメインを登録する必要があります。この手順の詳細はこちらを参照ください（このリンク先では証明書をインポートする手順まで紹介していますが、今回ここでは SSL の設定を行う必要がないので不要です）：
http://dotnsf.blog.jp/archives/1075713365.html


最後に上記で作成した Cloud Foundry ランタイムのルーティングを編集します。経路の編集から「経路の追加」を実行し、mybluemix.net ドメインと同じ名前を指定したカスタムドメイン用の経路を追加します（証明書をインポートしていないので鍵マークには×がついているはずです）。そしてもともとの mybluemix.net 側の経路を削除します。これでカスタムドメインを使った指定でないとアクセスすることはできなくなりました。最後に「保存」します：
2019110705


この状態でカスタムドメインを指定したホスト名で https アクセスを行ってみます。まず最初に CIS がリクエストを受け取ってアクセス内容を（アタックに相当するアクセスでないか）判断します：
2019110706


問題がないと判断されるとオリジンサーバーにルーティングが行われます。結果的に証明書を独自に発行することなくカスタムドメインを使った https 通信ができるようになりました：
2019110707



【参考】
IBM Cloud Certificate Manager で Let's Encrypt 無料 SSL 証明書を取得する



タグ ：
#ibm
#cloud
#cis
#ssl
#https
#customdomain

MySQL テーブル内にバイナリデータを格納する場合、blob 型の列を定義することになります。具体的には blob 型にも複数あり、想定される最大サイズに応じて使うことになります：
型最大サイズ（バイト）格納するデータの例
tinyblob255（あまり使われない？）
blob65,535（あまり使われない？）
mediumblob16,777,215画像など
largeblob4,294,967,295動画、音声など


格納するデータの内容によって型を決める必要がありますが、例えば画像、音声、動画といったメディア系のファイルを格納しようとすると tinyblob や blob 型では足りないと思われるので、ほぼ mediumblob か largeblob を使うことになると思われます。１データの最大サイズが 16MB を超える想定があるかどうかで使い分けることになります。ただし largeblob でも 4GB が最大となります。

MySQL で mediumblob 型を使う場合のテーブル定義の例としてはこのようになります：
create table images( id int primary key, img mediumblob );

上記例では images テーブル内に mediumblob 型の img 列を定義しました。このテーブルにデータを読み書きする Java のサンプルは後述のようになります。なお後述のサンプル共通で getConnection() という関数を使っていますが、これは java.sql.Connection クラスのインスタンスを返す関数で、具体的には以下のような内容となります：
public Connection getConnection(){
  Connection conn = null;
  try{
    Class.forName( "com.mysql.jdbc.Driver" );
    conn = DriverManager.getConnection( "jdbc:mysql://servername/dbname", "user", "pass" );
  }catch( Exception e ){
    e.printStackTrace();
  }

  return conn;
}


まずはデータの書き込み（insert）です。格納したいバイナリデータが byte[] 型の変数 data に格納されている場合、以下のようなコードで上述の images テーブルに insert することができます：
import java.sql.*;
   : 
 
 
try{
  Connection conn = getConnection();
  String sql = "insert into images( id, img ) values ( ?, ? )";
  PreparedStatement stmt = conn.prepareStatement( sql );
 
 
  stmt.setInt( 1, id ); 
  stmt.setBytes( 2, data ); //. data は byte[] 型 
  int r = stmt.executeUpdate(); 

  stmt.close(); 
  conn.close(); 
}catch( Exception e ){ 
  e.printStackTrace(); 
}

一方、読み出し（select）は以下のようになります。ResultSet からバイナリストリームを取得して ByteArrayOutputStream に書き出し、最後に byte[] 型の変数に変換して取り出しています：
import java.sql.*; 
 : 


byte[] r = null; 

try{ 
  Connection conn = getConnection(); 
  String sql = "select img from images where id = " + id;
  Statement stmt = conn.createStatement(); 

  ResultSet rs = stmt.executeQuery( sql );
  rs.first(); 
  InputStream is = rs.getBinaryStream( 1 );
  ByteArrayOutputStream baos = new ByteArrayOutputStream();
  byte[] bs = new byte[1024];
  int size = 0;
  while( ( size = is.read( bs ) ) != -1 ){
    baos.write( bs, 0, size );
  } 

  r = baos.toByteArray();  //. byte[] 型に変換してデータを取得

  stmt.close();
  conn.close(); 
}catch( Exception e ){
  e.printStackTrace();
  r = null; 
}

バイナリデータをサービスシステム内のどこに格納するべきか、という設計の問題を考慮した上で使うべきだと思いますが、この方法で MySQL に格納しておけば、MySQL のバックアップを取ればバイナリデータもまとめてバックアップすることができ、同様に MySQL をリストアすればバイナリデータごとリストアできる、というメリットがあります。


タグ ：
#java
#mysql
#blob

このブログエントリの続きです：
Chart.js のクリックイベントハンドラ


JavaScript で各種グラフを便利・簡単につくれる Chart.js のカスタマイズとして、アイテムをクリックした時のイベントをハンドリングする方法を上記で紹介しました。今回はその応用として「クリックしたアイテムがどれかわかるように視覚化する」カスタマイズです。

具体例としてはこういう感じを想定しています。たとえば普通に棒グラフが描かれているとします：
2019110401


この左から２番目の棒をクリックしようとしているものとします。画面上ではマウスホバーまでしているので、左から２番目の棒の上にツールチップが表示されています：
2019110402


そしてこの左から２番目の棒をクリックした時に「ここがクリックされた」ことを明示することが目的です。下の例では左から２番目の棒のエリアを赤枠で囲って強調されるようにしています：
2019110403


具体的なコード例は以下になります。どの棒がクリックされたか、については click イベントハンドリングを行っていますが、そのあたりの詳細は前回のエントリを参照してください：
<html>
<head>
<meta charset="utf8"/>
<script type="text/javascript" src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.min.js"></script>

<script>
$(function(){
  var data_labels = [ 0, 1, 2, 3, 4 ];
  var data = [ 1, 2, 4, 3, 0 ];

  var ctx1 = document.getElementById( 'myChart1' );
  var graph1 = {
    type: 'bar',
    data: {
      labels: data_labels,
      datasets: [{
        label: 'A',
        borderWidth: 1,
        backgroundColor: "#14c759",
        borderColor: "#14c759",
        data: data
      }]
    },
    options: {
      title: {
        display: true,
        text: 'クリックイベントハンドリング例',
        padding: 3
      },
      scales: {
        xAxes: [{
          categoryPercentage: 0.4
        }],
        yAxes: [{
          display: true,
          scaleLabel: {
            display: true,
            labelString: ''
          }
        }]
      },
      tooltips: {
        mode: 'label'
      }
    }
  };
  var myChart1 = new Chart( ctx1, graph1 );

  //. クリックイベント
  ctx1.addEventListener( 'click', function( event ){
    var item = myChart1.getElementAtEvent( event );
    if( item.length == 0 ){
      return;
    }
    item = item[0];

    var idx = item._index;        //. 左から何番目のアイテムがクリックされたか？
    var ctx = item._chart.ctx;    //. クリックされたアイテムのチャート描画部分のコンテキスト

    //. ctx に対して、idx 番目のアイテムがある箇所を強調表示する。
    //. 以下の例では idx 番目のアイテムがあるエリアを赤枠で囲って強調している

    //. 描画する矩形の開始地点座標と、矩形の幅・高さを求める
    var x_right = item._xScale.chart.chartArea.right;
    var x_left = item._xScale.chart.chartArea.left;
    var x_width = ( x_right - x_left ) / data_labels.length;
    var y_height = item._yScale.height;
    var y_top = item._yScale.top;
    var draw_x0 = x_width * idx;

    //. strokeRect 関数で対象エリアに矩形を描画する
    ctx.lineWidth = 5;
    ctx.strokeStyle = 'red';
    ctx.strokeRect( draw_x0 + x_left, y_top, x_width, y_height );
  });
});
</script>
</head>
<body>

<div class="container">
  <canvas id="myChart1" style="position:relative; width:800; height:200"></canvas>
</div>

</body>
</html>

簡単に解説すると、クリックしたアイテムを item 変数に入れた後に item._chart.ctx を参照して（チャートが描画される Canvas の）コンテキスト変数を取得する、というのがミソです。これが取得できてしまえば、後はここに Canvas の機能や関数を使って自由に描画すればいいわけで、上の例では矩形を指定して色を付けるようにしています。



タグ ：
#canvas
#chart.js
#javascript

このページのトップヘ