[PHP5] OOPで掲示板を作ってみる – Step4: ログの表示

by

オブジェクト指向プログラミングでフレームワークを使わずに掲示板作成その４。
書き込んだ内容を表示して初めて掲示板となるのだ！フーハハー

目次

  • 序章
  • Step1 : MVCを揃える
  • Step2 : テンプレート作成
  • Step3 : 書き込み
  • Step4: ログの表示　←　今ここ
  • Step5: 設定ファイルと細かな修正
  • Step6: 編集＆削除画面
  • Step7: 編集＆削除機能
  • Step8: ページング

このエントリーで掲示板の基本完成。

続きを読む

[PHP5] OOPで掲示板を作ってみる – Step3: 書き込み

by

オブジェクト指向プログラミングでフレームワークを使わずに掲示板を作るその３。
ログ手打ちするの面倒だから先に書き込み実装します。

目次

  • 序章
  • Step1 : MVCを揃える
  • Step2 : テンプレート作成
  • Step3 : 書き込み 　←　今ここ
  • Step4: ログの表示
  • Step5: 設定ファイルと細かな修正
  • Step6: 編集＆削除画面
  • Step7: 編集＆削除機能
  • Step8: ページング

続きを読む

[PHP5] OOPで掲示板を作ってみる – Step1～Step2

by

「PHP ○○ 作り方」みたいなキーワード検索するとべた書きの作り方がHitしまくる。
それなのにOOPなサンプルはあんまり見つからない。言語を英語にしても。
キーワードをMVCにすると結構ヒットするんだけど、殆どがフレームワークの使い方だったりして。

OOPの例としてよくあるのはオブジェクト指向プログラミングで書いたようなクラス単体のものだと思う。
でも実際何か作ろうとしたらクラスひとつで足りるわけがないし、クラス書いたすぐ真下で実行なんてしないじゃん？
ZendとかCakeとかPEARみたいなフレームワークを使って何かを作るにしても
クラスをどうアレすれば掲示板とかになるの？って疑問は解決しない。
フレームワーク使えばそりゃ掲示板の一つや二つさくっと出来ますよ？
出来るけどフレームワーク使うほどでもない時もあるし、OOPで組めって言われた時困るから本質が知りたい。
それで、探して見つからないなら形にして達人からのコメント待てばいいじゃない！って結論に至ったので
独学で得た情報を元にオブジェクト指向な掲示板を作ってみることにしました。

暇を持て余したOOP達人が見てくれることを期待しながら 😀

なお、この記事はある程度ベタ書き経験があり、オブジェクト指向プログラミングに書いてあることが一通り理解出来ている人じゃないと意味不明だと思います。

続きを読む

[Dreamweaver] テンプレートパラメータのサンプルと解説

by

以前TwitterでDreamweaverってどうよ？メモ帳でよくね？的なRTが回ったとき、
私が便利機能として挙げたのはサイト内全文検索と正規表現置換だったのだけど、もうひとつ、
140文字じゃ到底説明しきれないテンプレートパラメータについて熱く語ってみようと思う。

Dreamweaverのイメージといったらコードの自動補完の次にテンプレート機能っていう感じだから
ソフト使ったことがある人なら１００％に近い確率でdwtファイルを作成したり修正したりしたことがあるはずだ。
しかしテンプレートパラメータについては意外と知らない人の方が多い。
メニューを良く見ると「修正」の「ページプロパティ」の下にテンプレートプロパティっていうのがあったりするんだけども、
正規表現に似てプログラミングっぽいからとっつきにくいのかな。

template property

続きを読む

MooTools Core 1.3 リリース！新機能・変更点まとめ

by

まだ私も良く分かってないので調べながらメモっていくつもりで。

1.3がでたので1.2で書いたプラグインもバージョンうｐしなきゃ！と思っても慌てる必要はnothing！
下位互換機能がついたCore（width Compatibilityなやつ）を選べば共存出来る。

Slick

セレクタエンジンSlickはMooToolsのファミリープロジェクト。だってお。
1.3でCoreに内臓されてCSSのセレクタを使用したDOM操作がパワーアップ。

Create Element

1.2.xで要素を作るときのソース：

new Element("div", {"id": "mootools", "class": "moo cow","title":"Sample", "text":"MooTools!"});

Slickで書くとこうなる:

new Element("div#mootools.moo.cow[title=Sample][text=MooTools?]");

Result:

<div id="mootools" title="Sample" class="moo cow">MooTools?</div>

ZenCodingみたいな感じだけど作れる要素は１つだけです。
１行で済むのは楽っちゃ楽だけどOOPライクな前者の方が見やすくて好きだな。

続きを読む

[CakePHP] PagenatorのURLをGETな感じに変更したい

by

CakePHPのPagenationの便利さに感動したのも束の間、URL見て我が目を疑う。

http://example.com/news/page:3/sort:id/direction:asc

なにこれ！(ﾟДﾟlll)　なんでコロン！？
世のCake使いのみなさんはこのURL気持ち悪くないんだろうか？

普通にアンバサンドとイコールで繋げてあるやつがいいんだけど…

http://example.com/news/?page=3&sort=id&direction=asc

検索しても根本的な解決方法が見つからないまま朝日を拝む始末…（今6時）

