グラビカ学習帳～新宿のホームページ制作会社 gravity works（グラビティ・ワークス）備忘録と知識の共有と蓄積

ブラウザ毎のハックはCSSで簡単にできますが、
OSごとにスタイルを変えるのは、複数のCSSを用意して振り分けるしかないと
思っていました。

ですが今回はCSSの記述を増やしたくなく、
ダメもとで探してみたところ やたらと便利なJSが見つかりました。

CSS Browser Selector

CSSに簡単な記述を追加するだけで、
ブラウザ、OSを指定して適用させることができるJSです。

具体的には、

.win body {
　background:#000;
}

で Windowsのみに、

.mac.ie7 body {
　background:#000;
}

で MacのIE7のみにスタイルを適用できます。


ダウンロードはこちらのサイトから。
http://rafael.adm.br/css_browser_selector/


今回は試していませんが、
相当な数のOS、ブラウザに対応しているようです。

■OS
・win - Microsoft Windows (all versions)
・vista - Microsoft Windows Vista
・linux - Linux (x11 and linux)
・mac - Mac OS
・freebsd - FreeBSD
・ipod - iPod Touch
・iphone - iPhone
・ipad - iPad
・webtv - WebTV
・j2me - J2ME Devices (ex: Opera mini) ※changed from mobile to j2me
・blackberry - BlackBerry
・android - Google Android
・mobile - All mobile devices

■ブラウザ
・ie - Internet Explorer (All versions)
・ie8 - Internet Explorer 8.x
・ie7 - Internet Explorer 7.x
・ie6 - Internet Explorer 6.x
・ie5 - Internet Explorer 5.x
・gecko - Mozilla, Firefox (all versions), Camino
・ff2 - Firefox 2
・ff3 - Firefox 3
・ff3_5 - Firefox 3.5
・ff3_6 - Firefox 3.6
・opera - Opera (All versions)
・opera8 - Opera 8.x
・opera9 - Opera 9.x
・opera10 - Opera 10.x
・konqueror - Konqueror
・webkit or safari - Safari, NetNewsWire, OmniWeb, Shiira, Google Chrome
・safari3 - Safari 3.x
・chrome - Google Chrome
・iron - SRWare Iron


iPadやスマートフォン系のOSにまで対応しているようで、
なんだかまた近いうちにお世話になりそうな・・

hostファイルに追記する、ということがありました。
そもそもhostファイルとは耳慣れないものなので、何かと調べると、
不可視で、ドメインを取得した際に表示するIPアドレスを指定するファイルのようです。

Macでは、ターミナルからVimを使って追記ができるそうです。

１）ターミナルを立ち上げる
2）sudo vi /private/etc/hosts と入力する。
3)Vimを使って編集する
4)aキーで挿入モードへ変更
5）最後の行に移動して、IPアドレスとドメインを記入
６）入力が終了したら、Escキーで挿入モード終了
7）保存するために:wを入力し、Enter

これで終了です。

とても便利なパターン配布サイトです。
商用でもフリーで使え、クレジットも必要ありません。

WebTreats ETC（パターンアーカイブのページ）
http://webtreats.mysitemyway.com/category/photoshop-resources/patterns/

クオリティの高いものが揃っています。

ぱっと見でテクスチャーのようなものもありますが、
パターンなので繋ぎ目なく繰り返すことができます。

凝ったものが多く、なかなか使い所がない・・
ということにもなりそうですが、
リストを眺めているだけでもインスピレーションが湧きそうなのでオススメです。

弊社ブログ『四ツ谷NOW』に
sixapart社のブログパーツ、『zenback』を導入しました。

ところが2点ほど不具合が発生。
最初はzenbackのバグ？かと思いましたが
ブログの初期設定のミスと
既に導入済みのJavascript＆コーディングとの相性問題。

忘れがちかと思ったのでメモしておきます。

グラビティーワークスの浅賀です。

新しい環境でThnuderbirdを再設定するたびに忘れてしまうのでメモ。

Thunderbirdでアカウントを設定すると、
メール作成時にhtml形式を使用するのがデフォルトのようです。
html形式ではなくテキスト形式で作成したい場合の設定方法ですが、
"環境設定"ではなく、"アカウント設定"の中で行います。


"アカウント設定"から設定しているアカウントにぶら下がるメニューの中から
"編集とアドレス入力"を選択します。
その中ににある"HTML形式でメッセージを編集する"という項目に
チェックが入っているので、外せばオッケー。

メモでした。

おつかれさまです。
グラビティ・ワークスの浅賀です。

