2014年9月25日

JavaScriptが実行できるリアルタイムオンラインエディタ作ってみました

複数人で同期して編集できるWebエディタを探していたのですが、 見つからず・・・

jsfiddlejsdo.it は同時編集できないため、ちょっと探してたのとは違って、
Scratchpad はリアルタイムで編集できてよいのですが、JavaScriptが実行できない。
CodePen は同期するのに PRO アカウントが必要らして、諦めて、仕方ないので作ってみました。

追記:
SyncFiddle はリニューアルし、使用しているフレームワークの構成が変わりました。
URL は http://syncfiddle.net/ になりました。

仕様とか

  • アクセスするとランダムにid振ったページ空間に飛ぶ
  • そのURLを共有すると複数人で同時編集できる
  • 相手のことがわかるのはidだけ
  • コードとカーソル位置がわかる
  • JavaScript コンソールがある
  • その時のHTMLコードを .html で保存できる
  • ページの破棄という機能はないですが、コードを空にしてユーザ数 0 になるとそのうち消える
  • プライベートタブ(シークレットタブ)とか使ってみるとわかりやすいかも

レイアウト

  • PHP フレームワーク PunyApp
  • JavaScript Backbone + r.js
  • エディタは CodeMirror の HTML5 mixed モード

こないだ公開したフレームワーク PunyApp のテストも兼ねて作ってみたのですが、 なにしろサーバが古くて大変。最初は WebSocketにしようと思ったけどフレームワークのテストにならないので pollingしてます。今更ですがサーバーから立て直したほうがよかったです。一応公開してますが、サーバが不安定になるかもしれないです。
Backbone.js と r.js (require.js)、前から触ってみたくて、今回はじめて使ってみました。
自由度が高くて、View周りとかちょっと道を外れると ぐしゃってしまうので注意が必要ですが、 自分にとっては使い心地がよかった。まだまだ勉強中です。



2014年9月6日

軽量PHPフレームワークPunyAppというの作りました


最近、ちまちまとPHP を書くことがあって、 ちょっとしたWebアプリ等作るときに
CakePHP などのある程度規模のあるフレームワークを使うまでもないかなって思うことが多々あり、
そういった用途に 小規模向けなフレームワーク (マイクロフレームワーク) PunyApp というのを作りました。

以前から自分だけで使ってて少しずつ更新して温めていたもので、 ある程度形になったので公開しました。
軽量で中小規模向けなもので、 おおまかな設計は CakePHP を参考にしてて、使い方も似てます。

PunyApp は MVC モデルで他のPHP拡張等は必要ありません。

ダウンロード

要件

  • PHP 5.2.0 +
  • mod_rewrite が有効 (Apache Server)

ライセンス

  • MIT

機能/特徴

  • MySQL, PostgreSQL, SQLite, Posql に対応
  • Controller, Model, Viewアクション
  • フォームのValidation
  • Viewテンプレート変数はデフォルトでHTMLエスケープされる
  • Session (データベース)
  • Cookie (デフォルトで暗号化)
  • データベースエラー時などのEvent
  • サンプルのログインフォームが入ってる


追記

以下の情報はバージョンアップに伴い古くなっているので https://github.com/polygonplanet/PunyApp を参照ください

レイアウト

  • ファイル構成
/application                → アプリケーションディレクトリ
    /controllers            → コントローラ
    /models                 → モデル
    /views                  → ビュー
    /libraries              → 共通ライブラリやヘルパー等
    /storage                → SQLiteなどのファイルベースデータベースやログを保管
        /logs               → /storage配下を書き込み可にしておく
        /databases          → 同様
    /settings               → 設定
        app-settings.php    → アプリケーション設定ファイル
        app-scheme.php      → データベーススキーマ
    /public                 → 公開ディレクトリ
        /css
        /js
        index.php
/lib                        → PunyApp内部ライブラリ
/vendors                    → 外部ライブラリ等を入れるディレクトリ
index.php

