Web scratch

Archive for the ‘webサービス’ Category

ずっとメインで使っているTwitterブラウザクライアントのtwicliの設定メモ

twicliはブラウザで動くのでUnified Sidebarを使ってサイドバーに縦置きタブバーと一緒に表示しています。
サイドバーへの表示はブックマークは面倒なのでCustom Buttonsのボタンとしておいています。

twicli

次はCSSの設定、CSSは基本的に最小限で無駄なものを消したりするぐらいです。

.uname{
    display:none;
}
#counter{
    font-size: 9pt!important;
}
/* Removeボタン */
#user_info > input{
    display:none;

}
/* shortcut.js */
.selected {
    background-color: #DDD !important
}

Removeボタンを消してるのはプラグインの関係で誤爆を防ぐためです。(通常は確認ダイアログがでるので誤爆しないかな)
次にプラグインの設定

ssl.js
regexp.js
lists.js
shortcutkey.js
search.js
search2.js
followers.js
shorten_url.js
resolve_url.js
translate.js
scroll.js
thumbnail.js
geomap.js
tweet_url_reply.js

https://gist.github.com/510112.txt#multi-users.js


https://gist.github.com/567983.txt#twicli_post_canceler.js


https://gist.github.com/655300.txt#switchViewedSearches.js

data:text/javascript,var fst=$('fst');fst.focus=fst.select=confirm=Array;

URLじゃないの部分はデフォルトのプラグインなので説明を省きますが、最後の4つが使ってるプラグインです。

• multi-users.js

一度タイムラインを表示したことのあるユーザーのタイムラインを簡単に再表示するプラグイン

• twicli post canceler.js

ポストをした際に5秒以内なら中止できるボタンを出す

• switchViewedSearches.js

ハッシュタグや検索結果のタブを一つのタブにまとめる。
サイドバーで使うと狭いので、まとめるために使ってる。

最後のデータスキームURIとなってる部分はわざわざjsファイルとして読み込ませるほど長くはないので直接書いています。

data:text/javascript,var fst=$('fst');fst.focus=fst.select=confirm=Array;

これは、twicliはデフォルトだとポスト後に入力フォーム(fst)へのフォーカスしてしまって、サイドバーで使っているとフォーカスが奪われるのでかなり邪魔になります。なので、focusやselectを潰して、またRTなどで確認ダイアログが面倒になっているので同じように潰しています。(Removeボタンも確認ダイアログがなくなるので、RemoveボタンはCSSで非表示にしています)

他のTwicliプラグインはtwicli plugins – GitHubにまとめられているそうです。

Pickup Patternはそこまで使ってないでの省略。

twicliはJavaScriptで拡張できて、ブラウザで動くのでどこでも使える感じで便利。
みんなもっと設定公開するといいよ

twicli – A Web Browser-Based Lightweight Twitter Client

http://www.geocities.jp/twicli/

自分が書いたJavaScriptのコードスニペットに対してどのコードが早いのかベンチマークを比較することができるWebサービスであるjsPerfの紹介と使い方。JavaScriptでは同じ機能を実現するための方法は様々であり、どのコードが優れているのかを調べる方法としてプロファイラなどを利用することがあります。しかし、JavaScriptはブラウザ毎によっても速度が変わることが多いため、ブラウザ依存のツールだと比較しにくくなるため、ブラウザ上でテストコードを実行し、それらのベンチマークを簡単に記録、比較できるサービスがjsPerfです。

jsPerfの比較方法

jsPerfの内部ではBenchmark JSというベンチマークライブラリが使用されています。(jsPerfの運営者が作成している)
jsPerfの計測方法は一定時間内にどれくらいコードスニペット部が実行できたのかで比較します。そのため数値が大きいほどパフォーマンスがよい(=一定時間で多く実行できる)となります。
ブラウザ固有のテストやライブラリを読み込んでのテストも行うことができます。

使用方法

http://jsperf.comにアクセスします。
過去に他のユーザーが比較した結果はBrowse test cases · jsPerfから見ることができます。
Googleのsite:検索を使って事前に行おうとしている比較があるかを検索するといいかもしれません。
(join vs concat site:jsperf.com – Google 検索みたいな感じで)

ユーザー情報の入力(Your details)

