HTML

マークアップエンジニアとかWEBディレクターとかをやってる僕が、自分が詰まって、解決したことをここに残しておきますよ。

コーディングで少し得をする正規表現での置換

コーディングで、お客さんからきた資料を流しこみする時、
だいたい、エクセルとか、ワードとか、パワポとかで資料がきて、
それをエディタに貼り付けて、タグでつけていくよね。

そんなときに少しだけ便利な正規表現での置換を2つ紹介。 


検索文字列
[^>]$

置換後 
<br>
 
ながーい文章のページだったりすると、ひたすら行末に<br>をつけていくのが面倒。
(僕はキライじゃないけど。)


そこで上記の置換なのだけど、検索文字列は

[^>]$

これ、いっけんなんのこっちゃだけど解きほぐすと簡単。

[^>] というのは、”>”以外っていう意味。

[^ ] で何かを囲うと、それ以外って意味になる。



$は行末って意味。


なので、[^>]$は、最後が>で終わってない行末。

それを<br>に変えていくってことね。


全部の行に<br>をつけていくと、

<div>とかのあとにも<br>ついちゃって、アーンってなるから、文章だけで行が終わってるところにだけ<br>をブワーってつけていきたいときに便利。




次。


検索文字列
¥n¥n

置換後
</p>¥n<p>
 
¥nは、ソース上の改行ってこと。

ワードとかでお客さんから支給される資料は、お客さん自身が1行あけて原稿に段落を作ってくれてたりする。

原稿内で1行あいてるってことは、改行が2つ入ってるってことで、¥n¥nになる。


それを

</p>
<p>

で置き換える。

すると、お客さんが1行開けたところに</p><p>がブワーッと入っていって、
いちいち、段落をpタグでくくっていかなくてよくなる。

規約とかプライバシーポリシーのページとかで便利かも。
 
※やってみるとわかると思うけど、この方法だと一番最初の段落の前に<p>を手打ちしないといけないのと、一番最後の段落のあとに</p>を手打ちしないといけないので注意だよ。


 

さくらサーバーでMT(MovableType)引越しの手順

仕事でムーバブルタイプ(MT)の引越しをしました。
いろいろ壁にぶつかったので、それも含めて手順を書いておきます。 

■状況
・MT4の引越し(引越し先でもMT4を使う)
・さくらサーバーからさくらサーバー(別プラン)に引越し
・DBはMySQL

-------------------------------------------------------

①データ一式をローカルにダウンロード

旧サーバーにFTP接続し、全データをローカルにダウンロードします。
生成されたHTMLファイルやMTのファイルもすべてダウンロードで、僕の場合は、30000ファイルありました。
30分ほど時間がかかりました。



②新サーバーにアップ

引っ越し後の新サーバー にFTP接続し、全データをアップします。
また30分まちます。
アップが終わると、MTはまだ使えないものの、見た目は、新しいサーバーで見られるようになります。



③新サーバーでデータベースを作る

新サーバーのサーバー管理画面にログインし、データベースを作成します。
さくらなので、サイドメニューの「データベース」のところから、作成しました。
旧サーバーの管理画面にログインしてサーバーを見てみると、MySQL4というのを使っていたのですが、新サーバーではMySQL5.5しか作れないらしい。
でも、不具合はでませんでした。
データベース名、データベースユーザー、パスワード をメモっておく。



④ mt-config.cgiをひらいて新しいサーバー用に設定情報を変更

mt-config.cgiには、データベース情報やサーバーパスなどが設定してあるので、エディタでひらいて、あたらしく作った新サーバーのDBに書きなおす。
サーバーパスも書きなおして新サーバーにアップする。

FTPソフトでcgiファイルを一気に指定して、パーミッションを755とか705とかに変更する。



⑤xxx.com/mt/mt.cgiにアクセス

こっからインストールをするわけですが、僕はエラーが置きました。
505エラー。
cgiのパーミッションが正しく設定されていなかったり、perlへのパスが間違えていたりが原因、とあるが、なんど確認しても間違えていない。