Controllers

コントローラのアクションは、GET や POST などのリクエストメソッドで切り分けができます。
  1. class SampleController extends PunyApp_Controller {  
  2.   
  3.   public $models = array('sample');  
  4.   
  5.   /** 
  6.    * GET /login 
  7.    */  
  8.   public function getLogin($params) {  
  9.     $this->view->render('sample/login');  
  10.   }  
  11.   
  12.   /** 
  13.    * POST /login 
  14.    */  
  15.   public function postLogin($params) {  
  16.     $has = $this->sample->hasUser($params['id'], $params['pass']);  
  17.     if ($has) {  
  18.       $this->session->userid = $params['id'];  
  19.       $this->redirect('home');  
  20.     }  
  21.   
  22.     // ...  
  23.   
  24.     $this->view->render('sample/login');  
  25.   }  
  26.   
  27.   /** 
  28.    * Any /login (あらゆるリクエストメソッドに対応) 
  29.    */  
  30.   public function anyLogin($params) {  
  31.     // ...  
  32.   }  
  33.   
  34.   /** 
  35.    * Before /login (前処理) 
  36.    */  
  37.   public function beforeLogin($params) {  
  38.     if (!empty($this->session->userId)) {  
  39.       $this->redirect('home');  
  40.     }  
  41.   }  
  42.   
  43.   /** 
  44.    * After /login (後処理) 
  45.    */  
  46.   public function afterLogin($params) {  
  47.     // ...  
  48.   }  
  49.   
  50.   /** 
  51.    * GET /home 
  52.    */  
  53.   public function getHome($params) {  
  54.     // ...  
  55.   }  
  56. }  
before や after で前処理などが設定できます。
any は、すべてのリクエストメソッドに対応します。
メソッド名を any だけ (function any() {}) にすると、404 にならずに any が実行されます。
引数 $params はリクエストパラメータが渡されます。

コントローラのメソッド名の命名規則は、

リクエストメソッド名 + アクション名

になります。
GET に対応する hoge だったら、getHoge になります。

URL は、
http://www.example.com/コントローラ名/アクション名

となります。
アクション名は、リクエストメソッド名を外した名前です。
SampleController で getHoge の場合は、
http://www.example.com/sample/hoge
という感じになります。 ファイル名は sample.php です

AnyController (any.php) という名前にすると、すべてのリクエストに対応します。

Models

モデルは、PDO を使っているのもあり 基本的にプリペアドステートメントを使って実行します (プレースホルダ)。
  1. class SampleModel extends PunyApp_Model {  
  2.   
  3.   public function addUser($userid$email$pass) {  
  4.     // Insert  
  5.     $sample = $this->newInstance();  
  6.     $sample->userid = $userid;  
  7.     $sample->email = $email;  
  8.     $sample->pass = sha1($pass);  
  9.     return $sample->save();  
  10.   }  
  11.   
  12.   
  13.   public function deleteUser($userid) {  
  14.     return $this->delete(  
  15.       array('userid' => '?'),  
  16.       array($userid)  
  17.     );  
  18.   }  
  19.   
  20.   
  21.   public function getUser($userid) {  
  22.     return $this->findOne(  
  23.       array(  
  24.         'fields' => array('id''userid''email'),  
  25.         'where' => array('userid' => '?')  
  26.       ),  
  27.       array($userid)  
  28.     );  
  29.   }  
  30.   
  31.   
  32.   public function hasUser($userid$pass) {  
  33.     return $this->has(  
  34.       array(  
  35.         'where' => array(  
  36.           'userid' => ':userid',  
  37.           'pass' => ':pass'  
  38.         )  
  39.       ),  
  40.       array(  
  41.         ':userid' => $userid,  
  42.         ':pass' => sha1($pass)  
  43.       )  
  44.     );  
  45.   }  
  46. }  
  • array find ( array $query = array(), array $params = array())

