世田谷のエンジニアブログ

変なトラフィック増。。

2012-01-20T20:36:00.000+09:00

普段は、400～600程度のアクセスなのに今日は突然アクセス増えていてちょっと気になったのでbloggerの管理画面で確認。みるとアメリカからたくさんアクセスされてるんだけど、これなんなんだろ？

上のがbloggerの1日単位の統計の図。3つの遷移元だけで、いつもの平日分くらい。
このURLにはこのblogへのリンクなんかないし、ほんとなんなんだろう。気持ち悪い、気持ち悪い。
気持ち悪いけど、別に実害はないのかな。とりあえずログとしてメモに残しておく。

軽量高速のjQ.Mobiを試してみる

2012-01-18T18:11:00.000+09:00

かるい、はやい、ものすご〜いフレームワーク「jQ.Mobi」をさっそく試してみようと思う。

前にjQuryMobileでやった簡単なオークション検索を書き換えて使いやすさとか見てみる。ajaxでapi叩いてリストを表示するだけのシンプルなやつ。なので記事タイトルだとちょっと広過ぎで、内容としては『jQ.Mobiのajax関数を使ってみた』がいいところ。

.ajax {
    type:'POST', //defaults to GET
    url:'/api/getinfo', //defaults to window.location
    contentType:'application/json', //defaults to application/x-www-form-urlencoded
    headers:{},
    dataType:'application/json', //defaults to text/html
    data:{username:foo}, //Can be a Key/Value pair string or object.  If it's an object, $.serialize is called to turn it into a Key/Value pair string
    success:function(data){}, //function to call on successful Ajax request
    error:function(data){}, //function to call when an error exists in the Ajax request
 }

READMEを見るとajax関数は同じようにあるので、前作ったそのままで同じように使えそう。
ちゅうことで、前回やったhtmlをjQueryMobile風からjQ.Mobi風に書き換えて試す。
jQ.Mobi風というかは、単にjQueryMobileのdata-roleとかを外すくらい。
強いて言えばinputのclassをjq-ui-formsにしたのはjQ.Mobi風か。

あら、ダメだ。動かない。ソース読むか。

jsonPではdataはserializeされない(そもそもdataは使われてない)のでurlにつけないといけないっぽいのと、callbackもパラメータに持たせてないのがいけないっぽい。
callbackは下記のようにreplaceしてるので、callback=?としてパラメータに加える。

script.src = options.url.replace(/=\?/, '=' + callbackName);

jQueryMobileのときは下記のようだったのを

        dataType: "jsonp",
        data: {
            "appid": appid,
            "query": query
        },
        url: "http://auctions.yahooapis.jp/AuctionWebService/V2/json/search",

jQ.Mobiではこう書いてみる

        dataType: "jsonp",
        url: "http://auctions.yahooapis.jp/AuctionWebService/V2/json/search?appid=" + appid + "&query=" + encodeURI(query) + "&callback=?",

これで、apiリクエストして、sucecssが呼ばれるところまではできた。でも、cloneはないと怒られる。ちょっと疲れてきたので適当にやる。createElementしてappendする方式で下記のようにした。

function a() {
    var appid = '<ヤフーアプリケーションID>';
    var query = $("#query").val();
    $("#result_list li").remove();
    $.ajax({
        dataType: "jsonp",
        url: "http://auctions.yahooapis.jp/AuctionWebService/V2/json/search?appid=" + appid + "&query=" + encodeURI(query) + "&callback=?",
        success: function (data) {
            if (data.ResultSet["@attributes"].totalResultsReturned > 0) {
                $.each(data.ResultSet.Result.Item, function(i,item){
                    var li = document.createElement("li");
                    var img = document.createElement("img");
                    var p = document.createElement("p");
                    var a = document.createElement("a");
                    var span = document.createElement("span");
                    $(img).attr("src", item.Image);
                    $(a).attr("href", item.AuctionItemUrl);
                    $(a).text(item.Title);
                    $(span).text(parseInt(item.CurrentPrice) + "円");
                    $(p).append(a);
                    $(p).append(span);
                    $(li).append(img);
                    $(li).append(p);
                    $("#result_list").append(li);
                });
            }
        }
    });
}

見た目がバラバラ。jQueryMobieみたいにlistViewの書き方あるのかな？jQ.Mobi Kitchen Sinkを見てみるもUIに関しては遷移の挙動と、formのスタイルしかない。仕方ないので自分でcssを適当に書くか。

<style type="text/css"> 
li {clear: both; }
li img, li p { float: left;}
li img { width: 20%; max-width: 20%;}
li p { width: 80%;}
li p a, li p span { display: block;}
</style>

画像の横にタイトル、価格がくるように幅指定しただけなのにbackgroundまで変わったな。
ま、いいや。とりあえずこれで導入完了とする。

