そういえば、今年向けの新しいアプリを一つ作ったのです。
「恵方コンパス」
http://eho.mogya.com/
もうすぐ恵方巻きを食べる日だと思うのですが、あれってどっち向いてたべたらいいかわからないじゃないですか？
コンビニとか行けば、西南西って書いてありますが、そもそも北はどっちやねん？ってなりません？僕だけじゃないですよね。
というわけで、窓から太陽の位置を見たら恵方がすぐにわかるページを用意してみました。
現在の時刻と太陽の向きから、どっちが恵方なのかを見ることができます。
去年の恵方巻きの日の夜に思いついて、翌日作ってそのまま一年間寝かしてあった熟成のアプリです。
ぜひ使ってみてくださいませ。
モバイラーズオアシスの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サイトでネイティブアプリ並みの機能を持たせるのはちょっと無理があるかなぁ、と思いました。
このブログでもやっているのですが、ブログ記事のはじめの方にとりあえず何でもいいから写真を入れておくとそれだけで記事がなんだかわかりやすくなる、
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で動くことを確認してありますので、最近のブラウザであればたいてい動くんじゃないかと思います。
神戸のウェブ勉強会 ウェブテコのご縁で、北野坂にある栄ゐ田(えいた)というお店のウェブサイトの作成をお手伝いさせていただきました。
北野坂 栄ゐ田
いただいたイメージを元にHTMLとCSSを起こして、JavaScriptによるスクロールや縦書きの実現などのWEB開発を担当させていただきました。
ご覧の通り、お品書きをイメージした横長のデザインになっています。WEBの世界はテキストが左から右、上から下へ流れることを前提にしているため、右から左に移動するサイトを作るのはかなり大変でしたが、最終的にXHTML 1.0 StrictなHTMLに落とし込むことができました。
今ちょっと変わったサイトを開発中です。
開発中に「1280×1024のブラウザで見ると様子がおかしい」というレポートをいただいて。
そういえばあまりそういうテストをしていなかったな、と思って、ブラウザのサイズを自在に変える仕組みというのを作ってみました。
Google英語検索フォームは、英語で検索したかったら毎回mogya.comを見にきて検索しないといけないので、営業的には大変おいしいツールなのですが、そんなめんどくさいことをする人はいないだろうと思います。
普通にブラウザから検索できるように、お気に入り(ブックマークレット)を作ってみました。
Google英語
お気に入りに追加(IE以外のブラウザなら、ブックマークバーにドロップ)しておいてつかいます。
クリックすると検索キーワードを聞いてくるので、適当に入力してOKを押すと、その単語をGoogle英語検索してくれます。
WEBサイトを見ているときに、文字列を選択して「Google英語」をクリックすると、そのキーワードでGoogle英語検索を行います。
参考:
tomoyaさんのところで、Google英語検索いいよ！という話が出ているのです。
Googleで検索するときは .com と .co.jp を使い分けよう。 – 日々、とんは語る。
僕はいつごろからか、Google で調べるときは、.co.jp と .com を使い分ける様になったのですが、これが非常に便利です。
.com で検索すると、メインが英語圏になり、英語圏の情報が上位にやってくるようになります。 .co.jp だと、メインが日本語な上、日本語のページを検索というオプションしかなくて、英語圏だけを調べるというのが不可能なのです。
google.comって、google.co.jpにリダイレクトされません？
http://www.google.com
iGoogleを使っているせいなのかなぁ?
で、普通に検索するフォームを用意してみました。
英語優先で検索
日本語優先で検索
フォームの需要があるのかどうか知りたいので公開してみます。
special thanks:
» googleは英語を知らない – 葉っぱ日記
追記：Google英語検索ブックマークレットもつくりました。毎回ここに検索しに来なくていいのでこっちのほうが便利かも。
小さい”つ”が消えるマシーンをみて、
最初、JavaScriptで作ろうかと思いましたが、Flexの方が簡単なので、Flexで作りました。
「小さい”つ”が消えるマシーン」作りました
ということだったので、JavaScriptで作ってみました。
メイドめーるというアプリケーションを公開します。
メイドめーるは、Googleカレンダーの予定を毎朝、携帯電話にメールしてくれるサービスです。
メールに返信することで、新しい予定を登録することも出来ます。決まったフォーマットでなくても、打ち合わせのメールをそのまま転送すればOK。
ユーザー登録しなくても、メールの内容の解析だけ試してみることが出来るので、よかったら試してみてください。
試してみる – メイドめーる
使うアテがあるので、作ってみました。
/* メールアドレスの単純ミスをチェック /
function checkEmail() {
var str = document.getElementById(“email_input”).value;
var error_msg_node = document.getElementById(“mail_error_msg”).childNodes[0];
if( !str.match( /@/ ) ) {
error_msg_node.nodeValue = “@がないですが、これって本当にメールアドレスですか？”;
return 1;
}
if( !str.match( /./ ) ) {
error_msg_node.nodeValue = “.(ドット)がないですが、これって本当にメールアドレスですか？”;
return 1;
}
if( str.match( /@.\,/ ) ) {
error_msg_node.nodeValue = str.replace(“,”,”.”)+”ではないですか？”+str+”と入力されています。”;
return 1;
}
if( str.match( /@..j$/ ) ) {
error_msg_node.nodeValue = str+”pではないですか？”+str+”と入力されています。”;
return 1;
}
if( str.match( /@..p$/ ) ) {
error_msg_node.nodeValue = str.replace(“.p”,”.jp”)+”ではないですか？”+str+”と入力されています。”;
return 1;
}
if( str.match( /@..co$/ ) ) {
error_msg_node.nodeValue = str.replace(“.co”,”.com”)+”ではないですか？”+str+”と入力されています。”;
return 1;
}
if( str.match( /@.mai[^l]/ ) ) {
error_msg_node.nodeValue = str.replace(/mai[^l]/,”gmail”)+”ではないですか？”+str+”と入力されています。”;
return 1;
}
if( str.match( /@.*[^.]co/ ) ) {
error_msg_node.nodeValue = str.replace(/([^.])co/,”$1.co”)+”ではないですか？”+str+”と入力されています。”;
return 1;
}
error_msg_node.nodeValue = “”;
return 0;
}
和尚が指摘されたような入力ミスがあったら、メールアドレス欄の右側に警告が出ます。
以下の項目をチェックしていますので、やってみてくださいませ。
JavaScriptで単純にチェックしているだけです。あまりJavaScriptのコードを書いた経験が多くないので、識者の方、添削していただけるととてもうれしいです。
