笑いが欲しくてやった。今は反省している kumapo Hatena::Blog hatenablog://blog/17680117126972408446 テレビで電気予報も確認したい! hatenablog://entry/17680117126972417140 2011-04-28T00:00:00+09:00 2019-02-19T23:52:32+09:00 ブラビアに電力状況を表示するウィジェットを作ったよ!さすがに知ってるよね?<節電メーター>と言います。それに、Yahoo! JAPAN の電気予報を表示する機能を追加したよ。 えっと、電気予報って誰だっけ? おいおーい!Yahoo! JAPAN のトップページに出てるアレですよ!!アレのコレです。ウィジェットでは、きょうの電力使用ピーク時間と使用率。 そして あすのピーク時間と使用率を表示します。なんとなく分かった? どんな感じでテレビに表示するの? あるよ。スクリーンショットあるよ。あるよ。デモ動画もあるよ。・・もういいかな?じゃあ、はじめよう。 どうやって使うの? まずは、ブラビアをお手元… <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D6%A5%E9%A5%D3%A5%A2">ブラビア</a>に電力状況を表示する<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A6%A5%A3%A5%B8%A5%A7%A5%C3%A5%C8">ウィジェット</a>を作ったよ!さすがに知ってるよね?</p><p><節電メーター>と言います。</p><p>それに、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Yahoo%21%20JAPAN">Yahoo! JAPAN</a> の<span class="deco" style="font-weight:bold;">電気予報</span>を表示する機能を追加したよ。</p> <div class="section"> <h4>えっと、電気予報って誰だっけ?</h4> <p>おいおーい!<a class="keyword" href="http://d.hatena.ne.jp/keyword/Yahoo%21%20JAPAN">Yahoo! JAPAN</a> のトップページに出てるアレですよ!!アレのコレです。</p><p><span itemscope itemtype="http://schema.org/Photograph"><a href="http://f.hatena.ne.jp/kumapo/20110427232736" class="hatena-fotolife" itemprop="url"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/k/kumapo/20110427/20110427232736.gif" alt="f:id:kumapo:20110427232736g:image" title="f:id:kumapo:20110427232736g:image" class="hatena-fotolife" itemprop="image"></a></span></p><p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A6%A5%A3%A5%B8%A5%A7%A5%C3%A5%C8">ウィジェット</a>では、きょうの電力使用ピーク時間と使用率。<br /> そして あすのピーク時間と使用率を表示します。</p><p>なんとなく分かった?</p> </div> <div class="section"> <h4>どんな感じでテレビに表示するの?</h4> <p>あるよ。<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%AF%A5%EA%A1%BC%A5%F3%A5%B7%A5%E7%A5%C3%A5%C8">スクリーンショット</a>あるよ。</p><p><span itemscope itemtype="http://schema.org/Photograph"><a href="http://f.hatena.ne.jp/kumapo/20110427232738" class="hatena-fotolife" itemprop="url"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/k/kumapo/20110427/20110427232738.png" alt="f:id:kumapo:20110427232738p:image" title="f:id:kumapo:20110427232738p:image" class="hatena-fotolife" itemprop="image"></a></span></p><p>あるよ。デモ動画もあるよ。</p><p><iframe width="420" height="315" src="https://www.youtube.com/embed/dh_gKb6hKDk?wmode=transparent" frameborder="0" allowfullscreen></iframe></p><p>・・もういいかな?じゃあ、はじめよう。</p> </div> <div class="section"> <h4>どうやって使うの?</h4> <p>まずは、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D6%A5%E9%A5%D3%A5%A2">ブラビア</a>をお手元にご用意ください。<br /> (↓<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A2%A5%D5%A5%A3%A5%EA%A5%A8%A5%A4%A5%C8">アフィリエイト</a>。買ってね、はあと)</p><p><a href="http://www.amazon.co.jp/exec/obidos/ASIN/B003BRDAD8/waraigahosh07-22/ref=nosim/" name="amazletlink" target="_blank"><img src="http://ecx.images-amazon.com/images/I/21rPMdX64EL._SL160_.jpg" alt="ソニー デジタルハイビジョン液晶テレビ BRAVIA NX800シリーズ 40V型 KDL-40NX800" style="border: none;" /></a></p><p> 1. <a href="http://kumapo.sakura.ne.jp/resources/denko0.04.zip">zip&#x30D5;&#x30A1;&#x30A4;&#x30EB;&#x3092;&#x30C0;&#x30A6;&#x30F3;&#x30ED;&#x30FC;&#x30C9;</a>。<a class="keyword" href="http://d.hatena.ne.jp/keyword/USB%A5%E1%A5%E2%A5%EA">USBメモリ</a>にコピーします<br /> 2. <a class="keyword" href="http://d.hatena.ne.jp/keyword/USB%A5%E1%A5%E2%A5%EA">USBメモリ</a>を<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D6%A5%E9%A5%D3%A5%A2">ブラビア</a>に装着だ<br /> 3. [ホーム]メニューから[ネットワーク]→[USB]→[節電メーター]で起動すべし<br /> 4. アプリ起動中に[オプション]メニューから[登録]するといいよ。リモコンの[<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A2%A5%D7%A5%EA%A5%AD%A5%E3%A5%B9%A5%C8">アプリキャスト</a>]ボタンで起動できるから。(ただし<a class="keyword" href="http://d.hatena.ne.jp/keyword/USB%A5%E1%A5%E2%A5%EA">USBメモリ</a>は抜かないで。抜かないで..BE IN MY LOVE<a href="#f-8f80c0ab" name="fn-8f80c0ab" title="♪溢れちゃう...BE IN LOVE / 後藤真希">*1</a>)</p> </div> <div class="section"> <h4>使ってみたんだけど・・あの・・その・・</h4> <p>あー。それはバグですね。<br /> フィードバックは<a class="keyword" href="http://d.hatena.ne.jp/keyword/Twitter">Twitter</a>にお願いします。</p> <blockquote> <p>@also_kumapo</p> </blockquote> <p>まだまだ buggy でいたらない点もあると思いますが、たくさんフィードバック(もちろん不満も)がもらえると うれしいッス。<= 前々回のコピペ</p> </div> <div class="section"> <h4><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A4%A2%A4%EF%A4%BB%A4%C6%C6%C9%A4%DF%A4%BF%A4%A4">あわせて読みたい</a></h4> <ul> <li><a href="http://d.hatena.ne.jp/kumapo/20110324">&#x30C6;&#x30EC;&#x30D3;&#x3067; &#x6771;&#x4EAC;&#x96FB;&#x529B;&#x306E;&#x9700;&#x7D66;&#x72B6;&#x6CC1;&#x3092;&#x78BA;&#x8A8D;&#x3057;&#x305F;&#x3044;&#xFF01;</a></li> <li><a href="http://d.hatena.ne.jp/kumapo/20090625#1245937982">&#x30C6;&#x30EC;&#x30D3;&#x3067; Remember The Milk &#x3057;&#x305F;&#x3044;&#xFF01;</a></li> </ul> </div><div class="footnote"> <p class="footnote"><a href="#fn-8f80c0ab" name="f-8f80c0ab" class="footnote-number">*1</a><span class="footnote-delimiter">:</span><span class="footnote-text">♪溢れちゃう...BE IN LOVE / <a class="keyword" href="http://d.hatena.ne.jp/keyword/%B8%E5%C6%A3%BF%BF%B4%F5">後藤真希</a></span></p> </div> kumapo 続・テレビで 東京電力の需給状況を確認したい! hatenablog://entry/17680117126972417175 2011-04-22T00:00:00+09:00 2019-02-19T23:52:32+09:00 ブラビアに電力状況を表示するウィジェットを作ったよ!もう知ってるかい?<節電メーター>と言います。もっとカンタンにウィジェットを登録する方法を タレコミ頂きましたので、それをご紹介します。 ちょっと待って。ウィジェット起動したらどんな感じ? じゃん。スクリーンショットはこんな感じ。このパーセンテージが東京電力の供給電力に対する需要電力の割り合いです。 早い話、このパーセンテージが 100% に近いほど 節電したほうがいいってことなのね。マキバオーなのね。なんとなく分かった?じゃあ、はじめよう。 ブラビアにウィジェットを登録するには? まず、ブラビアをお手元にご用意。そして、ブラビアのブラウザに… <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D6%A5%E9%A5%D3%A5%A2">ブラビア</a>に電力状況を表示する<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A6%A5%A3%A5%B8%A5%A7%A5%C3%A5%C8">ウィジェット</a>を作ったよ!もう知ってるかい?</p><p><節電メーター>と言います。</p><p>もっとカンタンに<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A6%A5%A3%A5%B8%A5%A7%A5%C3%A5%C8">ウィジェット</a>を登録する方法を<br /> タレコミ頂きましたので、それをご紹介します。</p> <div class="section"> <h4>ちょっと待って。<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A6%A5%A3%A5%B8%A5%A7%A5%C3%A5%C8">ウィジェット</a>起動したらどんな感じ?</h4> <p>じゃん。<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%AF%A5%EA%A1%BC%A5%F3%A5%B7%A5%E7%A5%C3%A5%C8">スクリーンショット</a>はこんな感じ。</p><p><span itemscope itemtype="http://schema.org/Photograph"><a href="http://f.hatena.ne.jp/kumapo/20110421204734" class="hatena-fotolife" itemprop="url"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/k/kumapo/20110421/20110421204734.jpg" alt="f:id:kumapo:20110421204734j:image" title="f:id:kumapo:20110421204734j:image" class="hatena-fotolife" itemprop="image"></a></span></p><p>このパーセンテージが<a class="keyword" href="http://d.hatena.ne.jp/keyword/%C5%EC%B5%FE%C5%C5%CE%CF">東京電力</a>の供給電力に対する需要電力の割り合いです。<br /> 早い話、このパーセンテージが 100% に近いほど 節電したほうがいいってことなのね。<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%DE%A5%AD%A5%D0%A5%AA%A1%BC">マキバオー</a>なのね。</p><p>なんとなく分かった?じゃあ、はじめよう。</p> </div> <div class="section"> <h4><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D6%A5%E9%A5%D3%A5%A2">ブラビア</a>に<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A6%A5%A3%A5%B8%A5%A7%A5%C3%A5%C8">ウィジェット</a>を登録するには?</h4> <p>まず、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D6%A5%E9%A5%D3%A5%A2">ブラビア</a>をお手元にご用意。</p><p>そして、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D6%A5%E9%A5%D3%A5%A2">ブラビア</a>のブラウザに<br /> <span class="deco" style="font-style:italic;"><a href="http://www.jp.sonystyle.com/Taiken/Appli/WidgetLinks/Posted/0072.acl">http://www.jp.sonystyle.com/Taiken/Appli/WidgetLinks/Posted/0072.acl</a></span><br /> と打ち込むんだ!</p><p>これで設定はおしまい。</p><p>あとは、[ホーム]メニューで<br /> [ネットワーク] -> [<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A2%A5%D7%A5%EA%A5%AD%A5%E3%A5%B9%A5%C8">アプリキャスト</a>]と選択し<br /> <節電メーター>を起動したら、もう、それはそれは、電力状況が見放題なんです。</p> </div> <div class="section"> <h4>使ってみたんだけど…</h4> <p>まだまだ buggy でいたらない点もあると思いますが、たくさんフィードバック(もちろん不満も)がもらえると うれしいッス。<= 前回のコピペ</p><p>フィードバックは<a class="keyword" href="http://d.hatena.ne.jp/keyword/Twitter">Twitter</a>へどうぞ。</p> <blockquote> <p>@also_kumapo</p> </blockquote> </div> <div class="section"> <h4><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%DA%A5%B7%A5%E3">スペシャ</a>ルサンクス</h4> <p>@vinaliuk さん、情報提供ありがとうございました!!<br /> <a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%AF%A5%EA%A1%BC%A5%F3%A5%B7%A5%E7%A5%C3%A5%C8">スクリーンショット</a>も掲載させていただきました!!<br /> <br /> </p> </div> <div class="section"> <h4><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A4%A2%A4%EF%A4%BB%A4%C6%C6%C9%A4%DF%A4%BF%A4%A4">あわせて読みたい</a></h4> <ul> <li><a href="http://d.hatena.ne.jp/kumapo/20110324">&#x30C6;&#x30EC;&#x30D3;&#x3067; &#x6771;&#x4EAC;&#x96FB;&#x529B;&#x306E;&#x9700;&#x7D66;&#x72B6;&#x6CC1;&#x3092;&#x78BA;&#x8A8D;&#x3057;&#x305F;&#x3044;&#xFF01;</a></li> <li><a href="http://d.hatena.ne.jp/kumapo/20090625#1245937982">&#x30C6;&#x30EC;&#x30D3;&#x3067; Remember The Milk &#x3057;&#x305F;&#x3044;&#xFF01;</a></li> </ul> </div> kumapo テレビで 東京電力の需給状況を確認したい! hatenablog://entry/17680117126972417197 2011-03-24T00:00:00+09:00 2019-02-19T23:52:33+09:00 ブラビア上で動くウィジェットを作ったよ!"節電メーター"(仮) といいます。 何ができるの? テレビを観ながら 電力需給の最新状況が確認できます。 あー、そうそう。ヤフーのトップに掲載してある、アレです。 これさえあれば、電力の需給状況に応じて節電のアクションがとれます。 ただし、テレビの電源だけは切っちゃダメだぜ。 で、どうやって使うの? ちょっとだけややこしいけど、お付き合いください。 1. zipファイルをダウンロード*1。USBメモリにコピーします 2. USBメモリをブラビアに装着だ 3. [ホーム]メニューから[ネットワーク]→[USB]→[節電メーター]で起動すべし 4. アプリ… <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D6%A5%E9%A5%D3%A5%A2">ブラビア</a>上で動く<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A6%A5%A3%A5%B8%A5%A7%A5%C3%A5%C8">ウィジェット</a>を作ったよ!</p><p>"節電メーター"<del datetime="2011-03-27T23:47:30+09:00">(仮)</del> といいます。<br /> <span itemscope itemtype="http://schema.org/Photograph"><a href="http://f.hatena.ne.jp/kumapo/20110324015949" class="hatena-fotolife" itemprop="url"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/k/kumapo/20110324/20110324015949.png" alt="f:id:kumapo:20110324015949p:image" title="f:id:kumapo:20110324015949p:image" class="hatena-fotolife" itemprop="image"></a></span><br /> </p> <div class="section"> <h4>何ができるの?</h4> <p>テレビを観ながら <a class="keyword" href="http://d.hatena.ne.jp/keyword/%C5%C5%CE%CF%BC%FB%B5%EB">電力需給</a>の最新状況が確認できます。<br /> あー、そうそう。ヤフーのトップに掲載してある、アレです。<br /> <span itemscope itemtype="http://schema.org/Photograph"><a href="http://f.hatena.ne.jp/kumapo/20110324015950" class="hatena-fotolife" itemprop="url"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/k/kumapo/20110324/20110324015950.gif" alt="f:id:kumapo:20110324015950g:image" title="f:id:kumapo:20110324015950g:image" class="hatena-fotolife" itemprop="image"></a></span></p><p>これさえあれば、電力の需給状況に応じて節電のアクションがとれます。<br /> ただし、テレビの電源だけは切っちゃダメだぜ。</p> </div> <div class="section"> <h4>で、どうやって使うの?</h4> <p>ちょっとだけややこしいけど、お付き合いください。</p><p> 1. <a href="http://kumapo.sakura.ne.jp/resources/denko.zip">zip&#x30D5;&#x30A1;&#x30A4;&#x30EB;&#x3092;&#x30C0;&#x30A6;&#x30F3;&#x30ED;&#x30FC;&#x30C9;</a><a href="#f-5d59eda8" name="fn-5d59eda8" title="2011/3/29更新。アプリ設定画面にて終了しないようにした">*1</a>。<a class="keyword" href="http://d.hatena.ne.jp/keyword/USB%A5%E1%A5%E2%A5%EA">USBメモリ</a>にコピーします<br /> 2. <a class="keyword" href="http://d.hatena.ne.jp/keyword/USB%A5%E1%A5%E2%A5%EA">USBメモリ</a>を<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D6%A5%E9%A5%D3%A5%A2">ブラビア</a>に装着だ<br /> 3. [ホーム]メニューから[ネットワーク]→[USB]→[節電メーター]で起動すべし<br /> 4. アプリ起動中に[オプション]メニューから[登録]するといいよ。リモコンの[<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A2%A5%D7%A5%EA%A5%AD%A5%E3%A5%B9%A5%C8">アプリキャスト</a>]ボタンで起動できるから。(ただし<a class="keyword" href="http://d.hatena.ne.jp/keyword/USB%A5%E1%A5%E2%A5%EA">USBメモリ</a>は抜いちゃダメ。後生ですから)</p> </div> <div class="section"> <h4>対応してない機種もあるの?</h4> <p><a href="http://h34.ifdef.jp/Chroll/">http://h34.ifdef.jp/Chroll/</a> より引用。</p> <blockquote> <p>※1 対応機種:(<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A2%A5%D7%A5%EA%A5%AD%A5%E3%A5%B9%A5%C8">アプリキャスト</a>開発ガイド2009/07/15更新版を元に記載)<br /> * F1, <del datetime="2011-03-27T23:47:30+09:00">V1</del>, J1, M1, JE1, XR1, X1, W1, ZX1, <del datetime="2011-03-27T23:47:30+09:00">V5</del>, <del datetime="2011-03-27T23:47:30+09:00">J5</del>, F5, W5<br /> USB端子があればご利用頂けます。取り消し線を引いたものについてはUSB端子がないことを確認済みです。<br /> * J3000, J5000, X7000, X50x0, W5000, V3000, V5000<br /> USB端子の有無に関わらず非対応です。<br /> * 上記以外で最近発売された機種<br /> 参照した資料に記載がないため未確認ですが、USB端子がある機種ならば基本的に動作するはずです</p> </blockquote> </div> <div class="section"> <h4>どんなしくみなの?</h4> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D6%A5%E9%A5%D3%A5%A2">ブラビア</a>の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A2%A5%D7%A5%EA%A5%AD%A5%E3%A5%B9%A5%C8">アプリキャスト</a>でやってます。</p><p>コピペだけど、参考にさせていただいたサイトを挙げておきますね。<a href="#f-c39c06c0" name="fn-c39c06c0" title="http://www.geekpage.jp/cgi-bin/tb.cgi?id=2008/9/16/1">*2</a>, <a href="#f-62d3065a" name="fn-62d3065a" title="http://www.ideaxidea.com/archives/2008/12/10_9.html">*3</a><br /> </p> </div> <div class="section"> <h4>使ってみたんだけど…</h4> <p>まだまだ buggy でいたらない点もあると思いますが、たくさんフィードバック(もちろん不満も)がもらえると うれしいッス。<br /> フィードバックはわたしの<a class="keyword" href="http://d.hatena.ne.jp/keyword/twitter">twitter</a>までどうぞ。</p> <blockquote> <p>@also_kumapo</p> </blockquote> </div> <div class="section"> <h4>追記</h4> <p><a href="http://itpro.nikkeibp.co.jp/article/NEWS/20110325/358756/">IT Pro</a>さんに取り上げていただきました!やったね!!</p> </div> <div class="section"> <h4>もしかして</h4> <p>そのほかの記事にも関心があるかもしれません。たぶん。きっと。だといいな。:</p> <ul> <li><a href="http://d.hatena.ne.jp/kumapo/20110125">web&#x30D7;&#x30ED;&#x30B0;&#x30E9;&#x30DF;&#x30F3;&#x30B0;&#x7D20;&#x4EBA;&#x304C;mixi&#x30A2;&#x30D7;&#x30EA;&#x516C;&#x958B;&#x3059;&#x308B;&#x70BA;&#x306B;&#x6700;&#x4F4E;&#x9650; &#x5FC5;&#x8981;&#x3060;&#x3063;&#x305F;&#x3053;&#x3068;</a></li> <li><a href="http://d.hatena.ne.jp/kumapo/20090625#1245937982">&#x30C6;&#x30EC;&#x30D3;&#x3067; Remember The Milk &#x3057;&#x305F;&#x3044;&#xFF01;</a></li> </ul> </div><div class="footnote"> <p class="footnote"><a href="#fn-5d59eda8" name="f-5d59eda8" class="footnote-number">*1</a><span class="footnote-delimiter">:</span><span class="footnote-text">2011/3/29更新。アプリ設定画面にて終了しないようにした</span></p> <p class="footnote"><a href="#fn-c39c06c0" name="f-c39c06c0" class="footnote-number">*2</a><span class="footnote-delimiter">:</span><span class="footnote-text"><a href="http://www.geekpage.jp/cgi-bin/tb.cgi?id=2008/9/16/1">http://www.geekpage.jp/cgi-bin/tb.cgi?id=2008/9/16/1</a></span></p> <p class="footnote"><a href="#fn-62d3065a" name="f-62d3065a" class="footnote-number">*3</a><span class="footnote-delimiter">:</span><span class="footnote-text"><a href="http://www.ideaxidea.com/archives/2008/12/10_9.html">http://www.ideaxidea.com/archives/2008/12/10_9.html</a></span></p> </div> kumapo webプログラミング素人がmixiアプリ公開する為に最低限 必要だったこ hatenablog://entry/17680117126972417230 2011-01-25T00:00:00+09:00 2019-02-19T23:52:34+09:00 何度も言うけど、mixiアプリ<マイミク大喜利>を公開したよ! ひたすらマイミク大喜利をPRしたいけど、それは後回し。 今回は、自分の開発をふりかえってみて mixiアプリを公開するために最低限 勉強しなければならなかったことをまとめます。 はじめに mixiアプリ開発のまとめ記事には、有名な記事が数多くあります。 当時わたしはアプリを開発していたので、記事はすべて読みました。 ただ、「勉強すること多すぎ」と思ってしまったのも正直な感想です。 なんたって素人ですから。 だもんで、今回はmixiアプリを公開するのに必要だった技術にしぼって勉強方法をまとめてみようと思います。 あわせて、ほかの記事… <p>何度も言うけど、<a class="keyword" href="http://d.hatena.ne.jp/keyword/mixi%A5%A2%A5%D7%A5%EA">mixiアプリ</a><<a href="http://mixi.jp/view_appli.pl?id=21611">&#x30DE;&#x30A4;&#x30DF;&#x30AF;&#x5927;&#x559C;&#x5229;</a>>を公開したよ!<br /> <span itemscope itemtype="http://schema.org/Photograph"><a href="http://f.hatena.ne.jp/kumapo/20110125044508" class="hatena-fotolife" itemprop="url"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/k/kumapo/20110125/20110125044508.gif" alt="f:id:kumapo:20110125044508g:image" title="f:id:kumapo:20110125044508g:image" class="hatena-fotolife" itemprop="image"></a></span></p><p>ひたすらマイミク<a class="keyword" href="http://d.hatena.ne.jp/keyword/%C2%E7%B4%EE%CD%F8">大喜利</a>をPRしたいけど、それは後回し。<br /> 今回は、自分の開発をふりかえってみて <a class="keyword" href="http://d.hatena.ne.jp/keyword/mixi%A5%A2%A5%D7%A5%EA">mixiアプリ</a>を公開するために最低限 勉強しなければならなかったことをまとめます。</p> <div class="section"> <h4>はじめに</h4> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/mixi%A5%A2%A5%D7%A5%EA">mixiアプリ</a>開発のまとめ記事には、有名な記事が数多くあります。</p><br /> <p>当時わたしはアプリを開発していたので、記事はすべて読みました。<br /> ただ、「勉強すること多すぎ」と思ってしまったのも正直な感想です。<br /> なんたって素人ですから。</p><br /> <p>だもんで、今回は<a class="keyword" href="http://d.hatena.ne.jp/keyword/mixi%A5%A2%A5%D7%A5%EA">mixiアプリ</a>を公開するのに必要だった技術にしぼって勉強方法をまとめてみようと思います。<br /> あわせて、ほかの記事にはあんまり書いてない<a class="keyword" href="http://d.hatena.ne.jp/keyword/mixi%A5%A2%A5%D7%A5%EA">mixiアプリ</a>公開申請についても審査に何度も落ちたので(腹いせに)まとめます。</p><br /> <p>わたしと同様、webプログラミング素人だけど<a class="keyword" href="http://d.hatena.ne.jp/keyword/mixi%A5%A2%A5%D7%A5%EA">mixiアプリ</a>作ってみたいって人の参考になればうれしいです。</p> </div> <div class="section"> <h4>もくじ</h4> <p>・クライアント<br />   ・<a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a><br />   ・<a class="keyword" href="http://d.hatena.ne.jp/keyword/OpenSocial">OpenSocial</a><br /> ・外部サーバ<br />   ・<a class="keyword" href="http://d.hatena.ne.jp/keyword/Ruby%20on%20Rails">Ruby on Rails</a><br />   ・rackspace cloud<br /> ・<a class="keyword" href="http://d.hatena.ne.jp/keyword/mixi%A5%A2%A5%D7%A5%EA">mixiアプリ</a>公開申請<br />   ・企画についての<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%AC%A5%A4%A5%C9%A5%E9%A5%A4%A5%F3">ガイドライン</a><br />   ・<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%AC%A5%A4%A5%C9%A5%E9%A5%A4%A5%F3">ガイドライン</a>上のアプリの制限事項<br />   ・公開後のアプリのカテゴリー<br /> ・書かなかったこと<br />   ・<a class="keyword" href="http://d.hatena.ne.jp/keyword/jQuery">jQuery</a><br />   ・<a class="keyword" href="http://d.hatena.ne.jp/keyword/opensocial">opensocial</a>-<a class="keyword" href="http://d.hatena.ne.jp/keyword/jQuery">jQuery</a><br />   ・<a class="keyword" href="http://d.hatena.ne.jp/keyword/jQuery">jQuery</a> UI<br /> ・さいごに</p> </div> <div class="section"> <h4>クライアント</h4> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/mixi%A5%A2%A5%D7%A5%EA">mixiアプリ</a>にはクライアントプログラムが不可欠です。</p> </div> <div class="section"> <h4><a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a></h4> <p>マイミク<a class="keyword" href="http://d.hatena.ne.jp/keyword/%C2%E7%B4%EE%CD%F8">大喜利</a>のクライアントは<a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a>で作りました。<br /> <a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a>をこれから学ぶ人には<Head first <a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a>>がおすすめです。<br /> わたしは<<a href="http://www.amazon.co.jp/exec/obidos/ASIN/4873113296/waraigahosh07-22/ref=nosim/" name="amazletlink" target="_blank">JavaScript 第5版</a>>で始めましたが、とっかかりとしては難しく感じました。<br /> <a href="http://www.amazon.co.jp/exec/obidos/ASIN/4873113733/waraigahosh07-22/ref=nosim/" name="amazletlink" target="_blank"><img src="http://ecx.images-amazon.com/images/I/51yQpI7Yf1L._SL160_.jpg" alt="Head First JavaScript ―頭とからだで覚えるJavaScriptの基本" style="border: none;" /></a></p><br /> <p><Head first <a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a>>がよかったのは、<br /> 説明がわかりやすい・そして <a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a>のしくみを教えてくれるという2点です。<br /> カンタンな本になるとただのサンプル集だったりして コピペしかできなかったりしますが<br /> <Head first <a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a>>はそこまで難しくないのにコードが書けるようになると思います。<br /> しかも、DOMや<a class="keyword" href="http://d.hatena.ne.jp/keyword/Ajax">Ajax</a>など<a class="keyword" href="http://d.hatena.ne.jp/keyword/mixi%A5%A2%A5%D7%A5%EA">mixiアプリ</a>開発に必要な技術もわかりやすく説明してあります。</p><br /> <p>ただ<Head first <a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a>>では説明していないこともあるので<br /> 必要なものは他で補う必要があると思います。<br /> <a href="#f-94c4d153" name="fn-94c4d153" title="クロージャや継承は説明なかったと思います。ちゃんと読んでないだけかも><">*1</a></p><p>そうそう。弾さんもおすすめしてましたよ。わたしなんかより説得力あるわー。<br /> <a href="http://blog.livedoor.jp/dankogai/archives/51092934.html">http://blog.livedoor.jp/dankogai/archives/51092934.html</a><br /> </p> </div> <div class="section"> <h4><a class="keyword" href="http://d.hatena.ne.jp/keyword/OpenSocial">OpenSocial</a></h4> <p><span itemscope itemtype="http://schema.org/Photograph"><a href="http://f.hatena.ne.jp/kumapo/20110125044517" class="hatena-fotolife" itemprop="url"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/k/kumapo/20110125/20110125044517.gif" alt="f:id:kumapo:20110125044517g:image" title="f:id:kumapo:20110125044517g:image" class="hatena-fotolife" itemprop="image"></a></span><br /> <a class="keyword" href="http://d.hatena.ne.jp/keyword/mixi%A5%A2%A5%D7%A5%EA">mixiアプリ</a>は<a class="keyword" href="http://d.hatena.ne.jp/keyword/OpenSocial">OpenSocial</a>コンテナからマイミク情報を取得します。<br /> コンテナとのやりとりの規格が<a class="keyword" href="http://d.hatena.ne.jp/keyword/OpenSocial">OpenSocial</a>です。</p><br /> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/OpenSocial">OpenSocial</a>を学ぶには、<<a class="keyword" href="http://d.hatena.ne.jp/keyword/mixi">mixi</a> Developer Center>の<技術仕様>で十分と思います。<br /> 当時は内容こんなに充実してなかったよね?なんだかなあ。<br /> <a href="http://developer.mixi.co.jp/appli">http://developer.mixi.co.jp/appli</a></p><br /> <p>ただ<技術仕様>だと<a class="keyword" href="http://d.hatena.ne.jp/keyword/API">API</a>の詳細が知りたくなったときに困るので<br /> 必要に応じて<<a class="keyword" href="http://d.hatena.ne.jp/keyword/OpenSocial">OpenSocial</a> <a class="keyword" href="http://d.hatena.ne.jp/keyword/API">API</a> リファレンス>を参照していました。<br /> <a href="http://code.google.com/intl/ja/apis/opensocial/docs/0.8/reference/">http://code.google.com/intl/ja/apis/opensocial/docs/0.8/reference/</a></p><br /> <p>先に勉強しておけばよかったと後悔したのは、<a class="keyword" href="http://d.hatena.ne.jp/keyword/mixi">mixi</a>の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D1%A1%BC%A5%DF%A5%C3%A5%B7%A5%E7%A5%F3">パーミッション</a>モデルです。<br /> <a class="keyword" href="http://d.hatena.ne.jp/keyword/mixi">mixi</a>では、ユーザの情報のうちアプリが取得できる情報を制限しています。<br /> たとえば、Viewerがアプリをインストールしていない場合 Viewerのマイミク情報を取得できません。<br /> <a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D1%A1%BC%A5%DF%A5%C3%A5%B7%A5%E7%A5%F3">パーミッション</a>モデルを理解していないことで、何度かハマってしまいました。<br /> <a href="http://developer.mixi.co.jp/appli/spec/pc/permission_model">http://developer.mixi.co.jp/appli/spec/pc/permission_model</a><br /> </p> </div> <div class="section"> <h4>外部サーバ</h4> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/mixi%A5%A2%A5%D7%A5%EA">mixiアプリ</a>には外部サーバも不可欠です。<br /> 外部サーバはアプリのデータを保存しておくのに使います。</p> </div> <div class="section"> <h4><a class="keyword" href="http://d.hatena.ne.jp/keyword/Ruby%20on%20Rails">Ruby on Rails</a></h4> <p><span itemscope itemtype="http://schema.org/Photograph"><a href="http://f.hatena.ne.jp/kumapo/20110125044510" class="hatena-fotolife" itemprop="url"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/k/kumapo/20110125/20110125044510.png" alt="f:id:kumapo:20110125044510p:image" title="f:id:kumapo:20110125044510p:image" class="hatena-fotolife" itemprop="image"></a></span><br /> 外部サーバのwebフレームワークには、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Ruby%20on%20Rails">Ruby on Rails</a>を使いました。<br /> 理由は、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Ruby">Ruby</a>と<a class="keyword" href="http://d.hatena.ne.jp/keyword/Rails">Rails</a>をかじったことがあったからです。それだけ。<br /> ちなみに、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Java">Java</a>も<a class="keyword" href="http://d.hatena.ne.jp/keyword/Python">Python</a>も<a class="keyword" href="http://d.hatena.ne.jp/keyword/PHP">PHP</a>もできないのは内緒です。</p><br /> <p>サーバサイドはいくつか選択肢があるので、<br /> なじみの言語と<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D5%A5%EC%A1%BC%A5%E0%A5%EF%A1%BC%A5%AF">フレームワーク</a>を使うのが手っ取り早いはずです。</p><br /> <p>開発事例の多さで言うと <a class="keyword" href="http://d.hatena.ne.jp/keyword/Java">Java</a>は<a class="keyword" href="http://d.hatena.ne.jp/keyword/Slim3">Slim3</a>(と<a class="keyword" href="http://d.hatena.ne.jp/keyword/Google%20App%20Engine">Google App Engine</a>)<br /> <a href="#f-475cbb4f" name="fn-475cbb4f" title="http://d.hatena.ne.jp/kaw0909/20101027/1288137380">*2</a>,<a href="#f-4f0e466e" name="fn-4f0e466e" title="http://d.hatena.ne.jp/funyamora/20100419/1271633548">*3</a>で、<br /> <a class="keyword" href="http://d.hatena.ne.jp/keyword/PHP">PHP</a>は<a class="keyword" href="http://d.hatena.ne.jp/keyword/Zend%20Framework">Zend Framework</a><a href="#f-ef4868bd" name="fn-ef4868bd" title="記憶スケッチ">*4</a>,<a href="#f-867dce8d" name="fn-867dce8d" title="ようこそマイキッチン">*5</a>の事例がわたしの読んだかぎり多いです。</p> </div> <div class="section"> <h4>rackspace cloud</h4> <p><span itemscope itemtype="http://schema.org/Photograph"><a href="http://f.hatena.ne.jp/kumapo/20110125044511" class="hatena-fotolife" itemprop="url"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/k/kumapo/20110125/20110125044511.png" alt="f:id:kumapo:20110125044511p:image" title="f:id:kumapo:20110125044511p:image" class="hatena-fotolife" itemprop="image"></a></span><br /> 外部サーバは試行錯誤の末、rackspace cloudを選択しました。<br /> <a href="http://www.rackspacecloud.com/cloud_hosting_products/servers/">http://www.rackspacecloud.com/cloud_hosting_products/servers/</a><br /> 当初はさくらの<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EC%A5%F3%A5%BF%A5%EB%A5%B5%A1%BC%A5%D0">レンタルサーバ</a>ーを使っていましたが、<br /> <a class="keyword" href="http://d.hatena.ne.jp/keyword/Rails">Rails</a>の起動にたびたび失敗するため乗り換えました。</p><br /> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%AF%A5%E9%A5%A6%A5%C9">クラウド</a>サービスのなかでもrackspaceを選んだのは、<br /> 費用が安い・<a class="keyword" href="http://d.hatena.ne.jp/keyword/Rails">Rails</a>でデータベースを使いたかったからです。<br /> 実際のところ rackspaceにいくらかかっているかというと<br /> 1ヶ月あたり $10 - $11 (最小構成時)で済んでいます。</p><br /> <p>ただ難点もあります。日本語ドキュメントが少ないことです。<br /> そこで参考にさせていただいた日本語の導入事例を紹介しておきますね。</p><br /> <p>サービス申し込みの手順<br /> <a href="http://d.hatena.ne.jp/rackspace/20100119/1263905011">http://d.hatena.ne.jp/rackspace/20100119/1263905011</a></p><br /> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/CentOS">CentOS</a>の初期設定<br /> <a href="http://maeda.farend.ne.jp/blog/2010/01/13/rackspace-centos-initial-setup/">http://maeda.farend.ne.jp/blog/2010/01/13/rackspace-centos-initial-setup/</a></p><br /> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/apache">apache</a>の設定<br /> <a href="http://d.hatena.ne.jp/rackspace/20100121/1264081209">http://d.hatena.ne.jp/rackspace/20100121/1264081209</a></p><br /> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/FTP">FTP</a>サーバの設定<br /> <a href="http://d.hatena.ne.jp/rackspace/20100213/1266035100">http://d.hatena.ne.jp/rackspace/20100213/1266035100</a></p><br /> <p>イメージのバックアップ手順<br /> <a href="http://d.hatena.ne.jp/rackspace/20100121/1264059046">http://d.hatena.ne.jp/rackspace/20100121/1264059046</a></p><br /> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/Rails">Rails</a>の立ち上げ<br /> <a href="http://maeda.farend.ne.jp/blog/2010/01/16/rackspace-centos-rails-setup/">http://maeda.farend.ne.jp/blog/2010/01/16/rackspace-centos-rails-setup/</a></p><br /> <p>余談。<br /> rackspaceと契約すると ネイティブから身元確認の電話がかかってくるという噂がありました。<br /> わたしも契約後しばらく身構えていたのですが、母からお見合いしないかという電話がかかってきただけです。<br /> ネイティブからはいちどもかかってきていません。英語が苦手な人も臆せず、rackspaceしてみてください。</p><br /> <p>そのほかにもrackspaceはサーバ拡張もカンタンだし・サーバイメージの自動バックアップもできるし、<br /> なんだか流行りの<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%AF%A5%E9%A5%A6%A5%C9">クラウド</a>っぽいし(?)、とにかくおすすめです。</p> </div> <div class="section"> <h4><a class="keyword" href="http://d.hatena.ne.jp/keyword/mixi%A5%A2%A5%D7%A5%EA">mixiアプリ</a>公開申請</h4> <p><span itemscope itemtype="http://schema.org/Photograph"><a href="http://f.hatena.ne.jp/kumapo/20110125044516" class="hatena-fotolife" itemprop="url"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/k/kumapo/20110125/20110125044516.gif" alt="f:id:kumapo:20110125044516g:image" title="f:id:kumapo:20110125044516g:image" class="hatena-fotolife" itemprop="image"></a></span><br /> 公開申請を通さないとアプリは新着のページに掲載されません。<br /> しかも、公開申請しないとアプリを他のユーザが使うのに開発者がいちいち承認しないといけません。</p><br /> <p>ずばり <a class="keyword" href="http://d.hatena.ne.jp/keyword/mixi%A5%A2%A5%D7%A5%EA">mixiアプリ</a>公開の最大の難所は、公開申請だと思っています。いやホントに。</p> </div> <div class="section"> <h4>企画についての<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%AC%A5%A4%A5%C9%A5%E9%A5%A4%A5%F3">ガイドライン</a></h4> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/mixi%A5%A2%A5%D7%A5%EA">mixiアプリ</a>公開の難所は公開申請だというのは<br /> 審査でNGになり アプリをいくつか公開できなかったからです。</p><br /> <p>特に、NGとなる理由が企画自体に対する指摘だと かなり厄介です。<br /> プログラムの実装に対する指摘であればバグを直せばいいだけですが、<br /> アプリの企画、それも趣旨にかかわる指摘だとアプリをお蔵入りさせてしまうことになります。</p><br /> <p>とにかく企画の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%AC%A5%A4%A5%C9%A5%E9%A5%A4%A5%F3">ガイドライン</a>は、開発の最初に読んでおくべきと思います。<br /> <a href="http://developer.mixi.co.jp/appli/policies/apps/guidelines">http://developer.mixi.co.jp/appli/policies/apps/guidelines</a></p><br /> <p>そしてアプリの企画が<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%AC%A5%A4%A5%C9%A5%E9%A5%A4%A5%F3">ガイドライン</a>に沿っているか見極めるには、まず類似の機能を持つアプリを探すのがよいです。<br /> もし、類似の機能を持つアプリが見つかったら 企画的にはOKなはずです。<br /> いっぽう類似のアプリがない場合は、作りこんだ末公開NGになるリスクをつぶすために<br /> なるはやでアプリを公開申請するのがいいと思っています。</p><br /> <p>というのも、アプリを作りこむ前に公開申請をかけて結果的にうまくいった経験があるからです。<br /> マイミク<a class="keyword" href="http://d.hatena.ne.jp/keyword/%C2%E7%B4%EE%CD%F8">大喜利</a>は作りこみ前に公開申請をかけて、いちど申請NGになっています。<br /> しかし、NGになった理由が実装に不備があるというものだったため<br /> 企画的にはOKという自信をもって開発を進めることができました。これが結果的にはよかった。</p><br /> <p>ただ”早くリリースすることも大事なのですが、多少の時間をかけてでも内容的に満足をしてもらえるものを作ることも大事だと思います<a href="#f-b4a1abf0" name="fn-b4a1abf0" title="http://d.hatena.ne.jp/funyamora/20100419/1271633548">*6</a>”という面があるので<br /> 類似のアプリがない場合は公開申請にかける期間と公開直後の完成度の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C8%A5%EC%A1%BC%A5%C9%A5%AA%A5%D5">トレードオフ</a>を見極めないといけないんです。<br /> <br /> </p> </div> <div class="section"> <h4><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%AC%A5%A4%A5%C9%A5%E9%A5%A4%A5%F3">ガイドライン</a>上のアプリの制限事項</h4> <p>アプリ上ユーザに個人情報を入力させることは、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%AC%A5%A4%A5%C9%A5%E9%A5%A4%A5%F3">ガイドライン</a>で禁止されています。<br /> ですので、他の<a class="keyword" href="http://d.hatena.ne.jp/keyword/web%A5%B5%A1%BC%A5%D3%A5%B9">webサービス</a>のID・パスワードをアプリ上で入力させることはできません。</p><br /> <p>このように、技術的には可能であってもアプリの機能が<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%AC%A5%A4%A5%C9%A5%E9%A5%A4%A5%F3">ガイドライン</a>で制約されることがあります。<br /> <a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%AC%A5%A4%A5%C9%A5%E9%A5%A4%A5%F3">ガイドライン</a>にはアプリの制限事項も記載してあるので、要チェックです。</p> </div> <div class="section"> <h4>公開後のアプリのカテゴリー</h4> <p>アプリがどのカテゴリーに掲載されるかは、多くのユーザーに使ってもらう上で重要です。<br /> もし”その他”のカテゴリーに掲載されてしまうと、ユーザー数の伸びは期待できません。</p><br /> <p>アプリを”エンターテインメント”などのカテゴリに掲載してもらうには、次の2つがポイントです。<br /> ・アプリの機能を、マイミク同士のコミュニケーションに限定する<br /> ・公開後 カテゴリー変更を申請する</p><br /> <p>マイミク以外のユーザー間でのコミュニケーションが行えるアプリは<br /> その他カテゴリーに掲載すると、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%AC%A5%A4%A5%C9%A5%E9%A5%A4%A5%F3">ガイドライン</a>には記載あります。</p><br /> <p>ただ、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%AC%A5%A4%A5%C9%A5%E9%A5%A4%A5%F3">ガイドライン</a>を守ったとしてもアプリが”そのほか”に掲載されることがあります。ややこしい。<br /> それでも、あきらめるのはまだ早い!<br /> カテゴリ変更申請すると、別のカテゴリーに移してもらえます。<br /> <a href="http://developer.mixi.co.jp/appli/com/change/category">http://developer.mixi.co.jp/appli/com/change/category</a><br /> 実際、マイミク<a class="keyword" href="http://d.hatena.ne.jp/keyword/%C2%E7%B4%EE%CD%F8">大喜利</a>もこの申請をしたあと ”エンターテイメント”のカテゴリに掲載してもらえたのです。</p><br /> <p>せっかくアプリを作ったんだから、多くのひとに使ってもらいたいたい!って人は<br /> 公開後のカテゴリーにも気を配ったほうがよいと思います。</p> </div> <div class="section"> <h4>書かなかったこと</h4> <p>ここまで、わたしが<a class="keyword" href="http://d.hatena.ne.jp/keyword/mixi%A5%A2%A5%D7%A5%EA">mixiアプリ</a>を開発し そして公開するために最低限 勉強しなければならなかったことをまとめました。<br /> ただ、必要最小限なことだけでは 開発において不自由なことがあるのです。残念ながら。</p><br /> <p>特に、個人開発では少ない作業時間でどれだけ効率よく開発できるかが重要だとさいきん実感してます。<br /> そして効率よく開発するには、ライブラリの活用が必須というのがわたしの結論です。</p><br /> <p>ここからは、効率よく開発するためにいまやっていることで・本エントリに詳細に書かなかったことを挙げておきます。</p> </div> <div class="section"> <h4><a class="keyword" href="http://d.hatena.ne.jp/keyword/jQuery">jQuery</a></h4> <p><span itemscope itemtype="http://schema.org/Photograph"><a href="http://f.hatena.ne.jp/kumapo/20110125044518" class="hatena-fotolife" itemprop="url"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/k/kumapo/20110125/20110125044518.png" alt="f:id:kumapo:20110125044518p:image" title="f:id:kumapo:20110125044518p:image" class="hatena-fotolife" itemprop="image"></a></span><br /> <a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a>のDOM操作は<a class="keyword" href="http://d.hatena.ne.jp/keyword/jQuery">jQuery</a>を使うと、コードが簡潔になります。<br /> また、<a class="keyword" href="http://d.hatena.ne.jp/keyword/jQuery">jQuery</a>やっておくと<a class="keyword" href="http://d.hatena.ne.jp/keyword/opensocial">opensocial</a>-<a class="keyword" href="http://d.hatena.ne.jp/keyword/jQuery">jQuery</a>や<a class="keyword" href="http://d.hatena.ne.jp/keyword/jQuery">jQuery</a> UIの前提となる知識が身について<br /> 他のライブラリのとっかかりが<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%E9%A5%AF">ラク</a>になります。</p> </div> <div class="section"> <h4><a class="keyword" href="http://d.hatena.ne.jp/keyword/opensocial">opensocial</a>-<a class="keyword" href="http://d.hatena.ne.jp/keyword/jQuery">jQuery</a></h4> <p><span itemscope itemtype="http://schema.org/Photograph"><a href="http://f.hatena.ne.jp/kumapo/20110125044520" class="hatena-fotolife" itemprop="url"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/k/kumapo/20110125/20110125044520.png" alt="f:id:kumapo:20110125044520p:image" title="f:id:kumapo:20110125044520p:image" class="hatena-fotolife" itemprop="image"></a></span><br /> <a class="keyword" href="http://d.hatena.ne.jp/keyword/opensocial">opensocial</a>-<a class="keyword" href="http://d.hatena.ne.jp/keyword/jQuery">jQuery</a>のTemplateを使うと、gadget.<a class="keyword" href="http://d.hatena.ne.jp/keyword/xml">xml</a>とjsの依存関係を少なくできます。<br /> UIを微調整してもjsをあまり修正しなくてすんだので、おすすめです。<br /> 作者は<a href="http://nakajiman.lrlab.to/">&#x306A;&#x304B;&#x3058;&#x307E;&#x3093;</a>の中嶋さんです。ドキュメントは<a class="keyword" href="http://d.hatena.ne.jp/keyword/%C6%FC%CB%DC%B8%EC%A4%C7%A4%AA%A3%EB">日本語でおk</a>。すばらしい。<br /> <a href="http://code.google.com/p/opensocial-jquery/">http://code.google.com/p/opensocial-jquery/</a><br /> </p> </div> <div class="section"> <h4><a class="keyword" href="http://d.hatena.ne.jp/keyword/jQuery">jQuery</a> UI</h4> <p>男子も<a class="keyword" href="http://d.hatena.ne.jp/keyword/mixi%A5%A2%A5%D7%A5%EA">mixiアプリ</a>も見た目は大事です。たぶん。<br /> マイミク<a class="keyword" href="http://d.hatena.ne.jp/keyword/%C2%E7%B4%EE%CD%F8">大喜利</a>では、UIをカッチョよくするのに <a class="keyword" href="http://d.hatena.ne.jp/keyword/jQuery">jQuery</a> UIを使っています。</p> </div> <div class="section"> <h4>さいごに</h4> <p>わたしが作った<a class="keyword" href="http://d.hatena.ne.jp/keyword/mixi%A5%A2%A5%D7%A5%EA">mixiアプリ</a>をそろそろ紹介させてください。後生ですから。</p><br /> <p><<a href="http://mixi.jp/view_appli.pl?id=21611">&#x30DE;&#x30A4;&#x30DF;&#x30AF;&#x5927;&#x559C;&#x5229;</a>>といいます。<br /> いわゆる「写真でひと言」をマイミク同士で楽しむアプリです。<br /> <iframe width="420" height="315" src="https://www.youtube.com/embed/_bGzxcvypLY?wmode=transparent" frameborder="0" allowfullscreen></iframe></p><br /> <p>このアプリを通して、ボケることが楽しいんだってことを<br /> もっとみんなに知ってほしいもらえたら うれしいです。</p> </div> <div class="section"> <h4>というわけで</h4> <p>もし<マイミク<a class="keyword" href="http://d.hatena.ne.jp/keyword/%C2%E7%B4%EE%CD%F8">大喜利</a>>に興味をお持ちの方がいらっしゃいましたら</p> <blockquote> <p>alsokumapo+ohgiri[atmark]<a class="keyword" href="http://d.hatena.ne.jp/keyword/gmail.com">gmail.com</a></p> </blockquote> <p>までご連絡ください。<br /> グッドルッキング女子からのご連絡も大歓迎です!たぶん</p><p><script src="http://www.gmodules.com/ig/ifr?url=http://www.kawaz.jp/tmp/mixi_check/gadget.xml&amp;synd=open&amp;w=130&amp;h=25&amp;title=&amp;border=%23ffffff%7C0px%2C0px+solid+%23ffffff&amp;output=js"></script></p> </div><div class="footnote"> <p class="footnote"><a href="#fn-94c4d153" name="f-94c4d153" class="footnote-number">*1</a><span class="footnote-delimiter">:</span><span class="footnote-text"><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%AF%A5%ED%A1%BC%A5%B8%A5%E3">クロージャ</a>や継承は説明なかったと思います。ちゃんと読んでないだけかも><</span></p> <p class="footnote"><a href="#fn-475cbb4f" name="f-475cbb4f" class="footnote-number">*2</a><span class="footnote-delimiter">:</span><span class="footnote-text"><a href="http://d.hatena.ne.jp/kaw0909/20101027/1288137380">http://d.hatena.ne.jp/kaw0909/20101027/1288137380</a></span></p> <p class="footnote"><a href="#fn-4f0e466e" name="f-4f0e466e" class="footnote-number">*3</a><span class="footnote-delimiter">:</span><span class="footnote-text"><a href="http://d.hatena.ne.jp/funyamora/20100419/1271633548">http://d.hatena.ne.jp/funyamora/20100419/1271633548</a></span></p> <p class="footnote"><a href="#fn-ef4868bd" name="f-ef4868bd" class="footnote-number">*4</a><span class="footnote-delimiter">:</span><span class="footnote-text">記憶スケッチ</span></p> <p class="footnote"><a href="#fn-867dce8d" name="f-867dce8d" class="footnote-number">*5</a><span class="footnote-delimiter">:</span><span class="footnote-text">ようこそマイキッチン</span></p> <p class="footnote"><a href="#fn-b4a1abf0" name="f-b4a1abf0" class="footnote-number">*6</a><span class="footnote-delimiter">:</span><span class="footnote-text"><a href="http://d.hatena.ne.jp/funyamora/20100419/1271633548">http://d.hatena.ne.jp/funyamora/20100419/1271633548</a></span></p> </div> kumapo お知らせ。 hatenablog://entry/17680117126972417285 2011-01-20T00:00:00+09:00 2019-02-19T23:52:36+09:00 マイミク大喜利を公開しましたの続きは 25日(火)更新とさせてください。 <p><a href="http://d.hatena.ne.jp/kumapo/20110117#1295283529">&#x30DE;&#x30A4;&#x30DF;&#x30AF;&#x5927;&#x559C;&#x5229;&#x3092;&#x516C;&#x958B;&#x3057;&#x307E;&#x3057;&#x305F;</a>の続きは<br /> 25日(火)更新とさせてください。</p> kumapo マイミク大喜利を公開しました。 hatenablog://entry/17680117126972417314 2011-01-17T00:00:00+09:00 2019-02-19T23:52:37+09:00 さっそくだけど mixiアプリ<マイミク大喜利>を公開したよ!! いわゆる「写真でひと言*1」をマイミク同士でおこなうアプリです。 現在 エンタテイメントのカテゴリにて絶賛公開中なんだからねッ。早分かりのデモ動画をご用意しましたので どうか顔だけでも見てやってください。 何ができるの? お題の写真に対して、ひと言ボケを投稿できます。 それを見たマイミクさんが「おもしろい!」と思ったら <いいね!> が付くと思うよ。 で、どうやって始めるの? アプリを使うには、マイミク大喜利のページで<今すぐはじめる>をクリックします。それだけ。 じゃ、お父さん 見守っててあげるから、下のリンクから今すぐはじめ… <p><span itemscope itemtype="http://schema.org/Photograph"><a href="http://f.hatena.ne.jp/kumapo/20110111021153" class="hatena-fotolife" itemprop="url"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/k/kumapo/20110111/20110111021153.jpg" alt="f:id:kumapo:20110111021153j:image" title="f:id:kumapo:20110111021153j:image" class="hatena-fotolife" itemprop="image"></a></span><br /> さっそくだけど <a class="keyword" href="http://d.hatena.ne.jp/keyword/mixi%A5%A2%A5%D7%A5%EA">mixiアプリ</a><<a href="http://mixi.jp/view_appli.pl?id=21611">&#x30DE;&#x30A4;&#x30DF;&#x30AF;&#x5927;&#x559C;&#x5229;</a>>を公開したよ!!<br /> いわゆる「写真でひと言<a href="#f-96bfcadc" name="fn-96bfcadc" title="一枚の人物や動物などの写真に対し、台詞や言葉で笑いに導く">*1</a>」をマイミク同士でおこなうアプリです。 <br /> 現在 エンタテイメントのカテゴリにて絶賛公開中なんだからねッ。</p><p>早分かりのデモ動画をご用意しましたので どうか顔だけでも見てやってください。<br /> <iframe width="420" height="315" src="https://www.youtube.com/embed/_bGzxcvypLY?wmode=transparent" frameborder="0" allowfullscreen></iframe><br /> </p> <div class="section"> <h4>何ができるの?</h4> <p>お題の写真に対して、ひと言ボケを投稿できます。<br /> それを見たマイミクさんが「おもしろい!」と思ったら <いいね!> が付くと思うよ。 </p> </div> <div class="section"> <h4>で、どうやって始めるの?</h4> <p>アプリを使うには、<a href="http://mixi.jp/view_appli.pl?id=21611">&#x30DE;&#x30A4;&#x30DF;&#x30AF;&#x5927;&#x559C;&#x5229;&#x306E;&#x30DA;&#x30FC;&#x30B8;</a>で<今すぐはじめる>をクリックします。それだけ。<br /> じゃ、お父さん 見守っててあげるから、下のリンクから今すぐはじめて ごらん。<br /> <a href="http://mixi.jp/view_appli.pl?id=21611">http://mixi.jp/view_appli.pl?id=21611</a><br /> </p> </div> <div class="section"> <h4>使い方が分からないYO!!</h4> <p>そう言うだろうと思って 早分かりのデモ動画を他にもご用意しておきましたよ!</p><br /> <p>デモ動画はこちら。</p> <ol> <li>ボケる:<iframe width="420" height="315" src="https://www.youtube.com/embed/_bGzxcvypLY?wmode=transparent" frameborder="0" allowfullscreen></iframe></li> <li>いいね!をつける:<iframe width="420" height="315" src="https://www.youtube.com/embed/Qp8ZfbJ2v9E?wmode=transparent" frameborder="0" allowfullscreen></iframe></li> <li>自分のボケのいいね!を確認する:<自分のボケを見る>のタブを選択するだけッスよ</li> </ol><p><br /> もっと詳しい使い方は下のページで説明してます。はい。<br /> <a href="http://mixi.jp/view_appli.pl?id=21611">http://mixi.jp/view_appli.pl?id=21611</a><br /> </p> </div> <div class="section"> <h4>なんでこんなフザけたアプリ作ったの?</h4> <p>フザけた顔してますが それは生まれつきです。すんません。</p><br /> <p>アプリを作った動機は、おもしろいことを考え出すってことが<br /> 実はおもしろいってことをもっと共有したかったからです。<br /> 世の中 お笑いブームだけど、笑いをただ消費するだけじゃ つまらないじゃな<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%AB">イカ</a>!!</p><br /> <p>だもんで、アプリは<br /> 誰でもボケやすい・フィードバックが付けやすいことを考えて作りました。</p> </div> <div class="section"> <h4>使ってみたんだけど…</h4> <p>まだまだ buggy でいたらない点もあると思いますが、たくさんフィードバック(もちろん不満も)がもらえると うれしいです。</p><br /> <p>アプリに対するご意見・ご不満・お怒り・<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A4%B5%A4%DE%A4%E8%A4%A8%A4%EB%C1%F3%A4%A4%C3%C6%B4%DD">さまよえる蒼い弾丸</a>はこちらから。</p> <ul> <li><a class="keyword" href="http://d.hatena.ne.jp/keyword/mixi">mixi</a>コミュニティ マイミク<a class="keyword" href="http://d.hatena.ne.jp/keyword/%C2%E7%B4%EE%CD%F8">大喜利</a>サポート => <a href="http://mixi.jp/view_community.pl?id=5406298">http://mixi.jp/view_community.pl?id=5406298</a></li> <li><a class="keyword" href="http://d.hatena.ne.jp/keyword/twitter">twitter</a> => [<a class="keyword" href="http://d.hatena.ne.jp/keyword/twitter">twitter</a>:@also_kumapo]</li> </ul> </div> <div class="section"> <h4>ちなみに、どうやって作ったの?</h4> <ul> <li><a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a>/<a class="keyword" href="http://d.hatena.ne.jp/keyword/jQuery">jQuery</a>/<a class="keyword" href="http://d.hatena.ne.jp/keyword/opensocial">opensocial</a>-<a class="keyword" href="http://d.hatena.ne.jp/keyword/jQuery">jQuery</a></li> <li>rackspace cloud</li> <li><a class="keyword" href="http://d.hatena.ne.jp/keyword/Ruby%20on%20Rails">Ruby on Rails</a></li> </ul><p>でもって作りました。</p><br /> <p>え?技術的なことはお腹いっぱいですか。そうですか。<br /> んじゃ、技術的なことは稿を改めて書くねー。</p> </div> <div class="section"> <h4>というわけで</h4> <p>つづきます<a href="#f-2a9f60e7" name="fn-2a9f60e7" title="あさって木曜日につづきます">*2</a>。</p><p><script src="http://www.gmodules.com/ig/ifr?url=http://www.kawaz.jp/tmp/mixi_check/gadget.xml&amp;synd=open&amp;w=130&amp;h=25&amp;title=&amp;border=%23ffffff%7C0px%2C0px+solid+%23ffffff&amp;output=js"></script></p> </div><div class="footnote"> <p class="footnote"><a href="#fn-96bfcadc" name="f-96bfcadc" class="footnote-number">*1</a><span class="footnote-delimiter">:</span><span class="footnote-text">一枚の人物や動物などの写真に対し、台詞や言葉で笑いに導く</span></p> <p class="footnote"><a href="#fn-2a9f60e7" name="f-2a9f60e7" class="footnote-number">*2</a><span class="footnote-delimiter">:</span><span class="footnote-text">あさって木曜日につづきます</span></p> </div> kumapo テレビで Remember The Milk したい! hatenablog://entry/17680117126972417356 2009-06-25T00:00:00+09:00 2019-02-19T23:52:38+09:00 ブラビア上で動く Remember The Milk のウィジェットを作ったよ! "RTM on couch" といいます。 とりあえず、デモ動画がありますので まあ、どうぞどうぞ。 何ができるの? テレビを観ながら Remember The Milk の TODO も見れます。 TODOを完了にすることも、延期することもできます。 たとえば、「王様のブランチ観てたら "結婚式に参加のメールを返す" の TODO が目についたので ケータイで返信して TODO は即完了」って できます。 で、どうやって使うの? 使いかたは、個人開発アプリサイトに行ってダウンロードするだけです。 まず、ブラビア… <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D6%A5%E9%A5%D3%A5%A2">ブラビア</a>上で動く <a class="keyword" href="http://d.hatena.ne.jp/keyword/Remember%20The%20Milk">Remember The Milk</a> の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A6%A5%A3%A5%B8%A5%A7%A5%C3%A5%C8">ウィジェット</a>を作ったよ!<br /> "<a href="http://www.jp.sonystyle.com/Taiken/Original/Applicast/develop_use.html">RTM on couch</a>" といいます。</p><br /> <p>とりあえず、デモ動画がありますので まあ、どうぞどうぞ。<br /> <iframe width="420" height="315" src="https://www.youtube.com/embed/uaW7bBnPXNU?wmode=transparent" frameborder="0" allowfullscreen></iframe><br /> </p> <div class="section"> <h4>何ができるの?</h4> <p>テレビを観ながら <a class="keyword" href="http://d.hatena.ne.jp/keyword/Remember%20The%20Milk">Remember The Milk</a> の TODO も見れます。<br /> TODOを完了にすることも、延期することもできます。</p><br /> <p>たとえば、「王様のブランチ観てたら "結婚式に参加のメールを返す" の TODO が目についたので ケータイで返信して TODO は即完了」って できます。</p> </div> <div class="section"> <h4>で、どうやって使うの?</h4> <p>使いかたは、個人開発アプリサイトに行ってダウンロードするだけです。</p><br /> <p>まず、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D6%A5%E9%A5%D3%A5%A2">ブラビア</a>のブラウザに "<span style="font-style:italic;"><a href="http://www.jp.sonystyle.com/Taiken/Appli/">http://www.jp.sonystyle.com/Taiken/Appli/</a></span>" と URL を打ちこめ。<a href="#f-eacfaf37" name="fn-eacfaf37" title="詳しい解説と対応機種はこちらにあります。[http://www.jp.sonystyle.com/Taiken/Original/Applicast/setting.html#setting_tv">*1</a></p><p>そして、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A2%A5%D7%A5%EA%A5%AD%A5%E3%A5%B9%A5%C8">アプリキャスト</a>の投稿作品から "RTM on <a class="keyword" href="http://d.hatena.ne.jp/keyword/couch">couch</a>" を起動だ!<br /> あとはデモ動画をご覧になってくださいね。</p> </div> <div class="section"> <h4>どんなしくみなの?</h4> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D6%A5%E9%A5%D3%A5%A2">ブラビア</a>の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A2%A5%D7%A5%EA%A5%AD%A5%E3%A5%B9%A5%C8">アプリキャスト</a>でやってます。<br /> 参考にさせていただいたサイトを挙げておきますね。<a href="#f-c39c06c0" name="fn-c39c06c0" title="http://www.geekpage.jp/cgi-bin/tb.cgi?id=2008/9/16/1">*2</a> <a href="#f-62d3065a" name="fn-62d3065a" title="http://www.ideaxidea.com/archives/2008/12/10_9.html">*3</a><br /> </p> </div> <div class="section"> <h4>使ってみたんだけど…</h4> <p>まだまだ buggy でいたらない点もあると思いますが、たくさんフィードバック(もちろん不満も)がもらえると うれしいです。</p> </div> <div class="section"> <h4>ところで、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Remember%20The%20Milk">Remember The Milk</a> って誰?</h4> <p>残念ながら グッドルッキング女子の名前ではないです。<br /> Webアプリケーションの名前です。でも、便利すぎて 愛しいぐらいです。<br /> <a class="keyword" href="http://d.hatena.ne.jp/keyword/Remember%20The%20Milk">Remember The Milk</a> を使うと "やること(TODO)リスト" をコンピュータやらケータイやらで管理できるんですよ<a href="#f-61930dea" name="fn-61930dea" title="Remember The Milk の便利な使いかたは http://blog.rememberthemilk.jp/2008/07/31/196/ と http://de-lab.com/article/rememberthemilk-love/ に詳しいよ">*4</a>。</p> </div><div class="footnote"> <p class="footnote"><a href="#fn-eacfaf37" name="f-eacfaf37" class="footnote-number">*1</a><span class="footnote-delimiter">:</span><span class="footnote-text">詳しい解説と対応機種はこちらにあります。[<a href="http://www.jp.sonystyle.com/Taiken/Original/Applicast/setting.html#setting_tv">http://www.jp.sonystyle.com/Taiken/Original/Applicast/setting.html#setting_tv</a></span></p> <p class="footnote"><a href="#fn-c39c06c0" name="f-c39c06c0" class="footnote-number">*2</a><span class="footnote-delimiter">:</span><span class="footnote-text"><a href="http://www.geekpage.jp/cgi-bin/tb.cgi?id=2008/9/16/1">http://www.geekpage.jp/cgi-bin/tb.cgi?id=2008/9/16/1</a></span></p> <p class="footnote"><a href="#fn-62d3065a" name="f-62d3065a" class="footnote-number">*3</a><span class="footnote-delimiter">:</span><span class="footnote-text"><a href="http://www.ideaxidea.com/archives/2008/12/10_9.html">http://www.ideaxidea.com/archives/2008/12/10_9.html</a></span></p> <p class="footnote"><a href="#fn-61930dea" name="f-61930dea" class="footnote-number">*4</a><span class="footnote-delimiter">:</span><span class="footnote-text"><a class="keyword" href="http://d.hatena.ne.jp/keyword/Remember%20The%20Milk">Remember The Milk</a> の便利な使いかたは <a href="http://blog.rememberthemilk.jp/2008/07/31/196/">http://blog.rememberthemilk.jp/2008/07/31/196/</a> と <a href="http://de-lab.com/article/rememberthemilk-love/">http://de-lab.com/article/rememberthemilk-love/</a> に詳しいよ</span></p> </div> kumapo はじめましてのごあいさつ。 hatenablog://entry/17680117126972417381 2006-11-12T00:00:00+09:00 2019-02-19T23:52:39+09:00 mixiに書こうと思わない文章を書きます。はじめまして、kumapoです。 <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/mixi">mixi</a>に書こうと思わない文章を書きます。</p><p>はじめまして、kumapoです。</p> kumapo