Posts Tagged ‘google’

Google検索でのuserContent.cssの設定やGreasemonkeyなど

Google検索は最も使うサービスの一つだと思うので、できる限り快適にしたいです。いろいろいじってたのがやっと落ち着いたので設定のメモです。

まずはGreasemonkeyから

と、このぐらいで思ったより、Greasemonkeyは入れてない感じします。
Google検索自体が結構高機能なので、そこまで機能を付け加える必要が無いのかもしれないです。(期間指定をもっと簡単にやりたいけど)
後はアドオンでGoogle Date :: Add-ons for Firefoxを入れているぐらいです。
入れている理由は最終更新日を知るためなのでちょっと関係ないかもしれないです。

次にuserContent.cssの設定。
Stylishは入れてないので直接userContent.cssに書いています。(デバッグにはuserMenu.uc.jsのCSSリロードが便利)

/* Google検索ページ
+結果欄の幅拡張
+検索バーを固定
+サイトの背景色を奇数で色分
+広告は犠牲になった
*/
@-moz-document url-prefix("http://www.google.co.jp/search"),
                 url-prefix("http://www.google.com/search"){
    /* 「もっと見る」を押さなくても、最初から全部表示 */
    .nojsb {
        display: block !important;
    }
    #tads{
        display: none !important;
    }
    #showmodes {
        display: none !important;
    }
    #mbEnd{
        display:none !important;
    }
    /* fixedSearchbar */
    #nr_container {
        margin-top: 115px;
    }
    #sfcnt {
        -moz-box-shadow:0 1px 5px #000000;
        box-shadow:0 1px 5px #000000;
        left:0;
        padding:18px 0;
        top:25px;
        width:100%;
        z-index:10;
    }
    #gog {
        left:0;
        top: 0;
        width:100%;
        z-index:11;
    }
    #gog, #sfcnt, #subform_ctrl{
        background:none repeat scroll 0 0 rgba(255, 255, 255, 0.9)!important;
        position:fixed;
    }
    #sfcnt {
        height:70px !important;
        padding-top:0 !important;
    }
    #subform_ctrl {
      text-align:right;
      z-index: 10;
      right: 0;
      top: 88px;
      min-height: 0;
      background:none repeat scroll 0 0 transparent!important;
    }
    #guser, #gbar{
          padding: 1px 0;
    }
    #gbar nobr, #guser nobr {
        line-height: 22px;
    }
    /* oddには色をつける */
    li.g:nth-child(odd){
        background:#F7F7F7;
    }
    /* 説明文を横に延長 */
    .g{
        min-width:800px;
        padding:5px!important;
        -moz-border-radius : 5px;
        border-radius : 5px;
    }
    .s {
        min-width: 800px !important;
    }

    /* RealTimeの場合横幅に必要 */
    #center_col{
        min-width:820px!important;
    }
    /*右側のbox*/
    #rtro{
        width: 800px!important;
    }
    /* 普段は隠しておいて、マウスオーバーで表示させる */
    #rhs{
        -moz-box-shadow:-3px 3px 3px #000000;
        white-space: nowrap;
        background:#fff!important;
        right: 0!important;
        top: 0!important;
        width: 15px!important;
        overflow:hidden;
    }
    #rhs:hover{
        background:#fff!important;
        right: 0!important;
        top: 0!important;
        width: 800px!important;
    }
}

Googleの設定 — Gist

今はこんな感じで、結果欄の横幅拡張、検索バーを固定、サイトの背景色を奇数で色分けなどを行っています。
スクリーンショットで見ると以下のような感じになります。

また、先ほどGoogleのTwitter検索である”Google Realtime Search”のSITEINFOをwedataに書いておいたのでかなり快適になりました。
(各種AutopagerizeでSITEINFOの更新を行えば適応されると思います)

思ったより地味ですが、こんな感じで使っています。
Google++ for Greasemonkeyを結構参考にしました。

ATNDをもっと便利にするGreasemonkey「Better ATND」

ATNDのイベントページに最寄り駅情報の表示やGoogleカレンダーの登録ボタンを追加などをするGreasemonkeyスクリプトを書いてみました。 元ネタはATND++というものがあったのですが、メンテされてなかったので自分で修正(ATND++を適当に修正したもの — Gist)して使っていたのですが、そのままだとメンテしにくかったので最初から書き直してみました。

機能としては以下のような機能が付いています。(2011-03-06)

  • 最寄り駅情報の表示
  • 最寄り駅をまとめた地図画像の表示
  • Google Calendarへの登録ボタンの追加

