2008年11月の記事

Firefoxに入れているアドオンメモ

Operaユーザーですが最近Firefoxも使っているので、入れている拡張機能のリストを作ってみました。簡易すぎて参考にならない紹介つき。

google ノートブック
Google製オンラインメモサービス。あまり使ってないけどOperaで使えないサービスなので入れてみた。
Adblock
定番アドオン。広告をカットしてくれる。便利だけど重くなる。
All-in-One Sidebar
多機能サイドバー。必須。
Delicious Bookmarks
ブラウザ付属のブックマークのように操作できる。二画面分割表示がOperaっぽくてお気に入り。
Greasemonkey
ユーザースクリプトを使うために必要なアドオン。
Link Widgets
link要素によるナビゲーションを提供する。
Make Link
閲覧ページのタイトルやURIなどをクリップボードにコピーする。コピーした内容はプレーンテキストやリンクテキストなど任意の書式で貼りつけることができる。
Menu Editor
メニューの並び替えや表示の設定をすることができる。
NoScript
定番。JavaScriptや埋め込みオブジェクトなどをブロックし、ユーザーの許可なく実行できないようにする。
Quick TransLation (qtl)
範囲選択するだけで翻訳できる。使ってないけど入れた。
RefControl
リファラの送信内容を設定する。
Stylish
ユーザースタイルシートの作成・管理。
Tab Mix Plus
タブまわりを強化。
TwitterFox
FirefoxからTwitterを閲覧・投稿できる。
テキストリンク
リンクされてないURI文字列をダブルクリックするだけで読み込めるようにする。
分類
ソフトウェア
URL
http://az-store.nrym.org/note/2008/11/01/43

opera_exを使わずにMake Link

opera_exは便利だけど、9.5の時みたいに突然使えなくなる可能性があるのが怖いなーと思っていたら、JavaScript内部アクションとやらでも同じことができるらしいです。

アプリケーションを使わずに済むならそちらの方がいいので、Hotclick Popup Menu(テキストを選択した時のコンテキストメニュー)に以下を書き加えました。Document Popup Menu(何も選択していない状態のコンテキストメニュー)に入れたくなりますが、そうすると動作しないので注意。これは何かテキストを選択した状態でないと使えません。

Item, "リンク(a)" = Go to page, "javascript:window.prompt('','<a\x20href=\x22'+location.href+'\x22>'+document.title+'</a>');" & Delay, 100 & Copy & Cancel
Item, "リンク(ul)" = Go to page, "javascript:window.prompt('','<ul>\n<li><a\x20href=\x22'+location.href+'\x22>'+document.title+'</a><li>\n</ul>\n');" & Delay, 100 & Copy & Cancel
Item, "リンク(li)" = Go to page, "javascript:window.prompt('','<li><a\x20href=\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('','<a\x20href=\x22'+location.href+'\x22>'+window.getSelection()+'</a>');" & Delay, 100 & Copy & Cancel
item, "引用(q)" = Go to page, "javascript:window.prompt('','<q\x20cite=\x22'+location.href+'\x22\x20title=\x22'+document.title+'\x22>'+window.getSelection()+'</q>');" & Delay, 100 & Copy & Cancel
item, "引用(blockquote)" = Go to page, "javascript:window.prompt('','<blockquote\x20cite=\x22'+location.href+'\x22\x20title=\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を使ったやり方を教えていただきました。ありがとうございます!

分類
ソフトウェア
URL
http://az-store.nrym.org/note/2008/11/06/44

faviconを設置する

ファビコンとは

ファビコンとは"Favorite icon"、すなわちお気に入りアイコンのことです。webページにアクセスまたはブックマークした時、そこにファビコンが用意されていれば、お気に入りリスト、アドレスバー、タブなどに16px*16pxの正方形の画像が表示されます。

アドレスバーやサイドバーにあるファビコンをドラッグまたはコピーすると、デスクトップに32px*32pxの大きさのショートカットが表示されます。大きなアイコンを使用する設定の場合は48px*48pxで表示されますが、基本的には32px*32pxです。

