nocblog

  • はてなブログはjQueryが使えるらしいので使ってみた

    jQueryが使える？！

    あの忌まわしいprototype汚染から逃れることが可能で、しかもクロスブラウザ対応にもできちゃうという魔法のフレームワークjQueryがはてなブログでは使えるの！？はたしてその真相はいかに！？

    というわけでためしてみた

    <script type="text/javascript">
$(document).ready(function(){
var hoge = $("<button>これはボタンです</button>");
    hoge.click(function(){
        alert("ボタンがあったらクリックしたくなるのが人間というものです。");
    });
    $(".entry-content:first").append(hoge);
});
</script>Code language: HTML, XML (xml)

  • Javascriptでウィンドウを縮小させる。(Firefox編)

    Javascriptと正確にはCSSを使って、ウィンドウをスクリプト側から縮小させる方法です。
    Firefoxは、IEやChromeにはある「zoom: 1.0;」のようなCSSがなく、独自に「.MozTransform=”scale(0.1)”;」があります。しかしこれ、ちょっとやっかいで縮小するとウィンドウが中央に配置されて、画面のまわりが余白だらけになってしまいます。これをどうにか左寄せしようと思います。

    そのまえに問題です

    xが0.1のとき
13000

xが0.2のとき
5800

xが0.5のとき
1440Code language: CSS (css)

    このxの数式がなんなのか当ててみましょう。

    私は・・わかりませんでした・・・orz
    これはワイド画面のディスプレイでとあるページで画面の左上寄せに必要だった余白部分のサイズの数値です。

    しょうがないので、Firefoxの縮小の挙動を考えてみることにしました。

    ウィンドウの横の長さが980だったとしたら、それを0.8倍にしたら、784。
    つまり、もともとのウィンドウのサイズ980-784で196だけ小さくなった。
    この196というのは余白分。画面は中央に表示されているので、左と右の２つの幅ということになる。
    なので、これを2で割ると、その半分の余白のサイズが求められます。

    そしてらできた

    var htmlElm = document.getElementsByTagName("html")[0];
htmlElm.style.MozTransform="scale(1)";
var sx = document.body.clientWidth * 1.0;
var sy = document.body.clientHeight * 1.0;
var a = 0.5;
htmlElm.style.position = "absolute";
htmlElm.style.left = "-"+((sx-sx*a)/2.0)+"px";
htmlElm.style.top = "-"+((sy-sy*a)/1.98)+"px";
htmlElm.style.MozTransform="scale("+a+")";Code language: JavaScript (javascript)

    フレームページの場合はこうする。

    var sx = document.getElementById("iframe").contentDocument.body.scrollWidth * 1.0;
var sy = document.getElementById("iframe").contentDocument.body.scrollHeight * 1.0;Code language: JavaScript (javascript)

  • PHPのプログラムデザインを考えてみる

    PHPで書くコードは、おもしろいほどぐちゃぐちゃになるんだよね(^_^;)
    コードを書くところが の間なので、HTMLのどこにコードを書いても問題がないのがPHP。だから、モジュールをインクルードするところも自由と言ったら自由になってしまう。

    それに、Cのようにヘッダファイルというものがないし、Pythonのようにファイル名がそのままクラス名になったりするわけでもないし、インクルードファイルがHTMLでも問題ない。PHPはプログラム言語と言ってしまっていいのかわからないほど、マークアップ言語に限りなく近いベースになっている感じがする。

    だからなのか、今までPHPをやってこなかった自分でもどこのPHPの書籍を読んでなくてもすんなりとPHPを書けてしまった。初めてじっくりかいたけど、なんていうか・・・なにかひっかかるものがあった。このもやもやを解決するためにも、Pythonを見習ってPHPでプログラミングするためのプログラムデザインを考えてみようと思います。

    「.htaccess」でどのディレクトリのファイルにアクセスしてもindex.phpに飛ばすようにする

    PHPは「.php」ファイルに直接アクセスしてその処理をサーバーサイドで表示させますが、ディレクトリのどのphpファイルにも自由にHTTPからアクセスできるようになるのは、セキュリティ上リスクがあるのではないかと考えます。例えば、index.phpからインクルードするための内部だけで使われるPHPファイルがあったとしたら、そのファイルにindex.phpを経由せずともアクセスすることが可能になってしまいます。

    .htaccessではこのように書きます。

    #Rewriteを使う
RewriteEngine On

#ベースのディレクトリ
RewriteBase /

