[暴満館] 2005年3月のエントリ

Home / Diary / 2005年3月のログ

MySQLでの関数を利用したソート
ゲームミュージックアレンジとか色々
3人に1人は（自称）インターネット「上級者」
ニュースサイト向けの即席サイト軽量化法後編
CSS記述規則「プロパティ別整理法」の提案
ニュースサイト向けの即席サイト軽量化法中編

MySQLでの関数を利用したソート

WordPressでの静的生成を行う際に、データベースから記事を取得するのだが、このサイトの仕様上日付昇順・時間降順で取り出したかった。だが、WordPressの仕様上、投稿時間は「2005-03-05 12:34:56」のような形で記録されているので、このままでは使えない。

真っ先に思いつくのは真ん中で区切って、それぞれでソートかければいいじゃん。ってとこなんだが、ソート方法指定部分であるORDER以降は関数が使えない。

SELECT ... ORDER BY DATE( post_date ) DESC, TIME( post_date ) ASC

これだとエラーが出てしまう。んがー！　どうすりゃいいんじゃー！　と3日ぐらい本気で悩んでいたら、ある日ふと思い浮かんだ。SELECTで指定したやつってそのまま使えるんでね？

SELECT DATE( post_date ) AS p_date, TIME( post_date ) AS p_time ... ORDER BY p_date DESC, p_time ASC

AS …ってのは、関数の結果を変数として宣言するみたいなもんだと思いねぇ。「2005-03-05 12:34:56」というデータをDATE関数。つまり日付部分だけ抽出してp_dateという変数を宣言して代入。しかるのちにソートに利用すると・・・できた！　ローカルでは。

どうやらDATEとTIME関数はMySQLのバージョンが古いと使えないらしく、練習用のレンタルサーバー上では動かなかった。それならSUBSTRで取り出すしかないな。

SUBSTRING( post_date, 0, 10 )

これで日付部分が・・・！　と思ったらなぜか空白。何も取得できない。

SUBSTRING( post_date, 11 )

こっちはOKで、時間部分を取得できた。文字列の頭から10バイト取得だよなぁ、なんで取得できないんだ？　と思いながら適当に弄っていたら抽出に成功。

SUBSTRING( post_date, 1, 10 )

どうやら文字列の頭を取得するには1から始めなければいけないようだ。phpの感覚で使ってたのがいけなかったのか。最後に念のためキャストして終了。

これで無事に日付昇順・時間降順で記事を取り出すことができた。おかげで静的生成スクリプトも完成したが、まだまだMySQLを使いこなせていないなぁと実感した。ってか、初歩の初歩でつまづいてるな。

Info

投稿日: 2005年3月7日
このエントリの固定リンク: http://bmky.net/diary/log/793.html
ブックマークに追加する
コメント: コメントを投稿する

2005
0307

⇧

ゲームミュージックアレンジとか色々