導入してみた感じ、ajaxの使い方が微妙で困ったけど、割と簡単に使えた印象。ネット上にはまだ情報は少ないだろうけど、READMEとかソースとか見ればなんとでもなるレベル。
動作については、jQueryMobileでやたら重いと感じていたスクロールもjQ.Mobiだと特にストレスを感じないので速いんだろう。
jQueryMobileで個人的にいいなと思ったのはcss書かなくてもリストとかスマホサイトっぽいUIにできるとこだったけど、jQ.Mobiでも調べたらちゃんとできるのかな？でも、jq.ui.cssみたらliに関してのスタイルはli.groupしかないからできないのかな？cssを自分で書かずに、jQueryMobileのthemeRollerのように作成できると嬉しい。cssを自分で書かないといけないんだったら、ちょっと難しい。
あと、今回の自分でやったのじゃなくて、普通にデモをandroidで弄ってみたら、ハードウェアの戻るキーを押すと真っ白になる。困った困った。「まぁ、試作機にはトラブルは付き物だ。ウルスラ
利用するのはしばらく様子見がいいかな。
以上、雑感。

前にやったjQuryMobileでのオークション検索に関連する記事

最近ブログもあまり書いてなくて、これが今年一発目だったのか。せっかくなので、目標設定。
最低でも月1ではメモ書き程度で良いのでブログを更新する！
我ながらゆるい目標設定だけどこれくらいが丁度良いはず。

[jQuery]フォームのselectを複数選択

2011-12-27T18:37:00.000+09:00

selectを複数選択可能にするにはmultipleを指定すれば良いのだけれど、複数選ぶにはCtrl押しながら選択しないといけないのでユーザにやさしくない。直感的に選べるようにするには、jquery.multi-select.jsのプラグインが便利そう。デモや使い方は参照先にあり難しくもないので省略。

ただ、ダイアログが大好きとか、同一ページで選択の対象リストに新規追加もさせたいとか、selectは複数だけど対象リストは同一で場所をとるとかなんとかとか、なんらかの止ん事無き理由でプラグインは使えずダイアログ使ったUIにしないといけなくなったとして練習がてらに書いてみる。そんな状況が実際にあるのかは知らない。書きたいから書くだけ。

いぐち
いとう
いのうえ

なんとなく動きとしてのイメージはこんな感じか。あとはダイアログから新しく人を追加できるようにするとか。
逆に追加とか考えずにもう少し汎用的にすればプラグイン化できるのかな。今度勉強としてみよう。

残念なコードのメモ。

<script type="text/javascript">
$(function(){
    var dstSlct;
    $('#dialog').dialog({ autoOpen: false });

    // チェックボックス押されたら、対象のselectのこどもを一旦削除して、checkedのものを対象のselectにappendしなおす
    $('.stdntChkBox').click(function() {
        dstSlct.children().remove();
        $('.stdntChkBox:checked').each(function() {
            dstSlct.append('<option value="' + $(this).val() + '" selected="selected">' + $(this).next('label').text() + '</option>');
        });
    });

    // select自身からは変更できなくしとく（selectのこどもは常にselected）
    $('.dstSlct').change(function() {$(this).find("option").attr('selected', true);});

    // ダイアログ表示するときに、対象のselectのこどもを見てcheckboxをcheck
    $('.showDlg').click(function(){ 
        // 対象のselectはボタンの次にあるとする（コードは汎用性が少ない）
        dstSlct = $(this).next();
        $('.stdntChkBox').attr('checked', false);
        dstSlct.find("option").each( function() { $("#stdntList input[value='" + $(this).val() + "']").attr('checked', true); });
        $('#dialog').dialog('open');
    });
});
</script>

bloggerにadSenseの広告が出ない

2011-12-23T10:50:00.000+09:00

ブログにadsenseを載せていたわけだが、でなくなってた。
bloggerのレイアウトの設定が変わっていたようで直したら表示されるようになった。
でないのが、いつからなのかなぜなのか、不明だけれどまたでてよかた

Webページ高速化のためにやっとくapacheの設定

2011-12-09T14:58:00.001+09:00

最近忘れがちなので備忘録として。設定するのはYSlowの項目でいう、「Add Expires headers」、「Compress components with gzip」、「Configure entity tags (ETags)」。

Add Expires headers

Expiresヘッダを追加し有効期限設定してやる。
mod_expires

Compress components with gzip

データを圧縮して転送量を下げる。
mod_deflate

Configure entity tags (ETags)

正しく設定してキャッシュが正しく使われるようにする。
FileETag ディレクティブ

