INCOMPLETE++

Janetterちょこっと改造

aki — Sat, 14 Apr 2012 11:00:00 +0000

Twitterはお手軽であるゆえ、脊髄反射でうかつなことを書いてしまうこともある。その結果大炎上とかあちこちで見かける。

そんなうかつ発言抑制にすこ～しだけ効果があるかも知れない方法。
ツイート欄にある「いまどうしてる？」の文字を書き換える。

Janetterが起動している場合は終了させる。
Janetterインストールフォルダの[bin]→[locale]フォルダを開く。
デフォルトであれば
C:\Program Files\Janetter2\bin\locale
[ja.json] というファイルをメモ帳で開く。
380行目あたりに
"whatsHappening":"いまどうしてる？",
とあるので、ここを好きな言葉に書き換える。

私の場合はこうした。

なにかイヤなことがあると無意識にはけ口を求めて、うっかり吐き出してしまいかねないので。
ツイッターでの発言は親しい友人に愚痴を聞いてもらうのとは違うと思う。自分のフォロワーの人にはできるだけ楽しい気持ちになって欲しい。

なかよく・たのしく・りすぺくと

―― @itoi_shigesato

twitterサイトの「いまどうしてる？」もGreasemonkeyで書き換えられないかやってみたけどダメでした……。力不足orz

Janetterの設定をDropboxで同期する

aki — Tue, 10 Jan 2012 11:00:00 +0000

TwitterクライアントのJanetterの設定を、Dropboxを利用して複数マシン間で同期する方法のメモ。未読位置やDBの同期が取れるようになる。

作業はJanetterを終了させた状態で行うこと
同期させたいマシンすべてに、JanetterとDropboxのインストールが済んでいること

設定手順

Dropboxフォルダ内にJanetter用のフォルダを作る。
記事中では仮に「janetter_work」とする。
Janetterの実行ファイルがあるフォルダ（デフォルトなら C:\Program Files\Janetter2\bin）にある janetset.ini をメモ帳で開く。
work_folder= の後ろにDropboxに作ったJanetter用フォルダまでのパスを書く。
```
例
work_folder=D:\My Dropbox\janetter_work
```

基本的には以上で設定完了。
なお複数のマシンで同時にJanetterを起動すると、多分おかしなことになるので注意。

追加設定

頻繁な同期を抑制するためログファイルの設定を変える。JanetterSrv.log が書き込みが頻繁でサイズもでかいので、これを控えめに設定。

上記手順の同期設定を行った後、一度Janetterを起動させ、終了させる。こうするとDropboxの「janetter_work」に設定ファイルが構築される。
「janetter_work」フォルダ内の janetter.iniをメモ帳で開き[log]の部分を書き換える。
- max_mbytes はログファイルのサイズをメガバイトで指定。これを1（MB）に。
- backup_count はログファイルのバックアップをいくつ保持するか。Dropboxに入れておけばバックアップは勝手に取れているので、これは0に。
- level はログの取得レベル。debugに近いほど詳細なログを取り、fatalに近いほど致命的なエラー以外記録しない。これは errorとした。

以上を踏まえて、以下のように書き換え。

[log]
; JanetterSrv.logの設定
max_mbytes = 1
backup_count = 0
; レベルはdebug, info, warn, error, fatalを指定
level = error

ちなみにデフォルトの値は C:\Program Files\Janetter2\bin の janetter.ini.sample に書かれているので、元に戻したいときはこのファイルを見ながら値を戻せばOK。

あまり過去ログを漁ることのない人は、Janetter本体のオプションから「ローカルデータベースへの保存」のチェックをことごとく外しておくと、さらに同期量を減らせる。

Clearlyがステキ

aki — Thu, 05 Jan 2012 11:00:00 +0000

EvernoteのFirefoxアドオン、Clearlyがスバラシイ！

既に各所で紹介されているが、Webページから余分な要素をごっそり排除して本文に集中できるようにしてくれるアドオン。
広告や装飾がうざったいサイトもこれですっきりこ。

Before:

After:

オプション画面で見た目もカスタマイズできる。私はフォントを全部メイリオにした。スタイルシートがわかる人なら、もっと細かくカスタマイズ可能。

