deliciousユーザーだったのですがリニューアルを期にはてなブックマークも使ってみたいと思いアカウントと取るも、UIが悪すぎて結局deliciousに戻りました。deliciousは好きですが自分のサーバにスクリプト入れる方が管理しやすいので、SBMスクリプトであるSemanticScuttleをインストールしてみました。Firefox用プラグインが気になるけどOpera者なので使えない…。
使い勝手はリニューアル前のdelicious、むしろdel.icio.usに似ていると思います。メインで使うか分かりませんが、インストールの手順(というかconfig.inc.phpの設定)をメモしておきます。現時点の最新版は0.90。
zipファイルを解凍して、config.inc.php.exampleをconfig.inc.phpにリネームしてテキストエディタで開きます。表示件数やサムネイルの表示についての項目もありますが、最低これだけ設定しておけば動きます。多分。
#### System ####
$sitename = 'サイト名';
$welcomeMessage = 'サイトの説明文。';
$root = 'http://bookmark.example.com/'; # URI
$locale = 'ja_JP';
#### Database ####
$dbtype = 'mysql4';
$dbhost = 'HOST'; # 自分の環境に合わせて変更
$dbport = '3306';
$dbuser = 'USER NAME'; # 自分の環境に合わせて変更
$dbpass = 'USER PASSWORD'; # 自分の環境に合わせて変更
$dbname = 'DATABASE NAME'; # 自分の環境に合わせて変更
$tableprefix = 'sc_'; # 必ず変更すること。そうしないとエラーが出ます。sc_でなくてもいいですが、tables.sqlと合わせてください(デフォルトはsc_)。
### Users ###
$adminemail = 'admin@example.org';
$antispamQuestion = 'ユーザー登録の時の質問。';
$antispamAnswer = 'ユーザー登録の時の答え。';
解凍したフォルダを全てアップロードしたらテーブルを作成します。phpMyAdminにアクセスし、左側メニューのSQLアイコン(クエリウィンドウ)をクリックして、解凍したフォルダに入っているtables.sqlをインポートします。
自分が設定したアドレスにアクセスし、register.phpからユーザー登録すれば使えるようになります。自分だけで使う場合はregister.phpを削除しておいた方がいいです。
ブックマークやメモの整理をして快適さが増したOperaの話。2008年11月21日時点の私のOperaは上の通りです。画像が小さすぎてよく分かりませんね。表示させているツールバーはメインバー、ナビゲーションバー、ステータスバー。パネルは浮動表示です。
メニューバーは普段あまり使わないのでCustom Buttons(Opera Browser Wiki)からToggle Menu bar on/off AND dropdown the main menu (with image if using several custom skins)の表示切替ボタンをいただきました。
タブバーの下にアドレスバーがあるのはいいのですが、パネルを開閉した時にアドレス欄の幅が変わるのが気になっていたので、アドレスバーにあった部品をメインバーに全て移しました。そして役目を終えたアドレスバーは非表示に。
パネルを浮動表示にしているついでにタブバーも消してみました。浮動版パネルはタブ扱いなのがマイナス。そしてタブバーはあった方がいいかもしれません、まだ実験中。
パネルは右に表示させる派だったのですが、浮動表示もいいですね。初期設定では全画面表示になるので好みの大きさに調整するのをオススメ。デフォルトのキーボードショートカットはF7なので、これも自分が使いやすいよう変更するのが吉。左右に表示させると画面の横幅が狭くなり固定幅のページの場合横スクロールが出て、可変幅のページの場合読んでいる箇所を見失ったりしていたのですが、浮動だと必要な時だけボタン1つで表示させられるのがとてもいいです。浮動版パネルはタブ扱いなのがマイナスですが(2回目)。
ついでにコンテキストメニュー。まともに使っているのはdeliciousに投稿、Tumblrに投稿、pageinfo参照、livedoroorに登録くらい。そのうちはてなブックマーカーになる(かもしれない)ので、準備だけしています。新はてブ楽しみ!
ニコニコ動画専用Opera(暴満館)を試すためにニコニコ動画のアカウントを取ったのですが、音楽や動画に無縁なので結局何が何だか分からず、私が得たものは「エアーマンが倒せない Full(Version J)」のパロディでした。語呂はかなり悪いです。
気がついたら同じ箇所ばかり修正 そしていつも同じ場所でハマる 諦めずにズルいハックに挑戦するけどすぐに表示狂うよ 擬似要素が使えれば楽に角丸くらい作れるけど 何回やっても何回やってもIEが倒せないよ 涙を飲んでdiv病発症 (XML)宣言外して妥協しててもいずれはどこかでバグが出る Ajaxも試してみたけど根本解決できない だから次は絶対勝つために僕は幅(width)と余白(margin)に気を配っておく ~間奏20秒~ 気がついたらborderがまた消えている そしていつもそこで画像使う 諦めずに仕上げ段階まできたけどボロボロNot Valid バージョン8があれば楽にデザインできるようになるけど 何年経っても何年経っても6が倒れないよ プニル・ルナスケにコンポーネントの数々 他ブラウザ増えたけれどトライデントだと意味がない Donutも試してみたけどあいつも同類だったよ だから次は絶対勝つために僕は足のないキツネに望みを託しておく ~間奏15秒~ Operaブラウザだけになればweb制作楽になるけど 何年経っても何年経ってもマニアだらけのマイノリティ 天下のMSだからどうやっても避けれない Opera基準で(サイトを)作り続けても ROMの9割9分は気づかない WebKit勢が力をつけててそれでもユーザー極少 だけど現状に不満があっても僕は6だけはずっと残しておく (XPだから…)
自分の名誉(?)のために書いておくと、私はXML宣言外しません。汚いハックは使いません。HTMLは常にValidです。ただしCSS覚えたてのおっさんが作ったようなデザイン。
cite属性からリンクを生成するユーザーJavaScriptはEnhance blockquote display(UserJS.org)を使っていたのですが、application/xhtml+xmlなサイトでは動かないようなのでvisibleAttribute(工房らくだ舎)を使うことにしました。
メモランダム(http://mynotes.jp/blog/)の記事を整理していたら、「アンカーを文字列にし、a要素によるハイパーリンクがあれば二重にリンクを生成しない」カスタマイズ版を見つけたのでソースを転載しておきます。
(function()
{
function makeCiteVisible(elementName) {
var elements = document.getElementsByTagName(elementName);
var anchors = document.getElementsByTagName('a');
for(var i = 0,element;element = elements[i];i++) {
var cite = element.getAttribute('cite');
var title = element.getAttribute('title');
var a = document.createElement('a');
var p = document.createElement('p');
var duplicate = false;
if(element.hasAttribute('cite')){
// cite属性と同じ参照先のアンカーがないかチェック
for(var j = 0,anchor;anchor = anchors[j];j++){
if(anchor.getAttribute('href') == cite && anchor.getAttribute('class') != 'citation') {
duplicate = true;
break;
}
}
// 見つけたらループを抜ける
if(duplicate) break;
a.setAttribute('href',cite);
a.setAttribute('class','citation');
if(elementName == 'blockquote'){
if(element.hasAttribute('title')){
a.setAttribute('title',title);
a.appendChild(document.createTextNode(title));
}else{
a.appendChild(document.createTextNode(cite));
}
p.appendChild(a);
element.appendChild(p);
}else if(elementName == 'q'){
if(element.hasAttribute('title')){
a.setAttribute('title',title);
}
a.appendChild(document.createTextNode("*"));
element.appendChild(a);
}
}
}
}
//読み込み時に実行
document.addEventListener
('load',
function()
{
makeCiteVisible("blockquote");
makeCiteVisible("q");
},false
)
})();まずは拍手返信。拍手やメッセージ、ありがとうございます! 励みになります。
あと少し前になりますが印刷用デザインの不都合もご指摘をいただきました。メッセージをくださる方がいるおかげで、自分では気づかないミスを修正することができました。ありがとうございました!
本題。私がテンプレート配布サイトを作るきっかけはCDP、というのは以前も書きました。配布サイトは数多くあれど、サイト独自のテンプレートは改装するごとにHTMLを書き換えなければいけないのが面倒です。サイトによってはテンプレートごとにHTMLが違ったりしますし。なのでCDPのhtmlファイルには一切手を加えず、CSSファイルと画像を変更することでデザインをチェンジする
というところに大きな魅力を感じていたわけです。CDPに不満がないわけではありませんが、改善してほしい点はCSS着せ替えテンプレートプロジェクトver.2を考えるくらいです。
そしてオリジナルテンプレート。サイト用と小説用はそれぞれ着せ替えできるのですが、自分の作った文書構造に納得できなくなってきました。テンプレだけでなく、サイト自身の文書構造や考え方も結構変わりました。今後よくなるのならズバッと変えちゃっていいかなーと思うのですが、そうすると新テンプレと旧テンプレの互換性がなくなるので、いまいち踏ん切りがつきません。
どうせならモバイル・印刷用CSSもつけてみたいとも思っています。あと古いテンプレを消したいとは思わないのですが、修正したいです。拍手・CDP用テンプレは地味に作っているのですが、更新は少し先になりそうです。
とりあえず以前自分が作ったものに納得できなくなったのは成長した証だと、前向きに捉えておきます。サイトデザインがどんどん素っ気なく、おっさんぽくなっていっているのも成長の証。ポジティブポジティブ。
opera_exは便利だけど、9.5の時みたいに突然使えなくなる可能性があるのが怖いなー。…と思っていたら、JavaScript内部アクションとやらでも同じことができるらしいです。
アプリケーションを使わずに済むならそちらの方がいいので、Hotclick Popup Menu(テキストを選択した時のコンテキストメニュー)に以下を書き加えました。芦塚さんがまとめたものをほぼそのままコピー&ペースト。titleリンクはDocument Popup Menu(何も選択していない状態のコンテキストメニュー)に入れたくなりますが、そうすると動作しないので注意。これは何かテキストを選択した状態でないと使えません。
Item, "リンク(a)" = Go to page, "javascript:window.prompt('','<ax20href=x22'+location.href+'x22>'+document.title+'</a>');" & Delay, 100 & Copy & Cancel
Item, "リンク(ul)" = Go to page, "javascript:window.prompt('','<ul>n<li><ax20href=x22'+location.href+'x22>'+document.title+'</a><li>n</ul>n');" & Delay, 100 & Copy & Cancel
Item, "リンク(li)" = Go to page, "javascript:window.prompt('','<li><ax20href=x22'+location.href+'x22>'+document.title+'</a></li>n');" & Delay, 100 & Copy & Cancel
Item, "テキストをコピー(p)" = Go to page, "javascript:window.prompt('','<p>'+window.getSelection()+'</p>n');" & Delay, 100 & Copy & Cancel
Item, "テキストをコピー(ul)" = Go to page, "javascript:window.prompt('','<ul>n<li>'+window.getSelection()+'</li>n</ul>n');" & Delay, 100 & Copy & Cancel
item, "テキストをコピー(li)" = Go to page, "javascript:window.prompt('','<li>'+window.getSelection()+'</li>n');" & Delay, 100 & Copy & Cancel
item, "テキストをコピー(a)" = Go to page, "javascript:window.prompt('','<ax20href=x22'+location.href+'x22>'+window.getSelection()+'</a>');" & Delay, 100 & Copy & Cancel
item, "引用(q)" = Go to page, "javascript:window.prompt('','<qx20cite=x22'+location.href+'x22x20title=x22'+document.title+'x22>'+window.getSelection()+'</q>');" & Delay, 100 & Copy & Cancel
item, "引用(blockquote)" = Go to page, "javascript:window.prompt('','<blockquotex20cite=x22'+location.href+'x22x20title=x22'+document.title+'x22>n<p>'+window.getSelection()+'</p>n</blockquote>n');" & Delay, 100 & Copy & Cancel
ウィンドウが開きますが一瞬で閉じるので気になりません。
言及したり引用したりすることはあまりないのですが、備えあれば備えあれば憂いなしということで。
今は setClipboard.swf でもにょもにょしてます。 http://kawatarou.info/file/txt/document_hotclick_10467.txt
setClipboard.swfを使ったやり方を教えていただきました。ありがとうございます!
Operaユーザーですが最近Firefoxも使っているので、入れている拡張機能のリストを作ってみました。簡易すぎて参考にならない紹介つき。