works - ポエツ | poets

Logs

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

GreaseMonkey : Google + Twitter = ググッター

Twitter のログ検索といえば、Shin x blog 提供の「Twitter 検索」があります。
サイドバーにこの検索窓を設置する GreaseMonkey もあります。(参照
ここのところ JavaScript の手習いで(動作確認しやすいので)ブックマークレットを色々かいていたのですが、ブックマークレットで動くなら、そのままグリースモンキー化もできそうなんですね(たぶん)。



それで今回のお題は、グーグルの検索窓を twitterに付ける。Google + Twitter = Googtter(ぐぐったー)です。
グーグルのサイト内検索をサイドバーに表示させます。
PublicTimeline と home (サインインした自分の画面)では、全体検索。各ユーザのページへ行くと、そのユーザ内を検索対象にします。

GreaseMonkey googtter
ブックマークレット版(同じ googtter.user.js を呼んでいるだけですが)googtter

※言語は日・英・中(繁体/簡体)の4種類を設定しました。
※パーマリンクに絞ってみようかと、最初は「 twitter.com/*/statuses 」にしてみましたが、あまり目立った違いは無かったです。
※たとえば「reply」で検索すると@username なんかのが探しやすいです。
※favarites が数千とかあるユーザもいるので、fav検索も設定しようと思ったのですが、あまりインデックスされてない様子。
「 twitter.com/*/favorites 」対象にすると結構出てきますが、固定リンクじゃないので結果と一致しないことが多いです。
Twitter Fav検索するとこんな感じになります。(適当な検索語でどうぞ)


【参照】
炭薬缶:twitterで自分と似た趣味の人を見つける
スポンサーサイト

twitter用ブックマークレット「add@」

twitter では 投稿文中に、ユーザIDの前に@を付けると、自動的にそのユーザのページへリンクになります。
とくに文の先頭に@ユーザ名を入れた場合は、そのユーザ向けへのメッセージであることを明示させることができます(秘密にはなりませんが)。

でも、この@+ユーザ名、いちいち手動で入力しなきゃいけないのが、なかなか不便なところです。そこでブックマークレットを作ってみました。

add@

twitter @付加支援bookmarklet add@(あっどあっと)

ログイン時に home と replies のページでこのブックマークレットを使うと、ユーザ名のリンクを一時的に書き換えます。
ユーザ名、サムネイル、それからサイドバーのFollowing一覧をクリックすると、そのユーザ名の前に自動的に「@」が付加されてtextareaに入力されます。
(ついでにトップメニューの「home」のリンクまで侵食してしまいますが…支障が少ないので回避していません)


「add@」をブラウザに drag&drop や右クリックで登録


登録した「add@」を開きます。


ページ内のユーザ名リンクが書き換えられ、クリックするとそのユーザ名に「@」が付加され入力されます。

はてな[↑B]アイコンをカスタマイズ

わだば、はてダのテンプレート(というか「テーマ」と言うらしい)をカスタマイズするさねー、と思い立ってこのかた、いまだHTMLひとつ触っておりません。はてな村には辺境にも住めそうにありません。

スタイルシートに2行追加するだけで、Fブアイコンをロールオーバーさせる、というネタを書きましたが、はてなの[↑B]アイコン(このエントリを含むブックマーク)でもやってみました。画像をいじったり、アップロードする手間は同じく必要なし。
クラス名は共通のようなので以下のようにスタイルを追加。

.bookmark-icon{width:16px; height:12px; background:url(http://d.hatena.ne.jp/images/b_entry_dg.gif)center no-repeat;}
.section a:hover .icon{visibility:hidden;}

Win ではプレビューしてません。背景画像の位置指定(center)はなくてよさげですが、却ってSafariでは指定すると1pxズレます。

おそらくアイコンの色は「ヘッダ色」(全15種類)の設定と同期しているようです。ロールオーバーさせるアイコンの色は以下のようになります。

b_entry_de 標準
b_entry_dg グレー
b_entry_gr 緑
b_entry_pr 紫
b_entry_br 茶
b_entry_rd 赤
b_entry_sp セピア
b_entry_pk ピンク
b_entry_te 抹茶
b_entry_lg ライトグレー
b_entry_lb ライトブルー
b_entry_wh 白
b_entry_or オレンジ
b_entry_li ライム
b_entry_bl 黒

ロールオーバーしなくていいので、アイコンの色に「ヘッダ色」と違う色を使いたいというアレンジも可。「a:hover」を外すだけ。
.section .icon{visibility:hidden;}

holganize.atn

前回記事にした、photoshop を使って画像をホルガ写真っぽくする方法を、アクションとして記録したので公開します。アクションなんてほとんど作ったことがないので、別のフォトショップに差し替えて動作するのか分からないし、配布するような出来じゃないんですが、気が向きましたらお持ち帰りください。
もし幸いにもちゃんと動作するようでしたら、どんな写真ができたか見せていただければ嬉しうございます。

前回考案した工程を基本に、もう少し細かい作業を追加しています。
アクションにはリサイズからレイヤーの統合までが含まれているので、デジカメの画像をフォトショップで開いたら、その他の作業は基本的に不要。撮ったまんまのデジカメ画像も、アクションボタンひとつでホルガナイズできます。

【デジカメ画像をホルガナイズ】
画像のタテ幅を基準とした、300pxのスクエア(正方形)フォーマットにリサイズされます。ヨコは300pxの幅に中央位置でトリミングされるので、裁ち落としたくない被写体がある場合は、その部分が中央に寄るように、あらかじめ大まかにトリミングしておきます。幅が300pxに満たない元画像は、引き伸ばされるので画質は劣化します。
スキャニングした写真でももちろん可(RGBに変換されます)。ただし印刷むきの解像度は保持しません。



1、「holganizer.atn」をローカルにダウンロード(上のアイコンです)
2、[メニューバー]ウィンドウ> アクションパレット> アクションの読み込み> holganizer.atnを選択
3、加工したい画像を開く。アクションパレット> holganizerフォルダ内の holganize.atnを選択・再生


元画像のコンディションによって、どの程度ホルガっぽくなるかは違います。アクション製作時には、20点ほどコンディションの異なる写真をサンプルにしたのですが、そもそも明度・彩度が違う画像なのに、同設定のフィルタをかけても、意味はなかったりします(一点ずつ加工するならともかく)。
ホルガの特性である「トンネルエフェクト」は、画像の明度・彩度とはあまり関係ないので、フォトショップでも再現できるのですが、それ以外は実際のホルガ写真の風合いは再現されてないでしょう。まあ、あくまで雰囲気です(w)。

ウェブ上で探して見つけた、実際のホルガ写真を100点ほどざっとみて、その特徴は何かと考えました。個体差も激しいので、共通するものと言っても難しいのですが、まず1)白飛びが激しい 2)暗部の色調がなく黒潰れしている。全体的に色調はやや乏しい感じはあります。白飛び&黒潰れ、であればコントラストが強いかと言えば、そうではない。

で、以下は乏しいカメラ知識に基づく推測です。
一般的なAF一眼だと、シャッタースピードの上限は1/4000~1/2000。一方ホルガは1/100固定。1/4000はかなり日差しの強い屋外で必要になりますが、すこし薄曇りの日でも屋外でなら、1/1000~1/250くらいが適正になります。だとしたら、屋外の自然光ではホルガの1/100では白飛びしやすい、ということになる。
また、手ぶれ+被写体ぶれが発生しにくいのは、1/125~1/60までと言われているので、ホルガの1/100では、比較的ぶれが発生やすいことになります。
そしてバルブ以外の段階、1/60~1/4くらいの範囲がカバーできないので、屋内や日陰ではかなり暗い写真になってしまう。写真によって白飛び、それに次いで黒潰れが目立つのは、ホルガのそういうレンズ性能に寄るのではないかと。

つまり「ホルガナイズ」加工するには、暗い写真はより黒く、明るい写真はさら白を跳ばす、という正反対の加工をしなければならない。なので、「holganizer.atn」では実際のホルガ写真は再現はできません。とりあえず、サンプルにした約20点の画像どれに使っても、それなりに効果があるよう平均的に調整したので、ホルガの再現性はどれもそこそこかと思います。



【使用前/使用後】

強い日光でコントラストのある画像、モノクロの画像にも効果はあります。さすがに夜景だと「トンネルエフェクト」は分からなくなります。



勝手にホルガナイザ

今週、はてなブックマークで、焼け尽きそうなほどマーキングされて”ヒートエントリ”と化しているのが『+LOVE IS DESIGN+』の「写真をオシャレに見せたい人のための便利なツール」
こちらで紹介されていた、画像をポラロイド写真風に加工するオンラインツールを見ていて、それならホルガっぽく画像を加工するのがあってもいいよね、と思った。そうしたら、同記事のコメントで H & A さんが、LOMO(ロシア製のトイカメラ)風に画像を加工するフリーウェア(ROUNDRECT X RUSSIA)を紹介していた!
[参照]teatimelogic

【4つの工程で画像をホルガナイズ】
とりあえずは自分の畑に近い技術で。Adobe Photoshop で画像を「ホルガ」風に加工してみよう。私はDTP屋ではあるけど、いわゆるグラフィッカーではないので、フォトショをぐりぐり使い回すほどではない。フォトショを使い倒すとなると、その道はかなり奥深い。そこで今回は「できるだけ少ない手数」で、「技術や経験が少なくても容易にできる」加工方法を考えてみた。かなり簡素な手順にしてみたので、 Photoshop ほどハイエンドではないアプリでも、同じような画像加工はできると思う。


まず、画像(写真)を用意。
記事でサンプルに使っているのは、Jリーグのクラブ、FC2東京…じゃないやFC東京の本拠地”アジスタ”の某最寄り駅です。地元民がおらがクラブと思っているのはFC東京であって、決して東京ヴェルディではないです。

ところで「ホルガっぽい」写真ってどういうのかと言えば、実物はかなり個体差があるように見える。実際ホルガを用いて撮影された画像は下記サイトを参照。
[参照]
HOLGA ちっく!
GALLERY 618


1】トリミング

[メニューバー]イメージ> カンバスサイズ
以前紹介したように、ホルガは35ミリや645フィルムも使えるのだけど、数少ないスクエアフォーマット対応器なので、加工する画像もやっぱり正方形にトリミング。
長辺を短い方にあわせてトリミング(数値入力)。基準位置を調整できるが、今回はそのまま中央で。


2】色調補正
[メニューバー]イメージ> 色調補正> レベル補正|明るさ・コントラスト|色相・彩度

ホルガの写真を見ていると、どれも白飛びが特徴的。暗部も黒潰れ気味で、中間部など全体的な階調も乏しい。
そこでまずは「レベル補正」でハイライト部を白跳びさせつつ、暗部はやや黒潰れにする。(熟練者は「トーンカーブ」で調整したほうがいいです)。適正露出の画像なら、かなり思いきり白飛びさせた方がホルガっぽくなる。
白跳びと黒潰れの風合いが、レベル補正だけで物足りなければ「コントラスト」を”5”くらい上げる。元画像がビビッドな場合はすこし「彩度」を落としてもいい。


3】画面周囲のみをぼかす
ホルガの写真は画面の周囲にいくに従ってぼける。これはどうも被写界深度の関係ではなく、レンズ性質の問題のようだ。画面中央はシャープに、周囲のみをぼかす加工をする。

現在の画像(背景画像)を新規レイヤーとしてコピー。全選択してペーストすると自動的にレイヤーが追加される。もしくはレイヤーパレットの「新規レイヤー」アイコンに背景をドラッグドロップ。
[メニューバー]フィルタ> ぼかし> ぼかし(強)
追加したレイヤー(この段階では背景と同じ画像)に「フィルタ ぼかし(強)」をかける。足りない場合は、「コントラスト」を”5”ほど下げてやると、エッジが弱くなり画面全体が濁った感じになって雰囲気が出てくる。

次に消しゴムツールを使って、レイヤーの中央部を消してゆく。消した部分からは背景のぼかしていない画像が見えてくる。消しゴム作業中は背景のレイヤーを非表示にすると見やすい。


4】トンネルエフェクト
そしてホルガと言えば、あの画面4角が暗くなる現象。”トンネルエフェクト”と呼ぶらしいが、単にレンズの性能が低いために起こる現象のようだ。トンネルエフェクトの程度は、実物を見ても不均一に発生しているようなので、お好みで加減してみる。

グラデーションツールを使用。まず「描画色から透明へ」を選択して、グラデーションレンジを調整。サンプルの画像は「終了点30%、中間点20%」。実物の写真を見ると、トンネルエフェクトで黒くなっているのは、(6センチ四方として)画面の縁1センチ程度の幅なので、グラデーションレンジは短めでいいと思う。
2枚目のレイヤーを1番上に新規に追加して、画面4角からグラデをかける。これでトンネルエフェクトのできあがり。

以上、4工程でどんな画像もホルガナイズド! フォトショップの基本操作を知っていれば10~20分くらいで完成するはず。…それよか、実物のホルガがほすぃ。

みんなでiTunes

ご好評につき、さっそく復活しました(早っ!)「きょうのiTunes」です。本日は復活スペシャルということで、視聴者の方々から広く問題を募集したいと思います。
下のコメントフォームからクイズを投稿してください。(テスト運用につき適正に動作しない場合はご容赦ください)それではどうぞ!

【出題の方法】
・ラジオボタンの「出題」を選択してください。
・コメント欄に問題を記入してください。現在1~4までの4択での出題が可能です。
・「正解を選択」から、自分の出題する問題の正解(1~4)を設定してください。
※2択、3択でも可ですが、5択やabc、イロハ、など選択不可能なはご遠慮ください。

【回答の方法】
・ラジオボタンから回答する問題の番号を選んでください。1コメントで1問にしか回答できません。
・「正解を選択」から、(1~4)を選んで回答します。
・コメント欄はご自由にお使いください。

※回答の正否は投稿時に判定されます。「出題番号」を間違えて回答しないように注意してください。
※問題が削除されると、それへの回答はすべて「不正解」となります。
※ラジオボタンで「コメント」を選択すれば、普通にコメントができます。

前2回は、心暖かい2名の方のコメントのおかげで、なんとか企画が成立いたしました。やはり、こういうコメントの少ないところで実施するには無謀な企画でしたが、今回は輪をかけて無謀な試みです。コメント欄で回答のみならず、出題もできてしまうという企画ですが、誰が出題してくれるんでしょうか…
閲覧者側からも、ある程度インタラクティブなサイトを運営することができれば、昨今話題の「CGM(Consumer Generated Media)」のようなものが実現できそうです。
[参照]Hotwired 「メディア再編時代の鍵を握るCGM」

今回のカスタマイズですが、FC2ブログのコメントには固有の番号(comment_no)があります。これを利用し、出題側は「コメント番号+正解番号」を設定。回答側が選んだ「特定の出題(コメント)番号+回答」の一致不一致で正否を判定しています。
もし、根本的にクイズサイト用にカスタマイズするのであれば、コメント関連の変数を(comment_urlとか)、出題・回答用に転用できるので、かなり複雑なこともできそうです。
現在の出題方法では、ソースを見ればクラス名などから正解はすぐ分かってしまうのですが、コメントパスと変数comment_tripを使えば(入力した文字がジャミングされるので)、クラス名から類推できない出題も可能になります。

今回のカスタマイズでは出題(先に付いたコメント)の変数が、回答(後に付いたコメント部分)の表示を制御してますが、逆も可能なので、「コメントレーティング機能」みたいなのもできるかもしれません。

postlog トリセツ

【共有テンプレート「postlog」 使用方法について】
このテンプレートは、ブログに寄せられたコメントを一覧化するための特殊な補助テンプレートです。ダウンロード後、通常のテンプレートからリンクを張って使用するもので、《このテンプレートに変更》をする必要はありません(その場合、正常に動作しません)。
コメントリストを”有効”にしないと機能しません。
管理者ページ> 環境設定の変更> ブログの設定> アドバンス設定(上級者用)> %topentry_comment_list を”有効”にする

「postlog」 の使用方法といくつかのアレンジ方法を解説します。
以下で既に解説されている項目については、重ねての説明はいたしかねます。デザインの変更・カスタマイズに制限はないのでご自由にどうぞ。カスタマイズに関するサポート・質問などは当方で請け負いませんのでご了承ください。


【使用方法】
1)
コメントリストを”有効”にします。
管理者ページ> 環境設定の変更> ブログの設定> アドバンス設定(上級者用)> %topentry_comment_list を”有効”にする

