社長BLOG

※この内容はアドバンスドサクセスレベルで検討している項目

sfXXXPluginはコアに吸収する。

◆symfony由来のプラグイン

OpenPNEの/plugins/ディレクトリには、OpenPNEが提供するプラグインの他に、sfXXXで始まるsymfony由来のプラグインがいくつかある。これはOpenPNEユーザーにとっては全くのノイズなので、コア側に吸収してしまったほうがいい。

OpenPNE/plugins/ディレクトリは、OpenPNEのプラグインのためのディレクトリなのであって、
symfonyアプリケーションのためのものではない。
※sfXXXPluginを置いて動作させることを否定しているわけではない

すっきりさせて、シンプルにしたいね。

12月はHOUOUプロジェクトスマートフォン対応の大事な一ヶ月になる。

すでに解決方法が分かっている基礎部分は淡々とこなしていく。

淡々と進める基礎部分

・招待、新規登録関連の不整合の修正
・画像のメール投稿
・携帯電話だけどUIDを使わず、クッキーを前提とした認証

このあたりはサラッと済ませておく。大事なのは次に来る、コア、プラグイン全体を通した、便利で生産性の高いアクションフレームワークだ。

アクションフレームワーク案

現在検討中のアクションフレームワークは、これまでのOpenPNEが利用してきたsymfonyのスタイルとは異なる。
自分がsymfonyについて好きではない部分、野生のカンでやばそうな部分を避けてつくる。

理解のためにざっと画像をこしらえた。

◆アクションフレームワークの図 ※クリックして拡大

・もととなる一覧ページは通常のアクションで取得する
・その際に、エラー画面や、つぶやき表示のテンプレートパーツも一緒にロードし、HTML内部に埋め込んでおく
・検索、一覧、投稿などの各アクションはJavaScript(jQuery)でJSON形式のAPIに対して行う
・結果のJSONは埋め込んでいたテンプレートパーツに当てはめ、画面に表示する

という方式だ。

メリット

・レスポンスがHTMLタグ構造を持たないデータのみのJSONになるので、HTML転送量が少なくなる
・AJAXを積極的に利用し、ページ全体をロードする画面遷移を少なくできる
・アクションがAPI形式になるためサーバサイドのテストが容易になる
※独立したAPIはテストがしやすい（クライアントサイドのテストは、モック？スタブ？を相手に人力で行う）
・ガジェット内部だけで、すべてのアクションフローが完結するので、ガジェットが真にポータブルに進化する
・これまでよりもシンプルで簡単にOpenPNEを拡張することができる
※symfony&Doctrine vs HTML+jQuery なので、symfonyわからなくても拡張できるようになる。
・JSONAPIは使い捨てではない。PCでもスマートフォンでもサーバサイドでも、iPhoneアプリからでも利用することができる。

デメリットはプロジェクトにおいて実績があまり無いこと。
これはタイムラインプラグイン（ゴルゴンハニー）を先行して人柱として対応することで、
経験を積んでいく。

明日リリースするゴルゴンハニーでは、PC版のアクションフレームワークに、今回のモデルを採用している。
そしてしっかりと、スムーズに動作している。
スマートフォン版の対応をいち早くすることで、今回のアクションフレームワークの確かさを確認したい。

スマートフォンのUI研究

今回つくりこんだのはこの6点。

詳しく見たい方はモックアップの詳細にアクセスを。

取り組んだ部分の特徴を紹介する。

１列目

◆１列目

最上位ナビはスマートフォンの全ページで表示する。
・メニューを呼び出すロゴマーク
・通知センター表示
・投稿ボタン

の3つで構成する。
ボタンを押した場合は、画面を遷移する形ではなく、
ダイアログ形式で一時的に上に、既存の画面の上にかぶさってくるような操作感覚になる。

◆かぶさるイメージ１MENU

◆かぶさるイメージ２ 通知センター

◆かぶさるイメージ３ 投稿

投稿画面だけは、ちょっと機能が違うので、かぶさるというよりも、
移動して投稿が終わったら元の画面に戻ってこられる。という感じになる。

２列目

２列目も共通のデザインにしている。
ホーム、フレンド、コミュニティの基本情報を示す。
◆コミュニティ、フレンドの基本情報

１，２列目の組み合わせで、UIに共通性とリズムを持たせる。

◆共通性のリズム

メンバーページ

メンバーページは、履歴書のように基本情報を写真できっちり見せるようにする。
更新性の高いタイムラインなどのコンテンツは、１件のみ表示として、リンク先で閲覧できるようにしてみた。

