DropPagesについて

DropPagesの導入方法

詳細はGetting started | DropPages.comを見る。

1. DropPagesから好きなThemeファイルのzipをダウンロードする
2. zipを展開すると<Theme名>.droppages.com というフォルダができるので、
   このフォルダ毎、Dropboxフォルダの好きな所に置く
3. <Theme名>..droppages.com の<Theme名>を自分の使いたいサブドメイン名にする。
   たとえばうちはhttp://sig.droppages.com/なので、sig.droppages.comというフォルダ名にリネーム。
4. Dropboxフォルダ内なら、右クリック->Dropbox->このフォルダを共有からDropboxのサイトが開いて、
   コラボレータのメールアドレスを入力する画面になる。
5. 招待するコラボレーターにserver1@droppages.comと入力すれば共有は完了。

後は、その共有したフォルダ名のアドレス(sig.droppages.comならhttp://sig.droppages.com/)にアクセスできるようになるまで待つだけ(結構かかります。一日とか)

Droppagesの構造

FolderLayout | DropPages.com

sig.droppages.com
├Content[DIR]
│  └記事となるmarkdownファイル
├Public[DIR]
│  └css, js ,画像などのテンプレートから呼び出すリソース
└Templates[DIR]
   └テンプレート.html

自分のサイトはazu/4-Code-Reading – GitHubでコンテンツ共々テンプレートも公開しているので、適当に見てください。(アクセス解析のコードとは固有になっちゃってるけど)

Droppagesのコンテンツ(記事)はtxtファイルに、以下のような感じで書いていって保存すると、Dropboxで同期されて自動でWebサイト側が更新される仕組みなってます。

@Title タイトル
@Body
記事内容書ける
Markdown記法を使える
これ以外にも変数は定義できるけど

• Markdown – 閾ペディアことのは
• Kawaz – Markdownの使用方法

などを見るとよいと思います。

MarkdownならiPadのTextasticなど対応してるアプリもいろいろある。

コードリーディング

Droppagesを使えば、markdownファイルに書いて保存するだけど自動的にWebに公開するという手順が簡単に行えます。
で、なんでコードリーディングサイトにしようと思ったのかは、元々Markdownなどでコードリーディング記録を書きたいなーと思っててGithub pages + Sphinxなどいろいろ試してたんですが面倒な手順が多くて、そこに自動的にMarkdownを変換して公開できるサービスとしてDropPagesがきたわけです。

コードリーディングの環境にはWebStormを使っています。
WebStormならMarkdownプラグイン(EAPだと動かなかったりするのでWebstormは正式版を使う)があるのと、WebStormには構文解析をおこなってコードの構造がつかみやすいのでコードリーディング自体に最適だと思います。
(ブックマークや変数、関数、参照先へのジャンプ、アウトラインなどなど)

WebStormはファイルの分割表示を持ってるので、左でコードを読んで、右でMarkdown形式でコードリーディングの記録を書いていくという事もできます(EmacsとかVimとかでも似たような環境作れると思う)

Markdownのプレビューもその場でできる。

少し戻って、テンプレートはいろいろいじって、記事毎にいろいろメタ情報の変数を定義させるようにすれば、普通のブログと遜色ないぐらいの記事が簡単に作れます。
毎回その変数定義を手入力だと面倒なので、WebStormのテンプレートからファイルを作るFile Templeteの機能を使って以下のような感じにしています

• DroppagesのFile Templete — Gist

実際に入力して出てくる感じは下のようなもの。後はBody以下を書いていくだけ。

@Title Underscore.js
@description 便利関数の詰め合わせライブラリUnderscore.jsのコードリーディング
@keywords Underscore.js
@Dates 2011年05月03日
@Body
[Underscore.js] 1.1.6のソースコードを見ていく

Table of Contentsによるとそれぞれジャンル分けされているので、それに沿って読む。

1. コードはブロックぐらいで適当に区切って読んでいく
2. ## ブロックタイトル とMarkdownにブロックのタイトルをつける(テンプレートで自動的に目次生成をしているため)
3. コードを読みながらコード本体にコメントとして、コードの解説やアノテーションなどを書いていく
4. コードブロックを読みながら、気になったことや使い方や例などはMarkdownに書いていく
5. コードブロックを読み終わったら、そのコードブロックをMarkdownにコピペする(先ほどのように字下げしてpreにする)
6. 1から繰り返し
7. 全部読み終わったらDoccoでコンパイルして、コード全体とコメントを見比べしやすいHTMLを生成する。(コード本体にコメントを書いていくのはこれも目的にしているため)

## でサブタイトルをつけて区切っていくのは英語が読めない人向け、英語技術書の読み方 | Web scratchでやっていたような章ごとに本を読んでいくのと同じ感覚でやっています。
またFunctions of undersocore.js – 4 Code Readingなど適当なページを見てもらうと分かると思いますが、h2,h3などのタグには自動的に内部リンクを振って目次を作るためにもサブタイトルをつけています。

また、コンテンツは先ほどから言っているようにmarkdownで書けるので、githubとも相性がいいです。(githubはmdファイルを変換して表示してくれる)
どこまで読んだかをgitで管理できたり、githubなどを使って複数人で共有したりもできるのでいろいろな使い道があると思います。また仮にDropPagesが消滅しても手元にはコンテンツファイルが残るので、markdownならそこそこメジャーなので逃げ道もいろいろあると思います(htmlに変換もできるし)

Dropbox+DropPages+Markdown+GitHub+WebStorm(任意のエディタ)

= 素敵なコードリーディング生活

ここからDropboxに登録すれば250MBのボーナスがうんぬんです。

• azu/4-Code-Reading – GitHub (自分のサイトのテンプレートなど)
• Home | DropPages.com

英語が読めない人向け、英語技術書の読み方でも言っていましたが、印刷はまだしもコピペができないのは電子書籍として致命的なので、そのDRMの回避方法と、オライリージャパンからダウンロードしたpdfは<16進数の羅列>-<書籍のISBN>.pdfという扱いにくいファイル名なのでそれを手軽にリネームする方法の紹介です。

pdfファイルのリネーム

まずはpdfファイルのリネームです。
オライリー公式でも扱いにくいと言ってて、ISBNからJSONで書籍情報を取得できるAPIを提供しています。
これを使ったリネームスクリプト(Python)がJSON形式による書誌情報の提供をはじめました – O’Reilly Japan Community Blogで公開されているので、これを使うのも良いでしょう。

もうひとつは電子書籍ソフト関係で有名な>>722さんがISBN TitlerというISBNなどからAmazonで検索してファイルのリネームをするソフトウェアを公開しています。使い方は単純で、PDFをソフトウェアにD&Dするだけでリネームをしてくれます。(iTextSharpを使えばpdfのプロパティも書き込んでくれるらしいですが、オライリーのpdfだとDRMの影響かもしれませんがうまくいきませんでした。)
設定からリネームの書式設定や置換の設定などもできるので、自由がきくリネームソフトになっています。

DRMについて

追記: オライリージャパンの電子書籍もDRMフリーになるそうです。
O’Reilly Village／オラの村 – オライリー・ジャパンのEbookがDRM Freeになります

先ほど述べたようにオライリージャパンには印刷、テキストのコピー、ページの抽出、内容の変更ができないなどの制限やメールアドレスをウォーターマーク的に埋め込み(遅延の原因っぽい)があります。
O’Reilly Mediaにはこの制限はありませんし、PDF以外にもepubなどでダウンロードできますし、アップデートも保証してくれます。
なぜ本家ではそのようなDRMを付けてないかはSteal This E-Book – Forbes.com(訳 fladdict » 電子書籍を盗め！）を読むといいです。

制限の一覧

このオライリージャパンにある制限はPDF-XChange ViewerというPDFビューアーを利用する事で外すことができます。
ファイルメニュー>ドキュメントのプロパティ>セキュリティタブ で”セキュリティの設定”を”なし”にしてからpdfファイルを保存するとコピーなどの制限がなくなります。(メールアドレスのウォーターマークは消えないけど)

なしに変更した場合

これで書籍の外観を乱すウォーターマーク以外は通常の電子書籍としてオライリー本を読むことが可能になりました。
(多分、セキュリティ変更に対するパスワードがかかってないためAcrobatなどの他のソフトでもセキュリティ設定の変更を行う事ができると思います)

何でこんな記事を書いたかというと、コピペも印刷もできないというDRMがかかってるのはさすがに電子書籍として論外だと思ったからだ。
コピペができないとその場でコードを実行して確かめにくい(サンプルコードをわざわざ見に行くのかい?)と思うし、検索も行いくくなって電子書籍である利点がなくなってしまっていると思う。また、PC(電子書籍端末)じゃ読みにくいから印刷する、大事な部分は印刷して読みたいという需要が存在してるはずだ。そうしたDRMを設定することにどこまで意味があるのかもやや疑問的でもあり、オライリージャパンの立場的にそうしたものを付けないと物事がスムーズに進まないと言った事情もあるのでしょうが、やはりコンテンツの価値を下げてしまってるこのDRMは不要だと思う。

• 電子書籍にDRMは本当に有効か？ « マガジン航[kɔː]

また、オライリージャパンのpdfには各ページの末尾に購入したメールアドレスが埋め込まれるというソーシャルDRM的なものが存在している。

これも、末尾に毎回あるだけでも外観を乱しているのに、PDFリーダーがメールアドレスをリンク(設定で変えられるが)して余計気が散ったりして電子書籍を読みにくくしている。ソーシャルDRMは不正コピーに効果的かもしれないが、これが嫌で購入を避ける人もいるだろう。

この記事を出すかは少し迷ったが、いつまでもこのままでは不便きわまりないため書くことにした。
これを書くのに他の国ではどうなっているのかも少し調べてて、オライリーにはUS(UK) 、 ドイツ 、 日本 、 中国、台湾とあり、中国、台湾はオライリーショップがない?(他のショッピングサイトを経由してた)
ドイツは http://www.oreilly.de/ebooks/faqs.htmlにebookのDRMについて記述されているがドイツ語が読めなかったのでよく分からなかった(pdfとepubで販売してて、ウォーターマークありで印刷はできてcut&pasteはできないって読めたけど確証はない、cut&pasteと言うのがよく分からないし、コピペはできるけど加工はできないという意味なのかな?)
本家であるUS(UK)はご存じの通り、マルチフォーマットでDRMなしで、日本の12時間以内にダウンロードしないと無効になるなんて事はなく、書籍のアップデートも保証されている。(後、ラフカット版やsafari onlineの存在は大きい)
もしドイツもDRMがあるようなら翻訳関係でDRMが付けられているのかもしれないが、先の震災により電子書籍を扱うところが増えて動きが活発になってきているこのご時世に、何かオライリージャパンとしての動きがあることを願っています。

参考

• オライリーのebookが今日いっぱい「半額」(ただし入手まで数十時間待ち) – ただのにっき(2011-03-25)
• オライリー・ジャパンの被災者支援キャンペーンとティム・オライリーが語る「オライリーメディアがDRMを使わない理由」 – YAMDAS現更新履歴

使用したソフトウェア

ISBN Titler

http://no722.cocolog-nifty.com/blog/isbn_titler/index.html

PDF-XChange

http://www.tracker-software.com/

• Outsider’s Dev Story :: KWAG 13회 워크샵 – “Global Web Accessibility와 함께하는 콱” 후기 #1

そこで韓国のWebに少し興味持ったから調べてみたけど、2008-9年の記事で韓国Webサイトが酷いという話。
ほとんどがIEを使ってるから、デザインがIEでしか確認されてないし、ActiveXが蔓延ってる。

• 韓国のサイトがIEマンセーで酷い。
• 韓国ではFirefox 3が使い物にならない理由：趙 章恩「Korea on the Web」

韓国はIEがいっぱいな国だけど、今そこから変化が起きてるんじゃないかなーとか思ってたりして、いろいろ注目してる。

• いまだ根強いIE6利用の韓国で「もう止めよう！」キャンペーンの嵐：趙 章恩「Korea on the Web」

上の記事でIE6から移行するキャンペーンが今年行われているという話が載っていて、韓国のブラウザ統計でIEのバージョンの変化を見てみると確かにIE8への移行が進んでいるように見える。

• Top 12 Browser Versions in South Korea from Oct 09 to Oct 10 | StatCounter Global Stats

丁度先週あったFirefox Developers Conferenceに韓国からChanny Yun (@channyun)さんという方が来ていた。
HTML5 in Korea というスライド(スライドどこかにないかなーHTML5 in Korea (2010))で「IEが圧倒的に強く、FireFoxのシェアは2%程度、でもHTML5の勉強会は大人気」という事を言っていた。彼のこれまでのスライドを見るといくつかそれっぽい資料がある。

• Channy Yun Presentations

韓国のWebサイト全体の傾向は直ぐには変わらないと思うけど、一部の人がそれはおかしいと分かって動いてる感じがする。
インターネットで国境を越えるのは物理的な事より遙かに簡単なので、そういう人達の動きを見ていくと面白いんじゃないかなーとか思った。

電子書籍

まずは読む本ですが、pdfやepubなどの電子書籍で読むのが良いと思います。
分からない単語が出てきたりしたときに毎回辞書なんか引いてたらつらいので、その場で翻訳できる電子書籍だと圧倒的に時間短縮できます。
オライリー本ならJavaScript Cookbookの記録 – prog*sigでも書いていましたが、iPhoneアプリやpdf、safari onlineなど電子書籍として読む方法はいろいろあるので手を出しやすいと思います。
また、最近の海外の書籍だとSecrets of the JavaScript Ninjaやサイ本の6版などは執筆中のものを読むことができます。(プレオーダーで値段も安くなったりするのでおすすめ)
最近でた海外のJavaScript関係の書籍は下のサイトによくまとまっています。

• 最近の JavaScript 関連書籍まとめ – フリーフォーム フリークアウト

海外の技術書についてまとめると、紙の書籍よりも電子書籍の方が入手が楽で、安く、早い段階で入手できるのでおすすめです。日本のオライリーの電子書籍のように変な制限は少ないと思います。(とりあえずテキストのコピーぐらいどうにかして欲しい)
→やっと制限がゆるくなった

海外のオライリー本の入手はO’Reillyの電子書籍流通への取り組みが色々参考になる件：平凡でもフルーツでもなく、、、：ITmedia オルタナティブ・ブログが参考になります。
Mobi, PDF, ePubなどの形式などで購入できますが、素だと少し高いのでセール時やiPhoneアプリなら600円程度だったりするので、買い方によってかなりお買い得になります。

英語の読み方

やっと本題になりますが、英語ができる人曰く英単語が分かれば大体は分かるようになると、また技術書は物語と違って複雑な文法表現などは少ないので、基本的に単語とある程度の文法などの表現が分かれば読み解くことができます。加えて、技術書なのでコードで表現する部分(コードは共通言語)もあるので、ずっと文章を読むよりは挑戦しやすいと思います。

読むのに使用していたソフトウェア

• ビューアー(pdfならFoxit ReaderとかPDF-XChange Viewerなど)
• Lingoes(翻訳ソフト)→NILtranslator(自作の翻訳ソフト)
• 英辞郎 on the WEB (辞書)

LingoesはLingoesというポップアップ辞書が尋常じゃない – plaisir.genxx.comの時は英辞郎とか無断配布してたみたいですが、多分今はされてないと思うので使うのに問題はないと思います(まあ元から入れなければいい話)
Lingoesでメインに使っていたのはGoogle翻訳の機能だったのであんまり関係ないかもしれない。
このソフトは選択範囲を翻訳してポップアップ表示する事ができるので、意味が分からない所を自動翻訳すれば何となく意味がとれてくると思うので、英辞郎 on the WEBなどの詳しく引ける辞書と併用して意味を理解してました。
途中から英辞郎とExcite翻訳(個人的にはGoogle翻訳より日本語っぽい結果になる)が付ける翻訳ツールを作ってましたがまだ未完成。。
→ある程度完成した ローカルの英辞郎検索やGoogle翻訳も使える翻訳ソフトウェア
また、本文のコピペができる電子書籍なので、気になったものはGoogle検索などしてよりわかりやすい解説を見つけたりしながら読み進めていました。たとえ書かれていることが全く分からなくても、そこで何について説明しているかはタイトルなどから読み取れると思うので、それについて言及してる記事などを探して一緒に読めば理解が深まります。

まとめると、翻訳ソフトを使って斜め読みして、意味がつかめないときは辞書を引く、文章全体がよく分からないときはWebから関係ありそうな記事を探して読む と全く読めないという事はほとんど無くなると思います。

本の理解

ここからはあんまり英語と関係なく紙の書籍でもできる内容ですが、自分なりどのように本を読んでいるかという話。
まずは読むペースについて
自分は○時間ほど読むというよりはこの章まで読むという感じのノルマ式の読み方をとっています。
まあ、この方法で読んでいる人は多いと思いますが、章ごとに内容はまとまっているので、時間で区切るよりは章で区切った方が理解が深まるのは必然だと思います。

もう一つは、本を読みながらブログなどにメモを取ること
prog*sigはまさにそれのためのブログで、本を読みながら1章1記事で、中では節ぐらいに分けてメモをとりながら読んでいます。
上で言っていたように翻訳しながら読んでいる感じなので、翻訳することに集中してしまいその章が読み終わったときに内容を覚えてないとか残念な結果になったりする可能性があります。
そのため、節ぐらいに分けながら内容について自分で分かるように手抜きしながらメモをとると、後で見返したときにどんな内容だったかが分かります。
また、オライリー本はプログラムコードの一部を引用することが許されていたすることがあるため、コードをメモってコメントをつけたりして理解するという方法もとれます。 (コードの意味が理解できない時は写経しましょう)
インプットしながらアウトプット(メモをとるぐらいなのでアウトプットとは言い切れないけど)すると理解が浅くなりがちな感じはしますが、日本語の文章だって難しいと一度では理解できないので何度も読み返す必要がある。その時にメモはとても役に立つと思います。
またメモは本の内容だけではなくWebから関係ありそうな記事を探して読んだときに、それらもメモすることができるので本の内容以外についても書き記すことができます。
メモをとることについて書きましたが、既に知っている内容が出てくることもあります。そういう時はすべてメモしようとしないとしないで、手を抜くのも本を読むのに疲れないためには必要だと思います。

まとめると時間単位より章単位で読む、読みながらメモをとる。

おわりに

自分なりに英語の技術書の読み方を書いたけど、これをやって良かったと思うことは以前に比べて英語を読む事への抵抗が減ったこと。
以前は目に入れるのが面倒だったぐらいだけど、今は意味は大して分かってないけどさらっと(タイトルとか最初の部分を)目を通すようになったと思う。
また、英語以外にJavaScriptの話題に関しては韓国とか中国とかの記事とかも少し見るようになった。
ハングルとか中国語とか全く読めないけど、Google翻訳だよりでさらっと見る感じ(韓国語はGoogle翻訳だと意外と読みやすい日本語になったりする事多い気がする)
ここまでいろいろ書いたけど、とりあえず日本語以外の本も読む対象に入れてみてはどうでしょうか。

まず、読書管理について自分で心がけているのは

1. どんな本だったかが直ぐ分かること
2. 読書した本の登録が面倒くさくならないこと
3. 読書管理を楽しめること

これを目標にしていろいろな読書管理方法を試してきました。
1のように後から見返したときにどんな本だったかを知るために読書した本を管理しているところが大きいので、以前はどんな内容だったかをレビュー形式で書いたりしていました。
しかし、本のレビューみたいに詳しく 書いていくと面倒臭さが増し2や3を破ってしまう事になり、あまり長くは続きませんでした。
(レビュー書く事が全く苦ではない人はブログや私本管理Plusを使って書きためるのもいいかもしれません)

後から見たときに本の内容を簡単に思い出す方法を考えていて思いついたのが、本の内容を貼り付けてしまえばいいと考えました。
つまり、本を読んでいるときに小説なら気になったフレーズ、漫画なら気になったコマをそのまま貼り付けてしまえばいい！
それを実現するためにとった方法は、本をカメラで撮影して画像にしてしまうという方法。
漫画などはこの方法で気になった部分を画像にできるし、小説はちょっとカメラに精度が必要となってしまうので、できなかった場合はiPhoneで気になったフレーズを書き写して、メディアマーカーiPhoneアプリで先に登録しておくといい。
最近流行ってる書籍の電子化で、既に電子化したものをビューアーで読んでいる場合はスクリーンショット機能を使って気になった部分を画像として保存しておく。
そうしてできた画像をDropboxのPublicフォルダに入れておいて外部からも参照できるようにしておく。
後は、メディアマーカーに数行のレビュー(レビューとはいえないレベル)とDropboxにある画像を貼り付けて画像を表示すれば、後から見たときに直ぐ内容が分かって便利になる。

簡単な書籍の内容についてと画像

この気になった部分を画像にして貼り付けるのは意外と楽しくて、かつ撮影してそこで直ぐ完結するので手間があまりかからない。特に電子化している場合はスクリーンショットを取るだけなので一瞬で終わる。
また画像を貼り付けるときに、Dropboxに一つの書籍について複数の画像がある場合、エクスプローラの”Copy Public Link”だと一個づつしかURLをコピーできないし、Imgタグで囲うのが面倒なのでコマンドラインで動くバッチのようなものを作る。

• Program.cs

このProgram.csのdropboxPath部分を自分のDropbox環境に合わせてからコンパイルする。
csc.exeで以下のよう に指定するとコンパイルできる。(csc.exeの場所は.NETのどっかにあるかと、もしくはVisual Studio使うとか)

>C:\Windows\Microsoft.NET\Framework\v3.5\csc.exe Program.cs

コ ンパイルしてできたexeファイルにD&Dや送るからファイルを渡すと渡したファイルのURLをimgタグにしたものがクリップボードにコピーさ れるので、それをメディアマーカーに貼り付けるだけでよくなる。

さらにメディアマーカーは書籍登録時にタグをつけることができ、後から見返すときにそれらの情報をつけておくと分かりやすくなるため、タグ付けを補助するGreasemonkeyを導入する。

• MediaMaker with Amazon tags
• MediaMaker with booklog tags

それぞれ、登録時にAmazonとbooklogにつけられている書籍のタグを表示してくれるので、クリックするだけで書籍に関係あるタグを追加できる。

補助ツールを使うことで書籍の登録の面倒臭さも低減されるし、何よりも書籍の内容を画像で表示するのは思っている以上に楽しい事だと思う。

evernote+iPhoneで似ている事をやっている人もいます。
やっぱりカメラで写真を撮るのと書き出すのは圧倒的に手間が違うし、いつも持ち歩いてるiPhoneでもカメラは何とかなることが多いので面倒な手間が結構減ります。

Blog Forest: 読書メモの作成にevernoteを使う

http://morimorishop.com/2009/03/evernote_2.html

evernoteなら画像のOCR機能があるので検索できるという淡い期待もありますが、 Amazonから情報を引っ張れたり他とは関係の情報を切り離して見られるメディアマーカーのようなサービスで書籍を管理した方が自分にとっては便利かなーと思う。
後から見返したときに楽しいというのも大きな点。
あくまでevernte+写真はメモにして、そこから文字を書き出すというのも一つの手であると思います。

以上。

おまけ、Dropboxの画像をPublic経由で表示してるので少し重たくなってしまう。
表示する画像をローカルのものと差し替えるGreasemonkey

@include
originSrc
newSrc
の三カ所を書き換える必要がある。

• Mediamaker img local replace.user.js

セキュリティの理由からpref.jsに以下を追加してメディアマーカーからローカルの画像を表示できるようにしておかないと機能しない。

user_pref("capability.policy.localfilelinks.checkloaduri.enabled", "allAccess");
user_pref("capability.policy.localfilelinks.sites", "http://mediamarker.net");
user_pref("capability.policy.policynames", "localfilelinks");

Muses Factory » Firefoxでcheckloaduri.enabledの設定が反映されない

http://reva.s28.xrea.com/archives/38.html

• Emeditorのjavascript自動補完を強化する
• EmeditorでCtagsを使ったjavascript構文解析
• Emeditorのアウトライン設定

prog*sig

http://efcl.info/adiary/

上のサイトは主にプログラミングのメモで使うので、そっち系の内容は上のサイトに書くことにする。

The State of the Web – Summer 2008

今年の話題になったものなんかをグラフィカルにまとめて見ることができます。
日本でもはやってるTwitterとか日本でもはやってるものも多い気がします。

Twitterという飛行機がトラフィックにによって墜落する絵など皮肉ってるものが多く目で見て楽しめる。

まだ発売前ですがiPhoneもやっぱり気になる品物ですね、(買おうかな。)

The State of the Web – Summer 2008

http://0at.org/summer-2008.html

Microsoft IME 2003 最新語辞書更新 2008 年 5 月版

それぞれIME用の辞書が更新されたみたいです。
最近の語彙や固有名詞の追加や誤変換などの修正が主なようです。

IME 2003の標準辞書を四半期に1回更新するそうなので次は9月頃かな。