[ カテゴリー » 開発日誌 ]

ソーシャルブックマークあたりをいじってる

category-icon

 おはようございます。ソーシャルブックマーク(以下SBM)周りの整備中です。ppBlogでは、はなてやdelicious、Yahooなど主要なSBMへの追加リンクを採り入れたりしてますが、実際のところ、パフォーマンスに問題があって、あまり気軽に使えるものではなかったというのが実情でした。なので、アルゴリズムを見直したり、ちょこちょこ変更を加えながらやってます。

 現時点で、これに落ち着こうかなと思っているのは、実際にこのサイトで動いているやつですが、複数記事表示の時は、各SBMへのリンクアイコンをその場で(Ajax経由)で生成するようにして、単独記事モードの際に、従来のように最初からアイコンを並べるやり方にしようかなと。

 後、登録されたブックマーク数の更新タイミングは、基本的に単独記事モードの時に作動するようにして、複数記事モードの際はキャッシュから読み込む方式で。

 複数記事モードのときには、SBMへのアイコンが表示されていて、マウスオーバーで(実際にはonmousemove)、各種SBMサービスへのアイコンがポップ表示されます。初回だけAjaxで読み込むので、ちょっとタイムラグがあり、後は生成されたレイヤーを表示するので、これは瞬時です。mousemoveで監視していると、ユーザーが意図しないonmousemoveでAjax呼び込みが起動する場合もあるでしょうから、mousemoveの移動量がある閾値に達してから、動作するようにしています。まぁマウスクリックでも良いかなぁとは思いますが。

 後は、SBMにTwitThisLink へのエントリーも入れてみました。ちょうど1年ほど前に、動作確認のために、Twitterのアカウントを取得したけれど、まるで活用していなかったんで、こういうお気軽エントリーが出来ると良いかなとは思います。

— posted by martin at 03:03 pm   commentComment [0]  pingTrackBack [0]

写真をお洒落に見せるスクリプトの更新

category-icon

 こんにちは。まだまだ寒い日が続きますね。さて、ppBlogには、以下のような感じで、普通のアップした写真をちょいとお洒落に演出するスクリプトが付いてますが、IE8でエラーが出ていたりしたんで、更新しました。

FrangipaniFlowers
写真風のサンプル。
TocoToucan
切手風サンプル。これらの傾き角度は自由に指定できます。

 IE8のdocument.querySelectorAllの実装に始まり、Safariもサポート、Firefoxは3.1でサポートするでしょうし、この手の用途には、staticなnodeListでこと足りるので、photo-effectをいうクラス名を付けたIMG要素の検索には、document.querySelectorAllを第一に試すようにしてます。

 始めは、よくやるように、

var nodes = Array.prototype.slice.call(element.querySelectorAll("img.photo-effect"));

 としたのですが、何故かIE8では、JSオブジェクトがないと怒られて折角のquerySelectorAllが使えません。なので仕方なしに次のようにしました。

var nodes, items = element.querySelectorAll("img.photo-effect"), index = items.length;
while(index) nodes[--index] = items[index]; /* 地道に */

 IE8でも、Array.prototype.slice.call(arguments) は問題なく作動するのに。。きっと、正式版前のバグなんだろうけど。

 てな訳で、最新版を添付しておきます。ついでに言っておくと、このスクリプトは単体で動作します。ただし、2種類の写真フレームの画像も用意して適切にパスを書かないといけませんが。デフォルトでは、Imagesディレクトリにあるphotoframe.pngLinkstampframe.pngLink の2つです。

添付ファイル: photoeffect.jsattachedIcon 

— posted by martin at 09:31 pm   commentComment [0]  pingTrackBack [0]

テーブル型カレンダーを修正

category-icon

 こんにちは。今日はスケジュールの都合で、徹夜で実験のmartinです。徹夜してるとお腹すくなぁ。

TableCalendar
これはスクリーンショットです。実際のリンクは記事下の方から。

 さて、前回に続き、カレンダーねたで。前回は、テーブルレスカレンダーということで、OL要素を用いたカレンダーを紹介しましたが、かといってTABLE要素を用いたカレンダーを疎かにするわけではありません。現状、ppBlogでは、テーブルタイプのカレンダーは、大きくボックス型とライン型とがあります。更に、ボックス型には、セレクトボックスを付けるタイプと、そうでないタイプの2種類がありますが、次バージョンでは、カレンダーの種類がぐっと増えて、6種類になりそうです。前回、ちらっと触れましたが、大きな変更点は、曜日の並びを自由に指定出来るようになったことと、後、言語の指定が出来るようになったことです。言語といっても、英語か日本語のインターフェイスか、というだけですが。デフォルトでは、日曜日が週の始まりで日本語表示となります。

 ppBlogが生成するカレンダーのソースを改めて見てみると、すっきりしない点があったり、XHTMLの書式となじんでなかったりする点があったので、PHPのカレンダーのプログラム(calendar.inc.php)を見直して大幅に書き換え、はき出すソースも従来のものと若干変わりました。


 カレンダーの種類は、従来通り、template.phpで指定出来ますが、およそ以下のような書式になります。

