PDFの一部のページを別の PDFとして保存する方法

PDFファイルの一部のページだけ保存する。 - Yahoo!知恵袋

Google Chromeの印刷機能で出力をプリンターでなくPDFにできることを利用する。
なるほど。

画面をキャプチャするブラウザのプラグインいろいろ

ブラウザで表示している画面のスクリーンショットを撮るプラグインのメモ。

• IE （ツールバー）
• キャプチャー イット！ツールバー
• 画像形式はJPEGのみ
• スクロールするようなページでのページ全体のキャプチャが遅い
• Firefox （アドオン）
• Pearl Crescent Page Saver
• スクロールするようなページでのページ全体のキャプチャが速い（画面をスクロールせずにキャプチャする）
• Google Chrome （Extension）
• Screen Capture
• Google製
• 英語版のみ
• Webpage Screenshot

いずれも、Flashの領域もキャプチャできたし、画面全体をスクロールしてキャプチャする機能もあった。

画像形式は「キャプチャー イット！ツールバー」はJPEG、それ以外はJPEGかPNGから選べる。

Google Chromeの2つは、キャプチャ直後に新しいタブが開き、そこでキャプチャした画像の編集ができる。そのまま1クリックで印刷もできるので、画面イメージを印刷する用途には便利。
でも逆に、ファイルとしてどんどん溜めていきたい場合には毎回タブで開くより「キャプチャー イット！ツールバー」のように黙々とフォルダに画像ファイルを保存して行ってくれた方が便利かも。（「Screen Capture」の方は、設定でそうすることもできる。）

Chromeの「Screen Capture」以外は日本語化されていた。


ブラウザのプラグインではないけど、JTrimは画面キャプチャから画像の加工までできて便利。

各ブラウザのconsole.log()実装状況

Firefox以外のモダンブラウザは、標準で装備していた。

ブラウザ	調査した バージョン	ログの表示方法	その他
IE	8	ツール ↓ 開発者ツール ↓ 「スクリプト」タブ	IE8以降で搭載。 String型にCASTされて出力される。 （Objectの中身は見られない。）
Firefox	6.0	アドオンのFirebugを使う
Chrome	11.0	ツール ↓ JavaScript コンソール ↓ 「Scripts」タブ
Safari	5.1	ページのメニューボタン ↓ 開発 ↓ JavaScriptのデバッグを開始 ↓ 「コンソール」タブ	Windows版で確認。
Opera	11.50	Operaボタン ↓ ページ ↓ 開発者用ツール ↓ Opera Dragonfly	バージョン11から搭載。 ObjectやArrayの中身は見られない。 CSS等のエラーとごっちゃに出るので見辛い...

所感

• SafariやOperaはコンソールの表示方法が分かり辛い。
• IEやOperaはObjectの中身を見られない（Operaは配列の中身も見られない）ので使い辛い。
• Operaは他のエラー（CSS等）と一緒に出力されるので見辛い。

参考