Etagについては正しく理解できていないのでメモ程度に。
・Etagはキャッシュの管理で使われる。(Etagをレスポンスに含めると、次回のリクエストではIf-None-Match:がヘッダに含められ、Etagが異なればキャッシュが使われずにデータが変えされる。）
・Etagを求める計算にinode番号を使用するので、複数台で負荷分散してるサイトだとEtagが一致しなくなってキャッシュが使われないってことだと思う。
・Etagを返さないように設定すると、YSlowの評価はFからAになるけど、実際の挙動としては、キャッシュが使われるか使われないかは、動作見た感じだとこの設定では変わってないような気がする。

jQuery UI Sortableで複数リスト間ソート

2011-11-30T10:20:00.001+09:00

最近は何をするにもjQueryから調べる。だいたいやりたいことはできる。
今回は、複数のソート済みリストがあって、その要素をドラッグ&ドロップで別のリストに移せて、移したらそのリスト内でソートをしたい。

まずは、要素をドラッグ&ドロップで別のリストに移す。
これは、sortableのconnectWithで指定してやることでできる。

Ishida

Uchida

Yamada

Arclight

Blade

Eve

<div class="sortable" style="border:1px solid; padding:5px; margin: 5px; width: 100px;">
    <div>Ishida</div>
    <div>Uchida</div>
    <div>Yamada</div>
</div>
<div class="sortable" style="border:1px solid; padding:5px; margin: 5px; width: 100px;">
    <div>Arclight</div>
    <div>Blade </div>
    <div>Eve</div>
</div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('.sortable').sortable({
        connectWith:'.sortable'
    }); 
});
</script>

次に移したリスト内でソート。
移した先でのeventはreceive。なので、ここにリスト内でソートさせればOK！！
と、思ったけど、リスト内で位置変えた場合に、ソートがされないので、順番が崩れる。
なので、リスト内のソートはupdateイベントに処理を書く。省略するけど、ajaxでDB側に更新投げる処理は、receiveに書く。

Ishida

Uchida

Yamada

Arclight

Blade

Eve

<script type="text/javascript">
$(document).ready(function(){
    $('.sortable').sortable({
        connectWith:'.sortable',
        update: function(event, ui) {
            var item = ui.item.parent();
            var funcSort = function(a, b) {
                var compA = $(a).text();
                var compB = $(b).text();
                return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
            };
            var listItems = item.children('div').get();
            listItems.sort(funcSort);
            $.each(listItems, function(i, itm) { item.append(itm); });
        }
    }); 
});
</script>

これでやりたいことはできた。リスト内のソートはtextでやったけど、classにソートに使う値を持たせるなどやりようはある。
jQueryとか使うとUIリッチになってサービスの使い勝手あげられるのでGood！！

Yahoo!マーケットに掲載される開発者ウェブサイトが残念

2011-11-21T16:48:00.001+09:00

Androidマーケットのアプリページの説明からスクレイピングしてるのか、説明内にurlがあると一番最初のurlが基本情報の開発者ウェブサイトになっちゃってるっぽい。抜いてるんだとしたら、アンカーテキスト「デベロッパーのウェブサイトにアクセス」まで含めて抜いてやらないとパッと見ダメそう。提携していてデータもらってるとかなら、そのデータがおかしいのか。まぁ、どちらにしても間違った情報を掲載しちゃってるわけなので。

amazonとか楽天とかの有名なサービスのURLを説明に入れてるアプリで開発者ウェブサイトとして誤掲載されてしまっているのをいくつか見たけど大丈夫かな。まぁ、ウェブサイトにとんで見て本家アプリだと勘違いしてインストールするなんてこともまずないだろうしいいのか。最終的にはAndroidマーケットからインストールするわけで、そこで再度開発者ウェブサイトを見るのかはわからないが正しい情報が載ってるわけだし。リリースされて1週間ちょっと経つが、軽くヤフってみた感じだとこの件騒がれる様子もないしきっと大した問題ではないのだろう。リリース自体がそれほど大きく取り上げられていない感はあるが…

ユーザが間違うかどうかはとりあえずおいておいて、サービスを作る者として『スクレイピングするときは十分に気をつけよう』という今日の教訓。基本は大事ということですね。
(実際にはスクレイピングのミスが原因なのかは知りませんが。あと、スクレイピング先のサイトの仕様なんて完璧に知り得ないので、注意したところでやってしまうときはやってしまいそうですが。。)

※12/12/12 追記
久しぶりに見てみたら修正された模様。誤掲載の証拠をとってた分けではないので、修正されたのか、もとから正しく掲載していたのかは証明できないけど。
今は正しい情報を掲載してるようなので誤解のおきないように追記っした。

jQuery Mobileで動的リスト

2011-11-10T13:41:00.001+09:00

だいぶ前に勉強がてらに書いたjQuery Mobileでリスト表示したコード。参考にして使ってみたらリストのデザインでおかしくなる部分あったので修正しておく。

このコードだと、下記のようにリストの要素が角丸になってしまう。ちょっとみにくいけど。

前にのせた画像ももちろん角丸ではあったけれど、あの頃はリストを表示したかっただけで特に気にしてなかったので気付かなかった。。というか、見て見ぬ振り…だったのかも。昔のことで覚えていない。

閑話休題、なんで角丸になってしまうのか挙動をおっていく。コードは…

まずリストの作り方を確認すると、ul内にdisplay:noneしてあるテンプレートliをcloneして、ulにappendして値を当てはめるだけ。

で、原因。
初めul内にはテンプレートのliが1つあるのみなので、jQuery Mobileがテンプレートliにui-corner-top(最初のli)、ui-corner-bottom(最後のli)のclassをつける。
このテンプレートliをcloneしてるので、角が丸くなってしまう。ちなみに画像の角が丸いのは、ui-corner-tl、ui-corner-bl。