Googleカレンダーへの登録時には、イベントページから場所や概要などの情報も自動で入力します(説明文は長すぎるとエラーになるので300文字ぐらいで切っています)


画像でみる機能

最寄り駅情報

Google Calendarの登録ボタン

Google Calendarの登録ページ

作った(使ってた)理由としては場所を言われてもピンとこない場合が多いのと、電車が主な移動手段であることが多いので、会場がどの駅に近いのかがわかると便利です。また参加してなくてもUstや後で資料を出してくれるイベントも多いので、忘れないように気になったイベントはGoogle Calendarに登録していました。最初はブックマークレット(ATNDのイベント画面にGoogleカレンダーへ予定を登録するボタンを追加するブックマークレット – 電脳戦士ハラキリ -SE道とは死ぬ事と見つけたり-)を使ってたのですが、少し面倒になったのでGreasemonkeyにその機能を入れました。
ATNDのリニューアルでicsリンクがでて、Google Calendarで読み込む事ができるのですが、icsを読み込むと”他のカレンダー”が増えるのであんまり好みじゃないので今まで通り登録ボタンにしました。

APIは以下の2つを使っています

両方ともjsonなどいろいろな形式ではいたりしてくれるので、手軽に使えて便利です。

Better ATND for Greasemonkey
http://userscripts.org/scripts/show/98456
better_atnd at master from azu/Greasemonkey – GitHub
https://github.com/azu/Greasemonkey/tree/master/better_atnd

ブラウザの最新情報を知るために、Web開発者が読んでおくべきブログ

JavaScriptやWeb開発に興味を持っている人はブラウザ周りの新しい情報も知っておくと良い場合も多いです。
なのでブラウザ周りに絞ってブラウザ別のブログなどを紹介。

Internet Explorer(IE)

Mozilla(Firefox)

  • Bit Stampede
    MDCの更新情報を書かれています。
    Firefoxの最新情報が把握しやすいので是非購読しておくといいです。
  • A Better Project@はてなダイアリー
    MDCのローカライズ情報を書かれています。
    MDC-ja 通信など最近の起きたことが分かりやすいです。
  • Mozilla Hacks – the Web developer blog
    Mozillaについてだけではなく最新の技術などについても扱っているのでとても重要です。
  • Mozilla Flux
    Firefox/Mozillaについてについて、幅広い情報から書かれているブログ。
    情報をしっかり取り込んでから書かれていると思われるため、内容も深いものとなっていてとてもいい。
    筆者id:Rockridge のはてなブックマークもおすすめです。
  • Mozilla Developer Street (modest)
    “Mozilla 関連の開発者や利用者が集まり 知識・アイディア の共有とコミュニケーションの場”
    アドオン開発者向けの情報やMozilla Add-ons Blogの翻訳記事などが掲載されています。
  • Mozilla Japan ブログ
    名前の通りです。
  • MozillaZine.jp
    Mozilla関係のリリース情報を扱っています。
  • Scene Side B
    Firefoxのリリース情報やbug fixの情報を書かれています。
    どのような変更が行われたかがまとめて見られます。
  • Firefox Hacks 翻訳日記/ウェブリブログ
    Mozilla WikiなどからのFirefoxについて情報を書かれています。
  • もずはっく日記 – WebStudio
    “Mozilla Japanのプロダクトへの貢献を中心に書いています”
    最近はIME周りのお話が多いです
  • alice0775のファイル置き場 – Yahoo!ジオシティーズ
    Friends of the Treeに掲載されるほど多くの貢献をされている方です。
    bugzillaの情報をメインに載せています。またuserChrome.jsスクリプトを多数書かれていることでも知られています。
  • @dynamitter
    Mozilla Japanの浅井さんのアカウントです。
    Firefoxだけではなく、W3Cなどの仕様に関しての情報も多いので参考になると思います。

他にもMozilla本家にはセキュリティとかいろいろブログがあったと思います。
(なのでちょっと本家の方は省き気味です)

Webkit系(Chrome,Safari)

OperaはきっとOperaを愛する人がやってくれるはずです…
追記: Opera版 Operaの最新情報を知るために、Web開発者が読んでおくべきブログ – あまたの何かしら。

その他

いろいろなサイト(主にブログ)を乗せましたが、一個づつRSS購読するのは面倒だという人は、LDRならこのページのリンクをまとめて購読する機能があるのでそれを利用するといいですよ。

