Web製作メモ帳

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

HootSuiteからRSSをPOST

Twitter

昨日の記事で書いた通り、RSSからTwitterへの自動ポストをHootSuiteでやってみたのだが、うまくいった。なかなかよさげである。

FeedTweetでPOSTされた短縮URLでみられる「リンク先のページ上部に余分なバーが挿入される上にブラウザのURL表示部が正式URLではなく短縮URLのままになる」という点はHootSuiteでも一緒なのだが、HootSuiteの場合上部のバーの「このブラウザでは次回からバーを表示しない」*1をチェックすると２回目以降のアクセスでは表示されなくなる。だから、読者にとってはそちらの方がいいだろう。

また、プレフィックス（RSS情報の前につける固定の文言）をつけられるのも魅力である。海外のサービスで設定画面等は英語なのだが、Tweetされた結果はプレフィックスに日本語を使っても文字化けしない*2。

というわけで、RSSによるウェブ更新情報自動通知は基本的にすべてHootSuiteを使うこととした。「基本的に」というのは、tumblrのブログはtumblr自体にTwitter連携機能があってそれを利用しているため、それ以外のものをHootSuiteを使用するということである。

HootSuiteについての詳しいやり方等は昨日の記事「HootSuiteでRSSフィードをTwitterに投稿してみるテスト」を読んでいただきたい。

*1:本当は英語で出てくる。

*2:RSS2Twitterではプレフィックスに日本語を使うと文字化けしたので英数字しか使えなかった

HootSuiteでRSSフィードをTwitterに投稿してみるテスト

Twitter

最近ウェブベースのTwitterクライアントであるHootSuiteを使い始めたのだが、なかなか便利だ。というよりかなり便利だ。タイムラインをマルチカラム化できるのが、そのカラムをさらに「タブ」で区分けすることができる。マルチカラム化ならTweerDeck等でもできるのだが、タブで分けられるというところが便利である。以前はTwiitDeckを使っていたのだが、私の場合Twitterのリスト機能を活用しているので、カラム数が多くなり、見たいカラムがどこにあるのか探すのに苦労していた。分野ごとにタブで分けておくと、見たいカラムを探すのが非常にやりやすくなる。マルチカラム＆タブ化以外にも機能が非常に充実しており、その割に非常に軽いのでおすすめである。

更にウェブブラウザとしてGoogle Cromeを使っていることが前提となるが、勝間和代さんのブログにある「HootSuite + Google Chrome + Fix HootSuiteがTwitterで最強の環境だと個人的には思います」という記事に書いてある方法を使うとかなり使いやすくなる。これはオススメなのでぜひ試してみよう。

さて、そのHootSuiteであるがRSS / Atomのフィードを登録しておいて、RSSやAtomが更新されたら更新情報を自動ポストしてくれる機能もあるようだ。そこで、試しにこのブログを登録してみた。設定(Setting)の「RSS / Atom」タブから登録できる。

というわけで、この記事がちゃんと登録できるかどうかテストです。そのテストも兼ねてこの記事を書いたのだけど。

今まではFeedTweetというサービスを使用していたのだが*1、リンク先のページ上部に余分なバーが挿入される上にブラウザのURL表示部が正式URLではなく短縮URLのままになるのでちょっと不便だった。HootSuiteのRSS投稿を試してみて、そちらの方が便利な様なら他のブログも含めて本格的に乗り換えてみようかと思う。

*1:その前はRSS2Twitterというのを使っていたのだが暴走して過去記事を大量ポストする不具合が目立つようになったので乗り換えた。

t2bの出力HTMLの文字数を減らすためにXSLTをカスタマイズ

XSLT Twitter ブログ

Twitterの１日のつぶやきをまとめたブログを作成するためにt2bという自動投稿ツールを使っている。Twitterから１日のつぶやきの内容を取得し、ブログに自動投稿してくれるウェブサービスである。そのt2bで変換設定を「デフォルトHTML」にしていたのだが、つぶやきがちょっと多いとブログ側の文字数制限を超えてしまい、うまく投稿されないことがある。困ったものだ。文字数が多くなる原因はHTMLのタグにあるのであった。t2bが吐き出すHTMLはクラスなどいろんなタグ属性が設定されていて、タグの分も文字数にカウントされるため、文字数が増えてしまっていたのだ。「テキスト出力」というモードもあり、それを使うとリンクとかが設定されないので、文字数は最低限で済むが味気ない。

そこでt2bの変換モードを「カスタムXSLT」にして無駄なタグ属性を削ったり、クラス名を短くしてみたりした*1。その文字数が少なくてすむXSLTをここで紹介しよう。