個人的には創作小説サイトの閲覧にも重宝している。
文章が良くても字がむやみに小さい、行間が詰まりすぎ、一行がやたら短いor長い、目が痛くなる配色など、読みにくいサイトって意外に多い。そんなサイトもこれで解決！

iPod nano交換

aki — Fri, 30 Dec 2011 11:00:00 +0000

初代iPod nanoを使っていたのだが、バッテリ加熱問題のため交換プログラムに申し込んだ。どうせタダだし、用心しておくに越したことはないし。

Apple - サポート - iPod nano 交換プログラム

で、今日交換品が届いたのだが。

……え？

……えええ？

………ええええええええ!!??

こ、これは第６世代!!
初代の在庫がないから最新版にまるごと交換!?

あなたが神か。

……でもそれならそうと先に言って欲しかったと言うか。色を選ばせて欲しかったかな……。赤が好きなんだ赤が。

でもタッチ操作楽しいからまあいいやｗ

追記：罠

iPodは主にカーナビに繋いで使っていたのだが、この接続ケーブルが第6世代iPodの「充電」に対応してないことが判明。しかもカーナビがちっと古いので、対応するケーブルもどうやらないらしい。カーナビ画面からの操作はできるのだが……。
マジかよ……。……週末に取り外して充電するしかないかorz

参考までに情報。

カーナビ：Carrozzeria AVIC-HRZ88
ケーブル：CD-IB10II

ブラウザ別フォントレンダリングの比較（日本語編）

aki — Mon, 12 Dec 2011 13:10:01 +0000

前回のエントリの続き。今回は日本語フォントを比較。環境は前回と一緒。
比較画像は縮小してあるので、クリックして原寸の画像をチェックしてください。

使用フォント: メイリオ（TrueType / OSに付属）
小塚ゴシック（OpenType / AdobeReaderに付属）
M+1（TrueType / M+ FONTS PROJECT）

Google Font APIに日本語フォントはないので、それの評価はなし。
WOFF版のM+1フォントは、以下のサイトで変換して作成。

Font Squirrel | Create Your Own @font-face Kits






Font Test




メイリオ (True Type)
あれが名高いアルビレオの観測所です。
あれが名高いアルビレオの観測所です。
あれが名高いアルビレオの観測所です。
あれが名高いアルビレオの観測所です。



小塚ゴシック (Open Type)
あれが名高いアルビレオの観測所です。
あれが名高いアルビレオの観測所です。
あれが名高いアルビレオの観測所です。
あれが名高いアルビレオの観測所です。



M+1 (True Type)
あれが名高いアルビレオの観測所です。
あれが名高いアルビレオの観測所です。
あれが名高いアルビレオの観測所です。
あれが名高いアルビレオの観測所です。



M+1 (WOFF)
あれが名高いアルビレオの観測所です。
あれが名高いアルビレオの観測所です。
あれが名高いアルビレオの観測所です。
あれが名高いアルビレオの観測所です。

