TOP / JavaScript

2011年03月21日

SeesaaにSyntaxHighlighterを導入した

コードを張り付けるときに便利かと思って、設定してみた。
検索してみたところ、SyntaxHighlighter[Alex Gorbatchev]が便利そうだったので、これに決定。ネットとかはVer2系列の解説が多かったが、導入したのは3.0.83。
クリップボードのコピーとかにFlashがいらなくなったとか(単にダブルクリックすれば全部選択されるからCtrl+Cでコピーできるよん、って事らしい)、自動でコード判別できるようにも設定できるとか、変わっているみたい。(あんま真面目に読んでない)

設定方法

Seesaa Blogに最小限度の設定する方法。

  1. SyntaxHighlighter 3.0.83をダウンロードしてくる。
  2. 「shCore.js」「shCore.css」「shThemeDefault.css」とハイライトしたいコードに関係するjs(自分の場合は「shBrushPython.js」「shBrushXml.js」)をファイルマネージャでアップロードする。
  3. デザイン→HTMLを選んで、SyntaxHighlighter配置のようにコードを追加する。
  4. preタグを使って、コードをBlogに書く。

SyntaxHighlighter配置

PythonのSample

Blogのコード


# -*- coding: utf-8 -*-
import os, sys,glob

if __name__=='__main__':
	print('Hello World')

適用結果

# -*- coding: utf-8 -*-
import os, sys,glob

if __name__=='__main__':
	print('Hello World')
posted by MINE at 00:43 | Comment(0) | TrackBack(0) | JavaScript | このブログの読者になる | 更新情報をチェックする | edit

2006年09月03日

SeesaaブログでGoogleMapsを使うチュートリアル

ダーツとか色々教えてくれるお姉さんのTommyさん [Tommyとゆかいな仲間たち] が、
仕事中に「GoogleMapの使い方教えて〜」ときたので、
ちょっとSeesaaブログでの使い方をチュートリアル形式で書いてみようかと。 [*1]

1：GooglleMapsのKeyを取得しよう

まずはGoogleからKeyを取得しなければなりません。
コチラ[ Google ]からKeyを取得しましょう。

リンク先の下のほうにある「My web site URL」に自分のサイトのトップURLを指定して、
Generate API Keyを押すと、Keyが生成されます。
Keyが有効なのは、登録したURL以下のサブディレクトリ全部です。

2：keyをBlogに書き込もう

取得したKeyをHTMLの<head>〜</head>の間に挟むと、GoogleMapsが使えるようになります。
Seesaaでは、ブログの管理画面から変更する事ができます。
「デザイン→HTML→有効にしているHTML名」です。
管理画面
このHTML編集画面で、<head>〜</head>の間に、以下の一行を挿入してください。

<script src="http://maps.google.com/maps?file=api&v=2&key=自分のキー" type="text/javascript" charset="utf-8"></script>

何故赤字の部分が必要かというと、 SeesaaはShift-JISなので、Googleに送るキーはUTF-8だよ！と明示的に教えてあげる必要があります。

3：bodyを書き換えよう

同じくHTML編集で終了処理を記述するために、bodyタグを以下のように変更します。

Before

<body>

After

<body onunload="GUnload()">

これで、ページを切り替えた時に適切な終了がされるようになります。

4：blogに記事を投稿しよう

今まで下準備を終了しました。
次は、実際にBlogに地図を張り込む作業です。
これは普通にJavaScriptを書くだけです。簡単ですね！

4.1：厄介なInternetExploler

と言いたい所なのですが、実はInternetExplolerが厄介なのです。
GoogleMapsへのJavaScriptを何も考えずに書くと、
「インターネット サイト http://*** を開けません。 操作は中断されました」
というエラーが発生します。 [*2]

FirefoxとかOperaだと問題ないんですけどね〜。
これはIEがJavaScriptをロードするタイミングが、
ページを読み込んだ後じゃないと
いけないという仕様（制約?)のせいです。

4.2：記事へのScriptの書き方

じゃあどうするかというと、window.onload [JavaScript日本語リファレンス] を使います。
これは、ページの読み込みが完了した時に呼ぶ関数を定義できます。
ソースにすると以下の様になります。

1　<div id="map" style="width: 500px; height: 400px"></div>
2　<script type="text/javascript">
3　//<![CDATA[
4　　　var map;
5　　　function load() {
6　　　　if (GBrowserIsCompatible()) {
7　　　　　 map = new GMap2(document.getElementById("map"));
8　　　　　 map.setCenter(new GLatLng(35.602768,139.708768), 16,G_NORMAL_MAP);
9　　　　　 map.addControl(new GLargeMapControl());
10　　　　　map.addControl(new GScaleControl());
11　　　　　map.addControl(new GMapTypeControl());
12　　　　　map.addControl(new GOverviewMapControl(new GSize(150,120)));
13　　　　　var gpObj = new GPoint(139.708768,35.602768);
14　　　　　var marker = new GMarker(gpObj);
15　　　　　map.addOverlay(marker);
16　　　　　GEvent.addListener(marker, "click", function(){
17　　　　　　marker.openInfoWindowHtml("メッセージ");
18　　　　　} );
19　　　}
20　　}
21
22　window.onload=load;
23　//]]>
24　</script>