# カレンダーのタイプ (1~4はTABLE要素使用。5, 6はOL要素使用)
# [ 0:非表示,1:ボックス型,2:月日セレクター付ボックス型,3:ライン型,4:ライン型 + セレクター,
#                    5:リスト要素仕様, 6:リスト要素仕様 + セレクター]
$_CALENDAR_TYPE = 2; 
$_CALENDAR_LANG = 1;  #  [ 0:英語,1:日本語 ]
$_CALENDAR_START = 0; #  [ 0:日曜開始,1:月曜開始,2:火曜開始,etc. ]

 $_CALENDAR_LANG$_CALENDAR_STARTという変数が新たに加わりますが、この指定は必須ではありません。

 実際の出力のイメージは、リンク先で掴めると思います。なるべく構造をシンプルにすることで、特にCSSハックを使うこともなく、各ブラウザでほぼ同じ見栄えになっていると思います。

 :)http://p2b.jp/demo/calendar.html

— posted by martin at 02:30 pm   commentComment [0]  pingTrackBack [0]

テーブルレスカレンダーを考えてみる

category-icon

 こんばんは。常々、既成概念にとらわれない生き方をしようと思っているけど、それを実践するのはなかなか難しいなと思っているmartinです。

 さて、ppBlogでは現状、大まかに3種類のカレンダーを指定できますが、その内2種類は、TABLEタグを用いたものです。まぁ、よく見るカレンダーの構造を見ると、TABLEタグを使って表みたく作成というのは自然な流れでしょう。web界隈の最前線は追っていないので、ちょっと知るのが遅かった気もしますが、カレンダーの中には、TABLE要素を使わずに、UL要素やOL要素などのリスト要素を用いてカレンダーを生成する試みもあるようです。

 Tableless Calendar In UseLink

 A Semantic List-Based CSS CalendarLink

 一口にリスト要素を使うといっても、色々な記述があり、紹介しているサイト毎に違っています。で、未だに無視できない数のユーザーの方々がIE6を使っていると思うのですが、少なくとも上記2つのサイトは、IE6で見ると微妙に表示が崩れてしまいます(IE6,7に見られるバグで、hasLayoutをもった要素のOL要素の番号付けが無視されるというものは、有効な解決法がなく致命的)。なので、自分なりに、どのブラウザで見ても同じような見栄えになるようにと色々試した結果、以下のやつが現時点での最適解かなというのに辿りついたので、ppBlogにも採用するついでに紹介しておこうと思います。

tableless-calendar
これはスクリーンショットです。実際のデモは下のリンクから。

 TABLE要素の代わりにOL要素(Ordered List)を使います。日付は時系列なものですから、順序付きリストを用いるのが良いでしょう。このテーブルレスカレンダーの特徴として挙げられるのは、ひとつのHTMLの記述で、3種類の全く違った見栄え(ボックス型・水平型・垂直型)にすることが可能ということです。この見栄えの制御には、CSSを使いますが、かなりシンプルな記述で済みます。また、IE6にも対応となると、色々ややこしいCSSハックを駆使しがちですが、CSSハックは全く必要ありません。

 では早速、カレンダーを生成するHTMLソースを見てみましょう。以下のような感じです。

 <div id="calendar">
  <ol class="wheader">
   <li>S</li>
   <li>M</li>
   <li>T</li>
   <li>W</li>
   <li>T</li>
   <li>F</li>
   <li>S</li>
  </ol>
  <ol class="weekday">
   <li class="blank"> </li>
   <li class="blank"> </li>
   <li class="blank"> </li>
   <li class="daySubmit" title="エイプリルフール">1</li>
   <li>2</li>
   <li>3</li>
   <li class="Sat">4</li>
   <li class="Sun">5</li>
   <li>6</li>
   <li>7</li>
   <li>8</li>
   <li>9</li>
   <li>10</li>
   <li class="Sat">11</li>
   <li class="Sun">12</li>
   <li>13</li>
   <li>14</li>
   <li>15</li>
   <li>16</li>
   <li>17</li>
   <li class="Sat">18</li>
   <li class="Sun">19</li>
   <li>20</li>
   <li>21</li>
   <li>22</li>
   <li>23</li>
   <li>24</li>
   <li class="Sat">25</li>
   <li class="Sun">26</li>
   <li>27</li>
   <li>28</li>
   <li class="Holiday" title="みどりの日">29</li>
   <li>30</li>
   <li class="blank"> </li>
   <li class="blank"> </li>
  </ol>
 </div>

 例として今年4月のカレンダーをあげます。曜日を表す部分(日月火水木金土)と、日にちの部分を分けて、それぞれOL要素でグルーピングしていて、各にwheaderweekdayというクラス名を与えています。ppBlogでは、記事を書いた日付には、daySubmitというクラス名が与えられます。

 まず、通常の、よく見るボックスタイプですが、これは以下のようなCSSで実現できます。

