[CSS3]iPhoneのホーム画面の動きをCSS3+jsで
iPhoneのホーム画面の動きを2つの方法で制作しました。
CSS3のanimationで動かす方法と
CSS3のtransformの値をjQueryのanimateで変化させる方法。
iPhoneで閲覧した場合
前者は動的にanimationの設定をしているので
トゥイーンが始まる時にちょっと動作が止まってしまいます。
後者は滑らかです。
Firefox,Chrome,Safari,iPhoneで動きます。
iPhoneのホーム画面の動きを2つの方法で制作しました。
CSS3のanimationで動かす方法と
CSS3のtransformの値をjQueryのanimateで変化させる方法。
iPhoneで閲覧した場合
前者は動的にanimationの設定をしているので
トゥイーンが始まる時にちょっと動作が止まってしまいます。
後者は滑らかです。
Firefox,Chrome,Safari,iPhoneで動きます。
タイトル通り
四角がクリックした座標へCSS3のanimationを使って移動します。
Firefox,Chrome,Safari,iPhoneで動きます
jQueryプラグインで既にあるようですが後学のために。
CSS3のtransitionでアニメーションするjQueryプラグイン「jQuery transition Animate」[to-R]
参考にしたサイト
CSS3リファレンス
音を出すためのjs
HTML5ではなく小さなflashを利用しているので
ほとんどのブラウザで大丈夫です。
しかし、iPhone,iPadではエラーが起きるので
下記コードみたいに条件判定するとよい。
見た目を変えたいときはaudio.jsの中にCSSの記述があるので
これを書き換える。
※追記 ソースコードをよく見たら、ブラウザによってはHTML5を使っているようです
var isTouch = ('ontouchstart' in window); init_audio(); function init_audio(){ audiojs.events.ready(function() { if(isTouch)return; audiolist=audiojs.createAll(); }); }
参考にしたサイト
audio.js
twitterの画像共有APIが公開されたので遊びました。
参考にしたサイト
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/
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.
フキダシをすばやく2回タッチするとフキダシ編集画面が現れ、フキダシを編集出来ます。
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.
特殊文字をすばやく2回タッチすると削除確認画面が現れますので、削除したい場合は「はい」をタッチして下さい。
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.
iPhoneアプリ作りました。
Objective-Cを初めて触って3週間で制作。
練習で制作し、特におもしろいところもないので次回作をお待ちください。
アプリの機能は写真を撮ってTwitpicにアップするという単純なものです。
Twitterをワード検索して
検索結果にTwitpicのURLがあればリンクさせます。
リンクをクリックで右にその画像が出ます。
参考にしたサイト
https://github.com/meltingice/TwitPic-API-for-Javascript
htmlからpdfを出力します。
UIにはjQueryUIを使っています。
使い方
参考にしたサイト
@IT – jQuery UIで実現! Ajaxで複数選択ドラッグ&ドロップ
http://www.atmarkit.co.jp/fwcr/rensai/ajaxrecipe05/ajaxrecipe05_1.html
ホゲホゲロック
http://hoge2rock.com/154/
mPDF Manual
http://mpdf1.com/manual/index.php
mPDF » Download(Googleキャッシュ)
http://bit.ly/ha1jlM