社長BLOG

いつも当たり前のように

./symfony openpne:install コマンドを走らせてOpenPNEをインストールするが、いまいち馴染みにくい。
ここで入力した設定ファイルはどこに格納されるのか？（ /config/databases.yml なんだけど ）

ymlはばれる

またymlファイルは、レンタルサーバに置いたとき、うまく階層構造を隠蔽しないと、データベースのパスワードがバレてしまう心配がある。

プロジェクトとして、この警告を行っていないのは問題だ。

※ちなみにとりあえずの対策としては /config/ディレクトリ以下に .htaccessファイルを作成し、

<Files “databases.yml”>
deny from all
</Files>

このように記述する。ブラウザからアクセスしてみてアクセスが拒否されればOK。
これでだめだったら一旦サイトは停止して対策したほうがいい。

ymlはミスる

ymlの書式は覚えてしまえば簡単なのだが、全く初見のエンドユーザーにとってはミスが起きる原因になるかもしれない。
自分もタブとスペースの使い方を間違えた。広く使ってもらうためには、古いスタイルだがconfig.phpがベストだ。

改善

symfonyではymlファイルの中にphpを埋め込めるそうだ。
config.phpでグローバルに設定した値を、databases.ymlから読み込むようにすればいいんじゃないか。
その他の設定値も、大事なものだけをconfig.phpにまとめて格納し、その他の設定ファイルはなるべく隠蔽させたほうが分かりやすい。

HOUOUの開発系ではできないだろうけど、思いついてしまったので共有しておく。

現在開発中のOpenPNEのスマートフォン対応の方法について解説する。

全体構造

スマートフォンでは、ガラケーと違ってHTML5,CSS,JavaScriptが使える。
これらを駆使して、シンプルで使いやすい構造にする。
通常のOpenPNEでは、MVCの全体をPHP側（symfony）で行っていたが、VとCの要素をWEBクライアント側（JavaScript）に移動させる。symfonyはHTML、JavaScript、テンプレートをブラウザに送り出すことと、APIを通じてモデルを操作することに専念させる。

◆スマートフォンアクション全体図

１−１ブラウザからOpenPNEにリクエスト
http://openpne.jp/member/12 のように、パソコン版と同じURLにアクセスする。
アクセスされたPC版のアクセス内でスマートフォンの判定をし、スマートフォンからアクセスされた場合は、smtを頭につけた、アクションにフォワードする。PCでhomeActionならスマートフォンでsmtHomeAction となる。

１−２ブラウザにHTMLセットをレスポンス
フォワードされた、smtHomeAction内では、WEBクライアントで利用する初期HTML表示、データをコントロールするJavaScript、スマートフォンAPIから返ってきたJSONデータを整形するテンプレートの３つのセットをレンダリングし、
ブラウザに送り返す。

ここまでで、初期のHTMLを表示するリクエストとレスポンスが完了する。

２−１ jQueryでAPIアクセス
次にAJAXを使って、実際のデータを取得するAPIアクセスを行う。
ロードされたJavaScript（jQuery）によって、ブラウザのロードや、特定のボタンにひもづけられてデータ取得用の動作を行う。

スマートフォンAPIを通じてOpenPNEから取得する。この時HTML内に埋め込まれているapiKeyを使ってスマートフォンAPIを動作させる。apiKeyはSNSにログインしている限り、全ページに埋め込まれる。
※apiKeyの利用方法はMediaWikiの方式を参考にした。セキュリティ上の安全性確認はリリースまでに行う。

２−２ JSONデータをレンダリング
スマートフォンAPIからJSON形式でデータを受け取り、テンプレートに流しこんでHTMLをレンダリングする。

自分でつくるには？

OpenPNEコアに含まれるデータベース（モデル）の操作は、HOUOUで作っているAPIを使うことができる。
使い方のリファレンスはhttp://houou.github.com/api.php/ここで書き進めている。全体が完成ししだいOpenPNE公式サイトに設置する。

コアに含まれない独自プラグインのデータにアクセスするためには、/plugins/diary_list.json のような例を参考にしてOpenPNEを独自に拡張することになる。

OpenPNE3.8の正式版がリリースされた4月以降にhttps://github.com/openpne/OpenPNE3/ここから、ソースをフォークし、独自APIを付け足せばよい。