新サーバーでperlが使えないはずがないと思いつつ、念のため、pcheck.cgiで試す。

pcheck.cgiをアップして、アクセスしたところ、mt.cgiには問題がないことを確認。

結局問題はhtaccessとhtpasswdの設定が旧サーバーのままになっていた、ということで、MT管理画面にベーシック認証をかけている方ははまらないように気をつけてください。

いったんhtaccessとhtpasswdを削除して、次へ進む。



⑥インストール

あらためて、mt.cgiにブラウザでアクセスして、インストールを進める。
ブログ名は適当でOK。(あとで消すので)。
僕はMy first blog のままインストールした。



⑦プロフィールを旧MTに合わせる。

ここから、旧MTから新MTへのいろいろな設定情報を引越しさせていく。
まず、管理者のプロフィールを旧MTから新MTにコピペする。



⑧旧MTのバックアップファイルを作成

旧MTにログインする。

システムメニュー>バックアップ
を選択する。(エクスポートよりもバックアップのほうがいろいろな設定情報ごと引越しできていいらしいです)

圧縮フォーマット → 圧縮しない
出力ファイルのサイズ → 分割しない

に設定して「バックアップを作成」をクリック。
待ちます。

「tmpディレクトリに吐き出しました」的なメッセージが出ますが、どこに出てきたのか見つかりません。

mt-config.cgiにtmpの設定をしないといけないみたいで、ここを参考にmt-config.cgiにtempdirを設定。

TempDir /home/xxx/mt/tmp/
ここでバックアップをとろうとすると、エラーがでてしまう。

FTPソフトで、mtディレクトリ下に、tmpディレクトリを作って、パーミッションを変更しておく必要があるらしいので、作ってパーミッションを755とかにしておく。

バックアップファイル作成がうまくいき、tmpディレクトリ内にたくさんのファイルができている。



⑨tmpディレクトリ内の全ファイルをダウンロード

さっそくローカルに全ファイルをダウンロード。



⑩新サーバーにtmpダウンロードしたファイルたちをアップロード

新サーバーにFTP接続し、mtディレクトリの直下にある、importディレクトリ内に、tmp内のファイルをすべてアップロードする。



⑪新MTで復元

新MTにログインし、
ツール>復元
で復元をする。
このとき、ファイルは選択しないでOK(import内にアップしたので)
「グローバルテンプレートを上書きする」にはチェックをいれておく。

ここでまたエラーが出た。

ログをみろ、と言われたので
ツール>ログ
を確認すると、29283行目でエラーがあるよ、的な記述。

アップしたtmpディレクトリ中身のなかに1つだけxmlファイルがあるはずなので、それをエディタで開く。
すごいでかいファイルがひらかれる。
その中の29283行目を確認すると、エントリー本文で使っちゃいけない文字をつかってるっぽくて、よくわからないので、29283行目の<text>〜</text>の中身をすべて削除。

あらためて、importディレクトリにtmp内をアップロードして、もう一度復元。

今度はうまくいく。



⑫エラーがでる

「Request URL too large」というエラーがでる。
引っ越しするためのデータ量が多すぎて出ているらしいのですが、これが出ても引越しは完了している、というを知る。



⑬気にせず再構築しまくる

新MTでシステムメニュー>ブログ
をクリックすると、ブログは全部あるらしい。
でも、左上のプルダウンからはでてこないので、とりあえず、全部のブログを再構築する。




以上で、なんとか引越し完了しました。


 

動画をflvにして、flashでプレーヤーをつけてサイトに表示する

サイトで動画を公開するときって、結構悩む。

詳しくは知らないけど、僕はいつも、

「flvにして、プレーヤー設置してやりましょう! 」って提案する。

youtubeみたいに見せるやり方ね。
それを自力で作るやり方です。

手順としては以下のとおり。


① お客さんからもらったムービーをどうにかしてflv形式に変換する。
②flvをflashで開いて、プレーヤーを作成する。
③パブリッシュして出てきたhtmlとswfとflvをサイトに入れる。

