11月は二件の勉強会でしゃべらせていただく予定です。
モバイラーズオアシスのiPhone対応についてLTさせていただきます。
ついでに、iPhone以外のスマートフォンってどうやって対応したらいいのかとか、その辺を教えていただけたらなぁ、と思っております。
おなじく、モバイラーズオアシスで使ったGoogle Maps APIの話をします。こっちはセッションで30分くらいしゃべらせていただく予定。
興味のある方、気軽に参加してくださいませ。
開発中のサイトを内緒にしておくために、Basic認証とか、最近だとDigest認証を使う事って良くあると思うんだけど。これのやり方をググると、たいていこういう風に出てくる。
AuthUserFile /var/www/hogehoge/.htpasswd AuthGroupFile /dev/null AuthName "Please enter your ID and password" AuthType Basic require valid-user order deny,allow
ここで出てくる、AuthGroupFileって、意味あるのでしょうか？.htpasswdに書いたユーザー名でパスワード認証したいだけだったら、グループを認証する意味ってないですよね？
Apache2.0になって認証モジュールが細かく分かれたので、「AuthGroupFile /dev/null」の一行を消せば、authz_groupfile_moduleをロードしなくてよくなるから、多少でもメモリが節約できるはず。
Basic認証の時に「AuthGroupFile /dev/null」を書くのって、なんか意味があるのでしょうか？歴史的にはなんか意味があったけど今はもう意味がない、盲腸みたいなのだったりしません？
モバイラーズオアシスのiPhone向けサイト、静的GoogleMapを使って軽量化してみました。
[改善]検索結果の一覧、iPhoneサイトの軽量化など – モバイラーズオアシス-電源検索サイト
iPhoneのsafariはかなりちゃんとできたブラウザなので、jQueryのプラグインを使えばかなりいろんな事ができて、「うは、これだったらアプリ作らなくてもいいんじゃね？」と当初思ったのですが。
【ハウツー】jQuery on iPhone – jQTouchを使ったWebアプリ開発 (1) jQTouchとは | エンタープライズ | マイコミジャーナル
やってみた結果、そうはいかないと言うことが分かってきました。
モバイラーズオアシスみたいなサイトは、無線LANのないところで動いてナンボです。3G回線で読み込めるサイズのWEBページということは、要するに携帯サイト並みに軽くないといけなくて。
jQuery本体は相当軽いものの、そのプラグインをあれこれ入れはじめたり、$(document).readyでページを書き換えるような機能が複数あると、無線LANでは快適に動いていても、3G回線になると動作が辛いページになってしまうことがあります。
ネイティブアプリであれば、画像とかライブラリをローカルに持っておくことができるので、みんなすいすい動いているのですが、毎回通信してデータを取ってこないといけないブラウザ上のアプリケーションだと、どうしても機能を絞る必要が出てきます。
HTML5のアプリケーションキャッシュ機能とかが動けば、二回目以降そっちから読むとかできるかもしれないのですけど。
あるいは、ユーザーインターフェイスに画像を使うのをやめて、HTML5の角丸機能などで装飾するようにすれば、多少ましになるのかも。でもその場合、どのサイトもみんな同じ見た目になってしまうと思うのですよね…
なんかうまいこと考えないと、iPhone向けWEBサイトでネイティブアプリ並みの機能を持たせるのはちょっと無理があるかなぁ、と思いました。
都内だけじゃなくて日本全国で、電源のあるカフェ、仕事のできそうなファストフードなどを探すことのできるWEBサービス、モバイラーズオアシスというのを作ったので、公開します。
同じように電源のつかえるカフェを探すサイトは既にいくつかありますが、違いは３つ。
電源マップ(首都圏のみ)というようなサイトは、首都圏以外に住む人の役に立ちませんし、首都圏の人だって地方出張の時に使いたいだろうと思うので、日本全国のスポットを載せることにしました。
日本全国といっても、実際には電源のあるスポットが存在しないような地方も残念ながら存在します。そんな時「ありません」ではなくて、「電源はないけど、スターバックスでどうでしょう？」というような形で使えるように、電源が無くても、入りやすくて仕事のできそうなスポットは全部掲載することにしました。マクドナルドだけではなくてモスバーガーもミスタードーナツもスタバもドトールも、全部入れてあります。
混んでいない喫茶店をさがす5つのコツで書いたように、電源だけでなくディスプレイまで提供してくれるネットカフェはとてもいい仕事スポットです。ということで、仕事に使えそうなネットカフェチェーン17社も掲載しました。
まだまだいたらぬところが多いとは思いますけど、実際に使ってみて、意図したような結果が得られたとか得られなかったとか、こんな情報も載っていると嬉しいとか、こんなスポットも載っていると嬉しいとか、ぜひ感想を聞かせてくださいませ。
(2009-10-08 00:27:56) iPhoneページを作成しました
このブログでもやっているのですが、ブログ記事のはじめの方にとりあえず何でもいいから写真を入れておくとそれだけで記事がなんだかわかりやすくなる、
Gigazine効果というテクニックがあります（ボクが勝手に命名しました）。
大変効果的な手法なのですけど、商用利用可能な写真素材は高いので、flickrの写真を使わせていただくと便利です。
Advanced Searchという機能を使うと、Creative Commons licenseで商用利用可能となっている写真に限定して検索することもできます。
この場合、原著作者のクレジット表示をしないといけないので、写真だけを勝手に貼り付けるとまずくて、それなりにフォーマットを整える必要があります。
毎回同じ位置から同じようにテキストを切り出して組み立てるだけの作業は人間よりコンピュータの方が得意なはずなので、クリック一発で組み立てられるようなブックマークレットを作ってみました。
使い方
いつものようにflickrから写真を探してきます。
ブログに適したサイズの画像のページを開いて。
ぽちっとブックマークレットを押せば、こういうタグが生成されます。
あとはこれをブログ記事にコピーペーストすればOKですね。
ブックマークレットはこちら。
flickr写真用タグ
元のソースコードはこんな感じ。
img=window.document.images[3];
url=window.document.links[0].href;
ret='<a href="#{url}"><img src="#{src}" width="#{width}" height="#{height}" alt="photo by #{name}" /></a>'
ret=ret.replace(/#{url}/,url).replace(/#{src}/,img.src).replace(/#{width}/,img.width).replace(/#{height}/,img.height).replace(/#{name}/,url.split('/')[4]);
alert(ret);
chromeとFireFox,IE6で動くことを確認してありますので、最近のブラウザであればたいてい動くんじゃないかと思います。
(2009-11-07 08:46:44追記) 「受託をとめたんじゃなくて、とまっちゃったんだ」、とコメントをいただきました。
Twitter / FURUSHO Takashi: 受託をとめたんじゃなくて、とまっちゃった（仕事なくな …
(追記終わり)
ウェブテコ第9回 – CMS – ウェブテコ – 神戸のウェブ勉強会
で、SOY CMSの人が来ていました。
SOY CMSというのは、株式会社日本情報化農業研究所さんが作っているCMSツールで、日本初のCMSとしてそれなりの知名度になってきた結果、日本情報化農業研究所さんは現状これのカスタマイズ案件で食べていけているらしいです。
ExpressionEngineのカスタマイズ案件を受注したいボクとしては、どんな風にして今の位置にたどり着いたのか興味津々なので、どういう経緯でここまで来たのかを聞かせていただきました。
＃ボクが聞いた話を思い出しながら書いているので、１００％正確とは限りません。
・開発
もともと受託開発していたのだけれど、SOY CMSを作るぞ！ということで受託開発を止めて、２人×３ヶ月で作った。
受託開発を止めた結果、会社の収入が止まったので、開発中は社員のお給料も出ない状態になった。
まあでも、４人しかいない会社だったので、みんな別に逃げ出したりはしなかった。会社に住んでいる人もいるし。
・その後
しばらくは全然売れなかった。しょうがないので、自腹で勉強会を開いてユーザーさんに来てもらっていた。
自腹なので、会場費を節約するため、公民館の畳の部屋を借りて勉強会をしていた。会議室に比べると安く借りることができるし、京都の会社なので、京都らしくていいよね！
・ヒットしたきっかけ
SOY CMSは、SOHOやWebデザイナーの救世主になるかもしれない: 世界中の１％の人々への記事にはてなブックマークが集まった。
これをきっかけに、ユーザーさんが増え始めた。
ウェブテコ第9回 – CMSに行ってきました。
もちろん、ExpressionEngineについてお話してきましたよ！
今回は、正直ちょっと失敗したと思っていて。最初に「今日はこんな順序で話をします」というのを入れるのを忘れたので、
なんだかノペーっと長いプレゼンになってしまいました。
そもそも準備が不足していたので、素材を片っ端からしゃべる形になってしまったのが敗因だと思うのですが。
次回に向けて、プレゼンを作る時に注意することをまとめてみました。
・見出しを作る
最初に、今日はどんな順序で話をするかの説明を最初に入れる
これがないと、話を聞く準備ができないので、聞く人の集中力が持ちません。
・最後まで一気に行かずに、途中に質問の時間を作る
「いつでも質問してください」と一応いいますが(あ。でもこれも今回忘れたなぁ)。言ってもそうそう聞けるものではないので、15分に一回くらいはプレゼンを止めて、「この辺までで質問とかありますか？」と聞いて質問が出ると、聞いている方をうまく巻き込めるかと思います。
・デモ大事
かずみちさんがa-blogでやっていた、試しにWEBサイトを一個作ってみせるのはいいやり方だな、と思いました。
EEでも、既存のサイトを丸ごとCMSベースに置き換える、とかやってみせれば良かったですね。
Amazon.comのサービスに、メカニカルタークというのがあって。
たとえば、写真に写っているものが何かを判断するとか、音声を聞き取って文字にするとか、そういうコンピュータには難しい仕事を依頼することができます。
答える方は回答一件○セントという形で謝礼が出るので、うまくいけば、インターネットの向こうにいる人々の力を借りて、コンピュータには難しそうな問題を解決することができます。
で、ボクもちょうどいい問題があったので、人力検索にお願いしてみました。
位置情報から住所を表示するプログラムを作ったのですが、日本全国正しくでる自信がないので、テストを手伝ってください。.. – 人力検索はてな
うまく回答が集まって、はてなから怒られなかったら、これはなかなかいい使い方になるんじゃないかと思うのですけど、さて、どうなるでしょう？気が向いた方がおられたら、協力していただけると嬉しいです。
2009-09-24 14:48:01
・GoogleMapに逆ジオコーディング(GPS座標から住所を取得する)という機能があって。
・ところがこれが、たまに「東北自動車道」とか、すっとぼけた回答を返すので、プログラミング上工夫が必要です。
F’s Garage：google mapsの逆ジオコーディング使い辛っ!
Googleの逆ジオコーディングをためしてみた | クレコ
・で、それをJavaScriptオンリーでやったのですが、あまり自信がなかったので、ちゃんと住所がでるかどうか確かめたかったのです。
・ところが、IPアドレスからGPS座標を取得とか余計なことをしたものだから、みなさまに意図がちゃんと伝わらなかった次第。
最初からこうやって、地図と住所だけの単純なインターフェイスを作るべきでしたね。
逆ジオコーディングのテスト2
たとえば、最初は地図なんて見えないけど、ボタンを押したらGoogleMapを表示するようなWEBアプリケーションを作りたいとか、逆ジオコーディング(だけ)のためにGoogleMapsを使いたい(！)とか、そういう理由で 見えないオブジェクト上にGoogleMapsオブジェクトをロードしたいという要求がたまにあって。
ところが、display:noneのオブジェクトにGoogleMapをロードすると、GoogleMapは自分自身のサイズが取れないので、ちゃんと表示されない。
display:none の状態で初期化するとバグる – てっく煮ブログ
上記ブログでは、だからdivを表示した状態でロードしましょう (つまり、GoogleMapはボタンを押した時にロードしましょう)ということになっているのですが。
GMap2だと、sizeプロパティを指定できるので、非表示のままロードすることも可能になっています。
Google Maps API リファレンス – Google Maps API – Google Code
/* googleマップ */
var currentPos = new Array();
currentPos['latitude'] = 35.7301;
currentPos['longitude'] = 139.7090;/* デフォルト値：池袋駅西口公園*/
var zoom = 14;
google.load("maps", "2",
{
"callback" : function() {
if (google.maps.BrowserIsCompatible()) {
jQuery(window).unload = google.maps.Unload;
var map = new google.maps.Map2(
document.getElementById("map_canvas"),
{ size:new GSize(500,500) }
);
map.setCenter(new google.maps.LatLng(currentPos['latitude'], currentPos['longitude']), zoom);
map.enableGoogleBar();
map.enableDoubleClickZoom();
map.addControl(new google.maps.SmallMapControl());
map.addControl(new google.maps.MapTypeControl());
}else{
window.alert('Browser is not compatible for Google Maps');
return;
}
}
}
);
何が嬉しいかというと、ボタンを押した時にロードするよりも、あらかじめロードしていた方が、多少スムーズに表示されます。