ハナモゲラボ / 試行錯誤の実験人生

日々、PCや各種デバイス、楽器等に翻弄されながら電脳の森をさまよう男の日常と様々な実験をさらりと記しております。

iframeの高さを内容物に合わせて自動的に制御(JQuery)

March 20 2012

さてiframeを使ったサイトで、内容物の高さが変わる場合のお話。
たとえば更新情報やお知らせなんぞをトップに埋め込んで中身をクライアントが更新、
みたいな場合ですね。

その場合はiframeの高さがもちろん変わってしまうわけですが
高さを決めてスクロールバーを出すようにするのが手っ取り早い。
しかし、このスクロールバーを嫌う方もいらっしゃいます。
内容物の高さに応じて、iframeの高さを変える方法はないものかと色々探すと
jQueryプラグインを見つけました。

jQuery iframe auto height plugin(github)
https://github.com/house9/jquery-iframe-auto-height

導入方法

まずはJQuery本体とダウンロードしたjquery.iframe-auto-height.jsを
head部分に読み込ませる。
置き場所がcommon/js/とかだとこんな感じ。


<script src="./common/js/jquery.js"></script>
<script src="/common/js/jquery.iframe-auto-height.plugin.js"></script>

あとは高さを変えたいiframeの直後に


<iframe src="hogehoge.html"></iframe>
<script type="text/javascript">
jQuery('iframe').iframeAutoHeight();
</script>

と書いてあげるだけでOKという手軽さが大変ヨロシ。
コンフリクト防止の為にあえてjQueryと書いてます。

オプションにheightOffsetというのがあって
取得した高さに設定した数値の高さを足してあげる事も可能です。


<iframe src="hogehoge.html"></iframe>
<script type="text/javascript">
jQuery('iframe').iframeAutoHeight({ heightOffset: 100 });
</script>

この場合、取得した高さプラス100ピクセルを追加しています。

※追記
コメント欄で
「他のドメインのサイトをiframeで表示させる場合は使えない」とのご指摘を頂きました。
ffさん、ありがとうございました。

CSSでフレームセットを~去りゆくIE6、僕はお前を見捨てない

March 18 2012

「フレームセットでいいんでよろしくお願いします。」

ほうほう、フレームセット。
なんと懐かしい響きだろうか。
Web黎明期にはそれこそ便利でみんな使ってたし、自分もいくつか作った。
しかしXHTMLで非推奨になり、検索にも非常に不利な事もあって
ここ最近はこいつを使った覚えはない。
(他社から引き継いだサイトは未だに現役のもあるけど・・・)

んじゃあ久しぶりにフレームセットを・・・と思ったけども。
yuga.jsを使って現在ページをハイライトしたりとかできねえし
モダンブラウザではposition:fixedに対応してるので、同じ事が簡単にできる昨今
もはや去りゆく運命にあるMicrosoft Internet Explorer 6に義理を通さずとも
別にいいんじゃねえのか、と頭をよぎりましたけども
ここは最後っ屁みたいなもんで、CSSでIE6にも対応させましょうと頑張りました。

とりあえず今回の案件は
■左右分割で左側がメニュー
■メニューのコンテンツボックスは縦の真ん中に位置させる
という2重の事をCSSで再現してみるべくトライ。

HTMLはこんな感じ。

<!-- Contents -->
<div id="main">
<p>メインコンテンツメインコンテンツ</p>
</div>

<!-- Menu -->
<div id="menu">
<div id="menucontents">
<h1><img src="img/logo.gif" alt="logo" width="225" height="120" /></h1>
<div id="navi">
<ul>
	<li><a href="index.html">TOP</a></li>
	<li><a href="about.html">ABOUT</a></li>
	<li><a href="report.html">REPORT</a></li>
</ul>
</div>
<p class="copyrights"><img src="img/footer.gif" alt="Footer" width="263" height="30" /></p>
</div>
</div>
<!-- /Menu -->

そしてCSSは

html {
height: 100%; /*左側メニューの高さの為に100%指定*/
_overflow:hidden;
/*IE6対策、#mainの右側にスクロールバーを出さないため*/
}

body {
height: 100%; /*左側メニューの高さの為に100%指定*/
_overflow:hidden;
/*IE6対策、#mainの右側にスクロールバーを出さないため*/
}

#menu {
position: fixed; /*モダンブラウザはこれだけで疑似フレーム完成*/
left: 0;
top: 0;
width: 380px;
height: 100%;
min-height: 100%;
display: table; /*親ボックスをテーブル形式に(縦中央揃えのため)*/
}

#menucontents { /*入れ子のメニュー*/
width: 380px;
display: table-cell; /*テーブルセル形式にして*/
vertical-align: middle; /*縦中央揃え*/
}

