画面が大きすぎてPontaカードアプリのバーコードが読み取れないときにやること

僕はローソンが大好きです。
正確に言うと、ポンタが大好きです。
だって、
キャンペーンがいっぱいあって、覚えてるだけでも、
・焼き鳥1本無料
・先着○○名に200ポイントプレゼント
・500mlの水1本無料(商品名は忘れた)
・期間限定でアイスラテが、150円⇒120円に
とかとか。
非常にお世話になっています。
もちろん、基本機能であるポイントカードとしても重宝しております。
そんな便利なPontaカードですが、
先日アプリ化されました。
つまり、
Pontaカードを持ち運ばなくてよくなった」
ということです。
例によって僕はポンタ君が大好きなので、
真っ先にアプリをインストールしたわけなんですが、
「使えない…!!!」
アプリ上にバーコードが表示されて、
それを店員さんに見せて使うんですが、
このバーコードが全然認識されないんです。
レジのスキャナの角度を何度も変えたり、
距離感を変えてみたりと、格闘しないとダメ。
店員さんが
「あれっ…?あれっ…?」
とか言って、1分くらい待ってると
「認識できました」
だって。
毎回こんなことをやっていたら、
ぜんぜんコンビニエンス(便利)じゃないじゃん!
ということで、対策を考えたので、
同じ現象に困っている人がいたら参考にしてください。
 
 

原因は画面の大きさだった

いま日本で一番使われているスマホと言えば、iPhoneですよね。
だから、アプリを作る人たちが真っ先に
テストするのはiPhone端末です。
でもね、androidも忘れないでほしい。
androidには、結構画面の大きいモデルがあって、
僕が使っている「HUAWEI P10Lite」も画面が大きい。
大きな画面でポンタのバーコードを表示すると、
レジのスキャナの幅よりも大きくなるんですよ。
これが原因だった。
iPhoneだったら、きっとちょうどいいサイズになるんだろうね。
 
 

スクリーンキャプチャ取ればよくね?

じゃあ、Pontaカードアプリのスクリーンショットを取って、
縮小すればええやん。
と思ったんですが、Pontaカードアプリは、
スクリーンショットができないようになってました。
友達に画面の写真を撮ってもらって、
LINEで送ってもらうのもありなんだけど、
ちょっとめんどい。
※めんどいとかじゃなくて、本当はやっちゃだめだけどね。。
なので、スクリーンキャプチャ案はボツ。
 
 

そもそも画面小さくできないの?

そこで、思い出しました。
HUAWEI P10Liteには、画面を縮小できる設定があることを。
設定>スマートアシスト>ワンハンドUI>ミニ画面表示
⇒「オン」にする
この設定をオンにすると、
画面下の「ナビゲーションバー」をスライドすることで、
画面サイズを小さくすることができるようになります。
実際にローソンでスキャンしてもらったら、
一瞬で認識されるようになりました。
めでたし。
※あなたの端末がHUAWEI P10 Liteじゃなくても、
 画面を小さくする手順があるかもしれないので、ぜひ探してみてください。
以上

自動ログインしたいならブックマークレットじゃなくてVBSを使え

よく使うWebサイトに、なんとか自動でログインするためにやったこと。
 
やりたいこと
  • 会社のポータルサイトへのログインを自動化したい
  • できればブックマークバーに置いてあるお気に入りを差し替えたい。(デスクトップにショートカットを置くとかはイヤ。)
  • あくまで今まで通り、追加で特別な操作はなしで、ログインを自動でさせたい。
現状、社内ポータルサイトにアクセスすると、
一応「ログインID」と「パスワード」は、
IEブラウザのオートコンプリート機能で補填されていて、あとはEnterを打つだけ
 
そう、
「あとはEnterを打つだけ」
なんだけど、
 
セッションが切れる毎に(PC,ブラウザ,タブを落とすたびに,新しいタブで開くたびに)
毎回まいっかいログイン画面が出てくる。。
 
イライライライラ・・・
 
会社人生あと30年。
あと何回"無駄なEnter"を打てばいいんだ。。
 
 
 

ブックマークレットで試してみる

いろいろ調べた結果、まずはじめに検討したのはブックマークレット
でも、僕の欲している完全自動化とは程遠かった。。
だって、ワンクリックで済まないんだもん。
 
シンプルに3秒後にHelloWorldを表示できる。うまくいった。↓
javascript:function login(){alert("hello%20world");};setTimeout("login()", 3000);
 
