LoginSignup
40
46

More than 5 years have passed since last update.

@takimai39(Takayuki Imai)

iPhone 「ショートカット」アプリで JavaScript を実行する

Posted at

はじめに

iPhone で Greasemonkey みたいに自分の作成した JavaScript のプログラムを起動できないかと方法を探していたら「ショートカット」アプリで似たような事はできそうだとわかりました。

でも、できない事（たぶん・・・）
・「ショートカット」アプリから直接 "Web ページで JavaScript を実行" のショートカットは実行できない。
　※この JavaScript を実行するタイプのショートカットは、サファリから選択して実行するんものなんですよ、きっと。
・ Greasemonkey のように、対象の URL と一致したら自動実行するような機能はない。

インストール

App Store からインストールします。
S__2719746.jpg

簡単なスクリプトを作成し実行してみる。

作成するスクリプトの内容としては、www.amazon.co.jp の検索フィールドに "alexa spot" と入力する事にします。

S__2719748.jpg = 検索より"Web" => S__2719749.jpg

Webページで JavaScript を選択
以下のように、簡単なサンプルがついてきています。

S__2719750.jpg

これを以下の内容に変更します。
amazon.co.jp での nav-search-keywords の入力フィールドに "alexa spot" と値を入れる内容です。

var result = [];
document.getElementById("nav-search-keywords").value = "alexa spot";
completion(result);

以上で、まずは簡単なショートカットができました。
しかし、これをタップして実行しても「ショートカット」アプリからは実行できません。
以下のようなエラーになります。
S__2719751.jpg

実行前の事前準備

このショートカットはサファリで読み込むものだと思います、以下のように safari からショートカットが実行できるように設定を行います。

  1. サファリより、画面下の四角に上矢印のマーク「共有メニュー」を選択します。
  2. "その他"を選択します。
  3. "ショートカット" を ON にします。
  4. すると共有メニューに、”ショートカット”のアイコンが加わります。

