ktyr report

[CSS3]iPhoneのホーム画面の動きをCSS3+jsで

2011-12-02

iPhoneのホーム画面の動きを２つの方法で制作しました。
CSS3のanimationで動かす方法と
CSS3のtransformの値をjQueryのanimateで変化させる方法。
iPhoneで閲覧した場合
前者は動的にanimationの設定をしているので
トゥイーンが始まる時にちょっと動作が止まってしまいます。
後者は滑らかです。
Firefox,Chrome,Safari,iPhoneで動きます。

サンプルCSS3 animation

サンプルCSS3 jQuery.animate of translate

[CSS3]animationの動的生成

2011-11-28

タイトル通り
四角がクリックした座標へCSS3のanimationを使って移動します。
Firefox,Chrome,Safari,iPhoneで動きます
jQueryプラグインで既にあるようですが後学のために。
CSS3のtransitionでアニメーションするjQueryプラグイン「jQuery transition Animate」[to-R]

サンプルdynamic_css3

参考にしたサイト
CSS3リファレンス

[javascript]audio.js

JavaScript

2011-10-21

音を出すためのjs
HTML5ではなく小さなflashを利用しているので
ほとんどのブラウザで大丈夫です。
しかし、iPhone,iPadではエラーが起きるので
下記コードみたいに条件判定するとよい。
見た目を変えたいときはaudio.jsの中にCSSの記述があるので
これを書き換える。
※追記ソースコードをよく見たら、ブラウザによってはHTML5を使っているようです

サンプルaudio.js

var isTouch = ('ontouchstart' in window);
init_audio();
function init_audio(){
	audiojs.events.ready(function() {
		if(isTouch)return;
		audiolist=audiojs.createAll();
	});
}

参考にしたサイト
audio.js

[javascript]JSONViewer

2011-09-28

タイトル通り

JSONViewer

[Twitter]tweet with media

2011-08-17

twitterの画像共有APIが公開されたので遊びました。

tweet with media

参考にしたサイト

POST statuses/update_with_media | Twitter Developers
https://dev.twitter.com/docs/api/1/post/statuses/update_with_media

themattharris/tmhOAuth – GitHub
https://github.com/themattharris/tmhOAuth

Index of /projects/phpThumbnailer/
http://www.hido.net/projects/phpThumbnailer/

jQuery.uploadでアップロード画像のサムネイルの作成 | Toro-Unit Blog
http://www.torounit.com/blog/2011/05/18/735/

[ajax]Twap

2011-08-01

GoogleMapをクリックするとクリックした地点から
半径3km以内のツイートを検索して地図にプロットします。
制作時間：2時間

Twap

[iPhone Apps]MangaPhoto(マンガフォト)

iOS Apps

2011-07-25

AppStoreでの公開は終了しました。

iPhoneアプリ作りました。
写真にフキダシや擬音を付けられるアプリです。
縦書き対応
Facebook、Twitpic対応
英語、日本語対応

Description
MangaPhoto is photo retouch application like japanese Manga.

[Features]
・Enable to draw a line by touching the photo
・Enable to set the line color,thickness,transparency.
・Enable to add balloon to photos.
・Enable to set text on balloon.
・Enable to add imitative sound image.
・There are 35 Balloons and 104 imitative sound images.
・You can upload image to twitpic, facebook or E-Mail.

マンガフォトは写真をマンガ風に加工できるアプリケーションです。

写真に線を引いたりフキダシを追加すること出来ます。
フキダシの文章は縦書き、横書きに対応しています。
擬音も「メメタァ」「グッパオン」「ズギュウウウン」など104種類用意してあります。
出来た画像はtwitpicやFacebookにアップロードしたり、
メールで送信することが出来ます。

Please select whether to use the photo album or to use photos taken with camera.
カメラで撮って作るかアルバムの写真を使って作るか選択して下さい。

You can move photo with touch.
配置された写真はタッチで移動出来ます。

If you touch “Pen” of the bottom.You can draw lines with touch.
画面下の「えんぴつ」をタッチするとタッチで線を描くことが出来ます。

If you touch “Eraser” of the bottom, You can erase lines with touch.
画面下の「消しゴム」をタッチするとタッチで線を消すことが出来ます。

If you touch “Setting” of the bottom, You can set status of “Pen” and “Eraser”.
画面下の「設定」をタッチすると「えんぴつ」と「消しゴム」の設定が出来ます。

If you touch “Balloon” of the bottom, Balloon selection screen will appear, please touch you want to place the balloon.
画面下の「フキダシ」をタッチするとフキダシ選択画面が現れますので、配置したいフキダシにタッチして下さい。

You can scale and rotate the balloon with your two fingers.
配置されたフキダシは二本指で拡大縮小、回転させることが出来ます。

If you tap the balloon twice, Balloon edit screen will appear.
フキダシをすばやく２回タッチするとフキダシ編集画面が現れ、フキダシを編集出来ます。

If you touch “Character” of the bottom, Character selection screen will appear, please touch you want to place the character.
画面下の「特殊文字」をタッチすると特殊文字選択画面が現れますので、配置したい特殊文字にタッチして下さい。

You can scale and rotate the character with your two fingers.
配置された特殊文字はフキダシと同じように二本指で拡大縮小、回転させることが出来ます。

If you tap the character twice, Character remove alert will appear.
特殊文字をすばやく２回タッチすると削除確認画面が現れますので、削除したい場合は「はい」をタッチして下さい。

If you touch “Save” of top right, Go to the save screen.
If you move the slider you can adjust the image size.
画面右上の「保存」をタッチすると
保存画面に移動します。
スライダーを左右に移動させることで画像サイズを調整出来ます。
使用しているiPhone,iPodTouchに保存するときは「アルバムに保存」
メールで送るときは「メールで送る」
Facebookにアップロードするときは「Facebookにｱｯﾌﾟﾛｰﾄﾞ」
Twitpicにアップロードするときは「Twitpicにｱｯﾌﾟﾛｰﾄﾞ」をタッチして下さい。

ちょっとだけ便利なカレンダーです。

This is a little bit handy calendar.

Rc Calendar
Rc Calendar(English)