Skip to: Navigation / Content / Sidebar / Footer

pngcrushでPNGファイルから不必要と思われるメタデータを削除

Posted at 2009-07-03T05:32:00+09:00 in Software

PNGファイルにはメタデータとして様々な情報を埋め込むことができる。その様々な情報のうちガンマとカラー・プロファイルの情報はブラウザでの表示に影響を与えることがあるので、そこそこ使いやすいpngcrushで削除するのが無難。それら影響を与えることがあるメタデータを削除してやれば、WindowsのPhotoshopで作ったPNGファイルがMac(Leopard)のSafariで色がずれるなどといった現象を回避することができる。

pngcrushのWindows向けバイナリはダウンロード・ページの下の方にあるpngcrush-executablesの方からダウンロードできる(2009/07/03時点ではpngcrush-1.6.15-win32.zipが最新)。pngcrush-1.6.19.zipとかはソースのみなので注意。関係ないけどsourceforge.netは見づらくなった気がする…。

あるPNGファイル(input.png)から不必要と思われるメタデータを削除して圧縮したPNGファイル(output.png)を作成するには、

$ "C:\Program Files\pngcrush\pngcrush.exe" -rem alla -l 9 input.png output.png

とコマンド プロンプトで実行してやれば良い。-rem allaと指定すると、削除してもあまり影響のないメタデータを削除してくれる(removes all known ancillary chunks except for tRNS)ので、-rem gAMA -rem sRGB -rem tEXtなどと個別に指定する必要はない。-l 9-bruteでも構わないが、-l 9の方が速い。

@echo off

move %1 %1.bak
"C:\Program Files\pngcrush\pngcrush.exe" -rem alla -l 9 %1.bak %1

以上のようなバッチ・ファイルを作れば、ドラッグ・アンド・ドロップ(や送る等)から一発で削除して圧縮できるようになる。

メタデータを確認したい場合は、

$ "C:\Program Files\pngcrush\pngcrush.exe" -n -v input.png

とコマンド プロンプトで実行してやれば良いが、かなり読みづらい。閲覧に関してはGUIなTweakPNGで行うのが良さそう。

いちいちバッチファイルに通すのは面倒くさいというのなら、メタデータを出力しないオプションを持つSuperPNGというPhotoshopのPNG書き出しプラグインを使うというのも悪くはない。圧縮率も5段階で調節できるのでそこそこ使える。

フレッツ・テレビ

Posted at 2009-06-27T17:19:00+09:00 in Media

地元でフレッツ・テレビの個別相談会があったのでいろいろ聞いてみた。とりあえずいきなりひかり電話も同時に導入しませんかみたいに言われたのがかなりアレ。帰るときに貰った粗品はボールペンとポケットティッシュ、洗剤(4回分)、タオル。以下はメモ。

Bフレッツでは使えない

フレッツ 光ネクストにコース変更をする必要がある。どうしてなのかはあまり説明してくれなかった。「フレッツ・テレビはネクストにしないとだめなんです!」みたいな。変更には特にお金がかかるとかそういうことはないらしいが、微妙にすっきりしない。

ONU一体型ルーター

新規でフレッツ 光ネクストの回線を引き、同時にフレッツ・テレビを導入する場合はONU一体型ルーター(PR-S300SE/GV-ONU)一台で済む。ONUとルーターを縦に二つ並べたもので、真ん中あたりで短いLANケーブルでつながっている。そのONU一体型ルーターのONU部分からTV等へは同軸ケーブルでつなぎ、ルーター部分にある4つのLANポートからPCや無線LANルーターに接続する。このONU一体型ルーターにはひかり電話向けのモジュラージャックも2個あったりもする。けっこうでかい上に横設置は不可らしいのでかなり設置場所を選ぶと思われる。サイズは幅4cm・高さ24cm・奥行き17.5cm。筐体の色は黒。別にPCカード型の無線LANアクセスポイント(純正以外のものでは動作するらしい)を挿すとa/b/gの無線LANルーターにもなるらしい。

しかし、既にフレッツ 光ネクストやBフレッツの回線を引いている場合は、今使っているONUとこのONU一体型ルーターの両方を使うことになるらしい。どうして取り替えてくれないのかは説明してくれなかった。「ダメなんですよー」と繰り返すのみ。