2)
現在、設定しているテンプレートから、このコメント一覧表示用テンプレートへの”入り口”となるリンクを張ります。《このテンプレートに変更》をする必要はありません。
「postlog」にはいくつかのモードがあるので、以下の中から任意のモードへリンクを張ってください。
サイドバーに”入り口”を作りたい場合は、プラグインの「フリーエリア」を追加して、以下に説明するリンクのコードを張る方法が便利です。

■新着コメント・新着トラックバックのページにリンクする
<a href="./?style2=postlog&index">新着コメント・新着トラックバック</a>
[表示サンプル]
※表示件数は管理者ページで設定された、「最近のコメント/トラックバック表示数」と同様です。

■トップページのコメント一覧を表示する。
<a href="./?style2=postlog">ポストログ</a>
[表示サンプル]
※トップページの記事にコメントがない場合は、当然コメントは表示されません。

■月別にまとめてコメント一覧を表示する。
<a href="./?date=<%now_year><%now_month>&style2=postlog"><%now_year>年<%now_month>月のポストログ</a>
[表示サンプル]

上記3つのいずれかにリンクを張ってください。

注)
■テンプレートの名前を「postlog」以外に変更すると、正常にリンクが繋がらなくなります。名称を変える場合は、html内にある「?style2=postlog」の部分も同時に変更が必要です。
■これまで書いたエントリの投稿曜日をグラフ化する、更新曜日測定モード[参照]が付属しています。
[表示サンプル]