S__2719753.jpg ＝＞　S__2719754.jpg

  1. 「ショートカット」アプリからも作成した JavaScript (現時点では名称未設定ショートカット）を選び
  2. "共有シートに表示" を有効にしておきます。

S__2719755.jpg 右上の横向きスイッチから => S__2719756.jpg

実行してみる。

  1. サファリで http://www.amazon.co.jp を開き
  2. 四角に上矢印のマーク「共有メニュー」を選択
  3. ショートカットを選んで、作成した”名称未設定ショートカット”を選択
  4. 一番最初は、アクセス許可するかの画面がでます。許可を選択
  5. 作成しておいた JavaScript が実行され、検索文字として "alexa spot" がセットされていれば、動作 OK です。

S__2719757.jpg = 許可 =>S__2719758.jpg

ゆうちょ銀行へのログイン

ここまで期待通りに動作できたので、サンプルとしてゆうちょ銀行へログインするためのスクリプトを作成してみます。
ゆうちょ銀行へのログインは、お客様番号が３つに分かれていたり合言葉があったりと手間がかかります。
また、子供の口座残高も確認したいなど複数口座がある場合など、手間に加えて記憶力も必要になってきます。

人それぞれ設定している合言葉などが違いますので、そのままでは動作しませんがサンプルとしてご覧ください
ゆうちょ銀行へのログインのサンプル


var result = [];
// ゆうちょ銀行
if (document.URL == "https://direct.jp-bank.japanpost.jp/tp1web/U010101SCK.do")  {
  var tid1 = "1234";
  var tid2 = "2345";
  var tid3 = "34567";

  var aid1 = "1111";
  var aid2 = "2222";
  var aid3 = "33333";

  var btn1 = document.createElement( 'input' );
  btn1.addEventListener("click", login1 );
  with( btn1 ) {
    setAttribute( 'value', 'オレオレ' );
    setAttribute( 'type', 'button' );
    setAttribute( 'style', 'background-color: red; font-size:30px');
  }

  var btn2 = document.createElement( 'input' );
  btn2.addEventListener("click", login2 );
  with( btn2 ) {
    setAttribute( 'value', '子供の口座' );
    setAttribute( 'type', 'button' );
    setAttribute( 'style', 'background-color: red; font-size:30px');
  }

  // append at top of targetID
  document.getElementsByClassName("hdgL1Ba")[0].appendChild( btn1 );
  document.getElementsByClassName("hdgL1Ba")[0].appendChild( btn2 );

  function login1() {
    document.getElementsByName("okyakusamaBangou1")[0].value = tid1;
    document.getElementsByName("okyakusamaBangou2")[0].value = tid2;
    document.getElementsByName("okyakusamaBangou3")[0].value = tid3;
    document.getElementsByName("U010103")[0].click();
  }
  function login2() {
    document.getElementsByName("okyakusamaBangou1")[0].value = aid1;
    document.getElementsByName("okyakusamaBangou2")[0].value = aid2;
    document.getElementsByName("okyakusamaBangou3")[0].value = aid3;
    document.getElementsByName("U010103")[0].click();

  }
}

if ( document.URL.match( /.jp-bank.japanpost.jp\/tp1web\/pc\//) ) {

  var tpass = "オレオレパス";
  var apass = "コドモのパス";

  var btn1 = document.createElement( 'input' );
  btn1.addEventListener("click", login1 );
  with( btn1 ) {
    setAttribute( 'value', 'オレオレ' );
    setAttribute( 'type', 'button' );
    setAttribute( 'style', 'background-color: red; font-size:30px');
  }

  var btn2 = document.createElement( 'input' );
  btn2.addEventListener("click", login2 );
  with( btn2 ) {
    setAttribute( 'value', '子供の口座' );
    setAttribute( 'type', 'button' );
    setAttribute( 'style', 'background-color: red; font-size:30px');
  }

  var askStrings = document.getElementsByClassName("listTy02");
  for (var i = 0; i < askStrings.length; i++) {
    var aikotoba = askStrings[i].innerText;
  }

  if( askStrings.length > 0 ) {
    if ( aikotoba.indexOf("最も好きな都市はどこですか") > 0) {
      tpass = "すきな都市";
      apass = "スリランカ";
      // ボタンを追加
      document.getElementsByClassName("boxTy04")[0].appendChild( btn1 );
      document.getElementsByClassName("boxTy04")[0].appendChild( btn2 );
    }
    else if ( aikotoba.indexOf("結婚記念日はいつですか") > 0) {
      tpass = "おぼえてない";
      apass = "みらい";
      document.getElementsByClassName("boxTy04")[0].appendChild( btn1 );
      document.getElementsByClassName("boxTy04")[0].appendChild( btn2 );
     }
     else if ( aikotoba.indexOf("最も印象に残っている旅行先はどこですか") > 0) {
       tpass = "サムイ";
       apass = "バリ";
       document.getElementsByClassName("boxTy04")[0].appendChild( btn1 );
       document.getElementsByClassName("boxTy04")[0].appendChild( btn2 );
     }
     else if ( aikotoba.indexOf("母親の旧姓は何ですか") > 0) {
       tpass = "ママゴン";
       apass = "ママゴン";
       document.getElementsByClassName("boxTy04")[0].appendChild( btn1 );
       document.getElementsByClassName("boxTy04")[0].appendChild( btn2 );
     }
     else if ( aikotoba.indexOf("最も好きなデザート（スイーツ）は何ですか") > 0) {
       tpass = "プリン";
       apass = "コーヒーゼリー";
       document.getElementsByClassName("boxTy04")[0].appendChild( btn1 );
       document.getElementsByClassName("boxTy04")[0].appendChild( btn2 );
     }
     else if ( aikotoba.indexOf("最も好きな果物は何ですか") > 0) {
       tpass = "ドラゴン";
       apass = "ジャック";
       document.getElementsByClassName("boxTy04")[0].appendChild( btn1 );
       document.getElementsByClassName("boxTy04")[0].appendChild( btn2 );
     }
  }
  else {
    tpass = "オレのログイン";
    apass = "ボクのログイン";
    document.getElementsByClassName("req")[0].appendChild( btn1 );
    document.getElementsByClassName("req")[0].appendChild( btn2 );
  }

  function login1() {
    if (document.getElementsByName("aikotoba").length > 0 ) {
      document.getElementsByName("aikotoba")[0].value = tpass;
      var list = document.getElementsByTagName('a');
      for ( var x = 0; x < list.length ; x++ ) {
        if ( list[x].innerHTML == "次へ" ) {
          list[x].click();
        }
      }
    }
    else {
      document.getElementsByName("loginPassword")[0].value = tpass;
      document.getElementsByName("U010302")[0].click(); // ログインボタンを押す
    }
  }
  function login2() {
    if (document.getElementsByName("aikotoba").length > 0 ) {
      document.getElementsByName("aikotoba")[0].value = apass;
      var list = document.getElementsByTagName('a');
      for ( var x = 0; x < list.length ; x++ ) {
        if ( list[x].innerHTML == "次へ" ) {　　// 次へボタンがあれば押す
          list[x].click();
        }
      }
    }
    else {
      document.getElementsByName("loginPassword")[0].value = apass;
      document.getElementsByName("U010302")[0].click(); // ログインボタンを押す
    }
  }
}

completion(result);

実行してみる

ゆうちょ銀行のログイン画面を表示させておき -> 「共有メニュー」-> 「ショートカット」-> ゆうちょのショートカットを選択

S__102203395.jpg➡︎S__102203396.jpg ➡︎S__102203397.jpg

上記の最後の画像のように、JavaScript が実行された結果 "オレオレ" と "子供の口座" ボタンが追加されています。
これをクリックすると、お客様番号が入力され次の画面へ進みます。
次のページに進むたびにショートカットを呼び出す必要がありますが、以下のように合言葉や最後のパスワード画面へもボタンが追加され、それをクリックするだけでログインが完了します。
※通常は一度ログインすると合言葉は聞かれなくなります。

S__102203400.jpg➡︎S__102203402.jpg

通勤電車の中でも操作できるレベルになっていると思います。
なお、わたしは iPhone でデバッグはしたくないので Mac + Greasemonkey で動作したものをコピペで利用しています。
またログイン関連の動作においては、通常複数回まちがえるとロックされますので、作成とテスト時にはその点に注意が必要です。

以上、なにかのお役に立てましたら幸いです。

40
46
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
40
46