セキュアなモジュールを分別

パーソナライズドホームでタブが表示されるようになりました。 Google Calendarモジュールを表示すると、ig自体をhttpsで表示してもセキュアな状態が崩れるのが以前から気になっていました。なので、ためしにCalendarだけ別のタブに移してみた所、Calendar以外のモジュールを収めたタブはhttps接続が維持されるようです。 どうやらタブは完全に別ページで、Ajaxな機能で裏方で読み込んだり、なんてことはしていないみたいです。 Gmailや検索履歴モジュールがhttp表示される事に抵抗がある人にはいいかもしれません。

targetにスタイルを指定

Lucky bag::blog: CSS3 の target 疑似クラスで脚注を動的に表示する 最近、:hoverや:first-lineなどを利用したCSSを書いていたのですが":target"もあるんですね。 前に書いた「動きのあるメニューをCSSだけで」はマウスカーソルを置いているときしかメニューが展開されませんでしたが、コレを使えばクリックされたメニューを開いたままにできますね。 サンプル1 逆にコレだけだと「動きのない」メニューですが、:hoverと:targetを両方使えば、マウスをポイントして開き、クリックするとピンを打つように開いたままにする、なんてこともできます。 サンプル2 蛇足ですが、サンプル2ではリンクをわかりやすくするために"親x"の部分だけAタグで挟んでいます。当然DIV全体をAで挟んで下線と文字色を変えてしまえばAタグを使っていることを意識させないようにも見せられます。 サンプル3 さらに、動きのある記号付きメニューをCSSだけでと合せれば、開いているメニューの前にピンを打った画像を置いたりすることもできちゃいますね。 また:activeを使うとマウスでクリックしている間だけ開く、なんてこともできるんですね。 全てIE6では動きませんが。

デスクトップ検索でスパイ？

最近、Googleの検索履歴に見覚えのない単語をちらほら見かけるのですが、どうも知り合いのＰＣでGoogleのサービスを説明しようとしてログインした情報が残っていたようです。 私のアカウントでログインしたままになっているブラウザで持ち主がググると、私の検索履歴にその人の検索結果まで(当然)記録されてしまいます。 これって悪用できますよね。例えば、始めから捨てるつもりのGmailアドレスを取得して、ネットカフェなどでログイン。パーソナライズドホームが表示されないようにした後、放置。 これで後からその端末で誰かが検索すれば、検索履歴が残ります。自宅のＰＣから同じアカウントでログインすれば履歴は閲覧自由です。気づいた誰かがログアウトするか、Cookieがクリアされるまで簡易スパイウェアのように利用できてしまいませんか。 このブログを見に来るような方は、(洗剤を探していて迷い込んだ方でもない限り)技術系の人が大半だと思うので「そんなもん気づくだろ」と思われるかもしれませんが(私もそう思いますが)実際、私の知り合いは気づいていないようです。そこら辺いかに気づかせないか、はハッキングとフィッシングの問題だと思うのでここでは置いときますが。 Googleデスクトップ検索などがスパイウェア的だという警告の大半は、 ・自分の意思でインストールした人が他人に端末を利用される ・ログアウトし忘れた共用端末でアカウント情報を他人に見られてしまう ・オンラインの情報がシステム欠陥により漏洩 ・「Googleが」情報を収集するためのスパイウェアじゃないか？ といった「利用者の情報がどれだけ他人に漏れないか」という視点で語られますが、「あえて他人に利用させる」というのは考えたこともなかったので不謹慎かもしれませんが、ちょっと新鮮です。 やってることはまんまスパイウェアですが、なまじスパイウェアに分類されていない分、気づきにくくて怖いです。 世の悪人は素人が今更ながらに気づく、こういった問題を先回りして見つけていくんですかね。

Blogger他 雑多メモ

Firefox2.0評判よさげですね。β2を入れたっきり。RC1が出る前にＨＤＤが飛んで以来入れなおしていません。どうせなら1.5の自動更新でバージョンアップされるのを試してみようかと待っているのですが、一向に更新される気配がありません。 最近作っていたCSSが2.0でちゃんと動くのか早くテストしたいところですが、更新されないものは仕方ないので、やろうと思っているBloggerテンプレートのメモでも。 ・トップページにメインセクションの無いテンプレート こういうサイトを見ていると思うのですが、もうトップページに本文て無くても良いのではないでしょうか。トップページには各種フィードやアーカイブだけ。個別ページを表示すると初めて本文が全文表示されるテンプレート。本腰入れれば割といけそうかもしれない。 当ブログも割とリーダーから表示している方がいるようなので、トップにずらずら過去数日の全文を表示する必要も無いのではないかと思う次第です。 ・Bloggerで続きを読む。 Bloggerでreadmore(続きを読む)を実装する幾つかの手段では、全文取得しておきながらスタイルで隠すものが多かったと把握しています。上記のアレンジで、Blogger betaにもともとあるFeed表示WidgetをメインWidgetのようにカスタマイズして、自サイトの要約フィードを表示すれば実際にデータ量が少なくてすむreadmore機能がBloggerのテンプレートだけで実装できそうですね。 ・各種フィードのマトリックス 個人的にはフィードは全文配信派ですが、どう見たいかは個々人の趣味によるので 　・全文/要約 　・RSS/Atom 　・リーダー追加 　・ブクマ追加 などの各種フィードやアイコンをマトリックス表示で網羅してくれるWidgetが作れたら良いですね。ブログのURLから勝手に生成してくれるような。これは根気と時間の許す次第ですが。 ・ソースコードが見やすいテンプレート Syntax HighlighterがBloggerのCSSと干渉しないようにセレクタを書き直せばよさそうですが、コレも根気と時間次第ですね。