[参考]poets #158(ほぼ同内容の解説です)


【デザインの変更の手引き】

■コメント一覧の本文の改行を有効にしたい
デフォルトではコメントリスト変数「%topentry_comment_list_body」(改行を除いたコメントリストの本文を表示)を使用しています。
HTML中の<!--▼コメント本文▼-->という注釈を探して
「%topentry_comment_list_brbody」(改行を含むコメントリストの本文を表示)に変更します。

■コメント一覧の本文の文字サイズ、行間などを変えたい
CSS中の/* コメント本文*/という注釈部を探して、クラス「.cbody」に設定された値を任意に変更します。

■配色を基本のテンプレートに揃えたい
「postlog」で背景色があるのは基本的に2個所

ヘッダ部。デフォルトではグレイです。
CSS中の/* レイアウトブロック---- */という注釈を探して、id「#sitetop」に設定された値を任意に変更します。

見出し部。デフォルトでは水色です。
CSS中の/* コメントリスト部分 */という注釈を探して、クラス「.entries」に設定された値を任意に変更します。

■更新曜日測定モードのグラフの幅を変えたい
全記事の投稿曜日をグラフ化するモードが付属していますが、運営しているブログによって総記事数が違うため、グラフの見映えがあまりよくないかもしれません。幅を変更して見映えを調整できます。

CSS中の一番最後にある/* 曜日測定 */という注釈を探して、id「#entrydays p」の「width:5px」の値を任意に変更します。

用FC2,寫部落格日誌也都簡單阿!

検索語抽出

ポップアップ・コメント

poets designed

Ajax検索
AD

台湾留学 完全サポート

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。