◆メンバーページ（フレンド）

グループも全く同一のページ構成にする
◆グループページ（コミュニティ）

通知センター

通知センターはポップアップタイプにしてみた。
◆ポップアップ型通知センター

実際にクリックして動作を確認してみると、導線がおかしい部分が確認できる。
balsamiqモックアップツールは最高だ。

HOUOUプロジェクトのリリーススケジュールについて、構想を共有する。

リリースは毎月月末に行う

HOUOUのリリースは毎月月末を目標に行う。
各リリースでのリリースコンセプトは次のとおり。

11月号 シンプル「裸になったOpenPNE」
12月号 スマートフォン「スマートフォン化の基礎部分」
01月号 スマートフォン「スマートフォンプラグインの対応拡充」
02月号 シンプル：「不要機能を削除しβバージョンへ」
03月号 「HOUOUプロジェクト完了前夜」

HOUOUプロジェクトとして毎月のリリースを5回行う。
この他にもBeta1,2,3というような細かいリリースはこのスケジュールとは別に行う。

そのつどつどで、開発者でなくても簡単に利用出来るようなアプリケーションとして提供し、
運営者の方々に試していただくのが、毎月リリースの目的だ。

12/07 大阪梅田で教育機関でのOpenPNE利用について講演する。
主催者は富士通マーケティング。セッションをひとつ担当させていただくことになった。
参加費は無料。

セッション内容は次のとおり。

【テーマ】
OpenPNEでeポートフォリオを実現する方法

１．学生のキャンパスライフ全般をカバーする学内SNSを構築し
２．SNS上で学生が活動することで、行動記録が蓄積し
３．そのデータを整理し、学生のポートフォリオを構築する

このシナリオをどうやるか？

導入に当たっての課題や、やってはならないタブーなど、これまでの手嶋屋の経験を共有するので、
eポートフォリオと学内SNS成功のための手がかりにしていただきたい。

イベントの申込はこちらから

◆イベントパンフレット PDF

HOUOUプロジェクトのOpenPNEのUI改善について、一回目の研究を行った。
現段階での研究は、HOUOUプロジェクトが非常にスムーズに進行した場合、
アドバンスドサクセスレベルのUIだと考えていただきたい。

実際のリリース時点では、互換性の維持や開発ボリュームの問題で、もっと消極的なUIが選択される可能性がある。

PCUI

今回のUI調査で変更した項目は次のとおり。

横幅を1024ピクセル前提にする
横幅が大きなブラウザのシェアが拡大したので対応する。

ナビゲーションを2段から一段に圧縮し、コンテンツ領域を増やす
これも最近のトレンドに合わせて。

通知をインフォメーション欄方式から、バッジ方式に変更する
通知をバッジ方式にする。

プロフィールを左列へ
センター列にコンテンツをたくさん配置するため。
ホーム・フレンド・コミュニティページののUIを似せたい。
フレンドページ、コミュニティページのセンターコンテンツを拡大したい。

◆センターの横幅を529ピクセルに拡大する

センターの横幅を529ピクセルまで拡大する。既存のプラグインとの互換性は下がるが、コンテンツ領域を多くとることができる。

スマートフォンUI

◆スマートフォンホーム画面

スマートフォンのコンセプトは次のとおり。
初心者〜中級者をメインユーザーに
あまりハイエンド層を狙わず、まずはSNSの中級者ぐらいまでが心地良く使えるようにした。

メイン3ページのデザインを統一
ホーム、フレンド、コミュニティのメイン3ページはレイアウトを統一する。

特に上段2段のUIは揃える。

通知センター
新着メッセージやフレンド申請の通知は、通知センターにまとめて表示する。
ホーム画面ではバッジ表示とする。通知の既読未読を管理する。

◆通知センターボタン

◆通知センター

投稿画面
投稿画面は、だれに？どんな方法で、情報共有しようとしているか？を分かりやすく伝える。
プライベートメッセージと、つぶやきを間違えてしまったり、公開範囲を間違えないようにする。

◆投稿画面UI

◆リールで投稿方法を変更

投稿方法についてはリールで変更できるようにする。
つぶやきからプライベートメッセージや写真共有に変更する。
全体公開から、コミュニティ指定公開に変更する。
などが、分かりやすく行えるように。

作成したモックアップはすべて以下のリンクから閲覧することができる。スマートフォンUIについては、ボタンが動くようにしてあるので、画面遷移も可能だ。
モックアップ

