ネットサービスの開発に役立ちそうな話題を中心にお届けします。
fkoji.com > F.Ko-Jiの「一秒後は未来」

2012年05月19日 00:28
Meityの2周年を記念してデザインリニューアルをおこないました

スポンサード リンク

Meityは2010年の5月19日にリリースされました。ということは、今日でちょうど2周年ですね!

というわけで、PC版とスマホ版のデザインリニューアルをおこないました!

meity-design-renewal-2012.png

↑ 今の自分のデザインスキルを総動員したw

なんとなく分かると思いますが、両方ともFacebookのUIを意識してます。といってもサイドメニューあたりだけですが。。

今回のデザインリニューアルでやりたかったことは、

  • 今風のそれっぽいデザインにしたい。
  • グローバルメニューがあることに初見の人にも気づかせたい。
  • ロゴをリニューアルしたい。
  • 「メルティ」と読み間違えられるのを避けたい。
  • メッセージ一覧をこの際ひとつにまとめたい。
  • スマホ版をFacebookのようなサイドメニューにしたい。

といった感じです。

機能的な追加は特になく、メッセージ一覧をまとめたくらいなのでメニュー以外の使い勝手は特に変わっていません。

今後は、サイドメニューが使えるようになったことで、そこにも色々と機能追加できるかなと考えてます。

最近はFacebookのイベントが多いかと思いますが、今後とも思い出したかのようにMeityを使っていただけると嬉しいです。

» Meity.jp (メイティ) - TwitterのIDやリストで公開先を指定するメッセージ作成サービス

2012年05月17日 02:31
数十万人にプッシュ通知できる可能性のあるLINE公式アカウント

スポンサード リンク

LINEの勢いがとどまることを知らなくて参ったなって感じなのだけど、最近始まった「有名人のLINE公式アカウント」について、

ということを思った次第。

Twitterで数十万人フォロワーがいたとしても、ツイートしただけでフォロワーにプッシュ通知が届くことは少ないはず。

しかし、LINEだと設定でオフにしていない限りプッシュ通知される。スマホの場合。ガラケーはどうなのか知らない。が、数十万人にプッシュ通知される可能性があるというのは、なかなかすごい状況だと思う。

それがゆえに、Twitterより投稿のさじ加減が難しいかもしれないのだが。

2012年05月14日 09:57
本格的なのに懐かしい「旅するカレー屋 SPOONFUL」のスプンフルチキンカレー

spoonful-1.jpg

写真は以前ケータイ会議で一緒だった @kanakisystem さんとそのお友達が月1回やっている「旅するカレー屋 SPOONFUL-スプンフル-」定番のスプンフルチキンカレー。香辛料がきいててなかなか本格的な味。インド風だそうです。それでいて懐かしい感じもします。

スプンフルのメニューはこのチキンカレーと「今月のカレー」の2種類がありますが、鶏肉好きなのでチキンのほうをいただきました。ハーフサイズもあったので、ハーフで2種類食べるのもよかったかも。

スプンフルは、毎月第2土曜日にだけ入谷にあるtoco.という古民家ゲストハウスにてオープンしています。昼と夜の両方やっていて、夜は半分スタンディングバーです。

ただ7月14日の営業以降は不定期開催になるそうなので、気になる方は公式サイトかTwitterをチェックしてふらりと足をお運びくださいませ。

» 旅するカレー屋 SPOONFUL-スプンフル-
» 旅するカレー屋 spoonful (spoonful00) on Twitter

spoonful-2.jpg

2012年05月13日 23:59
タイフェスではなく大量の太陽のマテ茶とブラジル料理を食べる会に行ってきた

世間的にはタイフェスが大混雑していたみたいですが、今日はねんざさん、むねさださんからお誘いいただいて「ブラジル料理を作って大量の太陽のマテ茶を飲む会」という名の、肉と油とマテ茶のホームパーティーに行ってきました。

