スクロールと同時にメニューがついてくる「エレベーターメニュー」の実装

acurry | 2010年4月 6日 23:49

こんにちは、デザイナーのacurryです。
今日はページをスクロールするとスススッとついてくる
サイドメニューのJSを色々比較してみました。

調べてみると、どうやら「エレベーターメニュー」
という名称なんですね。
今日はいくつかサンプルを実装し、その動きや仕組みを比較してみます。


tfmenu

サンプル実装ページ
http://labs.cybridge.jp/sample/elevator.html

このサンプルは、メニュー移動・開閉の速さを変更できたり、
あらかじめ開いておく項目を指定できたり、と
細かい動きの設定ができるのが良いです。

※JSはここから頂きました。
http://www.kakura.jp/pg/tfmenu/


scrolllayer.js

サンプル実装ページ
http://labs.cybridge.jp/sample/elevator2.html

このサンプルは、上からメニューがついてくるタイプ。
グローバルナビゲーションがこんな形でついてきたら、
面白いかもしれないですね。

※JSはここから頂きました。
http://www.sonicjam.co.jp/soniclabs/?p=3


m_script.js

サンプル実装ページ
http://labs.cybridge.jp/sample/elevator3.html

このサンプルでは、メニューを下固定で配置したり、
真ん中で配置したりと様々なパターンのサンプルが
公開されています。

※JSはここから頂きました。
http://www.calm-web.com/lecture/script/m_script/index.html



自社の媒体ではあまり使用していませんが、
クライアント様からのご要望で使用することもあります。
縦にながーいページだと、結構便利ですね。

今後色々試してみたいと思います。

| | comments(0) | trackbacks(0) |

タグ:

Movable Type(MT)の再構築を高速化する方法MovableType

ぴんしゃん | 2010年3月30日 18:34

こんにちは、ぴんしゃんです。
今日はMTの再構築に時間がかかって、あれ？もうこんな時間？
作業効率化重視のサイブリッジにとっては死活問題です。

といっても簡単にサーバーのスペックを
あげてもらえるわけでもなく...

というわけで今回は藁をも掴む思いで、
MTの再構築を高速化する方法をご紹介します。


モジュール設定にチェックを入れる

全般設定のモジュール設定＞モジュールのキャッシュの
「再構築の速度向上のために、テンプレートモジュール毎のキャッシュ設定を有効にする」
にチェックを入れましょう。
デフォルトではチェックが入っていないのでインストール時に確認を忘れずに！

mt1.gif


ファイルのインクルード化

下記のタグを使えば、外部ファイルをインクルード化することができます。
フッタ部分なんかはこれでよさそうです。
<$MTInclude file="***.html"$>
<MTInclude>タグにMTタグを併用するには、MTIncludePlusプラグインが必要です。


不要なテンプレートやウィジェットの削除

テンプレートやウィジェットの一覧には、使用していないテンプレもあったりします。
不要なものは思い切って削除してしまいましょう。


不要なMTタグの削除

DBへの無駄なアクセスを減らすためにも、
不要なタグは削除しておきましょう。


ログの削除

システムメニュー＞ルーツ＞ログから
ログデータを見ることができますが、不要であれば削除。

mt2.gif

ダイナミック・パブリッシングに変更

ダイナミック・パブリッシングに変更すると再構築の必要がなくなりますが、
対応していないプラグインもたくさん...
プラグインをあまり入れないような場合はこっちにした方がなにかと楽です。


環境のアップグレード

色々試してもだめなら、やはりDBをアップグレードしたりサーバーの容量を増やしたりスペックをあげてみましょう。


| | comments(0) | trackbacks(0) |

タグ:

HTML5をIEとFirefox2に対応させるにはHTML + CSS

かのう | 2010年3月23日 18:00
かのうです。
春ですね～('з')先週ぽこ太と井の頭公園に行ったらちょっとだけ桜が咲いてま した！
なんとなくフワフワしたくなる季節ですが、、気を引き締めていきましょ

さて、HTML4 に代わる次世代のHTMLとして策定が進められているHTML5 について少し触れたいと思います。ソースコードもより整理できて個人的にも期 待が高いHTML5ですが、IEやFirefox2のブラウザではIE自体が問題だったりレンダリングエンジンの問題 だったりで正常に表示できません。今日はその簡単な対策方法を記載します。

HTML5をIEとFirefox2に対応させるには