helloworldを2回表示できる。1個目をOKしたら3秒後にもっかい。うまくいった。↓
javascript:alert("hello%20world");function login(){alert("hello%20world");};setTimeout("login()", 3000);
 
サイト表示後だと、helloworld出てこない。うまくいかん…↓
javascript:document.location = "https://www.yahoo.co.jp/";function login(){alert("hello%20world");};setTimeout("login()", 3000);
 
どうやら、
①サイトを表示
②あれこれする
という①②を両方セットにしたブックマークレットは、作れないらしい。
 
参考にしたサイトはこれ↓


 

 

まあ、確かにこれができたら、それはそれで危なそうだね。

はい、ブックマークレットの検討はボツ。次。
 
 
 

VBSを試してみる

いままでみたいに、ブックマークをクリックする方法が使えないので、
当初の検討からは外していたんだが、、
しゃーないのでVBSで書いてみることにする。
 
参考にしたサイトはこれ↓
 

 

 

作成したvbsはこれ↓

InputAndClick
Sub InputAndClick
Set ie = CreateObject("InternetExplorer.Application")
ie.Visible = True
ie.Navigate "http://*****(URLはごめんね)*****.portal"
WScript.Sleep 2000
'ie.Document.getElementByName("user")(0).Value = "**(名前もごめんね)**"
'ie.Document.getElementByName("password")(0).Value = "***(パスワードもごめんね)***"
ie.Document.getElementsByName("form")(0).submit
End Sub

 

僕がログインしたい社内ポータルサイトのフォームは、
idが振られていなくって、nameが振られていた。
 
なので、
"getElemenById"じゃなくて、"getElementByName"を使ってます。
 
あと、ログインIDとパスワードの入力については、
IEのオートコンプリートに任せることにした。
※IDとPASSはコメントアウトしたよ。
 
ただ、実行してみたところ、こんなエラーがでてしまった。。↓
「起動されたオブジェクトはクライアントから切断されました。」
 
デバッグの参考にしたサイトはこれ↓
 

 

 

“ユーザーアカウントでユーザーアカウント(UAC)を使ってコンピュータの保護のチェックを外すと正常に動作しますので、この対応で逃げたいと思います。”

 

これはつまり、
コントロールパネル>ユーザーアカウント制御設定の変更
⇒レベル最下部まで落とすということ。
 
設定を変えたら、直った。
深いことは知らん。
 
 
 

もっと使いやすくする

IntraLogin.vbsというファイルがデスクトップにできたので、
それをダブルクリックすれば、社内ポータルサイトに自動ログインできるようになった。
 
そして、
このファイルをIEのお気に入りにドラッグ&ドロップして、
ブックマークっぽくした。
 
ただ、さっきのコードのままだと、
「vbsをクリックする度に、新規ウィンドウが開かれる」
のが気に食わん。
 
ということで、
「ウィンドウは増やさずに、新規タブで開かれる&ログインされる」
ように書き換えた。↓
InputAndClick
Sub InputAndClick
 
    'オブジェクトを格納する変数
    Dim objShell, objWindow
    'シェルのオブジェクトを作成する
    Set objShell = CreateObject("Shell.Application")
   
    'ウインドウの数だけまわすぞ
    For Each objWindow In objShell.Windows
        'HTMLDocumentだったら
        If TypeName(objWindow.document) = "HTMLDocument" Then
            'そのHTMLDocumentをこの後操作するIEオブジェクトとする
            Set ie = objWindow
        End If
    Next
    Set objShell = Nothing
'新規ウィンドウでは開かない
'Set ie = CreateObject("InternetExplorer.Application")
ie.Visible = True
'新規タブで開く
ie.Navigate2 "http://*****(URLはごめんね)*****.portal", &H800
WScript.Sleep 2000
'ie.Document.getElementByName("user")(0).Value = "**(名前もごめんね)**"
'ie.Document.getElementByName("password")(0).Value = "***(パスワードもごめんね)***"
'今操作対象のieオブジェクトは、開いたタブの一個手前にあたっている
'ので、もっかいHTMLDocumentを取り直す。
'URLとタイトルを表示させるテスト
 
    'オブジェクトを格納する変数
    Dim objShell2, objWindow2
    'シェルのオブジェクトを作成する
    Set objShell2 = CreateObject("Shell.Application")
   
    'ウインドウの数だけまわすぞ
    For Each objWindow2 In objShell2.Windows
        'HTMLDocumentだったら
        If TypeName(objWindow2.document) = "HTMLDocument" Then
            'そのHTMLDocumentをこの後操作するIEオブジェクトとする
            Set ie = objWindow2
        End If
    Next
    Set objShell = Nothing
