tikeda's blog

Flower, Plant, Travel, Design, My life stories

はてなカウンティング アプリ

先日、はてなカウンティングのアプリがリリースされました。結構前に合宿で作ったラボサービスのiPhone版です。id:chris4403に乗っかってオフの時間に作ってました。

アプリ開発はウェブアプリと違ってエンジニア・デザイナーの協業を効率よく進める方法も勝手が違い、スタイルシートなので、デザイナー側でのちょっとした調整が難しく、画像をグリッドに沿って書き出したり、画像と画像の距離の支持が必要など、社内での統一や分業もウェブアプリと勝手が異なります。そこで今回の開発ではTitanium mobileで開発するとどう変わるかを体感しました。

結果としては、開発スタイル的な部分を取り上げると、ウェブと近い形での開発を進められるメリットがある事を認識できました。デザイナーも自分の手物にTitaniumの開発環境を作っておくことで、画像の書き換え、スタイルの調整をする事は可能そうですし、手元のPC環境でEmulator見ながらデザイン調整する事もでき、よりウェブと似たような開発スタイルで進められる事が把握できました。ただ、「こういう事はやりにくそう」「こういう事は限界がある」やはりデメリットもあったですが、より詳しい内容はid:chris4403+techをみてください。

ということでよかったら使ってみてください。
はてなカウンティング for iPhone, iPod touch, and iPad on the iTunes App Store

新年おめでとうございます




あけましておめでとうございます。今年もよろしくお願いします。
2010年は長男が誕生し家族に変化起こったり、会社に出社しないで働くような仕事環境の変化だったり、これまであまり経験しなかった事ものを作ったりした制作面の変化と「変化」の多い一年だったように思います。
そこで、2011年は広い意味で「集中」を意識した一年にしたいなと思います。そして、そんな集中した環境の中から「野心」というもう一つのキーワードを胸に秘めつつ、一つ一つ具体的な行動に取り組んで行こうと思います。そんな訳でこのブログも今年もよろしくお願いします。
※画像は家族用の年賀状を住所だけ隠したものです。(いい隠し方が思いつかなかった為、モザイクですみません。。)

デザインをちょっと変更

久しぶりにデザインをちょっといじってみました。といっても、窮屈だったので、横幅広げたりしただけですが。毎回画像を多様していて、メインカラムの幅に合わせて画像をこれまで作ってきたのですが、過去のエントリーは作り直すわけにもいかず、放置しますがご了承ください。

結婚おめでとうございます♪


知り合いの結婚式アイテムを作りました。先日、結婚式を迎えられたとのことで、おめでとうございます。新郎が海、新婦が山を趣味に持つという事でアウトドアな感じになっております。
夏の展示会後の空いた時間を利用して描いたのですが、誰かの為に作るわけじゃないものとは違い、受け取ってもらう対象を想像しながら作るというのは、アウトプットは同じだけど全然違い、どちらが好きかといえば、やっぱり自分は後者だけど、それぞれどっちも大切なんだなって改めて感じる機会でした。

はてなココのカテゴリーアイコンをデザイン素材として公開


はてなココのカテゴリーアイコンが全てできた(計62個)ので、無料で使えるデザイン素材ということでCCライセンスにて公開しました。先日オープンした、Hatena Developer Centerはてなココのページからダウンロードできます。ダウンロード、ライセンス詳細については以下のページでお願いします。

はてなココスポット API 第1版 - Hatena Developer Center
「カテゴリー情報取得」という項目内です


データ自体はイラストレーター形式(ai,eps,png)ですし、パスの数も少なくベーシックな機能だけ使っています。その分ちょっと安易などころもありますが、カスタマイズしやすいデータになっていると思います。例えばサイズの拡大やモノクロ2階調に変更など都合に合わせて改変して頂いてかまいませんし。もちろん、はてなココAPIを使ったサービスはもちろんそれ以外のデザイン素材としても自由にご利用いただけます。ご興味ある方はご利用ください。

スマートフォン用に毎回作る画像

スマートフォン用サービスを作る時に必要な画像を用意する際、よくサイズを忘れがちな為、社内用にドキュメントを最近まとめてました。内容が一般的なのでダイアリーにも書いておきます。Androidはひとくくりにするには、不明確な点も多いし、今後アップデートも多そうですが、参考までという事で。ちなみにファイルはPNG。

アプリケーションアイコン

iPhoneAndroid
  • - 3GSw57xh57
  • 4w114xh114
  • w72xh72
※2.0。割と細かいので以下参考
Icon Design Guidelines, Android 2.0

ヘッダー画像

iPhoneAndroid
  • - 3GSw320xh44
  • 4w640xh88
  • x1w480xh45
  • x2w960xh90

タブにのせるアイコン

iPhoneAndroid
  • - 3GSw40xh33
  • 4w80xh66
※selectedはauto effectの為画像は不要
  • x1w32xh32
  • x2w64xh64
※背景はのぞく
※selected画像も別に用意

スプラッシュスクリーン

iPhoneAndroid
  • - 3GSw320xh480
  • 4w640xh960
  • x1w480xh854
  • x2w960xh1708
※上下は端末によってきれる

Store/Market用画像

iPhoneAndroid
  • w512xh512
iTunes Store
※このサイズだけ作っておけば、iPhone用の他のアイコンは吸収できる
  • w320xh480
  • w512xh512
