こんにちはこんにちは！ エンジニア川端です。
すっかり肌寒くなった今日この頃、みなさまいかがお過ごしでしょうか？
Sleipnir for Mac β版リリースから 1 ヶ月半、私の向かいの席では、開発部隊が活発に意見交換しながら、日々開発が進んでいるようです。
私も毎日利用しながら、気づいた点を伝えたりしていますが、不具合報告だけでは盛り上がりに欠けますので、Sleipnir for Mac 用の「似非スピードダイアル」を作ってみました。
Sleipnir for Mac のアップデートで動かなくなる可能性があります。ご了承ください。
「似非スピードダイヤル」とは
新規タブを開いた時に、よく使う URL を登録しておいてブックマーク的に使うアレです。
私は、一日に何度も閉じたり開いたりするサイトはスピードダイヤルに登録し、それ以外は普通のブックマークに登録して使っています。
使い方
- 下記ファイルをダウンロードして、どこかに保存（同じ内容を末尾に掲載しておきますので、それのコピー & ペーストでも OK です）
https://blog.fenrir-inc.com/wp/wp-content/uploads/2011/10/pseudo-dial.html - Sleipnir for Mac の「環境設定」の「一般」で、ホームページに URL を入力する
デスクトップに 保存した場合は/Users/(ユーザ名)/Desktop/pseudo-dial.html
のように入力してください
- 新規タブを開くと、こんな画面です
- title 、url の部分をクリックすると、編集できます。残念ながらラクチン登録はできません。コピー & ペーストしてください。枠外をクリックすると編集完了です
- 枠内をダブルクリックでそのページを開きます
ひとまず使えるものはできましたが、
- ダブルクリックとシングルクリックの挙動が、感覚的に逆
- 長い 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[i] ? j[i].title : titleTag;
var url = j[i] ? j[i].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>
関連記事