※とってもいいプラグインとAPIができたら、OpenPNEプロジェクトAPIをPullRequestしてください。

HOUOU開発系で新規に作っているといえば、ほとんどがスマートフォン関連部分。

そのほかは、機能をシンプルにしたり、減らしたりというのが中心だ。

テストを極力自動化し、開発段階から品質を高められる体制を作る。

※テストファーストのルール化は現時点では取り組まない

スマートフォンAPIのテスト

まずはスマートフォンAPIのテスト。
JSON形式で返答するWEBAPIが単純にズラーッと並んでいるだけなので、
こちらはsymfonyのユニットテストで十分カバーできる。

・初期データをつくる
・php内部からHTTPRequestを発行してAPIをキックする
・APIからのレスポンスを評価する
・データの変更をリセットする

このサイクルを、淡々と行っていけばいいだろう。
OpenPNEはユニットテストが充実していない（＝単体テストをうまく活用できる場面少ない）
機能テストやSeleniumはあるんだけれどね。

ので、ようやくテストの初歩を踏み出せるという感じだ。

スマートフォンクライアントのテスト

スマートフォンクライアントは、HTMLテンプレート＋jQueryというスタイルで作られている。
MVCのMだけサーバに置いておいて、クライアントにVとCを持ち込むという新スタイルを採用している。

ながれとしては、

・APIのコール
・レスポンスの加工
・テンプレートへのアサイン
これら一連のコントロールはすべてjQueryで行っている。

この動作をテストしたい。

JavaScriptに対応したテストを行う必要がある。
少し調べてみると、QUnitというのがあるそうだが、これを使えばいいのだろうか？

JavaScriptのテストは慣れていないが、自動化で品質向上をさせるよ。

そしてContinuous Integration

OpenPNEの品質を向上させるために継続的インテグレーションは悲願だ。
Travisというとんでもない素敵なサービスを見つけたので、ぜひ開発プロセスに組み込みたい。
http://travis-ci.org/

◆Travis

このサービスなんとHeadless動作でJavaScriptを動かすこともできるそうなので、
サーバのsymfonyもクライアントのJavascriptもまとめてTravisでテストを仕掛けたい。

いよいよ２月。

３月は新規の開発をストップするので、今月の進歩でOpenPNE3.8の姿が決まる。

２月号で達成したい内容を共有する。

HOUOU2月号のターゲット

メッセージプラグインのスマートフォン対応
日記プラグインのスマートフォン対応

スマートフォンUIの確定
UIの細かい部分を確定する。確定したらテーマデザインをデザイナに発注する。

PC新レイアウトスキンプラグインの作成
既存のレイアウトHTMLに手を入れないようにしつつ、新型レイアウトに対応できるようなプラグインをつくる。

スマートフォンAPIのセキュリティ検証
MediaWikiやTwitterのAPI呼び出し方式と同じように組んでいるが、セキュリティ上問題がないか確認する。

HOUOUプロジェクトのコンセプトのひとつに「スピード」がある。

これにはふたつの意味がある。

ソフトウエアの動作スピードが速い

これまでのOpenPNE3は重い。これはどうしようもない。
このアプリケーション速度はとにかく改善しなければならない。

HOUOUプロジェクトでは、機能の取捨選択を行い、バンドルするプラグインの量を少なくすること、
厳選したプラグインの速度を徹底的に改善するというアプローチで動作スピードを向上させるつもりだ。

ユーザーの体感速度が速い

入力して、確認して、完了

件名と本文を入力してから、送信

投稿するにはまず、投稿画面に遷移してから

というように、ユーザーインターフェースの手続き上、重さや遅さを感じる部分も多くある。
OpenPNEにはまだまだある。こんな遅いソフト使えるかっての。

これらの動作手順を見なおしたり、適度にAJAXを使って画面数を減らしたりと工夫をして、
ユーザーの体感速度を向上させる。

タイムラインが極限までスピードアップすれば友だちとのチャットになるし、

メッシージがスピードアップすれば、インスタントメッセンジャーになる。

ミニマムサクセスでは、15%のソフトウエア速度改善を狙い、
フルサクセスの15%では、体感速度の向上を目指す。