ユーザー情報の入力部

これは任意ですが、名前やメールアドレス(Gravatarを利用したアイコン表示のため)やサイトURLを入力することができます。
ユーザー名が入力してあった場合はhttp://jsperf.com/browse/<USERNAME>.atom というURLからRSSを見たり、過去に比較したものも一覧できるのでユーザー名は入れた方がいいです。
Publishedのチェックを外すことで非公開でテスト行うことができます

テストケースの情報(Test Case Details)

テストケースの情報

この部分はテストケースのタイトルや説明などを入力する場所です。
後で見た人が何のテストなのかわかるように書いておくといいです。slugはタイトルから自動で入力されますが任意で決めることもできます。

事前準備のコード(Preparation code)

事前準備

Preparation code HTMLには必要なライブラリを読み込むScriptタグやDOM操作が関係するテストならDOMを書いておけます。
Preparation code JavaScriptにはテストで使うJavaScriptコードで事前に書いておけるもの(共通して使うなど)を書いておけます。

テストケースの入力(Code snippets to compare)

テストケースはタイトルをコード部分を入力できます。デフォルトは2つ入力する場所がありますが、Add Snippet Codeから増やすこともできます。テストケースのコードを入力する際に気をつけるべきことは、テストコードにテストと関係ないループ文などを含めないことです。
jsPerf側でテストケースのブロック毎に繰り返し実行するため、テストコード内のループ文がテストの本質と関係ない場合は含めない方がいいです。

これで入力は終わりで後は実行して結果を見るだけです

実行して結果を見る

テストページにあるRun Testボタンからテストを実行することができます。
Tipsとしてテストページの最後に#runと付ければボタンを押さずに自動的にテストが実行されます。

Tumblrをブログとして使うためにやるべき事

投稿用サブブログを作成

Tumblrはメインブログと、Create tumblelogから改めて作成するサブブログと分かれていて、メインブログは共同更新ができない感じになっています。なので、今後そういう可能性があるならばCreate tumblelogから改めてtumblelogを作成します。

【連載】『Tumblr』のおさらい (12) 複数人でTumblelogを共同更新してみる | ネット | マイコミジャーナル

ドメイン

Tumblrは独自ドメインが使用できます。
特にドメインの制限はないので、DNSレコードでTumblrのIPアドレスを振って、「Info」 メニューの一番下にある 「Use a custom domain name」 にチェックして取得したドメインを設定するだけでOKです。
(別にドメインを持ってなくてもドメインを指定できてしまい、誰かが指定してあるとそのドメインは他の人が指定できないといういたずら要素が存在してる…)

• 独自ドメインで Tumblr を使う | WWW WATCH

テーマ

Tumblrは元からテーマがいろいろと用意されているので、それらを見本にしていじるのが手っ取り早いです。
TumblrのテーマはHTMLの構造を自由にいじれるので、比較的自由度は高めだと思います。
ただし、Tumblrサービスで共通したHTML構造にならないという意味でもあるためAutopagerizeが動かないページも多いです。
Autopagerizeが動かないと鈍器で殴られるので下を参考に対応しましょう。

• Autopagerizeが動かないtumblrなんて… – otsune tumblr まとめサイト 画像保管庫Q

SEOやアクセス解析や検索

まずはブログとして使うと外部からのリンクも多いと思うのでアクセス解析を入れます。
多分多くのテーマに{block:IfGoogleAnalyticsUACode}というGoogle Analyticsのブロックがあると思うので、それを消してから
</head>の前に次のようなGoogle Analyticsの非同期コードを仕込んでおきます。
{text:Google Analytics UA Code}という部分は設定のApperenceタブにUA-xxxxxと入力する場所があるので、そこで設定した値に置き換わります。またこの非同期コードはheadセクション内に存在しないと機能しないことに注意してください(</body>前とかはダメ)

• 設定の確認 – Analytics ヘルプ

{block:IfGoogleAnalyticsUACode}
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', '']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
{/block:IfGoogleAnalyticsUACode}

