作ったものの最近のブログ記事

あけましておめでとうございます。初日の出は見に行ったけれど、正月とかあまり気にせず元日からコードを書いています。

さて、お正月にちなんで、ひたすら寝ているプログラムsleepUntilというのを書いてみました。sleepじゃなくてsleepUntilなので、指定した時刻までただ寝ているプログラムです。

sleepUntil (mogya's gist: 1550431 -- Gist)

なんに使うかといいますと、プログラムを夜中に走らせるために使います。
スクレイピングは人が活動していない時間帯に走らせるのが基本なので、夜中１時スタートというのが普通です。これまでは、時計を睨みながらsleep 3000; とかしていたのですけれど、そんな計算は自分でしてくれるプログラムがsleepUntilというわけです。

$ sleepUntil "1:00"

って書けば、sleepUntilは起動と同時に眠りについて、夜中一時に(起きて即座に)終了します。

$ sleepUntil "1:00";(夜中に走らせたいコマンド)

という具合にしておけば、sleepUntilが深夜一時に終了したあと、(夜中に走らせたいコマンド)が実行されます。実質的に、夜中一時に該当プログラムを起動するようなことができるわけです。

cronでいいじゃないかと言われたらそのとおりなのですけど、一回しか実行しないようなものをcronに書くのはなんだか気がひけるのです。 実行環境が違うとかそういうことも気にしなくていいですし。

時刻のパースはTime.parseに丸投げです。パースしてみて過去の時刻になったときは翌日の時刻に読み替えるようになっています。

「頭ん中」 のmsngさんが、正確な時刻が分からない時計というのを提案されています。去年の話だけど。

もしかしたら進んでるかもしれないし
もしかしたら遅れてるかもしれないということになると
最悪の場合でも間に合うように動かないといけないから
結果として早め早めの行動ができるようになるかもしれない。

これは面白そうだと思ったのでiPhone用の時計を作ってみました。

vogue clock.

ズレは毎秒計算し直されるので、時計の針は平気で戻ったり進んだりします。時計とは思えないおちつかなさですね。

HTML5を使って時計を書くCoolClock を改造して作りました。

なので、FireFoxやIE9はもちろん、iPhoneやAndroidを含むたいていのブラウザで動作します。vogue clock.を開いてみてくださいませ。

iPhoneだと、ホームスクリーンに追加することでアドレスバーを非表示に出来るのですけど、画面一番上の時計部分を隠すことが出来ないので、正確な時刻はすぐ上を見ると分かってしまうという間抜けなことになっています。実用的に使おうと思ったら、アプリにする必要がありそうですね。

TitaniumMobileでTwitterを扱うときに便利なtm_twitter_apiの新バージョンを公開しました。

mogya/tm_twitter_api - GitHub

• Androidでも動くようになりました！
• twitterのUIが変わって動かなくなっていたので、新しいUIで動くようにしました

いずれも他の方が書いたパッチを取り込んだものです。オープンソースって素晴らしいですね。

• donayamaさんが紹介してくれた、exilisさん作のパッチ１、２
• Titanium MobileでTwitterOAuth時のエラーと解決方法 - 俺の作業ログ

使い方

Ti.include("lib/twitter_api.js");
//initialization
Ti.App.twitterApi = new TwitterApi({
    consumerKey:'YOUR CONSUMER KEY of twitter API',
    consumerSecret:'YOUR SECRET of twitter API'
});
var twitterApi = Ti.App.twitterApi;
twitterApi.init(); 

こんな感じで初期化します。CONSUMER KEYとSECRETは、Twitterの開発者ページでアプリ登録したときにもらえるものです。

twitterApi.init(); を初めて呼び出したときは、ユーザーさんにOAuthのための画面が掲示されます。ユーザーさんがアカウント名とパスワードを入れると、TwitterがPINコードというのを返してきますが、これはtm_twitter_apiが勝手に読み込んで認証処理が終了します。 initがすんだら、twitterのAPIを呼び出すことができます。とりあえずつぶやいてみましょう。

//status update
twitterApi.statuses_update({
    onSuccess: function(responce){},
    onError: function(error){},
    parameters:{status: 'yah! this is my first tweet from twitter_api.js! '}
});

　つぶやくときは、Twitterのstatuses/updateというAPIをつかうので、tm_twitter_apiでは、twitterApi.statuses_update関数を呼び出します。
うまくいったときはonSuccess、なにか問題が起きたときはonErrorのコードが呼び出されます。
つぶやきの内容など、APIに渡す引数はハッシュparametersにいれて渡します。
この構造は、全てのAPIに共通です。

//get tweets
twitterApi.statuses_home_timeline({
    onSuccess: function(tweets){
        for(var i=0;i

つぶやきを取得するコードです。onSuccessでtweetsという引数が渡されてくるので、これをループで回すと、つぶやきを取得することができます。

AndroidはGaraxySしか試せてないので、タブレット端末とかだと変わった動きをするかもしれません。どんなことになったか教えていただけると嬉しいです。
もちろんパッチも歓迎です(笑)

ShotNoteというデジタル&アナログな商品がキングジムさんから発売されました。

手書きメモをスッキリデジタル化「ショットノート」 | KINGJIM
ASCII.jp：デジタル＆アナログの新感覚文具「ショットノート」

メモ用紙の四隅にマーカーが印刷されているので、専用アプリで取ると自動的に台形補正＆日付のOCRをしてくれる、というものです。EverNoteに送れるのも嬉しい。

クリアファイルで作る薄くて軽いホワイトボードの人としては、これはクリアファイルで作るべきじゃないかと思いました。

・・・できた。

こういうふうにして使います。

これさえあれば、任意の紙に書いたメモをShotNoteで撮影して取り込むことが出来ます。超便利。

だめだだめだ、そこであきらめちゃダメだ！もっともっとがんばれよ！

でも、こんなの毎回つくるのはめんどくさそうなので、四天王メーカーをつくってみました。

そういえば、今年向けの新しいアプリを一つ作ったのです。

「恵方コンパス」
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で動くことを確認してありますので、最近のブラウザであればたいてい動くんじゃないかと思います。

神戸のウェブ勉強会 ウェブテコのご縁で、北野坂にある栄ゐ田(えいた)というお店のウェブサイトの作成をお手伝いさせていただきました。

北野坂　栄ゐ田

• Design：川辺 英之 (株式会社エープラス)
• Assistant：北方 基一 (mlabo.cc)

いただいたイメージを元にHTMLとCSSを起こして、JavaScriptによるスクロールや縦書きの実現などのWEB開発を担当させていただきました。

ご覧の通り、お品書きをイメージした横長のデザインになっています。WEBの世界はテキストが左から右、上から下へ流れることを前提にしているため、右から左に移動するサイトを作るのはかなり大変でしたが、最終的にXHTML 1.0 StrictなHTMLに落とし込むことができました。

今ちょっと変わったサイトを開発中です。 開発中に「1280×1024のブラウザで見ると様子がおかしい」というレポートをいただいて。

そういえばあまりそういうテストをしていなかったな、と思って、ブラウザのサイズを自在に変える仕組みというのを作ってみました。

• ボタンを押すとブラウザのサイズが変わります。
• IE7だと、複数タブを開いた状態では上記動作が利かないみたいです。最初にこのページを開いてブラウザサイズを変えてから所望のサイトに移動するのがいいみたい。
• ウィンドウを指定したサイズに変更するを参考にしました