ie.Document.getElementsByName("form")(0).submit
End Sub
 
以上

JavaScriptでURLのパラメータによって変化するサイトを作る方法

参考にしたサイトはこれ

 
URLの引数を参考にして、サイトの表示を変えたい。
の2通りがあるが、前者を採用。
 
参考にしたサイトのコードをコピペして、
テキトーに「test.html」とかつけてみたけど動かなかった。
⇒どうやらjQuery言語が混ざっていた模様。
 $マークのところね。
 
// URLのパラメータを取得
var urlParam = location.search.substring(1);
 
// URLにパラメータが存在する場合
if(urlParam) {
  // 「&」が含まれている場合は「&」で分割
  var param = urlParam.split('&');
 
  // パラメータを格納する用の配列を用意
  var paramArray = ;
 
  // 用意した配列にパラメータを格納
  for (i = 0; i < param.length; i++) {
    var paramItem = param[i].split('=');
    paramArray[paramItem[0]] = paramItem[1];
  }
 
  // パラメータidがosakaかどうかを判断する
  if (paramArray.id == 'osaka') {
    $('.pram').append('<p>大阪です</p>');
  } else {
    $('.pram').append('<p>大阪ではありません</p>');
  }
}
 
このコードだと、jQueryが混ざっちゃってるんで、javaScriptのみで、サンプルを作り直してみた。↓
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<html lang="ja">
    <head>
        <title>サンプル</title>
    </head>
    <body id="body">
        Hello, World!<br><br>
        <a href="?id=tokyo">URL末尾が"?id=tokyo"の場合</a><br>
        <a href="?id=osaka">URL末尾が"?id=osaka"の場合</a><br>
        <a href="?id=nagoya">URL末尾が"?id=nagoya"の場合</a><br>
        <a href="?id=nagoya&pass=tokyo">URL末尾が"?id=nagoya&pass=tokyo"の場合</a><br>
        <a href="?id=nagoya&pass=tokyo&option=train">URL末尾が"?id=nagoya&pass=tokyo&option=train"の場合</a><br><br>
    </body>
<script>
// 現在アクセスしているURLを取得します。
document.writeln("------------------------------------------------------<br>");
var url = location.href;
document.writeln("「location.href」メソッドで取得できる値");
document.writeln("<br>");
document.writeln(url);
document.writeln("<br><br>");
//alert(url+"\nにアクセスします");
 
// 現在アクセスしている"?"以降を取得します。
var a = location.search;
document.writeln("------------------------------------------------------<br>");
document.writeln("「location.search」メソッドで取得できる値");
document.writeln("<br>");
document.writeln(a);
document.writeln("<br><br>");
 
var urlParam = location.search.substring(1);
document.writeln("------------------------------------------------------<br>");
document.writeln("「location.search.substring(1)」メソッドで取得できる値");
document.writeln("<br>");
document.writeln(urlParam);
document.writeln("<br><br>");
 
// URLのパラメータを取得
var urlParam = location.search.substring(1);
 
// URLにパラメータが存在する場合
if(urlParam) {
  // 「&」が含まれている場合は「&」で分割
  var param = urlParam.split('&');
 
  // パラメータを格納する用の配列を用意
  var paramArray = ;
 
 document.writeln("------------------------------------------------------<br>");
 document.writeln("引数を分割した結果");
 
  // 用意した配列にパラメータを格納
  for (i = 0; i < param.length; i++) {
    var paramItem = param[i].split('=');
    paramArray[paramItem[0]] = paramItem[1];
    document.writeln("<br>");
    document.writeln(paramItem[0]);
    document.writeln("   =>   ");
    document.writeln(paramItem[1]);
  }
 
  document.writeln("<br><br>");
 
  // パラメータidがosakaかどうかを判断する
  if (paramArray.id == 'osaka') {
    //$('body').append('<p>大阪です</p>');
    var answer = "大阪です";
  } else {
    //$('body').append('<p>大阪ではありません</p>');
    var answer = "大阪じゃないです";
  }
 
 document.writeln("------------------------------------------------------<br>");
 document.writeln("idが'osaka'かどうかの判定<br>");
    document.writeln("idは");
    document.writeln(answer);
    document.writeln("<br><br>");
 
 document.writeln("------------------------------------------------------<br>");
    document.writeln("たとえばこんな感じで、idごとに、裏のロジックで使用するディレクトリ名も変えられる。↓<br>");
    var directory = "/bbs/";
    directory += paramArray.id;
    directory += "/logs"
    document.writeln(directory);
}
</script>
</html>

 

