Web製作メモ帳

Web制作で気づいたことをつらつらと

PukiwikiにGoogleマップを表示してみる

Pukiwiki

　Wikikeibaの日本の競馬場に各競馬場の地図をGoogleマップから表示されるようにした。

　WikikeibaはPukiwikiというwikiシステムを使用しているのだが、そのPukiwikiにGoogleマップを表示するプラグインを導入したのである。Googleマップを表示するプラグインとしてGoogleMaps2を導入してGoogleMapを表示している。

　Wikiでの編集時の使い方はヘルプにも書いたが、問題は表示したい場所の緯度と経度の取得方法がミソである。

　ヘルプにも参考情報として書いたのだがここでもおさらいとして、緯度・経度を取得してGoogleMap2導入済みのPukiwikiシステムでGoogleマップを表示する方法をメモっておこう。

  • Googleマップにアクセスして表示したい場所を表示します。
  • 地図の右肩の「リンク」という文字をクリックすると、ＵＲＬが以下のように表示されます。
http://maps.google.co.jp/maps?f=q&source=s_q&hl=ja&geocode=&q=%E6%9D%B1%E4%BA%AC%E7%AB%B6%E9%A6%AC%E5%A0%B4&sll=35.681382,139.766084&sspn=0.046572,0.050983&ie=UTF8&ll=35.662352,139.485683&spn=0.023291,0.025492&z=15&start=0
  • ll=35.662...というところが、緯度、経度を示しています。z=14という部分がズームです。
  • このパラメータを使って、以下のようにPukiWikiのソースを入力します（他のオプションは適当にカスタマイズしてね）。
<span style="font-weight:bold;">&amp;googlemaps2(width=400px, height=300px,mapctrl=small,lat=35.662352,lng=139.485683,zoom=14);</span>

こんな感じである。世の中にはPukiwikiベースのウィキはいろいろとあり、そのウィキシステムにGoogleMap2プラグインが導入されていないと、上記の方法ではもちろんうまくいかないが、GoogleMap2が導入されているWikiではぜひ使ってみよう。緯度とか経度を取得するのってなかなかやり方がわからなかったりするので、ここで紹介しておく。

Twitterにブログ更新情報などを自動ポストする方法

RSS Twitter

　この日記の「はてなダイアリーで ping 送信先を追加する方法」という記事で紹介した、Pingでブログの更新情報をTwitterに送信するTwitbackerというサービスが終了してしまった。先日のTwitterのDoS騒ぎのあたりからつながらなくなっていたので発見が遅れてしまったが、DoS事件とは無関係に（何故かタイミングを合わせるように）サービスが終了したようである。結構はてなダイアリーからpingを自動で送る方法を思いついてから重宝していたのだが残念だ。

　そこで、その代わりとなるブログ更新情報をTwitterに自動ポストするためのWebサービスがないかを探してみたら、こんな便利なものを発見した。『RSS 2 twitter』というサービスである。使い方はTwitbackerの様にブログ側からpingを配信するのではなく、RSS 2 twitter 側にブログのRSSを登録しておくというものである。英語onlyのページだが使い方は次の通り。

  • 『RSS 2 twitter』へアクセスする。
  • サインアップする（emailとPWのみでＯＫで認証作業も無し・・・）
  • Twitter側で認証*1
  • ブログのRSSを登録する。

　ちなみにこのツールを使うにあたって、bizMode≫『RSS 2 twitter』 blogエントリーを自動ポストしてくれるサービスを参考にさせていただいたのであるが、そこには複数ブログを登録したい時はRSSを集約するWebサービスを併用する様に書かれているが、複数のRSSを登録できるのでその必要はない模様。その記事が書かれた後で RSS 2 twitter がバージョンアップしたのかな。

　ただし注意点はTwitbackerの様なPing方式のツールと違ってリアルタイムにはTwitterにポストされないということだ。設定にもよるが最低30分間隔（この間隔を設定により変更可能）でしか反映されない。mixiで外部ブログを登録する時の様なものかな。

*1:私がやったら何もしなくても認証されたが、別セッションでログインしていたのでTwitterにオートログインしたのか、先に登録したメールアドレスが登録されたのかは不明。誰か詳細を分かる人がいたら教えてください！