原因がわかったので、必要ないclassを削除するように「jQueryでAjax」のeachに追記。

if (i > 0) {
    row.removeClass('ui-corner-top');
    row.find('img').removeClass('ui-corner-tl');
}
if (i < data.ResultSet.Result.Item.length - 1) {
    row.removeClass('ui-corner-bottom');
    row.find('img').removeClass('ui-corner-bl');
}

これで角丸はとれました。もっとスマートな方法はあるかも。

PC メモリ故障&交換

2011-10-30T21:32:00.000+09:00

2月に買ったPC(開発環境用 PC買い替え)のメモリが9ヶ月で壊れたのでそのときのこと。

PC使ってたら、突然アプリケーションが落ちた。ブラウザとかメーラとかVMとか。
何？と思ってとりあえず再起動しようとしたら、PCが起動してこない。

ここからの原因調査が時間かかった。

"RUN fsck MANUALLY"とでてたので、リカバリモードでfsckしてみるも、mountされた状態では危険とのメッセージ。
なので、SSDからでなくLiveCDから起動させようとするも、LiveCDから起動はできない。
リカバリモードでファイルは読めてるみたいだし、DISKは問題ないのかな。
バックアップはとっておこうかなと思って外付けHDDつなぐも上手いこと認識させられず断念。

ディスクじゃないならメモリかな？ということで、Memory test(memtest86+)なるものをやってみる。

うお！エラーにしかならない。
原因はメモリか。2本あるので、両方ダメなのかどっちかがダメなのか確認のため外さないとな。
箱開けてみる。DVDドライブが邪魔ですぐにはメモリ抜けん。。
悪戦苦闘し抜き差しmemtestしつつ、故障したメモリは1つであることがわかった。

故障してないメモリ1つだけならちゃんとPCも起動できる。
1つでも4Gあるからか、ネット見るとかなら特に遅いとかは感じないな。
まぁ、起動はできるようになったので良かった良かった。そして、疲れた。
2本のうち1本不良なだけで、起動もできなくなるんだな。勉強になった。

とりあえず、1年経ってないし保証期間かなと思い、ドスパラのサポートに電話で聞いてみる。
メモリを交換してくれるとのこと。故障した1つじゃなくて2つとも交換。ありがとう、そしてありがとう。

Android Custom Dialogの上下の空間

2011-10-23T15:42:00.001+09:00

AlertDialogでlist形式にしたいときは、setItemsやsetMultiChoiceItemsとかsetSingleChoiceItemsとかを使えば良いけど,アイコン＋テキストにして見せたいときにはこれはダメ。
Creating a Custom Dialog | Android Developersにあるようにxml用意して、設定してやれば良い。

とりあえず例を参考に下記のようにAlertDialogを準備して、ボタンを押したらshowするようにした。

        View dialogView = View.inflate(this, R.layout.dialog, null);
        AlertDialog.Builder builder = new AlertDialog.Builder(this);
        builder.setTitle("Custom Dialog").setView(dialogView);
        alertDialog = builder.create();

用意したxmlは表示されるけど、その上下に微妙に空間ができてしまった。。

で調べる。

AlertDialog.BuilderのsetViewでは設定できないけど、AlertDialogだとpublic void setView (View view, int viewSpacingLeft, int viewSpacingTop, int viewSpacingRight, int viewSpacingBottom)で設定できそう。

下記のように書き換える。

        View dialogView = View.inflate(this, R.layout.dialog, null);
        AlertDialog.Builder builder = new AlertDialog.Builder(this);
        builder.setTitle("Custom Dialog");
        alertDialog = builder.create();
        alertDialog.setView(dialogView, 0, 0, 0, 0);

スペースは消えてくれたので、やりたいことはできた。

ただ、builderでbuild(タイトルとかボタンとかのset)をしてcreateされたdialogに、Viewをsetしてやるのはなんとなく気持ち悪さが残る。setは全てbuilderでできる気がしてたので。

新しい Blogger インターフェイスでの投稿の改行設定

2011-10-12T20:23:00.001+09:00

今までのインターフェイスだと改行がbrに変換されてたのに、新しい Blogger インターフェイスにしたら変換されなくなった。。
設定を見てもそれらしいのがない。と、いうことで、新しいのは使わずにいたけどそろそろ移行しようと思い見てみる。

全体の設定(左のメニューにあるやつ)じゃなくて、投稿の画面で右にある「投稿の設定＞オプション＞改行」でするんだったのか。
「「Enter」キーを押して改行」に設定したら今までのように改行が変換されるようになった。これで移行できるかな。

Android emulatorにgoogle account登録

2011-10-09T16:28:00.000+09:00

AndroidアプリとGAE連携した何かを作りたくてエミュレータにアカウント登録しようとしたときのこと

Setup could not finish
Unable to open connection to server.

となって、上手く登録できない。

結局、emulatorのTargetがGoogle APIsじゃなきゃってだけ。
Android Emulator - Trouble creating user accounts - Stack Overflow