» 大量の太陽のマテ茶とブラジル風料理のパーティをやってみました | ねんざブログ
» 大量の太陽のマテ茶×ブラジル料理パーティーを開催! | むねさだブログ

matetea01.jpg

↑ マテ茶だらけ。

以前、「太陽のマテ茶」という商品のブロガー向けイベントがあったようで、そのイベント後に「太陽のマテ茶を24本とブラジル料理のレシピと調味料」をもらったらしく、そういう経緯で今回の会の開催に至ったらしいです。

ちなみに主催2人ともイベントに参加していたので、用意されてたマテ茶はまさかの48本w 参加者12, 3人でしたが1箱なくなったので24本以上は消費されてました。

matetea03.jpg

↑ 肉を焼いたり。

matetea07.jpg

↑ アスパラ切ったり。

matetea05.jpg

↑ 挽肉炒めたり。

matetea08.jpg

↑ 春巻き巻いたり。

matetea04.jpg

↑ 出来上がった料理の一部。

matetea02.jpg

↑ どれも美味しかった!

料理してくれる人がたくさんいたので基本見守っておりました(笑)。春巻き巻いたりしてましたが、春巻きは揚げるのも食べるのも大変な感じで、次春巻きつくる時に活かしたいと思います。はい。

マテ茶が脂っこい肉料理に合う、ということでブラジル料理のレシピが渡されたそうですが、確かに肉の脂っこさを中和してくれる感じはあります。

烏龍茶とか用意してなかったので、他のお茶やドリンクと比べてどうかまではわかんないですが、個人的に焼肉で食べるような脂っこい肉が苦手なので、焼肉屋にマテ茶あったらいいんじゃないかなと思いました。

というわけでお誘いいただいた、ねんざさん、むねさださん、料理してくれたみなさまありがとうございましたー。

» コカ・コーラ新製品発売記念 「太陽のマテ茶と肉料理」試飲会に行ってきたぞ! | むねさだブログ
» コカ・コーラ 太陽のマテ茶 試飲会に参加しました | ねんざブログ

B007BJNZ2S
コカ・コーラ 太陽のマテ茶 500ml×24本

2012年05月12日 12:03
食べログやGoogleマップで正しい場所を指し示せていないお店はお客さんが少ない説

先日待ち合わせで行こうとしたカフェの場所が20分探しても見つからず、ようやく見つけて行ってみたらお客さんが少なくて、実際待ち合わせじゃなかったら行くの諦めてるレベルだよなぁと、まぁ、そんなこともあり得るかなと。

お店が見つからなかった理由は、

  • 食べログとGoogleマップで指し示していた地点がズレていた。
  • 食べログに記載された住所には番地までしか掲載されておらず、どのビルの何階にあるという記載がなかった。

という2点でした。

食べログとGoogleマップで場所がずれていた理由は、その敷地全体が番地まで同じ住所で、しかもその敷地にビルが3個もあったから。

住所検索するとその3個のビルのうち1個しか指し示さず、それは目的のカフェのあるビルではなかったというわけです。

せめて、住所欄に「どのビルの何階にあるか」が書かれてたら迷うことはなかった。

というわけでお店をやっている方は、

  • 食べログやGoogleマップなどが指し示す場所がズレていないか。
  • お店がビル内にある場合は、住所欄にどのビルのどのフロアにあるかまで記載されているか。

といった点を確認しておくと、道に迷って到達をあきらめるお客さんが減るのでいいのではないかと思われます。

逆にお店を隠れ家的にしたい場合は、これを逆手に取って場所を曖昧にしておくといいですかね。

2012年05月10日 16:29
地図を見ながらツイッターできるiPhoneアプリ「MapAnd」を85円に値下げ!

地味に便利だろうと思って開発したiPhoneアプリ「MapAnd」ですが、350円じゃほとんど売れないので85円に値下げしました。

mapand-renew.jpg