モックアップはコメントも付けられるようにしているので、思いついたアイデアがあれば、共有していただきたい。

今後のUI研究

HOUOUのリリースがスムーズに進むように、UIの改善も並行して進める。
今回ラフで上げたのは、あくまでもアドバンスドサクセス。大成功した場合のUIだ。
実際にはプラグインの後方互換性サポートも必要になるので、ここまでうまくは行かないかもしれない。

HOUOUは12月に一気にスマートフォン対応を進めることになる。
次のUI研究#2では、スマートフォンに注力したUI構成を重点的に検証していく。

今ハッカソンでふじみ野に来ている。
テーマはPC、スマートフォン全体を考えたUI設計について。
バルサミコを使って動作可能な一連のモックアップをつくるのが目標だ。

そのなかで感じたこと。

Twitterにはないけど、YammerやChatterにある機能として、特定のグループの中でつぶやくというアクションがある。

会社組織で使われることが多いので、部内のみで共有というニーズが高いためだろう。
グループ内つぶやきは、TwitterやFacebookよりも社内SNS系のほうが進歩している。
OpenPNEは社内で使われることが多いので、HOUOUでも、タイムラインプラグイン（ゴルゴンハニー）でも、グループつぶやきが快適に使えるように考えたい。

これは、目玉になる。

いまのところYammerやChatterはグループつぶやきの機能は備わっているのだが、その見た目が悪い。

テキスト一行で片付けられてしまうと、グループの中で共有している、という雰囲気が出にくい。
もうちょっといい印象を与えられるようにしたいな。

本日のPHPセミナーで紹介した情報を共有する。
WEBデザイナがPHPに興味を持っていただくきっかけになれば嬉しい。

セミナー資料

【11/25追記】資料のリンクを掲載しました。
2011/11/24 配布資料
2011/11/24 セミナースライド

Webリンク
◆OpenPNE3がプリインストールされたレンタルサーバ
・サーバーカウボーイ http://server-cowboy.jp

◆opSkinPNGPlugin：FireworksPNG形式で作ったスキン
https://github.com/tejima/opSkinPNGPlugin

◆フレンドリンクを自動的に操作するプラグイン
https://github.com/tejima/opAutoFriendPlugin

成長のための次のステップ

１．好きなテーマを見つける
OpenPNEじゃなくてもいいので、アートでも、サイトでも何でもいいのでPHPでつくってみたいテーマを見つける。

２．PHPの先輩とコラボレーションする
Webプログラミングは歴史が浅いので、体系立った先生はまだ少ない。
PHPプログラミングをやっている先輩を見つけて、プロジェクトを一緒に行い共同作業しながら勉強をしていくのがベスト。

※がんばってください。

KnolとGoogleWaveが終了したそうだ。

Googleの主力でない実験サービスは、あんまり情熱を注いで無いように見えてしまう。
死ぬ気で努力したがうまく行かず、涙を飲んで撤退、という雰囲気がぜんぜん伝わってこない。

「ラボやアルファと名付けるより正式サービス風に広報した方が、ユーザーが集まるしスケールメリットが出るよね」
って姑息なニュアンスが伝わってくる。

他の企業よりもエンジニアの能力が高く、研究開発にふんだんに予算が使えるのはいいのだが、
誠実にサービスをつくろうと取り組む姿勢が伝わってこない。
（もし作ってるエンジニアが誠実なら、この自分への伝わり方はマーケティングの失敗だ）

情熱を注ぎうまくいっているプロジェクトあるから、自分が好きで使っているサービスは、
片手間適当サービスと同じように閉鎖しないでもらいたい。

タイムラインのUIを作ったり、ボタンを考えてる。

POSTとLikeは「投稿」や「いいね！」などとせずに、英語のまんまの方が良い気がしてきた。

FacebookのLikeはとてもセクシーな表現で好きだ。いいね！とは意味が違う気がする。

いいね！は、投稿の内容に対して、「いいね」と言うのであって、投稿をした人の事を「いいね」というときには使えない。
Likeはどっちでも使える。あなたの書き込みを「Like」だよ、というのとあなたそのものを「Like」だよ、とダブらせて使える。

だから「いいね」よりも「Like」のほうがセクシーだと思うわけだ。
※Googleの「+1」は最悪でセクシーからは程遠い

Facebookの「あいさつ」は、英語では「Poke」だ。こっちのほうがもっとセクシーだ。
poke の意味とは – Yahoo!辞書