Android エミュレータからPCサーバへのアクセス

2011-10-06T14:13:00.001+09:00

１台のPCでAndroidアプリとWebサーバの開発のとき、アプリからサーバへのアクセスはlocalhostじゃダメ。loalhostはエミュレータ自身を指すから。10.0.2.2とすればアクセスできる。
Emulator Networking | Android Developers

インストール数比例型の収益モデル

2011-09-30T20:53:00.002+09:00

Androidに新しい収益モデル「インストール数比例型」のAppLogがミログによって提供されたけど、これってどうなのかな。
オプトインだからユーザが同意してくれないといけないわけで、どこまで収益につながるんだろう。(従来の広告型のモデルでもやってないし、そもそもアプリも公開してないので収益につながるかはまずは良いんだけど)
とりあえず、新しいモデルなのでちょっと興味がある。

開発者としては、AppLogSDKをアプリに組み込みやすいのかも気になるところ。SDKはアプリの登録を申請して、審査に通らないとダウンロードできないよう。しっかり読まずに空で登録してしまった。当然Invalid。不要な手間を掛けてしまったな。。すみません。

AppLogSDKの概要を見てもあんまり組み込むイメージが沸かない。。別途、仕様書ってのもダウンロードするものなのかな。

よし、まずは何かシンプルなアプリを作って公開してみるところから始めてみよう！

MySQL ERROR 1005 (HY000): Can't create table

2011-09-19T15:11:00.000+09:00

MySQLでcreate tableしようとしてエラーになったのでメモ。

エラー内容

ERROR 1005 (HY000): Can't create table './test/c.frm' (errno: 121)

とりあえず、innodb statusを見てみる。

mysql< show innodb status;
ERROR 1227 (42000): Access denied; you need the SUPER privilege for this operation

スーパー権限が必要とのこと。スーパー権限で作業してるのでちょっとよくわからない。

結論、外部キーのsymbolが問題だった。
MySQL :: MySQL 5.1 リファレンスマニュアル :: 13.5.6.4 FOREIGN KEY 制約

もし CONSTRAINT symbol 条項が与えられると、symbol 値はデータベース上で固有である必要があります。もし条項が与えられなければ、InnoDB は名前を自動的に作成します。

bテーブルと定義が同じテーブルを作りたかったので、SHOW CREATE TABLE bで出力されるcreate文のテーブル名だけcに変えて実行したのがエラーの原因。
symbolが被ってしまってエラー。symbol部分も変えるか削除するかしてやらないとダメ。

jquery ui アイコンの改行回避

2011-09-13T17:39:00.000+09:00

jQuery UIのアイコンが便利。ただ、アイコンの後ろに文字を続けたくても、改行されてしまうので調べたメモ。

こんな感じに記述すると

<span class="ui-icon ui-icon-play"></span>再生
<span class="ui-icon ui-icon-pause"></span>一時停止

こう表示される。
再生一時停止

firebugで見てみるとdisplay:blockのために改行されるよう。 styleを「display: inline-block」設定してやると、

<span style="display: inline-block" class="ui-icon ui-icon-play"></span>再生
<span style="display: inline-blcok" class="ui-icon ui-icon-pause"></span>一時停止

改行されずに上手く表示されました。
再生一時停止

ちなみに、「display: inline」だとアイコンがどこかに逝ってしまった。。cssはむずかしい。
再生一時停止

※FirefoxとChromeでしか確認してない。

ubuntu firefox6にアップグレード

2011-08-24T17:56:00.000+09:00

最近やたらfirefoxが遅くなった気がする。そして、クラッシュする頻度も増えたような。
ちなみに、アップデートはアップデートマネージャに任せていたのでバージョンは3.6.18。
と、いうわけでfirefox6にアップグレードしてみた。

# add-apt-repository ppa:mozillateam/firefox-stable
# apt-get update
# apt-get install firefox

メニューとか英語だな。。。日本語化にはfirefox-locale-ja。

# apt-get install firefox-locale-ja

これでアップグレードは完了！
若干速くなったような気がするのは気のせいかな

AndroidでGoogle Chart ToolsのImage Charts使って円グラフを描く

2011-08-18T12:28:00.001+09:00

以前にAFreeChart,AChartEngineを使ってAndroidアプリに円グラフを表示させてみた。

今回はGoogle Chart Tools: Image Chartsを使ってグラフを表示させてみる。
Google Chart APIはチャート画像を返してくれるので、これをImageViewとかで表示させるだけでOK。ちなみにAPIのコール数に制限はないけど、１日あたり25万コール以上が想定されるなら、メールで知らせてくりゃってことらしい。

Google Chart Usage Policy

There's no limit to the number of calls per day you can make to the Google Chart API. However, we reserve the right to block any use that we regard as abusive. If you think your service will make more than 250,000 API calls per day, please let us know by mailing an estimate to chart-api-notifications@google.com.

パラメータは「List of Chart Parameters」見る。タイトルとか色とか背景色とか凡例の位置とか基本的にはなんでもパラメータあるし好きなように表示できそう。

