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

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

2018/08

マンホールマップでも使っている、 jqPuzzle を使って任意画像をスライドパズル化する方法を紹介します。

このスライドパズルは「15パズル」とも呼ばれていて、僕くらいのオッサンは↓こんなのがおもちゃ売り場で売られているのをよく目にしました。「懐かしいゲーム」の1つです:
2018083000



この jqPuzzle を使ったスライドパズル機能はマンホールマップ内の全てのマンホール画像で遊べます。例えばこのマンホール画像ページの「スライドゲームに移動」をクリックすると:
2018083001


紹介されているマンホール画像がこんなスライドパズルに早変わり:
2018083002


"shuffle" ボタンをクリックするとランダムにシャッフルされます。16 が空いた状態でパズルスタートです:
2018083003


空いたピースの上下左右にあるピースをクリックすると、そのピースが空いた部分にスライドして移動します。これを繰り返して 1 から 15 までが正しい位置にくる完成を目指す、というものです。個人的な印象としては1、2、3までは簡単だけど、4を揃える所あたりからコツが必要になってくると思ってます:
2018083004


こんな楽しい機能を提供する jqPuzzle は jQuery を併用して、画像にスライドパズルのインターフェースを追加してくれる CSS および JavaScript のセットです。なお、jqPuzzle が対応する jQuery は 1.x までの模様なので、この点のみ注意が必要です:
2018083001


jqPuzzle を使うには公式サイトから zip ファイルをダウンロード&展開して使います(CDN は見当たりませんでした)。なお jqPuzzle の提供ライセンスは 以下の通り、GPL と MIT のデュアルライセンス、だそうです:
2018083002


利用にあたっては jQuery 1.x をロードした後に CSS と JavaScript をロードします。これで準備完了(以下の例では jQuery v1.6.2 を指定しています。また jqPuzzle の両ファイルはこれを記述する HTML と同じ階層に存在しているものとします):
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.jqpuzzle.css"/>
<script type="text/javascript" src="jquery.jqpuzzle.packed.js"></script>

一番簡単な利用方法は <img> タグに jqPuzzle クラスを指定する方法だと思います。実はこれだけでその画像は 4x4 のスライドパズル化されて表示されます:
<img src="sample.jpg" class="jqPuzzle"/>

2018083005


ちなみに "Original" ボタンをクリックすると完成形が、"Numbers" をクリックすると各ピースの数字の表示/非表示が切り替わります。数字表記がないと難易度は一気に上がります。


カスタマイズの要素を加えることも可能です。例えば以下の例では 4x4 で 16 番目の駒を抜くことは変えずに、ボタンの文字を日本語化し、最初からシャッフル済みになるようにしています(というわけでシャッフルボタンも不要なので非表示にしました):
  :
<script type="text/javascript">
var settings = {
  rows: 4,
  cols: 4,
  hole: 16,
  shuffle: true,
  numbers: true,
  language: 'ja',
  control: {
    shufflePieces: false,
    confirmShuffle: true,
    toggleOriginal: true,
    toggleNumbers: true,
    counter: true,
    timer: true,
    pauseTimer: true
  },
  success: {
    fadeOriginal: false,
    callback: undefined,
    callbackTimeout: 300
  },
  animation: {
    shuffleRounds: 3,
    shuffleSpeed: 800,
    slidingSpeed: 200,
    fadeOriginalSpeed: 600
  },
  style: {
    gridSize: 2,
    overlap: true,
    backgroundOpacity: 0.1
  }
};
var texts = {
  shuffleLabel: 'シャッフル',
  toggleOriginalLabel: '元画像',
  toggleNumbersLabel: '数値表示/非表示',
  confirmShuffleMessage: 'シャッフルしてよろしいですか?',
  movesLabel: '回',
  secondsLabel: '秒'
};

$(function(){
  var t = $('img.jqPuzzle');
  t.jqPuzzle( settings, texts );
});
</script>
 :
2018083006


ちょっとした息抜き機能を追加するのに便利なライブラリです。


これまであまり積極的に使うことのなかった webpack を使ってみました:
2018082300


webpack は複数のモジュール(ファイル)を1つに(場合によっては複数に)まとめるバンドラ(bundler)ツールです。Node.js でいうと、エントリーポイントとなる main.js ファイルと、ここから呼ばれるサブ機能が sub1.js や sub2.js などの別ファイルに分かれている場合に、これら3つのファイルを1つのファイルにまとめるというものです。

【サンプルの紹介】
今回は jsonwebtoken パッケージを使ったシンプルなサンプルコード(main.js)を用意しました:
// main.js
const jwt = require( 'jsonwebtoken' );

function main( params ){
  const id = params.id;
  const password = params.password;
  const token = jwt.sign( { id: id, password: password }, 'secret' );

  console.log( token );
}

