ダニエルの冒険

I’ve added the UNIQLO calendar to the sidebar of this blog. Danny Choo wrote about it recently and after seeing UNIQLO’s equally awesome Tokyo Fashion Map I instantly fell in love with the calendar.

Click the little video and it will open the full calendar (with music). When you click the video in the full version, the current frame is frozen and broken up into a grid of clothes, where the colour of each piece of clothing is used to create a collage of that frame.

The video is in fast-motion and it makes it feel like a stop-motion video. On top of that, the tilt shift shots make it feel like the shots are of a little toy-town and not huge cities in Japan. I’ve always felt that Japanese cities feel like “toy-towns”, just because everything is so clean and everything is done so properly… it’s like a fantasy world.

Over the last few weeks I have been working on SatomiDance.net when I’ve had time in the evenings.

I did my best to incorporate as much technology as possible. There’s lots of DOM manipulation (I ♥ Prototype, AJAX calls, XML parsing, Flash/Javascript interaction, integration with external services such as Youtube and Flickr, and the whole thing uses Wordpress as a CMS.

I had been wanting to do some software project (a game or website) that’s mostly hand-drawn, but I really don’t have the talent to actually draw and colour everything. I could finally do it though..! All drawings by Satomi herself

Flash (main page)

It was quite fun to work with Flash again. The main page has a Flash video (made in iMovie, converted to FLV with ffmpeg) being played from underneath a transparent PNG. I used fixpng.js to get all this work on IE6. The mute button is at the bottom of the screen, and uses Flash’s ExternalInterface library to send a “mute” command through Javascript. CSS’s z-index makes sure everything’s drawn in the right order. I was scared that IE6 wouldn’t support that attribute.. but it does. Whew.

IE6 doesn’t pass mouse events down to the Flash video when there’s a PNG over it. Safari seems to pass down mousemove but not clicks. I was about to use ExternalInterface to pass clicks and mousemove events from Javascript into Flash, but eventually decided not to use video controls at all as a design decision so I didn’t proceed with that plan.

Scriptaculous

Scriptaculous is also used to make a bunny slide in from the left side of the screen after 5 seconds. It is not used for the bunny at the top of the screen… that’s just me playing around with mousemove callbacks and CSS.

Youtube

The videos page is entirely Javascript. I spent a few hours one night (or one early morning, technically) writing a script to connect to Youtube’s XML API, pull down a playlist from Satomi’s account, and grab all the information from that. It displays all the thumbnail images, and when clicked on, the full video is displayed with some meta info. The video size is determined by the API call results, so it dynamically choses what size to make the Flash object. Scriptaculous is used to clear out the previous video content and display new content.

Flickr

Flickr’s pro accounts are awesome: unlimited space, unlimited bandwidth, and great tools for organising photos. Satomi can use Flickr to organise her photos and they are displayed by a version of FAlbum (which I localised into Japanese myself).

Wordpress

Wordpress powers the whole site. All hacks (except for some wp-mail.php modifications to add better UTF-8 support) are contained in a custom theme, so it can be upgraded safely without worrying about the upgrade over-writing any of the code.

Conclusion

By integrating as closely as possible with Wordpress, Youtube and Flickr I’m trying to see how much control I can pass on to Satomi. When she takes new photos or videos, she should be able to put them up right away without waiting until I have time to do so. Wordpress not only controls the blog section, but many sections of the site (performance information, classes/workshops page, profile) are just Wordpress pages with just as much control as the blog.

Some design decisions are definitely not ones I would have made by myself, but in the context of a website targetted at Japanese people, I had to change the way I thought about web design to meet the their expectations. A lot could be written about that, but I’ll have to leave it for a day when I have more time.

Right after the talk on the 8th I’ll be dashing off to Dublin to be at the embassy on the 9th. There will be an English test, Japanese test, and interview for the MEXT scholarship. Any time I’ve mentioned the English test to anyone I’ve had surprised responses—”But you’re a native speaker!” Looking at the past papers though, the English test actually seems pretty tricky. Some of it is in the form of proof-reading where you find the missing word (usually a preposition or an article) in a big paragraph of text… which is no problem to do but is a problem to do at a decent speed.

I’m quite looking forward to the Japanese exam, but I’ve always enjoyed those. Placement tests are always interesting to take because I feel pretty happy about my level of Japanese at the start as a blast through all the multiple choice questions, but that quickly goes away as the paper inevitably gets more difficult and I spend the latter half of the exam racking my brain trying to remember how to read/write a particular kanji or getting frustrated because I don’t understand one critical part of vocabulary.

Interviews are always fun though, and as my friends know all too well, I like talking about Japan more than anything else. (Sean’s the only friend who can stand this, and that’s because he can give as good as I can.)

Well, I’m off to pick up my shiny new MacBook Pro!

Update (30 Jun): I will be giving this talk as originally planned. Please disregard 26 Jun update
Update (26 Jun): Patrick will be speaking at this event instead of me. I expect that he will choose a different topic to talk about, but it will be exciting whatever he chooses!

I will be giving a talk at it@cork’s iPhone Applications Event on the 8th of July in—you guessed it!—Cork!

The title of the talk will be “Creating New Interaction with the iPhone”. Thanks to the ever-awesome Damien for hooking me up with it@cork!

Here’s the abstract:

This presentation will introduce the power of the iPhone and demonstrate how easy it is to use this power to create exciting and truly innovative applications. Examples of impressive use of interaction technology with the iPhone will be demonstrated, and yet untapped potential discussed.

The iPhone is steadily gaining new interaction capability with every new version Apple releases. The iPhone 3G added Assisted-GPS and 3G internet connectivity. The iPhone 3G S is now bringing a magnetometer (digital compass), higher resolution digital camera, VGA video camera, faster hardware and more memory into the hands of consumers. Combine all this modern input technology with an equally impressive set of output technology, including video, audio (speaker, headphone jack, Bluetooth), force feedback and internet connectivity, and there is no other device on the market with such huge potential in such a small form factor.

The iPhone SDK is free and allows anyone with a Mac to tap into this potential. There are plenty of apps waiting to be created, and this presentation aims to get people excited about app development and to get their ideas off the ground.

Plenty of exciting things to talk about. Looking forward to it!

I’ve been developing material for App School for a little while now, and we were mentioned in The Irish Times today.

Patrick is helping me prepare the material, Damien Mulley is all over publicity, and I’ll be delivering the material. SQT Training Ltd is the company behind the course and it’s been great working with them.

Lots of buzz so far this morning and looking forward to seeing lots of interest!