s Desires」](http://www.ocremix.org/detailmix.php?mixid=OCR01321)

Info

投稿日: 2005年3月6日
このエントリの固定リンク: http://bmky.net/diary/log/790.html
ブックマークに追加する
コメント: コメントを投稿する

2005
0306

⇧

3人に1人は（自称）インターネット「上級者」

ウイルス対策に詳しい／ウイルス対策をしている

ホームページや掲示板の運営経験がある

ネチケットやネット上のルールに詳しい

検索で目的の情報にたどり着ける

アフィリエイトなどで副収入がある

ほぼ毎日インターネットを利用している

Blogを執筆している

オンラインショッピング（オークション）の利用経験がある

オンラインバンキング（トレード）の利用経験がある

オンライントレードを利用している

メールアカウントを複数所持している

メーリングリストやメルマガを購読している

オンライン上の懸賞応募の経験がある

ずいぶんしょぼい条件だなおい。上から4つぐらいはインターネットを使う上でほぼ必須の内容だと思うんだが。

インターネット上級者が増えたという意見は、ただ単に上級者じゃない人間が増えただけで、そう見えるだけじゃないかと。

ていうか、インターネット上級者だなんて恥ずかしくて自称できないんだが。俺だけか？

Info

投稿日: 2005年3月6日
このエントリの固定リンク: http://bmky.net/diary/log/791.html
ブックマークに追加する
コメント: コメントを投稿する

2005
0306

⇧

ニュースサイト向けの即席サイト軽量化法後編

前編、中編と続いてサイトの軽量化の話をしたが、最後は閲覧者への負担等を減らすTipsなどを。

CSSのbackgroundでfixedを使用しない

スクロールしても画像の位置がそのまま、なんてページがよくあるが、ブラウザのスクロールがかなり重くなるので、仮に設定する場合でも小さくするなどといった配慮が必要。

img要素にはwidthとheightを

widthとheightが指定されていない場合、ブラウザ側で画像を取得して幅と高さを設定して表示する。

これだけならまだいいんだが、転送速度が遅かったりすると、ソースを全て読み込んだあたりでも画像を読み込んでくれないので、困ったことが出てくる。それはアンカーへのジャンプ。

URLの最後に#exampleなんてついてたりすると、ページ内の指定された場所までスクロールしてくれるのだが、そのページ内に画像がwidthとheightの指定無しで表示されていた場合、

真っ先にHTMLを読み込む
HTML部分の描画が終わってアンカーへジャンプ
画像の読み込みが完了して高さと幅を調整
画像の量次第では変な位置まで表示位置がずれる

このような手順で最終的にブラウザでの表示位置がずれてしまう。こうなると閲覧側としては混乱するばかりだ。なんで全然関係ない部分に飛んだんだろう？　と。

こうならないためにもwidthとheightの指定は絶対するように。OS的にも余計な描画量が減るので一石二鳥。

背景が「白」なら文字は「黒」は間違い？

間違いではないが、やや灰色に近づけたほうが目に優しい。例えばこのサイトは「#222233」で指定している。背景「白」で文字「黒」でフォントサイズ9px固定とかだと、「目がぁー！　目がぁー！」となること請け合い。

最後に

三回に渡ってグダグダ書いてきたが、今まで書いたことは何一つ改善しなくてもサイトの運営には全く困らないだろう。だが、時間をかけて改善した見返りはジワジワと現れてくる。何よりも閲覧者へのデメリットとなることが一つもないのだから、人に見てもらうことを前提としているならば改善すべきだと俺は思う。

あと、テーブルレイアウトについてはそこそこ肯定。下手にfloat段組利用されて、ウインドウ小さくするとメニューがすっ飛んだり、ブラウザの文字を拡大するとレイアウトが崩れたりするよりは、テーブルでレイアウトされたほうがまだマシ。でも多段テーブルだけは勘弁な。

Info

投稿日: 2005年3月6日
このエントリの固定リンク: http://bmky.net/diary/log/789.html
ブックマークに追加する
コメント: コメントを投稿する

2005
0306

⇧

CSS記述規則「プロパティ別整理法」の提案

図書館方式の何が不満か

とにかく無駄な時間がかかることが不満です。

メンテナンス性の低さ、見栄えと関係の無い事象への負担が無視できないほどに大きいのです。これは、良いスタイルを目指す際の重い足かせとなっています。

欠点の部分を読むと、確かに身に覚えのある部分が。んーむ、とりあえずハッカーズのページあたりで試してみるか。

Info

投稿日: 2005年3月5日
このエントリの固定リンク: http://bmky.net/diary/log/788.html
ブックマークに追加する
コメント: コメントを投稿する

2005
0305

⇧

ニュースサイト向けの即席サイト軽量化法中編

前編では具体的な軽量化方法を示したので、次は実践してみよう。

Devas（Vectorの紹介記事）

あると便利っつーか無いと始まらないソフトウェア。ニュースサイトともなると過去ログの量が膨大な数に上るので、テキストエディタで直していったら日が暮れてしまう。そこでこのDevas。複数ファイルへの正規表現による文字列検索・置換を行うことが出来る。

まずは上記リンク先からDevasをダウンロード。適当なフォルダに解凍して起動する。自分にあったオプション設定をしたら実際に置き換えをしてみる。

例1 a+fontからfontタグを取り除く

<font color="#994400" size="3">[サイト名](http://hoge/)</font><br />

これを

[サイト名](http://hoge/)<br />

こうなるように置換する。カラーコードやサイズ指定はどんな指定でも大丈夫なようにする。普通にfontタグで検索かけて消してもいいんだが、正規表現の練習と余計なタグを消してしまわない為にも、ここは正規表現で一発置換をしてみる。ディレクトリかファイルを指定して次のように打ち込む。

<font color="＃[0-z]+" size="[0-9]">(.*?)</font>

「[0-z]+」は数字の0からアルファベットの小文字のzまでの文字が1文字以上続いていることを表す。この場合はカラーコードだな。

「(.*?)」は改行以外の文字の連続を表す。括弧については後述。?をつけておかないとfontの閉じタグまで含めてかなり広範囲に拾ってしまうので、一番狭い範囲で拾えという意味。

上記2つとも条件にさえ合っていれば、どんな内容だろうとソフトウェアが拾ってくれる。これが正規表現というもの。まあ、やたら融通の利く検索ってことで覚えておくといいだろう。

これで検索をかけるとずら～～とヒットした行が表示される。そしてコマンド部分に以下のように入力して置換する。

\1

これだけ。¥と数字を組み合わせると、検索時に括弧で囲んでいた部分をそのまま利用することができる。この場合はfontタグで囲んでいたaタグ全てを指す。つまり、最終的にはリンク部分が残るというわけだ。

<p>\1</p>

こうすればpタグで囲むこともできる。各自工夫すべし。Devasはバックアップも取ってくれるので、何度か試してから全てのHTMLファイルに置換を行おう。

例2 <br>の連続をhrに

<br /><br /><br /><br /><br /><br />...

<br />
<br />
<br />
<br />
<br />

これらを

<hr />

にする。改行は¥nで表すことができる。

(<br />\n?){5,}

「¥n?」は改行があるなら改行も含めるという意味。括弧で囲むことで、括弧内の文字列を一文字として扱い、最後に「{5,}」という部分で、最低5回以上の繰り返しという意味。カンマの左が最低一致数、右が最高一致数。どちらも省略可能となる。

<br /><br /><br />
<br />
<br />

こんな感じに整っていない部分でも大丈夫。

例3 head内のスタイル記述を全て外部CSS参照に変える

<style type="text/css"><!--
body { ...
...
...
--></style>

これを

<link rel="StyleSheet" type="text/css" href="style.css" />

このような形にする。この場合はstyleタグ全体を置換するようにする。

<style type="text/css">.*?</style>

正規表現を使えば、パターン化されていないような所ですら無理矢理取ることも可能なので、膨大なファイルを相手にする場合にはDevasと一緒に使い方を覚えておけば非常に運営が楽になる。

ファイルサイズのチェック

置換作業が完了したら実際にHPのサイズを測ってみるといいだろう。リンク先では入力したURLのファイルサイズを測ってくれる。HTMLだけでなくimg要素からも拾ってきてくれるので、ここでの表示を参考にして画像等を削ったり構成を見直すのもいいだろう。

オフラインで測りたいならHTML体重計を。

同業者を参考にする

ニュースサイトの中でもHTML構成に気を遣っている（と思われる）サイトを参考にしてみるのもいいだろう。

せっかくだから

もちょっと続く。最後はブラウザでの負荷を減らす方法とかのTipsめいたものを。

Info

投稿日: 2005年3月5日
このエントリの固定リンク: http://bmky.net/diary/log/787.html
ブックマークに追加する
コメント: コメントを投稿する

2005
0305

⇧