これで出来上がり!

flashだからPCならほとんどの環境でムービーが見れちゃいます。
プレーヤーもそれなりにオシャレと思います。

-------------------------------------------------------------------------

 ①お客さんからもらったムービーをまずは、どうにかしてflv形式に変換する。

お客さんは大体、wmvとかaviとかmovとかでくれたりするので、
それをflvにしてやんなきゃいけない。

適当に無料の変換ソフトを探してみたけど、 flvに変換する過程でなぜか
すんごい劣化しちゃうんだ。

劣化した動画だとお客さんもうれしくないだろうので、

ここは、ソフトを買っちゃうのがいいと思う。

おすすめは、「動画・音楽変換!3」というやつ。

5000円。自分で負担するには嫌だけど、5000円のソフトを買ってキレイにやりましょう!
って言えばお客さんは5000円くらいは予算とってくれるよね。


これの使い方はすごい簡単なのではしょります。

どんな形式だろうと動画をドラッグ&ドロップして、形式を選んで、ボタンを押すだけ。




②次にflashでプレーヤーを組み込む。

難しそうに思えるけど、Adobe flashさんが、そういうプレーヤーのセットを用意してくれてるので、すんごい簡単だ。

Adobe flashのアプリケーションに、flvファイルをドロップしてやりましょう。

すると、「ビデオファイルの場所は?」みたいなことを聞かれるので

「コンピューター上にある」を選んで、

「プレイバックコンポーネントと一緒に読み込む」を選んで、次へ。


プレーヤーのスキンが選べる。シンプルでyoutubeっぽいのを選んだらいいんじゃないかな。


んで終了すると、もうプレーヤーと動画のセットが完成してます。

まずは、動画とキャンバスのサイズを同じにしましょう。

余白は邪魔なので。

キャンバスの適当な余白をクリックして、プロパティから編集でサイズを変える。
プレーヤーとちょうど同じサイズになるようにぴったりと。


次に動画部分をクリック。

コンポーネントパラメータというのが出てくるので、好きなようにいじるのだけど、
ここはよくわからないので、オートプレイにするのかどうかだけ決めればいい。


③パブリッシュして設置

次に、ファイル>パブリッシュ設定

書きだされるswfのファイル名とhtmlのファイル名を決める。

右側に参照ボタンがあるので、デスクトップにでも吐出されるようにしとけばいいと思う。
そのままにしておくと、どこに吐き出されたかわかんなくなっちゃうので。


これでOK!

あとはパブリッシュボタンを気合をいれてクリック!


するとすると、
3つくらいファイルが吐き出されます。

名前をつけたswfファイル → 動画のファイル
ながったらしい名前のswfファイル → プレーヤーのファイル
htmlファイル

flvのデータも同じフォルダ(デスクトップ)に置いて、htmlをブラウザでひらいてみる。

うまく動画が見れたらOK。


そしたら、htmlファイルをエディタで開いて、ソースのぶぶんを、
作っているサイトの希望の部分にコピペする。

swfファイルはflvファイルも一緒にコピペして、
入れておこう。


1つだけ注意点があって、プレーヤーのコントローラの右のほうに全画面ボタンがついてくるけど、これ、そのままだと押してもなにもならない。

そういうときは、htmlのソースの<opject>の子要素に

<param name="allowFullScreen" value="true">

を入れる。



これで、完成!


htaccessで一括301リダイレクト(古いページから新しいページへ転送)

サイトをリニューアルしたとき、古いページがサーバー内に残っちゃうことがよくある。

でもその、もう使っていないhtmlファイルを消してしまうのはもったいない。

その古いページもおそらく、google等にインデックスされたページであり、
もしかしたら、誰かがブックマークやリンクをしてくれているかもしれないページだからね。

なので、そういうときは、古いhtmlにアクセスされたら新しいページに行くように
リダイレクト(転送)をかけることになる。


