積んメモ: 4月 2008

BloggerにSilverlightを貼り付ける方法

SilverlightをHTMLに埋め込むにはobjectタグを利用すればいいだけなのだがBloggerでそれをするのに一苦労したのでメモ。

通常は↓のようにすればparamタグのsourceで指定しているapp.xapが実行される。
（paramタグにはinitParamsやonerrorもあるが最低限必要と思われる部分だけ）

<object data="data:application/x-silverlight," 
        type="application/x-silverlight-2-b1" 
        width="100%" height="100%"> <!-- 必要に応じて変更 -->
    <param name="source" value="app.xap"/>
    <param name="background" value="#FFFFFFFF" />
    <param name="windowless" value="true" />

    <a href="http://go.microsoft.com/fwlink/?LinkID=108182" style="text-decoration: none;">
        <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none"/>
    </a>
</object>

Bloggerでは以下に注意。

ファイルのアップロードは出来ないのでXAPファイルはどこかフリースペースに置いてそのURLを指定する。
[設定]→[フォーマット]から「改行の変換」を「いいえ」に設定

改行の設定がキーポイント。これが「はい」のままだと表示されない（何でなのかイマイチわからないが・・・）。
ただし、この設定にすることによって自分で改行<br/>を書かなければいけなくなる。

取り敢えずHTMLをエスケープする簡単なSilverlightアプリを貼ってみる。

↑はHTMLやXML、XAMLの説明する際にHTMLエスケープが必要だったので、どうせならSilverlightでっという思いから作ったもの。
言語はC#。スクロールバーの表示方法がまだわかっていないという初心者の状態だが、そんなことは気にせずにDynamic Silverlight (Ruby) でも実装する予定。このあたりはまたの機会に。

[追記]
何故か日本語の入力が出来ないみたい。ローカルでは入力できるのになぁ。

Bloggerでコードにハイライト

する方法を調べた。

いくつか方法はあるようだが、Googleがjavascriptを公開していた。
google-code-prettify

ダウンロードして解凍してできた
prettify.css
prettify.js
を使用すればよい・・・のだがBloggerではファイルをアップロードできないので単純に利用できない。

この記事↓
Blogger でも、コードハイライトしてみる。by google-code-prettify
に方法が書いてあったが、どうもうまくいかない。
「ページ要素追加」でソース内容をべた書きした場合、bodyタグ内にソースが埋め込まれる。
bodyタグのonloadで関数を指定しているが、その宣言がbodyタグ内にある場合まだその関数は定義されて無いんじゃないかな・・・

たぶん、headタグ内に書けばいいと思い、実際にprettify.cssとprettify.jsの中身をテンプレートの編集からheadタグ内にべた書きしてみたらうまくいった。

[レイアウト]→[HTMLの編集]のページでテンプレートを編集。
headタグの直下に上記２ファイルの内容をべた書きし、さらに↓のようにする。

<body onload='prettyPrint()'>

ただ、ソースの内容を本当にそのままコピペしたのではなくprettify.jsの先頭にあるコメント部分をコピーしなかった（というかコピーしたらエラーになった）。

で、ハイライトしたい場合は、

<pre class='prettyprint'>
  ここにコードを書く
</pre>

のようにして使う。

これで問題ないのだが、テンプレートを変更するたびに編集しなければいけない。

で、さらに調べていたらこんな記事があった。
Blogger でソースコードに色付けをする - google-code-prettify
このページではGoogle Page Creatorを利用する方法が紹介されていた。
なるほどこれは便利。Blogger利用者はGmailアカウントを持ってるだろうから、こっちの方がいいかな。
pre要素にスクロールバーを表示する設定も書いてあったがどうもうまくいかない。
↓によると、
pre要素にoverflow
どうやらIEのバグのようなのだが、widthを設定してあげてもスクロールバーは表示してくれない・・・。

BloggerでBlog

調べた事をメモ書きとして残していく予定。今の興味が主に Ruby, C#, Silverlight なのでこの辺が中心かな。

2008年4月3日木曜日

BloggerにSilverlightを貼り付ける方法

Bloggerでコードにハイライト

BloggerでBlog