• JavaScriptでのデバッグ法 | Lifelog of nabsan_jp | nabsan_jp
• Loox Uと初音ミクで行こう！: Opera Dragonflyが始まっていた
• 第二回 関西アンカンファレンスに来ている(午後編 - tyoro.exe

Twitterで情報収集するための便利ツールまとめ

Twitterで情報を集める上で便利なツールを集めてみた。

• Advanced Twitter Search
• Twitter自身によるTwitter Searchの詳細版
• 要はTwitter Search Operatorsを使いやすいようにフォームにしたということか
  
• キーワードはもちろん、発言者や言及先のユーザー、ユーザーの場所などいろいろ検索オプションがある
• ユーザーの場所については、実は主にユーザーのプロフィールに書かれている場所からジオコーディングして取得してるだけなので結構間違ってたりする
  
• OR検索は小文字の「or」ではなく大文字の「OR」なので注意
• URLで検索すると、短縮URLは短縮前のURLで検索してくれる
  
• 検索結果をRSSフィードで購読できる
  
• Twitter本家からリンクしていないのはなぜ？
• Google リアルタイム検索
• Twitter等へのPOSTをリアルタイムで検索できる
• Googleだけあって検索能力はTwitter Searchよりも強力
• 例えば語句の揺れ（ひらがな⇔カタカナ、日本語⇔英語、タイプミス、等）に強いとか
  
• 検索対象にFacebook等が加わったらしいけど、いまだに日本ではTwitterが独占状態
• なんでも速報 Tweets on the Map
• Googleリアルタイム検索の地図版
• お天気専門の天気速報も
• ホームページのつぶやき見える君（仮）
  
• ブラウザで表示中のページのURLを含むTweetを表示してくれるChrome拡張 & Firefox用Greasemonkey
• 短縮URLでも拾ってくれる
  
• Twitter Streaming API
• Twitter等へのPOSTをリアルタイムで取得できるAPI
• 通常は取得できる内容に制限がある
  
• 制限なしで全Tweetを取得できるStreaming APIの「Firehose」の提供先にdocomoが加わったのは記憶に新しい
• APIなのでプログラムができないと使えない
  
• キーワードを指定しての取得は、日本語には対応していない
  
• 解説（英語）：Streaming API Documentation | dev.twitter.com
• PHPでTwitter Streaming APIを使って特定のキーワードを追跡する例：P2_Service_Twitter
  

Google Font APIはどうやってマルチブラウザ対応しているのか

WebFontsを読み込む場合のCSSの書き方はブラウザごとに異なるため、こんなsyntaxを使う必要がある。
しかし、Google Font APIで読み込むCSSをではそんな書き方はしていない。
そこで、試しにTangerineのCSSを各ブラウザで読み込んでみて、Google Font APIがどのようにマルチブラウザ対応をしているのか調べてみた。


IE 8

@font-face {
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: normal;
  src: url('http://themes.googleusercontent.com/font?kit=HGfsyCL5WASpHOFnouG-RPY6323mHUZFJMgTvxaG2iE');
  src: local('Tangerine'), url('http://themes.googleusercontent.com/font?kit=HGfsyCL5WASpHOFnouG-RD8E0i7KZn-EPnyo3HZu7kw') format('woff');
}

URLはIE専用。
2行目のsrcはIE9用？


Firefox 4

@font-face {
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: normal;
  src: local('Tangerine'), url('http://themes.googleusercontent.com/font?kit=HGfsyCL5WASpHOFnouG-RD8E0i7KZn-EPnyo3HZu7kw') format('woff');
}

URLはChromeと同じ。


Chrome 10

@media screen {
@font-face {
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: normal;
  src: local('Tangerine'), url('http://themes.googleusercontent.com/font?kit=HGfsyCL5WASpHOFnouG-RD8E0i7KZn-EPnyo3HZu7kw') format('woff');
}
}

URLはFirefoxと同じ。
@mediaでscreenだけにしているのはAndroid対策か何かか？


Safari 5 (for Windows)

@font-face {
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: normal;
  src: local('Tangerine'), url('http://themes.googleusercontent.com/font?kit=HGfsyCL5WASpHOFnouG-RKCWcynf_cDxXwCLxiixG1c') format('truetype');
}

URLはSafari用（Operaと共通）。アンダーバーで区切ってるのはiPhone用（iOS用？）が別にあったりするためか？


Opera 11

@font-face {
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: normal;
  src: local('Tangerine'), url('http://themes.googleusercontent.com/font?kit=HGfsyCL5WASpHOFnouG-RKCWcynf_cDxXwCLxiixG1c') format('truetype');
}

URLはSafariと同じ。OperaもTrueType組。


まとめ
おそらくUser-Agentで判断して振り分けているだけのようだ。
フォントファイルは大きく分けると下記の3つに分かれるようだ。

• IE8-
  
• IE9+、Firefox、Chrome
• Safari、Opera
  

参考：Webフォント (Webfonts)を使う際の最新記述方法 Fontspring Syntax (The New Bulletproof@Font-Face Syntax) - フォントブログ

Webブラウザからコーディングができるオンラインテキストエディタいろいろ

Webブラウザを使ってサーバ上のソースコード（テキストファイル）を編集できる、Webベースのオンラインテキストエディタを調べたメモ。
（さらっとしか調べてないので勘違い等あるかも。）

• ecoder
• 画面イメージは上記のとおり
• 画面左にエクスプローラのようなディレクトリ内ファイルリストが付いていて便利
  
• サーバサイドはPHP専用？（HTML、JavaScript、CSSは対応している）
• 参考：Webベースのソースコードエディタ「ecoder」 - MOONGIFT|オープンソース・ソフトウェア紹介を軸としたITエンジニア、Webデザイナー向けブログ
• Cloud9 IDE
  
• skywriter（昔はBespinという名前だった）を吸収したらしい
  
• 参考
• 詳細スキルのない人でもHTML5/JavaScript開発をクラウド上で簡単にできるCloud9 IDE
  
• InfoQ: 新しいセルフホスティングIDE: RedCarとJRuby、Cloud9 IDEとJavascript
• Eclipse Orion
  
• まだ開発中
  
• 参考：Eclipseをベースに実用性のありそうなWebベースの開発環境「Eclipse Orion」 - MOONGIFT|オープンソース・ソフトウェア紹介を軸としたITエンジニア、Webデザイナー向けブログ
  
• Amy Editor
• 参考：体験必須！プログラミングもコラボレート「Amy Editor」 - MOONGIFT|オープンソース・ソフトウェア紹介を軸としたITエンジニア、Webデザイナー向けブログ
  
• PHPAnywhere
• 自分のサーバにインストールするのではなく、PHPAnywhereのサイト経由で更新？
  
• 参考：外出中でも使えるオンラインPHPエディタ「phpanywhere」 – 3ET
  
• ShiftEdit
  
• Google Chromeのアドオン（拡張）
  
• 日本語を正常に表示できないらしい
  
• 参考：ブラウザ上の統合開発環境『ShiftEdit』が良いんだけど惜しい・・・ - IDEA*IDEA ～ 百式管理人のライフハックブログ
• Ymacs
• オンラインEmacs（でもEmacs使う人は素直にSSHでEmacs使いそう．．．）
  
• 参考：ブラウザでEmacsが動く「Ymacs」 : Happy my life
• 9ne
• これもオンラインのEmacs
• 参考：WebベースのEmacs「9ne」 - MOONGIFT|オープンソース・ソフトウェア紹介を軸としたITエンジニア、Webデザイナー向けブログ
  

今のところ、本命はCloud9 IDEで、それをEclipse Orionが追う形か。（Orionがリリースされたらいろんな状況が一変するかも？）
でもPHPだけならecoderでいいかな？grepができない以外は基本的なことはできそう。
ちなみに、ecoderを試しに使ってみたら良かったので、結局他のは調べただけで試してはいない。


参考

• 今使えるオンラインエディタ5 | エンタープライズ | マイコミジャーナル
• オンラインエディタ - DiaryException
  

リンクのリファラをカットしてくれるGoogle Chromeの拡張

HTML5ではreferrerを送らないという記述ができるらしい。
WebKit nightlies support HTML5 noreferrer link relation.ja – WebKit

これを利用して、Google Chromeでreferrerを送らないようにする拡張があった。
Google Chrome拡張 「noreferrer link」を作りました - awef

これでいよいよFirefoxからChromeに本格乗り換えか？ （でも面倒だなあ．．．）


というわけで2011年もよろしくお願いいたします。

CSSによる背景色グラデーションのブラウザごとの書き方

例えば、上から下に白から青のグラデーションを表示したい場合はこう書く。（省略可能なパラメータは省略した。）

/* IE */
filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr=#ffffffff, EndColorStr=#ff0000ff);

/* IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Gradient(StartColorStr=#ffffffff, EndColorStr=#ff0000ff)";

/* Firefox */
background: -moz-linear-gradient(white, blue);

/* Chrome, Safari */
background: -webkit-gradient(linear, left top, left bottom, from(white), to(blue));

IE8は右辺をクォートで囲う必要があるので注意。

IE以外は、詳細な指定をすれば複数の濃淡を指定できたり球状の効果を表現できたりと色々できる。

Operaは未対応らしい。


参考
IE：Gradient - filter,フィルタ
Firefox：-moz-linear-gradient - MDC
Chrome, Safari：CSSでグラデーションを表現する - builder by ZDNet Japan

JavaScriptによって動的に CSSを追加する場合のブラウザごとの挙動の違い

（2011/3/29追記：Firefox4とChrome10の実験結果を追加。）


JavaScriptに続いて、動的にCSS（またはstyle要素）を追加する場合の、追加方法の違いによるブラウザごとの挙動も調べた。


調査に使ったJavaScript（HTML5なのでtype属性は省略してある。）

window.onload = function() {
    // divのinnerHTMLに外部CSSの読み込みを突っ込む
    try {
        var div1 = document.createElement("div");
        div1.innerHTML = '<link rel="stylesheet" href="test1.css" />';
        document.body.appendChild(div1);
    } catch(e) {
    }
    
    // createElementでlink要素を生成して外部CSSを読み込む
    try {
        var link2 = document.createElement("link");
        link2.rel = "stylesheet";
        link2.href = "test2.css";
        document.getElementsByTagName("head")[0].appendChild(link2);
    } catch(e) {
    }
    
    // divのinnerHTMLに生のstyleを突っ込む
    try {
        var div3 = document.createElement("div");
        div3.innerHTML = '<style>#test3{ color: red }</style>';
        document.body.appendChild(div3);
    } catch(e) {
    }
    
    // createElementで生のstyleを追加する
    try {
        var style4 = document.createElement("style");
        style4.innerHTML = "#test4{ color: red }";
        document.getElementsByTagName("head")[0].appendChild(style4);
    } catch(e) {
    }
};

test1.css

#test1{ color: red }

test2.css

#test2{ color: red }

結果は下記の通り。

ブラウザ	1	2	3	4
IE 8	Ｘ	Ｏ	Ｘ	Ｘ
Firefox 3.6	Ｏ	Ｏ	Ｏ	Ｏ
Firefox 4.0	Ｏ	Ｏ	Ｏ	Ｏ
Chrome 4	Ｏ	Ｏ	Ｏ	Ｘ
Chrome 10	Ｏ	Ｏ	Ｏ	Ｏ
Safari 4	Ｏ	Ｏ	Ｏ	Ｘ
Opera 10.53	Ｏ	Ｏ	Ｏ	Ｏ

やはりIEではcreateElementで外部ファイルを読み込む方法しか動かない。
（ちなみに外部ファイルはhead要素でなくbody要素にappendChild()してもOKだった。）

でもChrome、SafariやOperaでほぼ動いたのが意外だった。


（2011/3/29 追記）
style 要素を動的に生成する - m2の方法を使えば、innerHTMLに生のstyleを突っ込むことができる。IE8、Firefox4、Chrome10、Opera11で動作することを確認した。

JavaScriptによって動的に script要素を追加する場合のブラウザごとの挙動の違い

（2011/3/29追記：Firefox4の実行結果を追加）


JavaScriptによって動的にscript要素を追加する場合の、追加方法の違いによるブラウザごとの挙動を調べた。


調査に使ったJavaScript（HTML5なのでtype属性は省略してある。）

<script>
function test(value) {
    document.getElementById("test").value += value + ",";
}

window.onload = function() {
    // innerHTMLに外部JSの読み込みを突っ込む
    try {
        var div1 = document.createElement("div");
        div1.innerHTML = '<script src="test1.js"><' + '/script>';
        document.body.appendChild(div1);
    } catch(e) {
    }
    
    // createElementでscript要素を生成して外部JSを読み込む
    try {
        var script2 = document.createElement("script");
        script2.src = "test2.js";
        document.body.appendChild(script2);
    } catch(e) {
    }
    
    // innerHTMLに生のJSを突っ込む
    try {
        var div3 = document.createElement("div");
        div3.innerHTML = '<script>test(3);<' + '/script>';
        document.body.appendChild(div3);
    } catch(e) {
    }
    
    // createElementで生のJSを追加する
    try {
        var script4 = document.createElement("script");
        script4.innerHTML = "test(4);";
        document.body.appendChild(script4);
    } catch(e) {
    }
};
</script>

test1.js

test(1);

test2.js

test(2);

処理が実行されたら、表示用のテキストボックス（id="test"）に番号が表示される。

結果は下記の通り。

ブラウザ	1	2	3	4	表示順
IE 6/8	Ｘ	Ｏ	Ｘ	Ｘ	2
Firefox 3.6	Ｏ	Ｏ	Ｏ	Ｏ	1→2→3→4
Firefox 4.0	Ｘ	Ｏ	Ｘ	Ｏ	4→2
Chrome 4	Ｘ	Ｏ	Ｘ	Ｏ	4→2
Safari 4	Ｘ	Ｏ	Ｘ	Ｏ	4→2
Opera 10.53	Ｘ	Ｏ	Ｘ	Ｏ	2→4

innerHTMLにscript要素を入れるのはFirefox3.6以外では動かない。（セキュリティ的な施策？）
Firefoxでしか動作確認していないと嵌りそうだ。（というか嵌った。）

IEのことを考えると、生のcreateElementで生成したscript要素に生のJavaScriptを書くやり方も使えない。
（そんなことが必要になるケースは無いかもしれないが。）

素直にcreateElementで外部JSを読み込むのが良いようだ。


（2011/3/29 追記）
innerHTMLに生のJavaScriptを入れる方法としてinnerHTMLでscriptする - Thousand Yearsの方法があったようだ。
しかし現在のブラウザでは、IE8では動作したが、Firefox4、Chrome10、Safari5、Opera11では動作しなかった。

Googleサイト内検索結果でページの下端が切れる問題

検索向けAdSenseによるサイト内検索で、IE以外だと検索結果の下端が切れてしまう問題について。


【発生条件】
検索結果を自分のサイト内に表示する場合に起きる。
広告を右のみにした場合に起きた。広告を他の位置にしたら起きないかも。
Firefox（3.5）、Google Chrome（4）、Safari（4 Windows版）で発生を確認した。


【現象】
検索結果の内容に関わらず、検索結果を表示するiframe（JavaScript http://www.google.com/afsonline/show_afs_search.js により生成される）の高さが常に1200pxになる。
その結果、検索結果が少ない場合は検索結果とフッターの間に大きな空白ができる。反対に検索結果が多い場合、検索結果の下端に表示されるページ番号の表示が途中で切れてしまったり表示されなくなってしまう。（実際にはframeの外側にあり、かつframeのスクロールバーが非表示になっているので隠れているだけだが。）


IEの場合、iframe内の検索結果のHTMLのbody要素に、onloadで下記のようなJavaScriptを実行している。

onload="window.top.location='http://（親windowの検索結果のURL）#'+document.body.scrollHeight;"

これにより、親windowのURLの末尾にiframe内のコンテンツの高さを表すhashが付く。

そして検索結果のshow_afs_search.jsの方でlocation.hashを取得し、それをiframeの高さとして設定している。（0.01秒ごとに実行するという監視をしている。高さが取得できた後も。）
その結果、検索結果のコンテンツの内容に応じて検索結果をリサイズするというユーザーフレンドリーなユーザーインターフェイスを実現している。

試しに検索結果を表示した後、URLの最後に「#500」などと付けると検索結果の高さが変わる。これはFirefoxでも有効。


なぜIE以外ではiframe内のbodyのonloadのJavaScriptを付けないのだろう？Firefoxのセキュリティ等により無意味なんだろうか？


【回避策】
検索結果を表示するページのgoogleSearchXxxを設定しているJavaScriptに、下記のように高さを明示的に指定してあげる。

var var googleSearchFrameWidth = 800; //これは既存のコード
var googleSearchFrameHeight = 1210; //これを追加する

これにより、デフォルトの高さが1210pxになり、検索結果の下端が切れなくなる。

IEの場合、これでもリサイズが有効なので、この値は無視してリサイズしてくれると思う。

Google Chromeに Extension（拡張）をインストールするメモ

（2010/01/17追記）
面倒な事をしなくても、現在は下記のように簡単にExtensionが使えるようになるみたいですね。

1. Google Chrome Extensionsのサイトを表示すると、もし使用中のChromeがExtension非対応の場合はBeta版のインストールを勧められる（英語）
2. そこからChromeのBeta版をインストールして、Chromeを再起動する

（追記終わり）


Google ChromeでExtension（拡張）を使えるようにするメモ。

1. Chromeをdev版に切り替える。
   Chrome dev版のダウンロードページからdev版をダウンロードしてインストール。
2. Extensionを有効にする。
   Chromeのショートカットのプロパティを開き、「リンク先」の最後に「 --enable-extensions」を付ける
   参考：Google Chrome 拡張(Chrome Extension) はてなブックマークのエントリー数を表示する Chrome拡張を作った - 忘れないようにメモ

以上。

ショートカットからChromeを立ち上げ、試しにAdSweepのページでAdSweepをインストールしてみればExtensionが有効になっているか分かる。
（はてなブックマークのエントリー数を表示するChrome拡張はなぜかインストールできなかった。（2009/08/12変更）インストールできるようになった。コメント欄参照。）

インストールしたExtensionは、chrome://extensions/ を見れば確認できる。

ExtensionはGoogle Chrome Addons, Themes, and Pluginsあたりから入手できるが、まだまだ欲しいものはない状況。
せめてRefControlが欲しいなあ。


参考：Early Access Release Channels ‎(Chromium Developer Documentation)‎

Chromeでマウスジェスチャ by Greasemonkey （User Scripts）

User ScriptsはChrome2（現在Beta版またはDev版 正式リリースされた）から使える。

1. Google Chrome (BETA)からChrome Beta版をダウンロードしてインストールする （通常のChromeが2.0になったので普通に入手すればOK）
   
2. Chromeのショートカットの「リンク先」の最後に、" --enable-user-scripts"を追加する（「"C:\Documents and ... \chrome.ext" --enable-user-scripts」といった感じになる）
3. 上記のショートカット経由でChromeを再起動する
4. マウスジェスチャ for Chrome - Grieverか、Loox Uと初音ミクで行こう！: Google ChromeのUserscript版マウスジェスチャ完成からUser Scriptを入手する
   
5. メモ代わり: Google Chrome グリースモンキーに書いてあるフォルダにScriptファイルを置く

Google ChromeでなぜかQueryStringを含むURLを見られないと思ったら

ChromeでQueryStringを含むURLを見ようとするとしばしば「404 Bad Request」になってしまうことがあり、調べたらIEと同じ現象らしい。

/~sugano/ » Google ChromeのDigest認証

IEへの対応は、Apacheいじり始めてすぐに入れたのでそういうものだと思ってたけど、まさかこんなところで再開するとは。

Google Chrome

Google Chrome触ってみた。速い速い。昔のOperaを思い出す。それ以上に速い。

JavaScriptコンソールやHTML解析っぽいのもデフォルトで付いてる。

アプリケーションショートカットもなかなか面白い。htaみたい。社内向けシステムとかで余計な上部メニューを消したい場合なんかにもいいかも。

これでExtensionとは言わないまでもGreaseMonkey（CreamMoneky？）くらいあれば乗り換えるかも．．．。せめてGoogle Customize相当のものがあればなあ。