カテゴリー「ブログ」の記事

コードハイライト

ソースコードをきれいに表示しようとdp.SyntaxHighlighterを使ってみることにしました。

あなたのソースコードを彩る、Syntax Highlighterまとめ
http://blog.37to.net/2007/06/syntax_highlighter/

を参考にさせてもらいました。

元のソースを極力いじらず、後で再編集もできるものがいいと思ったので、表示したいソースを変換してブログに書き込むものではなく、JavaScriptで表示時に変換するタイプを選びました。

google-code-prettifyもいいなと思ったんですけど、コードハイライトだけじゃなくて行番号も表示したかったのです。

あとはWordPressを使ってみようかなあとほのかに思っているので、iG:Syntax Hiliterというプラグインも気になりました。

●使い方

使い方は難しくなくて、手順は2つ。

・表示したいソースコードを<pre>タグ(か<textarea>タグ)で囲む。
・関連するJavaScript/CSS/SWFファイルを読み込むタグを書く。

ソースコードはほぼそのままでOKなんですが、<だけは実態参照で&lt;と記述する必要があります。&、"、>はそのままでも大丈夫っぽい。

たとえば、

<pre name="code" class="php">
&lt;?php
   if (true) {
       echo "Test";
   }
</pre>

と記載すると、

<?php
   if (true) {
       echo "Test";
   }

という表示になります。

行番号の開始数を変更すること(firstline[value])もできますし、行番号やメニュー部分を非表示にしたり(nogutterとnocontrols)、ソースコードのブロックを折りたたんで表示したり(collapse)、いくつかオプションも設定できます。

不満というか、意外だったのは対応言語にperlがないことくらいかな。Cとかに設定しておけば、まあいいでしょうか。

面倒なのが一点。ブログをectoというツールで書いていて、普段はRich Text Editorというので書いています。HTMLと切り替えてると余計なタグが消えたり、書き換わったりしちゃうんですよね。

ecto側の設定でなんとかなるのか調べてもいませんが。ある程度書いておいてから、ソースコード部分だけは最後に反映させるということで我慢しようかと思います。

Contributeでblogにエントリーしてみる

そういえば、Contributeでもブログが書けたなあというのを思い出し、使ってみることにしました。画面はこんな感じ。

Blog Contribute-1

デザインやレイアウトも含めて、プレビューしつつ、書けます。ぱっと見のソフトの完成度は、さすがAdobeだなって感じです。

でも、Contributeで便利そうな(使いこなしている人をあまり見ないけど)レビュー機能はWebページの作成時のみだし、APIを使ってブログを投稿する機能をつけてみた程度。ただのブログエディタです。

普段使っているectoも同じくブログエディタですが、専用ソフトな分、気軽に起動できて使いやすい。

Blog Ecto-2

Amazonの商品へのリンク機能はシンプルで使いやすいし。画像のサムネイルを生成して自動アップロードも簡単。

そろそろメジャーバージョンアップしそうだし、引き続きectoを使うことになりそうです。

Windows Live Writer雑感

初っ端から、WLWの話ばかりになりつつあるので、あと2点だけ。

IE/Firefox用のBlog Thisプラグイン

見ているページにリンクしたり、選択しているテキストを引用したりしてWLWを起動するIE/Firefox用のプラグイン。ブラウザのツールバーにボタンが追加されます。

同じサイトの過去記事:Windows Live Writer Tips & Tricksには、引用の仕方をカスタマイズする方法が載っています。あと、話は逸れますが、GMail This!なんてbookmarkletもありました。

元々はWindows Writer Team Blogで見たのですが、Windows Live Galleryに遷移したところで、エラーになってしまうんですよね。なんでだろ、日本からアクセスしてるから?

Live Writerfoxっていう似たツールもありました。こちらはコンテキストメニューに「Blog It」が追加されるので、便利そうだったのですが、日本語が見事に化けたりエラーになったりしてしまいました。

Web Layout/Web Previewがおかしい

WLWでは、設定時に実際のサイトからCSSとか関連画像なんかをダウンロードしておいて、 編集時にも実際のサイトさながらに見せてくれるのだけど(View->Web Layout)、メインのノートパソコンでは、正しく動作していないことが判明。別のマシンだと、うまく行っている(どちらもWinXP/SP2)。

再インストールとかしてみても、改善されないので、隠しフォルダを探ってみました。

「%USERPROFILE%\Local Settings\Application Data\Windows Live Writer\」に書かれるログ「Windows Live Writer.log」を見てみると、HTML以外のファイルが取得できてないらしい。

テンプレートが取得されるはずの「%USERPROFILE%\Application Data\Windows Live Writer\blogtemplates」の中を辿っていくと0バイトのファイルがたくさん生成されていました。

根本原因はわからなかったのですが、正しく動作しているマシンからデータを上書きしてあげたら、表示は正しくなったので、とりあえず良しとします。

Technorati-JP Tags: ,

Windows Live Writerのプラグイン - ソースコードの表示

プラグインを試してみて、いざブログにポストしてみたところ、行間や文字の背景色がWindows Live Writer上のプレビュー通りになりません。

うーん、Windows Live SpacesにポストするとOKなので、typepadでうまく表示するにはスタイルシートを見直さなきゃダメなのかも。

ちと、めんどいのと、Windows Live Writerネタが続いて、WLWブログみたくなりつつあるので、ひとまず寝かしておこうかと思います。