Blogger betaのテンプレート

Bloggerでタグクラウドを入れるカスタマイズの最中に気づいたメモです。 Blogger betaでのHTMLの構成は大体こんな感じだと思います。 ※大体のイメージです。実際ウィジェットの数や並び順によっても違います。 HTML ├DIV class="Header" ├DIV class="Main" ├DIV class="Sidebar" │├DIV class="Widget" type="profile" │├DIV class="Widget" type="label" │└DIV class="Widget" type="Archive" └DIV class="Footer" それぞれヘッダ、ボディ、サイドバー、フッターなどの中に複数のウィジェット(部品)が入れられているイメージです。 実際のテンプレートはこんな感じです。(サイドバー内のラベルウィジェットの例) ※簡略化しているのでコレを貼り付けても実際には動かないと思います。 1:<b:section class='sidebar'> 2:　<b:widget type='Label'> 3:　　<b:includable id='main'> 4:　　　<b:loop values='data:labels' var='label'> 5:　　　　<a expr:href='data:label.url'><data:label.name/></a> 6:　　　</b:loop> 7:　　</b:includable> 8:　</b:widget> 9:</b:section> <b:includable id='main'>はおまじないです。C言語の#include <stdio.h>と同じです。 ホントは必要なんだけど、今は気にするな、的なものです。 このテンプレートがHTMLとして展開されるとこんな感じになると思います。 ※くどいようですがイメージです。 1:<div class='sidebar section' id='sidebar'> 2:　<div class='widget Label' id='Label1'> 3:　　　　<a href="http://knyijong.blogspot.com/search/label/API'>API</a> 4:　　　　<a href="http://knyijong.blogspot.com/search/label/Google'>Google</a> 5:　　　　<a href="http://knyijong.blogspot.com/search/label/Gmail'>GMail</a> 6:　　　　<a href="http://knyijong.blogspot.com/search/label/Blogger'>Blogger</a> 7:　</div> 8:</div> テンプレートをJavaScriptで書いたとしたらこんな感じでしょうか。 ※もちろんイメージです。 1:function Widget(_type) { 2:　var out = document.getElementById("main"); 3:　if(_type=="Label"){ 4:　　var lables = document.getElementsByWidgetName("Label")[0]; 5:　　for(label in labels){ 6:　　　out.innerHTML = 7:　　　　"<a href='" + label.url + "'>" + label.name + "</a>"; 8:　　} 9:　} 10:} これ、書いて見て思ったんですが、Blogger betaのテンプレートとJavaScriptを使って各ウィジェットデータのコレクション作れそうですね。一度オブジェクトとして保持してしまえば、ページ表示後にJavaScriptで煮るなり焼くなり。 こんな感じで 1:<b:section class='sidebar'> 2:　<b:widget type='Label'> 3:　　<b:includable id='main'> 4:　　　<script> 5:　　　　var Widgets = {}; 6:　　　　Widgets["Label"] = []; 7:　　　　<b:loop values='data:labels' var='label'> 8:　　　　　Widgets.Lable.push({ 9:　　　　　　url:"<data:label.url/>", 10:　　　　　　name:"<data:label.name/>" 11:　　　　　}); 12:　　　　</b:loop> 13:　　　</script> 14:　　</b:includable> 15:　</b:widget> 16:</b:section>

Googleブログ検索がリリース

グーグル、「Googleブログ検索」を提供開始--英語版よりも範囲を拡大 - CNET Japan "Google Blog Search"が「Googleブログ検索」として日本語対応だそうです。検索結果のFeed出力してくれたり、時系列の絞込みが出来たりと何かと便利なブログ検索が、日本語で使えると便利ですね。

Google Blog Search : http://blogsearch.google.com Googleブログ検索 : http://blogsearch.google.co.jp 表示言語設定を「日本語」にしていれば.comの方も日本語で表示されるみたいです。.comの方が「すべてのブログ」「日本語のブログ」のラジオボタンが表示されない分すっきりしていていいかも。クエリーに日本語が混じっていれば海外のブログはヒットしないでしょうし。