#アクセスを許可するディレクトリを指定
RewriteCond %{REQUEST_URI} !^/css/(.*)
RewriteCond %{REQUEST_URI} !^/js/(.*)
RewriteCond %{REQUEST_URI} !^/img/(.*)

#全てのアクセスをindex.phpに飛ばす
RewriteRule .* index.phpCode language: PHP (php)

    このようにすれば、index.phpにディレクトリ配下のファイルへのアクセスがあった場合index.phpに飛ばすことが出来ます。ただ、Rewriteを使えるようにするには、Apache側で、モジュールを追加する必要があります。

    詳しくが「mod_rewrite.so」で検索するか、下記URLで調べてみるといいです。

    http://memorva.jp/memo/linux/mod_rewrite.php

    クラスは「classes」フォルダにまとめる

    とりあえずどこでもインクルードできるのがPHP。だから気づけばディレクトリがファイルの山で、しかもファイル名が適当で何がなんなのかわからなくなってしまうことを避けるためにも、クラスは「classes」フォルダに纏めることにします。

    <?php

class Hoge {

    public $hage = 1;

    public function hoge(){
        print($hage -> var);
    }

}
?>Code language: HTML, XML (xml)

    こんなファイルを作ったら、classesフォルダに「hoge.php」という名前で保存します。

    20120512162037

    このクラスが使いたくなったら、

    include("classes/Hoge.php");
$hoge = new Hoge();Code language: PHP (php)

    として使用します。classesフォルダより前に何か書かなくてもいいの？ という場合でも問題はありません。なぜからphpファイルへのアクセスは全て「index.php」を介しているので、カレントディレクトリが変わるようなことはまずありえません。index.phpにアクセス解析を仕込むことも可能になります(笑)

    ページは「views」フォルダにまとめる

    別に「pages」でもいいと思います。「pages」フォルダを作成したら、そこに作りたいページのファイルを設置します。
    20120512163310

    しかし、設置しただけでは表示できることができませんので、index.phpを編集します。

    $url = $_SERVER["REQUEST_URI"];
if (preg_match("/^welcome\\/?$/", $url)){
    include("views/welcome.php");
}
else if (preg_match("/^information\\/?$/", $url)){
    include("views/information.php");
}Code language: PHP (php)

    これで呼び出せるようになる上にアドレスバーにはちゃんと/welcome/と表示することができます。

    「modules」フォルダを作成する

    外部からダウンロードしたphpのライブラリや、ひとつの機能だけをもったphpファイルを入れておきます。classesフォルダと分けるのは、他からDLしてきたファイルは必ずファイル名=クラス名となっているわけではないので分ける必要があります。

    一つの機能だけを持ったファイルというのは

    modules/hoge.php

    function hoge() {
    return "hoge";
}Code language: JavaScript (javascript)

    のようなそんなかんじのものです。

    index.phpの先頭には、デバッグ変数やサイトの設定用変数を定義しておく

    将来的にサイトを全体的に変更する必要がでてきた場合などに対処するために、index.phpの先頭にはサイトそのものの設定用の変数や言語パックのインクルードなど用意しておきます。

    index.php

    $DEBUG = true;
$SITE_TITLE = "Hoge Site";
$SITE_VARTION = "1.00";
include("language.php");
〜Code language: PHP (php)

    共有のUIを使用する場合は「ui.php」を用意する。

    ブログのように、どのページにアクセスしても同じデザインのページで、本文だけ違うといったサイトをよく見かけると思います。そのように実装する場合は、index.phpにui.phpをインクルードするようにし、「ui.phpのインクルード」 → 「views/xxx.php」というふうにすることで全てのページに共通したuiで表示させることができます。

    その他細かい決め事

    だいたい重要なことは上に書きましたが、やってはいけないこととして箇条書きにしていきます。

    • index.phpに必要なクラスや関数をまとめてインクルードしない。
    • モジュールとクラスは必ず「views/xxx.php」の先頭でインクルードする。
    • クラスやモジュール内でクラスからグローバルインスタンスを生成しない。
    • ファイル名とクラス名の一致のルールは必ず守る
    • ファイル名と関数名の一致のルールは必ず守る
    • module.phpに関数まとめてしまえなんてことはしない
    • classes.phpにクラスまとめてしまえなんてことはしない
    • config.phpファイルを作ってそこにサイトの情報まとめてindex.phpの先頭にインクルードさせるなんてことはしない
    • upload.phpというファイルが必要になったら、ページ扱いとしてviewsフォルダ内に入れる。
    • ページの中に更にページが必要になるような挙動が必要になる場合は、「views」フォルダ内にフォルダを作成し、「index.php」とそれ以外のファイルを設置するようにする。