リリース

「ねんがんの iPhone 4 をてにいれたぞ」ということで。

iPhone / iPod touch 向け、はてブ検索Webアプリ「HatebuSearch」を Retina Display 対応にしました。

対応しました、といってもほとんどHTMLなので、Webclipとアイコン5つのサイズを縦横2倍づつにして、CSSで以前のサイズを指定しただけ(つまり画像のサイズを16×16→32×32にして、CSSで width: 16px; height: 16px; を指定)。

作業に1時間もかからなかった割には、かなりきれいになって満足。すこしは画像の容量増えるかと思ったけど、全部で5.6KB→6KBならまったく問題ないでしょ。

参考

• 【Webアプリ】iPhone4 で画像をきれいに表示する色々な方法【試行錯誤編】 | KAYAC DESIGNER’S BLOG – カヤックの意匠部によるデザインやマークアップの話
• iPhone / iPod touch 向け、はてブ検索Webアプリ「HatebuSearch」をリリース – 情報と音楽

iPhone / iPod touch 向け荷物配達状況確認フロントエンド「サクっと配達状況確認」をちょっとだけアップデートしました。

追加した機能は配達業者および問い合わせ番号の保存。一度問い合わせを行ったら、次に表示したときに、前に入力した情報を表示します。毎回コピペしなくていいので、便利ですよ。

また、これに関連して、入力した情報(と保存している情報)をクリアするボタンも追加しました。

なお、保存にはCookieなどでなくlocalStorageを利用しています。私が問い合わせ番号等を知ることはありません。

ちなみに今回、iPhone 4 用にアイコン変えようと思ったものの、元となる素材の解像度が足らず断念。自分で描く技術ないし。どうしよう。

それにしてもこのブログ、もはやリリース情報だけになりつつあるなあ・・・。

4ヶ月振りの更新です。twitterあるとほんとにブログ書かないな、私。

JavaScriptによるハーモノグラフ・シミュレータ「Harmonograph.js」をちょっとアップデートしました。

今回追加した主な機能は「パラメータのランダム設定」。

新たに「Physical parameters / 物理パラメータ」のあたりにできた「Randomize / ランダム」ボタンをクリックすると、音程・抵抗・振幅比がランダムな値に設定され、まともな音程とはひと味違う、複雑な図形が楽しめます。

下が、この機能で作図した例

パラメータの意味がわからなくても「Randomize / ランダム」と「Draw」を交互にクリックしてみてください。

なお、(パーマリンク以外で)Harmonograph.jsにアクセスしたときにも、これと同じ処理をしていますので、アクセスするたびに、違うハーモノグラフを楽しめます。

ハーモノグラフにはもうだいぶ思い入れがあるので、今後もいろいろやろうと考えてます。

その他の変更

• 「ハーモノグラフの種類」の初期設定を回転ハーモノグラフに。直交だとランダムにしても地味なので・・・。
• 「ギャラリー」の読み込みを非同期に。ページの読み込みを高速化するために、ギャラリーはあとで読み込むことにしました。
• コードの整理

iPhone / iPod touch から自分のはてなブックマークにアクセスする場合、iPhone / iPod touch 向けのはてブのページでも、公式アプリでも、ブックマークの検索ができず不便なので、 はてブ検索Webアプリ「HatebuSearch」を開発。本日、リリースしました。

• HatebuSearch
  http://htbs.penguinlab.jp/

HTML5の機能を生かした、速くて軽い動作が売りです。

こちらは紹介動画。

はてなから取ってきたデータは端末に保存するため、一度データを取ってこれば通信なしで検索ができ、素早くブックマークにアクセスできます。

ただし、端末に保存されたブックマークは自動ではアップデートされないので、たまに(時間と通信料が気にならないときに)左上の「更新」をタップして、ブックマークを更新してください。

なお、iPhone以外でもWin版Safari、Chromeでも動作確認してますが、まあ、PC使ってるなら、公式のはてブのページを使えばいいと思います。Androidは持ってないからわからん!

バグや要望等あれば、twitterで @labocho つきでつぶやく、この記事にコメント、 labocho[at]penguinlab.jp 宛にメールなどの方法で伝えていただくと対応できるかもしれません。

iPhone向けサイト、HTML5でのWebアプリ開発については、そのうち記事を書きたいと思ってます。

佐川急便/クロネコヤマト/日本郵便の3社の、iPhone / iPod touch 向け荷物配達状況確認フロントエンド「サクっと配達状況確認」をリリースしました。

• サクっと配達状況確認
  http://penguinlab.jp/tracking/

ネットで買い物すると、届くのが待ち遠しくて、配達状況をよく確認するのですが、毎回、各社のページを検索→重いトップページを開く→入力というのが面倒になってきたので作成しました。

使い方は見ればわかると思いますが、配達業者を選択して、各社の問い合わせ番号を入力、確認をクリックすれば、各社の確認結果のページへリダイレクトします。ハイフンやスペースが入ってしまっても、自動で除去します。

iPhone / iPod touch のホーム画面に置いとくと便利かもしれません。

今回、ホーム画面用のアイコンは「Flavour Extended: The Ultimate Icon Set For Web Designers – Smashing Magazine」をほぼそのまま利用さしてもらいました。ありがたい。

なお、PCや他のスマートフォンでも使えると思いますが、見た目と動作は保証しません。

iTunes Store は、音楽はもちろん、Podcastやオーディオブックなど、魅力的なコンテンツが多数あります。しかし、新しいコンテンツが追加されても、なかなか気付きにくいという弱点があります。

