今回も折り返した時にIE6/IE7でアイコンの表示がずれるバグに対応させるためspanタグを挿入し、after, beforeのパラメーターを変更することによって前後にアイコンを付加させます。
簡単にコード解説をします。
]]>var o = $.extend(
{
elem: 'a[href$=".pdf"], a[href$=".doc"], a[href$=".xls"], a[href$=".zip"]',
iconPos: 'after',
noIconClass: '.noIcon'
}, options);
ターゲットとなる要素を属性セレクタを用いてpdf,doc,xls,zipに絞りこみます。アイコンのポジションは初期値ではafterで後ろに表示させます。画像などにファイルをリンクさせる場合にアイコンを表示させないクラスを.noIconとします。
var etx = $(this).attr('href');
href属性の値をetxと言う変数に格納します。これを正規表現でチェックし、各ファイルタイプごとの処理に振り分けます。
if(etx.match(/.pdf$/))
{
PDFの場合の処理
}
//で囲まれた部分が正規表現です。/.pdf$/で末尾に.pdfのものにマッチします。/.doc$/で.docのようになります。ちなみにこれら全ての拡張子のいずれか...と言ったものは/.(pdf|xsl|doc|zip)$/と記述されます。
zipでダウンロード出来るようにしました。利用はご自由にどうぞ。
追伸
正規表現について教えてくれたn_tange君に感謝します。
バージョン3からはGPSセンサーを利用出来るようになっていて、最初のコードを呼び出す時の引数にtrueを指定することで機能します。iPhoneやAndroidでの利用では利用価値大になりましたね。
今回は勉強がてらjQueryのプラグインとして書いてみました。
]]> オプションとして指定出来るものは次の通りまずはjqueryとGoogle Mapsとプラグインを読み込みます
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3.2");</script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false" charset="utf-8"></script>
<script type="text/javascript" src="gmap.js" charset="utf-8"></script>
次にオプションの設定をします。設定するのは緯度・経度、地図の尺度、ふきだしの設定をするぐらいであとは初期値での使用で平気だと思います。
$(function() {
$('div#map_canvas').gmap({
centerLat: 35.697128, //緯度
centerLng: 139.702563, //経度
zoom: 16 //地図の尺度
popup: 'ふきだしのテキスト', //ふきだしのテキスト。(X)HTMLも記述出きます。
popupState: true //trueなら読み込んだ時にふきだしを表示。falseなら表示しない(クリックで表示されます)
});
});
その他のオプションの説明をしておきます。
利用は御自由にどうぞ。
]]>主にコードビューで作業をすることが多いのですが、デザインビューや分割ビューに素早く切り替えられるようにショートカットを設定しています。また、作業効率を上げるために良く入力するタグはショートカットキーを設定しています。(Dreamweaver初期で設定されているショートカットキーも含まれていますが）
その一例を紹介します。
]]>ずっとDreamweaverを使っているのですが、ショートカットキーのエクスポートの仕方がどうしてもわからなくて困っています。アップグレードの際は再度設定をしているのですが、エクスポート→インポートの方法ってないんでしょうかね。
]]>
、「Movable Type Developer's Guide Volume 1」、「WordPressで学ぶPHPとMySQL」などの著書を持つ藤本さんのMT5本がPDFで発売されています。
MTOS活用テクニックを読ませていただいたのですが、非常にわかりやすく書かれていて大変勉強になりました。今回はMTがメジャーアップデートしたと言う事でこのMovable Type5 Webサイト制作ガイドを購入検討しています。
PDFと言う形式での販売は好みが分かれるかもしれませんが、どうしても書籍は場所を取るので私的にはPDF販売と言うのは賛成です。iPhoneに入れておけば電車内など本を出すには混みすぎてるなんて時でも読めるのは大変便利だと思います。
]]>ThickBoxは画像だけでなくHTMLも読み込めてとても便利なのです。ただ、デフォルトでは右上のcloseと書かれたテキストをクリックするか、暗転している部分をクリックしないと元の画面に戻りません。リテラシーの低い人は一瞬どこをクリックして閉じるのか分からない事もあるかもしれません。そこでHTML側にウィンドウを閉じるボタンを付けてみることにします。
通常ThickBoxはtb_remove()と言うメソッドを呼び出してウィンドウを閉じます。ただ読み込まれたHTMLファイルの閉じるボタンのclickイベントにtb_remove()を設定したとしてもイベントは実行されません。これは読み込む側と読み込まれる側に親子の関係があるからです。
onclick="javascript:parent.tb_remove();"
イベントに親（parent）フレームを指定してあげればtb_remove()メソッドを実行出来ます。
ちなみにThickBoxはHTMLを読み込む方法が2種類存在します。一つはiframeで読み込む方法でもう一つは非同期で読み込む方法です。
UTF-8で書かれたHTMLファイルでThickBoxを利用する場合はどちらでも大丈夫ですが、Shif-JISなどで書かれたHTMLファイルでThickBoxを利用すると後者の方法でHTMLファイルを読み込むと文字化けしてしまいます。その場合はiframeで呼び出せば文字化けを防げます。
iframeで呼び出す記述
<a href="URI?keepThis=true&TB_iframe=true&height=Value&width=Value" class="thickbox">text</a>
非同期で読み込む
<a href="URI?height=Value&width=Value" class="thickbox">text</a>
どちらもURIにはファイル名、valueにはwidth、heightの値を入れます。
]]>年末にこのブログの過去のエントリーを少し見たのですが、自分の文章力があまりにもお粗末で笑ってしまいました。最近は時間をかけて文章を考える癖がついてきたので、以前よりはましになって来たとは思いますが、まだまだだと思います。なので今年はもっと文章力を付けていきたいと思います。
さて毎年恒例のおみくじは中吉でした。内容が良い年は財布に入れていたのですが、今年はあまり良くなかったので神社に結んできました。
今年も色々なことが起こると思いますが、1年間楽しく過ごしていきたいですね。今年も宜しくお願いいたします。
]]>線形グラデーションはlinearで指定します。Safari/Google Chrome用（以下webkit）は-webkit、Firefox3.6用（以下mozilla）は-mozとお決まりの書式になります。
background: -moz-linear-gradient();
background: -webkit-gradient(linear);
グラデーションの開始位置と終了位置を追加します。上から下へのグラデーションの場合は次のような記述になります。webkitは2点を指定しますが、mozillaは開始点1点の指定になります。
background: -moz-linear-gradient(top);
background: -webkit-gradient(linear, left top, left bottom);
左から右は次の通り。
background: -moz-linear-gradient(left);
background: -webkit-gradient(linear, left top, right top);
斜め方向へのグラデーションは次のような記述になります。
background: -moz-linear-gradient(left top);
background: -webkit-gradient(linear, left top, right bottom);
mozillaは角度（degree）で指定することも出来ます。
background: -moz-linear-gradient(left 20deg);
色指定を追加します。webkitの場合、2色はfrom(色)からto(色)で指定します。mozillaの場合はfromやtoは不要です。
例えば上から下へ#eee→#999のようなグラデーションでレンダリングするには次のような書式になります。
background: -moz-linear-gradient(top, #eee, #999);
background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#999));
色指定はカラーコード以外にもrgbで指定することが出来ます。rgbで指定した場合はアルファ値を指定することが出来ます。(rgba)
background: -moz-linear-gradient(top, rgba(238, 238, 238, 0.8), rgba(158, 158, 158, 1));
background: -webkit-gradient(
linear,
left top, left bottom,
from(rgba(238, 238, 238, 0.8)),
to(rgba(158, 158, 158, 1)));
webkitの場合、from to以外にcolor-stopと言うプロパティも用意されています。color-stopを利用する場合は3色以上のグラデーションが利用出来るようになります。color-stopプロパティはcolor-stop(位置, 色)のように位置を指定しなければなりません。
mozillaの場合、3色以上のグラデーションの場合でも、そのままカンマ区切りで色の指定が出来ます。
例えば上から下へ#eee→#999→#eeeのようなグラデーションでレンダリングするには次のような書式になります。
background: -moz-linear-gradient(top, #eee, #999, #eee);
background: -webkit-gradient(
linear,
left top, left bottom,
color-stop(0, #eee),
color-stop(50%, #999),
color-stop(100%, #eee));
mozillaの場合は位置指定しない場合、真ん中の色を50%の位置でレンダリングしてくれますが、任意の位置を指定することも当然出来ます。例えば真ん中の色#999を20%の位置に持っていくには次のような書式になります。
background: -moz-linear-gradient(top, #eee, #999 20%, #eee),url(img/bg_slash01.gif) repeat 0 0;
background: -webkit-gradient(
linear,
left top, left bottom,
color-stop(0, #eee),
color-stop(20%, #999),
color-stop(100%, #eee)),
url(img/bg_slash01.gif) repeat 0 0;
背景画像とグラデーションを重ねてレンダリングすることも出来ます。その場合は色をrgbaで指定し、任意の色のアルファ値を指定します。
background: -moz-linear-gradient(top, rgba(238, 238, 238, 0.8), rgba(158, 158, 158, 1));
background: -webkit-gradient(
linear,
left top, left bottom,
from(rgba(238, 238, 238, 0.8)),
to(rgba(158, 158, 158, 1)));
webkitは少々記述が長くなってしまいますね。
まとめ
//mozilla
background: -moz-linear-gradient(開始点, 色 位置, 色 位置), url(hoge.gif) repeat 0 0;
//webkit
background: -webkit-gradient(
linear,
開始点, 終了点,
color-stop(位置, 色),
color-stop(位置, 色),
color-stop(位置, 色)),
url(hoge.gif) repeat 0 0;
そうしたらテキスト入力をすると何故か砂時計がチカチカと出てしまいテキストが選択出来ません。よく見るとヒストリーパネルがもの凄い勢いで進んで行きます。どう見ても不具合が起こってる感じでした。
どうやら以前入れたColor Palette panel v1.25が問題なようです。
Using the Color Palette panel in Fireworks CS3
インストールする前にバックアップとっておいたほうがいい。
これ入れると、テキスト入力するときチカチカ(砂時計とテキストカーソルが交互に点滅)する？
ヒストリーパネルを見ると、「テキストの変更」が繰り返し呼ばれてる。(乱雑モックアップ Fireworks 拡張メモ)
さっそくExtension Managerを起動させましたがColor Palette panelの項目がありません。仕方なくエクスプローラ上から探す事にしました。
そうすると、Program Files/Adobe/Adobe Fireworks CS3/Configuration/Command Panels/Othersの中にColor Palette.swfと言うファイルがありあました。このファイルを削除してFirewoks CS3を再起動させたら不具合が解消しました。
Color Palette panelは色が作りづらいFirewoksでの色作成に重宝していたのですが、使えないとは残念な事です。
]]>僕の場合行った手順としては以下の通りです。
そして既存のブログのバックアップです。MT4には標準でブログデータを完全バックアップする事が出来ます。
システムメニュー→ツール→バックアップと辿り、圧縮しないを選びバックアップボタンをクリックするとバックアップが始まります。
ここで気をつけるのがファイルのバックアップ先です(以前の記事「Movable Type 4でブログのバックアップ」でも書きましたが再度書いておきます)。デフォルトのままでバックアップするとサーバーによってはアクセス出来ない場所にバックアップをとってしまいます。これを回避するにはバックアップする場所をmt-config.cgiに次のような記述をして指定します。記述箇所は一番下で構わないと思います。
#== Backup Directory =======================
TempDir /home/user/www/MTをインストールしたディレクトリ/temp
サーバー側のMovableTypeをインストールしたディレクトリをリネームします。例えばmt42と言う名前だったら_mt42にします。先ほど保存したバックアップファイル(tempディレクトリ)をローカルにダウンロードします(ローカルに_mt42/tempが作成される)。
ローカルには同じバージョンのMTに必要なプラグインを入れてmt42の名前で用意しておきます。僕の場合は真新しいMTを用意しました(mt-config.cgiが無く、mt-config.cgi-originalがある)。そしてこの真新しいMTをサーバーにアップロードしてcgiファイルのパーミッションを755に変更します。
mt.cgiにアクセスしてウィザードを進めて行きます。これでMySQLを利用した新しいmt-config.cgiが作成されます。
ローカルに保存してある_mt42/tempディレクトリを_mt42/importの名前でリネームします。importディレクトリをmt42にカットペーストします。これで_mt42/tempがmt42/importに変わりました。そしてこのimportディレクトリをサーバーにアップロードします。
いよいよブログを復元します。システムメニューからツール→復元と辿ります。バックアップファイルは既にimportディレクトリに保存してあるのでファイルを選択する必要はありません。そのまま復元ボタンを押します。
特にエラーなど出なかったので一度ウェブページテンプレートを再構築してみます。エラーが出なくて問題ないようなら全て再構築して完了です。
以前に失敗した時は復元する時、ローカルからアップロードしながら復元してました。サーバー側にバックアップファイルがある状態で復元出来ないのかと思いググって見るとちゃんと公式サイトのよくある質問に書いてありました。
ここ１週間ばかりローカル環境のMAMPでMySQLを使う為に入れなければいけないDBD::MySQLがどうしても上手く行かずに落ち込んでいましたが、とりあえず現ブログのDBがMySQLに移行成功してほっとしました。
]]>なので自分の環境で出来る限りのキャプチャーを取ってみました。検証したブラウザは以下の通りです。クリックするとキャプチャー画像をご覧になれます（画像は2倍に拡大してあります）。
結果はWindows Internet Explorer6,7,8は内側に表示、Firefox2,3,3.5はWindows,Macintoshともに左に1pxは見出す、Safari4はWindows,Macintoshともに内側に表示、Google Chrome,Opera9.6はともに内側に表示されました。
統合ボーダーモデルとはborder-collapseプロパティの値にcollapseを指定した場合を指します。separeteを指定した場合はこのずれは生じません。
]]> この記事にも再度引用文を入れておきます。統合ボーダーモデルでは、その名の通りボーダーが統合された状態で表示される。各ボーダーモデルはセル間を中心に表示されることになる。テーブル上下左右にはボーダーの半分がはみ出すので注意が必要だ。
僕の使ってるレンタルサーバーもtmpディレクトリを探したのですが、やはり見当たりませんでした。ググってみるとこの辺の記事が参考になりそうでした。
念のためにmt-config.cgiをコピーしてバックアップを取っておきます。そしてmt-config.cgiの一番下に以下のように記述しました。
TempDir /home/user/www/mt/temp
※userにはユーザー名、mtにはMovable Typeをインストールしたディレクトリ名を入れる
リモートのMTがインストールされているディレクトリにtempディレクトリを作ってバックアップをするとtempディレクトリ内にバックアップされます。
]]>iPhoneを繋ぐと同期中に必ずiTunesが落ちてしまいました。どうやら原因はLast.fmのアプリ(Mac側)を入れていたのですが、再生した曲をLast.fmへスクラブするのに使用するプラグインであるAudionScrobbler.bundleが原因でした。
ホームフォルダ内のライブラリ/iTunes/iTunes Plug-insに入っていたプラグインを外すと問題無く同期出来ました。
Last.fmへスクラブ出来ないけど仕方なく外す事にしました。
]]>$('#hoge').css({'display' : 'block', 'margin-bottom' : '0.5em'});
プロパティと値は:(コロン)で区切り、プロパティとプロパティは,(カンマ)で区切る。プロパティ同士は{}(ブレス)で囲む。
]]>インストール初日に近所の思い出の場所?にてさっそくタグづけをしました。その場所は私が小学生の頃にカタツムリを取った場所です。
当時は雨が上がるとその場所にはぎっしりとカタツムリが壁にいたのですが、いつの頃か全くいなくなっていたのです。なのでこの場所に「昔ここにカタツムリがいっぱいいた」とタグを付けてみました。
自宅からセカイカメラを覗くとランドマークのタグ以外は2、3個とごく少数で、近所にはiPhoneユーザーはあまりいないんだなぁと思っていましたが、今日タグづけした場所で再度セカイカメラをのぞくと、「へぇー」、「そうだったんですね」とコメントが付いてました。
なんだか嬉しくなったのでブログに書いておきます。
]]>