ひかり電話

同時にひかり電話を導入するのがおすすめらしい。お安くなっていますよとか言われても困る。デメリットをまったく説明されなかったので華麗にスルーした。初っ端に「フレッツ 光ネクストにするとひかり電話も導入することになります」みたいにさりげなく混ぜられたので、同時にひかり電話にしなくちゃならないのかと一瞬勘違いしてしまった(実際はそんなことはないのだけど)。個人的には良い機会かもしれないとは思うけど、IP電話はまだなんとなく敬遠してしまう。

ONU一体型ルーターにモジュラージャックが2つあってそこからつなぐだけなので、その近くに電話機を設置するなら接続は簡単。

工事

基本的に複雑なことは何もやらない方針らしい。NTTでやってくれることは、

だけ。ONUの位置を2階から1階に変更するとかそういうことなら無料でやってくれるらしい。

TV側及びLANの配線等はオプティキャスト(フレッツ・テレビで利用することになる放送サービス会社)の方で頼むことはできる。公式サイト等で参照できる工事費はあくまで最低の値段で、同軸ケーブルを壁に這わせるとかそういう作業は別料金(想像できると思うけどかなりの値段)。

単に一台のTVに接続するだけなら、ONU一体型ルーターから同軸ケーブルで分配器へつなぎ、分配器からTVの地上波デジタル端子とBSデジタル端子にそれぞれ同軸ケーブルで接続するだけ。ONU一体型ルーターのコネクタは一般的な同軸ケーブルのものなので特に接続は難しそうではない。同軸ケーブル*3と分配器は別途購入する必要がある(使用中のものを流用できると思う)。オプティキャストのテレビ接続工事説明ページにあるBSデジタルアップコンバータは必要なくなっている(ONU一体型ルーターに組み込まれているということらしい)。

複数台のテレビを設置する場合はブースターが必要になる可能性があることや家庭内の分配器がどこにあるかをしらべなくてはならないとかややこしそうなので、素直にオプティキャストに頼んだ方が良さそう。高いけど…。

また不必要になるBSのアンテナ(や地上波のアンテナ)の撤去等はNTTもオプティキャストもやってくれない。「よく頼まれるんですけどね~」とかおっしゃってた。そこはぼったくりでも良いからやればいいのにとか思ったけど言わなかった。別に電気屋に頼む必要がある(ヤマダ電機で聞いたら「3万円くらいは頂くことになりそうですね」って言われた)。

月682.5円?

実際には毎月683円請求されるらしい。年決めで8190円(682.5円*12)払うとかそういうことではない。683円って書けよとか思ったけど言わなかった。

月6720円?

これはプロバイダパックで契約した場合のプロバイダ料金とフレッツ回線使用料の合計金額(プロバイダによって多少違う)。フレッツ・テレビの月額利用料は含まれない。BIGLOBEだとBIGLOBE光 with フレッツとかいう名称で提供されているもの。コース変更で乗り換えた場合も2ヶ月無料とかそういうサービス(プロバイダによって違う)は受けることができるらしい。プロバイダパックを利用しない場合は、5460円+プロバイダの月額利用料(1500-2000円位が多い)。もちろん2ヶ月無料などのサービスもない。


導入する方向で検討しているんだけど、いまいち踏ん切りがつかない。見積もり届いてからまた考えよう。

無印良品の低反発まくら買った

Posted at 2009-06-23T18:04:00+09:00 in Gadget

長年使っていたまくらの一部が擦り切れて中のパイプが出てきてしまったので買い換えた。羽毛にしようかとか加齢臭対策にそばがらにしようかとか色々悩んだけど、無印良品の低反発まくら(安い方)にした。セール中で2000円を切っていて安かったので。

今までの普通の綿+パイプのまくらとは違うゆっくり沈み込む感じとねっとりとした感触にまだちょっと違和感がある。同じ低反発系のウレタンチップ+パイプのとかも探してみれば良かった。7cmという厚さはあまり気にならないが、幅が44cmと短いのがちょっとアレかも。

同じ無印のまくら用敷くだけひんやりシートもちょっと欲しくなった。店舗で触ってみたら本当にひんやりしてた。どういう仕組みなのかまったくわからない。

ちょっと間が空いたのでどうでもいいエントリを書いてみた。