お気に入りリストの中の専用アイコンは目を惹きます。また、デザインやイラストが得意な方は、ファビコンを使ってサイトの個性をアピールすることもできます。画像の加工が苦手な方も16px*16px程度の大きさなら手を出しやすいと思うので、自分のサイトオリジナルのファビコンを作ってみてください。どうしても苦手だという方は素材系検索サイトでファビコン配布サイトを当たってみるとよいでしょう。このサイトのテンプレートにはバナーやファビコンつきのものもありますので、気に入ったものがあればお使いください。バナーはgifですが、ファビコンの拡張子は.icoなので、すぐにお使いいただけます。

しかし、全てのブラウザがファビコンに対応しているのではなく、表示も不安定だということを予め理解しておいてください。

作成する

アイコンを作る

まず最初に、ファビコンの拡張子は基本的に「.ico」です。gif、jpg、pngに対応したブラウザもありますが、主流ではないのできちんと表示させたい場合はicoを使いましょう。ファビコン自体がOS・ブラウザで対応に差があるので確実とは言い切れませんが、icoの方が表示される可能性は高いです。

ですが最終的にicoにすればいいので、気にせず画像編集ソフトで16px*16pxのアイコンを作ります。あまり使われることはないかもしれませんが、32px*32pxもあれば尚いいです。

アイコンは透過して使うことができます。また、対応しているブラウザは少ないですが、アニメーションも一応可能です。ですが静止して表示されたり、最悪ファビコンそのものが表示されなくなったりするので避けた方が無難です。

作成後はbmp、pngなど任意の形式で保存します。

アイコンの拡張子を.icoにする

出来上がったら、拡張子を.icoに変換できるソフト(@icon変換DotWork 2.50など)を使用します。@icon変換を使用する時、16px*16pxのみを作成した場合はアイコンをドラッグしたまま「ファイル→単独iconとして保存」、32px*32pxと16px*16pxがある場合は二つのアイコンをドラッグして「ファイル→マルチiconとして保存」を選んでください。これでファビコンの完成です。

FavIcon from PicsFavicon Japanなどアップロードした画像をファビコンにしてくれるツールもあります。

単独アイコンとマルチアイコンについて

単独アイコンは、16px*16pxのみ、32px*32pxのみなど一つのファイルに一つのアイコンを保存する形式です。

マルチアイコンは一つのファイルに複数のアイコン(この場合16px*16pxと32px*32pxの二つ)を保存する形式です。複数サイズ作ってマルチアイコンにしておけば、場面に合ったサイズを表示することができます。ファビコンはどのブラウザでも16px*16pxの大きさで表示されますが、Windows&IEにおいてデスクトップにショートカットを作ったり、お気に入りのプロパティ画面を開いた場合は32px*32pxのサイズで表示されます。

上の画像で「単独.ico」の画質が荒いのは16px*16pxのファビコンを拡大表示しているからです。32px*32pxが存在しない場合は16px*16pxのファビコンが代用されます。拡大・縮小するとやはり質が落ちるので、気になる方は二種類以上作ってマルチアイコンとして保存するのがいいと思います。

設置する

ファビコンを表示させたいページのhead内に以下のlink要素を挿入します。ファビコンまでのパスやファイル名は必要に応じて変更してください。

<link rel="shortcut icon" href="【ファビコンまでのパス】favicon.ico">

そしてファビコンとlink要素を書き込んだページをサーバにアップします。

先述の通りブラウザによってファビコンの対応はまちまちで、ページにアクセスしただけで表示されるものから、一切表示してくれないものまで様々です。なので設置しても必ず表示されるわけではありません。

ファビコンの表示方法
  1. ファビコン本体とlink要素を挿入したページをサーバにアップする。
  2. そのページにアクセスし、お気に入りに登録する。
  3. ブラウザのウィンドウを全て閉じる。
  4. 再びブラウザを起動させる。
  5. 登録したお気に入りからサイトにアクセスする。

ファビコンを設置する前にページをお気に入りに入れている場合は一度それを削除して試してみてください。突然消えたり、表れたりとファビコンは不安定なので、気長に待ちましょう。因に現在ファビコンに最も対応しているブラウザはFirefoxです。