このコードなら、「test.html」とかテキトーに名前をつけて、
デスクトップにでも置いてもらって大丈夫。
 
ダブルクリックして開いてみて、いろいろ挙動を見てほしい。
?マーク以降にいろいろ値をセットしてみると、表示が変わる。
 

firebaseでリアルタイム掲示板をたった2時間でWeb公開する方法

参考にしたサイトはこれ。
  

 
このサイトの通りに、掲示板を作成してみる。
 
 
Firebaseにログインする。
 
 
プロジェクトを追加
⇒「chatroom」という名前にしてみた
 
 
アクセス権の変更
プロジェクトを開いて、「Database」の「ルール」タブを表示
認証をやらないので、アクセス権を下記のようにする。
{
  "rules": {
    ".read": "true",
    ".write": "true"
  }
}

 

  

Node.jsをインストールしておく
省略。これやらないと、後続のnpmコマンドが打てない。
 
 
firebaseコマンドを打てるようにする
npm install -g firebase-tools
 
 
firebaseにログインする
firebase login
⇒「Y」で進む。
 
 
もろもろ初期構築する
firebase init
 
 
ローカル上でサーバーを動かす
firebase serve
⇒ここでエラー発生。オーマイガー
 
 
firebase serveコマンドを実行したときに、エラーになる。
当然「http://localhost:5000/」にアクセスしてみても、何も表示されない。
どうやら、サーバー立ち上げ時に読み込まれるfirebase.jsonが空っぽで作成されてしまう模様。
⇒その前のfirebase initコマンドのときに、Hostingを選択するときの方法が悪かった。
 Hostingに⇒を合わせてEnterを押していた。
 正しくは、Hostingに⇒を合わせて、"Spaceを押してから"Enter
※英語でそうするように書いてあったのに、ちゃんと読めよおれ...
 
改めて、
firebase serveコマンドを実行したところ、
今度は「http://localhost:5000/」が正しく表示された。
 
 
index.htmlを置き換える
デフォルトのページは、なんとも質素な感じ。
firebase initを実行すると、index.htmlが./public配下に作成されている。
これを、掲示板用のhtmlに置き換える。↓
 
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>掲示板</title>
 
<!-- TODO 以下を書き換えてください★★★ -->
<script>
  alert("HTMLコードのTODOの部分を書き換えてください!");
</script>
<!-- ★★★ここまで -->
 
</head><body>
  <h1>掲示板</h1>
  <div><textarea id="txt" rows="4" cols="80"></textarea></div>
  <div><button onclick="post()">投稿</button></div>
  <div><hr></div>
  <div><ul id="logs"></ul></div>
  <script>
  // Firebaseのデータベースを取得
  var db = firebase.database();
  var bbs_db = db.ref("/bbs/logs");
  // ログが追加されたときの処理を記述
  function addLog(data) {
    var val = data.val();
    var e = document.getElementById("logs");
    var li = document.createElement("li");
    li.innerHTML = val.text;
    e.appendChild(li);
  }
  // 誰かがログに追加したら内容を通知するよう設定
  bbs_db.limitToLast(10).on("child_added", addLog);
  // 投稿ボタンが押されたとき
  function post() {
    var txt = document.getElementById("txt");
    bbs_db.push({ text: txt.value });
    txt.value = "";
  }
  </script>
</body></html>

 

firebaseスクリプトをindex.htmlに追記する
firebaseサイトの「Overview」内の「ウェブアプリにFirebaseを追加」をクリック
index.htmlのTODO枠にコピペする。
 
 
web公開する
参考にしたサイトはこれ。

 

いまは認証に興味ないので、参考にしたのは3ページ目の
firebase deploy
のみ。
※でも認証やってみたくなったら、めっちゃ参考になりそう。
 
 
コマンドラインに表示されたURLにアクセスする
⇒インターネット経由で、サイトを確認することができた。