Developer's Blog

Sleipnir for Mac にもスピードダイアル

こんにちはこんにちは! エンジニア川端です。

すっかり肌寒くなった今日この頃、みなさまいかがお過ごしでしょうか?
Sleipnir for Mac β版リリースから 1 ヶ月半、私の向かいの席では、開発部隊が活発に意見交換しながら、日々開発が進んでいるようです。

私も毎日利用しながら、気づいた点を伝えたりしていますが、不具合報告だけでは盛り上がりに欠けますので、Sleipnir for Mac 用の「似非スピードダイアル」を作ってみました。

Pseudo Dial

Sleipnir for Mac のアップデートで動かなくなる可能性があります。ご了承ください。

「似非スピードダイヤル」とは

新規タブを開いた時に、よく使う URL を登録しておいてブックマーク的に使うアレです。
私は、一日に何度も閉じたり開いたりするサイトはスピードダイヤルに登録し、それ以外は普通のブックマークに登録して使っています。

使い方

  1. 下記ファイルをダウンロードして、どこかに保存(同じ内容を末尾に掲載しておきますので、それのコピー & ペーストでも OK です)
    https://blog.fenrir-inc.com/wp/wp-content/uploads/2011/10/pseudo-dial.html
  2. Sleipnir for Mac の「環境設定」の「一般」で、ホームページに URL を入力する
    デスクトップに 保存した場合は
    /Users/(ユーザ名)/Desktop/pseudo-dial.html

    のように入力してください

  3. 新規タブを開くと、こんな画面です
    全体像
  4. title 、url の部分をクリックすると、編集できます。残念ながらラクチン登録はできません。コピー & ペーストしてください。枠外をクリックすると編集完了です
    クリックして編集
  5. 枠内をダブルクリックでそのページを開きます

ひとまず使えるものはできましたが、

  • ダブルクリックとシングルクリックの挙動が、感覚的に逆
  • 長い URL は短く表示
  • 見た目をかっこよく
  • ちゃんとエラー処理する

などなど、要改善点はいくらでもでてきます。作り直した方がいらっしゃったらお知らせください ><

Sleipnir for Mac のぺージや、Facebook でも色々なメッセージをお待ちしております!


<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>Pseudo Dial</title>
    <style>
      div#dialArea {
        width: 678px;
        margin-left: auto;
        margin-right: auto;
        padding: 0;
        text-align: center;
      }
      div.container {
        width: 180px;
        height: 100px;
        float: left;
        text-align: center;
        margin: 10px;
        padding: 10px;
        border: 3px solid #999;
        border-radius: 9px;
        box-shadow: 6px 6px 9px rgba(0,0,0,0.2);
      }
      footer {
        clear: both;
        text-align: center;
      }
    </style>
    <script>
      window.onload = function() {
        var dialMax = 9;
        var cookieName = 'pseudo-dial';

        function $(id) {
          return document.getElementById(id);
        }

        for ( var i = 0; i < dialMax; i++ ) {
          var c = document.createElement('div');
          c.setAttribute('class', 'container');
          c.setAttribute('id', 'container0'+i);

          var t = _cElmnt('title0' + i);
          var u = _cElmnt('url0' + i);
          c.appendChild(t);
          c.appendChild(u);
          $('dialArea').appendChild(c);
        }
        reloadDial();

        function _cElmnt(id) {
          var d = document.createElement('p');
          d.setAttribute('id',id);
          d.setAttribute('contenteditable', true);
          d.onblur = function(){storeDial();};
          return d;
        }

        function storeDial(){
          var j = new Array();
          for ( var i = 0; i < dialMax; i++ ) {
            var titleTag = 'title0' + i;
            var urlTag = 'url0' + i;
            var title = $(titleTag).innerText;
            var url = $(urlTag).innerText;
            j.push({'title':title, 'url':url});
          }
          document.cookie = cookieName + '=' + escape(JSON.stringify(j)) + '; expires=Tue, 31-Dec-2030 23:59:59;';
          reloadDial();
        };

        function reloadDial() {
          var j = new Array();
          if ( document.cookie ) {
            var c = document.cookie;
            if (c.indexOf(';') > 0 )
              c = c.substr(cookieName.length + 1, c.indexOf(';') - (cookieName.length + 1) );
            else
              c = c.substr(cookieName.length + 1);
            j = JSON.parse( unescape(c) );
          }
          for ( var i = 0; i < dialMax; i++ ) {
            var titleTag = 'title0' + i;
            var urlTag = 'url0' + i;
            var title = j&#91;i&#93; ? j&#91;i&#93;.title : titleTag;
            var url = j&#91;i&#93; ? j&#91;i&#93;.url : urlTag;
            $(titleTag).innerText = title;
            $(urlTag).innerText = url;
            if ( url.match(/^https?:\/\//) ) {
                $('container0'+i).setAttribute('ondblclick','window.location.href="'+url+'"');
                $(titleTag).style.fontWeight = 'bold';
                $('container0'+i).style.borderColor = '#666';
            }
            else {
                $('container0'+i).setAttribute('ondblclick',null);
                $(titleTag).style.fontWeight = 'normal';
                $('container0'+i).style.borderColor = '#999';
            }
          }
        };
      };
    </script>
  </head>
  <body>
    <div id="dialArea">
    </div>
    <footer>
      タイトル、URL をクリックで編集。枠内をダブルクリックで移動
    </footer>
  </body>
</html>

Copyright © 2019 Fenrir Inc. All rights reserved.