てか、無印のネットストアはかなりダメな感じが…。

衣料品とか在庫が潤沢なものを買う時には気づかなそうだけど、大型家具とかを買おうとするとはまりまくる気がする。

追記

検索結果のページが酷かったことを思い出したので追記してみる。これはない。新しいタブで開くことができず、かつ検索結果に戻れないので、一回の検索で一つの検索結果しか開くことができないという…。

ユニットシェルフのシミュレーターもFlashなのにFirefoxで動かないようにしてるとか謎なとこが多いなぁ。

Version Control for Designersを訳した

Posted at 2009-06-11T20:52:00+09:00 in Software

Gitを使い始めた時に読んだドキュメントの一つであるVersion Control for Designers日本語に訳した。for Designersとタイトルについているが、そのことは忘れて読んだ方が良いと思う。

このドキュメントは開発者向けではない。かといってデザイナ向けの特別な何かがあるわけでもない。主にターゲットになるのは、

あたりになると思う。内容はGitの基本的なコマンドの使い方を通して、バージョン管理システムをざっと説明するとかそういう感じ。これを読めばあとはヘルプだけで良いというようなものではないが、Gitを始める時のとっかかりにはなると思う。

deployとかcodebaseとかうまい訳語が思いつかない。

jQueryで文字参照に変換

Posted at 2009-06-10T16:13:00+09:00 in Coding

jQueryに文字列に含まれる特定の文字を文字参照へ変換するそのものずばりなメソッドは無い(よね?)が、ダミーの要素を作成し、text()で変換したい文字列をセットしてからhtml()で中身だけ取り出してやるとうまいこと変換することができる。

var s = $("<u/>").text(s).html();

これだけでsが文字参照に変換される。どう変換されるかは各ブラウザのinnerHTMLの仕様に依存するのだと思う。

思いついた時はreplace()並べるよりはマシかなと思ったけど、直感的なコードではないので一長一短。各ブラウザがきっと良きに計らってくれるであろう点はなかなか良い気もする。

短いエントリだ。

このエントリを含むエントリ

Posted at 2009-06-07T17:39:00+09:00 in Coding

はてなブックマークにある「このエントリを含むエントリ」機能のようなものをJavaScript+jQueryで書いてみた(サンプル)。ソースはGoogleブログ検索link:プリフィックスを使用した検索。この検索結果はAtom(やRSS 2.0)で拾えるので、それをYQLに投げてJavaScriptだけで書いた。最初ははてブのエントリ情報のページをスクレイピングして作ってたんだけど、こっちを思いついたのでこっちで。

YQLへのクエリは、

select * from atom where url='http://blogsearch.google.co.jp/blogsearch_feeds?scoring=d&output=atom&q=link:http://example.com/foo/bar.html'