@font-face {
    font-family: 'M+1pregularW';
    src: url('mplus-1p-regular_0-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

div {
	margin:30px 20px;
	padding-left:10px;
	border-left: solid 3px #ccc;
	line-height: 1.4;
}

p{ margin:3px;}

.v { font-size: 34px; }
.g { font-size: 27px; }
.t { font-size: 20px; }
.s { font-size: 13px; }

div p:first-child { font-family:meiryo; font-weight:bold; color:#777; font-size: 13px;}
div#true {font-family: 'メイリオ','Meiryo';}
div#open {font-family: '小塚ゴシック Pro R';}
div#true2 {font-family: 'M+ 1p regular';}
div#woff {font-family: 'M+1pregularW';}

比較詳細

InternetExplorer

どれもきれいなんだが、WOFFが特にきれいに見える。フォントの太さが均一で、小さくなってもつぶれない。おなじM+1でもTrueTypeとWOFFでは、小さい字の品質が全然違う。

メイリオは元からスクリーン上できれいに見えることを目指して作成されたらしいので、全体的にバランスがいい。ただ太さがちょっとばらつく。縦の部分が太くなりやすい？

Safari

きれいだけど太くなるのは相変わらず。
IE9に比べて太さのばらつきがない。IE9でちょっとガタついたTrueTypeも、かなりきれいになっている。
M+1はTrueTypeとWOFFでまったく差がない。

Firefox、Chrome、Opera

Firefox↓

Chrome↓

Opera↓

欧文フォントの時と評価は同じ。OpenTypeがなめらかだけどボンヤリ。
M+1は、TrueTypeもWOFFも差がない。
全体的なバランスから見て、メイリオが一番きれいに見えるかな。

ブラウザ別フォントレンダリングの比較（欧文編）

aki — Mon, 12 Dec 2011 13:00:00 +0000

Google Fonts APIで遊んでいたら、IE9でのフォントの描画が異様にきれいなことに気付いた。IE9にバージョンアップしたのは結構前だけど、起動することは滅多にないから今まで知らなかった。

この際なので主要ブラウザとフォントフォーマット別の表示を比較してみることにした。
フォントの描画品質のみをチェック。CSSの解釈がズレる、間違っているといった部分は評価の対象としない。

このエントリでは欧文フォントをサンプルにした。日本語フォントの比較は次のエントリで。

検証環境

OS: Windows7
ブラウザ: InternetExplorer 9
Firefox 8
Chrome 15
Opera 11
Safari 5
使用フォント: Garamond （TrueType / OSに付属）
Garamond Premier （OpenType / AdobeReaderに付属？）
EB Garamond （Google Fonts API）

フォントはGaramondと名のつくものを使った。細部は異なるが、大まかなシルエットは同じなので。なおWOFF版フォントはOpenTypeの「Garamond Premier」を以下のサイトでWOFFに変換したものを使用。

Font Squirrel | Create Your Own @font-face Kits

検証に使ったHTMLとCSSソースは以下。






Font Test




Garamond (True Type)
Nokto de la Galaksia Fervojo
Nokto de la Galaksia Fervojo
Nokto de la Galaksia Fervojo
Nokto de la Galaksia Fervojo



Garamond Premier (Open Type)
Nokto de la Galaksia Fervojo
Nokto de la Galaksia Fervojo
Nokto de la Galaksia Fervojo
Nokto de la Galaksia Fervojo



Garamond Premier (WOFF)
Nokto de la Galaksia Fervojo
Nokto de la Galaksia Fervojo
Nokto de la Galaksia Fervojo
Nokto de la Galaksia Fervojo



EB Garamond (Google font API)
Nokto de la Galaksia Fervojo
Nokto de la Galaksia Fervojo
Nokto de la Galaksia Fervojo
Nokto de la Galaksia Fervojo

@import url(http://fonts.googleapis.com/css?family=EB+Garamond);

@font-face {
    font-family: 'Garamond Woff';
    src: url('garamondpremrpro-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;}

div {
	margin:30px 20px;
	padding-left:10px;
	border-left: solid 3px #ccc;
}

p{ margin:3px;}

.v { font-size: 34px; }
.g { font-size: 27px; }
.t { font-size: 20px; }
.s { font-size: 13px; }

div p:first-child { font-family: arial; font-weight:bold; color:#777; font-size: 13px;}
div#true {font-family: 'Garamond';}
div#open {font-family: 'Garamond Premr Pro';}
div#woff {font-family: 'Garamond Woff';}
div#google {font-family: 'EB Garamond';}

まずまとめ

最初にブラウザごとの結果をまとめて書いてしまう。

InternetExplorer

現時点では最強かも。どのタイプのフォントを使っても、異様になめらかな描画を実現している。
アンチエイリアスのかかり方も、強すぎず弱すぎずでいい感じ。個人的には一番好みの描画。

Safari

デフォルト設定だと特にOpenTypeが惨憺たるありさまなのだが、オプションで「フォントのなめらかさ」を「Windows標準」以外にすると、さっきの惨状は何だったのかと言いたいぐらいきれいになる。
今回はこのオプションを「中 - フラットパネルに最適」にして検証した。
アンチエイリアスがIEに比べてちょっと強めの印象。

Firefox、Chrome、Opera

この３つはほぼいっしょ……というか、多分同じ。こいつらは自分ではフォントのレンダリングを行っておらず、OSに任せてるのだろう。
OS任せと言うことで品質はIE、Safariに劣る。OpenTypeとそれ以外のフォーマットでは、描画の差が大きい。

３つ共通の傾向として、OpenTypeは他のフォーマットに比べてなめらかだが、アンチエイリアスが効きすぎに思える。なめらかというよりボンヤリ。

詳細

InternetExplorer

フォントのフォーマットを問わず、きれいな描画。
中でもWOFFが一番きれいなようだ。「Garamond Premier」のOpenType版とWOFF版を比較すると、WOFF版の方が字が小さくなってもなめらか。「G」のカーブの部分を見ると分かりやすい。ただ、なめらかな分「e」なんかはWOFFだと上の部分がつぶれてしまっている。

Safari

IE9と同等のなめらかさでフォーマットによる差もほとんどない……というか、差が分からないｗ
しかし、どんなフォントも一回り太くなってしまう。
オプションの「フォントのなめらかさ」を「CRTに最適」にすると他のブラウザと同等の太さになるが、今度はアンチエイリアスが効きすぎて、微妙にボンヤリとした印象。とはいえ気になるほどではないかも。

Firefox、Chrome、Opera

Firefox↓

Chrome↓

Opera↓

この3つはフォントのレンダリングはOS任せのようなのでまとめて評価する。

OpenTypeがいちばんなめらかだが、アンチエイリアスが効きすぎに思える。なめらかというよりボンヤリ。かすれたりつぶれたりしやすい感じ。
OpenTypeのものをWOFFに変換するとボケは抑えられるが、ガタつきがでる。でも長文に使うなら、WOFFの方がまだ読みやすいかも。

GoogleFontsAPIで送られてくるデータはIE以外の場合はTrueTypeらしい。確かにTrueTypeとガタつき具合が似ている。

Google Font APIは誰でも出来る超簡単 | TechRacho

日本語フォント編に続く。

Photoshop : Ortonエフェクト

aki — Wed, 16 Nov 2011 11:00:00 +0000

オンライン画像レタッチサービスpicnikで使えるエフェクトに「Orton-ish」というのがある。ちょっと幻想的な仕上がりにしてくれるのでお気に入り。

Picnik - Photo editing the easy way, online in your browser

Ortonさんという人が考案した方法であるらしい。これをPhotoshopでもできないかと思って調べてみた。

以下のサイトで手順を解説していたので、やり方を再現してみる。すごく簡単。

The Orton Effect – Digital Photography Tip of the Week | PCIN.net Update

手順

画像を開く。
背景レイヤーを複製（「レイヤー」メニュー→「レイヤーを複製」）し、名前を「シャープ」とする。
「シャープ」レイヤーをさらに複製。「シャープのコピー」というレイヤーができる。
「シャープのコピー」レイヤーの合成モードを「スクリーン」にする。
「シャープのコピー」レイヤーを、下のレイヤーと結合。（「レイヤー」メニューから「下のレイヤーと結合」）
明るい感じの「シャープ」というレイヤーができる。
「シャープ」レイヤーを複製して、名前を「ぼけ」にする。
「ぼけ」レイヤーの合成モードを「乗算」に。
「ぼけ」レイヤーに、「フィルタ」メニューから「ぼかし」→「ぼかし（ガウス）」。
プレビューを見ながら、いい感じにぼやっとするように「半径」の値をいじる。
あまりディテールが飛びすぎないように。

とりあえずコレで完成。
写真のデキにあわせて、「ぼけ」レイヤーの不透明度を変えたり、「シャープ」レイヤーの「明るさ・コントラスト」やレベル補正をして調整する。

結果

元の写真

適用後

今回の場合、上記の手順だけではちょっと暗かったので、最後に「シャープ」レイヤーを少し明るく調整した。
（「イメージ」メニュー→「色調補正」→「明るさ・コントラスト」で明るさの値を上げた）

写真だけでなくイラストにも効果アリ。水彩風の塗りだといい感じになるようだ。

Before：

After:

ソーシャルメディア共有ボタンの削除

aki — Tue, 08 Nov 2011 11:00:00 +0000

lifehackerのこの記事を見てなるほど！と。

ソーシャル共有ボタンをオフにし、Firefoxのパフォーマンスを向上させる「Wallflower」 : ライフハッカー［日本版］

確かに最近、特にニュースサイトはこの手のボタンがベッタベタに貼ってある。
こういうやつ↓

1ページ中にこういったボタンが大量にあると、それだけで表示速度が異様に遅くなるので、ばっさり削除してしまおう。

lifehackerで紹介されているアドオンを使ってもいいが、日本のはてブとかに対応してないし、既に導入しているAdBlockでも排除可能なので、そのフィルタを書いてみる。

以下をAdBlockのフィルタに追加。

||b.st-hatena.com^$domain=~b.hatena.ne.jp
||facebook.com/plugins/
||platform.twitter.com/widgets/
||plusone.google.com/_/+1/fastbutton
||static.mixi.jp/js/
||share.gree.jp/share

上から「はてなブックマーク」「Facebook いいね！」「twitter」「Google +1」「mixiチェック」「GREE いいね！」となっている。

結果、速ぇマジ速ぇ！ ITmediaとか、TechCrunchとかマジ爆速ｗ

ただしこのフィルタによって、そのソーシャルメディアの機能が一部使えないとかあるかも知れない。twitterは一通り使った感じ、問題なさそうだった。

もっといいフィルタの書き方があったら教えてくださいー。

GoogleReader圧縮スタイルシート

aki — Wed, 02 Nov 2011 11:00:00 +0000

2011-11-22 GoogleReaderの仕様が変わったようなので修正

Googleのサービスのデザインが軒並みリニューアルしている。色合いは結構好きなんだけど、高解像度のモニタを意識しているのか、余白がかなり増えた。
特にGoogleReaderでは、画面に納まる情報量が少ないのが不満。

職場で昼ご飯食べながらユーザースタイルシートを書いてみた。
FirefoxまたはChromeのアドオン「Stylish」に追加して使ってください。

オプションの表示サイズを「Compact」にしておく。


@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url-prefix(http://www.google.com/reader),
               url-prefix(http://www.google.co.jp/reader) {

/*不要なリストを隠す*/
#lhn-recommendations, /*おすすめ*/
#overview-selector, /*ホーム*/
#recommendations-tree /*ピックアップ*/
{display:none !important;}

#home-section { padding: 0 !important;}

/*ナビゲーションの幅とインデントを調整*/
#nav,#sub-tree{width:190px !important;}             /*ナビゲーションの幅*/
#chrome{margin-left:190px !important;}              /*本文の左マージン*/
.section-minimize { left: 0px !important;} /* 左の余白ナシ */
#lhn-selectors .selector,
#sub-tree-header { padding-left: 15px !important;} /* ツリーメニュー詰め */

/*フォルダのマージン調整*/
.folder .folder .folder-toggle { margin-left: 0px !important;}
.folder .folder > a > .icon,
.folder .folder > ul .icon { margin-left: 15px !important;}
.folder .sub-icon { margin-left: 10px !important;}
.folder .name-text, #reading-list-selector .label { max-width: 150px !important;}

/* リストの行間詰める */
div.collapsed { height: 1.6em !important;}
}

Before

After

合字

aki — Thu, 27 Oct 2011 11:00:00 +0000

出版やデザインの仕事をしてる人には常識だと思うけど、自分的に目からちょびっと鱗だったので。

メインサイトにある、figmaページのロゴをPhotoshopで作ってたのだが、fi って打ったのに、i の上の点が消えている。

……というか、なんか、f と i が一体化してるように見える。

何の現象かと調べてみたところ、これは「合字（Ligature・リガチャ）」というものらしい。
主に欧文において、並べたときにバランス悪いとか、読みづらくなる組み合わせを、もともとくっついた形としてデザインしておくものなんだとか。なるほど。

PCに入ってるフォントで合字を持ってるヤツを探してみた。日本語フォントでも、持ってる場合があるんだなー。

Photoshopは、OpenTypeフォントで合字データを持っている場合には、合字にするかしないか選べるみたい。