prototype.js

「→」を欧文htmlで表記できるって気付かなかったよ。

prototypeのサイトを見ていて気付きました。備忘録です。

……。あれ?

ウホッ!!いい男。ではなくて……。

↑これ。

……。「→」って欧文フォントで普通に表記できたんですね……。ソースをみると、はぁ、「→」ですか……。英語サイトで使用されているのは初めて見た気がします。「→」でググると、ふむふむ……。改めて、勉強不足でした。

また、こちらを見ると、特定のフォントだけに用意されたキャラクターでないこともわかりました。う〜ん、勉強不足だなぁ。

Firefox 3.0

Firefox3のリリースにより、font-familyの指定方法は変わりました。OSXだけの話ですが。

Macintosh版のFirefoxですが、3.0になり、2.0以前とくらべて、font-familyの解釈が大幅に変わりました。

備忘録として、書き留めておきます。

font-familyの指定は、Macintosh用ファミリーネーム(英語)を使用します。

例えば、ヒラギノ角ゴシックProであれば、「Hiragino Kaku Gothic Pro」がMacintosh用ファミリーネーム(英語)です。

この指定のみで、Firefox 3.0とSafari 3.1.1に対応します。

さらに、Firefox 2.0やOpera 9.5も対象ブラウザとしたいのであれば、もう一つ、フルフォントネーム(日本語)も併用します。

例えば、ヒラギノ角ゴシックProであれば、「ヒラギノ角ゴ Pro W3」がフルフォントネーム(日本語)です。

それ以外の記述は、無駄に重複するか単に機能しないかのどちらかなので、必要ありません。

「ヒラギノ角ゴ Pro」不要、「HiraKakuPro-W3」不要、「Hiragino Kaku Gothic Pro W3」不要です。

「ファミリーネーム」、「フルフォントネーム」って何だ、という方は、以前のエントリー、「フォント名はいくつある?」をご覧ください。

ウィンドウのキャプチャーのドロップシャドウをなくす。

screencaptureの環境設定を変更すると、ウィンドウキャプチャーの際にドロップシャドウを消すことができます。でもTigerの時のようにきれいではありません。Property List Editorで設定できます。

またまた備忘録です。OSX Leopardになってから、ウィンドウのキャプチャー(⌘+shift+4、スペースバー)に盛大にドロップシャドウがつくようになってしまいました。

こんな感じです。

これはこれでもいいのですが、Tiger時代よりもシャドウが大きくなったこともあり、説明用のキャプチャーとして使うにはちょっと余白が多すぎるようです。

Macの手書き説明書に、スクリーンショットの影をなくす方法

というのがあったので、参考にしつつ、試してみました。

ターミナルにて、

defaults write com.apple.screencapture "disable-shadow" -bool true

その後、いったんログアウトします。再ログイン後のウィンドウのキャプチャーは、ドロップシャドウがつかなくなります。

こんな感じ。

……。あれ、両肩の角Rの背景は、透明(アルファ)なのですが、白背景(/淡い背景)だとラウンドせずになぜか角がでてしまいますね。濃い色だとRがきちんと出るのですが……。

背景色を濃色に背景色を白に

Tigerのウィンドウはこんな風に、

白背景でもきちんと角が丸くなっています。Leopardになってドロップシャドウの描画方法が変わったのでしょうか(ウィンドウとシャドウをきちんと分離できないから、デフォルトを影付きにしたのかな)。

元に戻す(再びドロップシャドウをつける)にはターミナルにて、

defaults write com.apple.screencapture "disable-shadow" -bool false

その後、再ログインです。

余談ですが、いったん「disable-shadow」という項目を記述すると、初期設定ファイルに今までなかった項目が追加されます。

Xcode(Developer)付属のアプリケーション(ユーティリティ)「Property List Editor」を使って、home/Preferences/com.apple.screencapture.plistを開くと、

このように表示されます(あ、「true」じゃなくて「Yes」だ)。

ブーリアン項目「disable-shadow」が追加されているのがわかります。

一旦こちらができてしまえば、ターミナルを利用しなくともこちらで設定変更が可能です。

いずれにせよ再ログインは必要ですし、ターミナルを利用した方が手軽で確実なのですが……。まめ知識ということで。

ノートパソコンにページサイズを最適化

1024*768、1280*800の液晶を対象にしたページサイズ。最小1000*630、最適1250*630。

備忘録です。一般的なノートパソコンの画面をフルに活用できるコンテンツサイズを割り出してみました。

条件としては、

  • 最小画面サイズをXGA(1024*768)とし、タスクバーやDock、ブラウザのウィンドウ枠を考慮する。
  • MacBookなど、今どきの横長液晶ノートパソコンの画面サイズ(1280*800)に最適化する。
  • 縦スクロールが発生することを前提に考える。
  • 端数は切り下げる。

としてみました。結論としては、

  • ミニマムサイズは、横1000px/縦600px。要素はすべてこの中に納める。
  • 最適サイズは、横1250px/縦630px。余白バランスや全画面表示写真などのトリミングはこちらで調整する。

検証画面を作りました。こちらを最大表示させて横スクロールが発生せず、要素がすべて見えていれば、意図通りです。