.infoが350円で取得できるうちに独自ドメインでも取ろうかな

独自ドメイン

「ナウでヤングなレンタルサーバーロリポップ！」やWEBクリエイターに人気のレンタルサーバー 『HETEML』、「チカッパ！レンタルサーバー」などでおなじみのｐａｐｅｒｂｏｙ＆ｃｏ．社が運営するドメイン取得代行サービス「ムームードメイン」で「【 .info 】 が６０％値下げで３８０円！」というキャンペーンを行なっている。

私はsmart-boy.infoという独自ドメインをすでに持っているのだが、取得料金が安い今のうちに別のドメインでも取ってみようかな。どんなのがいいだろうか？

ムームードメインのキャンペーンの詳細は以下。

▼キャンペーン期間
開催中 〜 7月21日（火）正午
　
▼キャンペーン内容
『.info』
通常価格950円　　⇒　　キャンペーン価格【 380円 】(税込/年）

※新規ご契約期間１年に限りキャンペーン価格適用です。
　

新規契約期間１年ということは更新時には950円かかるということだろうが、それは１年後に考えればいいことだ。使い道がなかったら１年で解約すればいいし、１年後にサイト運営がある程度軌道に乗っていたら続ければいい。950円という通常価格自体世間一般の相場と比べたら安いし。ぜひ新ドメイン取得を考えてみよう。

新ドメイン取得は下記のバナーをクリック！



Firefox3.5 ではてなバーを有効化する方法

Firefox はてな

別の日記で書いたのだが、Firefox3.5正式版がリリースされたので入れてみたら、はてなバーが現時点では3.5に対応していなかった。結構便利なのに･･･。

しかし、Firefox3.5 でもはてなバーが使える方法を発見した。以下に紹介しよう。

ただし、実際にご利用する際は、あくまで自己責任でお願いします。私の環境では動作検証済みですが、万が一これを実行することで損害を蒙りましても当方は一切の責任を負いません。また、あくまで私的に試してみた方法なので、はてなさんやMozillaさんにも本件に関する問い合わせや苦情はご遠慮ください。

Firefox3.5 ではてなバーを有効化

現在インストールされているはてなバー(hatenabar)を削除する。
hatenabar.xpi をダウンロードする。

Firefoxからアクセスするとインストールしようとするので、Internet Explorer 等の他のブラウザで以下のURLにアクセスするとダウンロードできる。
http://www.hatena.ne.jp/tools/hatenabar.xpi
(もしくは現在のはてなバーが最新(0.5.9)の場合、プロファイル*1から hatenabar.xpi を探してみてもいいかも。)

hatenabar.xpi の拡張子を zip に変更する。つまりファイル名を hatenabar.zip に変更する。
hatenabar.zip を解凍する。
hatenabar.zip の解凍フォルダの直下にあるファイル install.rdf を編集して保存する。

35行目の "3.0.*"を
"3.5.*"に変更

解凍したファイルをzip圧縮する*2。
圧縮したファイルのファイル名を hatenabar.xpi に変更する。
上で作成したファイルを[アドオン]＞[インストール]でインストールする。
インストールがうまくいった様だったら Firefoxを再起動する。


こんな感じである。本当は私の方で作成した hatenabar.xpi を提供すればラクなのであるが、著作権等の問題があるのでWWWで公開はしないでおく。
繰り返しになりますが、あくまでご利用は自己責任でお願いします。


それから、本題とは直接関係ないが、Firefox3.5ユーザにとって便利なサイトを発見したので紹介しよう。

Firefox 3.5をインストールしたらまず行う設定

まだ、全部は試してないがいろいろと便利なTIPSが紹介されているので、Firefox3.5を使っている人はぜひ一度のぞいてみることをお勧めする。

*1:プロファイルの場所はWindowsの場合は http://support.mozilla.com/ja/kb/Profiles を見ればわかります。

*2:解凍したフォルダごとではなくフォルダ内のファイルをそのままのフォルダ構成でzip圧縮。

DISCOVER SHIRETOKO と 次世代Web

つれづれ

　ホームページに「DISCOVER SHIRETOKO」というバナーをつけた。SHIRETOKO とは世界遺産でもある太古の自然がそのままの形で残されている知床という意味でもあり、また、WebブラウザFirefoxの開発コードでもある。そして「DISCOVER SHIRETOKO」とは知床財団と(Firefoxを作っている団体の日本法人である）# Mozilla Japan が共同運営しているプロジェクトである。

　「DISCOVER SHIRETOKO」のページでは日本が誇る世界遺産知床とWebブラウザFirefoxにまつわるエピソードが並列で語られている。そこを読んだら無性に知床半島を旅してみたくなった。

　ホームページに設置した「DISCOVER SHIRETOKO」のバナーはバナー設置キャンペーンに参加しているサイトをお互いに行き来すると、バナーの中に描かれている樹がどんどん成長していくというものである*1。このプログラムのバナーの樹は、新しい Web 標準技術である「Canvas」で造られている。Canvas は W3C で策定中の HTML5 に追加されるグラフィック表示技術であり、新しい Web 標準技術として注目を集めているそうだ。詳しくはMozilla Developer Center のCanvas チュートリアルを参照。

　グラフィック技術 Canvas 以外にも HTML5 では新しいタグやら Webブラウザに実装されるデータベースである「Web Storage」、マルチスレッドで動作するプログラムをクライアント側に実装可能な「Web Workers」といった機能が追加される様である。今後のWebはXHTMLとして進化していくということが、数年前は言われていたが、結局普及がイマイチだったのでHTML5が検討されることとなったか。

　また、Webの陣技術としては、CSS3やJavascript2.0というものが検討されているようである。HTML5含めたこれらのWeb新機能については、以下のページでよくまとめられているので紹介しよう。

いま起きているWeb標準の進化、HTML5、CSS3、JavaScript 2.0

　おいおい勉強していくこととしよう。
　

*1:Firefox以外のブラウザで見ると「Firefoxで見てね」と表示される

検索エンジン作成システムtooland

Webサービス

　競馬リンク集「日本の競馬ページ」を先日リニューアルし、検索エンジン型としたのだが、今回はそこで使用している検索エンジン作成システム「tooland」を紹介しよう。

　百聞は一見に如かずということで日本の競馬ページを見れば、どんな検索エンジンかのイメージは沸くと思うが、あらかじめカテゴリー別に登録しておいたサイトの中からキーワード検索できるリンクシステムである。Yahooディレクトリのようなものかな。日本の競馬ページなら「そんなもんは興味ない」と思われる方も相当数いると思うが、そういう方はtoolandのページの事例紹介でも見てもらいたい。

　このtooland(too-search)はデータベース部分やコアなエンジン部分はtoolandのサーバ上にあるのだが、GUI部分などは自分で用意したサーバにおかなければならない。しかもPHPが使えるサーバに。そこがWeb運営初心者にはちょっととっつきにくい点かも知れないが、逆に言うとGUIを中心にある程度自分で好きなようにカスタマイズできる。また、独自ドメインなど自分が管理するサーバのドメインがURLとなるのもメリットである。

　一度設置してしまえば、ページの追加などの管理はWeb上でできるので非常に便利である。

　このツールは本来は相互リンク集を作るためのものだ。ただし、日本の競馬ページでは相互リンク如何にかかわらず登録できるようにしてあるが。つまり、自分のページに自動相互リンク集を作りたい場合に非常に有効なのである。相互リンクが張られているかを自動チェックする設定もできるので、便利である。世の中にはアクセスアップのために相互リンクを求めている人が多いので、設置しておけばそういう人がどんどん登録してくれるだろう。日本の競馬ページの場合、運営の趣旨は相互リンクではないので、その機能は使っていないが。

　自分のところに全てを置いて運営するよりはずっと楽なはずなので、サーチエンジン型リンク集の設置を考えている人はぜひ導入を検討してみよう！

相互リンク募集や、お友達のページ紹介、自分のお気に入りサイトを登録できる無料の検索エンジンツール。
登録を募集すれば色んなサイトとのつながりもでき、アクセスアップにも効果抜群。
カスタマイズ可能なテンプレ複数あり。見る人も楽しめるオリジナルのリンク集が作れます！