※解像度の高い端末利用かマーケット。今は不明確


  • w480xh854 or800
Android Market用スクリーンショット
※サンプルは古い比率です

ホーム画面用アイコン

iPhoneAndroid
  • - 4w129xh129
※アップルのサイトにあわせた(http://www.apple.com/apple-touch-icon.png
※表面のてかりなくす場合の指定:link rel="apple-touch-icon-precomposed"
※144 x 144のがよい?

ウェブビューで画像を使う場合

あくまで1つの方法として。

HTML

retina display対策の為、2倍で作ってwidth,heightを指定して半分に

  <img src="64_48.png" width="32" height="24" />
CSS

retina display対策の為、2種類の画像を使いわけ

/* retina display以外の指定 */
body {
  background: url(32_24.png) no-repeat;
}

/* retina displayの指定 */
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  body {
    background:#fff url(64_48.png) no-repeat;
    /* サイズの指定を忘れずに */
    -webkit-background-size: 32px 24px;
  }

毎朝のアイコン作り


先日、PC版のはてなココ用にスポットのカテゴリを表す為のアイコンを作りました。久々にこの手の仕事をすると、のめり込んでしまいます。

リリース時はグルメ、文化・歴史といった大カテゴリだけ作ったのですが、その後、毎朝仕事の前に1個か2個づつ作り続けてみています。このままのペースでいくと年内には全てのスポットのアイコンが完成しそうです。

アイコンはイラレで描いてるのでスマートフォン・PC問わず色々な場面で使え重宝しそうな為、スポット用が全て完成したら、その後はtypepadのフリーの絵文字ベクターデータ版という所を目指し、数が揃ったらCCライセンスとかで公開しようかと思いますがいつになるだろう。

ココ PHOTO CALENDAR


tikeda's ココ PHOTO CALENDAR
先日、はてなココのフィードページがリリースされ、本人のイマココ履歴のフィードが使えるようになりました。カレンダーぽいビューが個人的に好きなのですが、ICSを使った表示が面白そうで試したところ、写真がないのがつまらないので、ATOMフィードを使って、簡単にカレンダーっぽいビューを自分用に作ってみました。


ココのポラ風写真を、コルクボードに刺してるっぽくしてみてます。秘密スポットじゃない場合は日別ページもあり、こっちはGoogle Mapをちょっとセピア調に表示して、こっちも貼り付けた感じにしてみてます。自分のは今は結構歯抜けなので、普段写真を使ってる人はもっと楽しいかもしれません。なるべく自分も歯抜けにならないようにしてみようと思います。

ちなみに


Webkit,Firefoxだと日別ページで地図の右上にアナログ時計を入れてみたんですが、「短針」「長針」「土台」の画像を作り、Transformを使ってCSSで針を回転させてやってみました。

.短針 {
 -moz-transform:rotate((30 * 時)deg);
 -webkit-transform:rotate((30 * 時)deg);
}
.長針 {
 -moz-transform:rotate((6 * 分)deg);
 -webkit-transform:rotate((6 * 分)deg);
}

はてな京都オフィスのルームサイン


はてなの新しい京都オフィスには、鉾の名前から取ったガラス張りの会議室があります。柱に続いて今度はこの会議室のルームサインを作りました。



デザインは鉾の紋を元にしており、順に「菊水」「舩」「長刀」「月」です。壁面のガラスのサイン部分だけを曇らせるよう、カッティングシートを直接会議室のガラスに貼り付け、サイン部分だけが残るようにカッターでカットしていきました。id:tomomiiに手伝って頂きなんとか仕上げました。

試作

以下、3種類の素材を使って、難易度の一番高そうな「菊水」で試作品を作りました。

カッティングシート サンド

採用されたものです。ガラスはカッターでは切れないので、カッティングシートを最初に張っています。シート自体がやや分厚いので、上からの光の入り具合が断面で微妙に変わったりするのがちょっと気になります。

カッティングシート マットホワイト

上と同様にカッティングシートなんですが、シートを張る場合の空気の入りが影が随分気になります。実際のオフィスの表札もこれが一番大変でした。時間がたてば小さな物は抜けるのですが、何度も張り直してます。ホワイトはコントラストも強いので細かい処理も気になります。

くもりガラススプレー

最初id:jkondo:の提案でこの方法を検討していました。断面が薄いので、一番目立たないです。最初にマスキングを作るのですが、カッターの刃を外に逃がせないのでこれが大変です。また、マスキングなので、淵がピシッとしにくい上、シートと違って、やり直しがきかないのが一番の難点です。

サンプルのガラスで作った時は机の上だったのですが、壁に貼り付けての作業は大変したが、オフィスにこられた際はこちらにも目を向けてみてください。
ちなみに、素材や道具は全て東急ハンズで買ってきたものです。同じように誰でも作る事はできます。

北陸旅行




金沢21世紀美術館 - カラー・アクティヴィティ・ハウス




輪島朝市


輪島千枚田


ヤセの断崖


千里浜なぎさドライブウェイ

先週、14日、15日と北陸を回ってきました。石川には何度か行っていたのに、金沢21世紀美術館に行った事がなかったので、それにあわせて、白川郷に訪れ、和倉温泉に泊まり、輪島の朝市を見物、能登の海岸を走り、久しぶり一人でのんびりしました。