・IEでの対策
非常に簡単です。JavaScriptで新要素を生成してしまうというもの。
要素として認識させてcssが適用するようにします。
※もちろんJavaScriptがオンになっている前提。
<!DOCTYPE html>
<html>
<head>
<title>サイブリッジ HTML5</title>
<style>
section { font-style: italic; }
</style>
<script>document.createElement('section');</script>
</head>
<body>
<section>HELLO!</section>
</body>
</html>

・Firefox2での対策
方法は複数あるものの一番簡単な方法は.htaccessかPHPを使う方法です。
いずれにせよFirefox2の使用率は3%以下のようなのでどこまで対応するかですね。
まずはhtmlタグにxmlns属性を追加します。
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

.htaccessを使用するなら下記。
RewriteCond %{REQUEST_URI} \.html$
RewriteCond %{HTTP_USER_AGENT} rv:1\.(([1-8]|9pre|9a|9b[0-4])\.[0-9.]+).*Gecko
RewriteRule .* - [T=application/xhtml+xml]

PHPで解決するなら下記。
if (preg_match('/rv:1\.(([1-8]|9pre|9a|9b[0-4])\.[0-9.]+).*Gecko/', $_SERVER['HTTP_USER_AGENT'])) {
header('Content-type: application/xhtml+xml');
}

以上です。HTML5について学ぶことはまだまだあるので今後も注目していこうと思います。
| | comments(0) | trackbacks(0) |

タグ:

SmillaEnlarger で小さい画像を綺麗に拡大！Windows

ハシモト | 2010年3月16日 14:47
お昼ご飯を買いに行こうとしたら、Ao の紀伊国屋前でおいしいトマトが売ってました。
試食だけしてそのままマクドナルドに行ってきましたどうもハシモトです。

今日は小さい画像でも割となめらかに拡大できちゃうソフトを紹介したいと思います。
その名も『SmillaEnlarger』。Windows, Mac, Linux に対応したオープンソースのフリーウェアです！

使い方は簡単で、拡大したい画像を指定してプレビューしながら拡大しちゃうだけ。
普通の画像編集ソフトにあるバイキュービック法の拡大よりなめらかに拡大できちゃいます。

sess.jpg
tomato_s.jpg↑たとえばおいしそうなこのトマト、 Fireworks などで拡大してみます。


tomato_giza.jpg結果、バイキュービック法や設定など変えて拡大してみてもギザギザになっちゃいます。残念！...


しかし！ SmillaEnlarger を使って拡大すると、ギザギザにならず割となめらかに拡大ができます。

tomato_s_e0.jpg
なかなかなめらかに拡大できましたね！これでデザイン素材にちっちゃい画像しかないときでもある程度素材を使えちゃいそうですね！


ということで SmillaEnlarger を使って、悩まずじゃんじゃん拡大、じゃんじゃんデザインしちゃいましょう！
ダウンロードはこちらから。

ダウンロード - SmillaEnlarger - SourceForge.JP

| | comments(0) | trackbacks(0) |

タグ:

[自己紹介] イトウです。自己紹介

イトウ | 2010年3月11日 09:42
はじめまして、サイブリッジ歴1週間の
ぴちぴちデザイナーのイトウです。
私は音楽と妻と動物と子供が大好きです。
今月末～4月頭にも第一子（女の子の予定）が生まれてくるので、
今から名前何にしようかと、悩んでいるのも楽しいです！

さて本日は、去年12月にリリースされたばかりのMovable Type 5の作業をしています。
実はWord PressやXoopsやJoomlaはさわったことがあったのですが、
MTは初めてで、新しく覚えることがたくさんあって、大変です！
このサイブリッジラボブログがMovable Type 4なんですが、
使ってみて思ったのは、
管理画面がMovable Type 4と5ではかなり違っていたり、
MT5ではDBはMYSQL5、PHPは5以上と結構変わっていて、難しいですが面白いです！

これからサイブリッジのデザイナーとしてやりたいことは、
Flashや、本日作業中のMovable Type、そして、Word Press、Joomla、Xoops
などのスキルを上げて使いやすくビジュアルにもこだわった
サイト作りをしていきたいです。

さらに、phpやactionscriptやmixiアプリなども勉強したいので、
覚えたいことだらけですが、
自分の出来そうなことリストの中からやりたいことを選んでいても
成長はない！と思いますので、日々精進ですね。

新しい発見や覚えたこと、また、Webのトレンド情報を
サイブリッジラボでは書いていきたいと思います。

今後ともよろしくお願いいたします。

| | comments(0) | trackbacks(0) |
| 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 |