2011-04-28

テレビで電気予報も確認したい！

ブラビアに電力状況を表示するウィジェットを作ったよ！さすがに知ってるよね？

＜節電メーター＞と言います。

それに、Yahoo! JAPAN の電気予報を表示する機能を追加したよ。

えっと、電気予報って誰だっけ？

おいおーい！Yahoo! JAPAN のトップページに出てるアレですよ！！アレのコレです。

ウィジェットでは、きょうの電力使用ピーク時間と使用率。
そしてあすのピーク時間と使用率を表示します。

なんとなく分かった？

どんな感じでテレビに表示するの？

あるよ。スクリーンショットあるよ。

あるよ。デモ動画もあるよ。

・・もういいかな？じゃあ、はじめよう。

どうやって使うの？

まずは、ブラビアをお手元にご用意ください。
（↓アフィリエイト。買ってね、はあと）

1. zipファイルをダウンロード。USBメモリにコピーします
2. USBメモリをブラビアに装着だ
3. [ホーム]メニューから[ネットワーク]→[USB]→[節電メーター]で起動すべし
4. アプリ起動中に[オプション]メニューから[登録]するといいよ。リモコンの[アプリキャスト]ボタンで起動できるから。（ただしUSBメモリは抜かないで。抜かないで..BE IN MY LOVE*1）

使ってみたんだけど・・あの・・その・・

あー。それはバグですね。
フィードバックはTwitterにお願いします。

@also_kumapo

まだまだ buggy でいたらない点もあると思いますが、たくさんフィードバック(もちろん不満も)がもらえるとうれしいッス。<= 前々回のコピペ

続・テレビで東京電力の需給状況を確認したい！

ブラビアに電力状況を表示するウィジェットを作ったよ！もう知ってるかい？

＜節電メーター＞と言います。

もっとカンタンにウィジェットを登録する方法を
タレコミ頂きましたので、それをご紹介します。

ちょっと待って。ウィジェット起動したらどんな感じ？

じゃん。スクリーンショットはこんな感じ。

このパーセンテージが東京電力の供給電力に対する需要電力の割り合いです。
早い話、このパーセンテージが 100% に近いほど節電したほうがいいってことなのね。マキバオーなのね。

なんとなく分かった？じゃあ、はじめよう。

ブラビアにウィジェットを登録するには？

まず、ブラビアをお手元にご用意。

そして、ブラビアのブラウザに
http://www.jp.sonystyle.com/Taiken/Appli/WidgetLinks/Posted/0072.acl
と打ち込むんだ！

これで設定はおしまい。

あとは、[ホーム]メニューで
[ネットワーク] -> [アプリキャスト]と選択し
＜節電メーター＞を起動したら、もう、それはそれは、電力状況が見放題なんです。

使ってみたんだけど…

まだまだ buggy でいたらない点もあると思いますが、たくさんフィードバック(もちろん不満も)がもらえるとうれしいッス。<= 前回のコピペ

フィードバックはTwitterへどうぞ。

@also_kumapo

スペシャルサンクス

@vinaliuk さん、情報提供ありがとうございました！！
スクリーンショットも掲載させていただきました！！

テレビで東京電力の需給状況を確認したい！

applicast

ブラビア上で動くウィジェットを作ったよ！

"節電メーター"~~(仮)~~ といいます。

何ができるの？

テレビを観ながら電力需給の最新状況が確認できます。
あー、そうそう。ヤフーのトップに掲載してある、アレです。

これさえあれば、電力の需給状況に応じて節電のアクションがとれます。
ただし、テレビの電源だけは切っちゃダメだぜ。

で、どうやって使うの？

ちょっとだけややこしいけど、お付き合いください。

1. zipファイルをダウンロード *1。USBメモリにコピーします
2. USBメモリをブラビアに装着だ
3. [ホーム]メニューから[ネットワーク]→[USB]→[節電メーター]で起動すべし
4. アプリ起動中に[オプション]メニューから[登録]するといいよ。リモコンの[アプリキャスト]ボタンで起動できるから。（ただしUSBメモリは抜いちゃダメ。後生ですから）

