Labs

フォーム項目の内容が変更された時のjQueryのイベントまとめ。

2012.07.05 / Labs

テキストフィールドや、ラジオボタンなど、フォーム項目の内容が変更された時に処理を行うための、jQueryによるイベントのまとめです。
サンプルはこちら

 

フォームは次のように、テキストフィールド、テキストエリア、ラジオボタン、チェックボックス、セレクトボックスを作成します。

上記のフォーム項目ごとに、内容が変更された時にイベントを取得して、別のDIVタグ内に変更内容を表示するようにしています。

テキストエリア、テキストボックスは、キーボードが押された時に、ラジオボタン、セレクボトックスは選択が変更された時に、チェックボックスはいずれかのチェックボックスが押された時にそれぞれイベントを取得しています。

 

変更内容の確認のための各DIVは、次のように記述しています。

DropboxでMAMP環境を同期。

2012.05.14 / Labs

Dropboxで複数のMacにMAMP環境を同期する方法です。
今回はMAMP通常版ではなく、PRO版を利用しています。(通常版とは管理画面と、MySQLのデータ格納先が変わります)
MAMP環境で同期を行いたいディレクトリは、ApatcheのドキュメントディレクトリとMySQLのデータを格納しているディレクトリの2点です。

 

Apatcheのドキュメントを格納している「htdocs」ディレクトリをDropboxで同期させるには、MAMPの管理画面からディレクトリを変更することができます。
MAMP
MySQLのデータを格納しているディレクトリは、PRO版ではルートのライブラリフォルダ内に保存されています。

この「mysql」ディレクトリをDropbox内に移動して、代わりに(Dropboxに移動したディレクトリの)シンボリックリンクをこちらに配置します。シンボリックリンクの作成には「MacDropAny」が便利です。

 

以上にて、Dropboxで複数のMacにMAMP環境を同期することが可能です。

 

Dropboxで同期する上で1点気をつけたいのは、MySQLがデータベース管理のために「ibdata1」というファイルを上記の「mysql」ディレクトリに作成するのですが、これはデータベースを作成するごとにファイルサイズが大きくなり、後にデータベースを削除してもファイルサイズは小さくなることはありません。
ですので、しばらく使っているうちに、すぐに数百メガにまで大きくなり、これをファイルの更新のたびにDropboxで同期するには、やや問題があります。

 

その対策として、「ibdata1」ファイルにはデータベースごとのデータを追加せず個別にファイルを作成するために、MySQLの環境設定ファイルで次の1行を追加します。

MySQLの設定ファイルはMAMP PROではメニューの「File > Edit Template > MySQL my.cnf」より編集が可能です。
これで、作成するデータベースごとにディレクトリが作成されて、さらに各テーブルごとのファイルとして保存してくれるので、必要最小限の容量のみをDropboxで快適に同期が行えます。

PHPで祝日/イベント対応のカレンダーを作成。

2012.05.12 / Labs

PHPではPEARなどのライブラリを利用すると簡単にカレンダーを作成できますが、CakePHPなどフレームワークをベースに開発している場合、あまり他のライブラリを利用したくないこともあります。
また祝日情報を含むイベント情報を簡単に組み込めるカレンダーとして、シンプルなカレンダーを作成してみました。
サンプルはこちら

 

機能としては指定月のカレンダーを生成し、イベント情報を配列として渡すことで、該当日にイベント内容を表示することができます。
祝日情報の取得の関数「getHolidays()」については、「Googleカレンダーから祝日情報を取得。」をご覧ください。

CakePHPで利用する場合には、コンポーネントとして登録しておくと使い勝手が良いかもしれません。

CakePHPで作るシンプルなアップロードフォーム。

2012.05.08 / Labs

CakePHPでファイルをアップロードするための基本機能のみフォームのサンプルです。使用しているCakePHPのバージョンは2.1.2です。

 

データベースには「uploads」というテーブルを作り、ファイル名を保存するために「file_name」のカラムを設けています。

コントローラーの「UploadsController.php」には、アップロードされたファイル名の一覧のための「index」と、ファイルをアップロードするための「add」アクションを作ります。
(bakeで焼いたものをもとに、手を加えて作成してあります)

ファイルのアップロード処理自体はCakePHP特有のものではなく、通常のPHPの処理になります。途中の「WWW_ROOT」「DS」はCakePHPで用意されている定数で、詳しくはドキュメントページで確認できます。
ここではアップロードされたファイル名のみ、データベースに登録するようにしています。

 

ファイル名一覧のためのビュー「index.php」です。これもbakeで書き出されたものを、さらに簡略化しています。

ファイルをアップロードするためのビュー「add.php」では、フォームのタイプをファイル対応にして、アップロードのためのフォームパーツを出力しています。

モデルの「Upload.php」では、今回は特に処理を行っていません。

上記以外では、「AppController.php」の中で、「Html」と「Form」ヘルパーを読み込んできます。

以上、シンプルなファイルのアップロードフォームの作り方でした。

CSS3のTransitionでダイナミックなページ遷移。

2012.04.22 / Labs

CSS3のTransitionによるアニメーションで、Flashのような動きのあるダイナミックなページ遷移のサンプルです。

 

実はこれは「impress.js」というプレゼンテーション用のスクリプトを拝見してとても興味を持ったので、理解する目的で自分なりに作成してみたものです。

 

CSS3のアニメーションには「jQuery Transit」というプラグインを使わせてもらっています。
サンプルはこちら

 

仕組み的には拡大・縮小と回転を取り入れて、ページ(コンテンツ)の移動の際にアニメーションを行います。キーボードはスペースキーでページを送り、また方向キーでそれぞれ進む/戻るを設定しています。
HTMLでは、外側のコンテナと内側のボックス、さらにその中に各コンテンツを並べています。

CSSでは各コンテンツのサイズを座標を指定しています。

JavaScriptは外部ファイルに記述しています。
コードの大部分は、各要素の座標を管理するためのものです。

習作用のためシンプルな構成ですが、これだけのコードでもCSS3を使ったダイナミックなコンテンツが可能になります。現在はIEがCSS3のアニメーションに対応していないのが残念ですが、今後は思い切ったデザインのサイトも増えていくように思います。