とりあえず、前にやったデータの円グラフを表示させるコード。

    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        WindowManager wm = (WindowManager) getSystemService(Context.WINDOW_SERVICE);
        Display display = wm.getDefaultDisplay();

        String chart = "http://chart.apis.google.com/chart?cht=p3&amp;chdlp=b";
        chart += "&amp;chtt=" + URLEncoder.encode("サンプル");
        chart += "&amp;chd=t:40,5,10,25,20,50";
        chart += "&amp;chdl=Cupcake|Donut|Eclair|Froyo|Gingerbread|Honeycomb";
        chart += "&amp;chs=" + display.getWidth() + "x" + (display.getHeight() / 3);

        try {
            ImageView imageview = (ImageView) findViewById(R.id.chart);
            InputStream is = (InputStream) new URL(chart).getContent();
            Drawable d = Drawable.createFromStream(is, "");
            is.close();
            imageview.setImageDrawable(d);
        } catch (MalformedURLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
    }

画像をとってきて表示させてるだけなので、AFreeChart、AChartEngineより敷居は引くく簡単に導入できる印象。当然だけど2つと違って、INTERNETのpermissionは必要。

CakePHP フォーム周りメモ

2011-08-04T12:58:00.002+09:00

CakePHPのフォーム要素はdivやlabelがあってどうも気に入らない。消したい。
ということで、マニュアル見てみる。
フォーム要素の自動生成 :: フォーム :: 主要なヘルパー :: マニュアル :: 1.3コレクション

下記のようにlabel,divをfalseをセットしてやると出力されなくなる。

<?php echo $this->Form->input('name', array('label'=>false, 'div'=>false));?>

あと、hasAndBelongsToManyの要素のフォームがmulitple属性指定されたselectなのも気に入らない。
「Ctrl」キー押しながら複数選択ってなんか敷居が高い気がするのでチェックボックスにしたい。下記のようにすればできる。

<?php echo $this->Form->input('Hobby', array('multiple' => 'checkbox'));?>

で、これもdivタグ、labelタグを消したいので、追加。

<?php echo $this->Form->input('Hobby', array('multiple' => 'checkbox','label'=>false, 'div'=>false));?>

見事に<div class="checkbox">が残る。これも消したいのでググる。
CakePHP form helper - HABTM multiple checkbox styling - Stack Overflow

cssでスタイリングできるよってな感じか。それは普通に分かるけれど。。。消したかったのです。

と、いうことで諦めて苦手なcssで。

div.checkbox{
    display:inline;
}

とりあえず１行で表示させたいだけなので、こんなでいいかな。

CakePHP 画像アップロード

2011-08-03T14:34:00.000+09:00

画像のアップロード調べていて、下記ImageBehaviorを知ったので使ってみる。
[CakePHP] 画像のアップロード＆リサイズを簡単にできる ImageBehavior | Sun Limited Mt.

使い方は参照元にあるので省略するが、簡単に使えて良い感じ。
ただ、findしたときに関連テーブルのimageまでは処理してくれない。
で、また調べてたら、下記記事でbelongsToに対して処理を足してたので参考にみる。
ちなみに、今回処理させたい関連はhasMany。
cakePHPのimageBehaviorについて – CEED

afterFindに処理を加えてるよう。

今回はhasManyを処理したいので、relatedModelsにhasManyもマージする。

$relatedModels = array_merge($model->belongsTo, $model->hasMany);

これだけだと動かなかった。。。
hasManyなわけで複数のときもあるので、127-130行までの処理を複数の場合を考慮する。

                        if (isset($results[$i][$relatedModelName][0])) {
                            $j=0;
                            while ( isset( $results[$i][$relatedModelName][$j] ) && is_array( $results[$i][$relatedModelName][$j] ) )  {
                                if (isset($results[$i][$relatedModelName][$j][$field]) && ($results[$i][$relatedModelName][$j][$field]!='')) {
                                    $value=$results[$i][$relatedModelName][$j][$field];
                                    $results[$i][$relatedModelName][$j][$field]=$this->__getParams($relatedModel, $field, $value,$fieldParams, $results[$i][$relatedModelName][$j]);
                                }
                                $j++;
                            }
                        } else {
                            if (isset($results[$i][$relatedModelName][$field]) && ($results[$i][$relatedModelName][$field]!='')) {
                                $value=$results[$i][$relatedModelName][$field];
                                $results[$i][$relatedModelName][$field]=$this->__getParams($relatedModel, $field, $value,$fieldParams, $results[$i][$relatedModelName]);
                            }
                        }

145-148行のところも同様に。

                        if (isset($results[$relatedModelName][0])) {
                            $j=0;
                            while ( isset( $results[$relatedModelName][$j] ) && is_array( $results[$relatedModelName][$j] ) )  {
                                if (isset($results[$relatedModelName][$j][$field]) && ($results[$relatedModelName][$j][$field]!='')) {
                                    $value=$results[$relatedModelName][$j][$field];
                                    $results[$relatedModelName][$j][$field]=$this->__getParams($relatedModel, $field, $value,$fieldParams, $results[$relatedModelName][$j]);
                                }
                                $j++;
                            }
                        } else {
                            if (isset($results[$relatedModelName][$field]) && ($results[$relatedModelName][$field]!='')) {
                                $value=$results[$relatedModelName][$field];
                                $results[$relatedModelName][$field]=$this->__getParams($relatedModel, $field, $value,$fieldParams, $results[$relatedModelName]);
                            }
                        }