<?xml version="1.0" encoding="UTF-8"?>

<xsl:stylesheet
        xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
        version="1.0">

    <xsl:param name="date" select=""/>

    <xsl:output method="html" encoding="UTF-8"/>

    <xsl:template match="/">
        <xsl:apply-templates/>
    </xsl:template>

    <xsl:template match="statuses">
        <div class="t2b">
        <dl class="statuses">
        <xsl:apply-templates />
        </dl>
        </div>
    </xsl:template>

    <xsl:template match="status">
        <xsl:element name="dd">
            <xsl:attribute name="class">hent</xsl:attribute>
            <span class="s-body">
                <span class="e-content"><xsl:value-of select="text2" disable-output-escaping="yes" /></span>
                <span class="e-meta">
                    <xsl:text> (</xsl:text>
		            <xsl:element name="a">
		                <xsl:attribute name="href">http://twitter.com/<xsl:value-of select="user/screen_name" />/status/<xsl:value-of select="id" /></xsl:attribute>
		                <xsl:attribute name="target">_blank</xsl:attribute>
		                <span class="pub"><xsl:value-of select="created_at_lt" /></span>
		            </xsl:element>
                    <span>from <xsl:value-of select="source" disable-output-escaping="yes" />)</span>
                    <xsl:if test="in_reply_to_status_id/text() != ''">
                        <xsl:text> </xsl:text>
                        <xsl:element name="a">
                            <xsl:attribute name="href">http://twitter.com/<xsl:value-of select="in_reply_to_screen_name" />/status/<xsl:value-of select="in_reply_to_status_id" /></xsl:attribute>
                            <xsl:attribute name="target">_blank</xsl:attribute>
                            in reply to <xsl:value-of select="in_reply_to_screen_name" />
                        </xsl:element>
                    </xsl:if>
                </span>
            </span>
        </xsl:element>
    </xsl:template>

</xsl:stylesheet>


デフォルトHTMLと比べると文字数が格段に少なくて済む。デフォルトHTMLと異なる点は、

  • あまり使わない様な属性を削除した(Aタグ内のrelなど)
  • class属性（クラス名）をデフォルトよりも短くした
  • Twitterのstatusへリンクされた投稿時刻等を括弧でくくる様にした(文字数の問題ではなく本がリンクで終わっていると繋がって見える現象への対処)
  • リスト形式を OL ではなく DL にした（これは私の好みの問題なので必須ではない）

といったところである。

使用前と使用後の違いは実際に私のブログを例にするので、それをご覧いただきたい（興味があればソースを見てみるとHTML出力が違ってるのがわかります)。

ご覧の通り、見た目はほとんど変わらない。リスト形式を ol から ul に変更しているので番号が出ているか出ていないかという違いはあるが、文字数を大幅に減らしたことによる見た目の影響はほとんどないのである*2。

カスタムXSLTを使用するにはt2b(α)管理画面から「変換設定」を選んで、変換XSLTリストボックスでカスタムHTMLを選ぶと、下のほうにカスタムXSLTフィールドが表示されるので、そこに上記のコードを（必要に応じてカスタマイズして）コピーすれば設定できる。

これで、ブログ側の文字数制限で失敗することが格段に減るだろう。

今回t2bからの投稿設定をいじってみて最も苦労したのはHTML形式で投稿するとダグ間にある改行がブログに表示する際に勝手に<BR>に変更されてしまう。これは私がTwitterまとめブログを置いているlivedoorブログに限らず大多数のブログシステムにおいてそうだろう。(少なくともt2bの)XSLTはHTMLタグ間の改行の微妙な制御ができないのが問題であるんだよな。XMLの世界では改行は無視されるので、XSLTプロセッサは改行の出し方はあまり意識されずに作られているが、ブログシステムの入力としてみた場合は改行コードは改行として扱われ<BR>に変換されてしまうので。
その辺の改行の数の制御に一番手こずったのだが、時間がかかった割にはそれほど見栄えのしないものになってしまった。本当はもうちょっと無駄な改行を減らしたいのだが…。

*1:t2bはTwitterから自動取得したXMLファイルをXSLTを用いてHTMLに変換してブログにポストしている。XSLTとは、XMLによって記述された文書を他のXML文書に変換するための簡易言語であり、XML文書の構造を別の形式に変形するための変換ルールを記述するもの

*2:ただし、すでにt2bのデフォルトHTMLのクラス名を用いてCSSを設定している場合はCSSにクラス名だけを変えて変更が必要