*html #menucontents { /*縦中央揃えのIE6専用記述*/
width: 380px;
position:absolute;
height: expression( document.getElementById("menucontents").offsetHeight+"px");
top: 50%;
margin-top: expression( "-"+document.getElementById("menucontents").offsetHeight/2+"px");
}

*:first-child+html div#menucontents { /*縦中央揃えのIE7専用記述*/
width: 380px;
position:absolute;
height: expression( this.clientHeight+"px");
top: 50%;
left:0;
margin-top: expression( "-"+this.clientHeight/2+"px");
}

#main {
height: 100%;
min-height: 100%;
/*上方向に40px、メニュー分の380px+10pxを右方向に*/
padding: 40px 0 0 390px;
}

*html #main {
overflow: auto; /*IE6用の記述(これがないとスクロールバーが出ない) */
}

という感じで無事に実装できました。

上下揃えで使ったdisplay:table-cellが、IE6だけでなくIE7までが非対応なのが
ちょっと困りましたけども、expressionでクライアントの高さを出して
それの50%の高さにボックスを配置するという方法で実現させました。
(6と7で記述方法が違うってのもなかなか困る・・・ブツブツ・・・)

さーて、これ他でも使う・・・・かなあ。。
一応こうして書いておけば自分も、そして誰かの役に立つのかもしれない・・・!
と思う。たぶん。

Outlook2007がクソ重い時に試してみる事~pst修復ツール

March 13 2012

いまやGoogle先生のサービスでまかなえるんじゃねーの?ってぐらいに
グループウェアとしての存在が薄くなってしまった感のあるOutlook。
知恵袋などで質問しても大抵はOutlook Expressと混同されてカオスになる運命の
このアプリケーションですが、個人的には手放せません。

確かにメインメールはGoogle Appsに移行しており、Outlookで送受信する事は
ほとんどないのですが、スケジュール機能と仕事(ToDo)が自分の使い勝手と違うのです。

Outlook2007になって仕事(ToDo)がToDoバーとして独立し
しかも予定表と同様に各分類で色づけできる機能が追加されたのが
自分としてはものすごく使いやすくなりました。

家庭イベント、PC仕事、音楽仕事などなど、それこそ資源ゴミの日からなにから
ここにぶち込んでおき、各色の分類が身体にしみついてくると
直感的に「あ、今日この仕事をしなくちゃ」というのが一目でわかるんですわね。
しかも予定表を1週間表示にすると、ウィンドウ下方に仕事リストが
スタックされて表示されるので、これもとても自分の使い勝手にはあってます。
Googleカレンダーでは色分けもできないし、このスタック表示もないので
いまいちわかりにくいんですよねえ。

さて、そのOutlook。たまーに思いっきり動作がクソ重くなります。
メールの見出しをクリックしてプレビューに移るまで数十秒かかったりとか
メールから予定表に移る際にフリーズしてしまうとか、明らかにストレスがたまる挙動。

こういう時、たいていの場合はOutlookファイル(.pst)が壊れてるケースが多いのです。

そのPST修復ツールが実はこっそりとですがOfficeをインストールする際に存在してます。

WindowsXPでCドライブが起動ドライブの場合、
C:\Program Files\Microsoft Office\Office12の中にあるSCANPST.EXEというのがそれ。

これを起動するとこんな画面になります。

「参照」をクリックしてpstファイルを選択してやります。
pstの場所を知るのに一番簡単なのは、Outlook2007の左上メニューバーから
「ファイル」→「データファイルの管理」を開いてあげると
使われてるpstの一覧が出てくるのでそれを選択して「フォルダを開く」をクリックすればOK。

WindowsXPでユーザー名がAdministratorの場合は
C:\Documents and Settings\Administrator\Local Settings\Application Data\Microsoft\Outlook
に収納されています。

pstを選んで「開始」を押してやるとまず診断がはじまります。
Outlookがクソ重い場合はたいていの場合「壊れてます」と出るので
「修復」をしてやればそれで終わりです。

自分の場合はほとんどこれでサクサクの状態に戻ってくれます。

FAT時代と違ってpstファイルのサイズを気にしなくて良くなった分
管理がおざなりになってしまいますけど、たまにはこいつでリフレッシュしてやれば
pstの存在も忘れなくてすむ、なあ・・・・・と自分を納得させています。

ちなみにスマホのジョルテとの同期はどうしているかというと
OutlookをGoogle Calender Syncを使ってGoogleカレンダーと同期させて、
そのGoogleカレンダーをジョルテと同期させています。

ToDoは同期させてません。
ToDoリストが必要なのはPCの前に座っている時だけですので。

« Dec 2019 January 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