[暴満館] 2008年4月のエントリ

ゲイツもそれを分かってて移植を制限することでタイトル飽和を避けようとしていると思うけど、それ以前にオリジナルでも満足のいく品質のものが少ないのが問題なので、まずはゲームの質をチェックするようにしてくれ。そんなだからドリラーオンラインのようなゲームが当たり前のようにリリースされてしまう。そして信用を一気に失ってしまうんだ。

「Wiiで2本作ってます！　タイトルの内容については……すみません、カンベンしてください（苦笑）。

罪と罰だよな！？罪と罰であってくれ！

Info

投稿日: 2008年4月20日
タグ: misc
このエントリの固定リンク: http://diary/log/1756.html
ブックマークに追加する
コメント: コメントを投稿する

2008
0420

Tagsmisc

⇧

Stylishで快適にユーザースタイルシートを書くための覚書

偏執的な書き方はともかく、Stylishを使って記述から投稿までを解説したようなサイトは見たことがないので、こちらも覚書として自分の手法を紹介する。

なお、ここから先は偏執的ではない。

Stylish専用プロファイルの作成

Firefoxに導入する拡張を絞り、広告ブロック等も行わないようにすることでwebページへの影響を最小限に抑える。これにより素のwebページを弄ることができるようになるので、ユーザースタイルシートを導入した際の他ユーザーとの差異を小さくすることができる。

別プロファイルを起動できるようにする。

複数の Firefox を同時起動するを参考に、

C:\Firefox\firefox.exe -no-remote -P "Stylish"

このような感じでショートカットを作成。初回はプロファイル編集ダイアログが表れるので新規プロファイルを作成する。間違っても通常使うプロファイルに設定してはいけない。

右クリックメニューからStylish専用プロファイルを起動する

このままでは、「ユーザースタイルシートを作成したいページのURLをコピー⇒専用プロファイル起動⇒URLをペースト⇒開く」といった手順が必要になるので、簡略化するべくJSActionsを利用して、右クリックから起動できるようにする。

JSActionsの導入については三軒隣の斜め向かい:JavaScript Actionsにて詳しく説明されているので、参考にすると良い。

無事にフォルダの設定まで完了したのなら、以下のスクリプトを「Stylish専用プロファイルで開く.js」とでも名前をつけてscript_set/globalに保存する。

// 現在のページまたはリンク先をStylish専用プロファイルで開く
jsa_execStylishProfile( );
function jsa_execStylishProfile(){
    // Firefoxのパス
    var fxpath = "D:\\Firefox\\firefox.exe";
    // プロファイル名
    var prof = "Stylish"

    var docURL = ( _jsaCScript.context.onLink )
                ? _jsaCScript.context.link.href
                : window.location;

    _jsaCScript.exec( fxpath, ' -no-remote -P ' + prof + ' ' + docURL );
}

Firefoxを再起動後、適当なページで右クリックメニューから「Actions/Stylish専用プロファイルで開く」と選択すれば、見事に専用プロファイルが起動するようになる。

好みのテキストエディタでスタイルを書く

StylishのスタイルシートエディタはFirefox標準のtextareaなので非常に使いづらい。そこでuserChrome.jsを利用して、好みのテキストエディタで編集できるようにする。導入についてはuserChrome.js - Mozilla Firefox まとめサイトを参照してほしい。

userChrome.jsを導入したら、次にuserChrome.jsの話題8 Stylishのエディットウインドウに外部エディタ起動ボタンを追加する(改1)を参考にstylish0.5_edit.uc.jsをchromeフォルダに保存する。

うまくいけば、StylishのスタイルエディタにEditerというボタンが表れるので、これを押すことで外部エディタが起動するようになる。

webページをキャプチャする

実際に作成したユーザースタイルシートをuserstyles.orgに投稿する場合、スクリーンショットがあると導入の指針になるので、可能なら作成していく。

webページのキャプチャにはFirefoxの拡張の一つ、Screengrab!を利用する。

Screengrab!を導入すると、ステータスバーのアイコンからwebページのキャプチャが行えるようになる。saveは画像ファイルとして保存、copyはクリップボードに格納する。それぞれのサブメニューは以下のとおり。

Complete Page/Frame…: スクロール領域も含めた、ページの全てをキャプチャする
Visible Portion…: 現在表示している部分のみをキャプチャする
Selection…: 選択した部分をキャプチャする

チートシートを用意する

CSS3 セレクタチートシート