幸い、iTunes Store はAPIを通じて検索することができるので、検索結果をRSSで出力するWebサービスを作成しました。

• iTunes Store RSS Generator+

検索条件を指定して「検索」をクリックしたら、「Get RSS Feed」をクリックするか、ブラウザやブックマークレットによるRSS自動検知機能を使って購読してください。

ただ、作成中に気付いたのですが、iTunes Storeの検索APIでは並べ替えができず、リリース日の情報も持たないため、必ずしも新しいコンテンツをチェックできるわけではなさそうです。これはAPIの仕様上どうしようもないのでご了承ください。

過去にも言及しているハーモノグラフ。振り子の組合せで、振動≒音の調和を視覚化する機械です。

本物をつくるのはちょっと大変なので、JavaScriptとcanvasを利用したWebアプケーションを作りました。

• 
  Harmonograph.js : Visualize Harmony
  http://penguinlab.jp/harmonograph/

各種パラメータを設定して「Draw」で描画開始。すきなところで一時停止もできて、専用のtumblrへの投稿やローカルへの保存もできます。パラメータはGETでも指定でき、同じ設定を開くパーマリンクも表示されます。

下図は描画例。

• 長三度(ドとミの音程)
  
• 完全15度(2オクターブ)
  
• 短10度(ドと1オクターブ上のミ♭)
  

インターフェイスに英語・日本語が入り交じってるのは、英語版つくる能力と気力はないけど、日本語わからん人でも適当に触れるようにするため。簡単な英語がわかる日本語ネイティブと、簡単な日本語がわかる日本語非ネイティブだったら、前者のが格段に多いもんね。

英語版WikipediaのHarmonographの項をみると、Web上でハーモノグラフを再現してるのはいくつかあるけど、描画過程が見られて、パラメータが自由に変更できて、保存もできる、というのはいまのとここれだけだと思います。

Firefox / Safari / Chrome / Opera の最新版で問題なく動くはずだけど、IEはcanvas要素サポートしてないので対象外。一応、ExplorerCanvasを入れてるので、描画はできるけど、tumblrへの投稿と、ローカルへの保存はできない(ExplorerCanvasがtoDataURLに対応していないため)。あとChromeもローカルへの保存はできない。

ちなみにWebアプリケーションといいつつ、コアはJavaScriptですので、tumblrへの投稿と投稿取得以外はオフラインでも動いたりします。それにしてもcanvas要素の表現力と描画速度はなかなかすごい。今後の可能性を感じさせます。

ところで、Chromeで動かすと他ブラウザとはくらべものにならないくらい速い。が、描画が荒く、線が途切れたりする。Firefoxが一番綺麗に書ける気がします。

あ、あと当初想定してなかったけど iPhone / iPod touch でも動きます(iPhone OS 3.0 の iPhone 3G で確認)。やるなあiPhone版Safari。

ハーモノグラフについては、Harmonograph.jsでも簡単に解説していますが、より詳しい情報は、アンソニー・アシュトン著「ハーモノグラフ 音がおりなす美の世界 (ピュタゴラスブックス) 」を参照してください。というか少なくとも日本語ではこれ以外の情報は相当少ないです。

過去、ハーモノグラフに言及した記事

• 音の紡ぎ出すカタチ – 情報と音楽
• ソフトウェア・ハーモノグラフ実現へ。 – 情報と音楽

知らない店なんかに行くとき、私はネットで調べて地図を印刷して持って行きます。でも、あんまり降りたことない駅で降りると、どっちがどっちだかわからなくて、迷うことがよくあります。

当然、方位磁針（コンパス）を持ってりゃいいんですが、そんなもん常に持ち歩いてるはずもなく、毎回不便に思ってました。

で、携帯電話にそんな機能があればいいなと思ったわけで、どこかでききかじった、アナログ時計で方角を知る方法を応用してみようと思いつきまして。

はじめは携帯電話用アプリを作って、端末の時刻から計算しようと思ったものの、開発環境を整えるのがしんどくて断念。次にHTMLで作って、JavaScriptで時刻に応じて表示画像変えようと思ったものの、私の端末はJavaScript実行してくれないようで断念。

結局、ユーザが現在時刻を選ぶという、とってもスマートでないインタフェイスに落ち着きました。

開発終わってからまだ太陽が出てないので、未テストですが、よかったら携帯電話のブックマークに入れてみてください。

• 携帯電話用簡易方位磁針「SUNPASS」（ペンギンラボ内）

太陽で方角を知るのでSUN +COMPASS=SUNPASSという2分で考えた安直な名です。

何年か前にほぼ完成してたテルミンのシミュレーションソフト「ソフトテルミン」がようやく公開できるようになりました。
で、Vectorさんにアップして数日したら、新着ソフトレビューで取り上げて頂けるとのこと。窓の杜でソフトレビューを書いて頂いたことは過去に2度（コレとコレ）あったが、Vectorは初めて。
7月14日にレビューが掲載されるというので、見に行ったところ・・・


（2007/07/17のVectorトップページ。下の方に注目）
おお！トップページにソフトテルミンが！（感動）
で、レビューはこちら。
作者の私よりよほどよく解説してくれてます。さすがプロ。
毎度のことながらフリーウェアなので、紹介されようが、DL数が増えようが一銭の得のもなりゃしませんが、人様に評価されるのは嬉しいモノです。

追記：
窓の杜でも紹介していただきました。
世界最古の電子楽器“テルミン”をパソコン上で演奏できる「ソフトテルミン」