2011/02 | 2011/03 | 2011/04
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

2011年3月 2日

いいね！つながり可視化Webアプリ

かねてから作っていた、Facebookの「いいね！」を数えるWebアプリが形になった‼ といってもまだちゃんと作り込めてないんやけどね。Firefoxから見ると↓な感じ。

jQuery Mobileを使って作りました。下の画面がトップになっていて、リストから「Like connection」を選択すると、上の様に自分が過去にした投稿(30日以内もしくは最大50件)について、「いいね！」してくれた友達を「いいね！」の数が多い順に並べて表示します。友達のところをクリックすると、その友達が「いいね！」した投稿の内訳も見ることができます。

Facebook Like Counterです、試してみてください。対応ブラウザは、一応スマートフォン(Android, iPhone)、Firefox、Chromeにしています(IE8で見たらおかしなことになっていたので外しました…)。

EXPERIAから見ると、上の様に見えます。

明け方に一度試しにURLを載せてみたら、半日も経たないうちに「いいね！」が50も付いて、本当にビックリした。みんな見てくれるんだと嬉しかったです、ありがとう！
※くろけんさんが「こんなアプリないかな～」と投稿したのを見て、「あ、ちょっと急がな」と約10分後に画像のUpを焦ってやってしまったのが本当のところやけどね…(笑

▲top

投稿者 ただ : 21:32 | トラックバック (0) カテゴリー ; PinMarch Software , プログラミングとか

2011年3月 6日

fb:likeが使えない

「いいね！」つながり可視化アプリをEXPERIAで確認してるときに気がついたことがあって。

XHTML(FBML)でfb:likeというタグを使うと「いいね！」ボタンが表示されるようになってるんやけど、どうもこいつを使うといけないっぽいことが分かってきた。どういうことかというと、Android(2.1)のWebView(ブラウザ)でこのfb:likeを表示すると横幅がどんどん広くなっていって、終いにはブラウザが落ちる。

最初はなんでどんどん横幅が広くなっていってるのか分からんかったんやけど、どうやら再帰的にページのロードが行われてる状態になる。その過程で横幅が押し広げられて、オーバーフローしたブラウザが落ちる。他の何かとの相性(もちろん真っ先に疑うはjQuery)かとも思って、単純なページを作っても見たものの、やっぱり落ちる。iPhoneじゃおかしな挙動の報告はなかったのになー。

今のところ、<iframe>で対応。なんか自分的には許せないけど、iframe。

思い切って開発者フォーラムに投稿してみたんやけど…返答来るかなぁ。

▲top

投稿者 ただ : 22:10 | トラックバック (0) カテゴリー ; プログラミング単語帳 , プログラミングとか

2011年3月 7日

GPS情報をHTML5で

HTML5だと位置情報が簡単に取得できるというので、参考書片手にちょっとやってみた。ほんまにjavascriptだけやったからビックリした。

<script type="text/javascript" src="/jq/jquery-1.5.1.min.js"></script>
<script type="text/javascript">
window.onload = function() {
  if (navigator.geolocation == undefined) {
    $('#position').text = 'GPS is unavailable';
  } else {
    navigator.geolocation.getCurrentPosition(
      function (position) {
        $('#position').text('('+position.coords.latitude+', '+position.coords.longitude+')');
      },
      function (err) {
        $('#position').text('Error! '+err.code+': '+err.message);
      }
    );
  }
};
</script>

しかし、そう簡単に行くわけもなく…。位置情報が表示されないどころか、普通なら出てくるはずの位置情報を提供していいかの確認画面さえも出てこない。おまけに表示されるのはエラー(User denied)。どうなってるのかさっぱりわからんかったけど、調べた挙句行き着いたのがAndoridのブラウザのGears対応状況(ref. html5-developers-jp Google groups)。

ちなみに、XperiaのGPSはGearsを使っています。なので、Gearsを有効にしていないとGPSが機能しないそうです。
http://twitter.com/tamagawa_ryuji/status/12261325883 →
http://twitter.com/tenki_koda/status/12266077238 →
http://twitter.com/tamagawa_ryuji/status/12331400869
というわけで、決してネガティブな情報ではないよ、と申し添えておきます。

なるほどー。(リンク先を読んで)ブラウザの設定かと気がつく。

ブラウザのメニュー(田)から「設定」→「位置情報を有効にする」にチェックを入れると、リロードした時に位置情報を提供するかどうかの確認が表示される。

▲top

投稿者 ただ : 21:19 | トラックバック (0) カテゴリー ; PinMarch Software , PinMarch Samples , プログラミングとか

2011年3月10日

jQuery Mobileのlistviewに弄ばれる

jQuery Mobileを使って、先般のLike Counterは作ったんですが、お手軽にそれなりのUIが作れるので便利です。ライブラリの使い方も、jQuery Mobile の紹介(ref. IBM)などもあったりと、資料はそこそこ揃っていて、単純なサイト構築なら、全然問題なく作れちゃうところがいい。

しかし、ちょっと踏み込んだことをしようとすると、途端に難しくなるのもjQuery Mobile…。Like Counterは「いいね！」をしてくれた友達をその数が多い順番にli要素で並べてくわけやけど、あまりに友達の数が多いとli要素の数が大変な数になってしまうことも考えられるわけで、動的に表示できるようにしないとレンダリングにも時間がかかってしまうだろうということで、20人ずつで区切って表示するようにしようと思ったわけですがそれがまた面倒なこと面倒なこと。

jQuery Mobile で listview へ要素を動的追加(ref. ただのメモ)にあったように、下記のようなコードにしてみたりもしたけど、動的にliを追加することはできず。本当はコーナーが丸まってないリストにしたいのに、丸まってない状態ではスタイルがもっとおかしなことになる。

var listviewItems = $('ul'); // listview を実行済みの list
var nextItems = $('<ul></ul>');
nextItems.append('<li>test1</li>');
nextItems.append('<li>test2</li>');
listviewItems.find('li:last').removeClass("ui-corner-bottom");
nextItems.data('inset', 'true').listview();
nextItems.find('li:first').removeClass("ui-corner-top");
nextItems.find('li').appendTo(listviewItems);

犬グッズは、ちゃんと表示されてるのに、なんでー‼ と悩み続ける。

結局、ul要素を作った中にまずダミーのliを入れておいて(ヘッダー部分に相当)、liを20個詰め込み、詰め込んだliを挿入したいul要素の最後尾に追加した後にlistview('refresh')する方法に行き着いた。なんでか、単純にlistview('refresh')をするとエラーが起こって止まるとか謎な現象に長らく引っかかったりと大変やった。

  li_parent = $('<ul><li>dummy</li></ul>');
  $.each(items.splice(0, 20), function(idx, item) {
    txt = '<li class="like_person">アイテムの中身</li>';
    li_txt = $(txt);
    txt = '<ul>';
    $.each(item.posts, function(idx_post, post) {
      txt = txt+'<li data-icon="grid"><a data-rel="back">'+post+'</a></li>';
    });
    txt = txt+'</ul>';
    li_txt.append($(txt)).appendTo(li_parent);
  });
  li_parent.find('li:first').remove();
  li_parent.find('.like_person').appendTo(pos_element); /* pos_elementが最終的に表示するul要素 */
  pos_element.listview('refresh');

あと、Ajaxで読み込む方式の場合はjavascriptが最初のページで全部用意しておかないと、後から読み込むページに書いてても無視されるとか。ちょっと手を入れようと思ったら結構邪魔くさいね。

jQuery Mobile リンク構築上の留意事項(ref. billboardtop100 blog)

▲top

投稿者 ただ : 21:39 | トラックバック (0) カテゴリー ; PinMarch Samples , プログラミングとか

2011年3月12日

M9.0の衝撃

ちょうど、地震が起こった金曜日は有休を取っていてその時間、14:46は買い物の帰りで外を歩いていた。そういうわけで、まったく地震が起こったことに気づかずに家に帰ってきたわけやけど、最初に開けたFacebookの画面に「地震」という文字ばかりが流れていてアレは衝撃的だった。関西の人の書き込みにも「揺れた」と書いてあったり、一体どこで地震が起こったのか分からなかった。

Twitterを見ても「地震」の文字が踊っていたわけやけど、火の手が上がってるとか、Facebookも実況中継のような状態で、写真がアップされていく。震源地は関東なのかと思いきや東北の方やと知ってさらに驚いた。テレビをつけてみると、特番体制になっていた。しかし東北地方で地震が起こっているにもかかわらずテレビの映像は首都圏が中心。首都圏でも、千葉のコンビナートで火災が起こっていたり、お台場で火事があったりといろいろ大変なことになっていた。

最初の地震情報はM7.9、このM7.9という数字だけでも阪神淡路の時より大きいのに、米国地質調査研究所がM8.8と津波が来る前の早い段階で発表したのにさらに驚いた。

東日本大震災　Ｍ８．８世界最大級、沿岸に大津波(ref. asahi.com; 3/12 2:35)

そうこうしてる間にもう1つ地震が起こる。今度は茨城沖でM7.3、信じられないぐらいに驚いたし冗談も程々にしろといいたいぐらいに明らかに現実離れしてる現象が、現実に起きている。会社にひとまず電話をすると、実態は掴みかねていたらしいけど、確実に東京の人たちは帰宅難民になるだろうことは予想できた。地震の影響で、電車は止まり、高速道路は通行止、完全に機能不全に陥っている。その様子がTwitter、Facebookではほぼリアルタイムで得ることができた。

テレビをつけて1時間程度すると、津波がやってくる様子がテレビに映し出されるようになり、各地の港や仙台空港が飲み込まれる様子は印象深かった。しかしそれでも、実際にはもっと酷い津波がやってきたところはたくさんあった、だけどほとんどそれらは当日放送されることはなかった。夜になると津波によって広がった石油に引火した火災で火の海と化した気仙沼がずっと流れていた。現地の実際の状況が流れてこないので、火災が先なのか、津波が先なのか全然分からず、ただただみんなが避難した後の火災であることを祈るしかなかった。

東京は帰宅難民の大量発生により、避難所が各地に設営されたり、民間の会社でも社屋を一部開放するなど、「東京マグニチュード8.0」を彷彿とさせる世界が、まさに現実に起こっていた。

▲top

投稿者 ただ : 21:13 | トラックバック (0) カテゴリー ; mein Erbe

2011年3月13日

炊き出しまっぷ携帯検索版ができるまで

地震のあと、様々な情報がTwitter、Facebookに流れてきた。炊き出しまっぷ(その後、東日本版に改称)もその中の1つで、最初に見たのは地震の1日後(土曜日)やったからかなり早い段階でそういった情報が共有されていた事が言える。

簡単にはgoogleのマイマップで作った共有情報で、単純にTwitterのTL上で炊き出し情報を示す#takidashiハッシュタグが付いているツイートを目視で確認し、マップに追加していった情報だという。

最初、あまり情報が整理されていなくて乱立していた状況でこのマップは大変重要な役割を持つなとは思ったんやけど、いかんせんマイマップはPC上でマップと一緒に表示して効果が最大限になるコンテンツなわけで。

やっぱり被災地での状況(停電、落下等の可能性)を考えるとPCを普通に見れるような状況の人は多くないだろうし、そしてスマホの普及率を考えると今、このマップを有効に使える被災地の人はかなり限定されてしまう。さらには、もっと考えないといけないだろう電波が通じるか、ということもその想定に入れなきゃいけないことになるんだが…。

ガラケー(フィーチャーフォン)の現状の使用者率が約7割、という確かどこかで見た記憶で「今必要なんはケータイで検索できることちゃうかなーでも開発スピードが自分にはない…」とまぁ自分のFB上でのシェアしたときのコメントで書いたら、「やろう」と応じてくれた友達がいて、土曜日の昼過ぎから簡単な仕様決め(と言ってもやろうとしてることは単純なのでどこまで盛り込むか、やね)をやって、作り始めた。

最初は、GPSを使って近い所で行われている炊き出し場所をリストアップするということを目指していたわけやけど、僕はこれまで、それぞれケータイサイト経験無し、GPS経験無しやったんで、できそうなことが限られてるわけで。GPSなんて、ケータイキャリア毎に違うとかガラパゴスっぷりに呆れ果ててたからAndroidなりHTML5ばんざーいとか言ってたわけやし。

それでも、半分作ってもらったという感じで、実働10時間ぐらいでGPSではなくて入力して検索するシステムとして作り上げることができて、日曜日の夜には正式に稼働させることができた。僕がやったのはほとんどまっぷを作った方(やまひろさん)とのやり取りぐらいやねんけど、データを使ったサイトを公開することを快諾いただいて本当によかった(データを作る側の協力ではなかったので、ちょっと忍びなかった気持ちがあった)。

動いた時には、東北各県版もできあがっててちょっと慌てたけど…各県版の方も運営者さんに許可を得られて、正式なサービスとして告知してもらえて本当によかった。そしてFacebook上のみんなにも、FacebookだったりTwitterでも広めてもらえて嬉しかったし、やってよかったと思えた。「楽しかった」と書いてしまうとちょっといけないのかも知れないけど、自分が好きなことを本当に活かせたという意味ではそれに勝るものはない。まして、役に立ててもらえるものだと本当に。

人生2回目のハッカソンが、まさか地震直後のサービスになろうとは。

@yamahirowillさん、@WINGS1685さん、ありがとうございました。炊き出しまっぷ携帯検索版はhttp://bit.ly/takidashiです。

▲top

投稿者 ただ : 22:44 | トラックバック (0) カテゴリー ; mein Erbe

2011年3月20日

Rails/GAEの苦悩

GAEを初めて触る練習に何かないかと思っていて、GAEでRailsを動かすってのが確か紹介されていたよなーと記憶を頼りにやってみたけど、全然ダメだった。という話。出オチですまぬが、まぁそういうことだ。

EclipseでGAEプロジェクトを作ろうとすると、JavaとPythonはもちろん作れるのは知っていたけど、Railsはコマンドラインから自分でやらんとあかんのね…

Ruby Freaks Lounge 第16回　Google App Engine上でRailsを動かす(ref. gihyo.jp)とかを見ながらやろうとしてみたものの、まずJRubyのバージョンが1.6.0になってたり。

プロジェクトを作ってみて、script/server.shでローカル環境上で何もしてないプロジェクトを動かす所まではやった。そしてそれをデプロイしてみようとしたら…ファイルサイズ制限(1ファイルあたり)に引っかかってアップロードが失敗する。アップロード時に自動的にjarファイルを分割してくれるオプション(--enable_jar_splitting)があるというのだが、script/publish.shでは--enable_jar_splittingが指定されていない上にオプションスイッチが渡らない。

なんというか…まぁそこまでは分かってやってみたけど、何も触ってないindex.htmlを表示するだけのデプロイまではできた。そこまでやった…。

controllerを作ろうとしたらエラーが発生して進めなかったorz せっかくTwitterと連携させたGAE-Webアプリを作りたかったんやけど残念すぎる。

▲top

投稿者 ただ : 21:45 | トラックバック (0) カテゴリー ; プログラミングとか

2011年3月22日

なーむぅーあーみ だーぁぶーぅつ

あまりに突然のことで驚く意外何も頭になかったんですが、母方の祖母が亡くなりまして。電話がかかってきたのが19日土曜日、起きて風呂から上がったところで着歴に気が付いて、掛け返したら「死んでた」と…。

結構なおばあちゃん子だったので、知らせを受けたときはショック過ぎて頭が真っ白になって…とか、そいうことになるのかと思いきや、現実って不思議なものでまったくそういうことはなく、むしろオロオロしている電話口の母親を落ち着かせるのに神経が向いていて、真っ白になるなんてことは全くなかった。おばあちゃん子だったとは言え、大学に入ってからはそれ以前ほど時間的な関わりは長くなくなっていたこともあって比較的落ち着いて居られたのが大きいかな…。

少々耳が遠くなっていたり、足腰が弱っていたのと白内障でつい数ヶ月前に手術をした以外はボケることもなく本当に「元気」な部類やった。実際、17日には定期を買うために近くの駅まで出かけていて、それが最後の生きた姿で、その後、発作で倒れただろう姿で発見されるまで、1～2日間家の裏で親戚中の誰の目にも留まらないままになっていた。その間も、家の前まで親戚の人は様子を伺いに来ていてはいて、扉の鍵が開いていることを不思議には思っていたものの、ちょうど倒れていた所が死角になっていて気が付かなかったらしい。

死を受け入れること自体は全然問題なかったけれど、やはりどうしても、死に方を受け入れることは難しい。こんなこともあるものだと、必死に噛み締めるしかなかった。

無事、葬儀も終わった…けど寝ずの番は騒ぎすぎた。(笑 ともあれ、本当にお疲れ様でした、との思いしかない。

▲top

投稿者 ただ : 20:13 | トラックバック (0) カテゴリー ; mein Erbe

2011年3月26日

GAE/Pyに挑戦そしてつぶやかせた

GAE+Railsで、TwitterにAPIでアクセスしてつぶやかせるという形態を最初は考えていたけれども、どうにもデプロイとプロジェクトの拡張がうまくいかなくて、結局は「Pythonでええっか」とPythonで進めることにしたのでありました。

で、どうしてTwitterにどうしてGAEからアクセスさせようとしたのかというと、震災で物資が余っている所と不足している所の調整が出来るように、不足しているものと余分にあるものを位置情報付き、かつ連絡先明記の状態でツイートさせようとしたんよね。

Railsでツイートをさせたことはあったけど、位置情報を付加させたことはなくて、GPSも使ったことはない。今回の場合は位置情報を取得するのに、当事者以外が代理で入力出来るようにと思って7桁の郵便番号から緯度経度に変換して、それをツイートに埋め込む形にした。

郵便番号から緯度経度情報を取得するには、既にWebAPIがある(XML-RPCサービス - 郵便専門ネット)ので、それを使わせていただくことに。

そしてTwitterAPIを叩くのには、python-twitterを最初は使っていたものの、なぜだかうまく動かない(後ほど、ファイルキャッシュが使えないので動かない、ということを知る)。悩んだ挙句、最終的にTweepyを使って実装した例が見つかった(GoogleAppEngine-pythonを利用して簡単なtwitterbotを作成する(ref. ドナドナごとごと))ので、tweepyにすることに。

Pythonのライブラリは全部プロジェクトの中に入れてしまわないといけないということが最初よく分かっていなかったままeasy_installでライブラリをインストールしてしまったりしてたもんだから、結構ゴチャゴチャになってしまったけど、なんとかツイートさせることはできた。

そして、今回作ったページはガラケーから送受信するようのWebアプリだったので文字コードをSJISにしないといけない…とかいう変な縛りがあって、意外とこれが厄介やった。GAEの中の処理はたいていutf-8で完結できるようなのが今はほとんどやからなぁ…。

ともあれ、Tweepyのソースコードは全部一緒にGAEに上げないといけないことは分かった。

▲top

投稿者 ただ : 21:20 | トラックバック (0) カテゴリー ; プログラミングとか

2011年3月27日

SP -革命篇-

レイトショーをいつものごとく観に行った、わけやけど…。今回は梅田まで行ったわけでありまして、ええ、往復の電車賃を足すとレイトショーの値段がすっかり帳消しになってしまうという。

いやまぁ、SPやけども。終わり方が終わりでないような、またすっきりしない終わり方やった。結局黒幕は別にいるしなぁ…と。にしても、今の政治そのものに対する投げかけみたいなのがストレートに表れていて個人的にはすっきりしたストーリーやったなぁ。革命かと言われると、革命でないようにも思うけど、今の政治不信と官僚との関係というか、そんなものを描いたような仕上がりになっているなぁ。

今現実に同じようなことをやった人が現れたなら、sengoku38並みに英雄視されるんじゃないかと思う。

▲top

投稿者 ただ : 23:48 | トラックバック (0) カテゴリー ; お出かけ

2011/02 | 2011/03 | 2011/04