Google Analyticsの非同期コードを入れたついでにGoogleウェブマスター ツールでsitemap.xmlを登録しましょう。
使ってるTumblrのURLを追加して、所有者の確認で”Google Analytics アカウントにリンク”を選べば簡単に登録できます。(非同期コードを仕込んでいる必要があるので、他の方法でも可能)
サイト設定→サイトマップから”サイトマップを送信”でサイトマップのURLを追加します。
サイトマップのURLは http://site.tumblr.com/sitemap.xml に自動的に生成されていると思うのでそれを指定します。
検索エンジン対して優しくなるように設定のAdvanecedでインデックスの許可やユーザーフレンドリーなURLにするなどの設定を見ておくといいでしょう(デフォルトであんまり問題無かったけど)

• 4 Tumblr SEO Tips – Jauder Ho – tumblr, seo, sitemap, – links and things
• tumblr. note4 tumblrの４つのSEO対策 – 花あそびエコブログ (上の訳)
• tumblrがgoogle sitemaps対応になってた « ku
• SEO on Tumblr Blog | SocialBlogr

最後に検索について

Tumblrの検索は日本語が通らない(タグでは通る)ので、何かしらの代用手段が必要になると思います。

• Tumblrで日本語検索をするいくつかの方法 – conflict error

これを打破するためにTrunk.lyというサービスを利用します。Trunk.lyはTwitterやRSSからリンクを取り込んで検索する事ができるサービスです。検索対象にしたいTumblrのRSSを取り込めば、取り込んだ時点からの内容は検索が可能になります。日本語も通るかつ、記事中に出てきたリンク先も解析対象にするため検索の取りこぼしは少ないです。

Tumblrをブログとして使うメリット

Tumblrはブログシステムとしても機能が十分にあり、他のブログシステムとは違ってReblogやLikeと言ったコミュニケーション機能が存在します。そうした反応を作りやすい仕組みになっているため、ブログより更新の障壁は低くなるかもしれません。
WordPressといった高機能なブログエンジンもありますが、無料で手軽に利用できるTumblrは選択肢としてあっても良いかもしれません。

• tumblrはブログツールとしてもオススメ : web-g.org

【連載】『Tumblr』のおさらい | ネット | マイコミジャーナル

http://journal.mycom.co.jp/series/tumblr/menu.html

USTREAMであるユーザーの録画済み動画をRSS購読したいと思ってRSSのURLを探したら存在したのでメモ。

http://www.ustream.tv/user/USERNAME というUSRNAMEの人のRSSは
http://www.ustream.tv/USERNAME-videos.rss というのがRSSになっているみたい。

たとえば、W2C_LIVEならW2C_LIVE の動画というのがRSSになって購読できる。

しかし、なんでこんな隠し要素みたいになってるんだ。

GmailやGoogle CalendarなどGoogleのサービスを、複数のアカウントで同時に使えるようになるMultiple Sign-In機能がリリースされたようなので使って見ました。
現在は以下のサービスでマルチアカウントがつかえるようです。

• Calendar
• Code
• Gmail
• Reader
• Sites

有効化する方法はEnabling multiple sign-in : Getting started – Accounts Helpに書いてあります。
簡単に有効化する手順を書くと

1. アカウント情報を英語のインターフェースにする。
   英語にしないと有効化できてないような気がします。
   自分はiGoogle の設定から言語をEnglishにすることで変更できました。
   
2. multiple sign-in settings page へprimary(主)となるアカウントでアクセスする
3. 有効化を選んでチェックボックスに全部✓をいれてSaveする(この状態だと英語の説明文がでますが)
   既に日本語訳もあったりしました。
   
4. Saveしたら一度Googleからログアウトします。
5. Google Readerなどのマルチアカウントが使えるサービスにログインし直すと、右上のアドレス部分に▼がついてので、そこから”別のアカウントでログイン”をクリックすると別のアカウントでもログインでき、一度ログインすれば切り替えも同じ所からできます。
   

Multiple Sign-Inは複数のアカウントの切り替えが簡単というだけじゃなくて、同時に複数のアカウントでログインできるので2つのタブで2つのアカウントを同時に使うなどが行えます。

人によってはまだ使えないかも知れません。Gmailが上手くできなかった…
でもGoogle Account Multi-Login for Greasemonkey みたいなGreasemonkey使わなくてもいいのでとても便利。

pixivはiPhoneアプリを出したときにiPhone用のAPIを用意してるのでちょっとそこからのメモ。

Read the rest of this entry »