まとめて購読機能は、リンク集から一括登録できて便利 – livedoor Reader 開発日誌

おまけ

Planetシリーズ
原点はよくわかりませんが、様々なFeedを集めてまとめたアグリゲートブログのようです。
(ちょっと強欲すぎるので、Planet Chromiumのような公式系でまとまったもの以外は破綻する感じがします)

etc..

おわり

他にこのブログ忘れちゃだめだなどのご指摘があったらお願いします。

Google Tasksをサイドバーに表示するボタン作ってみた

Custom Buttonsで、Google Tasksをサイドバーに表示するボタンを作ってみました。
いつもはGoogle の公式 ToDo リスト ガジェットを使ってサブのTodoしてGoogle Tasksを使っています。
操作が軽快でツリー上にTodoを書いていけるので直ぐに消化するタイプのTodoに向いていると思います。

上記のボタンをクリックしてインストールできます。

アイコンはGoogle TasksのFluid用アイコン作った – ( ノ・ω・)ノ⌒○・。から拝借しました。

サイトの最終更新日をステータスバーに表示するアドオン「Google Date」

よくTwitterやSBMなどからURLに飛んで、それが書かれたのが結構昔だったりして誤解を生むことがあったりします。
なのでそのサイトの最終更新日を直ぐに確認できるようにした方がいいのですが、意外と日付が書いてないサイトも多いです。
そこでGoogle Dateを使うと、Googleのクロールによる更新日をステータスバーに表示することができます。

元々はGoogle検索の結果に日付を表示するアドオンだった気がしますが、いつの間にかサイト内でも更新日を表示する機能がついていました。

一応、仕組みの方が気になったのでコードを見てみると

