• Hebikuzure’s Tech Memo
• Internet Explorer デベロッパーセンター
• Mozilla Flux
• Google Chrome OS & Chromebook Review Tips Themes How to Use Install and Learn

などを追加して更新しました。

後、alice0775さんのブログの内容(というかスクリプト群)がalice0775′s Profile – GitHubに移行していました。

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

オススメのJavaScriptなどについてのブログ
What to Read to Get Up to Speed in JavaScript – Rey Bango

に書いてあるBlogsはかなりレベル高い人たちがまとまってる。
上と重複するけど、JSMentorsのMentorsにそれぞれの紹介ページがあるので、その人たちのサイトを見ておいて損はないと思う。

追記: Ecmazing JavaScript Blogsも見ると著名な方のサイトが分かって便利

JavaScript情報配信サイトなど

• JavaScript Weekly: A Free, Weekly JavaScript E-mail Newsletter
  週間JavaScript。メールマガジンで毎週ハイライト的にまとめた情報を送ってくれる。
  メールマガジン形式だがとても質がよい感じがする
• Badass JavaScript
  不定期でToday In JS Episodeという形式で、JavaScriptの情報を配信している。(Tumblrをブログとして使用)
  多分この手のサイトでは有名だと思うので、見ておくべき。
• JsMag – the magazine for JavaScript developers
  月刊JavaScript。こちらは有料のJavaScript専門電子雑誌を発行してる。
  ブログでも結構まとめ的なことを書いてくれる。
• A Minute With Brendan – The Latest JS News in One Minute Or Its Free!
  ポットキャスト+リンク集。5-10分ぐらいで最近のJavaScript(ECMA)について触れている。
  取り上げた話のリンクも一緒に公開されているので、聞き取れなくても参考になる
• The Changelog – Open Source moves fast. Keep up.
  上と同じくポットキャスト+リンク形式でオープンソースなものついて紹介してる。(JavaScript多めだけど)
  かなり広い範囲を扱ってくれるので、話題になったものはたいてい含まれていることが多い。
• Nundefined ::
  韓国の@nundefinedさんが一週間で集めたリンクという感じでJavaScriptの情報を紹介しています。
  韓国語さっぱりですがGoogle翻訳と相性いい(日本↔韓国)ので機械翻訳でも何とかなります。
  日本のサイトについての情報もなぜか多いです。

これらの情報配信サイトと併せて、今からRSS購読すべきタグと検索結果で紹介したSBMなどを購読するとよりいろいろな情報が視野に入るようになると思います。

追記: これらの情報を元に発表を行いました
ついでに、日本でもこういうサイトが欲しいとのことでJSer.infoを立ち上げました。

Mozilla勉強会@東京 5thで「世界のJavaScript情報を読もう」という発表をしました | Web scratch

http://efcl.info/2011/0117/res2229/

投稿用サブブログを作成

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

BlogWrite – Atom API, XML-RPC

http://www.witha.jp/BlogWrite/bloglist.html

WordPressでしかテストしてませんがXMLRPCに対応してるブログなら動作すると思います。
今回は投稿機構みたいなものを書いただけなので、このスクリプトだけではあんまり意味はないと思います。

// ==UserScript==
// @name           XMLRPC poster
// @namespace      http://efcl.info/
// @include        http://*
// ==/UserScript==

/* 投稿先のメタ情報 */
var metaBlog = {
	"endPoint" : "ブログのエンドポイントURL",
	"blogid"   : "ブログのログインID",
	"username" : "投稿者名", //空だとblogidを使用
	"password" : "パスワード"
}

var XMLRPC = (function() { this.initialize.apply(this, arguments); });
XMLRPC.prototype = {
	/*
	 * @arg 
		{
				"endPoint": "endPoint",
				"blogid"   : "blogid",
				"username" : "username",//空だとblogidを使用
				"password" : "password"
		}
	*/
	initialize : function(arg) { //引数は{}オブジェクト
		this.endPoint = arg.endPoint;
		this.blogid   = arg.blogid;
		this.username = (arg.username) ? arg.username : arg.blogid;
		this.password = arg.password;
	},
	/* *
	 * @title 記事タイトル
	 * @desc 記事内容
	 * @tags タグ(カンマ区切り)
	 * @callback 更新成功時のコールバック関数
	 */
	post : function (title, desc, tags, callback){
		var postURI = this.endPoint;
		this.tags = (tags.length == 0) ? "" : tags.join(",");
		var XMLbody = '<?xml version="1.0"?>\n';
		XMLbody += this.template(title, desc , this.tags);
		console.info(XMLbody);
		GM_xmlhttpRequest({
			method : "POST",
			headers : {
				'Content-type' : 'text/xml'
			},
			url : postURI,
			data : this.template(title, desc , tags),
			onload : callback,
		})
	},
  template : function (title, desc , tags){
    var repuest =  <methodCall>
                      <methodName>metaWeblog.newPost</methodName>
                      <params>
                        <param>
                          <value>
                            <string>{this.blogid}</string>
                          </value>
                        </param>
                        <param>
                          <value>
                            <string>{this.username}</string>
                          </value>
                        </param>
                        <param>
                          <value>
                            <string>{this.password}</string>
                          </value>
                        </param>
                        <param>
                          <value>
                            <struct>
                              <member>
                                <name>title</name>
                                <value>
                                  <string>{title}</string>
                                </value>
                              </member>
                              <member>
                                <name>description</name>
                                <value>
                                  <string>{desc}</string>
                                </value>
                              </member>
                              <member>
                                <name>mt_keywords</name>
                                <value>
                                  <string>{tags}</string>
                                </value>
                              </member>
                              <member>
                                <name>mt_allow_comments</name>
                                <value>
                                  <boolean>1</boolean>
                                </value>
                              </member>
                            </struct>
                          </value>
                        </param>
                        <param>
                          <value>
                            <boolean>1</boolean>
                          </value>
                        </param>
                      </params>
                    </methodCall>;
		return repuest.toString();
	}
}
/* init メタ情報を使って投稿先決める*/
var t = new XMLRPC(metaBlog);
t.post(
	"title",
	"description",
	["tag1","tag2"],
	function(res){//callback
		console.log(res);
	}
);

