#MobileMondays その8 My developerWorksのお友達一覧画面

たまにはエンジニアらしく・・・

ということで、またまたサボっていたdojox.mobileに少し手を出してみました。この連載(?あまり連なってませんよね・・・)移設前のブログで始めたものなので、参考までに過去の投稿をリストしときます。

さて、今日は前回同様、iPhoneアプリとして公開されているMy developerWorksのクライアントアプリケーションの一部をWebベースでクローンしてみました。

さっそくですが、今回の対象はこちらの画面。My developerWorksというソーシャルネットワーク上のお友達の一覧を表示している画面です。

そして、出来上がったのがこちらです。

正直、前回ほど忠実な再現にこだわって作っていないのですが、以下については少しの努力で修正ができるでしょう

  • 配色(スタイルシートで指定する)
  • アイコンの丸み(スタイルシートで指定する)
  • ユーザー名とアイコンの位置合わせ(スタイルシートで指定する)
  • 前の画面に戻るボタンのラベルとデザイン

逆に、ちょっと努力なしには難しそうなのは、iPhoneアプリでは1画面は16名まで、それ以降はフリック操作でページを左右にスライドさせながら見られるというところです。iPhoneではよくあるUIなの、いずれdojox.mobileが対応するということでこれは見送りました。

少しだけ解説すると、こんな感じでdojox.mobileのビューを組み合わせたカスタムウィジェットになっています。

Javascriptのコードにするとそれをこんな感じです。まぁ、お世辞にもきれいなコードではないですが参考までに載せておきます。

dojo.provide("ConnectionListIconView");
dojo.declare("ConnectionListIconView", dojox.mobile.View, {

 title_back : "",
 title_moveTo : "",
 title_label : "",
 title_transition : "slide",

 onBeforeTransitionIn : function(moveTo, dir, transition, context, method) {
 // この関数をオーバーライドすると、Viewを見る直前の動作を記述できます
 // よって、ここで画面を組み立ててます

 var view = dijit.byId(moveTo);

 //タイトル行
 var heading = new dojox.mobile.Heading({
  label : this.title_label, //タイトル行のラベル
  back : this.title_back, //戻るボタン
  moveTo : this.title_moveTo, //戻るボタンをクリックしたときのとび先
  transition : this.title_transition //アニメーション効果
 });
 view.addChild(heading);

 // アイコンを配置するコンテナ
 var iconcontainer = new dojox.mobile.IconContainer({
  single : true
 });
 view.addChild(iconcontainer);

// html5のlocalStorageから事前取得のデータを取り出し
 var stored_colleagues = dojo.fromJson(localStorage.colleague_userids);

// お友達毎にアイコンを作成してコンテナに追加
 for ( var i = 0; i < stored_colleagues.length; i++) {
   var icon = new dojox.mobile.IconItem({
     label : stored_colleagues[i].name,
     icon : "https://www.ibm.com/developerworks/mydeveloperworks/profiles/photo.do?userid=" + stored_colleagues[i].userid
   });
   iconcontainer.addChild(icon);
 }
}
});

データは? と思いますよね。実は別のページであらかじめサーバーから取得したものをHTML5のlocalStorageを使ってブラウザにキャッシュさせています。一覧を見るたびにサーバーにアクセスしたのではレスポンスが悪くて使いづらいので、ここは1つHTML5の恩恵にあずかることにしました。localStorage.XXX というアクセスがそれです。サーバーアクセス部分はまたおいおい・・・

こうして作ったウィジェットを下記のhtmlコードでdojox.mobileを使ったWebアプリケーションに埋め込んだのが先ほどのキャプチャになります。(親HTML内でのdojoのおまじないはここでは省略してます)

<div 
dojoType="ConnectionListIconView" 
id="view_connections_list2" 
title_back="戻る"
title_moveTo="#view_cache" 
title_label="マイ・ネットワーク"></div>

せっかくなので、もうちょっと画面を似せてから再びその成果を公開したいと思います。
今日はここまで。

naoyam について

Used to be living in the edge of Tokyo, now in Singapore. Dad of two girls. Likes skiing, diving. (though not doing them often enough these years...)
カテゴリー: mobile タグ: , , , , , , パーマリンク

#MobileMondays その8 My developerWorksのお友達一覧画面 への1件のフィードバック

  1. ピンバック: #MobileMondays その9 headタグ内を変えられなくてもdojox.mobile | 日々前進なり

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中