CSS3のセレクタは強力なものが多く、その幾つかはFirefox2.xでも利用可能。こちらのチートシートにはFirefoxだけでなくOperaの対応状況も載っているので、両ブラウザで使えるユーザースタイルシートを作成する際にそばに置いておくと重宝する。

その他拡張機能の導入

Firebug: 消したい要素をクリック一つで判別できるだけでなく、CSSがどのように適用されているかも知ることができる。Stylishとの相性はグンバツ。神拡張。
Web Developer: 必須というわけでは無いが、機能の一つにウインドウを指定サイズでリサイズできるというものがあるので。他で代用できるなら入れる必要はあまり無い。

その他、webページに影響を与えない拡張なら必要最小限に抑えて導入していく。

ユーザースタイルシートのバックアップ

プロファイルフォルダ内にあるstylish.rdfがStylishの本体なので、コピーするなりしておく。

userstyles.orgに投稿する際の注意

投稿したスタイルは削除できない
投稿したスタイルの名前は50byteまで
他とする重複タイトルは登録不可能
スクリーンショットは75KByte以下且つGIFかPNGのみ
スクリーンショットは横幅が300pxになるまで縮小される
Editページのobsoletion formから投稿したユーザースタイルシートを検索に引っかからなくなるようにできる

画像の一括リサイズ

キャプチャした画像は75KB以下でないとアップロードできない上、横幅が300px以上だとサーバーで汚く縮小されてしまうので、GIMPを利用して一括縮小してしまう。

一括変換プラグインで一度に複数画像を処理するを参考にプラグインを導入すれば、容易に一括リサイズが可能になる。

Info

投稿日: 2008年4月20日
タグ: css、firefox
このエントリの固定リンク: http://diary/log/1755.html
ブックマークに追加する
コメント: コメントを投稿する

2008
0420

Tagscss firefox

⇧

Stylishで偏執的なレイアウトを作成するための覚書

StylishとはFirefoxの拡張のひとつで、ユーザースタイルシートの作成と管理を助けてくれるもの。

userstyles.orgには大量のユーザースタイルシートが投稿されていて、Stylishを導入しているなら現在開いているサイトのユーザースタイルシートが無いか確認したりすることができる。

このStylishを使って去年あたりから細々とユーザースタイルシートを投稿してきたので、ここらで自分流のスタイルシートの書き方とかについていろいろまとめてみようと思った。

なお、一度でも使ったことがあるなら分かるが、かなり偏執的なレイアウトにしてしまうので、合わない人にはとことん合わないということを注意しておきたい。

どのようなサイトに向けて作成するか

基本的には訪問頻度と文章を読む上でのレイアウトの酷さ。レイアウトの酷さには以下の点が挙げられる。

無駄にデカいサイトロゴ
サイドバーが多い
サイドバーが縦に長い
画像が多い
文字が小さい
行間が狭い
文字間が狭い
リンクに下線が引かれていない
適度に改行されていない
段落と段落の間が詰まっている
数世代先の色使い

などなど。そこまでレイアウトが酷いサイトにはそうそう出会わないが、文字が小さいサイトが非常に多いので、今まで作成したユーザースタイルシートの大半は文字を大きくするついでにレイアウトも変えてしまったサイトだ。

どのようなレイアウトにするか

可読性と速さを追求したレイアウトにしたい。

まずは可読性。自分の中で理想的なのが、スタイルシートを全く適用させない状態で本文の幅を40文字前後にして中央寄せにしたもの。さらに行間と文字間を広げ、文字も大きくすることで可読性を向上させる。文字を大きくするのは単に視力が弱いから。

次に速さ。可能な限り広告の画像やコンテンツの背景画像等を極力読み込まないようにし、1カラムのシンプルなレイアウトに仕上げる。こうすることでブラウザのレンダリング負荷を下げ、無駄なファイルリクエストを減らし、1秒でも速くページの読込と表示が完了するようにする。

読みやすいレイアウトの基礎作り

body {
font-size : 112.5% !important; /* 18px */
margin : 0 auto !important; /* 中央寄せ */
padding : 0 !important;
background-color : #f0f0f0 !important;
color : #111 !important;
width : 40em !important; /* 最大幅40文字分 */
max-width : 100% !important; /* 横スクロールバーが出ないように */
border : 0 !important;
}

フォントサイズを大きくし、文章の幅を最大40文字に。背景色と前景色を読みやすい色に固定する。

* {
background-image : none !important;
float : none !important;
text-align : left !important;
letter-spacing : 1px !important;
line-height : 1.5 !important;
min-width : 0 !important;
text-indent : 0 !important;
white-space : normal !important;
}