ブログのエンドポイントURLは各ブログによってまちまちですが、Wordpressだとhttp://WordPressトップ/xmlrpc.php
になります。

E4Xを使ってポストするXMLを作成していますが、先頭に<?xml version=”1.0″?>を入れるとなぜかエラーになったので、後で結合するようにしました。
後、XMLRPCを使ってWordpressにタグを指定できるのかを検索した時、下のようにできないというのが出てきましたが、mt_keywordsにタグを指定できます。
なので下の情報は古いか間違っています。

WordPressでXML-RPCを使った投稿で、記事にタグの指定はできるのでしょうか。できるようでしたらやり方を書いたページを教えてください。.. – 人力検索はてな

WordPressでは,で区切る事でタグを複数指定できます。
カテゴリーは面倒だったので放置してます(誰か…)

記載したソースは自由に使用してください。
gist: 224968 – GitHub

参考

肉少なめ | Item – Greasemonkeyでブログを更新

http://niku.suku.name/item/591

MovableType で使える XML-RPC API

http://www.na.rim.or.jp/~tsupo/program/blogTool/mt_xmlRpc.html#w01

XML-RPC経由の投稿 でタグを登録したい « Selflow WordPress

http://www.selflow.com/?p=6

追記 完全に自分用になってますがこれを使ったものを作ってみた。

NicoMylist poster with XML-RPC for Greasemonkey

http://userscripts.org/scripts/show/64569

ニコニコのマイリストからWordpressへポストするGreasemonkey。
上記では実現できてなかったカテゴリーの指定もできるようになりました。

WordPressのcategoriesは複数なので、XML-RPCからポストする場合もArrayで要素を作らないといけなかったようです。
XML部分だけを取り出したもの→gist: 398599 – GitHub

MetaWeblogAPI metaWeblog.newPost メソッド

http://msdn.microsoft.com/ja-jp/library/aa905673.aspx

juust ~ php oddities » metaWeblog.newPost posting to WordPress from Word

http://www.juust.org/index.php/metaweblog-newpost-posting-to-wordpress-from-word/2009/10/

RefControl

https://addons.mozilla.org/ja/firefox/addon/953

このアドオンを使ってリファラを阻止、偽装しておくべきサイトのメモ

URLのリストはインポートできるので、インポートするのが一番楽です。

• refcontrol.txt をインポート

RSSリーダから画像を表示するためにリファラを偽装、阻止するサイト

• blogs.yahoo.co.jp
• fc2.com
• image.itmedia.co.jp
• plusd.itmedia.co.jp

AmazonはGoogleからのリファラを見て、商品説明の上部に検索結果を表示するようになったためリファラを偽装しています。

• www.amazon.co.jp

サーバ移転してプラグインやテーマも切り替えたのでメモ。

サーバ移転の参考

[WP]WordPressのサーバー&ドメイン移転メモ | emuxx blog

基本的なやり方が書いてある。
301リダイレクトの方法

WordPressのサーバー＆ドメイン移転 | WordPress | 『Weblogy』

WordPressで使ってるプラグイン

WordPressの自動バックアップをGmailで取る | VIVABlog

Gmailにgzipで圧縮したデータベースをバックアップする。

WordPress › 404 Notifier « WordPress Plugins

404が発生したページをRSSまたはメールで知らせてくれる。
移転したときなどの調査が楽になる。

関連エントリーの自動作成プラグイン『YARPP』 | WordPress | 『Weblogy』

記事の本文等を解析して、自動的に関連記事をグルーピングするプラグイン。日本語に対応してる。
閾値は3にして使用してる。
関連記事リストを作成するプラグインのまとめなども書いてあるので読んでおくべき。