「ノートパソコンにページサイズを最適化」検証画面

Adobe Fireworks CS4 Beta

Adobe Fireworks Betaは、全くの期待はずれでした。

Adobe Fireworks(CS4)Betaを早速インストールしてみました。
……。結論から言えば、全くの期待はずれでした。

「PhotoshopやIllustratorと同じTypeエンジン」、絶対嘘です。
もしこのままの仕様で正規版、日本語版がリリースされるのであれば、バージョンアップの意味は全くありません。


(良い点)

  • チェックボックス「Auto kern(自動カーニング)」が、日本語フォントでも機能します。

(ですが)

  • 自動カーニングと手動カーニングは併用できません
  • 自動カーニング後、1箇所にでも手動カーニングを加えると、文字ブロック全体の自動カーニングが強制的に解除されてしまいます(トラッキングが0に戻る)。
  • 「自動カーニング+手動カーニングの併せ技で仕上げ」、「自動カーニングのまま、全体的に空け気味に」とかはできません
  • 「合成フォント」機能はありません
  • 「オプティカル」「メトリクス」など、プロポーショナルの種類を選んだりはできません

……。日本語版もこのままなのでしょうか。

あんまりにもがっかりして、速攻でアンインストールしたのでキャプチャー画面も全くとっていません。
近年まれに見るでっかいがっかりです。

ちなみに、その前のがっかりといえば、……Fireworks CS3 日本語版です。

swfobjectのパラメータ設定

swfobjectのパラメータの設定を追加した。簡単だと思ってやったが意外と大変だった。

備忘録。トップページのflashの埋め込みの際に、swfobjectのパラメータ設定をしてなかったので、つけました。

<script type="text/javascript">
var flashvars = { };
var params = {
play: "true",
loop: "false",
menu: "false",
quality: "best",
scale: "noscale",
salign: "lt",
wmode: "opaque"
};
var attributes = { };
swfobject.embedSWF("index.swf", "index", "100%", "100%", "8", "expressInstall.swf", flashvars, params, attributes);
</script>

補足

flashvarsは使わなかった。オブジェクト属性(attributes)も使わなかった。

使わなかったparamは以下。

  • bgcolor:
  • base:
  • swliveconnect:
  • flashvars:
  • devicefont:
  • allowscriptaccess:
  • seamlesstabbing:
  • allowfullscreen:
  • allownetworking:

パラメータをこちらに記述できたので、actionscriptの記述もちょっと変更。それ以外にもちょこちょこ手を入れたので晒します。

トップページのactionscript

//基本設定////////////////////////////
//任意のマージンの設定
var margin = [32, 32, 32, 32];
//元々の写真のサイズを変数に収める。
var pw = photo_mc._width;
var ph = photo_mc._height;
//やりたいことをやる////////////////////////////
//ロゴを左肩に固定
logo_mc._x = margin[3];
logo_mc._y = margin[0];
//最初に一回。
this.layoutItems(blog_mc);
this.scalePhoto(photo_mc);
//リサイズされる毎に毎回。
this.onResize = function() {
scalePhoto(photo_mc);
layoutItems(blog_mc);
};
Stage.addListener(this);
//画面いっぱいに写真を表示する関数////////////////////////////
function scalePhoto(tg_mc) {
//写真が足りるよう、拡大率の大きい方を使用。
scaleW = Stage.width/pw;
scaleH = Stage.height/ph;
theScale = Math.max(scaleW, scaleH)*100;
tg_mc._xscale = tg_mc._yscale = theScale;
//写真の中央部分を優先して表示。
tg_mc._x = (Stage.width-tg_mc._width)/2;
tg_mc._y = (Stage.height-tg_mc._height)/2;
}
//アイテム配置の関数////////////////////////////
function layoutItems(tg_mc) {
//対象のアイテムを右下に配置。
tg_mc._x = Stage.width-tg_mc._width-margin[1];
tg_mc._y = Stage.height-tg_mc._height-margin[2];
}
//リンク「blog_mc」の反応////////////////////////////
blog_mc.onPress = function() {
blog_mc._y += 1;
};
blog_mc.onRelease = function() {
blog_mc._y -= 1;
this.getURL("https://blog.coluli.net/");
};
blog_mc.onReleaseOutside = function() {
blog_mc._y -= 1;
};
/*
参考資料
ActionScript逆引きクイックレファレンス(2005年末版)Q*144等
*/

シンタックスハイライト

シンタックスハイライトのjsライブラリを導入しました。

備忘録。スクリプトを色分けするためのjavascriptライブラリを導入しました。

いくつかあるようですが、googleから提供されている「google-code-prettify」をなんとなく選んでみました。

cssは添付のものをそのままつかっていますが、外枠に関する定義はコメントアウトして、カラーリングのみを利用しています。

また、font-familyの指定は、font-family: "Courier", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "Courier New", "メイリオ", "MS ゴシック", monospace;としてみました。OSXはCourier+ヒラギノ角ゴシック、VistaはCourier New+メイリオ、XPはCourier New+MS ゴシックで表示されているはずです。