一番オーソドックスなのは、html内にメタリフレッシュを書く、というもの。

<meta http-equiv=”refresh” content=”0; URL=http://新ドメイン/”>

 これをhead内に書く。


でも、htmlが多い場合は、いちいちhtmlを変更していくのが面倒だ。


そういう場合に便利なのは、

.htaccessファイルを使って、転送するページを一括で指定してしまう、というやり方。

.htaccessファイルの作り方、アップの仕方等は、検索してもらうとして、

転送するときのhtaccessファイルの書式は、以下。

Redirect 301 /company.html http://hogehoge.com/company.html 
Redirect 301 /voice.html http://hogehoge.com/voice.html 
Redirect 301 /inquiry.html http://hogehoge.com/inquiry.html 
Redirect 301 /service.html http://hogehoge.com/service.html

これだけを、ファイル内に書いてサーバーにアップする。
(public_htmlとかの直下にアップするのがいいですね)

Redirect 301・・・301リダイレクトをしますよ、という意味。
/company.html・・・このページを転送しますよ。
http://hogehoge.com/company.html・・・このURLに転送しますよ。

という意味。 

よくみると、半角スペースで区切ってあるので注意です。 


これを使えば、いちいちhtmlファイルをいじらないで済むので楽ですね!
※htaccessが使えるかどうかは使っているサーバーを確認してください。 

 
ところで、この301リダイレクト、というのをすることで、

以前のページが受け取っていたSEOパワーを新しいページに引き継ぐことができます。

リダイレクトして少し放っておくと、googleさんのほうで、
転送先のページが新しいページとして、インデックスし直してくれるし、
SEOパワーは以前のまま(少し落ちる?)。


このへんをおろそかにすると、お客さんの集客にご迷惑をかけることになるので、
301リダイレクトは必須で行いましょう。


ところで、htaccessが使えないサーバーの場合は、最初に書いた、

meta refreshを使う方法でも転送時間を0秒にすれば、301リダイレクトと同じ意味として
扱ってくれるらしい。

div内の要素数に応じてdivの長さや背景を変える。jqueryで。

タイトルからはわかりにくいかもしれない。

たとえば、コーディングでこういうデザインを組むとする。

neko1

写真は入れ替わるため、ボックスを背景において、
そのなかに写真を4つ並べることになると思う。

こんなページがいっぱい出てくる時、あるページでは、
↓こんなだったら。。

neko2

さっきの背景は使えないので、今度は小さい背景をつくって
写真を3つ並べることになると思う。


さて、静的ページだけのサイトなら手動でやってもいいんだけど、
これが動的サイトのコーディングだったのでクマってしまった。
(ie6対応だったので、css3たちは使えない)


そこで、写真の数に応じて、背景を変える、ということがjQueryでできないかなと
やってみたら、すぐに出来たので、ここに書いておきます。

jsはこんな感じ

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
imgcount = $('.nekobox img').length;
if(imgcount == 4){
$(".nekobox").css("background-image","bigbox.png");
}
else if(imgcount == 3){
$(".nekobox").css("background-image","smallbox.png");
}
});
</script>


imgcount変数に<div class="nekobox">内のimgの数を取得して代入。

imgcountが4のときは、nekoboxの背景はbigbox.png

imgcountが3のときは、nekoboxの背景はsmallbox.png


cssはこんな感じ

.nekobox{
background:url(bigbox.png) no-repeat left top;
width:400px;
height:100px;
}
 

htmlはこんな感じ。 

<div class="nekobox">
<img src="neko1.jpg" />
<img src="neko2.jpg" />
<img src="neko3.jpg" />
</div>

画像が3つのときも4つのときも、
divのclass="nekobox"を変えなくてもいけるので、
動的サイトのときなどに気をつかってやってあげると喜ばれる。



記事検索

リモキュー

お仕事のご依頼・お問い合わせはこちら

コーディングのお仕事が得意です。

https://twitter.com/tacshock
タグクラウド
QRコード
QRコード
  • ライブドアブログ