Macで保存時に、保存したい階層を選ぶことを
面倒と感じた事がたびたびあります。

一発で、保存したい階層にたどり着く方法がありました。
ファインダー上で保存したい階層を開いておく必要がありますが、
保存時に開いているシチュエーションが多そうなので
これは便利です。

*****
保存時に開いたダイアログボックスに、
ファインダーで開いた保存したい階層をドラッグ＆ドロップすると、
保存したい階層へ一発ジャンプ！
*****

完璧です。

ネタ元
↓
ファイル保存ダイアログでのフォルダ選択をスマートに♪
http://kjx130.blog19.fc2.com/blog-entry-2404.html?utm_medium=twitter&utm_source=twitterfeed

デザインにちょっとストライプを入れてみたくなったとき、
使いたい線幅や間隔のものが都合よくパターン登録されているとは限りません。

かといって1からパターンを作ろうとすると、
作ってはみたもののイメージと違う・・などと意外と時間が
かかってしまうものです。

そういうとき、このストライプジェネレーターがとても便利です。

Stripe Generator
http://www.stripegenerator.com/

ブラウザ上でプレビューしながら、ストライプ柄を作成することができます。
線幅、線間隔、角度、カラーなど細かく設定できるので、
自分のイメージ通りのストライプを作ることができます。

完成したらPNG形式でダウンロードして、そのままパターンとして使用可能。


ストライプばかりに時間をかけてしまわないよう、
これでサクッと作ってしまいましょう～。

FLVPlaybackコンポーネント、いわゆるFlash内でムービーを再生させる際のプレイヤーのカスタマイズについてです。

今まではFlashにデフォルトで用意されているスキンを複製し、
デザインをちまちま変えて対応してきましたが、
ボタンやバーの位置などを大幅に変える必要が出てきました。

ので、別々に用意したスキンを読み込む方法ではなく、
ムービーを読み込むFlashに直接パーツを配置する方法で作成しました。


作成にあたって参考にした記事はこちらの「翻訳記事」、No:26です。

http://www.himco.jp/articles/pdf/customFLVcompo.swf


英語が読めない自分にはとても助かります。。笑

かなり細かい手順で書かれているので
ここでは大まかな説明のみにします。

FlashにはもともとFLVPlaybackコンポーネントのパーツ（再生ボタン、バーなど）が用意されていて、それを好きなように配置したあと、読み込んだムービーと関連づけることができます。
それだけで各種パーツとして正しく機能するようになるので、あとは普段ムービークリップを編集するのと同じようにデザインや位置を変更するだけ。

こんなに簡単だったとは・・

使い回しの点では若干不便ですが、ちょっと凝ったデザインのスキンでも
工夫次第で再現できると思います。

コーディングしたページをWindowsで確認していると、テキスト中の波線が
普段使っている「～」と違う「～」になっていることがあります。

この文章がMSゴシック等で表示されている方は、
↑の2つの波線が違って見えていると思います。

実はこの2つの波線はそれぞれ違う文字で、
前者が「全角チルダ」、後者が「波ダッシュ」という文字です。
波ダッシュは、次のような環境ではジャギーがかかって見えてしまいます。

・メイリオ以外のWindowsフォント
・文字コードがUTF-8


では「波ダッシュ」を使わないようにすればいい、という話なのですが、
テキスト素材などをいただくと「波ダッシュ」が使われていることがあります。

その理由は、OS間で入力される波線が違うためです。

・Windowsで「から」を変換したりキーから波線を入力すると、
「全角チルダ」になります。

・Macで「から」を変換したりキーから波線を入力すると、
「波ダッシュ」になります。

つまり、Macで作成されたテキスト素材には、どうしても「波ダッシュ」が入ってきます。
これをそのまま使ってしまうと、Windowsでは綺麗に見えない・・ということが起きます。


テキスト素材は一旦、「波ダッシュ」を「～」に置き換えてから使用するのが良さそうです。

「Foxit J-Reader」というPDFリーダーが高速だという話を聞いて、
試しにダウンロードしてみました。
今まで有料だった機能を含めて無料化したそうです。
http://www.foxitsoftware.com/japan/products/reader/reader.php

PDFは基本的に見るだけで編集はしないんですが、
素材のデータがPDFだったりすると
開くだけでも結構時間がかかってしまうので・・。

実際、インストールして重めのPDFを開いてみたところ、
確かに今まで使用していたものよりもかなり速かったです。
おまけにスクロールしたときの動作もずいぶん軽い。

これはいい感じです。
編集機能はさわってませんが充分な機能があるそうなので、
遅さが気になっている人は是非。