背景画像は文章の邪魔になることが多いので消去。floatによる段組レイアウトも必要無し。文字間と行間を広げることで可読性を上昇させる。

あらゆるレイアウトを崩す

#container
, #container div {
font-size : 100% !important;
position : static !important;
background-color : transparent !important;
width : auto !important;
height : auto !important;
border : 0 !important;
margin : 0 !important;
padding : 0 !important;
}

それなりに構造がまともなサイトであれば、レイアウトはdivにclassやidを振ってCSSで調整しているのが大半なので、大元のノード及び子孫全てのdivに対してこのスタイルを適用することで、ほとんどのサイトで1カラム化が完了する。

最後に調整

#container * {
font-size : 100% !important;
position : static !important;
background-color : transparent !important;
width : auto !important;
height : auto !important;
}

グローバルセレクタだけでは優先順位の関係上適用されなかったもの（言い換えれば、サイトオーナー側でよく設定されているもの）を、今度は大本のノードの子孫全てというセレクタで再設定する。これでほとんどのサイトは陥落する。

本当はグローバルセレクタでレイアウトを一気に設定したいが、そうするとFirebugでの表示に不具合が生じるので、仕方なくこのような形になっている。

上記だけでも多くのサイトが理想のレイアウトに近くなるが、いくつか邪魔な要素が残るはずなので、classやidを指定して消していく。これらの作業は大体10分前後で完了する。

こうして完成したユーザースタイルシート群は「DestroyAllLayouts」シリーズと名付けることにした。ネーミングに関しては、デストロイオールヒューマンズというゲームタイトルの語呂が良かので拝借した記憶がある。

なんでもかんでも消せばいいと思っているのか？

最近のエントリ一覧や関連のあるエントリ一覧は残したいと思っているが、サイドバーに組み込まれていたり、残すことで他の必要ない要素も残さなければならないようなサイトは泣く泣く消している。

何が必要かは個人によって差があるが、以下についてはできるだけ残したいと思っている。

サイトロゴ兼トップページへのリンク
前後の記事へのリンク
コメント
最近のエントリ
関連のあるエントリ

崩せないサイトもある

tableレイアウトを多用していたり、そもそもHTMLが破綻しているようなサイト。数年以上前からサイトに手を加えずにそのまま運営している羅列方ニュースサイト等に多い。

このようなサイトはCSS3のセレクタをもってしても通用しない構造をしていたりするので満足にレイアウトを変更できない。隣接セレクタを利用した力技でなんとか対処しているのが現状。

mixiにいたっては心が折れた。

作成したユーザースタイルシート

下記リンクからどうぞ。OperaでもUserJavaScriptとして利用できるが、対応しているセレクタの関係上、うまく適用されないことがたまにある。

まだまだ試行錯誤の段階なので、上記テンプレートはユーザースタイルシートを作成する度に少しずつバージョンアップを重ねている。

そのため、初期に作成したものと最近のものでは仕上がりがかなり違うので、暇を見て修正している最中だ。もし、インストールしたユーザースタイルシートがおかしいと思ったら、しばらく経ってからインストールし直すと正常に動作するかもしれない。

suzusaki | userstyles.org

Info

投稿日: 2008年4月20日
タグ: css、firefox
このエントリの固定リンク: http://diary/log/1754.html
ブックマークに追加する
コメント: コメントを投稿する

2008
0420

Tagscss firefox

⇧

救急救命カドゥケウス2 8月7日発売決定！

明日売りの雑誌より。

続編きたぁぁぁぁぁああああああ゛あ゛あ゛あ゛あ゛あ゛あ゛あ゛！！！

DS⇒Wii⇒Wiiときて再びDSにカドゥケウスが戻ってきた！　月森とアンジュはそのままで再びタッチペンで手術ができると思うと嬉しくてたまらない。

日本不遇

累計本数だけ見ればヒットしているタイトルだが、リンク先の売り上げを見ると一目瞭然。大体海外では日本の10倍以上売れている。というか、日本が海外の10分の1しか売れていない。

最新作NEW BLOODの初動にいたってはオプーナ以下。さらにはホリデーシーズンとはいえ、既に完成していたものをわざわざ2ヶ月遅らせて日本で発売するなど、続編は絶望的、仮に出ても海外だけじゃないかと思っていたが・・・この発表は実に嬉しい。

Info

投稿日: 2008年4月20日
タグ: game
このエントリの固定リンク: http://diary/log/1753.html
ブックマークに追加する
コメント: コメントを投稿する

2008
0420

Tagsgame

⇧