(というわけで、ここから本文)

こちらこちらの続き。

ブログの中にソースコードを掲載するときに色付けできたらいいなと思い、ソースコードのハイライト表示ができるプラグインを探してみました。

Code Formatter Plugin for Windows Live WriterSyntax Highlighterを使い分けることになりそうです。

Code Formatter Plugin for Windows Live Writerが良かった理由は、対応言語の多さと再編集しやすさ(残りの2つは再編集しやすくはない)。さらにワードラップを指定できたり、行数振れたりと色付け以外の機能も豊富です。ちなみに、Background colorが指定できるようなのだけど、僕の画面には入りきれないからか、選べませんでした。

ただし、高機能な分、生成されるHTMLの量も多いです。画面の表示は、こんな感じ。

<script type="text/javascript">
document.write(
'XXXXX');
</script>
</body>
</html>

この5行分のHTMLを表示するために、かなり長いHTMLが生成されています。興味のある方は、このページのソースを見てみてください。


残りの2つのプラグインの場合も載せておきます。


Syntax Highlighterの場合。HTMLが対応言語になかったので、PHPで指定しましたが、ただ色付けされるだけなので、見た目がよければいいのです。

<script type="text/javascript">
document.write('XXXXX');
</script>
</body>
</html>

最後に、CodeFormat Pluginの場合。1行ごとに色を変えられるのはいいな。


<script type="text/javascript">
    document.write('XXXXX');
</script>
</body>
</html>

それにしてもWindows Live Writerが出たのが8/11なのですが、紹介したプラグイン3つとも1週間かそこらで公開されています。すぐにこれだけのプラグインが作れるのはすごいですね。

ブログでソースコードの表示って、みんなどうしてる?みたいな話が以前あった気がしたのだけど、元のブログは見つけられず。こんなのもありました。

Windows Live Writerのプラグインいろいろ

こちらの続き。まだ、ブログを始めたばかりで、同じような定型作業というのが思い浮かんでいないのですが、Windows Live Writerのプラグインを調べてみました。

Windows Live Writer Version 1.0.1(6)の時点で、標準で使えるInsertコマンドは、次の4つ。

  • Insert Link
    普通のリンク追加です。
  • Insert Picture
    ドラッグ&ドロップやコピー&ペーストで画像を入れるプラグインです。枠や影をつけたり、エフェクトをかけたり、かんたんに画像を入れることができます。WindowsLiveWriterって名前のディレクトリが自動的に作られて、そこにアップされているようです。
  • Insert Tags
    tag付けできます。以前はこの機能はなかったのでしょうか、Tag4Writerっていうプラグインがあったようです。
  • Insert Maps
    スクリプトエラーが出て、うまく使えません。未調査。

次の画面キャプチャでは、前のエントリーで書いたAmazonやWikipediaのプラグインが追加されています。

それ以外にも、海外に目を向けてみると、さまざまなものがあるようです。Windows Live Writer Pluginsに載っているもので興味のあるものを一通り試してみました。

継続して使ってみてもいいかなと思ったのは、次の2つ。

  • Text Template
    決まった文字をたびたび入力する場合に便利。記事への署名とか?
  • Insert Spaces Emoticon
    Messengerなんかでおなじみの顔文字を入れるプラグイン。Windows Live Spacesのアイコン画像へのリンクを追加しているだけなんですが、絵で選べるのは快適です。

試してみただけのもの。

  • Insert Email to
    mailtoを入れることができるのですが、毎回入力内容が変わるような用途が思いつかなかったです。Text Templateのほうが汎用的で便利かな。
  • Ink Blog for Windows Live Writer
    おもしろそうだなと思ってインストールしてみたものの、TabletPCを持っていないので、試せませんでした。

ソースコードも公開してくれている方もいるようなので、僕も試しにプラグインを作ってみたいものです。

あとは、プログラムのソースコード向けに、行数を添えたり、文法に合わせてハイライトしたりという用途に使えそうなプラグインは3つほど比較してみたので、次のエントリーで。

Technorati-JP Tags: ,

Windows Live Writer

blogを更新するのに毎回ウェブのフォーム経由でやるのはいやだなあと思っていたので、オフラインで編集できて、そのまま公開までできるエディタを探してみました。

このブログでは、TypePadを使っているので、それに対応しているツールであることが最低条件。

あとは便利さですが、読んだ本の紹介をしたいなあとも思っていたので、Amazonへのリンクを入れやすくできるかどうかもポイントです。

というわけで、独断で決めたのはWindows Live Writer。英語版しかなく、βですが、十分使えました。

ほかにも軽く使ってみたのは下記の2つ。

  • BlogWrite
    いろんなブログスペースに対応しているようです。
  • xfy Blog Editor
    XVCDというXMLスクリプト言語でカスタマイズできます。でも、ちょっと動作が重い。

ほかにも探してみますが、Windows Live Writerのプラグインを作る方向に遊ぶのもおもしろそうです。

とりあえず、Gmailでどこからでも下書きできるようにしておいて書き溜めておいて、リンクや画像を入れるといった最後の調整をWriterで行うという感じでうまくいきそうです。

というか、ここのブログはすべてその方法で更新しています。

Technorati-JP Tags: ,
Apple Store(Japan)



2008年11月

            1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30            

最近買った本

Powered by TypePad