Labelをクラウドに

リストだと長いのでクラウドにしてみました。 CSSで結構イケますと言ったそばからテンプレートタグをゴリゴリいじっています。ラベルウィジェットは属性などの指定が少なすぎていじりづらいです。 ラベル数別の大きさは5段階で、ラベル数がいくつだとどの大きさになるかは固定です。最多と最少から計算して割り出したりはしていません。ので少ないうちは全体的にちょっと小さいですね。(5段階のスタイル指定自体はtagClickのパクリです) スタイル次第でどうとでもなりますが、全体数に応じて手動で調整というのはちょっとスマートじゃありませんね・・・ 眠いので説明はまたの機会に。

Blogger betaのテンプレート

をいじってみて思いましたが、バックアップとったほうが良いです。もちろんテンプレート解説サイトでも常套句のように書かれていることですが、旧Bloggerと比較してもバックアップしないと危なくなっていると思います。 Blogger betaは基本的にwidget(ウィジェット)と呼ばれる四角いパーツを並べ替える感じで作っていきますが、テンプレートが二段階に分かれています。

• ウィジェット間の並びや全体のレイアウトを決める「外枠」の記述
• 各ウィジェット内部の構成を決める「内枠」の記述

旧Bloggerのテンプレートではこの二つが一緒くたに記述されている感じでした。なのでBlogger提供のテンプレートを利用している人ならいざとなったら"Pick New Template"でデフォルトに戻すことができたのです。いじりすぎてなんだかわからなくなったときによくこれで戻していました。 しかしBlogger betaでは"Pick New Template"でテンプレートを戻しても前述の「外枠」の記述しか元に戻りません。「内枠」の記述部分を下手に消すと戻りません。 適当に新しいブログを作成してそのテンプレートをコピーするといった二度手間払わないと元に戻りません。 幸い「内枠」の記述部分は"Edit HTML"画面の"Expand Widget Templates"のチェックを外していれば表示されない様に配慮されています。慣れないうちは下手にいじらない方がいいですね。 また、「外枠」の記述ならCSSをいじるだけで結構イケます。CSSで色々いじっているうちに全体の構成もなんとなく見えてきます。 ただ、CSS弄り過ぎてテンプレートのカスタマイズよりCSSハックに夢中になるというありがちな脱線の罠もあります。

マルチカラムなデザインに

テンプレートを変更してみました。 最近、外国のサイトなんかでよく見るボトムバー(?)がマルチカラムなレイアウトです。別に三つも表示したいものがあったわけじゃないのですが、CSSやHTMLの技術的な興味からの挑戦です。 作ってみて一番驚いたのは[Template] > [Page Elements]のレイアウト表示画面がちゃんとマルチカラムになっていることでした。よくできてますね。

dataスキームでのSWFファイル指定が不可に

今開いているサイトへのリンクを作成するブックマークレット リンク生成 クリップボード ブックマークレット: という物を使っていたのですが、気がついたら使えなくなっていました。 FirefoxではJavaScriptでクリップボードの操作ができないため、 こちら 最速インターフェース研究会 :: Firefoxでテキストをクリップボードにコピーする方法 で紹介されていたFlash経由で貼り付ける方法を利用していました。この方法ではFlashファイルをbase64エンコードしたものをdataスキームで指定することでスクリプト中にファイルを埋め込んでいます。しかし、Flashの最新版9では、dataスキームで指定したFlashファイルを扱ってくれないようです。 「今開いているサイトへのリンク作成」ぐらいはどうとでも換わりがききますが、データスキームによる貼り付けができなくなるのは不便そうですね。 参考： Collection & Copy - LDR、IMEをオフにするGreasemonkeyスクリプト(Flash8限定) 暴満館] Code Snippetsを見やすくするGreasemonkeyスクリプト

テンプレートの修正

このブログではBlogger提供の"Rounders 4"というテンプレートを使用しています。Blogger betaへの移行を渋った理由のいくつかの内の一つとして、このテンプレートのデザインがbetaでは崩れていることがあげられました。 この角が丸いヘッダは 　底辺の角が丸い背景画像 の上に 　上辺の角を丸くする画像 を重ね合せて実現しているようです。 Blogger betaでHTMLの構成が変更されたことでタグの親子関係が逆になったのにCSSの指定は旧Bloggerのまま、というのが原因のようです。つまり 　上辺の角を丸くする画像(角の丸み以外は透過) の上に 　底辺の角が丸い背景画像(上辺は四角い) を重ね合わせていたので、上辺の角が丸い部分には背景画像がなく、背景画像の上端に丸みがなくなっています。 ついでにpaddingやmarginも少々修正が必要です。 ・テンプレートのCSS #header-wrapper { background: #476 url("http://www.blogblog.com/rounders4/corners_cap_top.gif") no-repeat left top; margin:22px 0 0 0; padding:8px 0 0 0; color:#ffffff; } #header { background:url("http://www.blogblog.com/rounders4/bg_hdr_bot.jpg") no-repeat left bottom; padding:0 15px 8px; } ・修正後のCSS #header-wrapper { background: #476 url("http://www.blogblog.com/rounders4/bg_hdr_bot.jpg") no-repeat left bottom; margin:22px 0 0 0; padding:0px 0 0 0; color:#ffffff; } #header { background:url("http://www.blogblog.com/rounders4/corners_cap_top.gif") no-repeat left top; padding:8px 0 8px 15px; }