main({
  id: 'userid',
  password: 'password'
});

global.main = main;

↑ main() 関数の中で2つのパラメータ(id と password)を受け取り、JSON をトークン化して出力する、というものです。そして id = 'userid', password = 'password' を指定して main を実行しています。

この main.js を実行する前に、コード内で使っている jsonwebtoken パッケージをインストールする必要があります。以下の内容の package.json を用意します:
{
  "name": "jwt_test",
  "version": "0.0.1",
  "main": "main.js",
  "dependencies": {
    "jsonwebtoken": "^8.3.0"
  }
}

そして以下のコマンドで jsonwebtoken パッケージをインストールします:
$ npm install


その後に main.js を普通に実行すると、{ id: 'userid', password: 'password' } をトークン化した結果が表示されます:
$ node main.js
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6ImRvdG5zZiIsInBhc3N3b3JkIjoicGFzc3dvcmQiLCJpYXQiOjE1MzQ5OTU5NTh9.LUx0q5ycwIFeR1HNnNFgUrlX0w0cny0qDVsPmiVtVnI

とりあえずこの状態で動くことは確認できました。コードは main.js 1つだけに記述されていますが、jsonwebtoken パッケージを利用しているので、実行前に $npm install (jsonwebtoken) を実施しておく必要があり、実際にはここでインストールされるモジュールファイルも使われながら動作します。これらを1ファイルにまとめた上で実行できるようにするというのが今回の目的です。


【webpack のインストール】
webpack は npm を使ってインストールします。例えば以下のコマンドでグローバルインストールすることができます:
$ npm install webpack -g

今回は webpack を(このプロジェクト用に)ローカルインストールして使うことにします。なお webpack 4.0 以降では webpack-cli も合わせて導入する必要があるのでまとめてインストールし、webpack コマンドが実行できるようローカルモジュールへのパスを通します:
$ npm install webpack webpack-cli

$ export PATH=$PATH:./node_modules/.bin


【config ファイルの用意】
webpack を使ってバンドルする作業の条件を config ファイルと呼ばれるファイルで指定します。以下の内容で webpack.js ファイルを作成します:
var path = require( 'path' );
module.exports = {
  entry: './main.js',
  output: {
    path: path.resolve( __dirname, 'dist' ),
    filename: 'bundle.js'
  },
  target: 'node'
};

↑ main.js をエントリーポイント(最初に実行するファイル)とする一連の処理の中で必要とされるモジュール(今回の例では jsonwebtoken パッケージ)がバンドルの対象となり、バンドル結果は dist/bundle.js というファイルに出力される、という指定をしています。


【バンドルと実行】
ここまでに準備した環境とファイルを使って webpack を使ってみます。

まずはバンドル、上記で作成した webpack.js を config ファイルとして指定して webpack コマンドを実行します:
$ webpack --config webpack.js

バンドルが成功すると dist/bundle.js というファイルが生成され、この1ファイルに main.js と jsonwebtoken パッケージがバンドルされているはずです。

確認のため生成されたファイルを実行します。念の為、これらのパッケージモジュールが存在しないテンポラリディレクトリ(/tmp)に bundle.js ファイル1つだけをコピーした上で実行します:
$ cp dist/bundle.js /tmp
$ cd /tmp
$ node bundle.js
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6ImRvdG5zZiIsInBhc3N3b3JkIjoicGFzc3dvcmQiLCJpYXQiOjE1MzUwMDM1MjF9.llZuuWxqX607AWrJBvMEDpFksFX8IvigUrdIWbhItRg

期待通りにトークンが表示される結果になりました。この bundle.js 1ファイルの中に jsonwebtoken パッケージやその依存パッケージまでが含まれる形でバンドルされて実行されたことが確認できました。


webpack を使うことで今回の例のように依存関係ごとファイルをまとめることができるだけでなく、ファイルのモジュール化が促進されたり、一度のロードで全ファイルを読み込めることから SPA(Single Page Application) が作りやすくなったりします。その一方で、バンドル先のファイルが大きくなってしまうと最初のロードに時間がかかるようになる、という問題もあります。個人的にはパッケージ化されたあとに開発コンソールを使ったデバッグが難しくなることに懸念も持っています。

まあケース・バイ・ケース、なんだろうなあ。。

 

Node.js を使ったアプリケーション開発中に npm install を実行して、こんなエラーに遭遇することがあります(個人的な印象では下の例のように canvas モジュールをインストールしようとした際によく遭遇します):
$ npm install canvas

> canvas@1.6.11 install /Users/dotnsf/src/tmp/node_modules/canvas
> node-gyp rebuild