多分知らない人も多いと思うのでどんなアプリなのか一言で説明すると、「画面の上半分で地図、下半分でツイッターを見られるアプリ」です。

「マップを見ながら歩いている時に使うTwitterクライアント」という位置づけです。

より詳しくは以下のエントリーをどうぞ。

» 地図とツイッターを同時に見れるiPhoneアプリ「MapAnd」をリリースしました! - F.Ko-Jiの「一秒後は未来」

値下げとあわせて久しぶりにバージョンアップしていますが、機能的なバージョンアップは特になく、今回はTitanium 2.0対応するためにコード全体の書き直しで手一杯。少しバグ修正をしています。

» App Store - MapAnd

2012年05月10日 15:07
preタグの内容をjQueryの.text()で取得するとIEでは改行が消える?

ドットインストールに「ソースコードをコピーしやすくする機能」をつけました。

» ドットインストールでソースコードのコピーがしやすくなりました #dotinstall | IDEA*IDEA

これに絡んで、 jQueryを使って pre タグに表示している内容をそのまま textarea に入れるということをしようとしたら、IEだけ挙動が違ったという話です。

サンプルは以下。「Copy by text」ボタンを押すと jQuery の .text() で pre タグの内容を取得、「Copy by html」ボタンを押すと .html() で取得して、その内容を textarea に .val() でセットするというものです。

<!DOCTYPE HTML>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>jQuery from pre to textarea</title>
    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
</head>
<body>
    <pre id="from">
        <span>1行目</span>
        2行目
        3行目
    </pre>
    <textarea id="to" cols="30" rows="5"></textarea>
    <br>
    <input type="button" id="copy_t" value="Copy by text">
    <input type="button" id="copy_h" value="Copy by html">
    <script>
        $('#copy_t').click(function() {
            var t = $('#from').text();
            $('#to').val(t);
        });
        $('#copy_h').click(function() {
            var h = $('#from').html();
            $('#to').val(h);
        });
    </script>
</body>
</html>

これを IE で実行すると、 .text() を使った場合に改行が消えます。 .html() を使う場合は改行は消えませんが、 pre タグ内にタグを実体参照で記述していると、textareaには「&lt;span&gt;」のような状態でセットされてしまいます。

ChromeやFirefoxなら .text() で改行もそのまま取得できるんですが、IEだけはうまくいきませんでした。

というわけで最終的には「pre タグを非表示にし、あらかじめ非表示にしておいた textarea を表示して .select() を実行することで全選択状態にする」という方法に変えたのですが、なんともモヤモヤっとするIEです。

2012年05月03日 20:37
5月14日の Twitter API の改訂で Search API は対象外

先日「Twitter API、5月14日にサブドメインやバージョン番号なし、非推奨のエンドポイントなどを廃止」というエントリーの中で、

since_id, max_id をサポートするメソッドでの page パラメータの廃止。
Atom廃止。RSSはサポートし続ける。

と書いていました(「Twitter APIの改訂 - 2012年5月14日 - Twitter Development Talk - ja | Google グループ」にもそのように書かれています)が、Twitter検索結果を取得する Search API に限っては、pageパラメータもAtomフォーマットも廃止されないようです。

詳細は「API Housekeeping: Feedback | Twitter Developers」のディスカッションのコメント内にあるので見つけにくいかと思いますが、

Does the page parameter affect the SEARCH method as well?

という質問に対して、

「No, the search API is untouched by any of the changes in this announcement.」 という回答がなされており、

It isn't clear from the blog post and this discussion if atom results will still be available via the search api. We're currently running queries against the api using urls like "http://search.twitter.com/search.atom?q=". Will these searches continue to work or will we have to transition to json?

という、要約すると「検索APIでatomが存続するのか分かりづらいんだが…」という質問に対して、

「The Search API has no changes in this announcement. ATOM results in the Search API will not be effected. I still recommend transitioning to JSON.」という回答がなされています。