find() の引数 $query は、 'distinct', 'fields', 'from', 'as', 'joins', 'where', 'group', 'having', 'order', 'limit', 'offset' が使えます。
  1. public function getUserByName($name) {  
  2.   return $this->find(  
  3.     array(  
  4.       'distinct' => false,  
  5.       'fields' => array(  
  6.         'U.id AS id''U.name AS name',  
  7.         'U.category AS cat''P.url AS url'  
  8.       ),  
  9.       'as' => 'U',  
  10.       'joins' => array(  
  11.         'type' => 'LEFT',  
  12.         'table' => 'profile',  
  13.         'as' => 'P',  
  14.         'on' => array('U.id' => 'P.id')  
  15.       ),  
  16.       'where' => array(  
  17.         'name' => ':name'  
  18.       ),  
  19.       'group' => 'cat',  
  20.       'order' => 'id DESC',  
  21.       'limit' => 10,  
  22.       'offset' => 5  
  23.     ),  
  24.     array(  
  25.       ':name' => $name  
  26.     )  
  27.   );  
  28. }  
ある程度のクエリは扱えます。

モデル内では $this->getDatabase() が PDO として使えるので、
  1. public function getName($id) {  
  2.   $sql = 'SELECT name FROM foo WHERE id = ?';  
  3.   $stmt = $this->getDatabase()->prepare($sql);  
  4.   $stmt->execute(array($id));  
  5.   return $stmt->fetchAll(PDO::FETCH_ASSOC);  
  6. }  
上のように直接クエリを書いてもいいですが、
直接クエリを書かずにモデルの find() や delete() 等を使うメリットとしては、
'created''modified' というフィールドが自動てセットされることが大きいです。 テーブル定義にあらかじめ created もしくは modified を定義しておくと、 insert (save), update のタイミングでそれぞれ現在時刻を設定します。
integer や int(11) で定義すると 現在の time() が設定されます。
datetime は Y-m-d H:i:s になります。
varchar(255) で定義すると現在時刻をミリ秒で設定します。
  • created : 作成された日時
  • modified : 更新された日時
これらはアプリケーション側で created, modified をパラメータに扱う場合は無視されます。

コントローラでのモデル定義は $models に使うモデル名(テーブル名)を記述します。
  1. class SampleController extends PunyApp_Controller {  
  2.   
  3.   public $models = array('sample');  
  4.   
  5.   public function getLogin($id) {  
  6.     $user = $this->sample->getUser( ... );  
  7.   }  
  8. }  

Views

  1. $this->view->text = 'Hello!';  
  2. $this->view->render('index');  
ビューでは PHP本来が持ってるテンプレートを使います。
  1. <html> 
  2.   <body> 
  3.     <h1>Sample</h1> 
  4.     <?php echo $text?> 
  5.   </body> 
  6. </html> 
テンプレート変数はデフォルトでHTMLエスケープされます。
  1. $this->view->text = '<script>alert(1)</script>';  
  1. <p><?php echo $text ?></p> // &lt;script&gt;alert(1)&lt;/script&gt; 

Validation

リクエストパラメータのバリデーションはコントローラ内で行います。
  1. class SampleController extends PunyApp_Controller {  
  2.   
  3.   public $validationRules = array(  
  4.     'id' => array(  
  5.       'required' => true,  
  6.       'rule' => array('regex''/^[a-z0-9]{1,10}$/i'),  
  7.       'message' => 'Only letters and integers, max 10 characters'  
  8.     ),  
  9.     'email' => array(  
  10.       'required' => true,  
  11.       'rule' => array('email'),  
  12.       'message' => 'Invalid email address'  
  13.     ),  
  14.     'pass' => array(  
  15.       'required' => true,  
  16.       'rule' => array(  
  17.         array('minLength', 4),  
  18.         array('maxLength', 20)  
  19.       ),  
  20.       'message' => 'Min 4 characters, max 20 characters'  
  21.     )  
  22.   );  
  23.   
  24.   // ...  
  25. }  