簡潔に書いたので、アイコンを作る時の色の選び方やマルチアイコンを作る時の注意点などの説明はしていません。下のサイトを参考にしてください。

参考

初出:2007年5月24日

分類
ソフトウェア
URL
http://az-store.nrym.org/note/2008/11/14/45

cite属性からリンクを生成するユーザーJavaScript(Opera用・改)

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
        )
})();
分類
ソフトウェア
URL
http://az-store.nrym.org/note/2008/11/16/46

IEが倒せない

ニコニコ動画専用Opera(暴満館)を試すためにニコニコ動画のアカウントを取ったのですが、音楽や動画に無縁なので結局何が何だか分からず、私が得たものは「エアーマンが倒せない Full(Version J)」のパロディでした。語呂はかなり悪いです。

「IE6が倒れない」(2009年6月20日修正版)

気がついたら同じ箇所ばかり修正
そしていつも同じ場所でハマる
諦めずにズルいhackに挑戦するけど
すぐに表示狂うよ

擬似要素さえあれば楽に角丸は作れるけど
何年経っても何年経ってもIE6が倒れないよ
あのdiv何回やっても外せない
(XML)宣言つけずに妥協しててもいずれはどこかでバグが出る
Ajaxも試してみたけど根本解決できない
だから次は絶対勝つために僕は幅(width)と余白(margin)には気を配っておく

~間奏20秒~

気がついたらborderがまた消えている
そしていつもそこで画像使う
諦めずに仕上げ段階まで辿り着くけれど
ボロボロNot Valid

バージョン8以降であれば楽にデザインできるけれど
何年経っても何年経ってもIE6が倒れないよ
プニル・ルナスケにコンポーネントの数々
ブラウザの数は増えたけれどTridentじゃ意味がない
Donutも試してみたけどあいつも同類だったよ
だから次は絶対勝つために僕は足なしキツネに望みを託しておく

~間奏15秒~

Operaブラウザだけになればweb制作楽になるけど
何年経っても何年経ってもマニアだけのマイノリティ
天下のMSだからどうやっても避けれない
Opera基準で(サイトを)作り続けても
ROMの9割9分は気づかない
WebKitが勢力伸ばすもそれでもユーザー極少
だけど今に不満があっても僕はバージョン6だけはずっと残しておく

XPだから…
気がついたら同じ箇所ばかり修正
そしていつも同じ場所でハマる
諦めずにズルいハックに挑戦するけどすぐに表示狂うよ

擬似要素が使えれば楽に角丸くらい作れるけど
何回やっても何回やってもIEが倒せないよ
涙を飲んでdiv病発症
(XML)宣言外して妥協しててもいずれはどこかでバグが出る
Ajaxも試してみたけど根本解決できない
だから次は絶対勝つために僕は幅(width)と余白(margin)に気を配っておく

~間奏20秒~

気がついたらborderがまた消えている
そしていつもそこで画像使う
諦めずに仕上げ段階まできたけどボロボロNot Valid

バージョン8があれば楽にデザインできるようになるけど
何年経っても何年経っても6が倒れないよ
プニル・ルナスケにコンポーネントの数々
他ブラウザ増えたけれどトライデントだと意味がない
Donutも試してみたけどあいつも同類だったよ
だから次は絶対勝つために僕は足のないキツネに望みを託しておく

~間奏15秒~

Operaブラウザだけになればweb制作楽になるけど
何年経っても何年経ってもマニアだらけのマイノリティ
天下のMSだからどうやっても避けれない
Opera基準で(サイトを)作り続けても
ROMの9割9分は気づかない
WebKit勢が力をつけててそれでもユーザー極少
だけど現状に不満があっても僕は6だけはずっと残しておく

(XPだから…)
分類
ソフトウェア
URL
http://az-store.nrym.org/note/2008/11/19/47

ブラウザの最小文字サイズの設定

読めないページの対応

小さな文字はwebで流行っていますが、それが苦手だという人が一定数存在します。webは紙に比べて「読む」ことに不利な媒体なので特にそうです。

ページごと自分好みに表示させたい場合はユーザースタイルシートを使えばいいのですが、「管理人が作ったデザインのまま見たいけど、字が小さくて読みにくい」という時の操作法を紹介しています。