gyp WARN download NVM_NODEJS_ORG_MIRROR is deprecated and will be removed in node-gyp v4, please use NODEJS_ORG_MIRROR
gyp ERR! configure error 
gyp ERR! stack Error: Python executable "/Users/dotnsf/.pyenv/shims/python" is v3.6.5, which is not supported by gyp.
gyp ERR! stack You can pass the --python switch to point to Python >= v2.5.0 & < 3.0.0.
gyp ERR! stack     at PythonFinder.failPythonVersion (/Users/dotnsf/.nvm/versions/node/v8.9.4/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:492:19)
gyp ERR! stack     at PythonFinder. (/Users/dotnsf/.nvm/versions/node/v8.9.4/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:474:14)
gyp ERR! stack     at ChildProcess.exithandler (child_process.js:267:7)
gyp ERR! stack     at emitTwo (events.js:126:13)
gyp ERR! stack     at ChildProcess.emit (events.js:214:7)
      :
      :

スクリーンショット 2018-08-21 9.44.07


Node.js でネイティブモジュールのビルドが必要になった場合に node-gyp を使ってビルドが行われるのですが、その際に使われる Python のバージョンがあっていない、というエラーです。ちと厄介なのは Python のバージョンが古くて問題になっているのではなく、新しすぎてエラーが発生している、ということです(上の例では v2.5.0 以上 v3.0.0 未満でないといけないのに v3.6.5 がインストールされていてエラーが発生している、というメッセージが表示されています)。

この解決のためにわざわざ古いバージョンをインストールしないといけないのか、ということはなく、以下のようにバージョンを明示して npm install することで解決できます:
$ npm install canvas --python=python2.7

> canvas@1.6.11 install /Users/dotnsf/src/tmp/node_modules/canvas
> node-gyp rebuild

gyp WARN download NVM_NODEJS_ORG_MIRROR is deprecated and will be removed in node-gyp v4, please use NODEJS_ORG_MIRROR
      :
      :

+ canvas@1.6.11
added 2 packages in 10.027s


ベータ2が公開されたばかりの IBM Notes(以下「ノーツ」)V10 の、個人的に待望だった新機能「LotusScript で HTTP リクエスト」を早速試してみました。


1989 年(平成元年!)にバージョン1がリリースされたノーツはメールやインターネットの標準機能を取り込みながら進化してきました。特徴の1つでもあるマクロ言語の機能も簡易的な@関数式から VBA 互換の LotusScript 、Java 、そして JavaScript と時代に即して対応範囲を広げてきました。

ただ、ここ数年のカスタマイズの中で不便に感じることも出てきました。それが(この下で紹介する新機能でもある)HTTP リクエスト機能です。各種 REST API などと連携しようとすると HTTP リクエストを実行して、その結果を受け取って・・という一連の処理が必要になります。

ノーツで HTTP リクエストを実行できなかったわけではありません。ノーツは JVM を内蔵しており、Java で(エージェントと呼ばれる)マクロを記述して実行することができます。この方法を使うことで(つまり Java のネットワーク機能を使うことで)HTTP リクエストを実行することはこれまでも可能でした。

一方で制限事項もありました。ノーツの Java エージェントはバックエンド機能として提供されており、そのフロントエンド機能は提供されていませんでした。具体的にいうと「編集中の(未保存の)画面の Subject フィールドの値を取り出して、その値をパラメータとして HTTP リクエストを実行」といった処理をしようとすると、青字部分は Java を使えばいいのですが、赤字の部分の処理は Java からは実行できないのでした。これを実現するために例えば LotusScript のフロントエンド機能を使って赤字部分の処理を実行し、そこで取り出した値を(ファイル渡しなどの)何らかの方法でバックエンドの Java に渡して処理させる、という連携が必要でした。なので、技術的に不可能でなかったのですが、2つの言語記述による処理を連携させる必要があり、ちと面倒だったのでした。

今回リリースされた V10 ベータ2の新機能「LotusScript から HTTP リクエスト」はこの制約を取り除くことができると思っています。具体的にはフロントエンドの LotusScript で編集中の値を取り出して、そのままバックエンドの LotusScript で HTTP リクエストを実行することができるようになる、というものです。全てが LotusScript の1処理で完結することになり、自然に実装することができるようになると期待していました。その機能を使ってみたので以下で紹介します:



まずはノーツ V10 をインストールします、about 画面はこんな感じです:
20180821