FeedTweetを使うこととした

RSS Twitter

　ブログ等のRSSフィードから更新情報を自動で拾ってTwitterにポストするサービスとしてRSS2Twitterというウェブサービスを使っていたのだが、最近調子が悪く、過去に書いたブログ記事を拾って大量ポストしまくるので、利用を停止した。

　その代わりとして使うことにしたのが、FeedTweetというウェブサービスである。RSS2Twitterと同様、ブログのRSSから更新情報を拾ってTwitterにポストしてくれるサービスだ。RSS2Twitterは管理画面等が基本的に英語なうえに、ブログのタイトルで日本語を使っていたりすると管理画面上で文字化けする*1のだが、このFeedTweetは日本語に対応したサービスなので、管理画面も日本語でありブログ自体が日本語でも問題なく使えるのが便利だ。

　さて、これがFeedTweetに登録してから最初のブログ更新。うまくTwitterにポストされるかな？

　ちなみに私のTwitterアカウントは@smart_boyである。間にハイフンが入るのに注意*2。興味のある人はフォローをお願いします。ウェブ制作の話題よりは競馬の話題がメインですが。特に中央競馬開催日（主に土日）はポストが多いのでご注意を。

*1:Twitterへポストされる内容は文字化けはない。念のため。プレフィックスとかは日本語文字は使えないらしいけど。

*2:smartboyはTwitter登録時に既に他の人に取られていた。

Google Crome 4 の拡張機能あれこれ

Google Chrome Web

Google のウェブブラウザ Google Chrome の新バージョンGoogle Chrome 4 がリリースされたのでインストールしてみた。軽くてサクサク動く安定したブラウザなので、便利なブラウザなのだが、前バージョンでは拡張機能は一応あるのだがインストールすると「拡張機能を使用するにはベータ版を入れてください」みたいなメッセージが英語で出てくるので、ノートＰＣ用に拡張機能無しで入れて使っていただけだったが、Google Chrome 4 では正式版にも拡張機能をちゃんとインストールできる。

そこで今後はGoogle CromeをメインＰＣでも使用していこうと思う。Firefoxでいろいろと拡張機能を入れた環境に慣れているので、Google Chromeのそのままの機能ならちょっと使いづらい。そこで色々と拡張機能を入れてみた。

というわけで、今現在私がインストールした拡張機能を紹介しよう。あくまで私のメモなので、他の人にとってそれが必ずしも便利な使い方なわけではないので、その辺は注意していただきたい。それに他にも探せばもっと便利なものもあると思うが、とりあえず現状入れてみたものを列挙しておく。

Googleサービス関連

Google Reader Plus

Google Reader (RSSリーダー)を使用している人にオススメ。リーダーのGUI等を自分が見やすいようにカスタマイズできる。個人的には記事タイトルをフィード毎に色分けされる機能が便利だと思う。

Chrome Reader

閲覧中のページと関連付けられたRSSフィードをGoogle Readerに追加するボタンをアドレスバーに表示する。
Googleリーダへのフィード登録機能としては他に RSS Subscription Extension というのがあるが、Google Reader を使う場合、機能が重複するため不要と思われる(RSS用のファイルに直アクセスした場合には Crome Reader は対応していないが、Google Reader のブックマークレットがあれば十分)。Chrome Readerの場合、閲覧中のページにRSSが関連付けられているかどうかがアドレスバーへのRSSアイコンの表示の有無でわかるので便利。

Google Mail Checker Plus

Google Mail をチェックして未読件数を表示する。Google Mailページにアクセスしなくてもタイトル、受信時刻、差出人等の情報をポップアップ表示で確認することができるのが便利。

Google Quick Scroll

Google検索結果で見つけたフレーズをページ内で素早く見つける。

PageRank

Google ページランクをツールバーに表示する。閲覧中のページの重要度が（ある程度）分かる。

ブックマーク関連

Xmarks Bookmarks Sync

複数の環境（PC等）でブックマークを共有する。未確認だがFirefox版のアカウントを使ってFirefoxのブックマークとも同期できるらしい。

Hatena Bookmark GoogleChrome extension

はてなブックマーク向け拡張機能。はてブへの登録はもちろん、そのページのブックマークページにアクセスしたりブックマーク数が表示されたり等機能が豊富で便利。また、ブックマークページへアクセスしなくてもはてブで付けられているコメントを閲覧できる。

その他

Smooth Gestures

最近のウェブブラウザでは必須機能とも言えるマウスジェスチャー。Chrome Gesturesというのもありそちらの方が使用しているユーザ数が多いのだが、Smooth Gestures の方が評価が高かったのでこちらにしました。

