Trello のクローンを PHP で作りました | PHP | みどりのウェブ開発日記

Trello のクローンを PHP で作りました

カテゴリ: PHP

記事投稿日: 2017年2月8日



※ Qiita にも同じ記事を掲載しています。
※ 2017.02.14 MOONGIFT さんでご紹介されました。
※ 2017/04/27 検索機能を追加しました。カードの件名と本文を対象にキーワード検索をかけ、最大100件まで表示します。
※ 最終更新 2017/04/28 英語でもお使いいただけるようになりました。

機能は「カンバン」のみ

Trello は有名なトヨタの「カンバン」方式を利用できるウェブアプリです。
タスク管理として、有名な「JIRA」に似た機能を無償プランで使えるという面もあり、利用されている方も多いと思います。

「カンバン」の他に、Slackなどの他サービスと連携できたり、アドオンで機能強化したり、期限を決めたり、ボードを他ユーザと共有することができます。

自分的には「カンバン」さえ使えればよかったので、このアプリで利用できるのは「カンバン」だけです。

必要があれば、個々に好きなものを入れられるよう、基本となるものを作ったつもりです。
そのため、ライセンスは MIT にしてあります。ご自由にお使い下さい。

GitHub https://github.com/mikiakira/php-simple-kanban

php-simple-kanban

使っているもの

  • PHP 5.6+ (PDO が必須です。 phpinfo() や php.ini でご確認下さい)
  • Idirom …PDOラッパーライブラリ
  • SQLite
  • Bootstrap 3.x
  • jQuery 2.x
  • jQuery UI 1.x
  • jQuery.spectrum … 文中のURLをリンクにする
  • linkify-jquery … カラーピッカー
  • Remodal.js … モーダル

エックスサーバーで、Apache2 + PHP5.6.22 と 7.0.7 で動作確認しています(PHP7今回初めて使いました。早くてびっくりです!)

使い方

以下の処理をせずにアクセスすると、エラーになります。
・app.template.db をコピーして、app.db にリネームします。
・config/define.php を開いて、パスワード(デフォルト: admin)を変更します。

・英語/日本語を config/define.php で切り替えられます。

const LANG = ‘en’; // ja or en
デフォルトを英語にしていますので、日本語で使いたい人は ja に変更して下さい。

以上です。

基本機能

  • ボード > パネル > カード の順番に属しています
  • ボードの作成は無制限
  • パネルは7つまで。「1週間」が表現できれば充分かな、と。(JSで制限しているだけなので、簡単に無制限にもできます)
  • ボードは名前順にリストに出ます(Trelloと同じ)
  • パネルは並び替えができます
  • カードは、パネルの中で並び替えができます
    • パネル間で相互に行き来できます
    • コメントが書けます
    • カラーラベルがつけられます
    • カードを別のボードのパネルに移動・複製できます
  • バックアップ機能があります
  • 画面はSPAです(データのやりとりは jQuery の Ajax で行ってます)

わざわざ作った動機

ウェブサービスは突然停止したり、買収されて改悪されたり、無償プランがなくなって有料になることがあります。
Trello が、JIRAや、Confluence で有名なアトラシアンに買収されたというニュースが入ってきたのが、自作にふみきった動機です。

エンタープライズソフトのAtlassianがプロジェクト管理サービスのTrelloを4億2500万ドルで買収

改悪されるかも知れないし、有料になるかも知れない。
Trello の今の形を、本当に気に入って使い込んでいたので、今後改変にひやひやしながら開発するくらいなら、自サーバでしっかり管理できるものを作ろう、と考えた訳です。

作ってみた感想

実際、カードやパネルの入れ替えは、jQuery UI のおかげで 1、2時間くらいで出来ました。
データベースのロジックは Idirom を基本に、自己ライブラリで実装しており、仕事の合間を縫ってトータルで実質4~5日で完了。
結果的に(予想通りに)、とてもシンプルに作れて満足しています。

終わりに

「カンバン」の可能性はさまざまです。
タスクはもちろん、詳細なブックマークリストとしても使えます。私はレシピをまとめるのにも使っています。

基本機能ができたところなので、キャッシュや gzip など突き詰める余地があります。

また、個人的には、これをベースにして RSS リーダなども作れそうだと考えています。
ちなみに、GitHub にこうしたまとまったリポジトリをあげるのは初めてです。
厳しいご意見が飛んでくるかもしれないと、覚悟しております。。

ご指導ご鞭撻のほど、よろしくお願いいたします。

追記

現在、エックスサーバー(X10プラン)で利用しています。
シングルページ・アプリケーションなので、最初のロードこそ 600~800ms ほどかかりますが、後はデータベースとのデータの送受信が主な処理なので、ライブアリの読み直しや遷移がない分、早いです。 

PHPは5.6以上を推奨します。
PHP7 に切り替えたところ、これが自分の作ったアプリかと、びっくりするくらい早くなりました! バージョン5の2倍以上という噂は本当でした。

SQLite を使うので、PHPだけが動くような、安価なロリポップ!レンタルサーバのライトプラン(月額100円)でも使えるのが強みかと思います。

JS 面ではまだ改善したいところです。結合したり、レンダリングを Vue.js に乗せ変えたら、もっと早くなるのは確実です。
とりあえず、Trello のカードを手作業ではありますが、すべてこちらにのせかえました。

個人的には「カンバン」で充分なので、チームで使う必要が生じないかぎり、もう Trello を使うことはないと思います。
使いながら、今後も改善を続けていきます。

1/30: ボード一覧のドロップダウンメニューやパネルリストの表示枠の動作を改善しました。
2/12: スマホ、タブレットでボードの切り替えに不具合がありましたので修正しました。
2/13: ログイン状態をクッキーに記録できるようにしました。








“Trello のクローンを PHP で作りました” への2件のフィードバック

  1. RUF より:

    お世話になります。
    Ubuntu16.04+PHP7.0.15+Apache2.4.18 で利用させていただこうとしたのですが,パネルとその中のメモの追加ができません。エラーログを見ますと,
    PHP Warning: Creating default object from empty value in /var/www/html/models/panels.php on line 99,

    PHP Fatal error: Uncaught Error: Call to undefined method stdClass::save() in /var/www/html/models/panels.php:101\nStack trace:\n#0 /var/www/html/pdo.php(146): panels::edit(‘new’, Array)\n#1 {main}\n thrown in /var/www/html/models/panels.php on line 101,
    と出ております。どのように対処したらよろしいでしょうか。ご教示いただければ幸いです。

    よろしくお願い致します。

    • midoriakira より:

      お使いいただき、ありがとうございます。
      平日は詳しく調べる時間がないので、折を見て詳細を調査します。
      基本的なことですが、PHPのPDOライブラリは有効になっていますでしょうか。
      Cloud9のPHP5.6、XAMPPのPHP5.5、エックスサーバのPHP7で動作確認しております。
      また、データベースはapp.dbにリネーム済みかもご確認いただければ幸いです。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA




トップに戻る