ブログのTwitterタイムラインウィジェットをAPI 1.1に対応させる

2013年3月に、TwitterはAPI 1.1に移行する。 それに伴い、ブログ等に設置するウィジェットも[新しいものに変える必要がある](http://blog.jp.twitter.com/2013/02/join-conversation.html)。 リンク先にも書いてあるけど、一応メモ程度に手順書いとく。 1. Twitterの[ホーム](http://twitter.com)から、[設定画面](http://twitter.com/settings)にいく。 2. 左側の設定一覧から[ウィジェット](https://twitter.com/settings/widgets)を選択する。 3. 新規作成ボタンを押し、ウィジェットの設定画面でお好みの設定をする。 - ドメイン名は自分のブログサービスのものを指定(Bloggerなら`blogspot.jp`) 4. 「ウィジェットを作成」ボタンを押す。 5. ウィジェットのプレビューエリア下部に表示されるコードをブログにコピペする - Bloggerなら設定→レイアウトから「ガジェットを追加」で基本の「HTML/JavaScript」を選択してコードをコピペ、任意の場所に貼り付ける。 以上こんな感じ。 前作った時よりも手続きが簡単になってたような気がする

Markdownで投稿した記事のソースコードの見た目をいい感じにする

[前回の記事](http://yslibr4ry.blogspot.jp/2013/01/bloggermarkdowno.html)でBloggerにMarkdownで記事を投稿できるようになった。 ただ、今のままではMarkdown内のコードがあまり良い感じに表示されない。  そこで、今回はMarkdown内のコードをシンタックスハイライトする方法を紹介する。 参考にするのは、前回の記事でも参考にした次の記事。 - [This works...: Markdown with blogspot.com and blogger.com -](http://dvdotsenko.blogspot.jp/2012/08/markdown-with-blogspotcom-and-bloggercom.html) #手順 ##1. `prettify.js`を手に入れる 上の記事で紹介されている著者の[GitHubのレポジトリ](https://github.com/dvdotsenko/snippets)から、`lib/prettify.js`をダウンロードし、自前のサーバや任意のホスティングサービスにアップロードする。 ##2. Bloggerのテンプレートにコードを挿入 ダッシュボードのテンプレートセクションで、「HTMLの編集」を選択する。  表示されたダイアログの中で、前回の記事で挿入したコードを探し、その直後に下記のようにコードを挿入する。 <script src="/path/to/showdown.js"></script> <script> var sd = new Showdown.converter(), mdEl = document.querySelector('.markdown'), converted = document.createElement('div'); converted.className = 'showdown'; converted.innerHTML = sd.makeHtml(md.value); mdEl.parentNode.replaceChild(converted, md); </script> <!-- ↑ここまで前回のコード --> <script src="/path/to/prettify.js"></script> <!-- ↑prettify.jsへのパスを挿入する。前回のコードより後ろに書くこと --> この`prettify.js`はMarkdown中の全てのコードブロックに対してシンタックスハイライトをかけるようカスタマイズされているので、コードを読み込むだけでいい。 ##3. CSSを追加する ダッシュボードのテンプレートセクションで、カスタマイズ -> アドバンス -> CSSを追加、と進み、以下のスタイルを追加する   /* Pretty printing styles. Used with prettify.js. */ /* Vim sunburst theme by David Leibovic */ pre .str, code .str { color: #65B042; } /* string - green */ pre .kwd, code .kwd { color: #E28964; } /* keyword - dark pink */ pre .com, code .com { color: #AEAEAE; font-style: italic; } /* comment - gray */ pre .typ, code .typ { color: #89bdff; } /* type - light blue */ pre .lit, code .lit { color: #3387CC; } /* literal - blue */ pre .pun, code .pun { color: #fff; } /* punctuation - white */ pre .pln, code .pln { color: #fff; } /* plaintext - white */ pre .tag, code .tag { color: #89bdff; } /* html/xml tag - light blue */ pre .atn, code .atn { color: #bdb76b; } /* html/xml attribute name - khaki */ pre .atv, code .atv { color: #65B042; } /* html/xml attribute value - green */ pre .dec, code .dec { color: #3387CC; } /* decimal - blue */ pre.prettyprint, code.prettyprint { background-color: #000; -moz-border-radius: 8px; -webkit-border-radius: 8px; -o-border-radius: 8px; -ms-border-radius: 8px; -khtml-border-radius: 8px; border-radius: 8px; } pre.prettyprint { width: 95%; margin: 1em auto; padding: 1em; white-space: pre-wrap; } /* Specify class=linenums on a pre to get line numbering */ ol.linenums { margin-top: 0; margin-bottom: 0; color: #AEAEAE; } /* IE indents via margin-left */ li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 { list-style-type: none } /* Alternate shading for lines */ li.L1,li.L3,li.L5,li.L7,li.L9 { } @media print { pre .str, code .str { color: #060; } pre .kwd, code .kwd { color: #006; font-weight: bold; } pre .com, code .com { color: #600; font-style: italic; } pre .typ, code .typ { color: #404; font-weight: bold; } pre .lit, code .lit { color: #044; } pre .pun, code .pun { color: #440; } pre .pln, code .pln { color: #000; } pre .tag, code .tag { color: #006; font-weight: bold; } pre .atn, code .atn { color: #404; } pre .atv, code .atv { color: #060; } } --- これでMarkdown内のコードもいい感じにシンタックスハイライトされる。 あとは行番号つけられれば完璧かなー

やったーBloggerにmarkdownで記事を投稿できたよー＼(^o^)／

Markdown最近始めたので、bloggerでも使いたくていろいろ探してみた。 bloggerの機能としては提供されていないので、以下の様な方法をとる必要がある。 1. Markdown Editor(MouとかKobitoとか)を使ってMarkdownで記事を書き、HTMLにコンバートしてbloggerに貼り付ける。 2. bloggerのテンプレートにJavaScriptを仕込み、画面読み込み時にMarkdownの文章をHTMLにコンバートする。 個人的に1の方法は避けたかった。後からの編集がめんどくさいのは勘弁してほしい。 やはりbloggerに直接Markdown記法で書けるのが一番望ましい。 そんなこんなでWebを色々探してたら、 - [This works...: Markdown with blogspot.com and blogger.com - ](http://dvdotsenko.blogspot.jp/2012/08/markdown-with-blogspotcom-and-bloggercom.html) - [404 Blog Not Found:Tips - MarkdownをHTMLにembedする - ](http://blog.livedoor.jp/dankogai/archives/51818456.html) という２つの記事を見つけた。 1つ目の記事の手法は、Markdownのコードブロック内でscriptタグが使えないという問題があったので断念。 2つ目の手法ではscriptタグも行けそうだったので、こちらを参考にして手順を説明していく。 また、この記事自体も今回紹介する方法を使いMarkdownで記述している。 #手順 ##1. CSSをBloggerのテンプレートに登録する ダッシュボードのテンプレートセクションで、カスタマイズ -> アドバンス -> CSSを追加、と進み、以下のスタイルを追加する   .markdown {width:100%; height: 320px; overflow: scroll; background-color: #ffffff; } .showdown {background-color: #ffffff; } ##2. Markdownを変換するコードをテンプレートに埋め込む 同じくダッシュボードのテンプレートセクションで、「HTMLの編集」を選択する。  表示されたダイアログの中で、`</body>`タグを検索し、その直前に下記のコードを挿入し、保存する。上の記事ではjQueryを使っていたが、ここでは使わない形に書き直している。 <script src="/path/to/showdown.js"></script> <script> var sd = new Showdown.converter(), mdEl = document.querySelector('.markdown'), converted = document.createElement('div'); converted.className = 'showdown'; converted.innerHTML = sd.makeHtml(mdEl.value); mdEl.parentNode.replaceChild(converted, mdEl); </script> また、`/path/to/showdown.js`は各自で任意のパスに書きなおす必要がある。 showdown.jsは[*こちら*](https://github.com/coreyti/showdown)からダウンロードできるので、独自のサーバに上げるなり、GitHubでフォークしてそこから呼ぶなりするといいのではないだろうか。 ちなみに私の場合は、個人用のCDNとして使うためのGitHub Pagesを作り、そこでshowdown.jsをホスティングしている。 ##3. Markdownで記事を書く 以下の要領で、`<textarea>`タグの中にMarkdownで記述する。 <textarea class="markdown" disabled> #this blog is written with Markdown! ;) - this - is - list you can use [link](http://yslibr4ry.blogspot.com/) and other Markdown functionality as usual! </textarea> #※注意事項 この方法では`<textarea>`タグの中にMarkdownを記述している。 そのため、当然ではあるがMarkdown記事の中に`</textarea>`があるとそこでtextareaが終わってしまい、後続のMarkdownがそのまま表示されてしまう。 これを防ぐため、Markdown中で`<textarea>`タグを使う場合は、閉じタグを`&lt;textarea>`こんなふうにエスケープしなくてはならない。 ------------- 以上。今後はこんな感じで記事を書いていこうかなあ。 Markdown内のコードをいい感じにシンタックスハイライトする方法については、また今度書く予定。 --- update 2013-02-03: [シンタックスハイライトする記事](http://yslibr4ry.blogspot.jp/2013/02/markdown.html)書いた

bloggerでタイトルを「記事のタイトル→ブログタイトル」の順に表示する方法

意外と簡単だった。

ブログ管理画面の「テンプレート」から
「HTMLの編集」を選択し、下記のタイトルを設定している行を探す。

    ;

ここを以下のように変更する

最後に、「テンプレートを保存」をクリックする。
これで検索エンジンの結果ページでもかなり見やすくなる。