対応してない機種もあるの？

http://h34.ifdef.jp/Chroll/ より引用。

※1 対応機種：（アプリキャスト開発ガイド2009/07/15更新版を元に記載）
* F1, V1, J1, M1, JE1, XR1, X1, W1, ZX1, V5, J5, F5, W5
USB端子があればご利用頂けます。取り消し線を引いたものについてはUSB端子がないことを確認済みです。
* J3000, J5000, X7000, X50x0, W5000, V3000, V5000
USB端子の有無に関わらず非対応です。
* 上記以外で最近発売された機種
参照した資料に記載がないため未確認ですが、USB端子がある機種ならば基本的に動作するはずです

どんなしくみなの？

ブラビアのアプリキャストでやってます。

コピペだけど、参考にさせていただいたサイトを挙げておきますね。*2, *3

使ってみたんだけど…

まだまだ buggy でいたらない点もあると思いますが、たくさんフィードバック(もちろん不満も)がもらえるとうれしいッス。
フィードバックはわたしのtwitterまでどうぞ。

@also_kumapo

追記

IT Proさんに取り上げていただきました！やったね！！

もしかして

そのほかの記事にも関心があるかもしれません。たぶん。きっと。だといいな。:

*1:2011/3/29更新。アプリ設定画面にて終了しないようにした

*2:http://www.geekpage.jp/cgi-bin/tb.cgi?id=2008/9/16/1

*3:http://www.ideaxidea.com/archives/2008/12/10_9.html

2011-01-25

webプログラミング素人がmixiアプリ公開する為に最低限必要だったこ

何度も言うけど、mixiアプリ＜マイミク大喜利＞を公開したよ！

ひたすらマイミク大喜利をPRしたいけど、それは後回し。
今回は、自分の開発をふりかえってみて mixiアプリを公開するために最低限勉強しなければならなかったことをまとめます。

はじめに

mixiアプリ開発のまとめ記事には、有名な記事が数多くあります。

当時わたしはアプリを開発していたので、記事はすべて読みました。
ただ、「勉強すること多すぎ」と思ってしまったのも正直な感想です。
なんたって素人ですから。

だもんで、今回はmixiアプリを公開するのに必要だった技術にしぼって勉強方法をまとめてみようと思います。
あわせて、ほかの記事にはあんまり書いてないmixiアプリ公開申請についても審査に何度も落ちたので（腹いせに）まとめます。

わたしと同様、webプログラミング素人だけどmixiアプリ作ってみたいって人の参考になればうれしいです。

・クライアント
　　・JavaScript
　　・OpenSocial
・外部サーバ
　　・Ruby on Rails
　　・rackspace cloud
・mixiアプリ公開申請
　　・企画についてのガイドライン
　　・ガイドライン上のアプリの制限事項
　　・公開後のアプリのカテゴリー
・書かなかったこと
　　・jQuery
　　・opensocial-jQuery
　　・jQuery UI
・さいごに

クライアント

mixiアプリにはクライアントプログラムが不可欠です。

JavaScript

マイミク大喜利のクライアントはJavaScriptで作りました。
JavaScriptをこれから学ぶ人には＜Head first JavaScript＞がおすすめです。
わたしは＜JavaScript 第5版＞で始めましたが、とっかかりとしては難しく感じました。

＜Head first JavaScript＞がよかったのは、
説明がわかりやすい・そして JavaScriptのしくみを教えてくれるという2点です。
カンタンな本になるとただのサンプル集だったりしてコピペしかできなかったりしますが
＜Head first JavaScript＞はそこまで難しくないのにコードが書けるようになると思います。
しかも、DOMやAjaxなどmixiアプリ開発に必要な技術もわかりやすく説明してあります。

ただ＜Head first JavaScript＞では説明していないこともあるので
必要なものは他で補う必要があると思います。
*1

そうそう。弾さんもおすすめしてましたよ。わたしなんかより説得力あるわー。
http://blog.livedoor.jp/dankogai/archives/51092934.html