一時的に変更

WindowsのInternet Explorer、Firefox、Opera、SafariではCtrl+マウスホイールの回転でフォントサイズを調節できます。上にホイールすれば縮小、下にホイールすれば拡大されます。

しかしIEではpx、ptで指定された文字の大きさを変えることができません。IE7ではページごと拡大してしまうので(ズーム機能)、CSSデザインサイトはレイアウトが崩壊する可能性があります。また、Operaではページごと拡大・縮小され、画像が荒くなります。

Windows+Internet Explorer (6.0)

ツール→インターネットオプション→[全般]ユーザー補助→Webページで指定されたフォントサイズを使用しないを選択します。そうすると自分のブラウザのフォントサイズの設定で表示されるようになります。例えば「表示→文字サイズ→中」にしていればどのページも16pxで表示されます。「文字は小さめが好きだけど豆字は苦手」という方はブラウザの文字サイズを小~最小にしておきましょう。12〜13px相当の大きさで表示されます。以下はオプション三項目の説明です。

Webページで指定された色を使用しない
ページが白背景+黒文字+リンク色のみで表示されるようになります。リンク色は「ツール→インターネットオプション→[全般]ユーザー補助→色」で指定できます。
Webページで指定されたフォント スタイルを使用しない
ページが自分のブラウザの設定の書体で表示されます。草書体・筆記体など、長文を読むのに適さないページで使用すると便利です。「ツール→インターネットオプション→[全般]ユーザー補助→フォント」で書体を変更できます。デフォルトはMS Pゴシックです。
Webページで指定されたフォント サイズを使用しない
ページが自分のブラウザの設定のフォントサイズで表示されます。設定した後、表示→文字サイズで自分に合ったフォントの大きさを選んでおきましょう。なお、この設定を選ぶとサイトのレイアウトが崩れる場合があります。

Windows+Firefox (2.0.0.14)

ツール→オプション→コンテンツ→詳細設定→最小フォントサイズを選択します。ページ制作者がどんな小さなフォントサイズを指定していても、強制的にこちら側で指定した「最小フォントサイズ」で表示します。海外サイトも見ている方は、「対象言語」日本語以外の最小フォントサイズも指定しておきましょう。

Windows+Opera (9.27)

ツール→設定→詳細設定→フォント→最小フォントサイズ(ピクセル)で指定します。Firefoxと同じです。

Windows+Safari (3.11)

編集→設定→標準フォントでフォントサイズを選択します。

また、表示→ツールバーをカスタマイズ→テキストサイズでフォントサイズ変更ボタンをツールバーに出すことができます。ツールバーに出したボタンをクリックすれば縮小・拡大ができるようになります。

初出:2007年6月6日

分類
ソフトウェア
URL
http://az-store.nrym.org/note/2008/11/21/48

サーバインストール型SBM「SemanticScuttle」導入メモ

deliciousユーザーだったのですがリニューアルを期にはてなブックマークも使ってみたいと思いアカウントと取るも、UIが悪すぎて結局deliciousに戻りました。deliciousは好きですが自分のサーバにスクリプト入れる方が管理しやすいので、SBMスクリプトであるSemanticScuttleをインストールしてみました。Firefox用プラグインが気になるけどOpera者なので使えない…。

使い勝手はリニューアル前のdelicious、むしろdel.icio.usに似ていると思います。メインで使うか分かりませんが、インストールの手順(というかconfig.inc.phpの設定)をメモしておきます。現時点の最新版は0.90。

zipファイルを解凍して、config.inc.php.exampleconfig.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を削除しておいた方がいいです。

分類
ソフトウェア
URL
http://az-store.nrym.org/note/2008/11/26/49
分類
月別ログ
2010年8月2010年6月2010年5月2010年3月2010年2月2009年12月2009年11月2009年10月2009年9月2009年8月2009年7月2009年5月2009年3月2009年2月2009年1月2008年12月2008年11月2008年10月2008年9月2008年8月2008年7月2008年6月2008年5月2008年4月

案内

広告

広告

このページについてつぶやく コメント一覧