Awed’s blog

雑感とか

投稿サービスの継続あれこれ

はてなダイアリー

はてなダイアリーが来春で終了とのこと。(はてなダイアリー日記)自分は、タイミングの問題かはてなダイアリーは使っていなかったのですが、存在は知っていましたし、引用から閲覧にいったこともよくあります。

こういう投稿型サービスというのは、やめ時が実に難しく、自分が過去に使っていたものだとorkutはサービスが完全終了してしまったので、投稿したデータはダウンロードできるようになっていましたが、放置したので自分のものは電子の海に消えました。

はてなダイアリーは、このはてなブログに移行できるようになっているようですが、ユーザにとっては、異なるサービスなので、納得できない人も多いでしょうね。

 

NAVITIMEの特典ではまった件

前振り

数年振りの書き込みですが、FBだとあとで検索出来ないので記録性に欠けるなと思ってこっちに書いておきます。理解が違っていたらご指摘くださると幸いです。

NAVITIMEの特典

  • 先月SonyXperia Ear Duoを購入したのですが、それにNAVITIMEの3ヶ月無料優待特典というのがついていました。NAVITIMEが、とくだんXperia Ear Duoと連携しているわけでもないのですが、まぁ大人の事情でしょうか。もう一つの特典は、audiobook.jpの聴き放題90日間無料で、こちらは機器との相性バッチリのサービスです。

  • さて、せっかく優待がついていたのでNAVITIMEをインストールしたのですが、まず、お試し期間ってのがあります。これが1ヶ月。あまり深く考えず、お試ししてみたのですが、なんと、前述の3ヶ月優待のキャンペーンコードを入力できなくなります。具体的にはお試し期間中は、このキャンペーンコードは使えませんとなる。

  • 仕方がないので、1ヶ月後の今日にお試し期間が切れるので、このタイミングで解約して(しないと課金されそうだったから)みたのですが、第2のトラップがここに。今は月中なので、解約しようとすると、月末前では使えるからもったいないですよ?という引き止めページがでます。これって本当でしょうか?おそらく無料期間が終わったら、そのタイミングで課金が発生し、それは月末前で使えるようになるのでしょうけど、意図した状況とは異なります。なんとなく、画一的に解約シーケンスの中に月中だったら、このページが出るようになっているように思います。

  • 何度も引き止めページが出るのを振り切ってようやく解約までたどり着くと、設定が消えるようなことを言われます。まぁこれは仕方がないところもあるので、OKすると、ログインからやり直しになり、ようやくキャンペーンコードを入力できるようになりました。

  • これによって、お試し1ヶ月+優待特典3ヶ月で8月まで使えるようになりましたが、なかなか一筋縄では行きませんでした。もう少しユーザー本位の会員権にしてほしいものです。普通、お試し期間中にキャンペーンコード入れたらトータル4ヶ月まで使えるという会員権になっていてもいいと思うんですがねぇ。

WAMPをいじってみた

WAMPって?

HTML5のサーバ通信の仕様としてWebSocketという仕様があるんですが、これは名前の通りソケットを作れるだけなので、これの上にメッセージプロトコルを用意しようというプロジェクトです。WebSocketに限らず使えるプロトコルではあるんですが、一番推奨はWSということのようです。

  • まずNode.jsをいれます。普通にインストールするだけなので説明は割愛
  • wampのルータとクライアントにOrangeのオープンソースプロジェクトであるwamp.rtを使ってみましょう。
  • GitHubからソースコードをダウンロードして展開します。
  • index.htmlをこんな感じで作成します。ついでにwampというディレクトリもmkdirしましょう。
  • さらにautobahn.jsをダウンロードしてwampディレクトリにいれます。

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>wamp samples</h1>
<a href="wamp/">wamp</a>
</body>

 

  • 次にindex.jsを書き換えます。 

 

var http = require('http'); // HTTPサーバーをnode.jsに要求
var port = process.env.PORT || 5000; // portは5000

var httpServer = http.createServer(function(req, res) {

var fname = '.';
if(req.url=='/')
fname += '/index.html';
else if(req.url=='/wamp' || req.url=='/wamp/')
fname += '/wamp/wamp.html';
else
fname += req.url;

var file;
try {
file = require('fs').readFileSync(fname);
} catch(e) {
file = null;
}
if (file != null) {
var mimeType = 'text/html';
if (fname.lastIndexOf('.jgz') >= 0 || fname.lastIndexOf('.js') >= 0)
mimeType = 'text/javascript';
res.writeHead(200, { 'Content-Type': mimeType});
res.end(file);
} else {
res.writeHead(404);
res.end();
}
}).listen(port);

var WAMP = require('./wamp/wamp.js');
var wamp = new WAMP(httpServer, '/wamp/'); // HTTPサーバー生成

  • 次にルータ用のjsを用意します。wamp.jsというファイルを/wampに作ります。

//
// WAMP router
//

module.exports = wamp;

WAMPRT_TRACE = true;

var Router = require('./wamp.rt');


function wamp(httpServer, path) {

function onRPCRegistered(uri) {
console.log('onRPCRegistered RPC registered', uri);
}

function onRPCUnregistered(uri) {
console.log('onRPCUnregistered RPC unregistered', uri);
}


var app = new Router(
{ "server": httpServer,
"path": path,
handleProtocols: function(protocols,cb) {
console.log(protocols);
cb(true,protocols[0]);
//cb(false);
}

}
);
app.on('RPCRegistered', onRPCRegistered);
app.on('RPCUnregistered', onRPCUnregistered);

}

  •  呼び出し側(CALLER)のhtmlコードwamp.htmlも同じディレクトリに書きましょう。