OpenSocial

mixiアプリはOpenSocialコンテナからマイミク情報を取得します。
コンテナとのやりとりの規格がOpenSocialです。

OpenSocialを学ぶには、＜mixi Developer Center＞の＜技術仕様＞で十分と思います。
当時は内容こんなに充実してなかったよね？なんだかなあ。
http://developer.mixi.co.jp/appli

ただ＜技術仕様＞だとAPIの詳細が知りたくなったときに困るので
必要に応じて＜OpenSocial API リファレンス＞を参照していました。
http://code.google.com/intl/ja/apis/opensocial/docs/0.8/reference/

先に勉強しておけばよかったと後悔したのは、mixiのパーミッションモデルです。
mixiでは、ユーザの情報のうちアプリが取得できる情報を制限しています。
たとえば、Viewerがアプリをインストールしていない場合 Viewerのマイミク情報を取得できません。
パーミッションモデルを理解していないことで、何度かハマってしまいました。
http://developer.mixi.co.jp/appli/spec/pc/permission_model

外部サーバ

mixiアプリには外部サーバも不可欠です。
外部サーバはアプリのデータを保存しておくのに使います。

Ruby on Rails

外部サーバのwebフレームワークには、Ruby on Railsを使いました。
理由は、RubyとRailsをかじったことがあったからです。それだけ。
ちなみに、JavaもPythonもPHPもできないのは内緒です。

サーバサイドはいくつか選択肢があるので、
なじみの言語とフレームワークを使うのが手っ取り早いはずです。

開発事例の多さで言うと JavaはSlim3(とGoogle App Engine)
*2,*3で、
PHPはZend Framework *4,*5の事例がわたしの読んだかぎり多いです。

rackspace cloud

外部サーバは試行錯誤の末、rackspace cloudを選択しました。
http://www.rackspacecloud.com/cloud_hosting_products/servers/
当初はさくらのレンタルサーバーを使っていましたが、
Railsの起動にたびたび失敗するため乗り換えました。

クラウドサービスのなかでもrackspaceを選んだのは、
費用が安い・Railsでデータベースを使いたかったからです。
実際のところ rackspaceにいくらかかっているかというと
1ヶ月あたり $10 - $11 （最小構成時）で済んでいます。

ただ難点もあります。日本語ドキュメントが少ないことです。
そこで参考にさせていただいた日本語の導入事例を紹介しておきますね。

サービス申し込みの手順
http://d.hatena.ne.jp/rackspace/20100119/1263905011

CentOSの初期設定
http://maeda.farend.ne.jp/blog/2010/01/13/rackspace-centos-initial-setup/

apacheの設定
http://d.hatena.ne.jp/rackspace/20100121/1264081209

FTPサーバの設定
http://d.hatena.ne.jp/rackspace/20100213/1266035100

イメージのバックアップ手順
http://d.hatena.ne.jp/rackspace/20100121/1264059046

Railsの立ち上げ
http://maeda.farend.ne.jp/blog/2010/01/16/rackspace-centos-rails-setup/

余談。
rackspaceと契約するとネイティブから身元確認の電話がかかってくるという噂がありました。
わたしも契約後しばらく身構えていたのですが、母からお見合いしないかという電話がかかってきただけです。
ネイティブからはいちどもかかってきていません。英語が苦手な人も臆せず、rackspaceしてみてください。

そのほかにもrackspaceはサーバ拡張もカンタンだし・サーバイメージの自動バックアップもできるし、
なんだか流行りのクラウドっぽいし（？）、とにかくおすすめです。

mixiアプリ公開申請

公開申請を通さないとアプリは新着のページに掲載されません。
しかも、公開申請しないとアプリを他のユーザが使うのに開発者がいちいち承認しないといけません。

ずばり mixiアプリ公開の最大の難所は、公開申請だと思っています。いやホントに。

企画についてのガイドライン

mixiアプリ公開の難所は公開申請だというのは
審査でNGになりアプリをいくつか公開できなかったからです。