簡単&多少意訳で１行づつ解説します。

  1. このタグの箇所に地図が表示されます。あとは、地図の大きさを指定します。
  2. JavaScriptの開始を示します。
  3. 同上
  4. 地図のデータを入れる変数を宣言します。
  5. load()という関数オブジェクトを宣言します。
  6. Googlemapsを使えるブラウザかを判別します。
  7. 地図のインスタンスmapを生成します。
  8. 地図の中心をどの座標にするかを指定します。
  9. コントロールボタンを表示します。
  10. 縮尺を表示します。
  11. 地図のタイプを切り替えられるようにします。
  12. 地図に小さいOverViewを付けます。
  13. 座標のインスタンスを生成します。
  14. マーカー(ピン)のインスタンスを↑で作った座標に生成します。
  15. ↑で作ったマーカーを地図に表示させます。
  16. マーカーがクリックされたら、17行目を実行します。
  17. 吹き出しを表示させます。

8行目の「GLatLng」と13行目の「GPoint」の緯度経度の入力は、
逆になっているので気をつけましょう。
私含めて何人か引っ掛かってます（笑）

4.3：注意点

Seesaaブログの設定で「改行を<br/>タグに変換しない」の設定にしましょう。
でないと、JavaScriptの途中で改行タグが入ってしまい、
上手く動かない可能性があります。

4.4：openInfoWindowHtml()でHTMLを使う場合

吹き出しの中でリンクを張りたいときがあると思いますが、
その場合は、Seesaaの記事設定でURL補完を補完しないにしなくてはなりません。
でないと、Seesaa側で勝手にタグをつけてしまい、上手く動きません

HTML例

marker.openInfoWindowHtml("<a href=\"http://www.google.co.jp/\">テスト</a>");

上記例のように"の前には「\」を付けましょう。
これが無いとJavaScriptが途中で文字列が終わっていると処理してしまい、
GoogleMapsの表示が上手くされません。

5：データの追加方法

今回のサンプルは１個のマーカーだけですがマーカーを増やしたい場合は、
13行目から18行目をどんどん増やしていけば良いでしょう。

私信

ってなわけで、頑張ってください![*3]

参考URL

  • Google Maps APIリファレンス [LINK]
  • ぴゅあどら＠blog [LINK]
  • Geekなページ [LINK]

追記

  • 注意事項を追記(2006/09/07)
  • 吹き出しにリンクを記述する方法を追記(2006/09/08)

*1:BlogのネタGet's!と思ったのはココだけの話

*2:これにどれだけハマっったことか・・・

*3:分からなかったら直接聞きにきてください（笑）

タグ：Seesaa blog GoogleMaps
posted by MINE at 21:52 | 🌁 | Comment(4) | TrackBack(0) | JavaScript | このブログの読者になる | 更新情報をチェックする | edit

2006年06月27日

SeesaaブログでGoogleMap APIを使う手順

はじめに

Googlemap APIをSeesaaブログで使うのは面倒です。
何故なら、Googleのサービスを使うには基本的にHTMLの文字コードが
UTF-8なことが推奨されるんですが、Seesaaが吐き出すHTMLは
文字コードがShift-JISです。

Shift-JISとUTF-8が混在する羽目になるので、それが嫌な場合はどっか他のHPスペースに
Googlemapのページ作って、iframeで表示させるとかさせたほうが良いです。

GoogleMapsを利用できるようにしよう

何はともあれGoogleからKeyを取得しなければなりません。
コチラ [LINK: Google] からKeyを取得しましょう。
Keyが有効なのは、登録したURL以下のサブディレクトリ全部です。

Keyと一緒にサンプルコードが出ます。

サンプルをそのまま登録しても・・・

以下のような感じにサンプルが出ます（多少端折ってます）

<html xmlns="http://www.w3.org/1999/xhtml">
　<head>
　　<script src="http://maps.google.com/maps?file=api&v=2&key=自分のキー"  type="text/javascript"></script>
　　<script type="text/javascript">
　　//<![CDATA[
　　　function load() {
　　　　if (GBrowserIsCompatible()) {
　　　　　var map = new GMap2(document.getElementById("map"));
　　　　　map.setCenter(new GLatLng(37.4419, -122.1419), 13);
　　　　}
　　　}
　　//]]>
　　</script>
　</head>
　<body onload="load()" onunload="GUnload()">
　　<div id="map" style="width: 500px; height: 300px"></div>
　</body>
</html >

が、これをSeesaaに登録しても動きません。
冒頭に述べたとおり文字コードがShift-JISだからです。

UTF-8と教えてあげよう

以下の一行に「charset="utf-8"」を追加する。

<script src="http://maps.google.com/maps?file=api&v=2&key=自分のキー" type="text/javascript" charset="utf-8"></script>

これで、GooglemapがSeesaaブログで動くようになります。

posted by MINE at 23:31 | 🌁 | Comment(0) | TrackBack(0) | JavaScript | このブログの読者になる | 更新情報をチェックする | edit

2006年06月17日

角丸JavaScriptと跳ねるRSSアイコン

跳ねるRSSアイコン

右のサイドバー(Feed)に、マウスオーバーすると
RSSが跳ねるのを導入。

ちょっと面白い。

角丸JavaScript [curvyCorners]

角にアンチエイリアスをかけて、丸く見せるJavaScript。
結構、幅広いブラウザをサポートしている模様。



test message.
failed.


上手く言ってないな〜
時間あるとき見よう・・・。

追記
posted by MINE at 01:53 | ☔ | Comment(0) | TrackBack(0) | JavaScript | このブログの読者になる | 更新情報をチェックする | edit

2006年06月02日

JavaScriptで画像を反射してるような感じにするテスト

画像に反射の効果を加えるJavaScript [Reflection.js]

つーわけで、試してみる。

お好み焼き餃子


JavaScriptを使っているので、JavaScriptを切っていると勿論見えない。
対応ブラウザは、Internet Explorer 5.5以上、Firefox 1.5以上、Opera 9以上、Safariな模様。

posted by MINE at 00:41 | 🌁 | Comment(0) | TrackBack(0) | JavaScript | このブログの読者になる | 更新情報をチェックする | edit