Google DocsからBlogger betaへの投稿

インタフェースは変更されていますが、設定項目はWritelyからBlogger betaへの投稿で書いたものから変更されていないようです。で肝心の投稿結果ですが、

1. タイトルの反映

   されず

2. タグ(ラベル)の反映

   されず

3. 日本語の処理

   文字化け

4. ポスト状態

   draft->publish

一個改善しました。気長に待ちましょう。 また、DocsのBlog Site SettingsにAPIを選択するプルダウンがありますが、この選択肢は

• Blogger API
• MetaWeblog API
• MovableType API

となっています。当然Bloggerへの投稿はBlogger APIだと思っていたのですが、"Test"ボタンによるテストは三ついずれもpassします。ただし、投稿時にMetaWeblog APIだとエラーが出ます。実際に投稿まで可能なのはBlogger APIとMovableType APIです。BloggerってMovableType APIで投稿できるんですね。

いまさらBlogger betaに

昨日の夜、Blog This!から投稿したら、こんな所でまで、さっさと変えろと言われてしまったので衝動的に変えてしまいました。 多分トップページ分のフィードが無駄に再送されたことと思います。 三つあったBlogger用のアカウントをひとつのGmailアカウントに統合するか、など色々悩んでいたのですが、キリがなさそうなので結局分けたままです。ブログの管理アカウントの変更などはこういった機会以外にも常時できると便利だと思うのですが。 また最近betaへの移行とは関係なくBloggerのブログのフィードが急に再送されてきます。すでに移行された方のブログや自分の更新していないブログのフィードまで再送されてくるのはなんなんでしょうか。

Google Docs(Writely+Spreadsheets)

http://docs.google.com/ WritelyとSpreadsheetsがDocsというドメインで統一されました。 アカウント情報画面のどちらのリンクを押しても上記のアドレスにとばされます。 Writelyで今までに書いたドキュメントとSpreadsheetsで今までに書いたシートが同じ管理画面に表示されます。インタフェースも今までのWritelyからがらっと変わってGoogleっぽくなってますね。

Google ReaderのUpdate

Expanded viewの最後に"No more items"が表示されるようになったのがいい感じですね。 今までスクロールした時に、最後のエントリーが１画面以下の短い文章だと"Mark as read"にチェックが入らず不便だったのです。どうも"No more items"は最後のエントリーに応じて高さが変わるようで、最後のエントリーが必ず既読になってくれます。

Gmail画面からPicasa

Picasa Web Albums Gmailの左上のリンク(ナビゲーションバー？）に"Photos"が追加されてますね。 最近知ったのですが、Picasa Web Albumsってpicasaを利用しなくてもオンライン・オンリーで使えたんですね。 写真撮らないのでpicasaはいいや、と触っても見なかったため、いきなり英語版のpicasaでは使い勝手がさっぱりです。 要領オーバーするとどうなるかわからないBloggerの画像アップロード機能よりも、整理しやすいPicasa Web Albumsの方がスクリーンショット整理にも向いてるかもしれません。 なんにつけても、食わず嫌いは損します。

Google Reader がUpdate

Hit Okano's Blog: Google Reader Update こないだ更新したばかりなのに、もう機能拡張したようです。 開いたときにページを選べるのは便利ですね。 All itemsページをExpanded viewでサイドバー非表示、の状態が個人的に一番楽です。マウスホイールかスペースを連打しているだけで、文字通り流し読み。 できればuキーによるサイドバーの表示状態も記憶してくれたら言うことないのですが・・・！？

ウェブサイトのサムネイル(縮小画像)を作成

SimpleAPI - ウェブサイト・サムネイル化ツール すごいシンプルでいいですね。ヘルプもいらないぐらい。 トップページで「サムネイルを生成」すればHTMLのタグまで自動生成してくれますし、 http://img.simpleapi.net/small/http://サムネイル化したいサイト とすれば自動で埋め込みもできるそうです。 ちょっとテンプレートをいじれば、トラックバックやバックリンク一覧にサムネイルを貼るなんてこともできる様で。 このページのサムネイルです。