IE Tab

閲覧中のページをIEで閲覧した様にして表示する。IEでしか見れないようなページを見るときに使用する。

Chromed Bird Twitterクライアント

Twitterクライアント。下までスクロールさせると自動的に古いつぶやきが表示されるので便利。リストにも対応している。（意外と使えるが、私は現在他のクライアントとの兼ね合いで無効化中。）

Share on Tumblr

Tumblr へのポストを補助する機能。

2011/8/7 追加

Clip to Evernote

　Evernoteを使っている人向け。閲覧中のウェブページの内容をEvernoteにクリップしてくれる。

Fix Hootsuite Ext

　ウェブ上のTwitterクライアントHootSuiteを使っている人向け。HootSuiteを使うにはchromeを使ってこれを入れるとかなり便利につかえる。

Greasemonkey

Firefox で指定ドメイン・URIに対しJavaScriptによるユーザーサイドスクリプトを追加することの出来るGreasemonkeyという便利な機能があるが、Google Chrome4では代わりにそのままスクリプトを登録できる。というわけでFirefoxで使用していたGreacemokeyのスクリプトを登録。
スクリプトを js 形式で保存して、ドラック＆ドロップ等でGoogle Chromeに読み込ませると拡張機能として登録できる。ウェブ上にあるものはそのスクリプトファイルにアクセスすれば登録用ダイアログが出るのでそこから登録する。

詳しい方法は「Greasemonkey - Google Chrome まとめWiki」に書かれているので、そちらも参考にしていただきたい。

なお、私のChrome環境には拙ブログ「はてなダイアリーで ping 送信先を追加する方法 - smartboyのWeb製作メモ帳」で紹介した方法で作ったはてなダイアリー用自作スクリプトなども登録しておいた。はてなダイアリーでブログを書いている人は利用してみよう！

Google Crome で表示した時のタグ属性の落とし穴

HTML CSS

私が運営しているページで、スタイルシート(CSS)の floatプロパティを使って要素を右寄せをしているページがあり、FirefoxやIEではちゃんと float を付けたタグの中身が右寄りに表示されて、その後の要素がその左に表示されるのだが、Google Cromeを使ってそのページを見ると、floatプロパティが効かずにレイアウトが崩れてこちらの意図しないものになるという現象が起きていた。 Google Cromeで見ると、他のブラウザで見た場合とはレイアウトが異なって見えるのである。


Google Crome のバグなのかな？と思っていたが、実際は意外なところに落とし穴があった。まあ、要は私のHTMLでCSSを使用する時の仕様の勘違いなのだが。

私がスタイルシートをタグの中に直接記述する時に、

<div style="{float:right;}">

の様に記述している箇所があったのだが、実際にはstyle属性では { } の様な中括弧は不要で、

<div style="float:right;">

の様に中括弧を付けずに書くのが正しいようである。

中括弧付きでも他のブラウザではきちんと表示されるのだが、Google Crome ではstyle要素が有効にならなくなってしまう。中括弧は不要というだけではなく、付けてはいけないものだったのだ。

CSSの記述方法としては他に、

<head>
<style type="text/css">
<!--
div.rclass {float:right;}

    

  • 

      

    • >
      • 

    • 

</head>
<body>

:

<div class="rclass">

:
</body>

の様に、ヘッダ部でスタイルシートを定義し、実際に使用する箇所のタグではclass属性で指定する方法や、

<head>
 <link rel="STYLESHEET" type="text/css" href="style.css">
</head>

:

の様にファイルを外出しして外出ししたファイルの中でスタイルシートを定義する実装方法があるが、これらの場合は中括弧を付けなければならない。これらと混同して、style属性でも中括弧付きで書くのが正式だと勘違いしていたのである。

しかし、実際はstyle属性では中括弧は不要であり、付けてもスタイルシートが有効となるブラウザもあるが、Google Cromeの場合はならないのである。

style属性を例に出したが、これは他のタグ属性に関しても同様であろう。style属性が、他のCSSの実装方法では中括弧を使うだけに勘違いしやすいので特に注意が必要だ。

今後はGoogle Crome もウェブブラウザとしてのシェアがますます伸びてくると思われる。ホームページを作っているがGoogle Cromeでは動作確認・表示確認をしていなかった人は、一度確認してみてもいいだろう。意外なところに落とし穴があるものである。

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ではぜひ使ってみよう。緯度とか経度を取得するのってなかなかやり方がわからなかったりするので、ここで紹介しておく。