cakephp/wordpress/flash/flex/iPhone/mixiアプリの開発しています。
HTML5でAudioを便利に使うライブラリ「Buzz」
HTML5に対応しているブラウザであれば、再生、一時停止、停止、ボリュームコントロールのようなアクションを制御する事ができるようになります。
それ以外にも、オーディオのループや再生時間の取得、イベントの取得などなど、
色々なAPIが用意されています。
ファイル形式はOgg、Mp3、Wav、Aacの４種類に対応しているようです。
音声の再生には以前はFlashが必須でしたが、こういったライブラリで手軽に設置できるようになって来たのが嬉しいですね。
ブラウザによっては動作しないものもあるようですが、
フェードイン/フェードアウトも実装されていました。
デモも非常に面白いサイトに出来上がっていました。
こういった便利なライブラリは覚えておくといつか使えそうです。
詳細&ダウンロードは下のリンクからどうぞ。
こんにちわ。
先日cakephpを使って10分でCMSを作る方法を教える必要があったのですが、まとめた資料をブログでもシェアします。
CMSってこんなに簡単に作れるんだ！を体験してもらえたら幸いです。
環境はすでに構築してある前提ですが、ローカルサーバーを立てたい場合には、
以下のサイトが参考になるかと思います。
ではでは、早速言ってみましょう！
まずはCakePHPの公式サイトから最新版をダウンロードします。
https://github.com/cakephp/cakephp/downloads
ダウンロードしたファイルを解凍すると長い名前になっているので、「cakephp」などにリネームしておきます。
そしてFTPソフトでサーバーにアップロードします。アップ先は公開ディレクトリにしてください。
SSHで実行する場合は、以下のコマンドを叩きます。
wget https://github.com/cakephp/cakephp/tarball/1.3 tar xvfz 1.3 mv ./cakephp-cakephp-ee16348/ ./cakephp/
それでは、CakePHPが動作するようにセットアップしていきます。
セットアップにはbakeというコマンドを使用します。
これはコマンドラインでMVC （M=モデル、V＝ビュー、C＝コントローラー）のプログラムを自動で生成してくれる機能です。
爆速でプログラミングできるようになるので、今回はこれを使います。
それでは、まずターミナルを立ち上げて以下のコマンドを実行しましょう。
今回はnewappというディレクトリを作成して、そこに全て格納するようにします。
cakephpへのパスは先ほどダウンロードしたディレクトリです。
適時変更しながら読み進めてくださいね。
$ cakephp/cake/console/cake bake ← bakeコマンドを実行します。 Welcome to CakePHP v1.3.10 Console --------------------------------------------------------------- App : public Path: /home/username/public --------------------------------------------------------------- What is the full path for this app including the app directory name? Example:/home/username/public/myapp [/home/username/public/myapp] > /home/username/public/newapp ←パスを指定します。 Bake Project Skel Directory: /home/username/public/cakephp/cake/console/templates/skel Will be copied to: /home/username/public/newapp --------------------------------------------------------------- Look okay? (y/n/q) [y] > ←空Enter Do you want verbose output? (y/n) [n] > ←空Enter --------------------------------------------------------------- Created: newapp in /home/username/public/newapp --------------------------------------------------------------- Creating file /home/username/public/newapp/views/pages/home.ctp Wrote `/home/username/public/newapp/views/pages/home.ctp` Welcome page created Random hash key created for 'Security.salt' Random seed created for 'Security.cipherSeed' CAKE_CORE_INCLUDE_PATH set to /home/username/public/cakephp in webroot/index.php CAKE_CORE_INCLUDE_PATH set to /home/username/public/cakephp in webroot/test.php Remember to check these value after moving to production server Your database configuration was not found. Take a moment to create one. --------------------------------------------------------------- Database Configuration: --------------------------------------------------------------- Name: [default] > ←空Enter Driver: (db2/firebird/mssql/mysql/mysqli/odbc/oracle/postgres/sqlite/sybase) [mysql] > ←空Enter。MySQLを使う。 Persistent Connection? (y/n) [n] > ←空Enter Database Host: [localhost] > ←DBのホスト名を入力。今回はlocalhostを使用。 Port? [n] > ←空Enter。ポートはデフォルトを使用。 User: [root] > hoge ←DBのユーザー名を指定 Password: > fuga ←DBのパスワードを指定 Database Name: [cake] > hoge ←DB名を指定 Table Prefix? [n] > ←空Enter Table encoding? [n] > ←空Enter --------------------------------------------------------------- The following database configuration will be created: --------------------------------------------------------------- Name: default Driver: mysql Persistent: false Host: localhost User: hoge Pass: ************ Database: hoge --------------------------------------------------------------- Look okay? (y/n) [y] > ←この内容でOKなら空Enter。 Do you wish to add another database configuration? [n] > ←空Enter。DB設定は１つのみ。 Creating file /home/username/public/newapp/config/database.php Wrote `/home/username/public/newapp/config/database.php`
これで /home/username/public/newapp にアプリケーションがセットアップできました。
↑http://[ドメイン]/newapp/にアクセスして、ページが表示されればひとまずOKです。
それでは、CakePHPで更新するテーブルを作成します。
今回はPostテーブルという名前で作成します。
↑タイトルと本文だけのシンプルな構造です。
SQLはこんな感じです。
CREATE TABLE IF NOT EXISTS `posts` ( `id` int(10) unsigned NOT NULL auto_increment, `title` varchar(255) character set utf8 NOT NULL, `body` text character set utf8 NOT NULL, `created` datetime NOT NULL, `modified` datetime NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=1 ;
ここから再度コンソールに戻ってbakeを実行します。
オプションの引数でアプリ名を指定します。
$ cakephp/cake/console/cake bake -app newapp ←newappのセットアップを行います Welcome to CakePHP v1.3.10 Console --------------------------------------------------------------- App : newapp Path: /home/username/public/newapp --------------------------------------------------------------- Interactive Bake Shell --------------------------------------------------------------- [D]atabase Configuration [M]odel [V]iew [C]ontroller [P]roject [F]ixture [T]est case [Q]uit What would you like to Bake? (D/M/V/C/P/F/T/Q) > M ←モデルを作成します。 --------------------------------------------------------------- Bake Model Path: /home/username/public/newapp/models/ --------------------------------------------------------------- Possible Models based on your current database: 1. Post Enter a number from the list above, type in the name of another model, or 'q' to exit [q] > 1 ←Postモデルを作成する Would you like to supply validation criteria for the fields in your model? (y/n) [y] > ←空Enter。入力チェックを追加します。 Field: id Type: integer --------------------------------------------------------------- Please select one of the following validation options: --------------------------------------------------------------- 1 - alphanumeric 2 - between 3 - blank 4 - boolean 5 - cc 6 - comparison 7 - custom 8 - date 9 - decimal 10 - email 11 - equalto 12 - extension 13 - inlist 14 - ip 15 - maxlength 16 - minlength 17 - money 18 - multiple 19 - notempty 20 - numeric 21 - phone 22 - postal 23 - range 24 - ssn 25 - time 26 - url 27 - userdefined 28 - uuid 29 - Do not do any validation on this field. ... or enter in a valid regex validation string. [29] > ←空Enter。idフィールドは入力チェックはしない。 Field: title Type: string --------------------------------------------------------------- Please select one of the following validation options: --------------------------------------------------------------- 1 - alphanumeric 2 - between 3 - blank 4 - boolean 5 - cc 6 - comparison 7 - custom 8 - date 9 - decimal 10 - email 11 - equalto 12 - extension 13 - inlist 14 - ip 15 - maxlength 16 - minlength 17 - money 18 - multiple 19 - notempty 20 - numeric 21 - phone 22 - postal 23 - range 24 - ssn 25 - time 26 - url 27 - userdefined 28 - uuid 29 - Do not do any validation on this field. ... or enter in a valid regex validation string. [19] > ←空Enter。タイトルを必須項目にする。 Would you like to add another validation rule? (y/n) [n] > y ←続けて入力チェックを追加する Field: title Type: string --------------------------------------------------------------- Please select one of the following validation options: --------------------------------------------------------------- 1 - alphanumeric 2 - between 3 - blank 4 - boolean 5 - cc 6 - comparison 7 - custom 8 - date 9 - decimal 10 - email 11 - equalto 12 - extension 13 - inlist 14 - ip 15 - maxlength 16 - minlength 17 - money 18 - multiple 19 - notempty 20 - numeric 21 - phone 22 - postal 23 - range 24 - ssn 25 - time 26 - url 27 - userdefined 28 - uuid 29 - Do not do any validation on this field. ... or enter in a valid regex validation string. [19] > 15 ←タイトルの文字数制限を行う。 Would you like to add another validation rule? (y/n) [n] > ←空Enter。次の項目へ。 Field: body Type: text --------------------------------------------------------------- Please select one of the following validation options: --------------------------------------------------------------- 1 - alphanumeric 2 - between 3 - blank 4 - boolean 5 - cc 6 - comparison 7 - custom 8 - date 9 - decimal 10 - email 11 - equalto 12 - extension 13 - inlist 14 - ip 15 - maxlength 16 - minlength 17 - money 18 - multiple 19 - notempty 20 - numeric 21 - phone 22 - postal 23 - range 24 - ssn 25 - time 26 - url 27 - userdefined 28 - uuid 29 - Do not do any validation on this field. ... or enter in a valid regex validation string. [29] > 19 ←本文を必須にする Would you like to add another validation rule? (y/n) [n] > ←空Enter。次の項目へ。 Field: created Type: datetime --------------------------------------------------------------- Please select one of the following validation options: --------------------------------------------------------------- 1 - alphanumeric 2 - between 3 - blank 4 - boolean 5 - cc 6 - comparison 7 - custom 8 - date 9 - decimal 10 - email 11 - equalto 12 - extension 13 - inlist 14 - ip 15 - maxlength 16 - minlength 17 - money 18 - multiple 19 - notempty 20 - numeric 21 - phone 22 - postal 23 - range 24 - ssn 25 - time 26 - url 27 - userdefined 28 - uuid 29 - Do not do any validation on this field. ... or enter in a valid regex validation string. [29] > ←空Enter。作成日は入力チェックはしない Field: modified Type: datetime --------------------------------------------------------------- Please select one of the following validation options: --------------------------------------------------------------- 1 - alphanumeric 2 - between 3 - blank 4 - boolean 5 - cc 6 - comparison 7 - custom 8 - date 9 - decimal 10 - email 11 - equalto 12 - extension 13 - inlist 14 - ip 15 - maxlength 16 - minlength 17 - money 18 - multiple 19 - notempty 20 - numeric 21 - phone 22 - postal 23 - range 24 - ssn 25 - time 26 - url 27 - userdefined 28 - uuid 29 - Do not do any validation on this field. ... or enter in a valid regex validation string. [29] > ←空Enter。更新日は入力チェックはしない Would you like to define model associations (hasMany, hasOne, belongsTo, etc.)? (y/n) [y] > n ←モデルのアソシエーション。今回は使用しない --------------------------------------------------------------- The following Model will be created: --------------------------------------------------------------- Name: Post DB Table: `posts` Validation: Array ( [title] => Array ( [notempty] => notempty [maxlength] => maxlength ) [body] => Array ( [notempty] => notempty ) ) --------------------------------------------------------------- Look okay? (y/n) [y] > ←上記プレビューの内容で良ければ空Enter Baking model class for Post... Creating file /home/username/public/newapp/models/post.php Wrote `/home/username/public/newapp/models/post.php` SimpleTest is not installed. Do you want to bake unit test files anyway? (y/n) [y] > n ←自動テストは今回は作成しない
これでModelの設定は完了です。
次にControllerを設定します。
--------------------------------------------------------------- Interactive Bake Shell --------------------------------------------------------------- [D]atabase Configuration [M]odel [V]iew [C]ontroller [P]roject [F]ixture [T]est case [Q]uit What would you like to Bake? (D/M/V/C/P/F/T/Q) > C ←コントローラーを作成 --------------------------------------------------------------- Bake Controller Path: /home/username/public/newapp/controllers/ --------------------------------------------------------------- Possible Controllers based on your current database: 1. Posts Enter a number from the list above, type in the name of another controller, or 'q' to exit [q] > 1 ←Postを選択 --------------------------------------------------------------- Baking PostsController --------------------------------------------------------------- Would you like to build your controller interactively? (y/n) [y] > ←空Enter。対話式で作成します。 Would you like to use dynamic scaffolding? (y/n) [n] > ←空Enter。scaffoldは使用しない。 Would you like to create some basic class methods (index(), add(), view(), edit())? (y/n) [n] > y ←Postデータの一覧や追加変更処理を自動生成する Would you like to create the basic class methods for admin routing? (y/n) [n] > ←空Enter。URLにadminを使用しない。 Would you like this controller to use other helpers besides HtmlHelper and FormHelper? (y/n) [n] > ←空Enter。Htmlヘルパーを使用しない。 Would you like this controller to use any components? (y/n) [n] > ←空Enter。コンポーネントを使用しない。 Would you like to use Session flash messages? (y/n) [y] > ←空Enter。flashコンポーネントを使用する。 --------------------------------------------------------------- The following controller will be created: --------------------------------------------------------------- Controller Name: Posts --------------------------------------------------------------- Look okay? (y/n) [y] > ←上記プレビューの内容で良ければ空Enter Creating file /home/username/public/newapp/controllers/posts_controller.php Wrote `/home/username/public/newapp/controllers/posts_controller.php` SimpleTest is not installed. Do you want to bake unit test files anyway? (y/n) [y] > n ←自動テストは今回は作成しない
これでコントローラーも完了です。
最後にViewファイルを作ります。
--------------------------------------------------------------- Interactive Bake Shell --------------------------------------------------------------- [D]atabase Configuration [M]odel [V]iew [C]ontroller [P]roject [F]ixture [T]est case [Q]uit What would you like to Bake? (D/M/V/C/P/F/T/Q) > V ←Viewを選択 --------------------------------------------------------------- Bake View Path: /home/username/public/newapp/views/ --------------------------------------------------------------- Possible Controllers based on your current database: 1. Posts Enter a number from the list above, type in the name of another controller, or 'q' to exit [q] > 1 ←Postを選択 Would you like bake to build your views interactively? Warning: Choosing no will overwrite Posts views if it exist. (y/n) [n] > y ←上書きを許可 Would you like to create some CRUD views (index, add, view, edit) for this controller? NOTE: Before doing so, you'll need to create your controller and model classes (including associated models). (y/n) [y] > ←空Enter。一覧や追加変更ページを自動生成する Would you like to create the views for admin routing? (y/n) [n] > ←空Enter。URLにadminを含むページを作成しない。 Creating file /home/username/public/newapp/views/posts/index.ctp Wrote `/home/username/public/newapp/views/posts/index.ctp` Creating file /home/username/public/newapp/views/posts/view.ctp Wrote `/home/username/public/newapp/views/posts/view.ctp` Creating file /home/username/public/newapp/views/posts/add.ctp Wrote `/home/username/public/newapp/views/posts/add.ctp` Creating file /home/username/public/newapp/views/posts/edit.ctp Wrote `/home/username/public/newapp/views/posts/edit.ctp` --------------------------------------------------------------- View Scaffolding Complete.
これで表示画面も設定が終わりました。
１点だけ、ファイルを修正する必要があります。
Postモデルのタイトルチェックで追加した文字数制限ですが、
制限したい文字数を記述する必要があるので直接ファイルを書き換えます。
newapp/models/post.phpを開いたら、16行目近辺を以下のように修正します。
'maxlength' => array(
'rule' => array('maxlength'),
・・・
↓
'maxlength' => array(
'rule' => array('maxlength', 255),
これでデータの登録更新処理部分は完了です。
ひとまずブラウザから以下のURLにアクセスして動作を確認してみてください。
http://[ドメイン]/newapp/posts/
↑上のような画面が生成されていればOKです。
↑更新画面もばっちりできています。
↑エラー画面もばっちりです。
実際にデータが登録できる事も確認してみてください。
まだこれで終わりではないですよ。
そうです。管理者だけが更新できるようにするためのログイン画面が必要ですね。
ここはbakeだけでは作れないので、手を動かします。
まずはログインできるユーザー情報を格納するテーブルを作ります。
SQL
CREATE TABLE IF NOT EXISTS `users` ( `id` int(10) unsigned NOT NULL auto_increment, `username` varchar(255) character set utf8 NOT NULL, `password` varchar(255) character set utf8 NOT NULL, `created` datetime NOT NULL, `modified` datetime NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=1 ;
先ほどのPostと同様にUserでもbakeして、controller、model、viewを作成します。
内容は先ほどと同じでOKです。
$ cakephp/cake/console/cake bake -app newapp
それぞれのファイルを作成したら
users_controller.phpを以下のように編集します。
newapp/controllers/users_controller.php
class UsersController extends AppController {
var $name = 'Users';
$components = array('Auth');
function login(){
}
function logout(){
$this->Auth->logout();
}
}
ログイン画面を作成
app/views/usersフォルダ内にlogin.ctpファイルを作成します。
以下の内容をコピーしてください。
newapp/views/users/login.ctp
if ($session->check('Message.auth')) $session->flash('auth');
echo $form->create('User', array('action' => 'login'));
echo $form->input('username');
echo $form->input('password');
echo $form->end('Login');
ログアウト画面を作成
同時にlogout.ctpも作成します。
newapp/views/users/logout.ctp
ログアウトしました。
これでログインフォームが出来ました。
次に、ログインするためのユーザー名とパスワードをDBに設定します。
その際にパスワードは暗号化する必要があるのですが、
以下の手順で簡単に暗号化したパスワードを知る事ができますよ。
SQL
INSERT INTO `users` ( `id` , `username` , `password` , `created` , `modified` ) VALUES ( NULL , 'test', 'cd2409a5830bc21d461a2911da440ea877fab27b', '2011-07-05 00:00:00', '2011-07-05 00:00:00' );
最後にpost_controller.phpに認証が必要ないアクションを指定します。
indexとviewアクションは一般ユーザーが見れて良いページなので
この２つのアクションだけ認証が必要ないようにします。
以下のコードをpost_controller.phpに追加してください。
newapp/controllers/posts_controller.php
var $components = array('Auth');
function beforeFilter()
{
$this->Auth->allow('index', 'view');
}
これで完了です！
さあ、http://[ドメイン]/newapp/posts/ にアクセスしてみてください。
ログイン画面が出て、ユーザー名とパスワードを入力するとページが開けるようになりました。
以上で終了です。
簡単に設置できるよう、色々はしょっている部分もあります。ご了承ください。
何かわからない事や質問などありましたらお気軽にコメントくださいね。
もっと色々な機能が知りたい方やCakePHPを触ってみたい方は以下のサイトやブログを参考にすると色々勉強になると思います。私もいつもお世話になっております。
書籍ではこの本がおすすめです。cakephp1.2が対象なのですが、基礎的な部分からテストのやり方など
とてもためになる情報が満載です。
また、手前味噌ですが当ブログのCakePHPタグもぜひどうぞ。
以上、cakephpを使って10分でCMSを作る方法でした。
jQueryを使ったポップアッププラグインの使い方を教える必要があったのですが、他にも知らない人がいるかもなのでブログでご紹介。
このスクリプトを実行すると簡単にポップアップウインドウが作れるようになりますよ。
ウインドウのサイズや位置などもパラメータで指定するだけです。
※モーダルウインドウでは無く、新しいウインドウを開くポップアップの方です
ブラウザの互換性を気にせずDOM操作やアニメーション、クッキーを操作したい際に使えるJavaScript「flow.js」をご紹介。
最近ではjQueryオンリーのような気もしますが、いろいろと機能を追加しようとして複数のプラグインを導入すると、だんだん動作が重くなってきます。
なるべく軽量のものが使いたい際の選択肢の一つとして覚えておくために自分用メモです。
まだ試してはいないのですがIE6やSafari2などのモダンブラウザでも動くようなので、なかなか良さそうです。
以下のような機能があるとの事。
ブラウザにはそれぞれ癖があるので、こういったライブラリを使用して間違いや非サポートの処理をしないようにしたいですね。
class属性にcheckedがあるulにliを追加する方法
var uls = document.getElementsByClassName("checked").filter(function(e) {
return e.nodeName.toLowerCase() == "ul";
});
var lis = [];
uls.forEach(function(ul) {
ul.getElementsByTagName("li").forEach(function(li) {
lis.push(li);
});
});
class属性にcheckedがあるulのliを取得する方法
var lis = document.getByClass("checked").filter(function(e) {
return e.elementName() == "ul";
}).getByTag("li");
同上。class属性にcheckedがあるulのliを取得する方法
var lis = document.querySelectorAll("ul.checked li");
ライセンスはCCライセンスのようです。
詳細&ダウンロードは下のリンクからどうぞ。
最近はスマートフォン用のサイト作成をする事が多くなってきていますが、HTMLの確認を複数の実機でやるのは大変ですよね。
そんな方のために、HTMLのプレビューがiPhone/Androiで同時に確認できるMobilizerが便利そうなのでご紹介します。
実機で動作確認はできるだけやりたくない、、、。そんな時に使えそうですよ。
詳しくは以下
PDFを読み込んでcanvasに描画するJavaScriptライブラリ「pdf.js」
通常PDFをブラウザ上で閲覧するにはAdobe Readerやビューワー用の拡張が必要ですよね。
Mozillaの人達がこうした問題を解決するために、pdf.jsというライブラリを公開したようです。
HTML5が動作するブラウザさえあればPDFが表示できるようになる便利なライブラリになっています。
まだ開発中との事で、日本語表示がうまく出来なかったりFirefox以外では動作しないなど問題はありますが、
これからが楽しみですね。
サンプルのソースコードもありますので、興味のある方は下のリンクからどうぞ。
「PSDvoid」はフォトショップのPSDファイルを投稿して共有できるWEBサービスです。
まだbeta版のためアップロードはできないようですが、他の人がアップしたファイルをダウンロードする事が出来ますよ。
↑ダウンロードできる画像いろいろ
ライセンスもCCライセンスやパブリックドメインで公開されているものばかりでしたので、素材探しに使えそうですね。
興味のある方は下のリンクからどうぞ。
wordpressでスマートフォン対応する際に使えそうなプラグインをいろいろ試してみました。
先に結果から伝えると、個人サイトではwptouchが一番オススメです。
インストールするだけでお手軽にスマホ対応できるのが高ポイントでした。
企業サイトで1からテーマを作成する場合はmobilepressが今の所一番使えそうです。
これからスマホ対応される方の参考になれば幸いです。
それでは、各種プラグインを入れてみた様子をご紹介。
インタラクティブに見たままデザイン変更可能なCMSを調べる必要があったので、ブログでもシェア。
サイトの作成がウェブ上で完結して、出来るだけ直感的な操作が出来るCMSを集めました。
使ってみた感想として、見たままに編集できるのって楽しいなって思いました。
サーバーインストール型からASP型、Webサービス型までいろいろあります。
共通点としては、全てのサイトがコンテンツの追加にドラッグ&ドロップを使ってた所ですね。
デザインは出来るけどHTMLやCSSはよく分からいという方、もっと簡単にページの追加やデザイン変更を行いたいと考えている方の参考になれば幸いです。
PHPやjQueryのチュートリアルを毎日紹介しているTutorialzineというサイトから、Googleのサイト内検索をjQueryでかっこ良くする方法が掲載されていたのでご紹介します。
Google AJAX Search APIを使用して、独自のデザインで検索結果を表示していますよ。
サンプルもあるので、検索対象のURLを自分のサイトにするだけで簡単に設置できるようになっています。
↑検索フォームはHTML5で作られています。
右下のアイコンで画像検索や動画検索が切り替えられます。かわいいですね。
↑検索結果の様子
デモではGoogleのロゴが表示されていませんが、実際に使用する際にはロゴの掲載は必要かと思います。
詳細&使ってみたい方は下のリンクからどうぞ。
0