Yuriko.Net » WP-PageNavi を使わずにナビゲーション表示

どちらにしてもテーマをいじらないといけないのでこっちの方が楽だった。

Maintenance Mode Plugin — Software Guide

管理者だけにページを表示するメンテナンスモードをつける。
日本語化ファイル

guff : Post Updated

投稿の更新日時を表示するプラグイン。
自分的には必須な気がする。デフォルトで用意されてそうな気もするけど。

WordPress › PS Disable Auto Formatting « WordPress Plugins

自動整形を停止するプラグイン。
記事やコメントなど適応する範囲を指定できる。
過去の記事への適応も考慮されている。
自動整形は記事中にソースコードを書いたりする時邪魔になったり、floatをclearするタグが消えたりしてたから入れてた。
多分これを入れるとScribeFireとかからの投稿でおかしくなるかも。

自動整形機能のイライラを軽減するGoogle Syntax Highlighterプラグイン | とりさんのソフト屋さん

ソースコードをpreタグに入れてビジュアルとHTMLモードを往復を可能にする。
これがあれば自動整形があってもソースが書ける。

[WP:Plugin] 被ブックマーク数表示＋ランキング生成プラグイン | AOINA.COM

国内のSBMに対応してる&記事の被ブックマーク数をカスタムフィールドに保存できる。
人気記事をランキングできるので重宝してる。wp-sbm_popular_entry

記事下に注釈を表示するプラグイン「WP-Footnotes」 » FORGET

特定のフォーマットで書くことではてなダイアリーみたいな注釈表記ができる。
((の前に半角スペースが必要

ページトラックバックプラグイン | ABCP-weblog

ページにトラックバックを送信する機能をつける.
何でデフォルトでないのかが不思議。 ((WordPress2.8以上で動作))

WordPress › Enhanced Recent Posts « WordPress Plugins

新着記事ウィジェットの上位互換です。
更新された記事や含むカテゴリーなども設定できる。

WordPress Plugins/JSeries » Feed Control 日本語版

RSSに更新された記事を含められる。
ただしATOMは対応してない。対応してるプラグインあったら教えて欲しいです。

Greasemonkeyに、はてブポスト機構を追加するGreasemonkeyスクリプト

http://d.hatena.ne.jp/nastack/20080610/1213100873

はてなダイアリー版が有れば結構便利そうなので、作成してみた。
単体では特に意味はないGreasemonkeyなので、他のGreasemonkeyから呼び出して使用します。
@includeの初期値が*となってしますが、使うところに限定する方がいいかも。

• hateda_poster.user.js

gist: 35464 — GitHub

使い方ははてブ版とほとんど同じで、上のをインストールしてなるべく上の方におきます。
Altキーを使って移動させる。

ポスト機構の使い方

if(!window.Hateda)return; //ポスト機構ができていなかったら終了する

var atom = new window.Hateda(
	"userID", //ID
	"password" //パスワード
).include(this);

IDとパスワードはどちらも文字データで入れてください。

var userID = "userID"//ID
var passWD = "password" //パスワード
var atom = new window.Hateda(
	userID, //ID
	passWD //パスワード
).include(this);

という感じでも大丈夫です。

上でユーザーの情報をポスト機構に割り当ててから、実際にポストさせます。

	atom.post(
		["test", "tags"], //タグ 配列データ
		"titlename",      //title
		"comment",    //コメント
		function (){ //ポストが完了時実行される
			console.log("post!")
		}
	)

ポスト機構はかなり手抜きで日付は設定させてないので、常に最新の位置にポストしています。

Image via Wikipedia

Zemantaはブログの記事内容に対して、入力された単語からそれにそうような画像をFlickrなどの二次利用ができる画像を検索してくれるアドオンである。(日本語は無視される)
使用するには利用しているブログが対応しているかを確認し、アドオンをインストールする。
アドオンはFirefoxとIEどちらにも対応している。

Zemantは“WordPress” “Blogger” “MovableType” “TypePad” “LiveJournal”などのブログに対応する。

基本的な使用方法はアドオンをインストールした状態で通常の投稿画面に行き、記事を書いていけば画像が自動で取得されていき(手動で選ぶこともできる)、利用したい画像をクリックするだけの簡単さである。

Zemanta

http://www.zemanta.com/

大きな特徴は内容を解析して、シムエントリに登録してあるブログの中から関連性が高いものを表示するという点です。
記事の関連性のみを参照するため、アクセス数や人気度などに影響されないのがいい点でもあります。

コード自体は2行のjavaascriptなので大抵のブログで取り入れることができると思います。
詳しいやり方は【シムエントリ】ブログパーツの貼り付け方を参照。

という感じでテスト記事を書いてみた。
下の方に関連するブログの記事が表示されるそうです。

更新頻度は

情報更新頻度 現状のシステムでは、6時間～1日に1回、データを更新します。リアルタイムでは更新されませんのでご注意ください。

とのこと。

シムエントリ
記事をブログパーツで結ぶ