これでhasManyの関連のテーブルのimageが処理されるようになりましたっと。

PHP print_rに第二引数あったのね

2011-07-30T14:44:00.000+09:00

超今更ながら、print_rに第2引数を渡せるのを知った。
TRUEを渡すと出力はしないで、string返してくれる。

そんだけです。

そんだけなんだけど、一応どんな感じで使ったかも書いとくと、配列のログ出力が簡潔になった。
出力バッファリングを有効にしてやって、バッファリング内容を表示ってやってたので。

<?php

$arr = array('a'=>'hoge', 'b'=>'fuga');

ob_start();
echo "var_dump: ";
var_dump($arr);
error_log(ob_get_contents());
ob_end_clean();

error_log("print_r: " . print_r($arr, true));

上のvar_dump(別にprint_rでもい)の出力が今までやってた方法で、下が今回覚えたprint_rの第二引数使ったもの。
4行が１行に!! 簡潔にかけて便利じゃ。下記注意があるので、内部的には同じようなことをやってるんだろうけど。

注意:
return パラメータを使う場合、この関数は内部的に出力バッファリングを使います。そのため、ob_start() コールバック関数の中では使えません。

で、ログはこんな感じに出力されると。sedで改行コードを改行に置換してやると見やすいね。

$ tail -f /var/log/apache2/error.log | sed 's/\\n/\
/g'
[Sat Jul 30 14:38:02 2011] [error] [client 127.0.0.1] var_dump: array(2) {
  ["a"]=>
  string(4) "hoge"
  ["b"]=>
  string(4) "fuga"
}

[Sat Jul 30 14:38:02 2011] [error] [client 127.0.0.1] print_r: Array
(
    [a] => hoge
    [b] => fuga
)

jQuery UI TabsにGoogleMap埋め込むと表示位置ズレる

2011-07-28T18:32:00.000+09:00

GoogleMapの地図を埋め込んでみたが、どうも初期の中心地がズレる。
原因を調べていたら、どうもjQuery UI Tabsの相性（？）の問題。

jQuery UIタブの中と外にそれぞれ同じiframeを埋め込んだのが下図。

タブ内の方はタブの分だけ（かな？）右下にズレてしまって、世田谷区じゃなくて目黒区になっている。
タブの外にあるのはA地点が中心に来ていて期待した位置。

対応方法を探す。iframeじゃなくて、マップAPIのようだけど、下記参考にみてみた。
Problems with Google Maps API v3 + jQuery UI Tabs - Stack Overflow

結論としては、iframeのsrcをrelに書き換えて、tabのshowでrelの値をsrcに設定することでズレは解消。

    $(function(){$('#tab').tabs({
            show:function(event, ui) {
                var rel = $(ui.panel).find('iframe').attr('rel');
                $(ui.panel).find('iframe').attr('src',rel);
            }
        })
     });

地図のあるタブに切り替えるたびに読み込み中になるのは、まぁ良しとする。

jQueryMobileのボタン内のテキストを改行

2011-07-13T14:54:00.000+09:00

jQuery Mobile使うとスマートフォンっぽいUIにしてくれるのでまぁ便利なんだけど、微妙なところの調整が良く分からない。掲題の通りで、ボタン内のテキストを改行して全てを表示させたい。デフォルトだと「…」と省略されるので。

ぐぐるが、とくに解決方法みつけられないので、自力で頑張る。

.ui-btn-inner の「white-space: nowrap;」が効いてるので折り返されないで表示されてる。
んで、ボタン内の文字列はspan.ui-btn-textに入れられるようなので、このスタイルを設定すればよさそう。

サンプル

    <style type="text/css">
    div.ws-normal span.ui-btn-text { white-space:normal; }
    div.ws-pre span.ui-btn-text { white-space:pre; }
    </style>
    <div data-role="content">
        <input type="button" value="ボタンの文字列長いと改行されずに省略されるのをなんとかしたい。">
        <div class="ws-normal">
            <input type="button" value="ボタンの文字列長いと改行されずに省略されるのをなんとかしたい。">
        </div>
        <div class="ws-pre">
            <input type="button" value="ボタンの文字列長いと
改行されずに省略されるのをなんとかしたい。">
        </div>
    </div>

とりあえず、改行はできましたっと。もっと良い方法もあるのかな。

モニタ24インチにしたら快適

2011-07-05T20:54:00.000+09:00

今までずっと19インチモニタを使っていたのだけれど、とうとう新しいのを買った。別に壊れたわけじゃないんだけど、ネットサーフィン程度にしかPC使ってなかったのが開発もするようになって不便を感じていたため。やっぱり画面が広いと作業効率あがる。気がする。