試しに後者のURLを打ち込んでみたら同じ動作になったから、
アンバサンドとイコールのURLでもソートやページングは機能するらしかった。
なら変更も出来るのじゃないかと検索していたら、変更した場合の問題についてのレスが見つかる。

続きを読む

[php] Gettext + Poedit で多言語化

by

カナに切り替えるのが面倒で全部半角英数で作ったらいたく不評だった、なんて経験あるかもしれない。

翻訳前(en)

じゃせめてUIくらいは日本語にするか…と思ったなら、ローカライズしとけば一石二鳥じゃないか？ 😀

wordpressのテンプレートファイルを翻訳する方法と似たような方法で普通のPHPウェブページやCGIも多言語化出来る。
gettextで検索するとコマンド-xgettextを使う方法が出てくるが、Windowsじゃ使えないし目も疲れるし
Poeditという素晴らしいソフトがあるのでコマンド使わずに出来る方法をメモっておくことにする。

続きを読む前にPoeditを公式サイトからダウンロードしてインストールしよう。
シンプルなアプリケーションだからそう難しくはないはず。

続きを読む

Google Maps API V3 + Google Directions API

by

V3のマップにルート案内 (Directions API) を実装しよう。

GMap+DirectionAPI

APIで提供される交通手段は車・徒歩・自転車で、電車や飛行機を使う経路や発着時間を指定しての検索は出来ない。
なのでロサンゼルスから東京に移動するルートなんかを検索すると「太平洋をカヤックで横断する」と出たりする。
遠方の検索は公式の地図検索を使えって事なんだと思う。

解説は抜粋なのでソース全文は記事末尾からダウンロード出来るZipのjsファイルを見てください。

続きを読む

[HTML5] Drag and Drop API のこと

by

HTML5のドラッグ＆ドロップはこれ書いてる時点でFirefox、Chrome、IEが対応。
しかしIEの場合はFileReaderとデータURI未対応だから全く面白みがない。

Drag出来るといってもMooToolsやjQueryなどで実装するようなぬるぬる動かすようなものではなく、
html5.jpのチェックページにあるツールのように、右から左へ受け流すようなことしか出来ない。
jQueryとの比較がこのサイトで見れる。

故にshapeshed.comのデモみたく、ゴミ箱にドキュメントを捨てたり、カートに商品を入れたりする用途には向いているが
自由奔放にドラッグさせるとなるとFrameworkの力を借りるより他ない。

サンプルでよく見るのはコンピューターにあるファイルをブラウザウィンドウにドラッグして、
そのファイルの中身をFileAPIで読み込んでこねこねするっていうやつだと思う。
以下に簡単なサンプルを示す。

続きを読む

[css3+MooTools] gradientで自爆ボタン

by

JAMのお題がボタンと聞いて思い浮かんだネタの中で一番汎用性ありそうだった自爆ボタンをMooTools用プラグインとして作ってみた。
勢いのままFirefoxでガッと組んだので他のブラウザは順次対応予定です…。
Webkitも見れるようにした。※Chromeはバグで角が四角くなる。

自爆ボタン – jsdo.it – share JavaScript, HTML5 and CSS

JavaScriptで要素を作成して制御、見た目は全てCSS。
Canvasじゃないのはその方がデザイン変えやすいかなと思ったのと、CSS3が使いたかったからです。
ストライプ部分にだけbase64化した画像使っています。

爆破までは　ピン上げる→カバー外す→ボタン押す　っていう流れです。
カバー外すとonReadyイベントを、ボタン押した時にonStartイベントが実行されます。

続きを読む

[MooTools] border-radiusの簡単なIE対策

by

角丸にする既存ライブラリは色々あるけどHTML5対応してなかったり配置が崩れたりで、
もう面倒だから四隅にspan置いて背景指定すればいいわ…と思って作ったクラス。

new IERadius($("main"));

角丸にしたい対象を指定すると、その要素内に次のようなspanが自動作成される。

<span class="radiusFix main-tLeft" style="position: absolute; width: 5px; height: 5px; display: block; top: 0px; left: 0px;"></span>
<span class="radiusFix main-tRight" style="position: absolute; width: 5px; height: 5px; display: block; top: 0px; right: 0px;"></span>
<span class="radiusFix main-bLeft" style="position: absolute; width: 5px; height: 5px; display: block; bottom: 0px; left: 0px;"></span>
<span class="radiusFix main-bRight" style="position: absolute; width: 5px; height: 5px; display: block; bottom: 0px; right: 0px;"></span>

コーナーだけの画像を作って、
radius_sprite

スタイルシートで背景指定する。

html {
	background-color:#113A57;
}
#main {
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
}
#main{
	background-color:#fff;
}

.radiusFix {
	background:url(../images/radius_sprite.png) no-repeat left top;
}

.main-tLeft{background-position:0px 0;}
.main-tRight{background-position:-5px 0;}
.main-bRight{background-position:-15px 0;}
.main-bLeft{background-position:-20px 0;}

指定した親要素にはposition:relativeが付与される。
positionを使うのでIE6でCSSのバグが発生する事がある。（floatが中にある要素に使った場合など）

左：使用後　右：使用前
radius_sprite_after

続きを読む