◆OpenPNE3.8 リリース予定
４月１日

◆実装する機能
・基本機能のスマートフォンUI化
・日記プラグイン、メッセージプラグインのスマートフォン化
・タイムラインプラグイン（新規）
・スピードアップ
・アクティブでない機能の削除

※表中のフルサクセスレベルまでを達成
http://x.pne.jp/Ai4XqL

◆進捗状況
http://x.pne.jp/Ai4XqL

HOUOUプロジェクトに入れ忘れていたフルサクセス、アドバンスドサクセス項目について。

Like!機能

世間でイイネと言われている機能。これを入れなければタイムラインの価値が半減してしまうね。

ファイル共有機能

細かい権限設定はあとでもいいので、とにかくプライベートなSNS内限定でファイルを共有できるようにする機能。
プラグインとして提供する。

コンテンツ検索

SNS内コンテンツを横断的に検索する、APIインターフェースをつくる。
規模によっては重すぎるかもしれないが、スマートフォンAPIに加えて使ってもらいながら、徐々に発展させたい。

サーチリスト的な使い方をしても大丈夫なくらいにスピードを速めたい。

ui-sortable によって、ガジェットの位置を変更したり、使ってない部分を縮めたりできるようになった。
世間のSNSでは実装されていないことが多いし、いくつか課題もある。

コアに実装されているべき機能ではない。
オプションでいいだろう。

※2012/01/24変更 日記は後回しに。

最新の開発状況を手軽に楽しむための月刊HOUOU、遅れに遅れたが12月号がようやく提供できそうな運びになった。
※詳しくは公式SNSの案内を。

1月号は通常のリリース予定通りに出して、巻き返す。

ターゲット開発項目

通知センター
新着メッセージお知らせ機能のアップグレード版である、通知センター機能を新規に追加する。

◆通知センターのリスト

◆通知センターお知らせアイコン

通知センター関連API

・通知センターに登録（PHP関数）
・通知状況を確認（未読件数）
・通知状況を確認（通知実体）

フレンドリンク承認API
NC一覧から使う。

シンプル化x3

使用頻度の低い機能や分かりにくい要素を取り除き、シンプルにする。3機能のシンプル化を目指す。

・/plgins/sfXXXPluginを移動
・sfPropelPluginを除外する（ProjectConfiguration.phpもチェック）
・バナー表示機能削除（表から消すだけ）
・※目立つシンプル化あと一つ

PCのデザイン回収のチャレンジ
・グローバルメニューのドロップダウン化（見えなくする）
・ローカルメニューをグローバルの位置に
・ヘッドりょういきを細くする
・センターカラム横幅広げる。全体幅も広げる（1024）。

シンプル化について再び思うこと、重複もあるかもしれないけどリフレイン。

設定ファイルはひとつだけ
本質的に必要なのはdatabases.ymlだけのはずだ。設定ファイルが３つもあるのはシンプルではない。
OpenPNE.ymlとProjectConfiguration.class.phpを設定しなくても良い方法を考える。

_dev.phpファイルは配布版には入れない
pc_frontend_dev.php
mobile_frontend_dev.php
api_dev.php

などの、_dev.phpファイルは、デバッグ用に使うものだが、正しく設定しないとセキュリティ問題が起きるので外したほうがいい。
“ほっとくと安全”であるべきで、”ほっとくと危険”という状態は作りたくない。
/web/ディレクトリ内もさっぱりさせたい。

HTMLを組み込む方法はひとつだけにする
プライバシーポリシー、利用規約、バナー、HTML挿入、フリーエリア
など、HTMLをカスタムで挿入する機構は沢山あるが整理されていない。

微妙に用途が違うのは理解できるが、複雑さをましてしまう。１つの統一的な挿入方法に束ねる。

ログインフォームは認証プラグインが個別につくる
現在のログインフォームは、

このガジェットを設定すると、有効になっているすべてのログインフォームが並べて表示される仕組みになっている。

でも実際に運用してみると、このログインフォームは左に配置して、このフォームは右というように自動で並ぶと不都合が出てくることもある。

認証プラグインはそれぞれ別個にログイン用のガジェットを作成し、手動で好きな位置に登録できるようにしたほうがいい。