という感じで、エントリのフルパスを指定してやれば良い(http://は削らなくてもOK)。scoringパラメータで日付順にするかどうかは好みで。日本語のブログに限定にするならlr=lang_jaとかを追加すれば良い。

はてブの実装がどうなっているかは知らないんだけど、きっとブックマークされた時にリンクをリストアップしてると思うので、ブックマークされてないページからのリンクは拾えないんじゃないかと思う。Googleブログ検索の方はフィードを配信しているサイトのからのリンクならほぼ全て拾えると思うので、より多くのリンクを拾えるのではないかと思う。逆にスパム・ブログみたいなものも含まれてしまうとも言える。そういう意味でははてブのリストの方が洗練されたものであるかもしれない。どっちもどっち。

jQueryプラグイン: Highlight Search Terms

Posted at 2009-06-04T11:26:00+09:00 in Coding

前回のエントリで取り上げたスクリプトをjQueryプラグイン化した。だけ。GitHubにリポジトリを作って公開しておいた。基本的にはこれでもう良いやとか思ってるんだけど、URLパターンはもうちょっと何とかならないかなとかは思ってる。あとマルチカラーなハイライトを実現できるようにはしたいかも。実装はhighlight-1とかクラス名を順に振っていくだけとか簡単そうなものになると思う(そこまで考えてるなら実装しろ)。

使い方は多くのjQueryプラグインと同じで、

$("body").highlightSearchTerms();

と検索語のハイライトを行いたい要素からつなげて使う。プラグイン側でインライン・スタイルを付加したりはしないので、デフォルトのem.highlightに対してスタイル指定をあらかじめしておく必要がある。

highlightSearchTerms()にはオプションとして、

$("body").highlightSearchTerms({
  className: "search-keyword",
  referrerPatterns: [
    "^http://ask\.jp.+[?&]q=([^&]+).*$"
  ],
  unsafeChars: "[!-*,-/:-@[-`{-~]"
});

このように指定することができる。

classNameは強調する時に使用するem要素に指定されるclass属性。デフォルトはhighlight

referrerPattersはリファラを評価する正規表現のパターン。配列なので複数指定可能。デフォルトでGoogle(comとco.jp)・Yahoo!(comとco.jp)・Bingの計5つが設定されており、オプションで指定されたものとマージされる。オプションで指定したものが先に評価され、マッチした時点で評価のループを抜けるので、デフォルトのパターンよりも優先されることになる(上書きではないが、近い挙動になる)。例えば自分のサイト内検索のリファラを拾うようにするためには、

$("body").highlightSearchTerms({
  referrerPatterns: [
    "^http://hail2u\.net.+[?&]q=([^&]+).*$"
  ]
});

とかしてやれば良い(これはこのサイトの場合の例)。

unsafeCharsは検索語から削除する文字列の正規表現パターン。デフォルトではほとんど全ての半角記号を削除するようになっている。なので、記号が強調されることはない。あまり指定する必要はないと思うが一応。むしろデフォルトの削除パターンをもっと充実させたい。このオプション指定は追加ではなく上書きなので注意が必要。

また、デバッグ用にreferrerというオプションがある。

$("body").highlightSearchTerms({
  referrer: "http://www.google.com/search?q=lorem+ipsum+dolor+sit+amet"
});

とすることによってdocument.referrerの代わりにreferrerで指定されたURL(URLじゃなくても通っちゃうけど)が検索語の取り出し元になる。なので、色々なリファラを想定して試すことができる。

ビルトインのリファラ・パターンはパブリックにしてあるので上書きしてしまうことも可能。だが、オプションで優先して評価させることができるのでそっちを使った方が無難だと思う。コードも汚くなっちゃうし。

中身のコードはあまり変わっていない。変えたところは$("*").not("iframe")というような感じで書いていた部分をfind():not()セレクタを使うようにしたことくらい。

this.find(":not(iframe)").contents().each();

という感じになっている。jQueryのここらへんの柔軟性はすごくて、XPathなんか目じゃないね(おおげさ)。

検索サイトのURLパターンとか調べて書くのがちょっと面倒だったので、こういうのはオープンなデータベースがあったら便利かもしれないなと思った。パラメータごとにきちんと分けてデータベース化すれば、こういうリファラから検索語を強調するスクリプト(ユーザー・スクリプトも含め)とかに使う以外にも、アクセスログ解析とかは勿論、逆に検索を投げるためにも使えそう。「言うだけならタダだよね」。ですよねー。てか知らないだけで既にありそうな気もする(検索してない)。

検索語の強調

Posted at 2009-06-03T22:26:00+09:00 in Coding

かなり昔から色々な人が作ってるリファラを調べて検索語を取得しドキュメントの単語を強調表示するスクリプトを今さら書いたjQueryのおかげでそこそこ短く書けた。遅いけど。リファラから検索語を取得する部分はまぁ置いておいて(あんまり考えずに書いたので)、ドキュメントの単語をハイライトするコードの部分についてだけ書いておく。

$("#contents > .section *").not("iframe").contents().each(function () {
  if (this.nodeType === 3) {
    var s = this.nodeValue.replace(words, "<em class=\"highlight\">$1</em>");
    $(this).replaceWith(s);
  }
});

だけ。wordsにはリファラから取得した単語の正規表現が入っている。このサイトではメインのコンテンツは必ず#contents > .section以下にあるので最初のセレクタはこうなってるが、$("body *")とかでもOK。そこからテキスト・ノードも含めて拾えるcontents()each()と繋げて全ノードを走査する。で、テキスト・ノードだったらnodeValueから内容(テキスト・データ)を拾い、replaceWith()でノードの内容を置き換えている。

テキスト・ノードを全部拾うまではすぐに書けたけど、replaceWith()を知らなくて色々変なことやってた。親ノードに戻ってノード作り直して入れ替えとか。

jQueryのcontents()iframe要素だけ特別扱いしているので、iframe要素だけ除外しておいてやらないと、Internet ExplorerOperaでjQueryがエラ-を吐く。Firefoxではエラーが出なかったのでちょっとはまったが、Operaの開発者ツールで原因を調査できたので助かった。

ここには既に導入してあるので、「圧縮フォルダ エクスプローラ キビキビ zipfldr - Google 検索」などからこのサイトを開くとハイライトされる。

らいふすとりーむ

Posted at 2009-05-31T20:54:00+09:00 in Miscellaneous

Twitterでつぶやき始めたりLast.fmへの曲の登録を再開したりLifestreamに載せられそうなものが増えてきたので、FriendFeedまとめて、APIを利用してLifestreamを作った。当初はChi.mpで作ろうとしていたのだけど、以前書いたエントリの通り更新遅すぎで使い物にならなかったので一番メジャーなFriendFeedに落ち着いた。

FriendFeedにはJSONPなAPIがあるのでJavaScriptだけで書いた。ざっくりと3*100件分のフィードを拾って、日付でソートしなおし(たまに時系列順に並んでなかったりするみたいなので)、7日分出力したところで止めるという感じ。直近50件とかでも良かったかもしれないけど、なんとなく日付単位で区切った方がすっきりする気がしたので切りが良い1週間分とした。

サービスのfaviconだけ並んでるというデザインはどっかで見てかっこいいなと思ったのでパクった。にぎやかしだし。

faviconの表示にははてなGooglefavicon→PNG変換機能をこっそり使おうかと思ったけど、Faviconiac.comというウェブサービスがあったのでこれを利用することにした(Googleのは透過部分が白で塗りつぶされてしまうのでダメダメだし)。最初は古いfaviconが表示されたりしたのだけど、更新リクエストもできるみたいで、半日くらいかかったがちゃんと現在のfaviconに更新された。ちょっと使った感じではそこそこレスポンスも良さそうで、商用利用もタダでOKとか太っ腹なところも良い。Favicon Converterという日本のウェブサービスもあったが、これは画像がちゃんと返ってこない(デフォルトの画像にすらならない)ことがあって、ちょっと使いづらい感じがしたので止めておいた。タイミングが悪かっただけかもしれないけど。

Last.fmは曲単位で取り込んだら破綻しそうなので、最近聴いたトラックのフィードから強引にアルバム単位でAmazonアソシエイトのリンクのリストを生成するPipeを作ってそのフィードを登録した。このPipeは一応誰でも使えるようになってる(AmazonアソシエイトのトラッキングIDも設定できる)が、日本語が文字化けしたりするのでオススメできない。洋楽しか聴かない人向けということにしておく。誰か直して。まぁあと3ヶ月の命だけど。

あまり考えずにFriendFeedのアカウントをTwitterのアカウントで作成したら友達リストが自動的に作成されてしまった。ちょっと試してみるだけのつもりだったのにひどい。インポートしないとかそういう設定見逃したかなぁ。意図せずに色々な人に友達追加のリクエストを送ってしまった。そんなつもりじゃなかったんだ。反省はしている。出来ればやり直したい。

Chi.mp

Posted at 2009-05-31T00:36:00+09:00 in Internet

Lifestreamっぽいものを作ろうとContent Hub and Identity Management Platformと銘打たれているChi.mp試してみた。結局はFriendFeedを使うことにしたんだけどね。陳腐とかチン○とか。

良いかもしれないと感じたところは結構あった。

他にはOpenIDプロバイダだったりとかGoogle Analyticsが使えるとかも一応。

こう良いところを挙げていくと「すごくね?」みたいな感じなんだけど、致命的なことにコンテンツの反映がものすごく遅い。Twitterでのつぶやきが30分経っても反映されない。また、フィードも直近10件というかなり寂しいもので、欠落しまくり。APIもないのでブラウザでちまちま見るしかない。メインサイトのサブドメインを割り当ててプロフィール代わりに使うとかなら使えないこともないけど、今のところは他のサービス使った方が良さそう。デザインもしょぼいしね。

コンテンツの反映が速くなって、300件分くらいのactivityをごそっと取れるAPI(フィードでも良いけど)が実装されたらまたいじってみよう。