バリデーションのルールは
email, url, ip, between, minLength, maxLength, regex
等が定義されています。または自分で定義します。

その他、コールバックが使えます。
  1. $this->validationRules['nickname'] = array(  
  2.   'required' => true,  
  3.   'rule' => array('callback'function ($value) {  
  4.     return preg_match('/^[ぁ-ん]/u'$value) && preg_match('/[!]$/u'$value);  
  5.   }),  
  6.   'message' => 'ひらがなではじまって「!」で終わらないとダメです'  
  7. );  
$this->validate() で実行します。 任意のルールを引数に渡すこともできます。
引数を省略すると $validationRules に対して実行します。
  1. class SampleController extends PunyApp_Controller {  
  2.   
  3.   // ...  
  4.   
  5.   public function postLogin($params) {  
  6.     if ($this->validate()) {  
  7.       // ...  
  8.     }  
  9.   }  
  10. }  
以下のViewメソッドからメッセージを取得できます。

追記

以下の情報はバージョンアップに伴い互換性があるかわかりません
詳細は https://github.com/polygonplanet/PunyApp を参照ください

  • 名前を指定して取得 : string getValidationError( string $name );
  • 最後のメッセージを取得 : string getLastValidationError( );
  • 全部取得 : array getValidationErrors( );
  • HTML<li>で全部取得 : string getValidationErrorMessages( array $attributes = array('style' => 'color:red') );
コントローラ内では $this->view->getValidationError('hoge') のように取得できます。
ビュー内では以下のようにして表示できます。
  1. <div class="error"> 
  2.   <?php echo $this->getValidationError('param_name'?> 
  3. </div> 

インストールと設定

1. 展開したファイルをサーバーの任意のディレクトリに置きます

2. application/settings/app-settings.php を開いて設定します
  1. $settings = array(  
  2.   /** 
  3.    * System settings 
  4.    */  
  5.   'system' => array(  
  6.   
  7.     /** 
  8.      * Debug mode 
  9.      * 
  10.      * true = show errors 
  11.      * false = hide errors 
  12.      */  
  13.     'debug' => true// デバッグモードだとエラーが起きたとき表示される  
  14.   
  15.     /** 
  16.      * Timezone 
  17.      * 
  18.      * e.g., 'America/Chicago', 'Asia/Tokyo' etc. 
  19.      */  
  20.     'timezone' => ''// 日本の場合はここを 'Asia/Tokyo' に設定しておく  
  21.   
  22.     ...  
  23.   ),  
  24.   
  25.   /** 
  26.    * Database settings 
  27.    */  
  28.   'database' => array(  
  29.   
  30.     /** 
  31.      * Database engine 
  32.      * 
  33.      * Available engines: "mysql", "sqlite" and "posql". 
  34.      */  
  35.     'engine' => ''// 使用するデータベース  
  36.   
  37.     ...  
  38.   ),  
  39.   
  40.   /** 
  41.    * Session settings 
  42.    */  
  43.   'session' => array(  
  44.   
  45.     /** 
  46.      * Session engine 
  47.      * 
  48.      * Available engines: "php", "file" and "database". 
  49.      */  
  50.     'engine' => ''// セッションエンジンを設定  
  51.   
  52.     ...  
  53.   )  
  54. );  
3. データベーススキーマを作成します、または application/settings/app-schema.php に記述します

4. application/storage 配下のファイル、ディレクトリのパーミッションを「書き込み可」に設定します

5. 1 で展開したディレクトリにブラウザでアクセスしてみて、PunyApp ~と表示されたら成功です

6. 実際に作ってみましょう

サンプル

/sample/ にサンプルのログインフォームが入っています。
/sample/ にアクセスして確認できます。




なにかあれば以下のレポジトリのIssues, または @polygon_planet へお願いします。

レポジトリ