May 28, 2010
twitter記法に対応
現在、公開している二つのデザイン
の双方を、twitter記法対応にしました。
detailにしたり
「シャアは俺達と一緒に反連邦政府の連中と戦ったが、あれで地球に残っている連中の実態がわかって、本当に嫌気がさしたんだぜ。それで、すべての決着をつける気になったんだよ」
tweetにしたり
@amuro_ray_bot: 「シャアは俺達と一緒に反連邦政府の連中と戦ったが、あれで地球に残っている連中の実態がわかって、本当に嫌気がさしたんだぜ。それで、すべての決着をつける気になったんだよ」
@amuro_ray_bot: 「しかし革命のあとでは、気高い革命の心だって官僚主義と大衆に飲み込まれていくから、インテリはそれを嫌って世間からも政治からも身を退いて世捨て人になる。だったら…！」
tweetをblockquoteに入れたり
@amuro_ray_bot: 「シャアは俺達と一緒に反連邦政府の連中と戦ったが、あれで地球に残っている連中の実態がわかって、本当に嫌気がさしたんだぜ。それで、すべての決着をつける気になったんだよ」
@amuro_ray_bot: 「しかし革命のあとでは、気高い革命の心だって官僚主義と大衆に飲み込まれていくから、インテリはそれを嫌って世間からも政治からも身を退いて世捨て人になる。だったら…！」
treeにしたり
「これだ。カメラはロングサイズでしか撮影してないし、砲身もないように見える。ダミーだな」
@amuro_ray_bot アクシズの後部は地球の引力に引かれて落ちる、貴様達の頑張り過ぎだ！
2010-05-19 15:46:12 via web to @amuro_ray_bot
@S_Crossing 「ふざけるな！たかが石っころひとつ、ガンダムで押し出してやる！」
2010-05-19 15:48:03 via API to @S_Crossing
blockquoteの中にtreeしたり
「そりゃあエゴだよ」
@amuro_ray_bot そんな男がクェスには随分冷たかったな！
@S_Crossing 「俺はマシーンじゃない！クェスの父親代わりなどできない。だからか…、貴様はクェスをマシーンとして扱って…！！」
2010-05-07 11:28:06 via API to @S_Crossing
デザイン的に、detail の場合は blockquote で挟む必要ないですね。
May 27, 2010
どうやら新規に書かれた記事のカテゴリーが効かなくなっているようだ（テスト投稿）
メンテ後に書いた記事のカテゴリーの絞りこみができない。記事一覧でも効かない。メンテ以前の過去の記事ではできる。
気付いたバグ
- twitter:post_id:title記法で span の終了タグがひとつ余分にある
2010.5.27のメンテ後に書いた記事のカテゴリーでの絞りこみができない。ただし、メンテ後に新しく作成したカテゴリーに関してはできる。直った。キャッシュの問題っぽい。- その場編集モードで、下書き保存ボタンを押すと、「Parse Error」が表示される。Windows + Safari4.0.3（再現性がわからない。もしかしたら、カテゴリー欄が多すぎるせいかも）
たぶん、はてなブックマークの「このエントリーを含む日記」に反映されない現象が起きていると思う。反応が遅くなっただけっぽい
キャッシュサーバーの調整も甘そう。このままだと、他人のアカウントにログインなんてことが起きそう。
はてなアイデアって、新機能の要望なのか、公表している機能のバグなのか、わからないから重要度も全然わからないよね。どうでもいいけど。今から有料のダイアリの一年分の奴を解除するかね。つーか、解除した。
実質、二週間延ばしてこれかよ的な。いらだちが。はてなアイデアを見る限り、相当致命的な問題が出ているようだし、もう、なんていうか。
ダイアリーがアップデートされたのだが
Ping通知とTwitter連携かな。いや、Twitterやってないけども。
速くなったかどうかはわからない。
複数ブログは「ID+好きな文字」らしい。これはちょっと、なんかキモくないですか？
twitter記法に対応した何かが必要か。デザイン直さないと。
twitter記法のメモ
というわけで、デザイン直すために情報収集。
Twitterのつぶやきにリンクする（twitter記法） - はてなダイアリーのヘルプ
むむむ。解析。
twitter記法の構造
twitter:post_id:title記法
span.twitter-tweet-title ├ テキスト（＠マーク） ├ a.twitter-user-screen-name │ └ テキスト（スクリーンネーム） └ テキスト（ / …（内容）… ）の部分
ソースにspanの終了タグが二つあるのは多分バグ。
twitter:post_id:detail記法
div.twitter-detail(twitter-detail-left) ├ div.twitter-detail-user │ └ a.twitter-user-screen-name │ └ img (48x48ピクセル) └ div.twitter-detail-tweet ├ p.twitter-detail-text │ └ テキスト（tweet内容：たぶんキーワード自動リンクはしない？） └ p.twitter-detail-info └ a.twitter-detail-info-permalink ├ span.twitter-detail-info-date │ └ テキスト（投稿日） ├ span.twitter-detail-info-time │ └ テキスト（投稿時） └ span.twitter-detail-info-source └ テキスト（アプリ名）
twitter:post_id:detail:right記法
div.twitter-detail(twitter-detail-right) ├ div.twitter-detail-user │ └ a.twitter-user-screen-name │ └ img (48x48ピクセル) └ div.twitter-detail-tweet ├ p.twitter-detail-text │ └ テキスト（tweet内容） └ p.twitter-detail-info └ a.twitter-detail-info-permalink ├ span.twitter-detail-info-date │ └ テキスト（投稿日） ├ span.twitter-detail-info-time │ └ テキスト（投稿時） └ span.twitter-detail-info-source └ テキスト（アプリ名）
変わっているのは、一番親の className 。
twitter:post_id:tree記法
基本は上記の「twitter:post_id:detail」が「left」「right」交互に並ぶ。
さらに、返信部分が改変されていて、
p.twitter-detail-info ├ a.twitter-detail-info-permalink │ ├ span.twitter-detail-info-date │ │ └ テキスト（投稿日） │ └ span.twitter-detail-info-time │ └ テキスト（投稿時） ├ テキスト（to @） └ a.twitter-user-screen-name └ テキスト（スクリーンネーム）
May 20, 2010
「NightYellow」 はてなダイアリー公開デザイン
概要
777px 1カラム+フッターです。
ブログパーツやアドセンスなどを貼らない人向けの、シンプルデザイン。
インポート元
ブラウザ確認
下記のブラウザで閲覧確認をしています。
いずれも OS は Windows XP、Windows Vista です。
既知の問題
- いまのところありません。
変更
- May 24, 2010 : photoモジュールで、リストの中黒が表示されていたのを非表示に変えました。
- May 28, 2010 : twitter記法に対応しました。
いつものもベータリリースじゃない、本気のはてな？
どこの大作ゲームメイカーかと思ってしまうが、期待はしている。
はてなダイアリーのバージョンアップは応答速度改善と共に 5/27 (木) に実施します - はてなダイアリー日記
上記バージョンアップのお知らせには予想を遙かに上回る反響がございました。期待のお声も多数いただき感謝しております。一方、はてなダイアリーの現状をみるに「応答速度の改善が先ではないか」というご意見・ご指摘を多数いただきました。
これらのご意見を真摯に受け止め、バージョンアップ後に予定していた速度改善の優先度を上げてスケジュールに組み込み、バージョンアップリリースと同時に応答性能も抜本的に改善できるよう計画を変更しました。この計画変更に伴い、今週予定していたバージョンアップを来週まで延期したいというのがスケジュール変更の理由です。
May 16, 2010
「PsudoTitan」はてなダイアリーのデザインを自作
概要
960px 準3カラム+フッターです。WordPress用のテーマを参考にしました。
インポート元
ブラウザ確認
下記のブラウザで閲覧確認をしています。
いずれも OS は Windows XP、Windows Vista です。
既知の問題
IEだと、表示崩れる。後方互換モードで動作するための float バグ。周りこみを起こした要素に続く要素の width を指定しないことで対応。ただし、 img タグの padding が反映されないのは、 CSS での対処方法がないので、これは残ったままです。「position:absolute;」で作り直しました。Opera 10.53 で閲覧したとき、はてなスターや Goole AdSense などの要素を追加する Javascript ファイルを実行したときに一部要素の上下マージンが無視される模様。Opera Dragonfly で、関係ない要素の margin を変える（変更前と同じ数値でも）と元通りに戻る。上下の margin を padding に変換して対応。
変更
- May 21, 2010 : レイアウト周りを改良し、IEでのレイアウト崩れの対策をしました。
- May 24, 2010 : photoモジュールで、リストの中黒が表示されていたのを非表示に変えました。
- May 28, 2010 : twitter記法に対応しました。セクションフッターの画像のpaddingをなくしました。
- Jun 2, 2010 : その場編集時のtwitter用の画像にpaddingがかかっていたのを修正しました。
- Jul 1, 2010 : sectionfooterの画像にpaddingがかかっていたのを修正しました。
参照
デザインは、ほぼこちらを参考にしました。
使用したアイコン素材はこちらです。
murmur
いろいろと勉強になった。タグから考えるのではなくて、既に存在するタグをどう料理するかというのは、アイデアをひねり出す訓練にもなる。
May 14, 2010
はてなダイアリーのHTML構造（細いヘッダ・日記モード・見出し別ページ）の場合
body ├ div.#simple-header ├ h1 … ブログのタイトル └ div.hatena-body ├ div.main │ ├ div#page-top(.calendar) │ ├ div#days │ │ └ div.day │ │ ├ h2 … その日のタイトル │ │ ├ div.body │ │ │ └ div.section │ │ │ ├ h3 … 「*」で付けられるタイトル │ │ │ └ そのほか本文 │ │ └ div.comment │ │ ├ div.caption │ │ └ div.commentshort │ │ └ p（なぜ、ここが「p」タグ？） │ │ ├ span.commentator │ │ ├ span.timestamp │ │ └ span.commentbody │ └ div#pager-bottom(.calendar) └ div.sidebar（適当にいくつか） ├ div.hatena-module(.hatena-module-profile) │ ├ div.hatena-moduletitle │ └ div.hatena-modulebody │ └ div.hatena-profile │ ├ hatena-profile-image │ ├ hatena-profile-id │ └ hatena-profile-body ├ div.hatena-module(.hatena-module-calendar2) │ ├ div.hatena-moduletitle │ └ div.hatena-modulebody │ └ table.calendar（※子要素省略） └ div.hatena-module(.hatena-module-section) ├ div.hatena-moduletitle └ div.hatena-modulebody └ ul.hatena-section └ li
「.calender」が二つ出てくる脅威。
実はいろいろと小細工ができるようなので、「.sidebar」の構造を弄れば、最近流行りの左本文、サイドバー２列の３カラム構造も出来ますね。