#calendar * {
  margin: 0; padding: 0; /* まずは、マージンやらのリセット */
}
#calendar ol {
  list-style: none; /* 順序付きリストの番号を非表示に */
  width: 220px;  /* この横幅指定が一番のポイント */
}
#calendar li {
  float: left; /* これもポイント */
  border: solid 1px #aaa;
  width: 18px; height: 18px;
  margin: 2px;
  padding: 3px;
  text-align: center;
  line-height: 18px;
  font: 600 14px Trebuchet MS;
}
#calendar ol.wheader li {
  background: #c69;
  color: snow;
}

/* その他 ppBlog用のオプション */
li.daySubmit { background-color : #feff7d; }
li.Sun { color: red; }
li.Sat { color : blue; }
li.Holiday { color : orange; }
li.Today { font-weight: 900; }
li.blank { border: solid 1px #ddd !important; background: #f5f5f9; }

 ポイントは、OL要素に具体的に横幅を指定して、かつ、LI要素を左寄せにすることです。指定した幅に達すると自動的に下に流れ込みます。となると、水平タイプにするのは簡単で、幅を指定しなければ良いわけです。その際に、曜日の部分や、空白のリスト要素はあえて表示させる必要はないので、以下のような記述になります。

#calendar ol {
  width: auto; /* 幅を指定しない! */
}
#calendar ol.wheader, #calendar ol.weekday li.blank {
  display: none; /* 非表示に */
}

 最後に、垂直タイプですが、これも簡単で、従来、OL要素は縦に展開するものです。それを上ふたつではフロート指定で横方向に伸ばしたので、そのフロート指定をしなければ、自ずから縦になります。明示するなら以下のような感じです。

#calendar ol.wheader, #calendar ol.weekday li.blank {
  display: none; /* 非表示に */
}
#calendar ol.weekday li {
  float: none; /* フロートの解除 */
}

 それでは、実際のデモを見てみましょう。

 

8-)Tableless CalendarのデモLink

 ボタンをクリックすれば、その場でひとつのカレンダーが3通りに切り替わります(最後にスタイルを適応させないボタンも付けました。OL要素のデフォルトの動作が確認できます)。JavaScriptで制御しているのですが、動的スタイルシートの適応は、動的スタイルシートの作成Link で紹介した手法を用いています。

 個人的に、このOL要素を用いたカレンダー表示というのは、お気に入りなので、近くバージョンアップ予定のppBlogに組み込んでいます。後、現状、ボックスタイプでは、週の初めは日曜日ですが、これを任意の曜日を指定できようにしています。

 


— posted by martin at 07:40 am   commentComment [2]  pingTrackBack [0]

モブログでの画像位置の指定テスト

category-icon

640(W)×480(H) 100.98

フォーラムであがっていたモブログに関してのカスタマイズチェック。例によってモブログが使えない環境にいるので、Gmailから疑似モブログ。

画像を二つ付けてみる。ひとつは、先頭に持って来て、右よりの指定。もうひとつは、記事の最後に持って来てセンタリングの指定。

ちなみに1枚目の写真は、昨年のエッフェル塔。昨年は、フランスがEUの議長国だったので、ブルーカラー。今は従来のオレンジ色に戻っている。2枚目は、ユーロディズニー。パリ郊外にある。ディズニーランドは日本では行ったことがなかったので、これが初。この日は常に気温零度前後、雪もちらついてものすごく寒かったけど、急降下系のアトラクションは良かった。
640(W)×360(H) 87.07

— posted by martin at 12:30 am   commentComment [0]  pingTrackBack [0]

T: Y: ALL: Online:
Created in 0.0059 sec.
prev
2024.3
next
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31