で、肝心の HTTP リクエストは・・・どうやって使うんだろ?? (^^; ベータ版だからなのか、全くドキュメントが見つかりません。。。

それっぽいキーワードでぐぐって、唯一なんとか見つけたのがこの PDF ・・・
http://collabsphere.org/ug/collabsphere2018.nsf/0/789F066AA1414139862582A900620D93/$File/CollabSphere2018%20-%20Elementary.pdf

2018082105
 ↑NotesSession から createHttpRequest() して・・・ってこと?

これ、どこまで信用できる情報かわからないし、情報は充分ではないけれど、今はこれを信じて使ってみることにします。まずは超シンプルに僕が IBM Cloud 上に作った「リアルタイム外為情報」 API をそのまま HTTP GET で呼んでみることにします:
2018082105
 ↑HTTP GET されたら、こんな JSON を返すだけの API


上記 PDF の内容に従って、NotesSession のインスタンスから createHTTPRequest() して NotesHTTPRequest のセッションを生成し、URL を指定して HTTP GET 、その結果を MsgBox でそのまま出力、という内容です。なお PDF に記述されていた Use "class.RemoteHTTP" という宣言をするとエラーになってしまうため使っていません:
2018082103

Sub Click(Source As Button)
  Dim session As New NotesSession
  Dim http As NotesHTTPRequest
	
  url = "http://fx.mybluemix.net/"
	
  Set http = session.CreateHTTPRequest()
  response = http.Get( url )
  Msgbox response
End Sub

実行したら・・・  動いた!!
2018082104


ついに LotusScript だけで HTTP GET Request が動いた瞬間です。わーい、結果は HTTP レスポンスヘッダを含むテキストになってるわけね、ふむふむ。。

あ、よく見るとリクエスト先 URL のプロトコルが "https" ではなく、"http" になっていたので、もう一度 "https" にしてやり直し:
2018082101

Sub Click(Source As Button)
  Dim session As New NotesSession
  Dim http As NotesHTTPRequest
	
  url = "https://fx.mybluemix.net/"
	
  Set http = session.CreateHTTPRequest()
  response = http.Get( url )
  Msgbox response
End Sub


・・・したらエラー(苦笑):
2018082102


なんだ、このエラーは (^^; ベータ版だからなのだろうか?それとも回避手順がある?? あと HTTP GET はいいんだけど、HTTP POST がよくわかりません。http.Post( url, content ) らしいんだけど、content をどう書けばいいんだろ??それから認証が必要な場合は・・・


まだ情報不足もあって調べられることに限界がありますが、一方で LotusScript のみで REST API が実行できそうだ、という感触も得ることができました。これでドキュメントが揃ってくればノーツからの Watson API 連携ももっと楽にできるようになるかな。。


アマゾンで PC とラズベリーパイをシリアル接続する USB ケーブルを購入しました:
Raspberry Pi ラズベリーパイ用の USB-TTLシリアルコンソールのUSB変換COMケーブルモジュールのケーブル


これ、Windows ではデバイスドライバも提供されていて、Teraterm などでシリアル接続できることがよく知られています。では Ubuntu (16.04) で同様のことができるのか? ということに挑戦してみました。結論としては特別にデバイスドライバを用意することもなく、アクセスすることができました。以下、その手順です。


まずはラズベリーパイの設定(raspi-config)でシリアル接続を有効にします。raspi-config で Interface - Serial を選択します:
2018081701


「はい」を選んでシリアル接続を有効にします:
2018081702


次にラズベリーパイと USB シリアルケーブルとを接続します。USB シリアルケーブルの黒(GND)をラズパイの6番ピン、白(UART TXD(14))を8番ピン、緑(UART RXD(15))を10番ピンにそれぞれ接続します。赤は結線の必要がないので宙ぶらりんのままです:
IMG_2932


次に Ubuntu 側の準備です。実は特別にデバイスドライバを準備することもなく、そのまま認識されます。が、ただ認識しただけでは通信はできないため、そのための準備が必要です。

まず、今回のシリアル通信には cu コマンドを使います。なので、まずは cu をインストールします:
$ sudo apt-get install cu

次にシリアルポートの確認と設定を行います。Ubuntu の USB ポートに USB シリアルケーブルを接続し、次のコマンドを入力して、ちゃんと認識できているかどうかを確認します:
$ ls -l /dev/serial/by-id/

USB シリアルケーブルが正しく認識できていると /dev/ttyUSB0 といった感じで最後に 0(ゼロ)が付いたデバイスとして認識されます。今回は /dev/ttyUSB0 として認識されていると仮定して以下の説明を続けます:
20180814a


/dev/ttyUSB0 の権限を変更します:
$ sudo chmod 666 /dev/ttyUSB0

ここまでの手順で準備が完了しました。最後に cu コマンドで目的のデバイスに接続します。その際にボーレートを 115200 bps に指定して接続します:
$ sudo cu -s 115200 -l /dev/ttyUSB0

成功するとこんな感じでラズパイのログインプロンプトが現れ、ログインできます:
20180814


モニタがないとか、無線LAN がないとか、無線 LAN の環境が普段と違う時(の無線 LAN の設定を変えたい時)でもラズパイを使えて、とても便利な接続方法です。アナログ最強!

 

このページのトップヘ