買ったのは「SAMSUNG 24型ワイド液晶モニター B2430H」。あんまりこだわりはないのでノングレアのもので15,000円程度のものから選択。価格は14,571円と15,000を切る安さで手に入った。今日確認したら、Amazonのパソコン・家電オンラインショップ Bサプライズって店で12,800円とさらに安い値段になってて、お買い得！！

で、このモニタを使って2週間程度経つが、特に問題もなくて良い感じ。
まぁ価格.comのレビューにもあったけど、視野角は狭いのかも。たまたま下から覗いてみたら暗かったんで。でも、普通に正面から見る分には全く問題なし！動画も問題なく。
あとは強いて言うなら、モニタの電源の青ライトが明るいのが気になるので、PCシャットダウン時にはモニタも落とすようになったのが手間というか、経済的というのか。
兎に角、手頃な価格でモニタが入って大満足。

モニタ自体は問題ないけど、それだけでは終わらなかった。
モニタには「パソコン自動切替器 BSKMR201」で、UbuntuとWindowsをつないで使ってたのに、Windowsが解像度に対応してない。

解像度あってないと醜いのでちょっと頑張る。

ちなみにwindowsは5年くらい前に買ったDELLのDIMENSION 3100C。
ドライバを更新したけど対応解像度は変わらずで、下記の参考の方のようにPowerStripを入れて設定してみる。よく理解せずにやってたから、同様に画面が真っ暗になって焦る。電プチ。Windows起動画面でF8押して、VGAモードにして起動する。またいじってると、画面が真っ暗。繰り返す。繰り返す。

一応、1920x1080の解像度で表示出来るようになったけど、145ヘルツしか選べない参考と同じ状態。そのまま終了すると、次回起動時にログイン画面で真っ暗。恐らくPowerStripが起動してるときは表示できるけど、ログイン画面時ではPowerStripが起動されてないので真っ暗になるんだろう。

だから、ログイン時画面真っ暗なままでキーボードだけでログインしてるのか。わけわからなくなりそうだな。慣れればこれでも大丈夫かな。
もしくは起動時にF8押してVGAモードにするか、シャットダウン前に低解像度に設定して終了するとかか。忘れそうだな。これも、あんまりうまくないですね。

そもそも、なんでそんな古いの使ってるのって話か。たまにしか使わないので、低解像度でそのまま使うのでもいいか。

参考：[備忘録]モニタ解像度変更手順（23インチ、1920×1080への対応） | ホームページ制作（横浜）のアットライズ

Android WebView loadDataメモ

2011-06-23T12:28:00.001+09:00

WebViewはwebページ表示するために使うものと思ってたけど、htmlの文字列を渡して表示もできるってことに気づいた。htmlの方が慣れてるし、けっこう便利！ちょっとハマった点メモ。

使い方は簡単で、htmlのデータ用意して、loadDataするだけ。

        WebView webview = new WebView(this);
        String data = "<html><head><meta http-equiv=\"content-type\" content=\"text/html;charset=UTF-8\"></head>";
        data +=  "<body>ハロー</body></html>";
        webview.loadData(data, "text/html", "UTF-8");
        setContentView(webview);

ヘッダにmetaタグで指定してやらないと文字化けるので注意が必要。metaがないと下記のように化ける。

だいたいこんな感じで使ってたけど、たまに表示ができないときがあるので調べ見てる。どうもdataに%が入ると表示ができないよう。

     data +=  "<body>ハロー%</body></html>";

%が入るかもしれないデータの場合は、URLEncoder.encodeしてやれば表示できる。

        try {
            data +=  "<body>" + URLEncoder.encode("ハロー%", "UTF-8") + "</body></html>";
        } catch (UnsupportedEncodingException e) {
            e.printStackTrace();
        }

※追記：URLEncoder.encodeだと半角スペースが+で表示されてしまうな。%を%25にreplaceするだけでもいいのかな。

とりあえずloadDataはメタタグ入れるのとencodeに気をつけてれば文字化けの問題はなさそう。

ちなみに、loadDataの説明にはちゃんと下記記述があったのでちゃんと読まずに使ってただけ。。。
%以外にも#とかも書かれてるけど、置き換えなくても表示できた。%だけ上のように「Web page not available」。

A String of data in the given encoding. The date must be URI-escaped -- '#', '%', '\', '?' should be replaced by %23, %25, %27, %3f respectively.

注意するのはそんな程度。htmlだからtableタグが使えるのがちょっとうれしい。tableタグなくてもTableLayoutあるし問題ないんだけど、罫線ひくのにbackgroundとmargin使って線のように見せる(参照：Display border lines in TableLayout on Android Development)のがなんだかなとは思ってた。もちろんtableタグならborder指定するだけで簡単に表に枠線を付けられる。

すごく簡単。rowの数が任意のときにも便利。任意の場合、TableLayoutだとどうやるのかな。TableRowをinflateして、TableLayoutにaddViewしてを繰り替えしていくとかかな？

世田谷のエンジニア ブログ