doGetDate: function() {
    var doc = gBrowser.selectedTab.linkedBrowser.contentDocument;
    if (doc.location.href != "about:blank" && doc.location.href.match(/^http:\/\//i)) {
        if (typeof this.reqUrl[doc.location.href] != "undefined") {
            document.getElementById("googledateStatusDate").value = this.reqUrl[doc.location.href];
        } else {
            var uri;
            if (this.reqCnt % 2 == 0) {
                uri = "http://www.google.co.jp/search?num=1&tbs=qdr%3Ay15&q=site%3A" + encodeURIComponent(doc.location.href);
            } else {
                uri = "http://www.google.com/search?num=1&tbs=qdr%3Ay15&q=site%3A" + encodeURIComponent(doc.location.href);
            }
            this.reqCnt++;
            var httpOj = new XMLHttpRequest();
            httpOj.open('GET', uri);
            httpOj.onreadystatechange = function() {
                if (httpOj.readyState == 4 && (httpOj.status == 200 || httpOj.status == 304)) {
                    var str = httpOj.responseText.match(/<span class="f std">.*?<\/span>/i)[0].replace(/<\/?[^>]+>/gi, "");
                    document.getElementById("googledateStatusDate").value = str;
                    googleDateHttpRequestObserver.reqUrl[doc.location.href] = str;
                }
            }
            httpOj.send(null);
        }
    }
}

site:http://efcl.info/2011/0218/res2272 – Google 検索みたいな感じでサイト内検索の検索結果から日付部分を正規表現で切り取ってる感じでした。
Googleにクロールされてないサイトでは日付取得ができませんが、日付の精度自体は使ってて問題ない感じになること多いのでとても便利です。

Google Date :: Add-ons for Firefox
https://addons.mozilla.org/ja/firefox/addon/google-date/

Google検索のインスタント プレビューを有効にする検索プラグイン

Google インスタント プレビューというGoogle検索でサイトのスナップを見せてくれる機能ができたので、それをデフォルト有効にした検索プラグインです。(多分一度ここから有効にすればクッキー消すまで維持されると思うけど)
Google インスタント プレビューの説明自体はこちらに

ブラウザの検索エンジンに追加する検索プラグインは下から

URLに特定のパラメーターを付加することで機能が有効になるようです。(上の検索プラグインはちょっと自分仕様が入ってるので適当に変えて下さい)
以下それぞれのオプションのメモ。
Google SEOをマスターしたい人に贈る検索結果のパラメータ一覧 » SEO Japanも併せて。

esrch=instantpreviewsインスタント プレビューの有効
prmdo=1サイドバーのサービスのもっと見るをオープン
tbo=1

サイドバーのもっとツールを見るをオープン

Google検索はシンプルに見えてかなり機能豊富なので便利に使いましょう。

GoogleのJavaScriptコーディングスタイルチェッカー「Closure Linter」

GoogleではJavaScriptは特定のコーディングスタイルで統一されるようにClosure Linterという専用のスクリプトを使用しているそうです。
Google JavaScript Style Guide(Google JavaScript Style Guide 和訳)という規則に従ってjsのコードは書かれていて、その規則に沿っているかを確認するgjslintとその規則に合うように修正するfixjsstyleからなるスクリプトです。

インストール方法

How to Use Closure Linter – Closure Linter – Google Code
pythonで書かれているのでeasy_installを使ってインストールします。
まずはPythonをインストールしてなかったらインストールして、次にeasy_installコマンドを使うためにsetuptoolsを自分のPythonにあったものをインストールします。
WindowsならC:\Python26\Scriptsに環境パスを通せば、コマンドプロンプトからeasy_installが使えるようになるので、

> easy_install http://closure-linter.googlecode.com/files/closure_linter-latest.tar.gz

と打ってたらインストールできます。(パス通してないならC:\Python26\Scriptseasy_install でも大丈夫)

*注意 (修正済み)
現在配布されるやつはfixjsstyleがTypeError: ‘NoneType’ object is unsubscriptableのようになって動かないので、

easy_install -Z http://closure-linter.googlecode.com/files/closure_linter-latest.tar.gz

という感じでファイルを展開するオプションをつけてインストールしてから、/python2.6/site-packages/closure_linter-2.2.1-py2.6.egg/
closure_linter/fixjsstyle.py の36行目にargfとなってるtypoがあるのでそれをargvにすれば動きます。

使い方

使い方は単純でHow to Use Closure Linter – Closure Linter – Google Codeを見ると分かりますが、

gjslint path/to/my/file.js
fixjsstyle path/to/file1.js path/to/file2.js

のようにファイルやディレクトリを指定して実行するだけです。
–strictオプションやディレクトリに対してまとめてやる再帰オプションもあります。またGoogleのコーディングスタイルではJsDocを使う事になってるので、それを無視するオプションもあります。

fixjsstyleはE4Xとか特殊なものは認識してないっぽいので無理に書けると構文エラーを出すようになったりしますが、
Googleのコーディングスタイルはそこまで特殊ではないので、ちょっとした確認に使えたりして便利です。
JavaScriptの整形にはOnline javascript beautifier(これ自体がJavaScriptで書かれているのでEmeditorやNILScriptで動かせるgist: 453042 – クリップボードのJavaScriptコードを整形してクリップボードに返すNILScript – GitHub)とかと併用すると面白いかも。

Introducing Closure Linter – Closure Tools Blog
http://closuretools.blogspot.com/2010/08/introducing-closure-linter.html

Google Web Historyに見たページを自動記録するアドオン(Jetpack SDK)

GoogleにはGoogle – ウェブ履歴というものがあり、検索してどのページを訪ねたかなどが記録されています。
またその記録は検索ページで既読リンクの色にするなどの判定にも使われています。
Google検索から訪ねたサイト以外のURLもウェブ履歴に登録するFirefox拡張機能を作成してみました。
既に

などGreasemonkeyやTomblooパッチなど代わりになる手段は山ほどある気がしますが、Jetpack SDKを使いたかったのと、意外にもFirefoxアドオンとして同じ役割するものが見つからなかったので作ってみました。

他のスクリプトとの違いは大して無いと思いますが、できるだけ無駄な送信を控えるようにしています。

  • 最近訪れたサイトは重複送信しない(100件ぐらいでクリアされます)
  • https://はホストのみを送信
  • ローカルやIPアドレスベースのURLの場合は送らない

ダウンロードはAMOからできるようにしてあります。
Firefoxアドオンのxpiを簡単における場所が無かったので、AMOに登録しておいてあります。

Jetpack SDKでコンパイル?前のソースコードはこちらに

Jetpack SDKで何か作るには

Jetpack SDKで既に3つほどアドオンを作成していますが、0.5だとJetpack prototypeとできることはそこまで変わってないです。(prototypeのギャラリー無くなったみたいですね。8個ぐらい作った気がする)
Jetpack SDKで作る上で参考にしたのは

最後のJetpack SDK Docsはcfx docsで開いて、jetpack-coreあたりに現在使えるAPIが載っているのでそれを見て使い方を調べるとAPIの使い方は分かる感じ。(Jetpack prototypeの頃よりはドキュメントにサンプルもあってマシになりました)
一番ハマるところはcfxとかコマンドでエラーがでるとかその辺だった気がする。
環境はWindows Vistaです。
cfx testallすら通らない場合は-aとか-bオプションを指定してみるといい。 Jetpack SDK 0.4でcfx testallを成功させる方法 (windows) – Cherenkovの暗中模索にっき
毎回オプションを付けるのが面倒になったらlocal.jsonを作りデフォルト値を決めてみましょう。
自分はjetpack用のプロファイルを作りそれを指定してます

{
  "configs": {
    "default": [
      "-a", "firefox",
      "-b", "C:\\Program Files\\Mozilla Firefox\\firefox.exe",
      "-P", "%appdata%\\Mozilla\\Firefox\\Profiles\\h545wqkn.jetpack"
    ],
    "ff37": [
      "-a", "firefox",
      "-b", "C:\\Program Files\\Mozilla Firefox 3.7\\firefox.exe",
      "-P", "C:\\Users\\admin\\AppData\\Roaming\\Mozilla\\Firefox\\Profiles\\testuser"
    ]
  }
}

package.jsonを作り、libフォルダを作りmain.jsを書いて → さあcfx runで起動しようとしたら、まずはpackage.json内にidが自動生成されます。そしてもう一度cfx runすると下のようなエラーが出てくることがあります。

Traceback (most recent call last):
  File "D:\jetpack\bin\cfx", line 6, in 
    cuddlefish.run()
  File "D:\jetpack\python-lib\cuddlefish\__init__.py", line 475, in run
    include_dep_tests=options.dep_tests
  File "D:\jetpack\python-lib\cuddlefish\packaging.py", line 267, in generate_bu
ild_for_target
    add_dep_to_build(dep)
  File "D:\jetpack\python-lib\cuddlefish\packaging.py", line 254, in add_dep_to_
build
    add_section_to_build(dep_cfg, "lib", is_code=True)
  File "D:\jetpack\python-lib\cuddlefish\packaging.py", line 232, in add_section
_to_build
    validate_resource_hostname(name)
  File "D:\jetpack\python-lib\cuddlefish\packaging.py", line 65, in validate_res
ource_hostname
    raise ValueError('invalid resource hostname: %s' % name)
ValueError: invalid resource hostname: jid0-英数字-フォルダ名-lib

これはpackage.jsonのnameに大文字やマルチバイト文字やスペースなどが含まれていると出てきます。(んなの分かるか)
なので小文字英数とハイホンあたりでnameを決めておきましょう。

console.logはコマンドプロンプトの方にでてくるので、それを使って(他に何かあるのかなー)デバッグしながらmain.jsなどを完成させて、xpiをcfx xpiコマンドではき出せば完成です。
まだ設定画面やパネルなどのGUIが簡単に使えなかったりしますが、用途が合えば簡単にアドオンを作成できるのでなかなか面白いです。

Google WebHistory Updater :: Add-ons for Firefox
https://addons.mozilla.org/ja/firefox/addon/213956/

Googleのマルチアカウント機能を有効化する方法

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使わなくてもいいのでとても便利。

WordPressのパーマネントリンクを記事タイトルを英単語に翻訳したものにするプラグイン

ややこしいタイトルですが、Wordpressのパーマネントリンクには記事タイトルを元にした投稿スラッグを入れることができるので、日本語の記事タイトルだと日本語がそのままURLになるためあまり見栄えが良くありません。
そこで、記事タイトルを自動翻訳して英単語に直してからそれを投稿スラッグにするというプラグインを作ってみました。

これをダウンロードしてpluginフォルダにいれて有効にすると投稿スラッグが自動的に翻訳された単語を-でつなげたものになります。
具体例)
WordPressインストール後にまずやること
という記事タイトルだった場合は
first-things-to-do-after-installing-wordpress という感じへ変換されます。(Google翻訳)

wordpressで投稿の際のslugを英語だけに自動でする方法 – sugarbabe335
http://d.hatena.ne.jp/sugarbabe335/20081218/1229609082
プロフィール: azu(アズ)
Firefoxの事やソフトウェアの紹介や使い道、Greasemonkeyの作成
  • OS:Windows Vista, 7
  • ブラウザ:Firefox
  • Twitterのアカウントはこちら
  • azu_re
  • メールアドレス(Twitterの方が確実)
  • info@ドメイン名
リンク

WebMoney ぷちカンパ