つくったもの
CSSでiPhone本体の素材をつくる - みかづきブログ その3 CSSでiPhone本体の素材をつくる - みかづきブログ その3こちらの記事が意外に好評だったので、今回もCSSでフラットな素材をつくってみようとおもいます。 前回よりもちょっとニッチなデバイスですが、…
最近、WEBサイトにiPhoneっぽいものを置きたいときがよくあるので、素材用につくってみました。See the Pen hello world. by kimmy (@kimmy) on CodePen.若干デフォルメしてますが、割とサイズ感にこだわってつくってます。つくってから気づいたんですが、簡…
CSSでメッセージアプリ風のUIを再現してみました。 是非ともiPhoneでご観覧頂きたいです。 DEMO See the Pen hello world. by kimmy (@kimmy) on CodePen. HTML <div id="global-wrapper"> <header id="global-header"> <h1 class="ttl">Message</h1> </header> <div id="global-stage"> <div id="global-stage-inner" class="inner"> </div> </div> </div>
sectionを通過するたびに背景色を変更していくモックをつくってみました。 ウィンドウのリサイズには対応していないので、読み込み時のウィンドウサイズのままご利用ください。 JavaScript (function(win, doc, $) { "use strict"; var $win = $(win), $bg =…
chibadge (チバッジ) - 千葉ロッテマリーンズのスコアがバッジで確認できるアプリ のときにつくったCSSを流用してバッジ風のCSSをつくってみました。アイコンの大きさはiOS7、バッジのデザインはiOS6を見本にしています。 See the Pen hello world. by kimmy…
今日までの3日間、「課題解決型」ハードウェアハッカソン Hirameki | GUGEN2014 に参加させてもらってきました。そのなかで、konashiの入力の状態を監視するアプリづくりを担当したのですが、せっかくなのでそのときのソースを公開しておこうと思います。 実…
箇条書きが楽器になったらおもしろいなと思ってモックをつくりました。 箇条書きを書くときに過剰な楽器の音が出る の部分から試してみましょう。 サンプル音源なんで過剰な楽器音ではないですが、タイプ音がでるページをつくってみました。モックは こちら …
ロックに議事録をとれたらおもしろいなと思ってモックをつくりました。 議事録をとるときにロックな音が出る 議事録が楽譜みたいに出力される 重要な部分がサビになるのでわかりやすい そのまま iTunes で販売できる（会議参加者がダウンロードする） という…
以前つくった イエローカード にさらに改良を加え、画面をタップした際にホイッスルっぽい音を出すことにしてみました。 ソース HTML <style> html, body { margin: 0; padding: 0; height: 100%; } #card { width: 100%; height: 100%; background: -webkit-gradie</style>…
先日つくって一部でそれなりに好評いただいた、 イエローカード - js do it と レッドカード - js do it ですが、1つ大きな問題点を抱えていました。そう。それはオンライン環境でないとカードを切れないということです。これは由々しき自体ですね。 オフラ…
千葉ロッテマリーンズのスコアがバッジで確認できるアプリことchibadge（チバッジ） 。 われながらできばえには非常に満足しておりますが、1点だけ不便に思っていることがあります。それはDockに他のアプリを置くスペースがなくなってしまったこと。 そこで…
ワールドカップがもりあがっていますね。以前、 iPhoneを振ってイエローカードを出すページ をつくりましたが、今回はシンプルにアクセスした時点でiPhoneをイエローカードみたいにするページをつくりました。 イエローカード イエローカード - js do it つ…
iPhoneを振っているときと振ってないとき用の関数を渡すと一定時間毎に実行するクラスをつくりました。 現状はインスタンスを返しませんが、のちのちメソッドを実装したいと思っているので new で実行しています。 ソースコード /** * opt_moveFunc // iPhon…
chibadge shiro 以上に申請に手こずった chibadge kuro ですが、本日ついにリリースできました。chibadge kuro - マリーンズの失点がバッジで確認できるアプリFumitaka KIMIZUKAスポーツ無料これで先日公開した、chibadge shirochibadge shiro - マリーンズ…
最近、ウィンドウズストアアプリをつくっていて、Windowsタブレットをつかう機会に恵まれまくっているのですが。Windowsタブレットにはタッチした箇所にタッチした感を演出する機種が結構あります。その演出とおんなじような体験の再現を目指してコードを書…
chibadge（チバッジ）とは chibadge（チバッジ）は千葉ロッテマリーンズのスコアをバッジで伝えてくれる世界一ミニマルな野球速報アプリです。 ※ chibadgeはマリーンズファンが勝手につくった千葉ロッテマリーンズ非公式アプリです。 chibadge (チバッジ) - …
iPhoneのSafariで開くとChromeのバナーと、Chromeへ招待するボタンが表示されます。 動作原理 URLスキーム mobile Safari の URLバーに、 googlechrome:// と入力すると（Chromeをインストール済みであれば）Chromeを開くことができます。 また、その際に、 …
試しにつくってみました。こちらのサイト をFacebookでシェアし、 iPhoneのFacebookアプリで見てみると、本文が途中までしか表示されず、Safariで開くようにサジェストされます。Safariで開くと、隠れていた部分が徐々に表示されていきます。原理としてはユ…
こちらの記事 で紹介した過去につくっていたプロダクトですが、過去のSNSアカウントを整理していたらアーカイブ映像がわんさかでてきました。 車の中のイメージ すごくよく映ってます。 名刺の組み立て方 映りがいまいちです。無音なのも寂しいですね。 ダン…
（ ）
寿司屋で急にインディアンポーカーがやりたくなったのでつくってみました。 iPhoneだけで簡単なWEBアプリがつくれてしまう jsdo.it 。ごいすーですね。 ※ スマフォからだとえらいことコードが打ちにくいですが。 つかいかた スマフォで http://jsrun.it/kimm…
かれこれ6年前ぐらいのできごとですが、当時の僕は車の中で鑑賞するコンテンツの制作を目指していました。 surprise_window_makerその名もサプライズ・ウィンドウ。 子供の頃、車の中で考えていたことの具現化を試みた一品です。 車窓から見える景色をステー…
2010年にDeveloper登録してから、はや4年。 先日、ようやく1本目のアプリをリリースすることができました。ずーしーほっきーのリフティングFumitaka KIMIZUKAソーシャルネットワーキング無料このアプリをリリースするまでに、 実に5本のアプリがリジェクトさ…
例えば、マリーンズのオフィシャルサイトを普通にシェアすると、OGP画像はマリーンズのロゴになります。しかし、下記の福浦シェアボタンをつかえば、、、てってれー。OGP画像を福浦の画像にしてオフィシャルサイトをシェアすることができます。 個人的にはミ…
3年前にリジェクトされたアプリをWEBアプリでリメイクしてみました。 画面をタップする iPhoneを下向きに構える 素早く上向きにする の3ステップでイエローカードがだせます。 http://jsrun.it/kimmy/yellow/
今更ですが、アジアンカンフージェネレーションがローリングストーンという曲をYouTubeにアップしていたことに気づいたのでつくってみました。ローディング・ストーンズ とか ライク・ア・ローディング・ストーン の横展開というか手抜き記事です。
昨日は鎌倉でのハッカソンに参加してきました。 上記デモはそのときに 教えてもらったライブラリ をつかってます。franzenzenhofer/box2d-jquery · GitHub落とした後の文字はドラッグ＆ドロップで放り投げることもできます。これで話を落とし放題ですね。
ローディング・ストーンズ が思いのほか好評だったのでForkしてつくってみました。 演出はつかいまわしです。
こちら のリフティングアプリですが、いちかばちか申請してみたら無事に審査を通過して ストアに公開されました。ずーしーほっきーのリフティングFumitaka KIMIZUKAソーシャルネットワーキング無料これによって僕の連続リジェクト記録が5でストップしました。
こちらでつくったもの を改修しました。今回はiPhoneにも対応しております。 つかいかた1. アイコンをブックマークバーにドラックして登録 2. オンガクスリ（ http://ongakusuri.com ）にアクセス 3. マイページへ移動 4. 投稿した音楽ページに移動 5. 投稿…