<!DOCTYPE html>
<html>
<head>
<script src="autobahn.min.jgz"></script>
<script script="text/javascritp">
function onLoad() {
var href = document.location.href;
var url = href.replace('http', 'ws');

var calcTag = document.getElementById('calcTag');
var op1Tag = document.getElementById('op1Tag');
var op2Tag = document.getElementById('op2Tag');
var respTag = document.getElementById('respTag');
calcTag.style.backgroundColor = 'rgb(221, 221, 221)';

console.log("ws url=" + url);
var connection = new autobahn.Connection({
url: url,
realm: 'realm1'
});

connection.onopen = function (session) {
console.log('onopen');

calcTag.addEventListener('click', function() {
session.call('com.myapp.calc', [op1Tag.value, op2Tag.value]).then(
function (res) {
var msg = res;
console.log(msg);
respTag.value = msg;
}
);
});
};

connection.onclose = function (reason, details) {
console.log("onclose", reason, details);
};

connection.open();
}
</script>
<style type="text/css">
h1 {
font-size: 36px;
}
button,label,input {
font-size: 24px;
display: block;
width: 100px;
float: left;
margin-bottom: 10px;
}
label {
padding-left: 20px;
text-align: right;
padding-right: 10px;
}
input {
width: 100px;
}
br { clear: left; }
</style>
</head>
<body onload='onLoad()'>
<h1>WAMP Test (CALLER)</h1>
<div>
<button id="calcTag">Calc</button>
<label>Op1</label>
<input id="op1Tag" type="text"/>
<label>Op2</label>
<input id="op2Tag" type="text"/>
<label>Result</label>
<input id="respTag" type="text"/>
</div>
</body>
</html>

  •  最後に呼び出され側(CALLEE)のhtmlファイルwamp-callee.htmlを作ります。ファイル名をハードコードしていて汚いですが…まぁとりあえず。

<!DOCTYPE html>
<html>
<head>
<script src="autobahn.min.jgz"></script>
<script script="text/javascritp">
function onLoad() {
var href = document.location.href;
var url0 = href.replace('http','ws');
var url = url0.replace('wamp-callee.html','');

var resTag = document.getElementById('resTag');

console.log("ws url=" + url);
var connection = new autobahn.Connection({
url: url,
realm: 'realm1'
});

connection.onopen = function (session) {
console.log('onopen');

function calc(args) {
console.log(args);
var val = Number(args[0]) + Number(args[1])
resTag.value = val;
return val;
}
session.register('com.myapp.calc', calc);
console.log('com.myapp.calc registered');
};

connection.onclose = function (reason, details) {
console.log("onclose", reason, details);
};

connection.open();
}
</script>
<style type="text/css">
h1 {
font-size: 36px;
}
button,label,input {
font-size: 24px;
display: block;
width: 100px;
float: left;
margin-bottom: 10px;
}
label {
padding-left: 20px;
text-align: right;
padding-right: 10px;
}
input {
width: 800px;
}
br { clear: left; }
</style>
</head>
<body onload='onLoad()'>
<h1>WAMP Test (CALLEE)</h1>
<div>
<label>Result</label>
<input id="resTag" type="text"/>
</div>
</body>
</html>

  •  二つのhtmlファイルwamp.htmlとwamp-callee.htmlをそれぞれブラウザで開くとwamp.htmlで入力した数字をwamp-callee.htmlで足し算して、結果をwamp.htmlに返すという処理が確認できます。
  • 呼び出され側のHTMLファイルwamp-callee.htmlの足し算Procedure calc(args)をwamp.html側からリモートで呼び出しているのでRPCが実現できていますね。
  • wamp.rtとautobahn.jsを使うとWebSocketサーバ上で簡単にこのような文書間通信ができるわけです。

 

QR Codeとか

QRコードって思ったより使われてるし便利

https://github.com/LazarSoft/jsqrcodeにあるように、JSでコードのデコードもできちゃうので余計なプラグインとか不要ですし、もっとカジュアルに使えても良いように思うのですが、思ったよりウェブアプリで見かけないですよね。

カメラ入力(つまりWebRTC)が普及してないせいかなとも思うのですが、せっかくスマホには100%カメラがついてるのだからこのあたりは普及してほしいところ。

f:id:Awed:20150223145914p:plain

 

Chromium WebViewでもlolipopからウェブビューでgetUserData()が使えるようになるようなので、期待ですね。

 

paizo.ioの紹介 #apijp

はてなのアカウント持ってたのすっかり忘れてましたよ。

id:kskyさんからWeb APIのAvent Calenderやってーって言われて、さてなにを書こうと思ったのですが、そもそもブログ書くのやめて久しいので、自宅サーバーも閉じちゃったし、書き先がないことに気が付きました。

はてなブログもいいかなと思って開設しようと思ったら、すでにメールアドレスが登録されてて、あれアカウント持ってたじゃんと…こういうの他にもありそうですね。

で、今回のネタですが、paizo.io (https://paiza.io/) っていうサイトの紹介です。

f:id:Awed:20141202100950p:plain

もちろんWeb API完備GitHubと連携してたりもするので、書いたコードをGitで管理公開できます。

実際使ってみるとこんな感じ。

f:id:Awed:20141202101210p:plain

Cobol懐かしいですね。右下の今、グレーになってるボタンがGit連携ボタンで、これをonにしてるとGitと同期してくれます。便利便利。

さらにTwitterと連携して、Twitter上でコードを実行できちゃったりします。

f:id:Awed:20141202101347p:plain

paiza_runにメンションしてコードくっつけると実行されるという言語オタにはたまらない仕様となっております。

関谷さんのお好きなGroovyは対応してないですが、DとかRとかClojureとか誰が使うねんっていう言語に対応してるのがおしゃれです。