さらに、「Deprecations - Spring 2012 | Twitter Developers」の内容を最後までよく見ると、

Search API changes
No changes at this time.

と書かれていて、確かに Search API については変更なし!だそうです。

よくよく見ると、変更内容について書かれている箇所には「REST API」という見出しがついています。

自分がつくっているサービスで Search API を使っているものがあったので修正しようとしていたのですが、直す前に気づいてよかった。

2012年05月02日 01:42
iPhoneのSafariでは大きすぎる背景画像を使うと自動縮小されてしまう

CSS で backgroundImage に縦横サイズの大きな画像を指定していたりするサイトを iPhone の Safari で見ると、背景画像が自動的に縮小されてしまうんですね。

あまり大きな画像を使うことがないので知らなかったのですが。

具体的には、縦×横の画素数が 2,000,000 ピクセル(200万ピクセル)を超えるとだめらしいです。

» DEfusion.org.uk » Shrinking large background image bug in iPhone Safari

なので、例えば 1,440 x 1,800 のサイズだと画素数が 2,592,000 ピクセルなので、そのままのサイズでは表示できず、縮小されて残念な感じになってしまいます。

一方で、例えば 1,188 x 1,584 のサイズであれば、画素数は 1,881,792 ピクセルで、200万画素より小さいので、縮小されません。

と、ここまで書いて iPad ではどうなんだろう?と気になったのですが、iPad持ってないから実機で確認ができない・・・。

ともかくPC向けサイトをiPhoneで見て背景画像があれ?ってなっていたら、画像の画素数を確認してみましょう。

2012年05月01日 11:58
Titaniumで「[ERROR] Adding an event listener to a proxy that isn't already in the context」が出る一例と対処法

久しぶりに Titanium Mobile でつくったアプリをリファクタリングしようと、SDKを一気に最新の2.0にしてビルドしてみたら、Consoleに

[ERROR] Adding an event listener to a proxy that isn't already in the context
[ERROR] Adding an event listener to a proxy that isn't already in the context
[ERROR] Adding an event listener to a proxy that isn't already in the context
[ERROR] Adding an event listener to a proxy that isn't already in the context

というエラーがたくさん。どこでエラーが出てるのかコードを追っていくと、 Ti.UI.createButton() をしている箇所で発生していることが判明。

var searchButton = Ti.UI.createButton({
    image: '/images/search-b.png',
    backgroundGradient: headerButtonGradient,
    borderWidth: 1,
    borderColor: '#333',
    borderRadius: 8,
    style: Ti.UI.iPhone.SystemButtonStyle.PLAIN,
    width: app.config.SEARCH_BUTTON_WIDTH,
    height:32,
    top:6,
    right: app.config.SEARCH_BUTTON_RIGHT
});

どこも間違ってる所はなさそうなのに・・・と、オプションを1個ずつ調べてみると「backgroundGradient」をコメントアウトしたらエラーが消えました。

そこでこれらを手がかりに解決策を調べてみると、公式のフォーラムに以下の投稿が。

» [ERROR] Adding an event listener to a proxy that isn't already in the context » Community Questions & Answers » Appcelerator Developer Center

これによると、

A quick and dirty fix for this issue is to set the backgroundGradient AFTER you have created the button and added it to a view.

つまり「createButtonをした後に、backgroundGradientをセットしろ」と。

var searchButton = Ti.UI.createButton({
    image: '/images/search-b.png',
    borderWidth: 1,
    borderColor: '#333',
    borderRadius: 8,
    style: Ti.UI.iPhone.SystemButtonStyle.PLAIN,
    width: app.config.SEARCH_BUTTON_WIDTH,
    height:32,
    top:6,
    right: app.config.SEARCH_BUTTON_RIGHT
});
searchButton.setBackgroundGradient(headerButtonGradient);

こういうことみたいです。確かにエラーが消えてくれました。