MyFindだけでもっと多くの検索履歴を表示する

MFHistoryViewerをMyFindだけで実現したかったのですが。
https://itunes.apple.com/jp/app/myfind-da-ci-lin-u-izudamu/id764965889?mt=8&uo=4&at=11lqq9
以下のアイテムをMyFindに登録します。
「History」をインポート
アイコン一覧で登録したアイテムをタップすると、内蔵ブラウザでビュアー画面が開きます。ビュアー画面での動作は

  • 検索語をタップ:MyFindにセット
  • 検索アイテム名をタップ:再検索

です。

注意点

開くたびにスクロール位置が一番上まで戻ったり、ページ遷移後に戻るボタンを押してもビュアーが表示されなかったりするので、用途としては直近の検索履歴の再利用に限られそうです。もっと過去の検索履歴を振り返りたい場合はMFHistoryViewerの方が良いかと思います。

開発メモ

作り方はMyScriptsの#HTMLで作った後、HTML部分はhtml:を付けてURL欄に、スクリプト部分はOnload JavaScriptにそのまま貼り付けました。
OPTION変数はURL欄のjavascript:やOnload JavaScriptからは取得できますが、dataスキームHTMLのスクリプトタグやオンラインWebページからは使えないようです(セキュリティのためだと思われます)。
オフラインjQueryが使えないためアニメーションを使った折りたたみ表示は避けました。

元のMyScriptsファイルはこちらです。
「MyFind History」をインポート

#HTML
<meta name="viewport" content="width=device-width">
<style>
.date{
  padding: 10px 10px 0px;
}
.query{
  background-color: #eee;
  word-break: break-all;
  color: #000;
}
.wrapper{
  background-color: #eee;
  padding: 0px 15px;
}
.title{
  font-size: 80%;
  padding: 0px 10px;
  color: #777;
}
a{
  text-decoration: none;
}
</style>

<div id="result"></div>

<script>
var $result = document.getElementById('result');

var history = JSON.parse(OPTION).history;
var dateArr = {};
for(var i = 0; i < history.length; i++){
  var date = history[i].date.split(" ")[0];
  var query = history[i].query;
  var title = history[i].item.title;
  var id = history[i].item.id;
  
  if(!dateArr[date]){
    dateArr[date] = true;
    var div = document.createElement('div');
    div.innerHTML = date;
    div.className = 'date';
    $result.appendChild(div);
  };
  
  var $wrapper = document.createElement('div');
  $wrapper.className = 'wrapper';
  $result.appendChild($wrapper);
  
  var $query = document.createElement('a');
  $query.href = 'myfind://?query='+encodeURIComponent(query);
  $query.innerHTML = query;
  $query.className = 'query';
  $wrapper.appendChild($query);
  
  var $title = document.createElement('a');
  $title.href = 'myfind://launch?itemid='+id+'&query='+encodeURIComponent(query);
  $title.innerHTML = '[' + title + ']';
  $title.className = 'title';
  $wrapper.appendChild($title);
};
</script>