前回Gitを導入できたのでどのように使うのかをメモっておく。

Gitを始めるまでにやったことのまとめ | Web scratch

http://efcl.info/2009/0919/res1311/

レポジトリのclone

gitでforkなどを経験してみた(またはwassr2twitterを導入) – ただのにっき(2009-05-14)

http://sho.tdiary.net/20090514.html

gitで他人のレポジトリをcloneするには”fork”ボタンを押してforkをする必要がある。
そうしたらこんな感じでYour Clone URLというのが表示されるので、そのコマンドを実行すればローカルにcloneできる。

depthを決めることでリビジョン(今までにコミットされた更新履歴)の深さを指定できる。
ここでcloneしたもののpush先は自分のレポジトリが設定されているので、自由にpushできる。
元々のレポジトリの管理者に自分のパッチを取り込んでもらうなら、自分のリポジトリページから「pull request」をおしてリクエストするという仕組みらしい。

他人とのやりとりは以下のが参考になる。

アリスとボブのコラボレーション、gitをちゃんと理解したい！ – ザリガニが見ていた…。

http://d.hatena.ne.jp/zariganitosh/20080908/1220881938

iPhone: What’s on Yours?

iPhoneのアプリランキングです。
ポイント制と結構コメントがついてるので、いろいろ参考になりますね。

まだ未購入ですが、ランキングの中では Evernoteはかなりいいアプリだ。
普段からEvennoteを使用していますが、PCとの同期が簡単できるスクラップサービス(ソフト)で、iPhoneである特性を生かして、音声も保存できるからかなり魅力的。

今はネガティブキャンペーンがはやっていますが、iPhoneの購入には自分との対話をすれば、自ずと決まるので風評に流されるべきではない。

del.icio.usというソーシャルブックマークサービス自体は日本でもユーザーは多く、利用者も結構いるだろう。

Favthumbsはアカウント毎にブックマークをビジュアライズして見ることができるWebサービスだ。
基本的にはサイトのスクリーンショットを並べて表示してくれる。
GridモードとCarouselモードがあり、二種類の視点で見ることができる。

Gridモード
右上のスライダーでサムネイルのサイズを動的に変化させる事ができる。

CarouselモードではiTunesのようなカバーアート表示ができる。

意外とさくさく動くのでおもしろい。
スクリーンショットはThumbshots.comのサービスに依存しているので表示サムネがないサイトもある。

秋元@サイボウズラボ・プログラマー・ブログ: favthumbs – ブックマークのビジュアライズによると
自分のブックマークでないものもアカウントさえ知っていれば見られるそうだ。

EvernoteはWebアプリケーションとローカルで実行できるソフトウェアの二種類があり、どちらも優れたスクラップツールです。(メモ帳)
G

Webアプリケーションはブックマークレットなどを使用して選択した範囲やページ全体をスクラップし、タグ付けなどをして保存できます。
今はBETA版なので認証まで数日かかるのと使用容量は100MBです。
登録者は20人まで招待することができます。(自分の招待券は余ってます)
使用感的にはGoogleノートブックに近い感じだけど、タグの付けやすさなどはこちらの方が楽に感じた。

またMOONGIFT: » はじめよう！デジタル・スクラップ「EverNote」などで言われていた日本語が入力できない問題は解消ずみで現在では日本語でも問題なく利用できます。

ソフトウェアの方は誰でもすぐに利用ができるようになっています。
ソフトウェアも同じようにウェブ上のものをスクラップしてタグ付けなどで管理できます。
オンラインのサービスとの自動同期機能もあるので、どこからでも利用できる環境を作れるのもいいところ。
ローカルにファイルを保存する、分表示などもオンラインのものより早いです。

works4Life season V » Blog Archive » EverNote、ちょっといいかもよ。

にまとまった情報や使用感などが書いてあり参考になりました。

ページからソフトウェアにスクラップするにはFirefoxだとアドオンが配布されているので、それを使うと簡単にできるようになっていて、画像や文字を選択して切り取って保存したものをソフトウェアで編集したりと、メモ帳の機能を持つものでもかなり使い勝手のいいものだと思います。

Firefoxのアドオンからスクラップする様子。

Remember everything. | Evernote Corporation

http://www.evernote.com/