特に、NGとなる理由が企画自体に対する指摘だとかなり厄介です。
プログラムの実装に対する指摘であればバグを直せばいいだけですが、
アプリの企画、それも趣旨にかかわる指摘だとアプリをお蔵入りさせてしまうことになります。

とにかく企画のガイドラインは、開発の最初に読んでおくべきと思います。
http://developer.mixi.co.jp/appli/policies/apps/guidelines

そしてアプリの企画がガイドラインに沿っているか見極めるには、まず類似の機能を持つアプリを探すのがよいです。
もし、類似の機能を持つアプリが見つかったら企画的にはOKなはずです。
いっぽう類似のアプリがない場合は、作りこんだ末公開NGになるリスクをつぶすために
なるはやでアプリを公開申請するのがいいと思っています。

というのも、アプリを作りこむ前に公開申請をかけて結果的にうまくいった経験があるからです。
マイミク大喜利は作りこみ前に公開申請をかけて、いちど申請NGになっています。
しかし、NGになった理由が実装に不備があるというものだったため
企画的にはOKという自信をもって開発を進めることができました。これが結果的にはよかった。

ただ”早くリリースすることも大事なのですが、多少の時間をかけてでも内容的に満足をしてもらえるものを作ることも大事だと思います*6”という面があるので
類似のアプリがない場合は公開申請にかける期間と公開直後の完成度のトレードオフを見極めないといけないんです。

ガイドライン上のアプリの制限事項

アプリ上ユーザに個人情報を入力させることは、ガイドラインで禁止されています。
ですので、他のwebサービスのID・パスワードをアプリ上で入力させることはできません。

このように、技術的には可能であってもアプリの機能がガイドラインで制約されることがあります。
ガイドラインにはアプリの制限事項も記載してあるので、要チェックです。

公開後のアプリのカテゴリー

アプリがどのカテゴリーに掲載されるかは、多くのユーザーに使ってもらう上で重要です。
もし”その他”のカテゴリーに掲載されてしまうと、ユーザー数の伸びは期待できません。

アプリを”エンターテインメント”などのカテゴリに掲載してもらうには、次の2つがポイントです。
・アプリの機能を、マイミク同士のコミュニケーションに限定する
・公開後カテゴリー変更を申請する

マイミク以外のユーザー間でのコミュニケーションが行えるアプリは
その他カテゴリーに掲載すると、ガイドラインには記載あります。

ただ、ガイドラインを守ったとしてもアプリが”そのほか”に掲載されることがあります。ややこしい。
それでも、あきらめるのはまだ早い！
カテゴリ変更申請すると、別のカテゴリーに移してもらえます。
http://developer.mixi.co.jp/appli/com/change/category
実際、マイミク大喜利もこの申請をしたあと ”エンターテイメント”のカテゴリに掲載してもらえたのです。

せっかくアプリを作ったんだから、多くのひとに使ってもらいたいたい！って人は
公開後のカテゴリーにも気を配ったほうがよいと思います。

書かなかったこと

ここまで、わたしがmixiアプリを開発しそして公開するために最低限勉強しなければならなかったことをまとめました。
ただ、必要最小限なことだけでは開発において不自由なことがあるのです。残念ながら。

特に、個人開発では少ない作業時間でどれだけ効率よく開発できるかが重要だとさいきん実感してます。
そして効率よく開発するには、ライブラリの活用が必須というのがわたしの結論です。

ここからは、効率よく開発するためにいまやっていることで・本エントリに詳細に書かなかったことを挙げておきます。

jQuery

JavaScriptのDOM操作はjQueryを使うと、コードが簡潔になります。
また、jQueryやっておくとopensocial-jQueryやjQuery UIの前提となる知識が身について
他のライブラリのとっかかりがラクになります。

opensocial-jQuery

opensocial-jQueryのTemplateを使うと、gadget.xmlとjsの依存関係を少なくできます。
UIを微調整してもjsをあまり修正しなくてすんだので、おすすめです。
作者はなかじまんの中嶋さんです。ドキュメントは日本語でおｋ。すばらしい。
http://code.google.com/p/opensocial-jquery/